-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdocumentation.html
More file actions
153 lines (139 loc) · 7.34 KB
/
Copy pathdocumentation.html
File metadata and controls
153 lines (139 loc) · 7.34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DBGrader Help</title>
<link rel="stylesheet" href="css/documentation.css">
</head>
<body>
<div class="container">
<h1>DBGrader Help</h1>
<p style="font-size: 16px; color: #6c757d; margin-bottom: 20px;">
Practice SQL in your browser. DBGrader runs <strong>SQLite</strong> locally, lets you explore the database,
and grades your answer by comparing <strong>query results</strong>—not by matching your SQL text to a single “correct” string.
</p>
<div class="nav-tabs">
<button type="button" class="nav-tab active" onclick="showTab('getting-started', this)">Getting Started</button>
<button type="button" class="nav-tab" onclick="showTab('interface', this)">Interface</button>
<button type="button" class="nav-tab" onclick="showTab('explore', this)">Explore Commands</button>
<button type="button" class="nav-tab" onclick="showTab('tips', this)">Tips</button>
</div>
<div id="getting-started" class="tab-content active">
<h2>Getting Started</h2>
<ol>
<li>Read the exercise prompt carefully.</li>
<li>For SQL exercises: use <strong>Run</strong> to try SQL and explore the database (not graded).</li>
<li>For upload exercises: choose your <code>.sqlite3</code> file, optionally <strong>Explore (.tables)</strong>, then <strong>Check database</strong>.</li>
<li>When you think you are done, click <strong>Check Answer</strong> (or <strong>Check database</strong>).</li>
<li>If correct, your grade can be sent to the LMS. If not, read the feedback and try again.</li>
</ol>
<div class="tip">
<h4>Fresh database every time</h4>
<p>For SQL exercises, each Run and Check Answer starts from a clean in-memory database with the exercise setup applied.
Changes from a previous Run do not stick around. Upload exercises grade the file you select.</p>
</div>
<div class="example">
<h4>Typical flow</h4>
<div class="code-block">SHOW TABLES;
DESCRIBE pantry_items;
SELECT item_name, weight_oz FROM pantry_items WHERE weight_oz > 30;
— then Check Answer</div>
</div>
</div>
<div id="interface" class="tab-content">
<h2>Learner Interface</h2>
<ul>
<li><strong>Prompt</strong> — what you need to solve</li>
<li><strong>Your SQL</strong> — editor (may already contain starter SQL from your instructor)</li>
<li><strong>Run</strong> — execute your SQL or an explore command (not graded)</li>
<li><strong>Check Answer</strong> — grade your submission</li>
<li><strong>Reset</strong> — restore starter SQL and clear the result panel</li>
</ul>
<h3>Exploration vs grading</h3>
<p>Meta-commands like <code>.tables</code>, <code>SHOW TABLES</code>, and <code>\dt</code> are for exploration with <strong>Run</strong> only.
They are not accepted as a graded Check Answer—submit real SQL for grading.</p>
</div>
<div id="explore" class="tab-content">
<h2>Exploration Commands</h2>
<p>These work with <strong>Run</strong>. MySQL- and PostgreSQL-style commands show a note that they were converted to SQLite.
<code>.help</code> lists the sqlite3-style names only.</p>
<h3>SQLite shell style</h3>
<table class="instruction-table">
<thead>
<tr><th>Command</th><th>Purpose</th></tr>
</thead>
<tbody>
<tr><td>.tables</td><td>List tables</td></tr>
<tr><td>.schema [table]</td><td>Show CREATE statements</td></tr>
<tr><td>.indexes [table]</td><td>List indexes</td></tr>
<tr><td>.databases</td><td>Show attached database</td></tr>
<tr><td>.columns table</td><td>Column info</td></tr>
<tr><td>.foreignkeys table</td><td>Foreign keys</td></tr>
<tr><td>.describe table</td><td>Columns, indexes, FKs, CREATE</td></tr>
<tr><td>.help</td><td>Command list (sqlite3 names)</td></tr>
</tbody>
</table>
<h3>MySQL style</h3>
<table class="instruction-table">
<thead>
<tr><th>Command</th><th>Purpose</th></tr>
</thead>
<tbody>
<tr><td>SHOW TABLES [LIKE 'p%']</td><td>List tables</td></tr>
<tr><td>SHOW DATABASES</td><td>Attached database</td></tr>
<tr><td>DESCRIBE table / DESC table</td><td>Column info</td></tr>
<tr><td>SHOW CREATE TABLE table</td><td>CREATE statement</td></tr>
<tr><td>SHOW INDEX FROM table</td><td>Indexes</td></tr>
</tbody>
</table>
<h3>PostgreSQL (psql) style</h3>
<table class="instruction-table">
<thead>
<tr><th>Command</th><th>Purpose</th></tr>
</thead>
<tbody>
<tr><td>\dt</td><td>List tables</td></tr>
<tr><td>\d</td><td>List tables and views</td></tr>
<tr><td>\d table</td><td>Describe a table</td></tr>
<tr><td>\di</td><td>List indexes</td></tr>
<tr><td>\dv</td><td>List views</td></tr>
<tr><td>\l</td><td>Attached database</td></tr>
<tr><td>\?</td><td>Help</td></tr>
</tbody>
</table>
<div class="tip">
<h4>Still SQLite under the hood</h4>
<p>Only these exploration helpers are translated. Your graded SQL runs as SQLite.</p>
</div>
</div>
<div id="tips" class="tab-content">
<h2>Tips</h2>
<ul>
<li>There can be more than one correct query—matching the expected result matters.</li>
<li>If row order is part of the exercise, use <code>ORDER BY</code>.</li>
<li>Use explore commands to learn the schema before writing your final query.</li>
<li>Read the feedback after Check Answer; it often points at column or row mismatches.</li>
</ul>
</div>
<hr class="doc-rule">
<div class="footer-about">
<h3>DBGrader</h3>
<p>In-browser SQLite practice for Tsugi / DJ4E courses.</p>
</div>
</div>
<script>
function showTab(tabName, buttonEl) {
document.querySelectorAll('.tab-content').forEach(function (content) {
content.classList.remove('active');
});
document.querySelectorAll('.nav-tab').forEach(function (tab) {
tab.classList.remove('active');
});
var panel = document.getElementById(tabName);
if (panel) panel.classList.add('active');
if (buttonEl) buttonEl.classList.add('active');
}
</script>
</body>
</html>