learn_bash_from_session_data 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bash-learner-output/run-2026-02-05-154214/index.html +3848 -0
- package/bash-learner-output/run-2026-02-05-154214/summary.json +148 -0
- package/bash-learner-output/run-2026-02-05-155427/index.html +3900 -0
- package/bash-learner-output/run-2026-02-05-155427/summary.json +157 -0
- package/bash-learner-output/run-2026-02-05-155949/index.html +4514 -0
- package/bash-learner-output/run-2026-02-05-155949/summary.json +163 -0
- package/package.json +1 -1
- package/scripts/html_generator.py +124 -37
- package/scripts/main.py +190 -17
- package/scripts/quiz_generator.py +84 -23
|
@@ -0,0 +1,3848 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Bash Command Learning Report</title>
|
|
7
|
+
<style>
|
|
8
|
+
|
|
9
|
+
/* CSS Reset and Base */
|
|
10
|
+
*, *::before, *::after {
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
margin: 0;
|
|
13
|
+
padding: 0;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
:root {
|
|
17
|
+
--bg-primary: #ffffff;
|
|
18
|
+
--bg-secondary: #f8f9fa;
|
|
19
|
+
--bg-tertiary: #e9ecef;
|
|
20
|
+
--text-primary: #212529;
|
|
21
|
+
--text-secondary: #6c757d;
|
|
22
|
+
--text-muted: #adb5bd;
|
|
23
|
+
--border-color: #dee2e6;
|
|
24
|
+
--accent-primary: #4285f4;
|
|
25
|
+
--accent-success: #34a853;
|
|
26
|
+
--accent-warning: #fbbc05;
|
|
27
|
+
--accent-danger: #ea4335;
|
|
28
|
+
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
|
|
29
|
+
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
|
|
30
|
+
--shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
|
|
31
|
+
--radius-sm: 4px;
|
|
32
|
+
--radius-md: 8px;
|
|
33
|
+
--radius-lg: 12px;
|
|
34
|
+
--font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
|
|
35
|
+
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
36
|
+
--transition-fast: 150ms ease;
|
|
37
|
+
--transition-normal: 250ms ease;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
[data-theme="dark"] {
|
|
41
|
+
--bg-primary: #1a1a2e;
|
|
42
|
+
--bg-secondary: #16213e;
|
|
43
|
+
--bg-tertiary: #0f3460;
|
|
44
|
+
--text-primary: #eaeaea;
|
|
45
|
+
--text-secondary: #a0a0a0;
|
|
46
|
+
--text-muted: #666666;
|
|
47
|
+
--border-color: #2d2d4a;
|
|
48
|
+
--shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
|
|
49
|
+
--shadow-md: 0 4px 6px rgba(0,0,0,0.3);
|
|
50
|
+
--shadow-lg: 0 10px 25px rgba(0,0,0,0.4);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
html {
|
|
54
|
+
font-size: 16px;
|
|
55
|
+
scroll-behavior: smooth;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
body {
|
|
59
|
+
font-family: var(--font-sans);
|
|
60
|
+
background: var(--bg-secondary);
|
|
61
|
+
color: var(--text-primary);
|
|
62
|
+
line-height: 1.6;
|
|
63
|
+
min-height: 100vh;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Container */
|
|
67
|
+
.container {
|
|
68
|
+
max-width: 1400px;
|
|
69
|
+
margin: 0 auto;
|
|
70
|
+
padding: 20px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Header */
|
|
74
|
+
.header {
|
|
75
|
+
display: flex;
|
|
76
|
+
justify-content: space-between;
|
|
77
|
+
align-items: center;
|
|
78
|
+
padding: 24px 32px;
|
|
79
|
+
background: var(--bg-primary);
|
|
80
|
+
border-radius: var(--radius-lg);
|
|
81
|
+
box-shadow: var(--shadow-md);
|
|
82
|
+
margin-bottom: 20px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.header h1 {
|
|
86
|
+
font-size: 1.75rem;
|
|
87
|
+
font-weight: 700;
|
|
88
|
+
color: var(--text-primary);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.subtitle {
|
|
92
|
+
color: var(--text-secondary);
|
|
93
|
+
font-size: 0.9rem;
|
|
94
|
+
margin-top: 4px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.theme-toggle {
|
|
98
|
+
background: var(--bg-tertiary);
|
|
99
|
+
border: none;
|
|
100
|
+
border-radius: 50%;
|
|
101
|
+
width: 44px;
|
|
102
|
+
height: 44px;
|
|
103
|
+
cursor: pointer;
|
|
104
|
+
display: flex;
|
|
105
|
+
align-items: center;
|
|
106
|
+
justify-content: center;
|
|
107
|
+
transition: var(--transition-fast);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.theme-toggle:hover {
|
|
111
|
+
transform: scale(1.05);
|
|
112
|
+
box-shadow: var(--shadow-sm);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.theme-icon {
|
|
116
|
+
font-size: 1.25rem;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.dark-icon { display: none; }
|
|
120
|
+
[data-theme="dark"] .light-icon { display: none; }
|
|
121
|
+
[data-theme="dark"] .dark-icon { display: inline; }
|
|
122
|
+
|
|
123
|
+
/* Tabs */
|
|
124
|
+
.tabs {
|
|
125
|
+
display: flex;
|
|
126
|
+
gap: 8px;
|
|
127
|
+
padding: 8px;
|
|
128
|
+
background: var(--bg-primary);
|
|
129
|
+
border-radius: var(--radius-lg);
|
|
130
|
+
box-shadow: var(--shadow-sm);
|
|
131
|
+
margin-bottom: 20px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.tab {
|
|
135
|
+
flex: 1;
|
|
136
|
+
display: flex;
|
|
137
|
+
align-items: center;
|
|
138
|
+
justify-content: center;
|
|
139
|
+
gap: 8px;
|
|
140
|
+
padding: 14px 20px;
|
|
141
|
+
background: transparent;
|
|
142
|
+
border: none;
|
|
143
|
+
border-radius: var(--radius-md);
|
|
144
|
+
color: var(--text-secondary);
|
|
145
|
+
font-size: 0.95rem;
|
|
146
|
+
font-weight: 500;
|
|
147
|
+
cursor: pointer;
|
|
148
|
+
transition: var(--transition-fast);
|
|
149
|
+
position: relative;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.tab:hover {
|
|
153
|
+
background: var(--bg-tertiary);
|
|
154
|
+
color: var(--text-primary);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.tab.active {
|
|
158
|
+
background: var(--accent-primary);
|
|
159
|
+
color: white;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.tab-icon {
|
|
163
|
+
font-size: 1.1rem;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.tab-key {
|
|
167
|
+
position: absolute;
|
|
168
|
+
top: 4px;
|
|
169
|
+
right: 8px;
|
|
170
|
+
font-size: 0.7rem;
|
|
171
|
+
opacity: 0.5;
|
|
172
|
+
font-family: var(--font-mono);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/* Content Panels */
|
|
176
|
+
.content {
|
|
177
|
+
background: var(--bg-primary);
|
|
178
|
+
border-radius: var(--radius-lg);
|
|
179
|
+
box-shadow: var(--shadow-md);
|
|
180
|
+
min-height: 500px;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.panel {
|
|
184
|
+
display: none;
|
|
185
|
+
padding: 32px;
|
|
186
|
+
animation: fadeIn 0.3s ease;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.panel.active {
|
|
190
|
+
display: block;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
@keyframes fadeIn {
|
|
194
|
+
from { opacity: 0; transform: translateY(10px); }
|
|
195
|
+
to { opacity: 1; transform: translateY(0); }
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
/* Dashboard / Overview */
|
|
199
|
+
.dashboard {
|
|
200
|
+
display: flex;
|
|
201
|
+
flex-direction: column;
|
|
202
|
+
gap: 24px;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.stats-grid {
|
|
206
|
+
display: grid;
|
|
207
|
+
grid-template-columns: repeat(4, 1fr);
|
|
208
|
+
gap: 16px;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.stat-card {
|
|
212
|
+
background: var(--bg-secondary);
|
|
213
|
+
padding: 24px;
|
|
214
|
+
border-radius: var(--radius-md);
|
|
215
|
+
text-align: center;
|
|
216
|
+
transition: var(--transition-fast);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.stat-card:hover {
|
|
220
|
+
transform: translateY(-2px);
|
|
221
|
+
box-shadow: var(--shadow-sm);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.stat-value {
|
|
225
|
+
font-size: 2.5rem;
|
|
226
|
+
font-weight: 700;
|
|
227
|
+
color: var(--accent-primary);
|
|
228
|
+
line-height: 1.2;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.stat-value.date-value {
|
|
232
|
+
font-size: 1rem;
|
|
233
|
+
font-family: var(--font-mono);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.stat-label {
|
|
237
|
+
font-size: 0.9rem;
|
|
238
|
+
color: var(--text-secondary);
|
|
239
|
+
margin-top: 8px;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.charts-row {
|
|
243
|
+
display: grid;
|
|
244
|
+
grid-template-columns: repeat(2, 1fr);
|
|
245
|
+
gap: 24px;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.chart-card {
|
|
249
|
+
background: var(--bg-secondary);
|
|
250
|
+
padding: 24px;
|
|
251
|
+
border-radius: var(--radius-md);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.chart-card.wide {
|
|
255
|
+
grid-column: span 1;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.chart-card h3 {
|
|
259
|
+
font-size: 1.1rem;
|
|
260
|
+
font-weight: 600;
|
|
261
|
+
margin-bottom: 20px;
|
|
262
|
+
color: var(--text-primary);
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
/* Complexity Bars */
|
|
266
|
+
.complexity-bars {
|
|
267
|
+
display: flex;
|
|
268
|
+
flex-direction: column;
|
|
269
|
+
gap: 16px;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.complexity-row {
|
|
273
|
+
display: grid;
|
|
274
|
+
grid-template-columns: 100px 1fr 50px;
|
|
275
|
+
align-items: center;
|
|
276
|
+
gap: 12px;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.complexity-label {
|
|
280
|
+
font-size: 0.85rem;
|
|
281
|
+
font-weight: 500;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.complexity-label.simple { color: var(--accent-success); }
|
|
285
|
+
.complexity-label.intermediate { color: var(--accent-warning); }
|
|
286
|
+
.complexity-label.advanced { color: var(--accent-danger); }
|
|
287
|
+
|
|
288
|
+
.complexity-bar-bg {
|
|
289
|
+
height: 24px;
|
|
290
|
+
background: var(--bg-tertiary);
|
|
291
|
+
border-radius: var(--radius-sm);
|
|
292
|
+
overflow: hidden;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.complexity-bar {
|
|
296
|
+
height: 100%;
|
|
297
|
+
border-radius: var(--radius-sm);
|
|
298
|
+
transition: width 0.5s ease;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.complexity-bar.simple { background: var(--accent-success); }
|
|
302
|
+
.complexity-bar.intermediate { background: var(--accent-warning); }
|
|
303
|
+
.complexity-bar.advanced { background: var(--accent-danger); }
|
|
304
|
+
|
|
305
|
+
.complexity-count {
|
|
306
|
+
font-size: 0.9rem;
|
|
307
|
+
font-weight: 600;
|
|
308
|
+
text-align: right;
|
|
309
|
+
color: var(--text-secondary);
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
/* Pie Chart */
|
|
313
|
+
.pie-container {
|
|
314
|
+
display: flex;
|
|
315
|
+
align-items: center;
|
|
316
|
+
gap: 24px;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.pie-chart {
|
|
320
|
+
width: 160px;
|
|
321
|
+
height: 160px;
|
|
322
|
+
flex-shrink: 0;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.category-legend {
|
|
326
|
+
display: flex;
|
|
327
|
+
flex-direction: column;
|
|
328
|
+
gap: 8px;
|
|
329
|
+
flex: 1;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.legend-item {
|
|
333
|
+
display: flex;
|
|
334
|
+
align-items: center;
|
|
335
|
+
gap: 8px;
|
|
336
|
+
font-size: 0.85rem;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.legend-color {
|
|
340
|
+
width: 12px;
|
|
341
|
+
height: 12px;
|
|
342
|
+
border-radius: 2px;
|
|
343
|
+
flex-shrink: 0;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.legend-label {
|
|
347
|
+
flex: 1;
|
|
348
|
+
color: var(--text-primary);
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.legend-count {
|
|
352
|
+
color: var(--text-secondary);
|
|
353
|
+
font-weight: 500;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
/* Top Commands */
|
|
357
|
+
.top-commands {
|
|
358
|
+
display: flex;
|
|
359
|
+
flex-direction: column;
|
|
360
|
+
gap: 12px;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
.top-command-item {
|
|
364
|
+
display: grid;
|
|
365
|
+
grid-template-columns: 120px 1fr 50px;
|
|
366
|
+
align-items: center;
|
|
367
|
+
gap: 12px;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.top-command-name code {
|
|
371
|
+
font-size: 0.85rem;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.top-command-bar-container {
|
|
375
|
+
height: 20px;
|
|
376
|
+
background: var(--bg-tertiary);
|
|
377
|
+
border-radius: var(--radius-sm);
|
|
378
|
+
overflow: hidden;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
.top-command-bar {
|
|
382
|
+
height: 100%;
|
|
383
|
+
background: linear-gradient(90deg, var(--accent-primary), #7baaf7);
|
|
384
|
+
border-radius: var(--radius-sm);
|
|
385
|
+
transition: width 0.5s ease;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
.top-command-count {
|
|
389
|
+
font-size: 0.9rem;
|
|
390
|
+
font-weight: 600;
|
|
391
|
+
text-align: right;
|
|
392
|
+
color: var(--text-secondary);
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
/* New Commands */
|
|
396
|
+
.new-commands {
|
|
397
|
+
display: flex;
|
|
398
|
+
flex-wrap: wrap;
|
|
399
|
+
gap: 12px;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
.new-command-chip {
|
|
403
|
+
display: flex;
|
|
404
|
+
flex-direction: column;
|
|
405
|
+
gap: 4px;
|
|
406
|
+
padding: 12px 16px;
|
|
407
|
+
background: var(--bg-tertiary);
|
|
408
|
+
border-radius: var(--radius-md);
|
|
409
|
+
border-left: 3px solid var(--accent-success);
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
.new-command-chip code {
|
|
413
|
+
font-size: 0.9rem;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
.first-seen {
|
|
417
|
+
font-size: 0.75rem;
|
|
418
|
+
color: var(--text-muted);
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
/* Commands Tab */
|
|
422
|
+
.commands-container {
|
|
423
|
+
display: flex;
|
|
424
|
+
flex-direction: column;
|
|
425
|
+
gap: 20px;
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
.commands-toolbar {
|
|
429
|
+
display: flex;
|
|
430
|
+
gap: 16px;
|
|
431
|
+
align-items: center;
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
.search-box {
|
|
435
|
+
flex: 1;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
.search-box input {
|
|
439
|
+
width: 100%;
|
|
440
|
+
padding: 12px 16px;
|
|
441
|
+
border: 2px solid var(--border-color);
|
|
442
|
+
border-radius: var(--radius-md);
|
|
443
|
+
font-size: 0.95rem;
|
|
444
|
+
background: var(--bg-secondary);
|
|
445
|
+
color: var(--text-primary);
|
|
446
|
+
transition: var(--transition-fast);
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
.search-box input:focus {
|
|
450
|
+
outline: none;
|
|
451
|
+
border-color: var(--accent-primary);
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.sort-controls {
|
|
455
|
+
display: flex;
|
|
456
|
+
align-items: center;
|
|
457
|
+
gap: 8px;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
.sort-controls label {
|
|
461
|
+
font-size: 0.9rem;
|
|
462
|
+
color: var(--text-secondary);
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
.sort-controls select {
|
|
466
|
+
padding: 10px 14px;
|
|
467
|
+
border: 2px solid var(--border-color);
|
|
468
|
+
border-radius: var(--radius-md);
|
|
469
|
+
background: var(--bg-secondary);
|
|
470
|
+
color: var(--text-primary);
|
|
471
|
+
font-size: 0.9rem;
|
|
472
|
+
cursor: pointer;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
.filter-chips {
|
|
476
|
+
display: flex;
|
|
477
|
+
flex-wrap: wrap;
|
|
478
|
+
gap: 8px;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
.filter-chip {
|
|
482
|
+
padding: 8px 16px;
|
|
483
|
+
border: 2px solid var(--border-color);
|
|
484
|
+
border-radius: 20px;
|
|
485
|
+
background: transparent;
|
|
486
|
+
color: var(--text-secondary);
|
|
487
|
+
font-size: 0.85rem;
|
|
488
|
+
cursor: pointer;
|
|
489
|
+
transition: var(--transition-fast);
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
.filter-chip:hover {
|
|
493
|
+
border-color: var(--accent-primary);
|
|
494
|
+
color: var(--accent-primary);
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
.filter-chip.active {
|
|
498
|
+
background: var(--accent-primary);
|
|
499
|
+
border-color: var(--accent-primary);
|
|
500
|
+
color: white;
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
.commands-list {
|
|
504
|
+
display: flex;
|
|
505
|
+
flex-direction: column;
|
|
506
|
+
gap: 12px;
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
.command-card {
|
|
510
|
+
border: 1px solid var(--border-color);
|
|
511
|
+
border-radius: var(--radius-md);
|
|
512
|
+
overflow: hidden;
|
|
513
|
+
transition: var(--transition-fast);
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
.command-card:hover {
|
|
517
|
+
box-shadow: var(--shadow-sm);
|
|
518
|
+
}
|
|
519
|
+
|
|
520
|
+
.command-card.hidden {
|
|
521
|
+
display: none;
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
.command-header {
|
|
525
|
+
display: flex;
|
|
526
|
+
justify-content: space-between;
|
|
527
|
+
align-items: center;
|
|
528
|
+
padding: 16px 20px;
|
|
529
|
+
background: var(--bg-secondary);
|
|
530
|
+
cursor: pointer;
|
|
531
|
+
transition: var(--transition-fast);
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
.command-header:hover {
|
|
535
|
+
background: var(--bg-tertiary);
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
.command-main {
|
|
539
|
+
display: flex;
|
|
540
|
+
align-items: center;
|
|
541
|
+
gap: 12px;
|
|
542
|
+
}
|
|
543
|
+
|
|
544
|
+
.command-meta {
|
|
545
|
+
display: flex;
|
|
546
|
+
align-items: center;
|
|
547
|
+
gap: 16px;
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
.frequency {
|
|
551
|
+
font-size: 0.85rem;
|
|
552
|
+
color: var(--text-secondary);
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
.expand-icon {
|
|
556
|
+
color: var(--text-muted);
|
|
557
|
+
transition: transform var(--transition-fast);
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
.command-card.expanded .expand-icon {
|
|
561
|
+
transform: rotate(180deg);
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
.command-details {
|
|
565
|
+
display: none;
|
|
566
|
+
padding: 20px;
|
|
567
|
+
border-top: 1px solid var(--border-color);
|
|
568
|
+
background: var(--bg-primary);
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
.command-details.show {
|
|
572
|
+
display: block;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
.command-details h5 {
|
|
576
|
+
font-size: 0.85rem;
|
|
577
|
+
font-weight: 600;
|
|
578
|
+
color: var(--text-secondary);
|
|
579
|
+
margin-bottom: 8px;
|
|
580
|
+
text-transform: uppercase;
|
|
581
|
+
letter-spacing: 0.5px;
|
|
582
|
+
}
|
|
583
|
+
|
|
584
|
+
.command-details > div {
|
|
585
|
+
margin-bottom: 20px;
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
.command-details > div:last-child {
|
|
589
|
+
margin-bottom: 0;
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
.flags-list {
|
|
593
|
+
list-style: none;
|
|
594
|
+
display: flex;
|
|
595
|
+
flex-direction: column;
|
|
596
|
+
gap: 8px;
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
.flags-list li {
|
|
600
|
+
display: flex;
|
|
601
|
+
align-items: baseline;
|
|
602
|
+
gap: 8px;
|
|
603
|
+
font-size: 0.9rem;
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
.output-preview {
|
|
607
|
+
background: var(--bg-secondary);
|
|
608
|
+
padding: 16px;
|
|
609
|
+
border-radius: var(--radius-md);
|
|
610
|
+
font-family: var(--font-mono);
|
|
611
|
+
font-size: 0.85rem;
|
|
612
|
+
overflow-x: auto;
|
|
613
|
+
white-space: pre-wrap;
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
/* Syntax Highlighting */
|
|
617
|
+
code, pre {
|
|
618
|
+
font-family: var(--font-mono);
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
code.cmd, .syntax-highlighted .cmd {
|
|
622
|
+
color: #4285f4;
|
|
623
|
+
font-weight: 600;
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
code.flag, .syntax-highlighted .flag {
|
|
627
|
+
color: #34a853;
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
.syntax-highlighted .string {
|
|
631
|
+
color: #ff6d01;
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
.syntax-highlighted .operator {
|
|
635
|
+
color: #9c27b0;
|
|
636
|
+
font-weight: 600;
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
.syntax-highlighted .path {
|
|
640
|
+
color: #6c757d;
|
|
641
|
+
}
|
|
642
|
+
|
|
643
|
+
.syntax-highlighted .variable {
|
|
644
|
+
color: #ea4335;
|
|
645
|
+
}
|
|
646
|
+
|
|
647
|
+
.syntax-highlighted {
|
|
648
|
+
background: var(--bg-secondary);
|
|
649
|
+
padding: 12px 16px;
|
|
650
|
+
border-radius: var(--radius-md);
|
|
651
|
+
font-size: 0.9rem;
|
|
652
|
+
overflow-x: auto;
|
|
653
|
+
white-space: pre-wrap;
|
|
654
|
+
}
|
|
655
|
+
|
|
656
|
+
/* Badges */
|
|
657
|
+
.complexity-badge {
|
|
658
|
+
padding: 4px 10px;
|
|
659
|
+
border-radius: 12px;
|
|
660
|
+
font-size: 0.75rem;
|
|
661
|
+
font-weight: 600;
|
|
662
|
+
text-transform: uppercase;
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
.complexity-badge.simple {
|
|
666
|
+
background: rgba(52, 168, 83, 0.15);
|
|
667
|
+
color: var(--accent-success);
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
.complexity-badge.intermediate {
|
|
671
|
+
background: rgba(251, 188, 5, 0.15);
|
|
672
|
+
color: #d49a00;
|
|
673
|
+
}
|
|
674
|
+
|
|
675
|
+
.complexity-badge.advanced {
|
|
676
|
+
background: rgba(234, 67, 53, 0.15);
|
|
677
|
+
color: var(--accent-danger);
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
.category-badge {
|
|
681
|
+
padding: 4px 10px;
|
|
682
|
+
border-radius: 12px;
|
|
683
|
+
font-size: 0.75rem;
|
|
684
|
+
background: var(--bg-tertiary);
|
|
685
|
+
color: var(--text-secondary);
|
|
686
|
+
}
|
|
687
|
+
|
|
688
|
+
/* Lessons Tab */
|
|
689
|
+
.lessons-container {
|
|
690
|
+
display: flex;
|
|
691
|
+
flex-direction: column;
|
|
692
|
+
gap: 32px;
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
.lesson-section {
|
|
696
|
+
border: 1px solid var(--border-color);
|
|
697
|
+
border-radius: var(--radius-lg);
|
|
698
|
+
overflow: hidden;
|
|
699
|
+
}
|
|
700
|
+
|
|
701
|
+
.lesson-title {
|
|
702
|
+
display: flex;
|
|
703
|
+
align-items: center;
|
|
704
|
+
gap: 12px;
|
|
705
|
+
padding: 20px 24px;
|
|
706
|
+
background: var(--bg-secondary);
|
|
707
|
+
font-size: 1.25rem;
|
|
708
|
+
font-weight: 600;
|
|
709
|
+
border-bottom: 1px solid var(--border-color);
|
|
710
|
+
}
|
|
711
|
+
|
|
712
|
+
.lesson-icon {
|
|
713
|
+
font-size: 1.5rem;
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
.lesson-count {
|
|
717
|
+
font-size: 0.9rem;
|
|
718
|
+
font-weight: 400;
|
|
719
|
+
color: var(--text-secondary);
|
|
720
|
+
margin-left: auto;
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
.lesson-content {
|
|
724
|
+
padding: 24px;
|
|
725
|
+
}
|
|
726
|
+
|
|
727
|
+
.concept-overview {
|
|
728
|
+
margin-bottom: 24px;
|
|
729
|
+
padding: 16px;
|
|
730
|
+
background: var(--bg-secondary);
|
|
731
|
+
border-radius: var(--radius-md);
|
|
732
|
+
border-left: 4px solid var(--accent-primary);
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
.concept-overview h4 {
|
|
736
|
+
font-size: 0.9rem;
|
|
737
|
+
font-weight: 600;
|
|
738
|
+
margin-bottom: 8px;
|
|
739
|
+
color: var(--accent-primary);
|
|
740
|
+
}
|
|
741
|
+
|
|
742
|
+
.concept-overview p {
|
|
743
|
+
color: var(--text-secondary);
|
|
744
|
+
line-height: 1.7;
|
|
745
|
+
}
|
|
746
|
+
|
|
747
|
+
.lesson-commands h4 {
|
|
748
|
+
font-size: 1rem;
|
|
749
|
+
font-weight: 600;
|
|
750
|
+
margin-bottom: 16px;
|
|
751
|
+
}
|
|
752
|
+
|
|
753
|
+
.lesson-command {
|
|
754
|
+
padding: 16px;
|
|
755
|
+
background: var(--bg-secondary);
|
|
756
|
+
border-radius: var(--radius-md);
|
|
757
|
+
margin-bottom: 12px;
|
|
758
|
+
}
|
|
759
|
+
|
|
760
|
+
.lesson-command:last-child {
|
|
761
|
+
margin-bottom: 0;
|
|
762
|
+
}
|
|
763
|
+
|
|
764
|
+
.lesson-command-header {
|
|
765
|
+
display: flex;
|
|
766
|
+
align-items: center;
|
|
767
|
+
gap: 12px;
|
|
768
|
+
margin-bottom: 12px;
|
|
769
|
+
}
|
|
770
|
+
|
|
771
|
+
.lesson-description {
|
|
772
|
+
margin-top: 12px;
|
|
773
|
+
color: var(--text-secondary);
|
|
774
|
+
font-size: 0.9rem;
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
.patterns {
|
|
778
|
+
margin-top: 24px;
|
|
779
|
+
padding-top: 20px;
|
|
780
|
+
border-top: 1px solid var(--border-color);
|
|
781
|
+
}
|
|
782
|
+
|
|
783
|
+
.patterns h4 {
|
|
784
|
+
font-size: 0.95rem;
|
|
785
|
+
font-weight: 600;
|
|
786
|
+
margin-bottom: 12px;
|
|
787
|
+
}
|
|
788
|
+
|
|
789
|
+
.patterns ul {
|
|
790
|
+
list-style: none;
|
|
791
|
+
display: flex;
|
|
792
|
+
flex-direction: column;
|
|
793
|
+
gap: 8px;
|
|
794
|
+
}
|
|
795
|
+
|
|
796
|
+
.patterns li {
|
|
797
|
+
display: flex;
|
|
798
|
+
align-items: center;
|
|
799
|
+
gap: 8px;
|
|
800
|
+
font-size: 0.9rem;
|
|
801
|
+
color: var(--text-secondary);
|
|
802
|
+
}
|
|
803
|
+
|
|
804
|
+
.patterns li::before {
|
|
805
|
+
content: "\2022";
|
|
806
|
+
color: var(--accent-primary);
|
|
807
|
+
font-weight: bold;
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
/* Quiz Tab */
|
|
811
|
+
.quiz-container {
|
|
812
|
+
max-width: 800px;
|
|
813
|
+
margin: 0 auto;
|
|
814
|
+
}
|
|
815
|
+
|
|
816
|
+
.quiz-header {
|
|
817
|
+
text-align: center;
|
|
818
|
+
margin-bottom: 32px;
|
|
819
|
+
}
|
|
820
|
+
|
|
821
|
+
.quiz-header h2 {
|
|
822
|
+
font-size: 1.5rem;
|
|
823
|
+
margin-bottom: 8px;
|
|
824
|
+
}
|
|
825
|
+
|
|
826
|
+
.quiz-header p {
|
|
827
|
+
color: var(--text-secondary);
|
|
828
|
+
margin-bottom: 20px;
|
|
829
|
+
}
|
|
830
|
+
|
|
831
|
+
.quiz-score {
|
|
832
|
+
display: inline-flex;
|
|
833
|
+
align-items: center;
|
|
834
|
+
gap: 4px;
|
|
835
|
+
padding: 12px 24px;
|
|
836
|
+
background: var(--bg-secondary);
|
|
837
|
+
border-radius: var(--radius-md);
|
|
838
|
+
font-size: 1.1rem;
|
|
839
|
+
font-weight: 600;
|
|
840
|
+
}
|
|
841
|
+
|
|
842
|
+
#score-current {
|
|
843
|
+
color: var(--accent-primary);
|
|
844
|
+
}
|
|
845
|
+
|
|
846
|
+
.quiz-questions {
|
|
847
|
+
display: flex;
|
|
848
|
+
flex-direction: column;
|
|
849
|
+
gap: 24px;
|
|
850
|
+
}
|
|
851
|
+
|
|
852
|
+
.quiz-question {
|
|
853
|
+
background: var(--bg-secondary);
|
|
854
|
+
border-radius: var(--radius-md);
|
|
855
|
+
padding: 24px;
|
|
856
|
+
}
|
|
857
|
+
|
|
858
|
+
.question-number {
|
|
859
|
+
font-size: 0.8rem;
|
|
860
|
+
font-weight: 600;
|
|
861
|
+
text-transform: uppercase;
|
|
862
|
+
color: var(--accent-primary);
|
|
863
|
+
margin-bottom: 8px;
|
|
864
|
+
}
|
|
865
|
+
|
|
866
|
+
.question-text {
|
|
867
|
+
font-size: 1.1rem;
|
|
868
|
+
font-weight: 500;
|
|
869
|
+
margin-bottom: 20px;
|
|
870
|
+
line-height: 1.5;
|
|
871
|
+
}
|
|
872
|
+
|
|
873
|
+
.quiz-options {
|
|
874
|
+
display: flex;
|
|
875
|
+
flex-direction: column;
|
|
876
|
+
gap: 12px;
|
|
877
|
+
}
|
|
878
|
+
|
|
879
|
+
.quiz-option {
|
|
880
|
+
display: flex;
|
|
881
|
+
align-items: center;
|
|
882
|
+
gap: 12px;
|
|
883
|
+
padding: 14px 18px;
|
|
884
|
+
background: var(--bg-primary);
|
|
885
|
+
border: 2px solid var(--border-color);
|
|
886
|
+
border-radius: var(--radius-md);
|
|
887
|
+
cursor: pointer;
|
|
888
|
+
transition: var(--transition-fast);
|
|
889
|
+
}
|
|
890
|
+
|
|
891
|
+
.quiz-option:hover {
|
|
892
|
+
border-color: var(--accent-primary);
|
|
893
|
+
}
|
|
894
|
+
|
|
895
|
+
.quiz-option input {
|
|
896
|
+
display: none;
|
|
897
|
+
}
|
|
898
|
+
|
|
899
|
+
.option-letter {
|
|
900
|
+
width: 28px;
|
|
901
|
+
height: 28px;
|
|
902
|
+
display: flex;
|
|
903
|
+
align-items: center;
|
|
904
|
+
justify-content: center;
|
|
905
|
+
background: var(--bg-tertiary);
|
|
906
|
+
border-radius: 50%;
|
|
907
|
+
font-size: 0.85rem;
|
|
908
|
+
font-weight: 600;
|
|
909
|
+
flex-shrink: 0;
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
.option-text {
|
|
913
|
+
flex: 1;
|
|
914
|
+
}
|
|
915
|
+
|
|
916
|
+
.quiz-option.correct {
|
|
917
|
+
border-color: var(--accent-success);
|
|
918
|
+
background: rgba(52, 168, 83, 0.1);
|
|
919
|
+
}
|
|
920
|
+
|
|
921
|
+
.quiz-option.correct .option-letter {
|
|
922
|
+
background: var(--accent-success);
|
|
923
|
+
color: white;
|
|
924
|
+
}
|
|
925
|
+
|
|
926
|
+
.quiz-option.incorrect {
|
|
927
|
+
border-color: var(--accent-danger);
|
|
928
|
+
background: rgba(234, 67, 53, 0.1);
|
|
929
|
+
}
|
|
930
|
+
|
|
931
|
+
.quiz-option.incorrect .option-letter {
|
|
932
|
+
background: var(--accent-danger);
|
|
933
|
+
color: white;
|
|
934
|
+
}
|
|
935
|
+
|
|
936
|
+
.quiz-option.disabled {
|
|
937
|
+
pointer-events: none;
|
|
938
|
+
opacity: 0.7;
|
|
939
|
+
}
|
|
940
|
+
|
|
941
|
+
.quiz-feedback {
|
|
942
|
+
display: none;
|
|
943
|
+
margin-top: 16px;
|
|
944
|
+
padding: 16px;
|
|
945
|
+
border-radius: var(--radius-md);
|
|
946
|
+
}
|
|
947
|
+
|
|
948
|
+
.quiz-feedback.show {
|
|
949
|
+
display: block;
|
|
950
|
+
}
|
|
951
|
+
|
|
952
|
+
.quiz-feedback.correct {
|
|
953
|
+
background: rgba(52, 168, 83, 0.1);
|
|
954
|
+
border-left: 4px solid var(--accent-success);
|
|
955
|
+
}
|
|
956
|
+
|
|
957
|
+
.quiz-feedback.incorrect {
|
|
958
|
+
background: rgba(234, 67, 53, 0.1);
|
|
959
|
+
border-left: 4px solid var(--accent-danger);
|
|
960
|
+
}
|
|
961
|
+
|
|
962
|
+
.feedback-result {
|
|
963
|
+
font-weight: 600;
|
|
964
|
+
margin-bottom: 8px;
|
|
965
|
+
}
|
|
966
|
+
|
|
967
|
+
.feedback-explanation {
|
|
968
|
+
color: var(--text-secondary);
|
|
969
|
+
font-size: 0.9rem;
|
|
970
|
+
line-height: 1.6;
|
|
971
|
+
}
|
|
972
|
+
|
|
973
|
+
.quiz-actions {
|
|
974
|
+
display: flex;
|
|
975
|
+
justify-content: center;
|
|
976
|
+
margin-top: 32px;
|
|
977
|
+
}
|
|
978
|
+
|
|
979
|
+
.btn {
|
|
980
|
+
padding: 14px 28px;
|
|
981
|
+
border: none;
|
|
982
|
+
border-radius: var(--radius-md);
|
|
983
|
+
font-size: 1rem;
|
|
984
|
+
font-weight: 600;
|
|
985
|
+
cursor: pointer;
|
|
986
|
+
transition: var(--transition-fast);
|
|
987
|
+
}
|
|
988
|
+
|
|
989
|
+
.btn-secondary {
|
|
990
|
+
background: var(--bg-tertiary);
|
|
991
|
+
color: var(--text-primary);
|
|
992
|
+
}
|
|
993
|
+
|
|
994
|
+
.btn-secondary:hover {
|
|
995
|
+
background: var(--border-color);
|
|
996
|
+
}
|
|
997
|
+
|
|
998
|
+
/* Footer */
|
|
999
|
+
.footer {
|
|
1000
|
+
text-align: center;
|
|
1001
|
+
padding: 20px;
|
|
1002
|
+
margin-top: 20px;
|
|
1003
|
+
color: var(--text-muted);
|
|
1004
|
+
font-size: 0.85rem;
|
|
1005
|
+
}
|
|
1006
|
+
|
|
1007
|
+
/* Empty State */
|
|
1008
|
+
.empty-state {
|
|
1009
|
+
text-align: center;
|
|
1010
|
+
padding: 48px 24px;
|
|
1011
|
+
color: var(--text-secondary);
|
|
1012
|
+
}
|
|
1013
|
+
|
|
1014
|
+
/* Print Styles */
|
|
1015
|
+
@media print {
|
|
1016
|
+
body {
|
|
1017
|
+
background: white;
|
|
1018
|
+
color: black;
|
|
1019
|
+
}
|
|
1020
|
+
|
|
1021
|
+
.header, .tabs, .footer, .theme-toggle, .quiz-actions {
|
|
1022
|
+
display: none;
|
|
1023
|
+
}
|
|
1024
|
+
|
|
1025
|
+
.content {
|
|
1026
|
+
box-shadow: none;
|
|
1027
|
+
}
|
|
1028
|
+
|
|
1029
|
+
.panel {
|
|
1030
|
+
display: block !important;
|
|
1031
|
+
page-break-inside: avoid;
|
|
1032
|
+
}
|
|
1033
|
+
|
|
1034
|
+
.panel::before {
|
|
1035
|
+
content: attr(aria-labelledby);
|
|
1036
|
+
display: block;
|
|
1037
|
+
font-size: 1.5rem;
|
|
1038
|
+
font-weight: bold;
|
|
1039
|
+
margin-bottom: 1rem;
|
|
1040
|
+
padding-bottom: 0.5rem;
|
|
1041
|
+
border-bottom: 2px solid #333;
|
|
1042
|
+
}
|
|
1043
|
+
|
|
1044
|
+
.command-details {
|
|
1045
|
+
display: block !important;
|
|
1046
|
+
}
|
|
1047
|
+
}
|
|
1048
|
+
|
|
1049
|
+
/* Responsive */
|
|
1050
|
+
@media (max-width: 1024px) {
|
|
1051
|
+
.stats-grid {
|
|
1052
|
+
grid-template-columns: repeat(2, 1fr);
|
|
1053
|
+
}
|
|
1054
|
+
|
|
1055
|
+
.charts-row {
|
|
1056
|
+
grid-template-columns: 1fr;
|
|
1057
|
+
}
|
|
1058
|
+
|
|
1059
|
+
.pie-container {
|
|
1060
|
+
flex-direction: column;
|
|
1061
|
+
}
|
|
1062
|
+
}
|
|
1063
|
+
|
|
1064
|
+
@media (max-width: 768px) {
|
|
1065
|
+
.container {
|
|
1066
|
+
padding: 12px;
|
|
1067
|
+
}
|
|
1068
|
+
|
|
1069
|
+
.header {
|
|
1070
|
+
padding: 16px 20px;
|
|
1071
|
+
}
|
|
1072
|
+
|
|
1073
|
+
.header h1 {
|
|
1074
|
+
font-size: 1.25rem;
|
|
1075
|
+
}
|
|
1076
|
+
|
|
1077
|
+
.tab-label {
|
|
1078
|
+
display: none;
|
|
1079
|
+
}
|
|
1080
|
+
|
|
1081
|
+
.tab {
|
|
1082
|
+
padding: 12px;
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1085
|
+
.tab-icon {
|
|
1086
|
+
font-size: 1.25rem;
|
|
1087
|
+
}
|
|
1088
|
+
|
|
1089
|
+
.panel {
|
|
1090
|
+
padding: 20px;
|
|
1091
|
+
}
|
|
1092
|
+
|
|
1093
|
+
.stats-grid {
|
|
1094
|
+
grid-template-columns: repeat(2, 1fr);
|
|
1095
|
+
gap: 12px;
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
.stat-value {
|
|
1099
|
+
font-size: 1.75rem;
|
|
1100
|
+
}
|
|
1101
|
+
|
|
1102
|
+
.commands-toolbar {
|
|
1103
|
+
flex-direction: column;
|
|
1104
|
+
}
|
|
1105
|
+
|
|
1106
|
+
.command-header {
|
|
1107
|
+
flex-direction: column;
|
|
1108
|
+
align-items: flex-start;
|
|
1109
|
+
gap: 12px;
|
|
1110
|
+
}
|
|
1111
|
+
|
|
1112
|
+
.command-meta {
|
|
1113
|
+
width: 100%;
|
|
1114
|
+
justify-content: space-between;
|
|
1115
|
+
}
|
|
1116
|
+
}
|
|
1117
|
+
|
|
1118
|
+
</style>
|
|
1119
|
+
</head>
|
|
1120
|
+
<body>
|
|
1121
|
+
<div class="container">
|
|
1122
|
+
<header class="header">
|
|
1123
|
+
<div class="header-content">
|
|
1124
|
+
<h1>Bash Command Learning Report</h1>
|
|
1125
|
+
<p class="subtitle">Generated: 2026-02-05 15:42:15</p>
|
|
1126
|
+
</div>
|
|
1127
|
+
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark mode">
|
|
1128
|
+
<span class="theme-icon light-icon">☀</span>
|
|
1129
|
+
<span class="theme-icon dark-icon">☾</span>
|
|
1130
|
+
</button>
|
|
1131
|
+
</header>
|
|
1132
|
+
|
|
1133
|
+
<nav class="tabs" role="tablist">
|
|
1134
|
+
<button class="tab active" data-tab="overview" role="tab" aria-selected="true" aria-controls="panel-overview">
|
|
1135
|
+
<span class="tab-icon">☰</span>
|
|
1136
|
+
<span class="tab-label">Overview</span>
|
|
1137
|
+
<span class="tab-key">1</span>
|
|
1138
|
+
</button>
|
|
1139
|
+
<button class="tab" data-tab="commands" role="tab" aria-selected="false" aria-controls="panel-commands">
|
|
1140
|
+
<span class="tab-icon">❯</span>
|
|
1141
|
+
<span class="tab-label">Commands</span>
|
|
1142
|
+
<span class="tab-key">2</span>
|
|
1143
|
+
</button>
|
|
1144
|
+
<button class="tab" data-tab="lessons" role="tab" aria-selected="false" aria-controls="panel-lessons">
|
|
1145
|
+
<span class="tab-icon">📚</span>
|
|
1146
|
+
<span class="tab-label">Lessons</span>
|
|
1147
|
+
<span class="tab-key">3</span>
|
|
1148
|
+
</button>
|
|
1149
|
+
<button class="tab" data-tab="quiz" role="tab" aria-selected="false" aria-controls="panel-quiz">
|
|
1150
|
+
<span class="tab-icon">❓</span>
|
|
1151
|
+
<span class="tab-label">Quiz</span>
|
|
1152
|
+
<span class="tab-key">4</span>
|
|
1153
|
+
</button>
|
|
1154
|
+
</nav>
|
|
1155
|
+
|
|
1156
|
+
<main class="content">
|
|
1157
|
+
<section id="panel-overview" class="panel active" role="tabpanel" aria-labelledby="tab-overview">
|
|
1158
|
+
|
|
1159
|
+
<div class="dashboard">
|
|
1160
|
+
<div class="stats-grid">
|
|
1161
|
+
<div class="stat-card">
|
|
1162
|
+
<div class="stat-value">37</div>
|
|
1163
|
+
<div class="stat-label">Total Commands</div>
|
|
1164
|
+
</div>
|
|
1165
|
+
<div class="stat-card">
|
|
1166
|
+
<div class="stat-value">37</div>
|
|
1167
|
+
<div class="stat-label">Unique Commands</div>
|
|
1168
|
+
</div>
|
|
1169
|
+
<div class="stat-card">
|
|
1170
|
+
<div class="stat-value">10</div>
|
|
1171
|
+
<div class="stat-label">Unique Utilities</div>
|
|
1172
|
+
</div>
|
|
1173
|
+
<div class="stat-card">
|
|
1174
|
+
<div class="stat-value date-value">N/A</div>
|
|
1175
|
+
<div class="stat-label">to N/A</div>
|
|
1176
|
+
</div>
|
|
1177
|
+
</div>
|
|
1178
|
+
|
|
1179
|
+
<div class="charts-row">
|
|
1180
|
+
<div class="chart-card">
|
|
1181
|
+
<h3>Complexity Distribution</h3>
|
|
1182
|
+
<div class="complexity-bars">
|
|
1183
|
+
<div class="complexity-row">
|
|
1184
|
+
<span class="complexity-label simple">Simple</span>
|
|
1185
|
+
<div class="complexity-bar-bg">
|
|
1186
|
+
<div class="complexity-bar simple" style="width: 27.027027027027028%"></div>
|
|
1187
|
+
</div>
|
|
1188
|
+
<span class="complexity-count">10</span>
|
|
1189
|
+
</div>
|
|
1190
|
+
<div class="complexity-row">
|
|
1191
|
+
<span class="complexity-label intermediate">Intermediate</span>
|
|
1192
|
+
<div class="complexity-bar-bg">
|
|
1193
|
+
<div class="complexity-bar intermediate" style="width: 13.513513513513514%"></div>
|
|
1194
|
+
</div>
|
|
1195
|
+
<span class="complexity-count">5</span>
|
|
1196
|
+
</div>
|
|
1197
|
+
<div class="complexity-row">
|
|
1198
|
+
<span class="complexity-label advanced">Advanced</span>
|
|
1199
|
+
<div class="complexity-bar-bg">
|
|
1200
|
+
<div class="complexity-bar advanced" style="width: 59.45945945945946%"></div>
|
|
1201
|
+
</div>
|
|
1202
|
+
<span class="complexity-count">22</span>
|
|
1203
|
+
</div>
|
|
1204
|
+
</div>
|
|
1205
|
+
</div>
|
|
1206
|
+
|
|
1207
|
+
<div class="chart-card">
|
|
1208
|
+
<h3>Category Breakdown</h3>
|
|
1209
|
+
<div class="pie-container">
|
|
1210
|
+
<svg viewBox="0 0 160 160" class="pie-chart">
|
|
1211
|
+
<path d="M 80 80 L 80.00 10.00 A 70 70 0 0 1 85.94 149.75 Z" fill="#4285f4" stroke="#fff" stroke-width="2"><title>Shell Builtins: 18</title></path><path d="M 80 80 L 85.94 149.75 A 70 70 0 0 1 17.50 111.51 Z" fill="#ea4335" stroke="#fff" stroke-width="2"><title>Git: 7</title></path><path d="M 80 80 L 17.50 111.51 A 70 70 0 0 1 20.39 43.30 Z" fill="#fbbc05" stroke="#fff" stroke-width="2"><title>File System: 6</title></path><path d="M 80 80 L 20.39 43.30 A 70 70 0 0 1 45.86 18.89 Z" fill="#34a853" stroke="#fff" stroke-width="2"><title>Unknown: 3</title></path><path d="M 80 80 L 45.86 18.89 A 70 70 0 0 1 68.17 11.01 Z" fill="#ff6d01" stroke="#fff" stroke-width="2"><title>Package Management: 2</title></path><path d="M 80 80 L 68.17 11.01 A 70 70 0 0 1 80.00 10.00 Z" fill="#46bdc6" stroke="#fff" stroke-width="2"><title>Process & System: 1</title></path>
|
|
1212
|
+
</svg>
|
|
1213
|
+
<div class="category-legend">
|
|
1214
|
+
|
|
1215
|
+
<div class="legend-item">
|
|
1216
|
+
<span class="legend-color" style="background: #4285f4"></span>
|
|
1217
|
+
<span class="legend-label">Shell Builtins</span>
|
|
1218
|
+
<span class="legend-count">18</span>
|
|
1219
|
+
</div>
|
|
1220
|
+
<div class="legend-item">
|
|
1221
|
+
<span class="legend-color" style="background: #ea4335"></span>
|
|
1222
|
+
<span class="legend-label">Git</span>
|
|
1223
|
+
<span class="legend-count">7</span>
|
|
1224
|
+
</div>
|
|
1225
|
+
<div class="legend-item">
|
|
1226
|
+
<span class="legend-color" style="background: #fbbc05"></span>
|
|
1227
|
+
<span class="legend-label">File System</span>
|
|
1228
|
+
<span class="legend-count">6</span>
|
|
1229
|
+
</div>
|
|
1230
|
+
<div class="legend-item">
|
|
1231
|
+
<span class="legend-color" style="background: #34a853"></span>
|
|
1232
|
+
<span class="legend-label">Unknown</span>
|
|
1233
|
+
<span class="legend-count">3</span>
|
|
1234
|
+
</div>
|
|
1235
|
+
<div class="legend-item">
|
|
1236
|
+
<span class="legend-color" style="background: #ff6d01"></span>
|
|
1237
|
+
<span class="legend-label">Package Management</span>
|
|
1238
|
+
<span class="legend-count">2</span>
|
|
1239
|
+
</div>
|
|
1240
|
+
<div class="legend-item">
|
|
1241
|
+
<span class="legend-color" style="background: #46bdc6"></span>
|
|
1242
|
+
<span class="legend-label">Process & System</span>
|
|
1243
|
+
<span class="legend-count">1</span>
|
|
1244
|
+
</div>
|
|
1245
|
+
</div>
|
|
1246
|
+
</div>
|
|
1247
|
+
</div>
|
|
1248
|
+
</div>
|
|
1249
|
+
|
|
1250
|
+
<div class="charts-row">
|
|
1251
|
+
<div class="chart-card wide">
|
|
1252
|
+
<h3>Top 10 Most-Used Commands</h3>
|
|
1253
|
+
<div class="top-commands">
|
|
1254
|
+
|
|
1255
|
+
<div class="top-command-item">
|
|
1256
|
+
<div class="top-command-name">
|
|
1257
|
+
<code class="cmd">gh</code>
|
|
1258
|
+
</div>
|
|
1259
|
+
<div class="top-command-bar-container">
|
|
1260
|
+
<div class="top-command-bar" style="width: 100.0%"></div>
|
|
1261
|
+
</div>
|
|
1262
|
+
<div class="top-command-count">8</div>
|
|
1263
|
+
</div>
|
|
1264
|
+
<div class="top-command-item">
|
|
1265
|
+
<div class="top-command-name">
|
|
1266
|
+
<code class="cmd">git</code>
|
|
1267
|
+
</div>
|
|
1268
|
+
<div class="top-command-bar-container">
|
|
1269
|
+
<div class="top-command-bar" style="width: 87.5%"></div>
|
|
1270
|
+
</div>
|
|
1271
|
+
<div class="top-command-count">7</div>
|
|
1272
|
+
</div>
|
|
1273
|
+
<div class="top-command-item">
|
|
1274
|
+
<div class="top-command-name">
|
|
1275
|
+
<code class="cmd">python</code>
|
|
1276
|
+
</div>
|
|
1277
|
+
<div class="top-command-bar-container">
|
|
1278
|
+
<div class="top-command-bar" style="width: 62.5%"></div>
|
|
1279
|
+
</div>
|
|
1280
|
+
<div class="top-command-count">5</div>
|
|
1281
|
+
</div>
|
|
1282
|
+
<div class="top-command-item">
|
|
1283
|
+
<div class="top-command-name">
|
|
1284
|
+
<code class="cmd">mkdir</code>
|
|
1285
|
+
</div>
|
|
1286
|
+
<div class="top-command-bar-container">
|
|
1287
|
+
<div class="top-command-bar" style="width: 37.5%"></div>
|
|
1288
|
+
</div>
|
|
1289
|
+
<div class="top-command-count">3</div>
|
|
1290
|
+
</div>
|
|
1291
|
+
<div class="top-command-item">
|
|
1292
|
+
<div class="top-command-name">
|
|
1293
|
+
<code class="cmd">ls</code>
|
|
1294
|
+
</div>
|
|
1295
|
+
<div class="top-command-bar-container">
|
|
1296
|
+
<div class="top-command-bar" style="width: 37.5%"></div>
|
|
1297
|
+
</div>
|
|
1298
|
+
<div class="top-command-count">3</div>
|
|
1299
|
+
</div>
|
|
1300
|
+
<div class="top-command-item">
|
|
1301
|
+
<div class="top-command-name">
|
|
1302
|
+
<code class="cmd">session-slides</code>
|
|
1303
|
+
</div>
|
|
1304
|
+
<div class="top-command-bar-container">
|
|
1305
|
+
<div class="top-command-bar" style="width: 37.5%"></div>
|
|
1306
|
+
</div>
|
|
1307
|
+
<div class="top-command-count">3</div>
|
|
1308
|
+
</div>
|
|
1309
|
+
<div class="top-command-item">
|
|
1310
|
+
<div class="top-command-name">
|
|
1311
|
+
<code class="cmd">echo</code>
|
|
1312
|
+
</div>
|
|
1313
|
+
<div class="top-command-bar-container">
|
|
1314
|
+
<div class="top-command-bar" style="width: 25.0%"></div>
|
|
1315
|
+
</div>
|
|
1316
|
+
<div class="top-command-count">2</div>
|
|
1317
|
+
</div>
|
|
1318
|
+
<div class="top-command-item">
|
|
1319
|
+
<div class="top-command-name">
|
|
1320
|
+
<code class="cmd">claude</code>
|
|
1321
|
+
</div>
|
|
1322
|
+
<div class="top-command-bar-container">
|
|
1323
|
+
<div class="top-command-bar" style="width: 12.5%"></div>
|
|
1324
|
+
</div>
|
|
1325
|
+
<div class="top-command-count">1</div>
|
|
1326
|
+
</div>
|
|
1327
|
+
<div class="top-command-item">
|
|
1328
|
+
<div class="top-command-name">
|
|
1329
|
+
<code class="cmd">pip</code>
|
|
1330
|
+
</div>
|
|
1331
|
+
<div class="top-command-bar-container">
|
|
1332
|
+
<div class="top-command-bar" style="width: 12.5%"></div>
|
|
1333
|
+
</div>
|
|
1334
|
+
<div class="top-command-count">1</div>
|
|
1335
|
+
</div>
|
|
1336
|
+
<div class="top-command-item">
|
|
1337
|
+
<div class="top-command-name">
|
|
1338
|
+
<code class="cmd">start</code>
|
|
1339
|
+
</div>
|
|
1340
|
+
<div class="top-command-bar-container">
|
|
1341
|
+
<div class="top-command-bar" style="width: 12.5%"></div>
|
|
1342
|
+
</div>
|
|
1343
|
+
<div class="top-command-count">1</div>
|
|
1344
|
+
</div>
|
|
1345
|
+
</div>
|
|
1346
|
+
</div>
|
|
1347
|
+
|
|
1348
|
+
<div class="chart-card">
|
|
1349
|
+
<h3>New Commands</h3>
|
|
1350
|
+
<div class="new-commands">
|
|
1351
|
+
<p class="empty-state">No new commands detected in this session</p>
|
|
1352
|
+
</div>
|
|
1353
|
+
</div>
|
|
1354
|
+
</div>
|
|
1355
|
+
</div>
|
|
1356
|
+
</section>
|
|
1357
|
+
|
|
1358
|
+
<section id="panel-commands" class="panel" role="tabpanel" aria-labelledby="tab-commands">
|
|
1359
|
+
|
|
1360
|
+
<div class="commands-container">
|
|
1361
|
+
<div class="commands-toolbar">
|
|
1362
|
+
<div class="search-box">
|
|
1363
|
+
<input type="text" id="command-search" placeholder="Search commands..." oninput="filterCommands()">
|
|
1364
|
+
</div>
|
|
1365
|
+
<div class="sort-controls">
|
|
1366
|
+
<label>Sort by:</label>
|
|
1367
|
+
<select id="sort-select" onchange="sortCommands()">
|
|
1368
|
+
<option value="frequency">Frequency</option>
|
|
1369
|
+
<option value="complexity">Complexity</option>
|
|
1370
|
+
<option value="category">Category</option>
|
|
1371
|
+
<option value="name">Alphabetical</option>
|
|
1372
|
+
</select>
|
|
1373
|
+
</div>
|
|
1374
|
+
</div>
|
|
1375
|
+
|
|
1376
|
+
<div class="filter-chips">
|
|
1377
|
+
<button class="filter-chip active" data-category="all">All</button>
|
|
1378
|
+
<button class="filter-chip" data-category="File System">File System</button><button class="filter-chip" data-category="Git">Git</button><button class="filter-chip" data-category="Package Management">Package Management</button><button class="filter-chip" data-category="Process & System">Process & System</button><button class="filter-chip" data-category="Shell Builtins">Shell Builtins</button><button class="filter-chip" data-category="Unknown">Unknown</button>
|
|
1379
|
+
</div>
|
|
1380
|
+
|
|
1381
|
+
<div class="commands-list" id="commands-list">
|
|
1382
|
+
|
|
1383
|
+
<div class="command-card" data-category="Unknown" data-complexity="simple" data-frequency="1" data-name="claude">
|
|
1384
|
+
<div class="command-header" onclick="toggleCommand('cmd-0')">
|
|
1385
|
+
<div class="command-main">
|
|
1386
|
+
<code class="cmd">claude</code>
|
|
1387
|
+
<span class="complexity-badge simple">simple</span>
|
|
1388
|
+
<span class="category-badge">Unknown</span>
|
|
1389
|
+
</div>
|
|
1390
|
+
<div class="command-meta">
|
|
1391
|
+
<span class="frequency">Used 1x</span>
|
|
1392
|
+
<span class="expand-icon">▼</span>
|
|
1393
|
+
</div>
|
|
1394
|
+
</div>
|
|
1395
|
+
<div class="command-details" id="cmd-0">
|
|
1396
|
+
<div class="full-command">
|
|
1397
|
+
<h5>Full Command:</h5>
|
|
1398
|
+
<pre class="syntax-highlighted"><span class="cmd">claude</span> install</pre>
|
|
1399
|
+
</div>
|
|
1400
|
+
<div class="description">
|
|
1401
|
+
<h5>Description:</h5>
|
|
1402
|
+
<p>Run claude install command</p>
|
|
1403
|
+
</div>
|
|
1404
|
+
|
|
1405
|
+
|
|
1406
|
+
</div>
|
|
1407
|
+
</div>
|
|
1408
|
+
<div class="command-card" data-category="Package Management" data-complexity="advanced" data-frequency="1" data-name="pip">
|
|
1409
|
+
<div class="command-header" onclick="toggleCommand('cmd-1')">
|
|
1410
|
+
<div class="command-main">
|
|
1411
|
+
<code class="cmd">pip</code>
|
|
1412
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
1413
|
+
<span class="category-badge">Package Management</span>
|
|
1414
|
+
</div>
|
|
1415
|
+
<div class="command-meta">
|
|
1416
|
+
<span class="frequency">Used 1x</span>
|
|
1417
|
+
<span class="expand-icon">▼</span>
|
|
1418
|
+
</div>
|
|
1419
|
+
</div>
|
|
1420
|
+
<div class="command-details" id="cmd-1">
|
|
1421
|
+
<div class="full-command">
|
|
1422
|
+
<h5>Full Command:</h5>
|
|
1423
|
+
<pre class="syntax-highlighted"><span class="cmd">pip</span> show python-docx 2<span class="operator">></span>/dev/null <span class="operator">|</span><span class="operator">|</span> pip install python-docx 2<span class="operator">></span>&1 <span class="operator">|</span> tail <span class="flag">-5</span></pre>
|
|
1424
|
+
</div>
|
|
1425
|
+
<div class="description">
|
|
1426
|
+
<h5>Description:</h5>
|
|
1427
|
+
<p>Check/install python-docx library</p>
|
|
1428
|
+
</div>
|
|
1429
|
+
|
|
1430
|
+
|
|
1431
|
+
</div>
|
|
1432
|
+
</div>
|
|
1433
|
+
<div class="command-card" data-category="File System" data-complexity="simple" data-frequency="1" data-name="mkdir">
|
|
1434
|
+
<div class="command-header" onclick="toggleCommand('cmd-2')">
|
|
1435
|
+
<div class="command-main">
|
|
1436
|
+
<code class="cmd">mkdir</code>
|
|
1437
|
+
<span class="complexity-badge simple">simple</span>
|
|
1438
|
+
<span class="category-badge">File System</span>
|
|
1439
|
+
</div>
|
|
1440
|
+
<div class="command-meta">
|
|
1441
|
+
<span class="frequency">Used 1x</span>
|
|
1442
|
+
<span class="expand-icon">▼</span>
|
|
1443
|
+
</div>
|
|
1444
|
+
</div>
|
|
1445
|
+
<div class="command-details" id="cmd-2">
|
|
1446
|
+
<div class="full-command">
|
|
1447
|
+
<h5>Full Command:</h5>
|
|
1448
|
+
<pre class="syntax-highlighted"><span class="cmd">mkdir</span> <span class="flag">-p</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/docs/explainers"</span></pre>
|
|
1449
|
+
</div>
|
|
1450
|
+
<div class="description">
|
|
1451
|
+
<h5>Description:</h5>
|
|
1452
|
+
<p>Create output directory for explainer docs</p>
|
|
1453
|
+
</div>
|
|
1454
|
+
<div class="flags-section"><h5>Flags:</h5><ul class="flags-list"><li><code class="flag">-p</code> - </li></ul></div>
|
|
1455
|
+
|
|
1456
|
+
</div>
|
|
1457
|
+
</div>
|
|
1458
|
+
<div class="command-card" data-category="Shell Builtins" data-complexity="advanced" data-frequency="1" data-name="cd">
|
|
1459
|
+
<div class="command-header" onclick="toggleCommand('cmd-3')">
|
|
1460
|
+
<div class="command-main">
|
|
1461
|
+
<code class="cmd">cd</code>
|
|
1462
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
1463
|
+
<span class="category-badge">Shell Builtins</span>
|
|
1464
|
+
</div>
|
|
1465
|
+
<div class="command-meta">
|
|
1466
|
+
<span class="frequency">Used 1x</span>
|
|
1467
|
+
<span class="expand-icon">▼</span>
|
|
1468
|
+
</div>
|
|
1469
|
+
</div>
|
|
1470
|
+
<div class="command-details" id="cmd-3">
|
|
1471
|
+
<div class="full-command">
|
|
1472
|
+
<h5>Full Command:</h5>
|
|
1473
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> python scripts/generate_explainers.py</pre>
|
|
1474
|
+
</div>
|
|
1475
|
+
<div class="description">
|
|
1476
|
+
<h5>Description:</h5>
|
|
1477
|
+
<p>Generate all 5 explainer docx files</p>
|
|
1478
|
+
</div>
|
|
1479
|
+
|
|
1480
|
+
|
|
1481
|
+
</div>
|
|
1482
|
+
</div>
|
|
1483
|
+
<div class="command-card" data-category="File System" data-complexity="simple" data-frequency="1" data-name="mkdir">
|
|
1484
|
+
<div class="command-header" onclick="toggleCommand('cmd-4')">
|
|
1485
|
+
<div class="command-main">
|
|
1486
|
+
<code class="cmd">mkdir</code>
|
|
1487
|
+
<span class="complexity-badge simple">simple</span>
|
|
1488
|
+
<span class="category-badge">File System</span>
|
|
1489
|
+
</div>
|
|
1490
|
+
<div class="command-meta">
|
|
1491
|
+
<span class="frequency">Used 1x</span>
|
|
1492
|
+
<span class="expand-icon">▼</span>
|
|
1493
|
+
</div>
|
|
1494
|
+
</div>
|
|
1495
|
+
<div class="command-details" id="cmd-4">
|
|
1496
|
+
<div class="full-command">
|
|
1497
|
+
<h5>Full Command:</h5>
|
|
1498
|
+
<pre class="syntax-highlighted"><span class="cmd">mkdir</span> <span class="flag">-p</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/visualizations/assets"</span></pre>
|
|
1499
|
+
</div>
|
|
1500
|
+
<div class="description">
|
|
1501
|
+
<h5>Description:</h5>
|
|
1502
|
+
<p>Create visualizations subdirectory</p>
|
|
1503
|
+
</div>
|
|
1504
|
+
<div class="flags-section"><h5>Flags:</h5><ul class="flags-list"><li><code class="flag">-p</code> - </li></ul></div>
|
|
1505
|
+
|
|
1506
|
+
</div>
|
|
1507
|
+
</div>
|
|
1508
|
+
<div class="command-card" data-category="Shell Builtins" data-complexity="advanced" data-frequency="1" data-name="cd">
|
|
1509
|
+
<div class="command-header" onclick="toggleCommand('cmd-5')">
|
|
1510
|
+
<div class="command-main">
|
|
1511
|
+
<code class="cmd">cd</code>
|
|
1512
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
1513
|
+
<span class="category-badge">Shell Builtins</span>
|
|
1514
|
+
</div>
|
|
1515
|
+
<div class="command-meta">
|
|
1516
|
+
<span class="frequency">Used 1x</span>
|
|
1517
|
+
<span class="expand-icon">▼</span>
|
|
1518
|
+
</div>
|
|
1519
|
+
</div>
|
|
1520
|
+
<div class="command-details" id="cmd-5">
|
|
1521
|
+
<div class="full-command">
|
|
1522
|
+
<h5>Full Command:</h5>
|
|
1523
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> python <span class="flag">-c</span> "
|
|
1524
|
+
import openpyxl
|
|
1525
|
+
wb = openpyxl.load_workbook(<span class="string">'C:/Users/brand/Downloads/mock_customer_data.xlsx'</span>, data_only=True<span class="operator">)</span>
|
|
1526
|
+
for sheet in wb.sheetnames:
|
|
1527
|
+
ws = wb[sheet]
|
|
1528
|
+
print(f<span class="string">'=== Sheet: {sheet} ==='</span><span class="operator">)</span>
|
|
1529
|
+
print(f<span class="string">'Rows: {ws.max_row}, Cols: {ws.max_column}'</span><span class="operator">)</span>
|
|
1530
|
+
# Print headers
|
|
1531
|
+
headers = [cell.value for cell in ws[1]]
|
|
1532
|
+
print(f<span class="string">'Headers: {headers}'</span><span class="operator">)</span>
|
|
1533
|
+
# Print first 5 data rows
|
|
1534
|
+
for row in ws.iter_rows(min_row=2, max_row=min(6, ws.max_row<span class="operator">)</span>, values_only=True<span class="operator">)</span>:
|
|
1535
|
+
print(list(row<span class="operator">)</span><span class="operator">)</span>
|
|
1536
|
+
# Print last 2 rows
|
|
1537
|
+
print(<span class="string">'...'</span><span class="operator">)</span>
|
|
1538
|
+
for row in ws.iter_rows(min_row=max(2, ws.max_row-1<span class="operator">)</span>, max_row=ws.max_row, values_only=True<span class="operator">)</span>:
|
|
1539
|
+
print(list(row<span class="operator">)</span><span class="operator">)</span>
|
|
1540
|
+
print(<span class="operator">)</span>
|
|
1541
|
+
"
|
|
1542
|
+
</pre>
|
|
1543
|
+
</div>
|
|
1544
|
+
<div class="description">
|
|
1545
|
+
<h5>Description:</h5>
|
|
1546
|
+
<p>Inspect spreadsheet structure and sample data</p>
|
|
1547
|
+
</div>
|
|
1548
|
+
|
|
1549
|
+
|
|
1550
|
+
</div>
|
|
1551
|
+
</div>
|
|
1552
|
+
<div class="command-card" data-category="Shell Builtins" data-complexity="advanced" data-frequency="1" data-name="cd">
|
|
1553
|
+
<div class="command-header" onclick="toggleCommand('cmd-6')">
|
|
1554
|
+
<div class="command-main">
|
|
1555
|
+
<code class="cmd">cd</code>
|
|
1556
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
1557
|
+
<span class="category-badge">Shell Builtins</span>
|
|
1558
|
+
</div>
|
|
1559
|
+
<div class="command-meta">
|
|
1560
|
+
<span class="frequency">Used 1x</span>
|
|
1561
|
+
<span class="expand-icon">▼</span>
|
|
1562
|
+
</div>
|
|
1563
|
+
</div>
|
|
1564
|
+
<div class="command-details" id="cmd-6">
|
|
1565
|
+
<div class="full-command">
|
|
1566
|
+
<h5>Full Command:</h5>
|
|
1567
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> python <span class="flag">-c</span> "
|
|
1568
|
+
import openpyxl
|
|
1569
|
+
wb = openpyxl.load_workbook(<span class="string">'C:/Users/brand/Downloads/mock_customer_data.xlsx'</span>, data_only=True<span class="operator">)</span>
|
|
1570
|
+
ws = wb[<span class="string">'Customer Purchases'</span>]
|
|
1571
|
+
|
|
1572
|
+
# Deeper analysis for viz planning
|
|
1573
|
+
states = {}
|
|
1574
|
+
amounts = []
|
|
1575
|
+
quantities = []
|
|
1576
|
+
customers = {}
|
|
1577
|
+
|
|
1578
|
+
for row in ws.iter_rows(min_row=2, max_row=ws.max_row, values_only=True<span class="operator">)</span>:
|
|
1579
|
+
name, amount, qty, state = row
|
|
1580
|
+
amounts.append(amount<span class="operator">)</span>
|
|
1581
|
+
quantities.append(qty<span class="operator">)</span>
|
|
1582
|
+
|
|
1583
|
+
if state not in states:
|
|
1584
|
+
states[state] = {<span class="string">'count'</span>: 0, <span class="string">'total'</span>: 0, <span class="string">'qty'</span>: 0}
|
|
1585
|
+
states[state][<span class="string">'count'</span>] += 1
|
|
1586
|
+
states[state][<span class="string">'total'</span>] += amount
|
|
1587
|
+
states[state][<span class="string">'qty'</span>] += qty
|
|
1588
|
+
|
|
1589
|
+
if name not in customers:
|
|
1590
|
+
customers[name] = {<span class="string">'count'</span>: 0, <span class="string">'total'</span>: 0, <span class="string">'qty'</span>: 0}
|
|
1591
|
+
customers[name][<span class="string">'count'</span>] += 1
|
|
1592
|
+
customers[name][<span class="string">'total'</span>] += amount
|
|
1593
|
+
customers[name][<span class="string">'qty'</span>] += qty
|
|
1594
|
+
|
|
1595
|
+
print(f<span class="string">'Total records: {len(amounts<span class="operator">)</span>}'</span><span class="operator">)</span>
|
|
1596
|
+
print(f<span class="string">'Unique states: {len(states<span class="operator">)</span>}'</span><span class="operator">)</span>
|
|
1597
|
+
print(f<span class="string">'Unique customers: {len(customers<span class="operator">)</span>}'</span><span class="operator">)</span>
|
|
1598
|
+
print(f<span class="string">'Amount range: \<span class="variable">${min</span>(amounts<span class="operator">)</span>:.2f} - \<span class="variable">${max</span>(amounts<span class="operator">)</span>:.2f}'</span><span class="operator">)</span>
|
|
1599
|
+
print(f<span class="string">'Avg amount: \<span class="variable">${sum</span>(amounts<span class="operator">)</span>/len(amounts<span class="operator">)</span>:.2f}'</span><span class="operator">)</span>
|
|
1600
|
+
print(f<span class="string">'Quantity range: {min(quantities<span class="operator">)</span>} - {max(quantities<span class="operator">)</span>}'</span><span class="operator">)</span>
|
|
1601
|
+
print(<span class="operator">)</span>
|
|
1602
|
+
|
|
1603
|
+
# Top 10 states by revenue
|
|
1604
|
+
sorted_states = sorted(states.items(<span class="operator">)</span>, key=lambda x: x[1][<span class="string">'total'</span>], reverse=True<span class="operator">)</span>
|
|
1605
|
+
print(<span class="string">'Top 15 states by revenue:'</span><span class="operator">)</span>
|
|
1606
|
+
for s, d in sorted_states[:15]:
|
|
1607
|
+
print(f' {s}: <span class="variable">${d</span>[\<span class="string">"total\"</span>]:.2f} ({d[\<span class="string">"count\"</span>]} txns, avg <span class="variable">${d</span>[\<span class="string">"total\"</span>]/d[\<span class="string">"count\"</span>]:.2f}<span class="operator">)</span><span class="string">'<span class="operator">)</span>
|
|
1608
|
+
|
|
1609
|
+
print(<span class="operator">)</span>
|
|
1610
|
+
# Top customers by purchase count
|
|
1611
|
+
sorted_custs = sorted(customers.items(<span class="operator">)</span>, key=lambda x: x[1]['</span>count<span class="string">'], reverse=True<span class="operator">)</span>
|
|
1612
|
+
print('</span>Top 10 repeat customers:<span class="string">'<span class="operator">)</span>
|
|
1613
|
+
for c, d in sorted_custs[:10]:
|
|
1614
|
+
print(f'</span> {c}: {d[\<span class="string">"count\"</span>]} purchases, <span class="variable">${d</span>[\<span class="string">"total\"</span>]:.2f} total<span class="string">'<span class="operator">)</span>
|
|
1615
|
+
|
|
1616
|
+
print(<span class="operator">)</span>
|
|
1617
|
+
# Distribution of amounts
|
|
1618
|
+
brackets = [0, 25, 50, 75, 100, 150, 200, 500]
|
|
1619
|
+
print('</span>Amount distribution:'<span class="operator">)</span>
|
|
1620
|
+
for i in range(len(brackets<span class="operator">)</span>-1<span class="operator">)</span>:
|
|
1621
|
+
count = sum(1 for a in amounts if brackets[i] <span class="operator"><</span>= a <span class="operator"><</span> brackets[i+1]<span class="operator">)</span>
|
|
1622
|
+
print(f<span class="string">' \<span class="variable">${brackets</span>[i]}-\<span class="variable">${brackets</span>[i+1]}: {count}'</span><span class="operator">)</span>
|
|
1623
|
+
count = sum(1 for a in amounts if a <span class="operator">></span>= 500<span class="operator">)</span>
|
|
1624
|
+
print(f<span class="string">' \<span class="variable">$500</span>+: {count}'</span><span class="operator">)</span>
|
|
1625
|
+
|
|
1626
|
+
# Quantity distribution
|
|
1627
|
+
print(<span class="operator">)</span>
|
|
1628
|
+
print(<span class="string">'Quantity distribution:'</span><span class="operator">)</span>
|
|
1629
|
+
for q in range(1, 6<span class="operator">)</span>:
|
|
1630
|
+
count = sum(1 for x in quantities if x == q<span class="operator">)</span>
|
|
1631
|
+
print(f<span class="string">' {q}: {count}'</span><span class="operator">)</span>
|
|
1632
|
+
"
|
|
1633
|
+
</pre>
|
|
1634
|
+
</div>
|
|
1635
|
+
<div class="description">
|
|
1636
|
+
<h5>Description:</h5>
|
|
1637
|
+
<p>Deep analysis of data for visualization planning</p>
|
|
1638
|
+
</div>
|
|
1639
|
+
|
|
1640
|
+
|
|
1641
|
+
</div>
|
|
1642
|
+
</div>
|
|
1643
|
+
<div class="command-card" data-category="Shell Builtins" data-complexity="advanced" data-frequency="1" data-name="cd">
|
|
1644
|
+
<div class="command-header" onclick="toggleCommand('cmd-7')">
|
|
1645
|
+
<div class="command-main">
|
|
1646
|
+
<code class="cmd">cd</code>
|
|
1647
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
1648
|
+
<span class="category-badge">Shell Builtins</span>
|
|
1649
|
+
</div>
|
|
1650
|
+
<div class="command-meta">
|
|
1651
|
+
<span class="frequency">Used 1x</span>
|
|
1652
|
+
<span class="expand-icon">▼</span>
|
|
1653
|
+
</div>
|
|
1654
|
+
</div>
|
|
1655
|
+
<div class="command-details" id="cmd-7">
|
|
1656
|
+
<div class="full-command">
|
|
1657
|
+
<h5>Full Command:</h5>
|
|
1658
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> python <span class="operator"><</span><span class="operator"><</span> <span class="string">'PYEOF'</span>
|
|
1659
|
+
import openpyxl
|
|
1660
|
+
wb = openpyxl.load_workbook(<span class="string">'C:/Users/brand/Downloads/mock_customer_data.xlsx'</span>, data_only=True<span class="operator">)</span>
|
|
1661
|
+
ws = wb[<span class="string">'Customer Purchases'</span>]
|
|
1662
|
+
|
|
1663
|
+
states = {}
|
|
1664
|
+
amounts = []
|
|
1665
|
+
quantities = []
|
|
1666
|
+
customers = {}
|
|
1667
|
+
|
|
1668
|
+
for row in ws.iter_rows(min_row=2, max_row=ws.max_row, values_only=True<span class="operator">)</span>:
|
|
1669
|
+
name, amount, qty, state = row
|
|
1670
|
+
amounts.append(amount<span class="operator">)</span>
|
|
1671
|
+
quantities.append(qty<span class="operator">)</span>
|
|
1672
|
+
if state not in states:
|
|
1673
|
+
states[state] = {<span class="string">'count'</span>: 0, <span class="string">'total'</span>: 0, <span class="string">'qty'</span>: 0}
|
|
1674
|
+
states[state][<span class="string">'count'</span>] += 1
|
|
1675
|
+
states[state][<span class="string">'total'</span>] += amount
|
|
1676
|
+
states[state][<span class="string">'qty'</span>] += qty
|
|
1677
|
+
if name not in customers:
|
|
1678
|
+
customers[name] = {<span class="string">'count'</span>: 0, <span class="string">'total'</span>: 0, <span class="string">'qty'</span>: 0}
|
|
1679
|
+
customers[name][<span class="string">'count'</span>] += 1
|
|
1680
|
+
customers[name][<span class="string">'total'</span>] += amount
|
|
1681
|
+
customers[name][<span class="string">'qty'</span>] += qty
|
|
1682
|
+
|
|
1683
|
+
print(f<span class="string">"Total records: {len(amounts<span class="operator">)</span>}"</span><span class="operator">)</span>
|
|
1684
|
+
print(f<span class="string">"Unique states: {len(states<span class="operator">)</span>}"</span><span class="operator">)</span>
|
|
1685
|
+
print(f<span class="string">"Unique customers: {len(customers<span class="operator">)</span>}"</span><span class="operator">)</span>
|
|
1686
|
+
print(f<span class="string">"Amount range: <span class="variable">${min</span>(amounts<span class="operator">)</span>:.2f} - <span class="variable">${max</span>(amounts<span class="operator">)</span>:.2f}"</span><span class="operator">)</span>
|
|
1687
|
+
print(f<span class="string">"Avg amount: <span class="variable">${sum</span>(amounts<span class="operator">)</span>/len(amounts<span class="operator">)</span>:.2f}"</span><span class="operator">)</span>
|
|
1688
|
+
print(f<span class="string">"Quantity range: {min(quantities<span class="operator">)</span>} - {max(quantities<span class="operator">)</span>}"</span><span class="operator">)</span>
|
|
1689
|
+
print(<span class="operator">)</span>
|
|
1690
|
+
|
|
1691
|
+
sorted_states = sorted(states.items(<span class="operator">)</span>, key=lambda x: x[1][<span class="string">'total'</span>], reverse=True<span class="operator">)</span>
|
|
1692
|
+
print(<span class="string">"Top 15 states by revenue:"</span><span class="operator">)</span>
|
|
1693
|
+
for s, d in sorted_states[:15]:
|
|
1694
|
+
avg = d[<span class="string">'total'</span>] / d[<span class="string">'count'</span>]
|
|
1695
|
+
print(f" {s}: <span class="variable">${d</span>[<span class="string">'total'</span>]:.2f} ({d[<span class="string">'count'</span>]} txns, avg <span class="variable">${avg</span>:.2f}<span class="operator">)</span>"<span class="operator">)</span>
|
|
1696
|
+
|
|
1697
|
+
print(<span class="operator">)</span>
|
|
1698
|
+
sorted_custs = sorted(customers.items(<span class="operator">)</span>, key=lambda x: x[1][<span class="string">'count'</span>], reverse=True<span class="operator">)</span>
|
|
1699
|
+
print(<span class="string">"Top 10 repeat customers:"</span><span class="operator">)</span>
|
|
1700
|
+
for c, d in sorted_custs[:10]:
|
|
1701
|
+
print(f" {c}: {d[<span class="string">'count'</span>]} purchases, <span class="variable">${d</span>[<span class="string">'total'</span>]:.2f} total<span class="string">"<span class="operator">)</span>
|
|
1702
|
+
|
|
1703
|
+
print(<span class="operator">)</span>
|
|
1704
|
+
brackets = [0, 25, 50, 75, 100, 150, 200, 500]
|
|
1705
|
+
print("</span>Amount distribution:"<span class="operator">)</span>
|
|
1706
|
+
for i in range(len(brackets<span class="operator">)</span>-1<span class="operator">)</span>:
|
|
1707
|
+
count = sum(1 for a in amounts if brackets[i] <span class="operator"><</span>= a <span class="operator"><</span> brackets[i+1]<span class="operator">)</span>
|
|
1708
|
+
print(f<span class="string">" <span class="variable">${brackets</span>[i]}-<span class="variable">${brackets</span>[i+1]}: {count}"</span><span class="operator">)</span>
|
|
1709
|
+
count = sum(1 for a in amounts if a <span class="operator">></span>= 500<span class="operator">)</span>
|
|
1710
|
+
print(f<span class="string">" <span class="variable">$500</span>+: {count}"</span><span class="operator">)</span>
|
|
1711
|
+
|
|
1712
|
+
print(<span class="operator">)</span>
|
|
1713
|
+
print(<span class="string">"Quantity distribution:"</span><span class="operator">)</span>
|
|
1714
|
+
for q in range(1, 6<span class="operator">)</span>:
|
|
1715
|
+
count = sum(1 for x in quantities if x == q<span class="operator">)</span>
|
|
1716
|
+
print(f<span class="string">" {q}: {count}"</span><span class="operator">)</span>
|
|
1717
|
+
PYEOF
|
|
1718
|
+
</pre>
|
|
1719
|
+
</div>
|
|
1720
|
+
<div class="description">
|
|
1721
|
+
<h5>Description:</h5>
|
|
1722
|
+
<p>Deep analysis of data for visualization planning</p>
|
|
1723
|
+
</div>
|
|
1724
|
+
|
|
1725
|
+
|
|
1726
|
+
</div>
|
|
1727
|
+
</div>
|
|
1728
|
+
<div class="command-card" data-category="Shell Builtins" data-complexity="advanced" data-frequency="1" data-name="cd">
|
|
1729
|
+
<div class="command-header" onclick="toggleCommand('cmd-8')">
|
|
1730
|
+
<div class="command-main">
|
|
1731
|
+
<code class="cmd">cd</code>
|
|
1732
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
1733
|
+
<span class="category-badge">Shell Builtins</span>
|
|
1734
|
+
</div>
|
|
1735
|
+
<div class="command-meta">
|
|
1736
|
+
<span class="frequency">Used 1x</span>
|
|
1737
|
+
<span class="expand-icon">▼</span>
|
|
1738
|
+
</div>
|
|
1739
|
+
</div>
|
|
1740
|
+
<div class="command-details" id="cmd-8">
|
|
1741
|
+
<div class="full-command">
|
|
1742
|
+
<h5>Full Command:</h5>
|
|
1743
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> python visualizations/generate_viz.py</pre>
|
|
1744
|
+
</div>
|
|
1745
|
+
<div class="description">
|
|
1746
|
+
<h5>Description:</h5>
|
|
1747
|
+
<p>Generate all 3 interactive HTML visualizations</p>
|
|
1748
|
+
</div>
|
|
1749
|
+
|
|
1750
|
+
|
|
1751
|
+
</div>
|
|
1752
|
+
</div>
|
|
1753
|
+
<div class="command-card" data-category="Unknown" data-complexity="simple" data-frequency="1" data-name="start">
|
|
1754
|
+
<div class="command-header" onclick="toggleCommand('cmd-9')">
|
|
1755
|
+
<div class="command-main">
|
|
1756
|
+
<code class="cmd">start</code>
|
|
1757
|
+
<span class="complexity-badge simple">simple</span>
|
|
1758
|
+
<span class="category-badge">Unknown</span>
|
|
1759
|
+
</div>
|
|
1760
|
+
<div class="command-meta">
|
|
1761
|
+
<span class="frequency">Used 1x</span>
|
|
1762
|
+
<span class="expand-icon">▼</span>
|
|
1763
|
+
</div>
|
|
1764
|
+
</div>
|
|
1765
|
+
<div class="command-details" id="cmd-9">
|
|
1766
|
+
<div class="full-command">
|
|
1767
|
+
<h5>Full Command:</h5>
|
|
1768
|
+
<pre class="syntax-highlighted"><span class="cmd">start</span> <span class="string">""</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/visualizations/03_executive_dashboard.html"</span></pre>
|
|
1769
|
+
</div>
|
|
1770
|
+
<div class="description">
|
|
1771
|
+
<h5>Description:</h5>
|
|
1772
|
+
<p>Open dashboard in browser to verify rendering</p>
|
|
1773
|
+
</div>
|
|
1774
|
+
|
|
1775
|
+
|
|
1776
|
+
</div>
|
|
1777
|
+
</div>
|
|
1778
|
+
<div class="command-card" data-category="Shell Builtins" data-complexity="advanced" data-frequency="1" data-name="cd">
|
|
1779
|
+
<div class="command-header" onclick="toggleCommand('cmd-10')">
|
|
1780
|
+
<div class="command-main">
|
|
1781
|
+
<code class="cmd">cd</code>
|
|
1782
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
1783
|
+
<span class="category-badge">Shell Builtins</span>
|
|
1784
|
+
</div>
|
|
1785
|
+
<div class="command-meta">
|
|
1786
|
+
<span class="frequency">Used 1x</span>
|
|
1787
|
+
<span class="expand-icon">▼</span>
|
|
1788
|
+
</div>
|
|
1789
|
+
</div>
|
|
1790
|
+
<div class="command-details" id="cmd-10">
|
|
1791
|
+
<div class="full-command">
|
|
1792
|
+
<h5>Full Command:</h5>
|
|
1793
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> git init <span class="operator">&&</span> git remote add origin https://github.com/bjpl/data_example.git <span class="operator">&&</span> git branch <span class="flag">-M</span> main</pre>
|
|
1794
|
+
</div>
|
|
1795
|
+
<div class="description">
|
|
1796
|
+
<h5>Description:</h5>
|
|
1797
|
+
<p>Initialize git repo and connect to remote</p>
|
|
1798
|
+
</div>
|
|
1799
|
+
|
|
1800
|
+
|
|
1801
|
+
</div>
|
|
1802
|
+
</div>
|
|
1803
|
+
<div class="command-card" data-category="File System" data-complexity="simple" data-frequency="1" data-name="ls">
|
|
1804
|
+
<div class="command-header" onclick="toggleCommand('cmd-11')">
|
|
1805
|
+
<div class="command-main">
|
|
1806
|
+
<code class="cmd">ls</code>
|
|
1807
|
+
<span class="complexity-badge simple">simple</span>
|
|
1808
|
+
<span class="category-badge">File System</span>
|
|
1809
|
+
</div>
|
|
1810
|
+
<div class="command-meta">
|
|
1811
|
+
<span class="frequency">Used 1x</span>
|
|
1812
|
+
<span class="expand-icon">▼</span>
|
|
1813
|
+
</div>
|
|
1814
|
+
</div>
|
|
1815
|
+
<div class="command-details" id="cmd-11">
|
|
1816
|
+
<div class="full-command">
|
|
1817
|
+
<h5>Full Command:</h5>
|
|
1818
|
+
<pre class="syntax-highlighted"><span class="cmd">ls</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/visualizations/"</span></pre>
|
|
1819
|
+
</div>
|
|
1820
|
+
<div class="description">
|
|
1821
|
+
<h5>Description:</h5>
|
|
1822
|
+
<p>List visualization files</p>
|
|
1823
|
+
</div>
|
|
1824
|
+
|
|
1825
|
+
|
|
1826
|
+
</div>
|
|
1827
|
+
</div>
|
|
1828
|
+
<div class="command-card" data-category="Shell Builtins" data-complexity="advanced" data-frequency="1" data-name="cd">
|
|
1829
|
+
<div class="command-header" onclick="toggleCommand('cmd-12')">
|
|
1830
|
+
<div class="command-main">
|
|
1831
|
+
<code class="cmd">cd</code>
|
|
1832
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
1833
|
+
<span class="category-badge">Shell Builtins</span>
|
|
1834
|
+
</div>
|
|
1835
|
+
<div class="command-meta">
|
|
1836
|
+
<span class="frequency">Used 1x</span>
|
|
1837
|
+
<span class="expand-icon">▼</span>
|
|
1838
|
+
</div>
|
|
1839
|
+
</div>
|
|
1840
|
+
<div class="command-details" id="cmd-12">
|
|
1841
|
+
<div class="full-command">
|
|
1842
|
+
<h5>Full Command:</h5>
|
|
1843
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> touch .nojekyll</pre>
|
|
1844
|
+
</div>
|
|
1845
|
+
<div class="description">
|
|
1846
|
+
<h5>Description:</h5>
|
|
1847
|
+
<p>Create .nojekyll for GitHub Pages</p>
|
|
1848
|
+
</div>
|
|
1849
|
+
|
|
1850
|
+
|
|
1851
|
+
</div>
|
|
1852
|
+
</div>
|
|
1853
|
+
<div class="command-card" data-category="Shell Builtins" data-complexity="advanced" data-frequency="1" data-name="cd">
|
|
1854
|
+
<div class="command-header" onclick="toggleCommand('cmd-13')">
|
|
1855
|
+
<div class="command-main">
|
|
1856
|
+
<code class="cmd">cd</code>
|
|
1857
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
1858
|
+
<span class="category-badge">Shell Builtins</span>
|
|
1859
|
+
</div>
|
|
1860
|
+
<div class="command-meta">
|
|
1861
|
+
<span class="frequency">Used 1x</span>
|
|
1862
|
+
<span class="expand-icon">▼</span>
|
|
1863
|
+
</div>
|
|
1864
|
+
</div>
|
|
1865
|
+
<div class="command-details" id="cmd-13">
|
|
1866
|
+
<div class="full-command">
|
|
1867
|
+
<h5>Full Command:</h5>
|
|
1868
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> git status</pre>
|
|
1869
|
+
</div>
|
|
1870
|
+
<div class="description">
|
|
1871
|
+
<h5>Description:</h5>
|
|
1872
|
+
<p>Show working tree status</p>
|
|
1873
|
+
</div>
|
|
1874
|
+
|
|
1875
|
+
|
|
1876
|
+
</div>
|
|
1877
|
+
</div>
|
|
1878
|
+
<div class="command-card" data-category="Shell Builtins" data-complexity="advanced" data-frequency="1" data-name="cd">
|
|
1879
|
+
<div class="command-header" onclick="toggleCommand('cmd-14')">
|
|
1880
|
+
<div class="command-main">
|
|
1881
|
+
<code class="cmd">cd</code>
|
|
1882
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
1883
|
+
<span class="category-badge">Shell Builtins</span>
|
|
1884
|
+
</div>
|
|
1885
|
+
<div class="command-meta">
|
|
1886
|
+
<span class="frequency">Used 1x</span>
|
|
1887
|
+
<span class="expand-icon">▼</span>
|
|
1888
|
+
</div>
|
|
1889
|
+
</div>
|
|
1890
|
+
<div class="command-details" id="cmd-14">
|
|
1891
|
+
<div class="full-command">
|
|
1892
|
+
<h5>Full Command:</h5>
|
|
1893
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> git log <span class="flag">--oneline</span> <span class="flag">-5</span> 2<span class="operator">></span>/dev/null <span class="operator">|</span><span class="operator">|</span> echo <span class="string">"No commits yet"</span></pre>
|
|
1894
|
+
</div>
|
|
1895
|
+
<div class="description">
|
|
1896
|
+
<h5>Description:</h5>
|
|
1897
|
+
<p>Check commit history</p>
|
|
1898
|
+
</div>
|
|
1899
|
+
|
|
1900
|
+
|
|
1901
|
+
</div>
|
|
1902
|
+
</div>
|
|
1903
|
+
<div class="command-card" data-category="Shell Builtins" data-complexity="advanced" data-frequency="1" data-name="cd">
|
|
1904
|
+
<div class="command-header" onclick="toggleCommand('cmd-15')">
|
|
1905
|
+
<div class="command-main">
|
|
1906
|
+
<code class="cmd">cd</code>
|
|
1907
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
1908
|
+
<span class="category-badge">Shell Builtins</span>
|
|
1909
|
+
</div>
|
|
1910
|
+
<div class="command-meta">
|
|
1911
|
+
<span class="frequency">Used 1x</span>
|
|
1912
|
+
<span class="expand-icon">▼</span>
|
|
1913
|
+
</div>
|
|
1914
|
+
</div>
|
|
1915
|
+
<div class="command-details" id="cmd-15">
|
|
1916
|
+
<div class="full-command">
|
|
1917
|
+
<h5>Full Command:</h5>
|
|
1918
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> git add .gitignore .nojekyll index.html visualizations/01_revenue_by_state.html visualizations/02_purchase_patterns.html visualizations/03_executive_dashboard.html scripts/generate_explainers.py scripts/generate_viz.py docs/explainers/ <span class="operator">&&</span> git commit <span class="flag">-m</span> "<span class="operator">$(</span>cat <span class="operator"><</span><span class="operator"><</span><span class="string">'EOF'</span>
|
|
1919
|
+
Add interactive customer analytics dashboard with 3 visualizations
|
|
1920
|
+
|
|
1921
|
+
- Landing page (index.html<span class="operator">)</span> with navigable card-based UI for GitHub Pages
|
|
1922
|
+
- Viz 1: US choropleth map — revenue by state with 6-metric tooltips
|
|
1923
|
+
- Viz 2: Scatter analysis — purchase patterns with spend distribution
|
|
1924
|
+
- Viz 3: Executive dashboard — 4-panel KPI overview
|
|
1925
|
+
- Claude Code explainer docs (5 .docx files<span class="operator">)</span>
|
|
1926
|
+
- Generation scripts for reproducibility
|
|
1927
|
+
|
|
1928
|
+
Co-Authored-By: Claude Opus 4.5 <span class="operator"><</span>noreply@anthropic.com<span class="operator">></span>
|
|
1929
|
+
EOF
|
|
1930
|
+
<span class="operator">)</span>"</pre>
|
|
1931
|
+
</div>
|
|
1932
|
+
<div class="description">
|
|
1933
|
+
<h5>Description:</h5>
|
|
1934
|
+
<p>Stage all files and create initial commit</p>
|
|
1935
|
+
</div>
|
|
1936
|
+
|
|
1937
|
+
|
|
1938
|
+
</div>
|
|
1939
|
+
</div>
|
|
1940
|
+
<div class="command-card" data-category="Shell Builtins" data-complexity="advanced" data-frequency="1" data-name="cd">
|
|
1941
|
+
<div class="command-header" onclick="toggleCommand('cmd-16')">
|
|
1942
|
+
<div class="command-main">
|
|
1943
|
+
<code class="cmd">cd</code>
|
|
1944
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
1945
|
+
<span class="category-badge">Shell Builtins</span>
|
|
1946
|
+
</div>
|
|
1947
|
+
<div class="command-meta">
|
|
1948
|
+
<span class="frequency">Used 1x</span>
|
|
1949
|
+
<span class="expand-icon">▼</span>
|
|
1950
|
+
</div>
|
|
1951
|
+
</div>
|
|
1952
|
+
<div class="command-details" id="cmd-16">
|
|
1953
|
+
<div class="full-command">
|
|
1954
|
+
<h5>Full Command:</h5>
|
|
1955
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> find . <span class="flag">-name</span> <span class="string">"generate_viz.py"</span> <span class="flag">-o</span> <span class="flag">-name</span> <span class="string">"generate_explainers.py"</span> 2<span class="operator">></span>/dev/null</pre>
|
|
1956
|
+
</div>
|
|
1957
|
+
<div class="description">
|
|
1958
|
+
<h5>Description:</h5>
|
|
1959
|
+
<p>Find script locations</p>
|
|
1960
|
+
</div>
|
|
1961
|
+
|
|
1962
|
+
|
|
1963
|
+
</div>
|
|
1964
|
+
</div>
|
|
1965
|
+
<div class="command-card" data-category="Shell Builtins" data-complexity="advanced" data-frequency="1" data-name="cd">
|
|
1966
|
+
<div class="command-header" onclick="toggleCommand('cmd-17')">
|
|
1967
|
+
<div class="command-main">
|
|
1968
|
+
<code class="cmd">cd</code>
|
|
1969
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
1970
|
+
<span class="category-badge">Shell Builtins</span>
|
|
1971
|
+
</div>
|
|
1972
|
+
<div class="command-meta">
|
|
1973
|
+
<span class="frequency">Used 1x</span>
|
|
1974
|
+
<span class="expand-icon">▼</span>
|
|
1975
|
+
</div>
|
|
1976
|
+
</div>
|
|
1977
|
+
<div class="command-details" id="cmd-17">
|
|
1978
|
+
<div class="full-command">
|
|
1979
|
+
<h5>Full Command:</h5>
|
|
1980
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> git add .gitignore .nojekyll index.html visualizations/01_revenue_by_state.html visualizations/02_purchase_patterns.html visualizations/03_executive_dashboard.html visualizations/generate_viz.py scripts/generate_explainers.py docs/explainers/ <span class="operator">&&</span> git commit <span class="flag">-m</span> "<span class="operator">$(</span>cat <span class="operator"><</span><span class="operator"><</span><span class="string">'EOF'</span>
|
|
1981
|
+
Add interactive customer analytics dashboard with 3 visualizations
|
|
1982
|
+
|
|
1983
|
+
- Landing page (index.html<span class="operator">)</span> with navigable card-based UI for GitHub Pages
|
|
1984
|
+
- Viz 1: US choropleth map — revenue by state with 6-metric tooltips
|
|
1985
|
+
- Viz 2: Scatter analysis — purchase patterns with spend distribution
|
|
1986
|
+
- Viz 3: Executive dashboard — 4-panel KPI overview
|
|
1987
|
+
- Claude Code explainer docs (5 .docx files<span class="operator">)</span>
|
|
1988
|
+
- Generation scripts for reproducibility
|
|
1989
|
+
|
|
1990
|
+
Co-Authored-By: Claude Opus 4.5 <span class="operator"><</span>noreply@anthropic.com<span class="operator">></span>
|
|
1991
|
+
EOF
|
|
1992
|
+
<span class="operator">)</span>"</pre>
|
|
1993
|
+
</div>
|
|
1994
|
+
<div class="description">
|
|
1995
|
+
<h5>Description:</h5>
|
|
1996
|
+
<p>Stage all files and create initial commit</p>
|
|
1997
|
+
</div>
|
|
1998
|
+
|
|
1999
|
+
|
|
2000
|
+
</div>
|
|
2001
|
+
</div>
|
|
2002
|
+
<div class="command-card" data-category="Shell Builtins" data-complexity="advanced" data-frequency="1" data-name="cd">
|
|
2003
|
+
<div class="command-header" onclick="toggleCommand('cmd-18')">
|
|
2004
|
+
<div class="command-main">
|
|
2005
|
+
<code class="cmd">cd</code>
|
|
2006
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2007
|
+
<span class="category-badge">Shell Builtins</span>
|
|
2008
|
+
</div>
|
|
2009
|
+
<div class="command-meta">
|
|
2010
|
+
<span class="frequency">Used 1x</span>
|
|
2011
|
+
<span class="expand-icon">▼</span>
|
|
2012
|
+
</div>
|
|
2013
|
+
</div>
|
|
2014
|
+
<div class="command-details" id="cmd-18">
|
|
2015
|
+
<div class="full-command">
|
|
2016
|
+
<h5>Full Command:</h5>
|
|
2017
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> git push <span class="flag">-u</span> origin main</pre>
|
|
2018
|
+
</div>
|
|
2019
|
+
<div class="description">
|
|
2020
|
+
<h5>Description:</h5>
|
|
2021
|
+
<p>Push initial commit to remote</p>
|
|
2022
|
+
</div>
|
|
2023
|
+
|
|
2024
|
+
|
|
2025
|
+
</div>
|
|
2026
|
+
</div>
|
|
2027
|
+
<div class="command-card" data-category="Git" data-complexity="advanced" data-frequency="1" data-name="gh">
|
|
2028
|
+
<div class="command-header" onclick="toggleCommand('cmd-19')">
|
|
2029
|
+
<div class="command-main">
|
|
2030
|
+
<code class="cmd">gh</code>
|
|
2031
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2032
|
+
<span class="category-badge">Git</span>
|
|
2033
|
+
</div>
|
|
2034
|
+
<div class="command-meta">
|
|
2035
|
+
<span class="frequency">Used 1x</span>
|
|
2036
|
+
<span class="expand-icon">▼</span>
|
|
2037
|
+
</div>
|
|
2038
|
+
</div>
|
|
2039
|
+
<div class="command-details" id="cmd-19">
|
|
2040
|
+
<div class="full-command">
|
|
2041
|
+
<h5>Full Command:</h5>
|
|
2042
|
+
<pre class="syntax-highlighted"><span class="cmd">gh</span> api repos/bjpl/data_example/pages <span class="flag">-X</span> POST <span class="flag">-f</span> <span class="string">"build_type=workflow"</span> <span class="flag">-f</span> <span class="string">"source[branch]=main"</span> <span class="flag">-f</span> <span class="string">"source[path]=/"</span> 2<span class="operator">></span>&1 <span class="operator">|</span><span class="operator">|</span> gh api repos/bjpl/data_example/pages <span class="flag">-X</span> POST <span class="flag">--input</span> - <span class="operator"><</span><span class="operator"><</span><span class="string">'EOF'</span>
|
|
2043
|
+
{<span class="string">"source"</span>:{<span class="string">"branch"</span>:<span class="string">"main"</span>,<span class="string">"path"</span>:<span class="string">"/"</span>}}
|
|
2044
|
+
EOF</pre>
|
|
2045
|
+
</div>
|
|
2046
|
+
<div class="description">
|
|
2047
|
+
<h5>Description:</h5>
|
|
2048
|
+
<p>Enable GitHub Pages on main branch</p>
|
|
2049
|
+
</div>
|
|
2050
|
+
<div class="flags-section"><h5>Flags:</h5><ul class="flags-list"><li><code class="flag">-X</code> - </li><li><code class="flag">-f</code> - </li><li><code class="flag">-f</code> - </li><li><code class="flag">-f</code> - </li></ul></div>
|
|
2051
|
+
|
|
2052
|
+
</div>
|
|
2053
|
+
</div>
|
|
2054
|
+
<div class="command-card" data-category="Git" data-complexity="simple" data-frequency="1" data-name="gh">
|
|
2055
|
+
<div class="command-header" onclick="toggleCommand('cmd-20')">
|
|
2056
|
+
<div class="command-main">
|
|
2057
|
+
<code class="cmd">gh</code>
|
|
2058
|
+
<span class="complexity-badge simple">simple</span>
|
|
2059
|
+
<span class="category-badge">Git</span>
|
|
2060
|
+
</div>
|
|
2061
|
+
<div class="command-meta">
|
|
2062
|
+
<span class="frequency">Used 1x</span>
|
|
2063
|
+
<span class="expand-icon">▼</span>
|
|
2064
|
+
</div>
|
|
2065
|
+
</div>
|
|
2066
|
+
<div class="command-details" id="cmd-20">
|
|
2067
|
+
<div class="full-command">
|
|
2068
|
+
<h5>Full Command:</h5>
|
|
2069
|
+
<pre class="syntax-highlighted"><span class="cmd">gh</span> api repos/bjpl/data_example/pages <span class="flag">--jq</span> <span class="string">'.html_url, .status'</span></pre>
|
|
2070
|
+
</div>
|
|
2071
|
+
<div class="description">
|
|
2072
|
+
<h5>Description:</h5>
|
|
2073
|
+
<p>Check GitHub Pages status and URL</p>
|
|
2074
|
+
</div>
|
|
2075
|
+
<div class="flags-section"><h5>Flags:</h5><ul class="flags-list"><li><code class="flag">--jq</code> - </li></ul></div>
|
|
2076
|
+
|
|
2077
|
+
</div>
|
|
2078
|
+
</div>
|
|
2079
|
+
<div class="command-card" data-category="Shell Builtins" data-complexity="advanced" data-frequency="1" data-name="cd">
|
|
2080
|
+
<div class="command-header" onclick="toggleCommand('cmd-21')">
|
|
2081
|
+
<div class="command-main">
|
|
2082
|
+
<code class="cmd">cd</code>
|
|
2083
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2084
|
+
<span class="category-badge">Shell Builtins</span>
|
|
2085
|
+
</div>
|
|
2086
|
+
<div class="command-meta">
|
|
2087
|
+
<span class="frequency">Used 1x</span>
|
|
2088
|
+
<span class="expand-icon">▼</span>
|
|
2089
|
+
</div>
|
|
2090
|
+
</div>
|
|
2091
|
+
<div class="command-details" id="cmd-21">
|
|
2092
|
+
<div class="full-command">
|
|
2093
|
+
<h5>Full Command:</h5>
|
|
2094
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> git status <span class="operator">&&</span> echo <span class="string">"---"</span> <span class="operator">&&</span> git log <span class="flag">--oneline</span> <span class="flag">-3</span> <span class="operator">&&</span> echo <span class="string">"---"</span> <span class="operator">&&</span> git remote <span class="flag">-v</span></pre>
|
|
2095
|
+
</div>
|
|
2096
|
+
<div class="description">
|
|
2097
|
+
<h5>Description:</h5>
|
|
2098
|
+
<p>Check git status, log, and remote</p>
|
|
2099
|
+
</div>
|
|
2100
|
+
|
|
2101
|
+
|
|
2102
|
+
</div>
|
|
2103
|
+
</div>
|
|
2104
|
+
<div class="command-card" data-category="Shell Builtins" data-complexity="advanced" data-frequency="1" data-name="cd">
|
|
2105
|
+
<div class="command-header" onclick="toggleCommand('cmd-22')">
|
|
2106
|
+
<div class="command-main">
|
|
2107
|
+
<code class="cmd">cd</code>
|
|
2108
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2109
|
+
<span class="category-badge">Shell Builtins</span>
|
|
2110
|
+
</div>
|
|
2111
|
+
<div class="command-meta">
|
|
2112
|
+
<span class="frequency">Used 1x</span>
|
|
2113
|
+
<span class="expand-icon">▼</span>
|
|
2114
|
+
</div>
|
|
2115
|
+
</div>
|
|
2116
|
+
<div class="command-details" id="cmd-22">
|
|
2117
|
+
<div class="full-command">
|
|
2118
|
+
<h5>Full Command:</h5>
|
|
2119
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> git push origin main <span class="flag">--force</span></pre>
|
|
2120
|
+
</div>
|
|
2121
|
+
<div class="description">
|
|
2122
|
+
<h5>Description:</h5>
|
|
2123
|
+
<p>Force push to remote to trigger Actions</p>
|
|
2124
|
+
</div>
|
|
2125
|
+
|
|
2126
|
+
|
|
2127
|
+
</div>
|
|
2128
|
+
</div>
|
|
2129
|
+
<div class="command-card" data-category="Git" data-complexity="simple" data-frequency="1" data-name="gh">
|
|
2130
|
+
<div class="command-header" onclick="toggleCommand('cmd-23')">
|
|
2131
|
+
<div class="command-main">
|
|
2132
|
+
<code class="cmd">gh</code>
|
|
2133
|
+
<span class="complexity-badge simple">simple</span>
|
|
2134
|
+
<span class="category-badge">Git</span>
|
|
2135
|
+
</div>
|
|
2136
|
+
<div class="command-meta">
|
|
2137
|
+
<span class="frequency">Used 1x</span>
|
|
2138
|
+
<span class="expand-icon">▼</span>
|
|
2139
|
+
</div>
|
|
2140
|
+
</div>
|
|
2141
|
+
<div class="command-details" id="cmd-23">
|
|
2142
|
+
<div class="full-command">
|
|
2143
|
+
<h5>Full Command:</h5>
|
|
2144
|
+
<pre class="syntax-highlighted"><span class="cmd">gh</span> api repos/bjpl/data_example <span class="flag">--jq</span> <span class="string">'{default_branch: .default_branch, size: .size, pushed_at: .pushed_at, has_pages: .has_pages}'</span></pre>
|
|
2145
|
+
</div>
|
|
2146
|
+
<div class="description">
|
|
2147
|
+
<h5>Description:</h5>
|
|
2148
|
+
<p>Check repo state on GitHub</p>
|
|
2149
|
+
</div>
|
|
2150
|
+
<div class="flags-section"><h5>Flags:</h5><ul class="flags-list"><li><code class="flag">--jq</code> - </li></ul></div>
|
|
2151
|
+
|
|
2152
|
+
</div>
|
|
2153
|
+
</div>
|
|
2154
|
+
<div class="command-card" data-category="Git" data-complexity="simple" data-frequency="1" data-name="gh">
|
|
2155
|
+
<div class="command-header" onclick="toggleCommand('cmd-24')">
|
|
2156
|
+
<div class="command-main">
|
|
2157
|
+
<code class="cmd">gh</code>
|
|
2158
|
+
<span class="complexity-badge simple">simple</span>
|
|
2159
|
+
<span class="category-badge">Git</span>
|
|
2160
|
+
</div>
|
|
2161
|
+
<div class="command-meta">
|
|
2162
|
+
<span class="frequency">Used 1x</span>
|
|
2163
|
+
<span class="expand-icon">▼</span>
|
|
2164
|
+
</div>
|
|
2165
|
+
</div>
|
|
2166
|
+
<div class="command-details" id="cmd-24">
|
|
2167
|
+
<div class="full-command">
|
|
2168
|
+
<h5>Full Command:</h5>
|
|
2169
|
+
<pre class="syntax-highlighted"><span class="cmd">gh</span> api repos/bjpl/data_example/pages <span class="flag">--jq</span> <span class="string">'{url: .html_url, status: .status, build_type: .build_type, source: .source}'</span></pre>
|
|
2170
|
+
</div>
|
|
2171
|
+
<div class="description">
|
|
2172
|
+
<h5>Description:</h5>
|
|
2173
|
+
<p>Check Pages configuration</p>
|
|
2174
|
+
</div>
|
|
2175
|
+
<div class="flags-section"><h5>Flags:</h5><ul class="flags-list"><li><code class="flag">--jq</code> - </li></ul></div>
|
|
2176
|
+
|
|
2177
|
+
</div>
|
|
2178
|
+
</div>
|
|
2179
|
+
<div class="command-card" data-category="Git" data-complexity="intermediate" data-frequency="1" data-name="gh">
|
|
2180
|
+
<div class="command-header" onclick="toggleCommand('cmd-25')">
|
|
2181
|
+
<div class="command-main">
|
|
2182
|
+
<code class="cmd">gh</code>
|
|
2183
|
+
<span class="complexity-badge intermediate">intermediate</span>
|
|
2184
|
+
<span class="category-badge">Git</span>
|
|
2185
|
+
</div>
|
|
2186
|
+
<div class="command-meta">
|
|
2187
|
+
<span class="frequency">Used 1x</span>
|
|
2188
|
+
<span class="expand-icon">▼</span>
|
|
2189
|
+
</div>
|
|
2190
|
+
</div>
|
|
2191
|
+
<div class="command-details" id="cmd-25">
|
|
2192
|
+
<div class="full-command">
|
|
2193
|
+
<h5>Full Command:</h5>
|
|
2194
|
+
<pre class="syntax-highlighted"><span class="cmd">gh</span> api repos/bjpl/data_example/contents/ <span class="flag">--jq</span> <span class="string">'.[].name'</span> 2<span class="operator">></span>&1</pre>
|
|
2195
|
+
</div>
|
|
2196
|
+
<div class="description">
|
|
2197
|
+
<h5>Description:</h5>
|
|
2198
|
+
<p>List files on remote</p>
|
|
2199
|
+
</div>
|
|
2200
|
+
<div class="flags-section"><h5>Flags:</h5><ul class="flags-list"><li><code class="flag">--jq</code> - </li></ul></div>
|
|
2201
|
+
|
|
2202
|
+
</div>
|
|
2203
|
+
</div>
|
|
2204
|
+
<div class="command-card" data-category="Git" data-complexity="intermediate" data-frequency="1" data-name="gh">
|
|
2205
|
+
<div class="command-header" onclick="toggleCommand('cmd-26')">
|
|
2206
|
+
<div class="command-main">
|
|
2207
|
+
<code class="cmd">gh</code>
|
|
2208
|
+
<span class="complexity-badge intermediate">intermediate</span>
|
|
2209
|
+
<span class="category-badge">Git</span>
|
|
2210
|
+
</div>
|
|
2211
|
+
<div class="command-meta">
|
|
2212
|
+
<span class="frequency">Used 1x</span>
|
|
2213
|
+
<span class="expand-icon">▼</span>
|
|
2214
|
+
</div>
|
|
2215
|
+
</div>
|
|
2216
|
+
<div class="command-details" id="cmd-26">
|
|
2217
|
+
<div class="full-command">
|
|
2218
|
+
<h5>Full Command:</h5>
|
|
2219
|
+
<pre class="syntax-highlighted"><span class="cmd">gh</span> api repos/bjpl/data_example/pages <span class="flag">-X</span> PUT <span class="flag">--input</span> - <span class="operator"><</span><span class="operator"><</span><span class="string">'EOF'</span>
|
|
2220
|
+
{<span class="string">"build_type"</span>:<span class="string">"workflow"</span>,<span class="string">"source"</span>:{<span class="string">"branch"</span>:<span class="string">"main"</span>,<span class="string">"path"</span>:<span class="string">"/"</span>}}
|
|
2221
|
+
EOF</pre>
|
|
2222
|
+
</div>
|
|
2223
|
+
<div class="description">
|
|
2224
|
+
<h5>Description:</h5>
|
|
2225
|
+
<p>Switch Pages to workflow-based deployment</p>
|
|
2226
|
+
</div>
|
|
2227
|
+
<div class="flags-section"><h5>Flags:</h5><ul class="flags-list"><li><code class="flag">-X</code> - </li><li><code class="flag">--input</code> - </li><li><code class="flag">-</code> - </li></ul></div>
|
|
2228
|
+
|
|
2229
|
+
</div>
|
|
2230
|
+
</div>
|
|
2231
|
+
<div class="command-card" data-category="Git" data-complexity="intermediate" data-frequency="1" data-name="gh">
|
|
2232
|
+
<div class="command-header" onclick="toggleCommand('cmd-27')">
|
|
2233
|
+
<div class="command-main">
|
|
2234
|
+
<code class="cmd">gh</code>
|
|
2235
|
+
<span class="complexity-badge intermediate">intermediate</span>
|
|
2236
|
+
<span class="category-badge">Git</span>
|
|
2237
|
+
</div>
|
|
2238
|
+
<div class="command-meta">
|
|
2239
|
+
<span class="frequency">Used 1x</span>
|
|
2240
|
+
<span class="expand-icon">▼</span>
|
|
2241
|
+
</div>
|
|
2242
|
+
</div>
|
|
2243
|
+
<div class="command-details" id="cmd-27">
|
|
2244
|
+
<div class="full-command">
|
|
2245
|
+
<h5>Full Command:</h5>
|
|
2246
|
+
<pre class="syntax-highlighted"><span class="cmd">gh</span> api repos/bjpl/data_example/pages <span class="flag">-X</span> PUT <span class="flag">-f</span> <span class="string">"build_type=workflow"</span> <span class="flag">-f</span> <span class="string">"source[branch]=main"</span> <span class="flag">-f</span> <span class="string">"source[path]=/"</span> 2<span class="operator">></span>&1</pre>
|
|
2247
|
+
</div>
|
|
2248
|
+
<div class="description">
|
|
2249
|
+
<h5>Description:</h5>
|
|
2250
|
+
<p>Switch Pages build type to workflow</p>
|
|
2251
|
+
</div>
|
|
2252
|
+
<div class="flags-section"><h5>Flags:</h5><ul class="flags-list"><li><code class="flag">-X</code> - </li><li><code class="flag">-f</code> - </li><li><code class="flag">-f</code> - </li><li><code class="flag">-f</code> - </li></ul></div>
|
|
2253
|
+
|
|
2254
|
+
</div>
|
|
2255
|
+
</div>
|
|
2256
|
+
<div class="command-card" data-category="File System" data-complexity="simple" data-frequency="1" data-name="mkdir">
|
|
2257
|
+
<div class="command-header" onclick="toggleCommand('cmd-28')">
|
|
2258
|
+
<div class="command-main">
|
|
2259
|
+
<code class="cmd">mkdir</code>
|
|
2260
|
+
<span class="complexity-badge simple">simple</span>
|
|
2261
|
+
<span class="category-badge">File System</span>
|
|
2262
|
+
</div>
|
|
2263
|
+
<div class="command-meta">
|
|
2264
|
+
<span class="frequency">Used 1x</span>
|
|
2265
|
+
<span class="expand-icon">▼</span>
|
|
2266
|
+
</div>
|
|
2267
|
+
</div>
|
|
2268
|
+
<div class="command-details" id="cmd-28">
|
|
2269
|
+
<div class="full-command">
|
|
2270
|
+
<h5>Full Command:</h5>
|
|
2271
|
+
<pre class="syntax-highlighted"><span class="cmd">mkdir</span> <span class="flag">-p</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/.github/workflows"</span></pre>
|
|
2272
|
+
</div>
|
|
2273
|
+
<div class="description">
|
|
2274
|
+
<h5>Description:</h5>
|
|
2275
|
+
<p>Create workflows directory</p>
|
|
2276
|
+
</div>
|
|
2277
|
+
<div class="flags-section"><h5>Flags:</h5><ul class="flags-list"><li><code class="flag">-p</code> - </li></ul></div>
|
|
2278
|
+
|
|
2279
|
+
</div>
|
|
2280
|
+
</div>
|
|
2281
|
+
<div class="command-card" data-category="Shell Builtins" data-complexity="advanced" data-frequency="1" data-name="cd">
|
|
2282
|
+
<div class="command-header" onclick="toggleCommand('cmd-29')">
|
|
2283
|
+
<div class="command-main">
|
|
2284
|
+
<code class="cmd">cd</code>
|
|
2285
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2286
|
+
<span class="category-badge">Shell Builtins</span>
|
|
2287
|
+
</div>
|
|
2288
|
+
<div class="command-meta">
|
|
2289
|
+
<span class="frequency">Used 1x</span>
|
|
2290
|
+
<span class="expand-icon">▼</span>
|
|
2291
|
+
</div>
|
|
2292
|
+
</div>
|
|
2293
|
+
<div class="command-details" id="cmd-29">
|
|
2294
|
+
<div class="full-command">
|
|
2295
|
+
<h5>Full Command:</h5>
|
|
2296
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> git add .github/workflows/deploy.yml <span class="operator">&&</span> git commit <span class="flag">-m</span> "<span class="operator">$(</span>cat <span class="operator"><</span><span class="operator"><</span><span class="string">'EOF'</span>
|
|
2297
|
+
Add GitHub Actions workflow for Pages deployment
|
|
2298
|
+
|
|
2299
|
+
Co-Authored-By: Claude Opus 4.5 <span class="operator"><</span>noreply@anthropic.com<span class="operator">></span>
|
|
2300
|
+
EOF
|
|
2301
|
+
<span class="operator">)</span>" <span class="operator">&&</span> git push origin main</pre>
|
|
2302
|
+
</div>
|
|
2303
|
+
<div class="description">
|
|
2304
|
+
<h5>Description:</h5>
|
|
2305
|
+
<p>Commit and push workflow to trigger Actions deployment</p>
|
|
2306
|
+
</div>
|
|
2307
|
+
|
|
2308
|
+
|
|
2309
|
+
</div>
|
|
2310
|
+
</div>
|
|
2311
|
+
<div class="command-card" data-category="Process & System" data-complexity="advanced" data-frequency="1" data-name="sleep">
|
|
2312
|
+
<div class="command-header" onclick="toggleCommand('cmd-30')">
|
|
2313
|
+
<div class="command-main">
|
|
2314
|
+
<code class="cmd">sleep</code>
|
|
2315
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2316
|
+
<span class="category-badge">Process & System</span>
|
|
2317
|
+
</div>
|
|
2318
|
+
<div class="command-meta">
|
|
2319
|
+
<span class="frequency">Used 1x</span>
|
|
2320
|
+
<span class="expand-icon">▼</span>
|
|
2321
|
+
</div>
|
|
2322
|
+
</div>
|
|
2323
|
+
<div class="command-details" id="cmd-30">
|
|
2324
|
+
<div class="full-command">
|
|
2325
|
+
<h5>Full Command:</h5>
|
|
2326
|
+
<pre class="syntax-highlighted"><span class="cmd">sleep</span> 5 <span class="operator">&&</span> gh run list <span class="flag">--repo</span> bjpl/data_example <span class="flag">--limit</span> 3</pre>
|
|
2327
|
+
</div>
|
|
2328
|
+
<div class="description">
|
|
2329
|
+
<h5>Description:</h5>
|
|
2330
|
+
<p>Check if Actions workflow triggered</p>
|
|
2331
|
+
</div>
|
|
2332
|
+
|
|
2333
|
+
|
|
2334
|
+
</div>
|
|
2335
|
+
</div>
|
|
2336
|
+
<div class="command-card" data-category="Package Management" data-complexity="simple" data-frequency="1" data-name="npm">
|
|
2337
|
+
<div class="command-header" onclick="toggleCommand('cmd-31')">
|
|
2338
|
+
<div class="command-main">
|
|
2339
|
+
<code class="cmd">npm</code>
|
|
2340
|
+
<span class="complexity-badge simple">simple</span>
|
|
2341
|
+
<span class="category-badge">Package Management</span>
|
|
2342
|
+
</div>
|
|
2343
|
+
<div class="command-meta">
|
|
2344
|
+
<span class="frequency">Used 1x</span>
|
|
2345
|
+
<span class="expand-icon">▼</span>
|
|
2346
|
+
</div>
|
|
2347
|
+
</div>
|
|
2348
|
+
<div class="command-details" id="cmd-31">
|
|
2349
|
+
<div class="full-command">
|
|
2350
|
+
<h5>Full Command:</h5>
|
|
2351
|
+
<pre class="syntax-highlighted"><span class="cmd">npm</span> install <span class="flag">-g</span> session-slides</pre>
|
|
2352
|
+
</div>
|
|
2353
|
+
<div class="description">
|
|
2354
|
+
<h5>Description:</h5>
|
|
2355
|
+
<p>Install session-slides globally</p>
|
|
2356
|
+
</div>
|
|
2357
|
+
<div class="flags-section"><h5>Flags:</h5><ul class="flags-list"><li><code class="flag">-g</code> - </li></ul></div>
|
|
2358
|
+
|
|
2359
|
+
</div>
|
|
2360
|
+
</div>
|
|
2361
|
+
<div class="command-card" data-category="Unknown" data-complexity="advanced" data-frequency="1" data-name="session-slides">
|
|
2362
|
+
<div class="command-header" onclick="toggleCommand('cmd-32')">
|
|
2363
|
+
<div class="command-main">
|
|
2364
|
+
<code class="cmd">session-slides</code>
|
|
2365
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2366
|
+
<span class="category-badge">Unknown</span>
|
|
2367
|
+
</div>
|
|
2368
|
+
<div class="command-meta">
|
|
2369
|
+
<span class="frequency">Used 1x</span>
|
|
2370
|
+
<span class="expand-icon">▼</span>
|
|
2371
|
+
</div>
|
|
2372
|
+
</div>
|
|
2373
|
+
<div class="command-details" id="cmd-32">
|
|
2374
|
+
<div class="full-command">
|
|
2375
|
+
<h5>Full Command:</h5>
|
|
2376
|
+
<pre class="syntax-highlighted"><span class="cmd">session-slides</span> <span class="flag">--help</span> 2<span class="operator">></span>&1 <span class="operator">|</span><span class="operator">|</span> npx session-slides <span class="flag">--help</span> 2<span class="operator">></span>&1</pre>
|
|
2377
|
+
</div>
|
|
2378
|
+
<div class="description">
|
|
2379
|
+
<h5>Description:</h5>
|
|
2380
|
+
<p>Check session-slides usage</p>
|
|
2381
|
+
</div>
|
|
2382
|
+
<div class="flags-section"><h5>Flags:</h5><ul class="flags-list"><li><code class="flag">--help</code> - </li></ul></div>
|
|
2383
|
+
|
|
2384
|
+
</div>
|
|
2385
|
+
</div>
|
|
2386
|
+
<div class="command-card" data-category="Shell Builtins" data-complexity="advanced" data-frequency="1" data-name="cd">
|
|
2387
|
+
<div class="command-header" onclick="toggleCommand('cmd-33')">
|
|
2388
|
+
<div class="command-main">
|
|
2389
|
+
<code class="cmd">cd</code>
|
|
2390
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2391
|
+
<span class="category-badge">Shell Builtins</span>
|
|
2392
|
+
</div>
|
|
2393
|
+
<div class="command-meta">
|
|
2394
|
+
<span class="frequency">Used 1x</span>
|
|
2395
|
+
<span class="expand-icon">▼</span>
|
|
2396
|
+
</div>
|
|
2397
|
+
</div>
|
|
2398
|
+
<div class="command-details" id="cmd-33">
|
|
2399
|
+
<div class="full-command">
|
|
2400
|
+
<h5>Full Command:</h5>
|
|
2401
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> session-slides <span class="flag">--title</span> <span class="string">"Customer Analytics Dashboard Build"</span> <span class="flag">--open</span> <span class="flag">--verbose</span> 2<span class="operator">></span>&1</pre>
|
|
2402
|
+
</div>
|
|
2403
|
+
<div class="description">
|
|
2404
|
+
<h5>Description:</h5>
|
|
2405
|
+
<p>Generate slides from current session</p>
|
|
2406
|
+
</div>
|
|
2407
|
+
|
|
2408
|
+
|
|
2409
|
+
</div>
|
|
2410
|
+
</div>
|
|
2411
|
+
<div class="command-card" data-category="File System" data-complexity="intermediate" data-frequency="1" data-name="ls">
|
|
2412
|
+
<div class="command-header" onclick="toggleCommand('cmd-34')">
|
|
2413
|
+
<div class="command-main">
|
|
2414
|
+
<code class="cmd">ls</code>
|
|
2415
|
+
<span class="complexity-badge intermediate">intermediate</span>
|
|
2416
|
+
<span class="category-badge">File System</span>
|
|
2417
|
+
</div>
|
|
2418
|
+
<div class="command-meta">
|
|
2419
|
+
<span class="frequency">Used 1x</span>
|
|
2420
|
+
<span class="expand-icon">▼</span>
|
|
2421
|
+
</div>
|
|
2422
|
+
</div>
|
|
2423
|
+
<div class="command-details" id="cmd-34">
|
|
2424
|
+
<div class="full-command">
|
|
2425
|
+
<h5>Full Command:</h5>
|
|
2426
|
+
<pre class="syntax-highlighted"><span class="cmd">ls</span> <span class="flag">-lt</span> <span class="path">~/.claude/projects/</span> 2<span class="operator">></span>/dev/null <span class="operator">|</span> head <span class="flag">-20</span></pre>
|
|
2427
|
+
</div>
|
|
2428
|
+
<div class="description">
|
|
2429
|
+
<h5>Description:</h5>
|
|
2430
|
+
<p>Find Claude session directories</p>
|
|
2431
|
+
</div>
|
|
2432
|
+
<div class="flags-section"><h5>Flags:</h5><ul class="flags-list"><li><code class="flag">-lt</code> - </li></ul></div>
|
|
2433
|
+
|
|
2434
|
+
</div>
|
|
2435
|
+
</div>
|
|
2436
|
+
<div class="command-card" data-category="File System" data-complexity="intermediate" data-frequency="1" data-name="ls">
|
|
2437
|
+
<div class="command-header" onclick="toggleCommand('cmd-35')">
|
|
2438
|
+
<div class="command-main">
|
|
2439
|
+
<code class="cmd">ls</code>
|
|
2440
|
+
<span class="complexity-badge intermediate">intermediate</span>
|
|
2441
|
+
<span class="category-badge">File System</span>
|
|
2442
|
+
</div>
|
|
2443
|
+
<div class="command-meta">
|
|
2444
|
+
<span class="frequency">Used 1x</span>
|
|
2445
|
+
<span class="expand-icon">▼</span>
|
|
2446
|
+
</div>
|
|
2447
|
+
</div>
|
|
2448
|
+
<div class="command-details" id="cmd-35">
|
|
2449
|
+
<div class="full-command">
|
|
2450
|
+
<h5>Full Command:</h5>
|
|
2451
|
+
<pre class="syntax-highlighted"><span class="cmd">ls</span> <span class="flag">-lt</span> <span class="path">~/.claude/projects/C--Users-brand-Development-Project-Workspace-active-development-session-with-chris/</span> 2<span class="operator">></span>/dev/null <span class="operator">|</span> head <span class="flag">-10</span></pre>
|
|
2452
|
+
</div>
|
|
2453
|
+
<div class="description">
|
|
2454
|
+
<h5>Description:</h5>
|
|
2455
|
+
<p>List session files for this project</p>
|
|
2456
|
+
</div>
|
|
2457
|
+
<div class="flags-section"><h5>Flags:</h5><ul class="flags-list"><li><code class="flag">-lt</code> - </li></ul></div>
|
|
2458
|
+
|
|
2459
|
+
</div>
|
|
2460
|
+
</div>
|
|
2461
|
+
<div class="command-card" data-category="Shell Builtins" data-complexity="advanced" data-frequency="1" data-name="cd">
|
|
2462
|
+
<div class="command-header" onclick="toggleCommand('cmd-36')">
|
|
2463
|
+
<div class="command-main">
|
|
2464
|
+
<code class="cmd">cd</code>
|
|
2465
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2466
|
+
<span class="category-badge">Shell Builtins</span>
|
|
2467
|
+
</div>
|
|
2468
|
+
<div class="command-meta">
|
|
2469
|
+
<span class="frequency">Used 1x</span>
|
|
2470
|
+
<span class="expand-icon">▼</span>
|
|
2471
|
+
</div>
|
|
2472
|
+
</div>
|
|
2473
|
+
<div class="command-details" id="cmd-36">
|
|
2474
|
+
<div class="full-command">
|
|
2475
|
+
<h5>Full Command:</h5>
|
|
2476
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> session-slides <span class="flag">--from</span> <span class="path">~/.claude/projects/C--Users-brand-Development-Project-Workspace-active-development-session-with-chris/081cfcfd-cde6-4304-89ca-6ac61faf8d85.jsonl</span> <span class="flag">--title</span> <span class="string">"Customer Analytics Dashboard Build"</span> <span class="flag">--open</span> <span class="flag">--verbose</span> 2<span class="operator">></span>&1</pre>
|
|
2477
|
+
</div>
|
|
2478
|
+
<div class="description">
|
|
2479
|
+
<h5>Description:</h5>
|
|
2480
|
+
<p>Generate slides from current session file</p>
|
|
2481
|
+
</div>
|
|
2482
|
+
|
|
2483
|
+
|
|
2484
|
+
</div>
|
|
2485
|
+
</div>
|
|
2486
|
+
</div>
|
|
2487
|
+
</div>
|
|
2488
|
+
</section>
|
|
2489
|
+
|
|
2490
|
+
<section id="panel-lessons" class="panel" role="tabpanel" aria-labelledby="tab-lessons">
|
|
2491
|
+
|
|
2492
|
+
<div class="lessons-container">
|
|
2493
|
+
|
|
2494
|
+
<div class="lesson-section">
|
|
2495
|
+
<h2 class="lesson-title">
|
|
2496
|
+
<span class="lesson-icon">📌</span>
|
|
2497
|
+
Shell Builtins
|
|
2498
|
+
<span class="lesson-count">(18 commands)</span>
|
|
2499
|
+
</h2>
|
|
2500
|
+
<div class="lesson-content">
|
|
2501
|
+
<div class="concept-overview">
|
|
2502
|
+
<h4>Concept Overview:</h4>
|
|
2503
|
+
<p>Commands related to shell builtins operations and utilities.</p>
|
|
2504
|
+
</div>
|
|
2505
|
+
<div class="lesson-commands">
|
|
2506
|
+
<h4>Commands:</h4>
|
|
2507
|
+
|
|
2508
|
+
<div class="lesson-command">
|
|
2509
|
+
<div class="lesson-command-header">
|
|
2510
|
+
<code class="cmd">cd</code>
|
|
2511
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2512
|
+
</div>
|
|
2513
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> python scripts/generate_explainers.py</pre>
|
|
2514
|
+
<p class="lesson-description">Generate all 5 explainer docx files</p>
|
|
2515
|
+
</div>
|
|
2516
|
+
<div class="lesson-command">
|
|
2517
|
+
<div class="lesson-command-header">
|
|
2518
|
+
<code class="cmd">cd</code>
|
|
2519
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2520
|
+
</div>
|
|
2521
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> python <span class="flag">-c</span> "
|
|
2522
|
+
import openpyxl
|
|
2523
|
+
wb = openpyxl.load_workbook(<span class="string">'C:/Users/brand/Downloads/mock_customer_data.xlsx'</span>, data_only=True<span class="operator">)</span>
|
|
2524
|
+
for sheet in wb.sheetnames:
|
|
2525
|
+
ws = wb[sheet]
|
|
2526
|
+
print(f<span class="string">'=== Sheet: {sheet} ==='</span><span class="operator">)</span>
|
|
2527
|
+
print(f<span class="string">'Rows: {ws.max_row}, Cols: {ws.max_column}'</span><span class="operator">)</span>
|
|
2528
|
+
# Print headers
|
|
2529
|
+
headers = [cell.value for cell in ws[1]]
|
|
2530
|
+
print(f<span class="string">'Headers: {headers}'</span><span class="operator">)</span>
|
|
2531
|
+
# Print first 5 data rows
|
|
2532
|
+
for row in ws.iter_rows(min_row=2, max_row=min(6, ws.max_row<span class="operator">)</span>, values_only=True<span class="operator">)</span>:
|
|
2533
|
+
print(list(row<span class="operator">)</span><span class="operator">)</span>
|
|
2534
|
+
# Print last 2 rows
|
|
2535
|
+
print(<span class="string">'...'</span><span class="operator">)</span>
|
|
2536
|
+
for row in ws.iter_rows(min_row=max(2, ws.max_row-1<span class="operator">)</span>, max_row=ws.max_row, values_only=True<span class="operator">)</span>:
|
|
2537
|
+
print(list(row<span class="operator">)</span><span class="operator">)</span>
|
|
2538
|
+
print(<span class="operator">)</span>
|
|
2539
|
+
"
|
|
2540
|
+
</pre>
|
|
2541
|
+
<p class="lesson-description">Inspect spreadsheet structure and sample data</p>
|
|
2542
|
+
</div>
|
|
2543
|
+
<div class="lesson-command">
|
|
2544
|
+
<div class="lesson-command-header">
|
|
2545
|
+
<code class="cmd">cd</code>
|
|
2546
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2547
|
+
</div>
|
|
2548
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> python <span class="flag">-c</span> "
|
|
2549
|
+
import openpyxl
|
|
2550
|
+
wb = openpyxl.load_workbook(<span class="string">'C:/Users/brand/Downloads/mock_customer_data.xlsx'</span>, data_only=True<span class="operator">)</span>
|
|
2551
|
+
ws = wb[<span class="string">'Customer Purchases'</span>]
|
|
2552
|
+
|
|
2553
|
+
# Deeper analysis for viz planning
|
|
2554
|
+
states = {}
|
|
2555
|
+
amounts = []
|
|
2556
|
+
quantities = []
|
|
2557
|
+
customers = {}
|
|
2558
|
+
|
|
2559
|
+
for row in ws.iter_rows(min_row=2, max_row=ws.max_row, values_only=True<span class="operator">)</span>:
|
|
2560
|
+
name, amount, qty, state = row
|
|
2561
|
+
amounts.append(amount<span class="operator">)</span>
|
|
2562
|
+
quantities.append(qty<span class="operator">)</span>
|
|
2563
|
+
|
|
2564
|
+
if state not in states:
|
|
2565
|
+
states[state] = {<span class="string">'count'</span>: 0, <span class="string">'total'</span>: 0, <span class="string">'qty'</span>: 0}
|
|
2566
|
+
states[state][<span class="string">'count'</span>] += 1
|
|
2567
|
+
states[state][<span class="string">'total'</span>] += amount
|
|
2568
|
+
states[state][<span class="string">'qty'</span>] += qty
|
|
2569
|
+
|
|
2570
|
+
if name not in customers:
|
|
2571
|
+
customers[name] = {<span class="string">'count'</span>: 0, <span class="string">'total'</span>: 0, <span class="string">'qty'</span>: 0}
|
|
2572
|
+
customers[name][<span class="string">'count'</span>] += 1
|
|
2573
|
+
customers[name][<span class="string">'total'</span>] += amount
|
|
2574
|
+
customers[name][<span class="string">'qty'</span>] += qty
|
|
2575
|
+
|
|
2576
|
+
print(f<span class="string">'Total records: {len(amounts<span class="operator">)</span>}'</span><span class="operator">)</span>
|
|
2577
|
+
print(f<span class="string">'Unique states: {len(states<span class="operator">)</span>}'</span><span class="operator">)</span>
|
|
2578
|
+
print(f<span class="string">'Unique customers: {len(customers<span class="operator">)</span>}'</span><span class="operator">)</span>
|
|
2579
|
+
print(f<span class="string">'Amount range: \<span class="variable">${min</span>(amounts<span class="operator">)</span>:.2f} - \<span class="variable">${max</span>(amounts<span class="operator">)</span>:.2f}'</span><span class="operator">)</span>
|
|
2580
|
+
print(f<span class="string">'Avg amount: \<span class="variable">${sum</span>(amounts<span class="operator">)</span>/len(amounts<span class="operator">)</span>:.2f}'</span><span class="operator">)</span>
|
|
2581
|
+
print(f<span class="string">'Quantity range: {min(quantities<span class="operator">)</span>} - {max(quantities<span class="operator">)</span>}'</span><span class="operator">)</span>
|
|
2582
|
+
print(<span class="operator">)</span>
|
|
2583
|
+
|
|
2584
|
+
# Top 10 states by revenue
|
|
2585
|
+
sorted_states = sorted(states.items(<span class="operator">)</span>, key=lambda x: x[1][<span class="string">'total'</span>], reverse=True<span class="operator">)</span>
|
|
2586
|
+
print(<span class="string">'Top 15 states by revenue:'</span><span class="operator">)</span>
|
|
2587
|
+
for s, d in sorted_states[:15]:
|
|
2588
|
+
print(f' {s}: <span class="variable">${d</span>[\<span class="string">"total\"</span>]:.2f} ({d[\<span class="string">"count\"</span>]} txns, avg <span class="variable">${d</span>[\<span class="string">"total\"</span>]/d[\<span class="string">"count\"</span>]:.2f}<span class="operator">)</span><span class="string">'<span class="operator">)</span>
|
|
2589
|
+
|
|
2590
|
+
print(<span class="operator">)</span>
|
|
2591
|
+
# Top customers by purchase count
|
|
2592
|
+
sorted_custs = sorted(customers.items(<span class="operator">)</span>, key=lambda x: x[1]['</span>count<span class="string">'], reverse=True<span class="operator">)</span>
|
|
2593
|
+
print('</span>Top 10 repeat customers:<span class="string">'<span class="operator">)</span>
|
|
2594
|
+
for c, d in sorted_custs[:10]:
|
|
2595
|
+
print(f'</span> {c}: {d[\<span class="string">"count\"</span>]} purchases, <span class="variable">${d</span>[\<span class="string">"total\"</span>]:.2f} total<span class="string">'<span class="operator">)</span>
|
|
2596
|
+
|
|
2597
|
+
print(<span class="operator">)</span>
|
|
2598
|
+
# Distribution of amounts
|
|
2599
|
+
brackets = [0, 25, 50, 75, 100, 150, 200, 500]
|
|
2600
|
+
print('</span>Amount distribution:'<span class="operator">)</span>
|
|
2601
|
+
for i in range(len(brackets<span class="operator">)</span>-1<span class="operator">)</span>:
|
|
2602
|
+
count = sum(1 for a in amounts if brackets[i] <span class="operator"><</span>= a <span class="operator"><</span> brackets[i+1]<span class="operator">)</span>
|
|
2603
|
+
print(f<span class="string">' \<span class="variable">${brackets</span>[i]}-\<span class="variable">${brackets</span>[i+1]}: {count}'</span><span class="operator">)</span>
|
|
2604
|
+
count = sum(1 for a in amounts if a <span class="operator">></span>= 500<span class="operator">)</span>
|
|
2605
|
+
print(f<span class="string">' \<span class="variable">$500</span>+: {count}'</span><span class="operator">)</span>
|
|
2606
|
+
|
|
2607
|
+
# Quantity distribution
|
|
2608
|
+
print(<span class="operator">)</span>
|
|
2609
|
+
print(<span class="string">'Quantity distribution:'</span><span class="operator">)</span>
|
|
2610
|
+
for q in range(1, 6<span class="operator">)</span>:
|
|
2611
|
+
count = sum(1 for x in quantities if x == q<span class="operator">)</span>
|
|
2612
|
+
print(f<span class="string">' {q}: {count}'</span><span class="operator">)</span>
|
|
2613
|
+
"
|
|
2614
|
+
</pre>
|
|
2615
|
+
<p class="lesson-description">Deep analysis of data for visualization planning</p>
|
|
2616
|
+
</div>
|
|
2617
|
+
<div class="lesson-command">
|
|
2618
|
+
<div class="lesson-command-header">
|
|
2619
|
+
<code class="cmd">cd</code>
|
|
2620
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2621
|
+
</div>
|
|
2622
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> python <span class="operator"><</span><span class="operator"><</span> <span class="string">'PYEOF'</span>
|
|
2623
|
+
import openpyxl
|
|
2624
|
+
wb = openpyxl.load_workbook(<span class="string">'C:/Users/brand/Downloads/mock_customer_data.xlsx'</span>, data_only=True<span class="operator">)</span>
|
|
2625
|
+
ws = wb[<span class="string">'Customer Purchases'</span>]
|
|
2626
|
+
|
|
2627
|
+
states = {}
|
|
2628
|
+
amounts = []
|
|
2629
|
+
quantities = []
|
|
2630
|
+
customers = {}
|
|
2631
|
+
|
|
2632
|
+
for row in ws.iter_rows(min_row=2, max_row=ws.max_row, values_only=True<span class="operator">)</span>:
|
|
2633
|
+
name, amount, qty, state = row
|
|
2634
|
+
amounts.append(amount<span class="operator">)</span>
|
|
2635
|
+
quantities.append(qty<span class="operator">)</span>
|
|
2636
|
+
if state not in states:
|
|
2637
|
+
states[state] = {<span class="string">'count'</span>: 0, <span class="string">'total'</span>: 0, <span class="string">'qty'</span>: 0}
|
|
2638
|
+
states[state][<span class="string">'count'</span>] += 1
|
|
2639
|
+
states[state][<span class="string">'total'</span>] += amount
|
|
2640
|
+
states[state][<span class="string">'qty'</span>] += qty
|
|
2641
|
+
if name not in customers:
|
|
2642
|
+
customers[name] = {<span class="string">'count'</span>: 0, <span class="string">'total'</span>: 0, <span class="string">'qty'</span>: 0}
|
|
2643
|
+
customers[name][<span class="string">'count'</span>] += 1
|
|
2644
|
+
customers[name][<span class="string">'total'</span>] += amount
|
|
2645
|
+
customers[name][<span class="string">'qty'</span>] += qty
|
|
2646
|
+
|
|
2647
|
+
print(f<span class="string">"Total records: {len(amounts<span class="operator">)</span>}"</span><span class="operator">)</span>
|
|
2648
|
+
print(f<span class="string">"Unique states: {len(states<span class="operator">)</span>}"</span><span class="operator">)</span>
|
|
2649
|
+
print(f<span class="string">"Unique customers: {len(customers<span class="operator">)</span>}"</span><span class="operator">)</span>
|
|
2650
|
+
print(f<span class="string">"Amount range: <span class="variable">${min</span>(amounts<span class="operator">)</span>:.2f} - <span class="variable">${max</span>(amounts<span class="operator">)</span>:.2f}"</span><span class="operator">)</span>
|
|
2651
|
+
print(f<span class="string">"Avg amount: <span class="variable">${sum</span>(amounts<span class="operator">)</span>/len(amounts<span class="operator">)</span>:.2f}"</span><span class="operator">)</span>
|
|
2652
|
+
print(f<span class="string">"Quantity range: {min(quantities<span class="operator">)</span>} - {max(quantities<span class="operator">)</span>}"</span><span class="operator">)</span>
|
|
2653
|
+
print(<span class="operator">)</span>
|
|
2654
|
+
|
|
2655
|
+
sorted_states = sorted(states.items(<span class="operator">)</span>, key=lambda x: x[1][<span class="string">'total'</span>], reverse=True<span class="operator">)</span>
|
|
2656
|
+
print(<span class="string">"Top 15 states by revenue:"</span><span class="operator">)</span>
|
|
2657
|
+
for s, d in sorted_states[:15]:
|
|
2658
|
+
avg = d[<span class="string">'total'</span>] / d[<span class="string">'count'</span>]
|
|
2659
|
+
print(f" {s}: <span class="variable">${d</span>[<span class="string">'total'</span>]:.2f} ({d[<span class="string">'count'</span>]} txns, avg <span class="variable">${avg</span>:.2f}<span class="operator">)</span>"<span class="operator">)</span>
|
|
2660
|
+
|
|
2661
|
+
print(<span class="operator">)</span>
|
|
2662
|
+
sorted_custs = sorted(customers.items(<span class="operator">)</span>, key=lambda x: x[1][<span class="string">'count'</span>], reverse=True<span class="operator">)</span>
|
|
2663
|
+
print(<span class="string">"Top 10 repeat customers:"</span><span class="operator">)</span>
|
|
2664
|
+
for c, d in sorted_custs[:10]:
|
|
2665
|
+
print(f" {c}: {d[<span class="string">'count'</span>]} purchases, <span class="variable">${d</span>[<span class="string">'total'</span>]:.2f} total<span class="string">"<span class="operator">)</span>
|
|
2666
|
+
|
|
2667
|
+
print(<span class="operator">)</span>
|
|
2668
|
+
brackets = [0, 25, 50, 75, 100, 150, 200, 500]
|
|
2669
|
+
print("</span>Amount distribution:"<span class="operator">)</span>
|
|
2670
|
+
for i in range(len(brackets<span class="operator">)</span>-1<span class="operator">)</span>:
|
|
2671
|
+
count = sum(1 for a in amounts if brackets[i] <span class="operator"><</span>= a <span class="operator"><</span> brackets[i+1]<span class="operator">)</span>
|
|
2672
|
+
print(f<span class="string">" <span class="variable">${brackets</span>[i]}-<span class="variable">${brackets</span>[i+1]}: {count}"</span><span class="operator">)</span>
|
|
2673
|
+
count = sum(1 for a in amounts if a <span class="operator">></span>= 500<span class="operator">)</span>
|
|
2674
|
+
print(f<span class="string">" <span class="variable">$500</span>+: {count}"</span><span class="operator">)</span>
|
|
2675
|
+
|
|
2676
|
+
print(<span class="operator">)</span>
|
|
2677
|
+
print(<span class="string">"Quantity distribution:"</span><span class="operator">)</span>
|
|
2678
|
+
for q in range(1, 6<span class="operator">)</span>:
|
|
2679
|
+
count = sum(1 for x in quantities if x == q<span class="operator">)</span>
|
|
2680
|
+
print(f<span class="string">" {q}: {count}"</span><span class="operator">)</span>
|
|
2681
|
+
PYEOF
|
|
2682
|
+
</pre>
|
|
2683
|
+
<p class="lesson-description">Deep analysis of data for visualization planning</p>
|
|
2684
|
+
</div>
|
|
2685
|
+
<div class="lesson-command">
|
|
2686
|
+
<div class="lesson-command-header">
|
|
2687
|
+
<code class="cmd">cd</code>
|
|
2688
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2689
|
+
</div>
|
|
2690
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> python visualizations/generate_viz.py</pre>
|
|
2691
|
+
<p class="lesson-description">Generate all 3 interactive HTML visualizations</p>
|
|
2692
|
+
</div>
|
|
2693
|
+
<div class="lesson-command">
|
|
2694
|
+
<div class="lesson-command-header">
|
|
2695
|
+
<code class="cmd">cd</code>
|
|
2696
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2697
|
+
</div>
|
|
2698
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> git init <span class="operator">&&</span> git remote add origin https://github.com/bjpl/data_example.git <span class="operator">&&</span> git branch <span class="flag">-M</span> main</pre>
|
|
2699
|
+
<p class="lesson-description">Initialize git repo and connect to remote</p>
|
|
2700
|
+
</div>
|
|
2701
|
+
<div class="lesson-command">
|
|
2702
|
+
<div class="lesson-command-header">
|
|
2703
|
+
<code class="cmd">cd</code>
|
|
2704
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2705
|
+
</div>
|
|
2706
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> touch .nojekyll</pre>
|
|
2707
|
+
<p class="lesson-description">Create .nojekyll for GitHub Pages</p>
|
|
2708
|
+
</div>
|
|
2709
|
+
<div class="lesson-command">
|
|
2710
|
+
<div class="lesson-command-header">
|
|
2711
|
+
<code class="cmd">cd</code>
|
|
2712
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2713
|
+
</div>
|
|
2714
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> git status</pre>
|
|
2715
|
+
<p class="lesson-description">Show working tree status</p>
|
|
2716
|
+
</div>
|
|
2717
|
+
<div class="lesson-command">
|
|
2718
|
+
<div class="lesson-command-header">
|
|
2719
|
+
<code class="cmd">cd</code>
|
|
2720
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2721
|
+
</div>
|
|
2722
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> git log <span class="flag">--oneline</span> <span class="flag">-5</span> 2<span class="operator">></span>/dev/null <span class="operator">|</span><span class="operator">|</span> echo <span class="string">"No commits yet"</span></pre>
|
|
2723
|
+
<p class="lesson-description">Check commit history</p>
|
|
2724
|
+
</div>
|
|
2725
|
+
<div class="lesson-command">
|
|
2726
|
+
<div class="lesson-command-header">
|
|
2727
|
+
<code class="cmd">cd</code>
|
|
2728
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2729
|
+
</div>
|
|
2730
|
+
<pre class="syntax-highlighted"><span class="cmd">cd</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris"</span> <span class="operator">&&</span> git add .gitignore .nojekyll index.html visualizations/01_revenue_by_state.html visualizations/02_purchase_patterns.html visualizations/03_executive_dashboard.html scripts/generate_explainers.py scripts/generate_viz.py docs/explainers/ <span class="operator">&&</span> git commit <span class="flag">-m</span> "<span class="operator">$(</span>cat <span class="operator"><</span><span class="operator"><</span><span class="string">'EOF'</span>
|
|
2731
|
+
Add interactive customer analytics dashboard with 3 visualizations
|
|
2732
|
+
|
|
2733
|
+
- Landing page (index.html<span class="operator">)</span> with navigable card-based UI for GitHub Pages
|
|
2734
|
+
- Viz 1: US choropleth map — revenue by state with 6-metric tooltips
|
|
2735
|
+
- Viz 2: Scatter analysis — purchase patterns with spend distribution
|
|
2736
|
+
- Viz 3: Executive dashboard — 4-panel KPI overview
|
|
2737
|
+
- Claude Code explainer docs (5 .docx files<span class="operator">)</span>
|
|
2738
|
+
- Generation scripts for reproducibility
|
|
2739
|
+
|
|
2740
|
+
Co-Authored-By: Claude Opus 4.5 <span class="operator"><</span>noreply@anthropic.com<span class="operator">></span>
|
|
2741
|
+
EOF
|
|
2742
|
+
<span class="operator">)</span>"</pre>
|
|
2743
|
+
<p class="lesson-description">Stage all files and create initial commit</p>
|
|
2744
|
+
</div>
|
|
2745
|
+
</div>
|
|
2746
|
+
<div class="patterns"><h4>Patterns Observed:</h4><ul><li>Piping output between commands (1 instances)</li><li>Output/input redirection (9 instances)</li><li>Glob/wildcard patterns (3 instances)</li></ul></div>
|
|
2747
|
+
</div>
|
|
2748
|
+
</div>
|
|
2749
|
+
<div class="lesson-section">
|
|
2750
|
+
<h2 class="lesson-title">
|
|
2751
|
+
<span class="lesson-icon">📌</span>
|
|
2752
|
+
Git
|
|
2753
|
+
<span class="lesson-count">(7 commands)</span>
|
|
2754
|
+
</h2>
|
|
2755
|
+
<div class="lesson-content">
|
|
2756
|
+
<div class="concept-overview">
|
|
2757
|
+
<h4>Concept Overview:</h4>
|
|
2758
|
+
<p>Commands related to git operations and utilities.</p>
|
|
2759
|
+
</div>
|
|
2760
|
+
<div class="lesson-commands">
|
|
2761
|
+
<h4>Commands:</h4>
|
|
2762
|
+
|
|
2763
|
+
<div class="lesson-command">
|
|
2764
|
+
<div class="lesson-command-header">
|
|
2765
|
+
<code class="cmd">gh</code>
|
|
2766
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2767
|
+
</div>
|
|
2768
|
+
<pre class="syntax-highlighted"><span class="cmd">gh</span> api repos/bjpl/data_example/pages <span class="flag">-X</span> POST <span class="flag">-f</span> <span class="string">"build_type=workflow"</span> <span class="flag">-f</span> <span class="string">"source[branch]=main"</span> <span class="flag">-f</span> <span class="string">"source[path]=/"</span> 2<span class="operator">></span>&1 <span class="operator">|</span><span class="operator">|</span> gh api repos/bjpl/data_example/pages <span class="flag">-X</span> POST <span class="flag">--input</span> - <span class="operator"><</span><span class="operator"><</span><span class="string">'EOF'</span>
|
|
2769
|
+
{<span class="string">"source"</span>:{<span class="string">"branch"</span>:<span class="string">"main"</span>,<span class="string">"path"</span>:<span class="string">"/"</span>}}
|
|
2770
|
+
EOF</pre>
|
|
2771
|
+
<p class="lesson-description">Enable GitHub Pages on main branch</p>
|
|
2772
|
+
</div>
|
|
2773
|
+
<div class="lesson-command">
|
|
2774
|
+
<div class="lesson-command-header">
|
|
2775
|
+
<code class="cmd">gh</code>
|
|
2776
|
+
<span class="complexity-badge simple">simple</span>
|
|
2777
|
+
</div>
|
|
2778
|
+
<pre class="syntax-highlighted"><span class="cmd">gh</span> api repos/bjpl/data_example/pages <span class="flag">--jq</span> <span class="string">'.html_url, .status'</span></pre>
|
|
2779
|
+
<p class="lesson-description">Check GitHub Pages status and URL</p>
|
|
2780
|
+
</div>
|
|
2781
|
+
<div class="lesson-command">
|
|
2782
|
+
<div class="lesson-command-header">
|
|
2783
|
+
<code class="cmd">gh</code>
|
|
2784
|
+
<span class="complexity-badge simple">simple</span>
|
|
2785
|
+
</div>
|
|
2786
|
+
<pre class="syntax-highlighted"><span class="cmd">gh</span> api repos/bjpl/data_example <span class="flag">--jq</span> <span class="string">'{default_branch: .default_branch, size: .size, pushed_at: .pushed_at, has_pages: .has_pages}'</span></pre>
|
|
2787
|
+
<p class="lesson-description">Check repo state on GitHub</p>
|
|
2788
|
+
</div>
|
|
2789
|
+
<div class="lesson-command">
|
|
2790
|
+
<div class="lesson-command-header">
|
|
2791
|
+
<code class="cmd">gh</code>
|
|
2792
|
+
<span class="complexity-badge simple">simple</span>
|
|
2793
|
+
</div>
|
|
2794
|
+
<pre class="syntax-highlighted"><span class="cmd">gh</span> api repos/bjpl/data_example/pages <span class="flag">--jq</span> <span class="string">'{url: .html_url, status: .status, build_type: .build_type, source: .source}'</span></pre>
|
|
2795
|
+
<p class="lesson-description">Check Pages configuration</p>
|
|
2796
|
+
</div>
|
|
2797
|
+
<div class="lesson-command">
|
|
2798
|
+
<div class="lesson-command-header">
|
|
2799
|
+
<code class="cmd">gh</code>
|
|
2800
|
+
<span class="complexity-badge intermediate">intermediate</span>
|
|
2801
|
+
</div>
|
|
2802
|
+
<pre class="syntax-highlighted"><span class="cmd">gh</span> api repos/bjpl/data_example/contents/ <span class="flag">--jq</span> <span class="string">'.[].name'</span> 2<span class="operator">></span>&1</pre>
|
|
2803
|
+
<p class="lesson-description">List files on remote</p>
|
|
2804
|
+
</div>
|
|
2805
|
+
<div class="lesson-command">
|
|
2806
|
+
<div class="lesson-command-header">
|
|
2807
|
+
<code class="cmd">gh</code>
|
|
2808
|
+
<span class="complexity-badge intermediate">intermediate</span>
|
|
2809
|
+
</div>
|
|
2810
|
+
<pre class="syntax-highlighted"><span class="cmd">gh</span> api repos/bjpl/data_example/pages <span class="flag">-X</span> PUT <span class="flag">--input</span> - <span class="operator"><</span><span class="operator"><</span><span class="string">'EOF'</span>
|
|
2811
|
+
{<span class="string">"build_type"</span>:<span class="string">"workflow"</span>,<span class="string">"source"</span>:{<span class="string">"branch"</span>:<span class="string">"main"</span>,<span class="string">"path"</span>:<span class="string">"/"</span>}}
|
|
2812
|
+
EOF</pre>
|
|
2813
|
+
<p class="lesson-description">Switch Pages to workflow-based deployment</p>
|
|
2814
|
+
</div>
|
|
2815
|
+
<div class="lesson-command">
|
|
2816
|
+
<div class="lesson-command-header">
|
|
2817
|
+
<code class="cmd">gh</code>
|
|
2818
|
+
<span class="complexity-badge intermediate">intermediate</span>
|
|
2819
|
+
</div>
|
|
2820
|
+
<pre class="syntax-highlighted"><span class="cmd">gh</span> api repos/bjpl/data_example/pages <span class="flag">-X</span> PUT <span class="flag">-f</span> <span class="string">"build_type=workflow"</span> <span class="flag">-f</span> <span class="string">"source[branch]=main"</span> <span class="flag">-f</span> <span class="string">"source[path]=/"</span> 2<span class="operator">></span>&1</pre>
|
|
2821
|
+
<p class="lesson-description">Switch Pages build type to workflow</p>
|
|
2822
|
+
</div>
|
|
2823
|
+
</div>
|
|
2824
|
+
<div class="patterns"><h4>Patterns Observed:</h4><ul><li>Piping output between commands (1 instances)</li><li>Output/input redirection (4 instances)</li><li>Common flag: -f (used 6 times)</li><li>Glob/wildcard patterns (3 instances)</li></ul></div>
|
|
2825
|
+
</div>
|
|
2826
|
+
</div>
|
|
2827
|
+
<div class="lesson-section">
|
|
2828
|
+
<h2 class="lesson-title">
|
|
2829
|
+
<span class="lesson-icon">📌</span>
|
|
2830
|
+
File System
|
|
2831
|
+
<span class="lesson-count">(6 commands)</span>
|
|
2832
|
+
</h2>
|
|
2833
|
+
<div class="lesson-content">
|
|
2834
|
+
<div class="concept-overview">
|
|
2835
|
+
<h4>Concept Overview:</h4>
|
|
2836
|
+
<p>Commands related to file system operations and utilities.</p>
|
|
2837
|
+
</div>
|
|
2838
|
+
<div class="lesson-commands">
|
|
2839
|
+
<h4>Commands:</h4>
|
|
2840
|
+
|
|
2841
|
+
<div class="lesson-command">
|
|
2842
|
+
<div class="lesson-command-header">
|
|
2843
|
+
<code class="cmd">mkdir</code>
|
|
2844
|
+
<span class="complexity-badge simple">simple</span>
|
|
2845
|
+
</div>
|
|
2846
|
+
<pre class="syntax-highlighted"><span class="cmd">mkdir</span> <span class="flag">-p</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/docs/explainers"</span></pre>
|
|
2847
|
+
<p class="lesson-description">Create output directory for explainer docs</p>
|
|
2848
|
+
</div>
|
|
2849
|
+
<div class="lesson-command">
|
|
2850
|
+
<div class="lesson-command-header">
|
|
2851
|
+
<code class="cmd">mkdir</code>
|
|
2852
|
+
<span class="complexity-badge simple">simple</span>
|
|
2853
|
+
</div>
|
|
2854
|
+
<pre class="syntax-highlighted"><span class="cmd">mkdir</span> <span class="flag">-p</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/visualizations/assets"</span></pre>
|
|
2855
|
+
<p class="lesson-description">Create visualizations subdirectory</p>
|
|
2856
|
+
</div>
|
|
2857
|
+
<div class="lesson-command">
|
|
2858
|
+
<div class="lesson-command-header">
|
|
2859
|
+
<code class="cmd">ls</code>
|
|
2860
|
+
<span class="complexity-badge simple">simple</span>
|
|
2861
|
+
</div>
|
|
2862
|
+
<pre class="syntax-highlighted"><span class="cmd">ls</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/visualizations/"</span></pre>
|
|
2863
|
+
<p class="lesson-description">List visualization files</p>
|
|
2864
|
+
</div>
|
|
2865
|
+
<div class="lesson-command">
|
|
2866
|
+
<div class="lesson-command-header">
|
|
2867
|
+
<code class="cmd">mkdir</code>
|
|
2868
|
+
<span class="complexity-badge simple">simple</span>
|
|
2869
|
+
</div>
|
|
2870
|
+
<pre class="syntax-highlighted"><span class="cmd">mkdir</span> <span class="flag">-p</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/.github/workflows"</span></pre>
|
|
2871
|
+
<p class="lesson-description">Create workflows directory</p>
|
|
2872
|
+
</div>
|
|
2873
|
+
<div class="lesson-command">
|
|
2874
|
+
<div class="lesson-command-header">
|
|
2875
|
+
<code class="cmd">ls</code>
|
|
2876
|
+
<span class="complexity-badge intermediate">intermediate</span>
|
|
2877
|
+
</div>
|
|
2878
|
+
<pre class="syntax-highlighted"><span class="cmd">ls</span> <span class="flag">-lt</span> <span class="path">~/.claude/projects/</span> 2<span class="operator">></span>/dev/null <span class="operator">|</span> head <span class="flag">-20</span></pre>
|
|
2879
|
+
<p class="lesson-description">Find Claude session directories</p>
|
|
2880
|
+
</div>
|
|
2881
|
+
<div class="lesson-command">
|
|
2882
|
+
<div class="lesson-command-header">
|
|
2883
|
+
<code class="cmd">ls</code>
|
|
2884
|
+
<span class="complexity-badge intermediate">intermediate</span>
|
|
2885
|
+
</div>
|
|
2886
|
+
<pre class="syntax-highlighted"><span class="cmd">ls</span> <span class="flag">-lt</span> <span class="path">~/.claude/projects/C--Users-brand-Development-Project-Workspace-active-development-session-with-chris/</span> 2<span class="operator">></span>/dev/null <span class="operator">|</span> head <span class="flag">-10</span></pre>
|
|
2887
|
+
<p class="lesson-description">List session files for this project</p>
|
|
2888
|
+
</div>
|
|
2889
|
+
</div>
|
|
2890
|
+
<div class="patterns"><h4>Patterns Observed:</h4><ul><li>Piping output between commands (2 instances)</li><li>Output/input redirection (2 instances)</li><li>Common flag: -p (used 3 times)</li></ul></div>
|
|
2891
|
+
</div>
|
|
2892
|
+
</div>
|
|
2893
|
+
<div class="lesson-section">
|
|
2894
|
+
<h2 class="lesson-title">
|
|
2895
|
+
<span class="lesson-icon">📌</span>
|
|
2896
|
+
Unknown
|
|
2897
|
+
<span class="lesson-count">(3 commands)</span>
|
|
2898
|
+
</h2>
|
|
2899
|
+
<div class="lesson-content">
|
|
2900
|
+
<div class="concept-overview">
|
|
2901
|
+
<h4>Concept Overview:</h4>
|
|
2902
|
+
<p>Commands related to unknown operations and utilities.</p>
|
|
2903
|
+
</div>
|
|
2904
|
+
<div class="lesson-commands">
|
|
2905
|
+
<h4>Commands:</h4>
|
|
2906
|
+
|
|
2907
|
+
<div class="lesson-command">
|
|
2908
|
+
<div class="lesson-command-header">
|
|
2909
|
+
<code class="cmd">claude</code>
|
|
2910
|
+
<span class="complexity-badge simple">simple</span>
|
|
2911
|
+
</div>
|
|
2912
|
+
<pre class="syntax-highlighted"><span class="cmd">claude</span> install</pre>
|
|
2913
|
+
<p class="lesson-description">Run claude install command</p>
|
|
2914
|
+
</div>
|
|
2915
|
+
<div class="lesson-command">
|
|
2916
|
+
<div class="lesson-command-header">
|
|
2917
|
+
<code class="cmd">start</code>
|
|
2918
|
+
<span class="complexity-badge simple">simple</span>
|
|
2919
|
+
</div>
|
|
2920
|
+
<pre class="syntax-highlighted"><span class="cmd">start</span> <span class="string">""</span> <span class="string">"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/visualizations/03_executive_dashboard.html"</span></pre>
|
|
2921
|
+
<p class="lesson-description">Open dashboard in browser to verify rendering</p>
|
|
2922
|
+
</div>
|
|
2923
|
+
<div class="lesson-command">
|
|
2924
|
+
<div class="lesson-command-header">
|
|
2925
|
+
<code class="cmd">session-slides</code>
|
|
2926
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2927
|
+
</div>
|
|
2928
|
+
<pre class="syntax-highlighted"><span class="cmd">session-slides</span> <span class="flag">--help</span> 2<span class="operator">></span>&1 <span class="operator">|</span><span class="operator">|</span> npx session-slides <span class="flag">--help</span> 2<span class="operator">></span>&1</pre>
|
|
2929
|
+
<p class="lesson-description">Check session-slides usage</p>
|
|
2930
|
+
</div>
|
|
2931
|
+
</div>
|
|
2932
|
+
<div class="patterns"><h4>Patterns Observed:</h4><ul><li>Piping output between commands (1 instances)</li><li>Output/input redirection (1 instances)</li></ul></div>
|
|
2933
|
+
</div>
|
|
2934
|
+
</div>
|
|
2935
|
+
<div class="lesson-section">
|
|
2936
|
+
<h2 class="lesson-title">
|
|
2937
|
+
<span class="lesson-icon">📦</span>
|
|
2938
|
+
Package Management
|
|
2939
|
+
<span class="lesson-count">(2 commands)</span>
|
|
2940
|
+
</h2>
|
|
2941
|
+
<div class="lesson-content">
|
|
2942
|
+
<div class="concept-overview">
|
|
2943
|
+
<h4>Concept Overview:</h4>
|
|
2944
|
+
<p>Tools for installing, updating, and managing software packages on the system.</p>
|
|
2945
|
+
</div>
|
|
2946
|
+
<div class="lesson-commands">
|
|
2947
|
+
<h4>Commands:</h4>
|
|
2948
|
+
|
|
2949
|
+
<div class="lesson-command">
|
|
2950
|
+
<div class="lesson-command-header">
|
|
2951
|
+
<code class="cmd">pip</code>
|
|
2952
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2953
|
+
</div>
|
|
2954
|
+
<pre class="syntax-highlighted"><span class="cmd">pip</span> show python-docx 2<span class="operator">></span>/dev/null <span class="operator">|</span><span class="operator">|</span> pip install python-docx 2<span class="operator">></span>&1 <span class="operator">|</span> tail <span class="flag">-5</span></pre>
|
|
2955
|
+
<p class="lesson-description">Check/install python-docx library</p>
|
|
2956
|
+
</div>
|
|
2957
|
+
<div class="lesson-command">
|
|
2958
|
+
<div class="lesson-command-header">
|
|
2959
|
+
<code class="cmd">npm</code>
|
|
2960
|
+
<span class="complexity-badge simple">simple</span>
|
|
2961
|
+
</div>
|
|
2962
|
+
<pre class="syntax-highlighted"><span class="cmd">npm</span> install <span class="flag">-g</span> session-slides</pre>
|
|
2963
|
+
<p class="lesson-description">Install session-slides globally</p>
|
|
2964
|
+
</div>
|
|
2965
|
+
</div>
|
|
2966
|
+
<div class="patterns"><h4>Patterns Observed:</h4><ul><li>Piping output between commands (1 instances)</li><li>Output/input redirection (1 instances)</li></ul></div>
|
|
2967
|
+
</div>
|
|
2968
|
+
</div>
|
|
2969
|
+
<div class="lesson-section">
|
|
2970
|
+
<h2 class="lesson-title">
|
|
2971
|
+
<span class="lesson-icon">📌</span>
|
|
2972
|
+
Process & System
|
|
2973
|
+
<span class="lesson-count">(1 commands)</span>
|
|
2974
|
+
</h2>
|
|
2975
|
+
<div class="lesson-content">
|
|
2976
|
+
<div class="concept-overview">
|
|
2977
|
+
<h4>Concept Overview:</h4>
|
|
2978
|
+
<p>Commands related to process & system operations and utilities.</p>
|
|
2979
|
+
</div>
|
|
2980
|
+
<div class="lesson-commands">
|
|
2981
|
+
<h4>Commands:</h4>
|
|
2982
|
+
|
|
2983
|
+
<div class="lesson-command">
|
|
2984
|
+
<div class="lesson-command-header">
|
|
2985
|
+
<code class="cmd">sleep</code>
|
|
2986
|
+
<span class="complexity-badge advanced">advanced</span>
|
|
2987
|
+
</div>
|
|
2988
|
+
<pre class="syntax-highlighted"><span class="cmd">sleep</span> 5 <span class="operator">&&</span> gh run list <span class="flag">--repo</span> bjpl/data_example <span class="flag">--limit</span> 3</pre>
|
|
2989
|
+
<p class="lesson-description">Check if Actions workflow triggered</p>
|
|
2990
|
+
</div>
|
|
2991
|
+
</div>
|
|
2992
|
+
|
|
2993
|
+
</div>
|
|
2994
|
+
</div>
|
|
2995
|
+
</div>
|
|
2996
|
+
</section>
|
|
2997
|
+
|
|
2998
|
+
<section id="panel-quiz" class="panel" role="tabpanel" aria-labelledby="tab-quiz">
|
|
2999
|
+
|
|
3000
|
+
<div class="quiz-container">
|
|
3001
|
+
<div class="quiz-header">
|
|
3002
|
+
<h2>Test Your Knowledge</h2>
|
|
3003
|
+
<p>Answer the following questions to test your understanding of the bash commands.</p>
|
|
3004
|
+
<div class="quiz-score">
|
|
3005
|
+
<span>Score: </span>
|
|
3006
|
+
<span id="score-current">0</span>
|
|
3007
|
+
<span> / </span>
|
|
3008
|
+
<span id="score-total">18</span>
|
|
3009
|
+
</div>
|
|
3010
|
+
</div>
|
|
3011
|
+
|
|
3012
|
+
<div class="quiz-questions">
|
|
3013
|
+
|
|
3014
|
+
<div class="quiz-question" id="question-q0">
|
|
3015
|
+
<div class="question-number">Question 1</div>
|
|
3016
|
+
<div class="question-text">What does this command do?
|
|
3017
|
+
|
|
3018
|
+
```bash
|
|
3019
|
+
cd "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris" && git add .github/workflows/deploy.yml && git commit -m "$(cat <<'EOF'
|
|
3020
|
+
Add GitHub Actions workflow for Pages deployment
|
|
3021
|
+
|
|
3022
|
+
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
|
3023
|
+
EOF
|
|
3024
|
+
)" && git push origin main
|
|
3025
|
+
```</div>
|
|
3026
|
+
<div class="quiz-options">
|
|
3027
|
+
|
|
3028
|
+
<label class="quiz-option" data-question="q0" data-index="0">
|
|
3029
|
+
<input type="radio" name="q0" value="0" onchange="checkAnswer('q0', 0, 3)">
|
|
3030
|
+
<span class="option-letter">A</span>
|
|
3031
|
+
<span class="option-text">Count bytes</span>
|
|
3032
|
+
</label>
|
|
3033
|
+
<label class="quiz-option" data-question="q0" data-index="1">
|
|
3034
|
+
<input type="radio" name="q0" value="1" onchange="checkAnswer('q0', 1, 3)">
|
|
3035
|
+
<span class="option-letter">B</span>
|
|
3036
|
+
<span class="option-text">Show lines after match</span>
|
|
3037
|
+
</label>
|
|
3038
|
+
<label class="quiz-option" data-question="q0" data-index="2">
|
|
3039
|
+
<input type="radio" name="q0" value="2" onchange="checkAnswer('q0', 2, 3)">
|
|
3040
|
+
<span class="option-letter">C</span>
|
|
3041
|
+
<span class="option-text">Human-readable file sizes</span>
|
|
3042
|
+
</label>
|
|
3043
|
+
<label class="quiz-option" data-question="q0" data-index="3">
|
|
3044
|
+
<input type="radio" name="q0" value="3" onchange="checkAnswer('q0', 3, 3)">
|
|
3045
|
+
<span class="option-letter">D</span>
|
|
3046
|
+
<span class="option-text">Commit and push workflow to trigger Actions deployment</span>
|
|
3047
|
+
</label>
|
|
3048
|
+
</div>
|
|
3049
|
+
<div class="quiz-feedback" id="feedback-q0">
|
|
3050
|
+
<div class="feedback-result"></div>
|
|
3051
|
+
<div class="feedback-explanation">The command `cd "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris" && git add .github/workflows/deploy.yml && git commit -m "$(cat <<'EOF'
|
|
3052
|
+
Add GitHub Actions workflow for Pages deployment
|
|
3053
|
+
|
|
3054
|
+
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
|
3055
|
+
EOF
|
|
3056
|
+
)" && git push origin main` commit and push workflow to trigger actions deployment</div>
|
|
3057
|
+
</div>
|
|
3058
|
+
</div>
|
|
3059
|
+
<div class="quiz-question" id="question-q1">
|
|
3060
|
+
<div class="question-number">Question 2</div>
|
|
3061
|
+
<div class="question-text">What does this command do?
|
|
3062
|
+
|
|
3063
|
+
```bash
|
|
3064
|
+
cd "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris" && git push origin main --force
|
|
3065
|
+
```</div>
|
|
3066
|
+
<div class="quiz-options">
|
|
3067
|
+
|
|
3068
|
+
<label class="quiz-option" data-question="q1" data-index="0">
|
|
3069
|
+
<input type="radio" name="q1" value="0" onchange="checkAnswer('q1', 0, 2)">
|
|
3070
|
+
<span class="option-letter">A</span>
|
|
3071
|
+
<span class="option-text">Add custom header</span>
|
|
3072
|
+
</label>
|
|
3073
|
+
<label class="quiz-option" data-question="q1" data-index="1">
|
|
3074
|
+
<input type="radio" name="q1" value="1" onchange="checkAnswer('q1', 1, 2)">
|
|
3075
|
+
<span class="option-letter">B</span>
|
|
3076
|
+
<span class="option-text">Number non-blank lines only</span>
|
|
3077
|
+
</label>
|
|
3078
|
+
<label class="quiz-option" data-question="q1" data-index="2">
|
|
3079
|
+
<input type="radio" name="q1" value="2" onchange="checkAnswer('q1', 2, 2)">
|
|
3080
|
+
<span class="option-letter">C</span>
|
|
3081
|
+
<span class="option-text">Force push to remote to trigger Actions</span>
|
|
3082
|
+
</label>
|
|
3083
|
+
<label class="quiz-option" data-question="q1" data-index="3">
|
|
3084
|
+
<input type="radio" name="q1" value="3" onchange="checkAnswer('q1', 3, 2)">
|
|
3085
|
+
<span class="option-letter">D</span>
|
|
3086
|
+
<span class="option-text">Create backup of existing files</span>
|
|
3087
|
+
</label>
|
|
3088
|
+
</div>
|
|
3089
|
+
<div class="quiz-feedback" id="feedback-q1">
|
|
3090
|
+
<div class="feedback-result"></div>
|
|
3091
|
+
<div class="feedback-explanation">The command `cd "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris" && git push origin main --force` force push to remote to trigger actions</div>
|
|
3092
|
+
</div>
|
|
3093
|
+
</div>
|
|
3094
|
+
<div class="quiz-question" id="question-q2">
|
|
3095
|
+
<div class="question-number">Question 3</div>
|
|
3096
|
+
<div class="question-text">You want to **create parent directories as needed** when using `mkdir`. Which flag should you use?</div>
|
|
3097
|
+
<div class="quiz-options">
|
|
3098
|
+
|
|
3099
|
+
<label class="quiz-option" data-question="q2" data-index="0">
|
|
3100
|
+
<input type="radio" name="q2" value="0" onchange="checkAnswer('q2', 0, 3)">
|
|
3101
|
+
<span class="option-letter">A</span>
|
|
3102
|
+
<span class="option-text">-v</span>
|
|
3103
|
+
</label>
|
|
3104
|
+
<label class="quiz-option" data-question="q2" data-index="1">
|
|
3105
|
+
<input type="radio" name="q2" value="1" onchange="checkAnswer('q2', 1, 3)">
|
|
3106
|
+
<span class="option-letter">B</span>
|
|
3107
|
+
<span class="option-text">-m</span>
|
|
3108
|
+
</label>
|
|
3109
|
+
<label class="quiz-option" data-question="q2" data-index="2">
|
|
3110
|
+
<input type="radio" name="q2" value="2" onchange="checkAnswer('q2', 2, 3)">
|
|
3111
|
+
<span class="option-letter">C</span>
|
|
3112
|
+
<span class="option-text">-l</span>
|
|
3113
|
+
</label>
|
|
3114
|
+
<label class="quiz-option" data-question="q2" data-index="3">
|
|
3115
|
+
<input type="radio" name="q2" value="3" onchange="checkAnswer('q2', 3, 3)">
|
|
3116
|
+
<span class="option-letter">D</span>
|
|
3117
|
+
<span class="option-text">-p</span>
|
|
3118
|
+
</label>
|
|
3119
|
+
</div>
|
|
3120
|
+
<div class="quiz-feedback" id="feedback-q2">
|
|
3121
|
+
<div class="feedback-result"></div>
|
|
3122
|
+
<div class="feedback-explanation">The `-p` flag in `mkdir` is used to create parent directories as needed</div>
|
|
3123
|
+
</div>
|
|
3124
|
+
</div>
|
|
3125
|
+
<div class="quiz-question" id="question-q3">
|
|
3126
|
+
<div class="question-number">Question 4</div>
|
|
3127
|
+
<div class="question-text">What does this command do?
|
|
3128
|
+
|
|
3129
|
+
```bash
|
|
3130
|
+
cd "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris" && python scripts/generate_explainers.py
|
|
3131
|
+
```</div>
|
|
3132
|
+
<div class="quiz-options">
|
|
3133
|
+
|
|
3134
|
+
<label class="quiz-option" data-question="q3" data-index="0">
|
|
3135
|
+
<input type="radio" name="q3" value="0" onchange="checkAnswer('q3', 0, 1)">
|
|
3136
|
+
<span class="option-letter">A</span>
|
|
3137
|
+
<span class="option-text">Send POST data</span>
|
|
3138
|
+
</label>
|
|
3139
|
+
<label class="quiz-option" data-question="q3" data-index="1">
|
|
3140
|
+
<input type="radio" name="q3" value="1" onchange="checkAnswer('q3', 1, 1)">
|
|
3141
|
+
<span class="option-letter">B</span>
|
|
3142
|
+
<span class="option-text">Generate all 5 explainer docx files</span>
|
|
3143
|
+
</label>
|
|
3144
|
+
<label class="quiz-option" data-question="q3" data-index="2">
|
|
3145
|
+
<input type="radio" name="q3" value="2" onchange="checkAnswer('q3', 2, 1)">
|
|
3146
|
+
<span class="option-letter">C</span>
|
|
3147
|
+
<span class="option-text">Specify username:password</span>
|
|
3148
|
+
</label>
|
|
3149
|
+
<label class="quiz-option" data-question="q3" data-index="3">
|
|
3150
|
+
<input type="radio" name="q3" value="3" onchange="checkAnswer('q3', 3, 1)">
|
|
3151
|
+
<span class="option-letter">D</span>
|
|
3152
|
+
<span class="option-text">Force removal without prompting</span>
|
|
3153
|
+
</label>
|
|
3154
|
+
</div>
|
|
3155
|
+
<div class="quiz-feedback" id="feedback-q3">
|
|
3156
|
+
<div class="feedback-result"></div>
|
|
3157
|
+
<div class="feedback-explanation">The command `cd "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris" && python scripts/generate_explainers.py` generate all 5 explainer docx files</div>
|
|
3158
|
+
</div>
|
|
3159
|
+
</div>
|
|
3160
|
+
<div class="quiz-question" id="question-q4">
|
|
3161
|
+
<div class="question-number">Question 5</div>
|
|
3162
|
+
<div class="question-text">What does this command do?
|
|
3163
|
+
|
|
3164
|
+
```bash
|
|
3165
|
+
cd "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris" && find . -name "generate_viz.py" -o -name "generate_explainers.py" 2>/dev/null
|
|
3166
|
+
```</div>
|
|
3167
|
+
<div class="quiz-options">
|
|
3168
|
+
|
|
3169
|
+
<label class="quiz-option" data-question="q4" data-index="0">
|
|
3170
|
+
<input type="radio" name="q4" value="0" onchange="checkAnswer('q4', 0, 0)">
|
|
3171
|
+
<span class="option-letter">A</span>
|
|
3172
|
+
<span class="option-text">Find script locations</span>
|
|
3173
|
+
</label>
|
|
3174
|
+
<label class="quiz-option" data-question="q4" data-index="1">
|
|
3175
|
+
<input type="radio" name="q4" value="1" onchange="checkAnswer('q4', 1, 0)">
|
|
3176
|
+
<span class="option-letter">B</span>
|
|
3177
|
+
<span class="option-text">Enable compression</span>
|
|
3178
|
+
</label>
|
|
3179
|
+
<label class="quiz-option" data-question="q4" data-index="2">
|
|
3180
|
+
<input type="radio" name="q4" value="2" onchange="checkAnswer('q4', 2, 0)">
|
|
3181
|
+
<span class="option-letter">C</span>
|
|
3182
|
+
<span class="option-text">Filter by group</span>
|
|
3183
|
+
</label>
|
|
3184
|
+
<label class="quiz-option" data-question="q4" data-index="3">
|
|
3185
|
+
<input type="radio" name="q4" value="3" onchange="checkAnswer('q4', 3, 0)">
|
|
3186
|
+
<span class="option-letter">D</span>
|
|
3187
|
+
<span class="option-text">Show inode numbers</span>
|
|
3188
|
+
</label>
|
|
3189
|
+
</div>
|
|
3190
|
+
<div class="quiz-feedback" id="feedback-q4">
|
|
3191
|
+
<div class="feedback-result"></div>
|
|
3192
|
+
<div class="feedback-explanation">The command `cd "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris" && find . -name "generate_viz.py" -o -name "generate_explainers.py" 2>/dev/null` find script locations</div>
|
|
3193
|
+
</div>
|
|
3194
|
+
</div>
|
|
3195
|
+
<div class="quiz-question" id="question-q5">
|
|
3196
|
+
<div class="question-number">Question 6</div>
|
|
3197
|
+
<div class="question-text">What does this command do?
|
|
3198
|
+
|
|
3199
|
+
```bash
|
|
3200
|
+
gh api repos/bjpl/data_example --jq '{default_branch: .default_branch, size: .size, pushed_at: .pushed_at, has_pages: .has_pages}'
|
|
3201
|
+
```</div>
|
|
3202
|
+
<div class="quiz-options">
|
|
3203
|
+
|
|
3204
|
+
<label class="quiz-option" data-question="q5" data-index="0">
|
|
3205
|
+
<input type="radio" name="q5" value="0" onchange="checkAnswer('q5', 0, 3)">
|
|
3206
|
+
<span class="option-letter">A</span>
|
|
3207
|
+
<span class="option-text">Minimum search depth</span>
|
|
3208
|
+
</label>
|
|
3209
|
+
<label class="quiz-option" data-question="q5" data-index="1">
|
|
3210
|
+
<input type="radio" name="q5" value="1" onchange="checkAnswer('q5', 1, 3)">
|
|
3211
|
+
<span class="option-letter">B</span>
|
|
3212
|
+
<span class="option-text">Count lines</span>
|
|
3213
|
+
</label>
|
|
3214
|
+
<label class="quiz-option" data-question="q5" data-index="2">
|
|
3215
|
+
<input type="radio" name="q5" value="2" onchange="checkAnswer('q5', 2, 3)">
|
|
3216
|
+
<span class="option-letter">C</span>
|
|
3217
|
+
<span class="option-text">Only report if files differ</span>
|
|
3218
|
+
</label>
|
|
3219
|
+
<label class="quiz-option" data-question="q5" data-index="3">
|
|
3220
|
+
<input type="radio" name="q5" value="3" onchange="checkAnswer('q5', 3, 3)">
|
|
3221
|
+
<span class="option-letter">D</span>
|
|
3222
|
+
<span class="option-text">Check repo state on GitHub</span>
|
|
3223
|
+
</label>
|
|
3224
|
+
</div>
|
|
3225
|
+
<div class="quiz-feedback" id="feedback-q5">
|
|
3226
|
+
<div class="feedback-result"></div>
|
|
3227
|
+
<div class="feedback-explanation">The command `gh api repos/bjpl/data_example --jq '{default_branch: .default_branch, size: .size, pushed_at: .pushed_at, has_pages: .has_pages}'` check repo state on github</div>
|
|
3228
|
+
</div>
|
|
3229
|
+
</div>
|
|
3230
|
+
<div class="quiz-question" id="question-q6">
|
|
3231
|
+
<div class="question-number">Question 7</div>
|
|
3232
|
+
<div class="question-text">What does this command do?
|
|
3233
|
+
|
|
3234
|
+
```bash
|
|
3235
|
+
session-slides --help 2>&1 || npx session-slides --help 2>&1
|
|
3236
|
+
```</div>
|
|
3237
|
+
<div class="quiz-options">
|
|
3238
|
+
|
|
3239
|
+
<label class="quiz-option" data-question="q6" data-index="0">
|
|
3240
|
+
<input type="radio" name="q6" value="0" onchange="checkAnswer('q6', 0, 2)">
|
|
3241
|
+
<span class="option-letter">A</span>
|
|
3242
|
+
<span class="option-text">Execute command on found files</span>
|
|
3243
|
+
</label>
|
|
3244
|
+
<label class="quiz-option" data-question="q6" data-index="1">
|
|
3245
|
+
<input type="radio" name="q6" value="1" onchange="checkAnswer('q6', 1, 2)">
|
|
3246
|
+
<span class="option-letter">B</span>
|
|
3247
|
+
<span class="option-text">Follow redirects</span>
|
|
3248
|
+
</label>
|
|
3249
|
+
<label class="quiz-option" data-question="q6" data-index="2">
|
|
3250
|
+
<input type="radio" name="q6" value="2" onchange="checkAnswer('q6', 2, 2)">
|
|
3251
|
+
<span class="option-letter">C</span>
|
|
3252
|
+
<span class="option-text">Check session-slides usage</span>
|
|
3253
|
+
</label>
|
|
3254
|
+
<label class="quiz-option" data-question="q6" data-index="3">
|
|
3255
|
+
<input type="radio" name="q6" value="3" onchange="checkAnswer('q6', 3, 2)">
|
|
3256
|
+
<span class="option-letter">D</span>
|
|
3257
|
+
<span class="option-text">Continue partial download</span>
|
|
3258
|
+
</label>
|
|
3259
|
+
</div>
|
|
3260
|
+
<div class="quiz-feedback" id="feedback-q6">
|
|
3261
|
+
<div class="feedback-result"></div>
|
|
3262
|
+
<div class="feedback-explanation">The command `session-slides --help 2>&1 || npx session-slides --help 2>&1` check session-slides usage</div>
|
|
3263
|
+
</div>
|
|
3264
|
+
</div>
|
|
3265
|
+
<div class="quiz-question" id="question-q7">
|
|
3266
|
+
<div class="question-number">Question 8</div>
|
|
3267
|
+
<div class="question-text">Build the correct command to **Find Claude session directories**.
|
|
3268
|
+
|
|
3269
|
+
Which command is correct?</div>
|
|
3270
|
+
<div class="quiz-options">
|
|
3271
|
+
|
|
3272
|
+
<label class="quiz-option" data-question="q7" data-index="0">
|
|
3273
|
+
<input type="radio" name="q7" value="0" onchange="checkAnswer('q7', 0, 2)">
|
|
3274
|
+
<span class="option-letter">A</span>
|
|
3275
|
+
<span class="option-text">`ls | -lt 2>/dev/null head ~/.claude/projects/ -20`</span>
|
|
3276
|
+
</label>
|
|
3277
|
+
<label class="quiz-option" data-question="q7" data-index="1">
|
|
3278
|
+
<input type="radio" name="q7" value="1" onchange="checkAnswer('q7', 1, 2)">
|
|
3279
|
+
<span class="option-letter">B</span>
|
|
3280
|
+
<span class="option-text">`find -lt -20 ~/.claude/projects/ 2>/dev/null | head`</span>
|
|
3281
|
+
</label>
|
|
3282
|
+
<label class="quiz-option" data-question="q7" data-index="2">
|
|
3283
|
+
<input type="radio" name="q7" value="2" onchange="checkAnswer('q7', 2, 2)">
|
|
3284
|
+
<span class="option-letter">C</span>
|
|
3285
|
+
<span class="option-text">`ls -lt -20 ~/.claude/projects/ 2>/dev/null | head`</span>
|
|
3286
|
+
</label>
|
|
3287
|
+
<label class="quiz-option" data-question="q7" data-index="3">
|
|
3288
|
+
<input type="radio" name="q7" value="3" onchange="checkAnswer('q7', 3, 2)">
|
|
3289
|
+
<span class="option-letter">D</span>
|
|
3290
|
+
<span class="option-text">`ls -t -20 ~/.claude/projects/ 2>/dev/null | head`</span>
|
|
3291
|
+
</label>
|
|
3292
|
+
</div>
|
|
3293
|
+
<div class="quiz-feedback" id="feedback-q7">
|
|
3294
|
+
<div class="feedback-result"></div>
|
|
3295
|
+
<div class="feedback-explanation">The correct command is `ls -lt -20 ~/.claude/projects/ 2>/dev/null | head` - this properly accomplishes the task</div>
|
|
3296
|
+
</div>
|
|
3297
|
+
</div>
|
|
3298
|
+
<div class="quiz-question" id="question-q8">
|
|
3299
|
+
<div class="question-number">Question 9</div>
|
|
3300
|
+
<div class="question-text">You want to **create parent directories as needed** when using `mkdir`. Which flag should you use?</div>
|
|
3301
|
+
<div class="quiz-options">
|
|
3302
|
+
|
|
3303
|
+
<label class="quiz-option" data-question="q8" data-index="0">
|
|
3304
|
+
<input type="radio" name="q8" value="0" onchange="checkAnswer('q8', 0, 3)">
|
|
3305
|
+
<span class="option-letter">A</span>
|
|
3306
|
+
<span class="option-text">-v</span>
|
|
3307
|
+
</label>
|
|
3308
|
+
<label class="quiz-option" data-question="q8" data-index="1">
|
|
3309
|
+
<input type="radio" name="q8" value="1" onchange="checkAnswer('q8', 1, 3)">
|
|
3310
|
+
<span class="option-letter">B</span>
|
|
3311
|
+
<span class="option-text">-l</span>
|
|
3312
|
+
</label>
|
|
3313
|
+
<label class="quiz-option" data-question="q8" data-index="2">
|
|
3314
|
+
<input type="radio" name="q8" value="2" onchange="checkAnswer('q8', 2, 3)">
|
|
3315
|
+
<span class="option-letter">C</span>
|
|
3316
|
+
<span class="option-text">-m</span>
|
|
3317
|
+
</label>
|
|
3318
|
+
<label class="quiz-option" data-question="q8" data-index="3">
|
|
3319
|
+
<input type="radio" name="q8" value="3" onchange="checkAnswer('q8', 3, 3)">
|
|
3320
|
+
<span class="option-letter">D</span>
|
|
3321
|
+
<span class="option-text">-p</span>
|
|
3322
|
+
</label>
|
|
3323
|
+
</div>
|
|
3324
|
+
<div class="quiz-feedback" id="feedback-q8">
|
|
3325
|
+
<div class="feedback-result"></div>
|
|
3326
|
+
<div class="feedback-explanation">The `-p` flag in `mkdir` is used to create parent directories as needed</div>
|
|
3327
|
+
</div>
|
|
3328
|
+
</div>
|
|
3329
|
+
<div class="quiz-question" id="question-q9">
|
|
3330
|
+
<div class="question-number">Question 10</div>
|
|
3331
|
+
<div class="question-text">Build the correct command to **Create visualizations subdirectory**.
|
|
3332
|
+
|
|
3333
|
+
Which command is correct?</div>
|
|
3334
|
+
<div class="quiz-options">
|
|
3335
|
+
|
|
3336
|
+
<label class="quiz-option" data-question="q9" data-index="0">
|
|
3337
|
+
<input type="radio" name="q9" value="0" onchange="checkAnswer('q9', 0, 1)">
|
|
3338
|
+
<span class="option-letter">A</span>
|
|
3339
|
+
<span class="option-text">`cp -p "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/visualizations/assets"`</span>
|
|
3340
|
+
</label>
|
|
3341
|
+
<label class="quiz-option" data-question="q9" data-index="1">
|
|
3342
|
+
<input type="radio" name="q9" value="1" onchange="checkAnswer('q9', 1, 1)">
|
|
3343
|
+
<span class="option-letter">B</span>
|
|
3344
|
+
<span class="option-text">`mkdir -p "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/visualizations/assets"`</span>
|
|
3345
|
+
</label>
|
|
3346
|
+
<label class="quiz-option" data-question="q9" data-index="2">
|
|
3347
|
+
<input type="radio" name="q9" value="2" onchange="checkAnswer('q9', 2, 1)">
|
|
3348
|
+
<span class="option-letter">C</span>
|
|
3349
|
+
<span class="option-text">`mkdir "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/visualizations/assets"`</span>
|
|
3350
|
+
</label>
|
|
3351
|
+
<label class="quiz-option" data-question="q9" data-index="3">
|
|
3352
|
+
<input type="radio" name="q9" value="3" onchange="checkAnswer('q9', 3, 1)">
|
|
3353
|
+
<span class="option-letter">D</span>
|
|
3354
|
+
<span class="option-text">`mkdir -v "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/visualizations/assets"`</span>
|
|
3355
|
+
</label>
|
|
3356
|
+
</div>
|
|
3357
|
+
<div class="quiz-feedback" id="feedback-q9">
|
|
3358
|
+
<div class="feedback-result"></div>
|
|
3359
|
+
<div class="feedback-explanation">The correct command is `mkdir -p "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/visualizations/assets"` - this properly accomplishes the task</div>
|
|
3360
|
+
</div>
|
|
3361
|
+
</div>
|
|
3362
|
+
<div class="quiz-question" id="question-q10">
|
|
3363
|
+
<div class="question-number">Question 11</div>
|
|
3364
|
+
<div class="question-text">Build the correct command to **Check repo state on GitHub**.
|
|
3365
|
+
|
|
3366
|
+
Which command is correct?</div>
|
|
3367
|
+
<div class="quiz-options">
|
|
3368
|
+
|
|
3369
|
+
<label class="quiz-option" data-question="q10" data-index="0">
|
|
3370
|
+
<input type="radio" name="q10" value="0" onchange="checkAnswer('q10', 0, 0)">
|
|
3371
|
+
<span class="option-letter">A</span>
|
|
3372
|
+
<span class="option-text">`gh --jq api repos/bjpl/data_example '{default_branch: .default_branch, size: .size, pushed_at: .pushed_at, has_pages: .has_pages}'`</span>
|
|
3373
|
+
</label>
|
|
3374
|
+
<label class="quiz-option" data-question="q10" data-index="1">
|
|
3375
|
+
<input type="radio" name="q10" value="1" onchange="checkAnswer('q10', 1, 0)">
|
|
3376
|
+
<span class="option-letter">B</span>
|
|
3377
|
+
<span class="option-text">`gh --invalid-option`</span>
|
|
3378
|
+
</label>
|
|
3379
|
+
<label class="quiz-option" data-question="q10" data-index="2">
|
|
3380
|
+
<input type="radio" name="q10" value="2" onchange="checkAnswer('q10', 2, 0)">
|
|
3381
|
+
<span class="option-letter">C</span>
|
|
3382
|
+
<span class="option-text">`gh api repos/bjpl/data_example '{default_branch: .default_branch, size: .size, pushed_at: .pushed_at, has_pages: .has_pages}'`</span>
|
|
3383
|
+
</label>
|
|
3384
|
+
<label class="quiz-option" data-question="q10" data-index="3">
|
|
3385
|
+
<input type="radio" name="q10" value="3" onchange="checkAnswer('q10', 3, 0)">
|
|
3386
|
+
<span class="option-letter">D</span>
|
|
3387
|
+
<span class="option-text">`api --jq .default_branch, '{default_branch: gh size: pushed_at: has_pages: .pushed_at, .has_pages}' repos/bjpl/data_example .size,`</span>
|
|
3388
|
+
</label>
|
|
3389
|
+
</div>
|
|
3390
|
+
<div class="quiz-feedback" id="feedback-q10">
|
|
3391
|
+
<div class="feedback-result"></div>
|
|
3392
|
+
<div class="feedback-explanation">The correct command is `gh --jq api repos/bjpl/data_example '{default_branch: .default_branch, size: .size, pushed_at: .pushed_at, has_pages: .has_pages}'` - this properly accomplishes the task</div>
|
|
3393
|
+
</div>
|
|
3394
|
+
</div>
|
|
3395
|
+
<div class="quiz-question" id="question-q11">
|
|
3396
|
+
<div class="question-number">Question 12</div>
|
|
3397
|
+
<div class="question-text">What is the key difference between these two commands?
|
|
3398
|
+
|
|
3399
|
+
**Command 1:**
|
|
3400
|
+
```bash
|
|
3401
|
+
ls -lt ~/.claude/projects/C--Users-brand-Development-Project-Workspace-active-development-session-with-chris/ 2>/dev/null | head -10
|
|
3402
|
+
```
|
|
3403
|
+
|
|
3404
|
+
**Command 2:**
|
|
3405
|
+
```bash
|
|
3406
|
+
ls -lt -10 -i ~/.claude/projects/C--Users-brand-Development-Project-Workspace-active-development-session-with-chris/ 2>/dev/null | head
|
|
3407
|
+
```</div>
|
|
3408
|
+
<div class="quiz-options">
|
|
3409
|
+
|
|
3410
|
+
<label class="quiz-option" data-question="q11" data-index="0">
|
|
3411
|
+
<input type="radio" name="q11" value="0" onchange="checkAnswer('q11', 0, 0)">
|
|
3412
|
+
<span class="option-letter">A</span>
|
|
3413
|
+
<span class="option-text">Command 2 has `-i` (Show inode numbers)</span>
|
|
3414
|
+
</label>
|
|
3415
|
+
<label class="quiz-option" data-question="q11" data-index="1">
|
|
3416
|
+
<input type="radio" name="q11" value="1" onchange="checkAnswer('q11', 1, 0)">
|
|
3417
|
+
<span class="option-letter">B</span>
|
|
3418
|
+
<span class="option-text">Command 1 modifies files, Command 2 only reads them</span>
|
|
3419
|
+
</label>
|
|
3420
|
+
<label class="quiz-option" data-question="q11" data-index="2">
|
|
3421
|
+
<input type="radio" name="q11" value="2" onchange="checkAnswer('q11', 2, 0)">
|
|
3422
|
+
<span class="option-letter">C</span>
|
|
3423
|
+
<span class="option-text">Both commands do exactly the same thing</span>
|
|
3424
|
+
</label>
|
|
3425
|
+
<label class="quiz-option" data-question="q11" data-index="3">
|
|
3426
|
+
<input type="radio" name="q11" value="3" onchange="checkAnswer('q11', 3, 0)">
|
|
3427
|
+
<span class="option-letter">D</span>
|
|
3428
|
+
<span class="option-text">Command 2 is deprecated, Command 1 is the modern version</span>
|
|
3429
|
+
</label>
|
|
3430
|
+
</div>
|
|
3431
|
+
<div class="quiz-feedback" id="feedback-q11">
|
|
3432
|
+
<div class="feedback-result"></div>
|
|
3433
|
+
<div class="feedback-explanation">The key difference is: Command 2 has `-i` (Show inode numbers)</div>
|
|
3434
|
+
</div>
|
|
3435
|
+
</div>
|
|
3436
|
+
<div class="quiz-question" id="question-q12">
|
|
3437
|
+
<div class="question-number">Question 13</div>
|
|
3438
|
+
<div class="question-text">You want to **create parent directories as needed** when using `mkdir`. Which flag should you use?</div>
|
|
3439
|
+
<div class="quiz-options">
|
|
3440
|
+
|
|
3441
|
+
<label class="quiz-option" data-question="q12" data-index="0">
|
|
3442
|
+
<input type="radio" name="q12" value="0" onchange="checkAnswer('q12', 0, 2)">
|
|
3443
|
+
<span class="option-letter">A</span>
|
|
3444
|
+
<span class="option-text">-v</span>
|
|
3445
|
+
</label>
|
|
3446
|
+
<label class="quiz-option" data-question="q12" data-index="1">
|
|
3447
|
+
<input type="radio" name="q12" value="1" onchange="checkAnswer('q12', 1, 2)">
|
|
3448
|
+
<span class="option-letter">B</span>
|
|
3449
|
+
<span class="option-text">-l</span>
|
|
3450
|
+
</label>
|
|
3451
|
+
<label class="quiz-option" data-question="q12" data-index="2">
|
|
3452
|
+
<input type="radio" name="q12" value="2" onchange="checkAnswer('q12', 2, 2)">
|
|
3453
|
+
<span class="option-letter">C</span>
|
|
3454
|
+
<span class="option-text">-p</span>
|
|
3455
|
+
</label>
|
|
3456
|
+
<label class="quiz-option" data-question="q12" data-index="3">
|
|
3457
|
+
<input type="radio" name="q12" value="3" onchange="checkAnswer('q12', 3, 2)">
|
|
3458
|
+
<span class="option-letter">D</span>
|
|
3459
|
+
<span class="option-text">-m</span>
|
|
3460
|
+
</label>
|
|
3461
|
+
</div>
|
|
3462
|
+
<div class="quiz-feedback" id="feedback-q12">
|
|
3463
|
+
<div class="feedback-result"></div>
|
|
3464
|
+
<div class="feedback-explanation">The `-p` flag in `mkdir` is used to create parent directories as needed</div>
|
|
3465
|
+
</div>
|
|
3466
|
+
</div>
|
|
3467
|
+
<div class="quiz-question" id="question-q13">
|
|
3468
|
+
<div class="question-number">Question 14</div>
|
|
3469
|
+
<div class="question-text">What does this command do?
|
|
3470
|
+
|
|
3471
|
+
```bash
|
|
3472
|
+
cd "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris" && python visualizations/generate_viz.py
|
|
3473
|
+
```</div>
|
|
3474
|
+
<div class="quiz-options">
|
|
3475
|
+
|
|
3476
|
+
<label class="quiz-option" data-question="q13" data-index="0">
|
|
3477
|
+
<input type="radio" name="q13" value="0" onchange="checkAnswer('q13', 0, 3)">
|
|
3478
|
+
<span class="option-letter">A</span>
|
|
3479
|
+
<span class="option-text">Append files to archive</span>
|
|
3480
|
+
</label>
|
|
3481
|
+
<label class="quiz-option" data-question="q13" data-index="1">
|
|
3482
|
+
<input type="radio" name="q13" value="1" onchange="checkAnswer('q13', 1, 3)">
|
|
3483
|
+
<span class="option-letter">B</span>
|
|
3484
|
+
<span class="option-text">Only download newer files</span>
|
|
3485
|
+
</label>
|
|
3486
|
+
<label class="quiz-option" data-question="q13" data-index="2">
|
|
3487
|
+
<input type="radio" name="q13" value="2" onchange="checkAnswer('q13', 2, 3)">
|
|
3488
|
+
<span class="option-letter">C</span>
|
|
3489
|
+
<span class="option-text">Delete found files</span>
|
|
3490
|
+
</label>
|
|
3491
|
+
<label class="quiz-option" data-question="q13" data-index="3">
|
|
3492
|
+
<input type="radio" name="q13" value="3" onchange="checkAnswer('q13', 3, 3)">
|
|
3493
|
+
<span class="option-letter">D</span>
|
|
3494
|
+
<span class="option-text">Generate all 3 interactive HTML visualizations</span>
|
|
3495
|
+
</label>
|
|
3496
|
+
</div>
|
|
3497
|
+
<div class="quiz-feedback" id="feedback-q13">
|
|
3498
|
+
<div class="feedback-result"></div>
|
|
3499
|
+
<div class="feedback-explanation">The command `cd "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris" && python visualizations/generate_viz.py` generate all 3 interactive html visualizations</div>
|
|
3500
|
+
</div>
|
|
3501
|
+
</div>
|
|
3502
|
+
<div class="quiz-question" id="question-q14">
|
|
3503
|
+
<div class="question-number">Question 15</div>
|
|
3504
|
+
<div class="question-text">What is the key difference between these two commands?
|
|
3505
|
+
|
|
3506
|
+
**Command 1:**
|
|
3507
|
+
```bash
|
|
3508
|
+
mkdir -p "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/docs/explainers"
|
|
3509
|
+
```
|
|
3510
|
+
|
|
3511
|
+
**Command 2:**
|
|
3512
|
+
```bash
|
|
3513
|
+
mkdir -p -m "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/docs/explainers"
|
|
3514
|
+
```</div>
|
|
3515
|
+
<div class="quiz-options">
|
|
3516
|
+
|
|
3517
|
+
<label class="quiz-option" data-question="q14" data-index="0">
|
|
3518
|
+
<input type="radio" name="q14" value="0" onchange="checkAnswer('q14', 0, 2)">
|
|
3519
|
+
<span class="option-letter">A</span>
|
|
3520
|
+
<span class="option-text">Command 1 runs faster than Command 2</span>
|
|
3521
|
+
</label>
|
|
3522
|
+
<label class="quiz-option" data-question="q14" data-index="1">
|
|
3523
|
+
<input type="radio" name="q14" value="1" onchange="checkAnswer('q14', 1, 2)">
|
|
3524
|
+
<span class="option-letter">B</span>
|
|
3525
|
+
<span class="option-text">Command 2 requires root permissions, Command 1 doesn't</span>
|
|
3526
|
+
</label>
|
|
3527
|
+
<label class="quiz-option" data-question="q14" data-index="2">
|
|
3528
|
+
<input type="radio" name="q14" value="2" onchange="checkAnswer('q14', 2, 2)">
|
|
3529
|
+
<span class="option-letter">C</span>
|
|
3530
|
+
<span class="option-text">Command 2 has `-m` (Set permissions mode)</span>
|
|
3531
|
+
</label>
|
|
3532
|
+
<label class="quiz-option" data-question="q14" data-index="3">
|
|
3533
|
+
<input type="radio" name="q14" value="3" onchange="checkAnswer('q14', 3, 2)">
|
|
3534
|
+
<span class="option-letter">D</span>
|
|
3535
|
+
<span class="option-text">Command 2 is deprecated, Command 1 is the modern version</span>
|
|
3536
|
+
</label>
|
|
3537
|
+
</div>
|
|
3538
|
+
<div class="quiz-feedback" id="feedback-q14">
|
|
3539
|
+
<div class="feedback-result"></div>
|
|
3540
|
+
<div class="feedback-explanation">The key difference is: Command 2 has `-m` (Set permissions mode)</div>
|
|
3541
|
+
</div>
|
|
3542
|
+
</div>
|
|
3543
|
+
<div class="quiz-question" id="question-q15">
|
|
3544
|
+
<div class="question-number">Question 16</div>
|
|
3545
|
+
<div class="question-text">What is the key difference between these two commands?
|
|
3546
|
+
|
|
3547
|
+
**Command 1:**
|
|
3548
|
+
```bash
|
|
3549
|
+
ls -lt ~/.claude/projects/ 2>/dev/null | head -20
|
|
3550
|
+
```
|
|
3551
|
+
|
|
3552
|
+
**Command 2:**
|
|
3553
|
+
```bash
|
|
3554
|
+
ls -lt -20 -i ~/.claude/projects/ 2>/dev/null | head
|
|
3555
|
+
```</div>
|
|
3556
|
+
<div class="quiz-options">
|
|
3557
|
+
|
|
3558
|
+
<label class="quiz-option" data-question="q15" data-index="0">
|
|
3559
|
+
<input type="radio" name="q15" value="0" onchange="checkAnswer('q15', 0, 3)">
|
|
3560
|
+
<span class="option-letter">A</span>
|
|
3561
|
+
<span class="option-text">Both commands do exactly the same thing</span>
|
|
3562
|
+
</label>
|
|
3563
|
+
<label class="quiz-option" data-question="q15" data-index="1">
|
|
3564
|
+
<input type="radio" name="q15" value="1" onchange="checkAnswer('q15', 1, 3)">
|
|
3565
|
+
<span class="option-letter">B</span>
|
|
3566
|
+
<span class="option-text">Command 2 requires root permissions, Command 1 doesn't</span>
|
|
3567
|
+
</label>
|
|
3568
|
+
<label class="quiz-option" data-question="q15" data-index="2">
|
|
3569
|
+
<input type="radio" name="q15" value="2" onchange="checkAnswer('q15', 2, 3)">
|
|
3570
|
+
<span class="option-letter">C</span>
|
|
3571
|
+
<span class="option-text">Command 1 modifies files, Command 2 only reads them</span>
|
|
3572
|
+
</label>
|
|
3573
|
+
<label class="quiz-option" data-question="q15" data-index="3">
|
|
3574
|
+
<input type="radio" name="q15" value="3" onchange="checkAnswer('q15', 3, 3)">
|
|
3575
|
+
<span class="option-letter">D</span>
|
|
3576
|
+
<span class="option-text">Command 2 has `-i` (Show inode numbers)</span>
|
|
3577
|
+
</label>
|
|
3578
|
+
</div>
|
|
3579
|
+
<div class="quiz-feedback" id="feedback-q15">
|
|
3580
|
+
<div class="feedback-result"></div>
|
|
3581
|
+
<div class="feedback-explanation">The key difference is: Command 2 has `-i` (Show inode numbers)</div>
|
|
3582
|
+
</div>
|
|
3583
|
+
</div>
|
|
3584
|
+
<div class="quiz-question" id="question-q16">
|
|
3585
|
+
<div class="question-number">Question 17</div>
|
|
3586
|
+
<div class="question-text">What does this command do?
|
|
3587
|
+
|
|
3588
|
+
```bash
|
|
3589
|
+
gh api repos/bjpl/data_example/pages -X POST -f "build_type=workflow" -f "source[branch]=main" -f "source[path]=/" 2>&1 || gh api repos/bjpl/data_example/pages -X POST --input - <<'EOF'
|
|
3590
|
+
{"source":{"branch":"main","path":"/"}}
|
|
3591
|
+
EOF
|
|
3592
|
+
```</div>
|
|
3593
|
+
<div class="quiz-options">
|
|
3594
|
+
|
|
3595
|
+
<label class="quiz-option" data-question="q16" data-index="0">
|
|
3596
|
+
<input type="radio" name="q16" value="0" onchange="checkAnswer('q16', 0, 3)">
|
|
3597
|
+
<span class="option-letter">A</span>
|
|
3598
|
+
<span class="option-text">Human-readable sizes</span>
|
|
3599
|
+
</label>
|
|
3600
|
+
<label class="quiz-option" data-question="q16" data-index="1">
|
|
3601
|
+
<input type="radio" name="q16" value="1" onchange="checkAnswer('q16', 1, 3)">
|
|
3602
|
+
<span class="option-letter">B</span>
|
|
3603
|
+
<span class="option-text">List one file per line</span>
|
|
3604
|
+
</label>
|
|
3605
|
+
<label class="quiz-option" data-question="q16" data-index="2">
|
|
3606
|
+
<input type="radio" name="q16" value="2" onchange="checkAnswer('q16', 2, 3)">
|
|
3607
|
+
<span class="option-letter">C</span>
|
|
3608
|
+
<span class="option-text">Count lines</span>
|
|
3609
|
+
</label>
|
|
3610
|
+
<label class="quiz-option" data-question="q16" data-index="3">
|
|
3611
|
+
<input type="radio" name="q16" value="3" onchange="checkAnswer('q16', 3, 3)">
|
|
3612
|
+
<span class="option-letter">D</span>
|
|
3613
|
+
<span class="option-text">Enable GitHub Pages on main branch</span>
|
|
3614
|
+
</label>
|
|
3615
|
+
</div>
|
|
3616
|
+
<div class="quiz-feedback" id="feedback-q16">
|
|
3617
|
+
<div class="feedback-result"></div>
|
|
3618
|
+
<div class="feedback-explanation">The command `gh api repos/bjpl/data_example/pages -X POST -f "build_type=workflow" -f "source[branch]=main" -f "source[path]=/" 2>&1 || gh api repos/bjpl/data_example/pages -X POST --input - <<'EOF'
|
|
3619
|
+
{"source":{"branch":"main","path":"/"}}
|
|
3620
|
+
EOF` enable github pages on main branch</div>
|
|
3621
|
+
</div>
|
|
3622
|
+
</div>
|
|
3623
|
+
<div class="quiz-question" id="question-q17">
|
|
3624
|
+
<div class="question-number">Question 18</div>
|
|
3625
|
+
<div class="question-text">Build the correct command to **Force push to remote to trigger Actions**.
|
|
3626
|
+
|
|
3627
|
+
Which command is correct?</div>
|
|
3628
|
+
<div class="quiz-options">
|
|
3629
|
+
|
|
3630
|
+
<label class="quiz-option" data-question="q17" data-index="0">
|
|
3631
|
+
<input type="radio" name="q17" value="0" onchange="checkAnswer('q17', 0, 3)">
|
|
3632
|
+
<span class="option-letter">A</span>
|
|
3633
|
+
<span class="option-text">`cd "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris" && git push origin main`</span>
|
|
3634
|
+
</label>
|
|
3635
|
+
<label class="quiz-option" data-question="q17" data-index="1">
|
|
3636
|
+
<input type="radio" name="q17" value="1" onchange="checkAnswer('q17', 1, 3)">
|
|
3637
|
+
<span class="option-letter">B</span>
|
|
3638
|
+
<span class="option-text">`push cd origin --force && main "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris" git`</span>
|
|
3639
|
+
</label>
|
|
3640
|
+
<label class="quiz-option" data-question="q17" data-index="2">
|
|
3641
|
+
<input type="radio" name="q17" value="2" onchange="checkAnswer('q17', 2, 3)">
|
|
3642
|
+
<span class="option-letter">C</span>
|
|
3643
|
+
<span class="option-text">`cd --invalid-option`</span>
|
|
3644
|
+
</label>
|
|
3645
|
+
<label class="quiz-option" data-question="q17" data-index="3">
|
|
3646
|
+
<input type="radio" name="q17" value="3" onchange="checkAnswer('q17', 3, 3)">
|
|
3647
|
+
<span class="option-letter">D</span>
|
|
3648
|
+
<span class="option-text">`cd --force "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris" && git push origin main`</span>
|
|
3649
|
+
</label>
|
|
3650
|
+
</div>
|
|
3651
|
+
<div class="quiz-feedback" id="feedback-q17">
|
|
3652
|
+
<div class="feedback-result"></div>
|
|
3653
|
+
<div class="feedback-explanation">The correct command is `cd --force "C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris" && git push origin main` - this properly accomplishes the task</div>
|
|
3654
|
+
</div>
|
|
3655
|
+
</div>
|
|
3656
|
+
</div>
|
|
3657
|
+
|
|
3658
|
+
<div class="quiz-actions">
|
|
3659
|
+
<button class="btn btn-secondary" onclick="resetQuiz()">Try Again</button>
|
|
3660
|
+
</div>
|
|
3661
|
+
</div>
|
|
3662
|
+
</section>
|
|
3663
|
+
</main>
|
|
3664
|
+
|
|
3665
|
+
<footer class="footer">
|
|
3666
|
+
<p>Learn Bash from Session Data | Press 1-4 to switch tabs</p>
|
|
3667
|
+
</footer>
|
|
3668
|
+
</div>
|
|
3669
|
+
|
|
3670
|
+
<script>
|
|
3671
|
+
|
|
3672
|
+
// Quiz data
|
|
3673
|
+
const quizData = [{"question": "What does this command do?\n\n```bash\ncd \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris\" && git add .github/workflows/deploy.yml && git commit -m \"$(cat <<'EOF'\nAdd GitHub Actions workflow for Pages deployment\n\nCo-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>\nEOF\n)\" && git push origin main\n```", "options": ["Count bytes", "Show lines after match", "Human-readable file sizes", "Commit and push workflow to trigger Actions deployment"], "correct_answer": 3, "explanation": "The command `cd \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris\" && git add .github/workflows/deploy.yml && git commit -m \"$(cat <<'EOF'\nAdd GitHub Actions workflow for Pages deployment\n\nCo-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>\nEOF\n)\" && git push origin main` commit and push workflow to trigger actions deployment"}, {"question": "What does this command do?\n\n```bash\ncd \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris\" && git push origin main --force\n```", "options": ["Add custom header", "Number non-blank lines only", "Force push to remote to trigger Actions", "Create backup of existing files"], "correct_answer": 2, "explanation": "The command `cd \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris\" && git push origin main --force` force push to remote to trigger actions"}, {"question": "You want to **create parent directories as needed** when using `mkdir`. Which flag should you use?", "options": ["-v", "-m", "-l", "-p"], "correct_answer": 3, "explanation": "The `-p` flag in `mkdir` is used to create parent directories as needed"}, {"question": "What does this command do?\n\n```bash\ncd \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris\" && python scripts/generate_explainers.py\n```", "options": ["Send POST data", "Generate all 5 explainer docx files", "Specify username:password", "Force removal without prompting"], "correct_answer": 1, "explanation": "The command `cd \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris\" && python scripts/generate_explainers.py` generate all 5 explainer docx files"}, {"question": "What does this command do?\n\n```bash\ncd \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris\" && find . -name \"generate_viz.py\" -o -name \"generate_explainers.py\" 2>/dev/null\n```", "options": ["Find script locations", "Enable compression", "Filter by group", "Show inode numbers"], "correct_answer": 0, "explanation": "The command `cd \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris\" && find . -name \"generate_viz.py\" -o -name \"generate_explainers.py\" 2>/dev/null` find script locations"}, {"question": "What does this command do?\n\n```bash\ngh api repos/bjpl/data_example --jq '{default_branch: .default_branch, size: .size, pushed_at: .pushed_at, has_pages: .has_pages}'\n```", "options": ["Minimum search depth", "Count lines", "Only report if files differ", "Check repo state on GitHub"], "correct_answer": 3, "explanation": "The command `gh api repos/bjpl/data_example --jq '{default_branch: .default_branch, size: .size, pushed_at: .pushed_at, has_pages: .has_pages}'` check repo state on github"}, {"question": "What does this command do?\n\n```bash\nsession-slides --help 2>&1 || npx session-slides --help 2>&1\n```", "options": ["Execute command on found files", "Follow redirects", "Check session-slides usage", "Continue partial download"], "correct_answer": 2, "explanation": "The command `session-slides --help 2>&1 || npx session-slides --help 2>&1` check session-slides usage"}, {"question": "Build the correct command to **Find Claude session directories**.\n\nWhich command is correct?", "options": ["`ls | -lt 2>/dev/null head ~/.claude/projects/ -20`", "`find -lt -20 ~/.claude/projects/ 2>/dev/null | head`", "`ls -lt -20 ~/.claude/projects/ 2>/dev/null | head`", "`ls -t -20 ~/.claude/projects/ 2>/dev/null | head`"], "correct_answer": 2, "explanation": "The correct command is `ls -lt -20 ~/.claude/projects/ 2>/dev/null | head` - this properly accomplishes the task"}, {"question": "You want to **create parent directories as needed** when using `mkdir`. Which flag should you use?", "options": ["-v", "-l", "-m", "-p"], "correct_answer": 3, "explanation": "The `-p` flag in `mkdir` is used to create parent directories as needed"}, {"question": "Build the correct command to **Create visualizations subdirectory**.\n\nWhich command is correct?", "options": ["`cp -p \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/visualizations/assets\"`", "`mkdir -p \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/visualizations/assets\"`", "`mkdir \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/visualizations/assets\"`", "`mkdir -v \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/visualizations/assets\"`"], "correct_answer": 1, "explanation": "The correct command is `mkdir -p \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/visualizations/assets\"` - this properly accomplishes the task"}, {"question": "Build the correct command to **Check repo state on GitHub**.\n\nWhich command is correct?", "options": ["`gh --jq api repos/bjpl/data_example '{default_branch: .default_branch, size: .size, pushed_at: .pushed_at, has_pages: .has_pages}'`", "`gh --invalid-option`", "`gh api repos/bjpl/data_example '{default_branch: .default_branch, size: .size, pushed_at: .pushed_at, has_pages: .has_pages}'`", "`api --jq .default_branch, '{default_branch: gh size: pushed_at: has_pages: .pushed_at, .has_pages}' repos/bjpl/data_example .size,`"], "correct_answer": 0, "explanation": "The correct command is `gh --jq api repos/bjpl/data_example '{default_branch: .default_branch, size: .size, pushed_at: .pushed_at, has_pages: .has_pages}'` - this properly accomplishes the task"}, {"question": "What is the key difference between these two commands?\n\n**Command 1:**\n```bash\nls -lt ~/.claude/projects/C--Users-brand-Development-Project-Workspace-active-development-session-with-chris/ 2>/dev/null | head -10\n```\n\n**Command 2:**\n```bash\nls -lt -10 -i ~/.claude/projects/C--Users-brand-Development-Project-Workspace-active-development-session-with-chris/ 2>/dev/null | head\n```", "options": ["Command 2 has `-i` (Show inode numbers)", "Command 1 modifies files, Command 2 only reads them", "Both commands do exactly the same thing", "Command 2 is deprecated, Command 1 is the modern version"], "correct_answer": 0, "explanation": "The key difference is: Command 2 has `-i` (Show inode numbers)"}, {"question": "You want to **create parent directories as needed** when using `mkdir`. Which flag should you use?", "options": ["-v", "-l", "-p", "-m"], "correct_answer": 2, "explanation": "The `-p` flag in `mkdir` is used to create parent directories as needed"}, {"question": "What does this command do?\n\n```bash\ncd \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris\" && python visualizations/generate_viz.py\n```", "options": ["Append files to archive", "Only download newer files", "Delete found files", "Generate all 3 interactive HTML visualizations"], "correct_answer": 3, "explanation": "The command `cd \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris\" && python visualizations/generate_viz.py` generate all 3 interactive html visualizations"}, {"question": "What is the key difference between these two commands?\n\n**Command 1:**\n```bash\nmkdir -p \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/docs/explainers\"\n```\n\n**Command 2:**\n```bash\nmkdir -p -m \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris/docs/explainers\"\n```", "options": ["Command 1 runs faster than Command 2", "Command 2 requires root permissions, Command 1 doesn't", "Command 2 has `-m` (Set permissions mode)", "Command 2 is deprecated, Command 1 is the modern version"], "correct_answer": 2, "explanation": "The key difference is: Command 2 has `-m` (Set permissions mode)"}, {"question": "What is the key difference between these two commands?\n\n**Command 1:**\n```bash\nls -lt ~/.claude/projects/ 2>/dev/null | head -20\n```\n\n**Command 2:**\n```bash\nls -lt -20 -i ~/.claude/projects/ 2>/dev/null | head\n```", "options": ["Both commands do exactly the same thing", "Command 2 requires root permissions, Command 1 doesn't", "Command 1 modifies files, Command 2 only reads them", "Command 2 has `-i` (Show inode numbers)"], "correct_answer": 3, "explanation": "The key difference is: Command 2 has `-i` (Show inode numbers)"}, {"question": "What does this command do?\n\n```bash\ngh api repos/bjpl/data_example/pages -X POST -f \"build_type=workflow\" -f \"source[branch]=main\" -f \"source[path]=/\" 2>&1 || gh api repos/bjpl/data_example/pages -X POST --input - <<'EOF'\n{\"source\":{\"branch\":\"main\",\"path\":\"/\"}}\nEOF\n```", "options": ["Human-readable sizes", "List one file per line", "Count lines", "Enable GitHub Pages on main branch"], "correct_answer": 3, "explanation": "The command `gh api repos/bjpl/data_example/pages -X POST -f \"build_type=workflow\" -f \"source[branch]=main\" -f \"source[path]=/\" 2>&1 || gh api repos/bjpl/data_example/pages -X POST --input - <<'EOF'\n{\"source\":{\"branch\":\"main\",\"path\":\"/\"}}\nEOF` enable github pages on main branch"}, {"question": "Build the correct command to **Force push to remote to trigger Actions**.\n\nWhich command is correct?", "options": ["`cd \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris\" && git push origin main`", "`push cd origin --force && main \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris\" git`", "`cd --invalid-option`", "`cd --force \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris\" && git push origin main`"], "correct_answer": 3, "explanation": "The correct command is `cd --force \"C:/Users/brand/Development/Project_Workspace/active-development/session_with_chris\" && git push origin main` - this properly accomplishes the task"}];
|
|
3674
|
+
let score = 0;
|
|
3675
|
+
let answeredQuestions = new Set();
|
|
3676
|
+
|
|
3677
|
+
// Tab Navigation
|
|
3678
|
+
document.querySelectorAll('.tab').forEach(tab => {
|
|
3679
|
+
tab.addEventListener('click', () => {
|
|
3680
|
+
switchTab(tab.dataset.tab);
|
|
3681
|
+
});
|
|
3682
|
+
});
|
|
3683
|
+
|
|
3684
|
+
function switchTab(tabName) {
|
|
3685
|
+
// Update tabs
|
|
3686
|
+
document.querySelectorAll('.tab').forEach(t => {
|
|
3687
|
+
t.classList.remove('active');
|
|
3688
|
+
t.setAttribute('aria-selected', 'false');
|
|
3689
|
+
});
|
|
3690
|
+
document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
|
|
3691
|
+
document.querySelector(`[data-tab="${tabName}"]`).setAttribute('aria-selected', 'true');
|
|
3692
|
+
|
|
3693
|
+
// Update panels
|
|
3694
|
+
document.querySelectorAll('.panel').forEach(p => {
|
|
3695
|
+
p.classList.remove('active');
|
|
3696
|
+
});
|
|
3697
|
+
document.getElementById(`panel-${tabName}`).classList.add('active');
|
|
3698
|
+
}
|
|
3699
|
+
|
|
3700
|
+
// Keyboard navigation
|
|
3701
|
+
document.addEventListener('keydown', (e) => {
|
|
3702
|
+
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
|
3703
|
+
|
|
3704
|
+
const tabs = ['overview', 'commands', 'lessons', 'quiz'];
|
|
3705
|
+
const key = e.key;
|
|
3706
|
+
|
|
3707
|
+
if (key >= '1' && key <= '4') {
|
|
3708
|
+
e.preventDefault();
|
|
3709
|
+
switchTab(tabs[parseInt(key) - 1]);
|
|
3710
|
+
}
|
|
3711
|
+
});
|
|
3712
|
+
|
|
3713
|
+
// Theme Toggle
|
|
3714
|
+
function toggleTheme() {
|
|
3715
|
+
const html = document.documentElement;
|
|
3716
|
+
const currentTheme = html.getAttribute('data-theme');
|
|
3717
|
+
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
3718
|
+
html.setAttribute('data-theme', newTheme);
|
|
3719
|
+
localStorage.setItem('theme', newTheme);
|
|
3720
|
+
}
|
|
3721
|
+
|
|
3722
|
+
// Load saved theme
|
|
3723
|
+
(function() {
|
|
3724
|
+
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
3725
|
+
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
3726
|
+
})();
|
|
3727
|
+
|
|
3728
|
+
// Command expansion
|
|
3729
|
+
function toggleCommand(cmdId) {
|
|
3730
|
+
const details = document.getElementById(cmdId);
|
|
3731
|
+
const card = details.closest('.command-card');
|
|
3732
|
+
|
|
3733
|
+
details.classList.toggle('show');
|
|
3734
|
+
card.classList.toggle('expanded');
|
|
3735
|
+
}
|
|
3736
|
+
|
|
3737
|
+
// Command filtering
|
|
3738
|
+
function filterCommands() {
|
|
3739
|
+
const searchTerm = document.getElementById('command-search').value.toLowerCase();
|
|
3740
|
+
const activeCategory = document.querySelector('.filter-chip.active').dataset.category;
|
|
3741
|
+
|
|
3742
|
+
document.querySelectorAll('.command-card').forEach(card => {
|
|
3743
|
+
const name = card.dataset.name.toLowerCase();
|
|
3744
|
+
const category = card.dataset.category;
|
|
3745
|
+
|
|
3746
|
+
const matchesSearch = name.includes(searchTerm);
|
|
3747
|
+
const matchesCategory = activeCategory === 'all' || category === activeCategory;
|
|
3748
|
+
|
|
3749
|
+
card.classList.toggle('hidden', !(matchesSearch && matchesCategory));
|
|
3750
|
+
});
|
|
3751
|
+
}
|
|
3752
|
+
|
|
3753
|
+
// Category filter chips
|
|
3754
|
+
document.querySelectorAll('.filter-chip').forEach(chip => {
|
|
3755
|
+
chip.addEventListener('click', () => {
|
|
3756
|
+
document.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active'));
|
|
3757
|
+
chip.classList.add('active');
|
|
3758
|
+
filterCommands();
|
|
3759
|
+
});
|
|
3760
|
+
});
|
|
3761
|
+
|
|
3762
|
+
// Command sorting
|
|
3763
|
+
function sortCommands() {
|
|
3764
|
+
const sortBy = document.getElementById('sort-select').value;
|
|
3765
|
+
const list = document.getElementById('commands-list');
|
|
3766
|
+
const cards = Array.from(list.querySelectorAll('.command-card'));
|
|
3767
|
+
|
|
3768
|
+
cards.sort((a, b) => {
|
|
3769
|
+
switch(sortBy) {
|
|
3770
|
+
case 'frequency':
|
|
3771
|
+
return parseInt(b.dataset.frequency) - parseInt(a.dataset.frequency);
|
|
3772
|
+
case 'complexity':
|
|
3773
|
+
const order = {'simple': 1, 'intermediate': 2, 'advanced': 3};
|
|
3774
|
+
return order[a.dataset.complexity] - order[b.dataset.complexity];
|
|
3775
|
+
case 'category':
|
|
3776
|
+
return a.dataset.category.localeCompare(b.dataset.category);
|
|
3777
|
+
case 'name':
|
|
3778
|
+
return a.dataset.name.localeCompare(b.dataset.name);
|
|
3779
|
+
default:
|
|
3780
|
+
return 0;
|
|
3781
|
+
}
|
|
3782
|
+
});
|
|
3783
|
+
|
|
3784
|
+
cards.forEach(card => list.appendChild(card));
|
|
3785
|
+
}
|
|
3786
|
+
|
|
3787
|
+
// Quiz functions
|
|
3788
|
+
function checkAnswer(questionId, selectedIndex, correctIndex) {
|
|
3789
|
+
if (answeredQuestions.has(questionId)) return;
|
|
3790
|
+
answeredQuestions.add(questionId);
|
|
3791
|
+
|
|
3792
|
+
const question = document.getElementById(`question-${questionId}`);
|
|
3793
|
+
const options = question.querySelectorAll('.quiz-option');
|
|
3794
|
+
const feedback = document.getElementById(`feedback-${questionId}`);
|
|
3795
|
+
|
|
3796
|
+
const isCorrect = selectedIndex === correctIndex;
|
|
3797
|
+
|
|
3798
|
+
// Mark options
|
|
3799
|
+
options.forEach((opt, idx) => {
|
|
3800
|
+
opt.classList.add('disabled');
|
|
3801
|
+
if (idx === correctIndex) {
|
|
3802
|
+
opt.classList.add('correct');
|
|
3803
|
+
} else if (idx === selectedIndex && !isCorrect) {
|
|
3804
|
+
opt.classList.add('incorrect');
|
|
3805
|
+
}
|
|
3806
|
+
});
|
|
3807
|
+
|
|
3808
|
+
// Show feedback
|
|
3809
|
+
feedback.classList.add('show');
|
|
3810
|
+
feedback.classList.add(isCorrect ? 'correct' : 'incorrect');
|
|
3811
|
+
feedback.querySelector('.feedback-result').textContent = isCorrect ? 'Correct!' : 'Incorrect';
|
|
3812
|
+
|
|
3813
|
+
// Update score
|
|
3814
|
+
if (isCorrect) {
|
|
3815
|
+
score++;
|
|
3816
|
+
document.getElementById('score-current').textContent = score;
|
|
3817
|
+
}
|
|
3818
|
+
}
|
|
3819
|
+
|
|
3820
|
+
function resetQuiz() {
|
|
3821
|
+
score = 0;
|
|
3822
|
+
answeredQuestions.clear();
|
|
3823
|
+
document.getElementById('score-current').textContent = '0';
|
|
3824
|
+
|
|
3825
|
+
document.querySelectorAll('.quiz-question').forEach(q => {
|
|
3826
|
+
q.querySelectorAll('.quiz-option').forEach(opt => {
|
|
3827
|
+
opt.classList.remove('correct', 'incorrect', 'disabled');
|
|
3828
|
+
opt.querySelector('input').checked = false;
|
|
3829
|
+
});
|
|
3830
|
+
|
|
3831
|
+
const feedback = q.querySelector('.quiz-feedback');
|
|
3832
|
+
feedback.classList.remove('show', 'correct', 'incorrect');
|
|
3833
|
+
});
|
|
3834
|
+
}
|
|
3835
|
+
|
|
3836
|
+
// Smooth scrolling for internal links
|
|
3837
|
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
3838
|
+
anchor.addEventListener('click', function(e) {
|
|
3839
|
+
e.preventDefault();
|
|
3840
|
+
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
|
3841
|
+
behavior: 'smooth'
|
|
3842
|
+
});
|
|
3843
|
+
});
|
|
3844
|
+
});
|
|
3845
|
+
|
|
3846
|
+
</script>
|
|
3847
|
+
</body>
|
|
3848
|
+
</html>
|