Hugging Face's logo

Spaces:
CORVO-AI
/
hamza
Sleeping

App Files Community
CORVO-AI commited on
Commit
55bccfc
·
verified ·
1 Parent(s): e4ba7f1

Upload 5 files

Browse files
Files changed (6) hide show
  1. .gitattributes +1 -0
  2. questions.json +0 -0
  3. static/hamza.jpeg +3 -0
  4. templates/book.html +876 -0
  5. templates/index.html +276 -0
  6. templates/quiz.html +862 -0
.gitattributes CHANGED
@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
 
 
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
36
+ static/hamza.jpeg filter=lfs diff=lfs merge=lfs -text
questions.json ADDED
The diff for this file is too large to render. See raw diff
 
static/hamza.jpeg ADDED

Git LFS Details

  • SHA256: 80ed0c4fa74482cc7cdbb2bf23587b802877e818981c54e35f4cf2498ccf01ad
  • Pointer size: 131 Bytes
  • Size of remote file: 499 kB
templates/book.html ADDED
@@ -0,0 +1,876 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>TDM Case Questions</title>
7
+ <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');
9
+
10
+ :root {
11
+ --navy: #0a1628;
12
+ --blue-dark: #0d2137;
13
+ --blue-mid: #1a3a5c;
14
+ --blue: #1e5799;
15
+ --blue-light: #2980b9;
16
+ --blue-pale: #e8f4fd;
17
+ --blue-wash: #f0f7fc;
18
+ --steel: #34495e;
19
+ --text: #1a1a2e;
20
+ --text-mid: #4a5568;
21
+ --text-light: #718096;
22
+ --text-faint: #a0aec0;
23
+ --white: #ffffff;
24
+ --off-white: #f8fafc;
25
+ --border: #d2dce6;
26
+ --border-light: #e2e8f0;
27
+ --green-dark: #1a6b4a;
28
+ --green: #27ae60;
29
+ --green-bg: #eafaf1;
30
+ --red: #c0392b;
31
+ --red-bg: #fdf2f2;
32
+ }
33
+
34
+ * { margin: 0; padding: 0; box-sizing: border-box; }
35
+ @page { size: A4; margin: 0; }
36
+
37
+ body {
38
+ font-family: 'Inter', -apple-system, sans-serif;
39
+ background: #c5d0db;
40
+ color: var(--text);
41
+ line-height: 1.6;
42
+ -webkit-print-color-adjust: exact;
43
+ print-color-adjust: exact;
44
+ }
45
+
46
+ /* ============ COVER ============ */
47
+ .cover {
48
+ width: 210mm;
49
+ height: 297mm;
50
+ margin: 0 auto;
51
+ background: linear-gradient(160deg, var(--navy) 0%, var(--blue-dark) 40%, var(--blue-mid) 100%);
52
+ position: relative;
53
+ display: flex;
54
+ flex-direction: column;
55
+ align-items: center;
56
+ justify-content: center;
57
+ overflow: hidden;
58
+ page-break-after: always;
59
+ }
60
+
61
+ .cover-grid {
62
+ position: absolute;
63
+ top: 0; left: 0; width: 100%; height: 100%;
64
+ background-image:
65
+ linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
66
+ linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
67
+ background-size: 30px 30px;
68
+ }
69
+
70
+ .cover-accent-line {
71
+ position: absolute;
72
+ top: 0; left: 80px;
73
+ width: 3px; height: 100%;
74
+ background: linear-gradient(180deg, transparent, var(--blue-light), transparent);
75
+ opacity: 0.3;
76
+ }
77
+
78
+ .cover-accent-line2 {
79
+ position: absolute;
80
+ top: 0; left: 86px;
81
+ width: 1px; height: 100%;
82
+ background: linear-gradient(180deg, transparent, var(--blue-light), transparent);
83
+ opacity: 0.15;
84
+ }
85
+
86
+ .cover-top-bar {
87
+ position: absolute;
88
+ top: 40px; left: 40px; right: 40px;
89
+ display: flex;
90
+ justify-content: space-between;
91
+ align-items: center;
92
+ padding-bottom: 15px;
93
+ border-bottom: 1px solid rgba(255,255,255,0.08);
94
+ }
95
+
96
+ .cover-top-label {
97
+ font-size: 9px;
98
+ letter-spacing: 4px;
99
+ text-transform: uppercase;
100
+ color: rgba(255,255,255,0.3);
101
+ font-weight: 500;
102
+ }
103
+
104
+ .cover-content {
105
+ text-align: center;
106
+ position: relative;
107
+ z-index: 2;
108
+ padding: 40px 60px;
109
+ }
110
+
111
+ .cover-photo {
112
+ width: 130px;
113
+ height: 130px;
114
+ border-radius: 50%;
115
+ border: 3px solid rgba(41,128,185,0.5);
116
+ margin: 0 auto 35px;
117
+ overflow: hidden;
118
+ box-shadow: 0 0 40px rgba(41,128,185,0.2);
119
+ }
120
+
121
+ .cover-photo img {
122
+ width: 100%;
123
+ height: 100%;
124
+ object-fit: cover;
125
+ }
126
+
127
+ .cover-dept {
128
+ font-size: 10px;
129
+ letter-spacing: 5px;
130
+ text-transform: uppercase;
131
+ color: var(--blue-light);
132
+ font-weight: 600;
133
+ margin-bottom: 30px;
134
+ }
135
+
136
+ .cover-line {
137
+ width: 50px;
138
+ height: 2px;
139
+ background: var(--blue-light);
140
+ margin: 0 auto 30px;
141
+ }
142
+
143
+ .cover-title {
144
+ font-family: 'Source Serif 4', Georgia, serif;
145
+ font-size: 40px;
146
+ font-weight: 700;
147
+ color: var(--white);
148
+ line-height: 1.15;
149
+ margin-bottom: 12px;
150
+ }
151
+
152
+ .cover-subtitle {
153
+ font-size: 16px;
154
+ font-weight: 300;
155
+ color: rgba(255,255,255,0.5);
156
+ letter-spacing: 2px;
157
+ margin-bottom: 45px;
158
+ }
159
+
160
+ .cover-divider {
161
+ width: 180px;
162
+ height: 1px;
163
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
164
+ margin: 0 auto 40px;
165
+ }
166
+
167
+ .cover-author-label {
168
+ font-size: 9px;
169
+ letter-spacing: 4px;
170
+ text-transform: uppercase;
171
+ color: rgba(255,255,255,0.3);
172
+ margin-bottom: 10px;
173
+ }
174
+
175
+ .cover-author {
176
+ font-family: 'Source Serif 4', serif;
177
+ font-size: 24px;
178
+ font-weight: 600;
179
+ color: var(--white);
180
+ margin-bottom: 6px;
181
+ }
182
+
183
+ .cover-cred {
184
+ font-size: 12px;
185
+ color: rgba(255,255,255,0.4);
186
+ letter-spacing: 2px;
187
+ }
188
+
189
+ .cover-bottom {
190
+ position: absolute;
191
+ bottom: 40px;
192
+ left: 40px;
193
+ right: 40px;
194
+ display: flex;
195
+ justify-content: space-between;
196
+ align-items: center;
197
+ padding-top: 15px;
198
+ border-top: 1px solid rgba(255,255,255,0.08);
199
+ }
200
+
201
+ .cover-bottom-text {
202
+ font-size: 8px;
203
+ letter-spacing: 3px;
204
+ text-transform: uppercase;
205
+ color: rgba(255,255,255,0.25);
206
+ }
207
+
208
+ .cover-badge {
209
+ font-size: 8px;
210
+ letter-spacing: 3px;
211
+ text-transform: uppercase;
212
+ color: var(--blue-light);
213
+ border: 1px solid rgba(41,128,185,0.3);
214
+ padding: 5px 16px;
215
+ }
216
+
217
+ /* ============ NOTE PAGE ============ */
218
+ .note-page {
219
+ width: 210mm;
220
+ height: 297mm;
221
+ margin: 0 auto;
222
+ background: var(--white);
223
+ padding: 70px 65px;
224
+ position: relative;
225
+ page-break-after: always;
226
+ }
227
+
228
+ .note-header {
229
+ border-bottom: 2px solid var(--blue);
230
+ padding-bottom: 15px;
231
+ margin-bottom: 40px;
232
+ }
233
+
234
+ .note-header-label {
235
+ font-size: 9px;
236
+ letter-spacing: 4px;
237
+ text-transform: uppercase;
238
+ color: var(--blue);
239
+ font-weight: 600;
240
+ margin-bottom: 8px;
241
+ }
242
+
243
+ .note-header-title {
244
+ font-family: 'Source Serif 4', serif;
245
+ font-size: 28px;
246
+ font-weight: 700;
247
+ color: var(--navy);
248
+ }
249
+
250
+ .note-intro {
251
+ font-size: 14px;
252
+ line-height: 1.9;
253
+ color: var(--text-mid);
254
+ margin-bottom: 35px;
255
+ padding: 20px 24px;
256
+ background: var(--blue-wash);
257
+ border-left: 3px solid var(--blue);
258
+ }
259
+
260
+ .note-item {
261
+ display: flex;
262
+ align-items: flex-start;
263
+ gap: 16px;
264
+ padding: 16px 20px;
265
+ margin-bottom: 12px;
266
+ border: 1px solid var(--border-light);
267
+ background: var(--off-white);
268
+ }
269
+
270
+ .note-item-num {
271
+ width: 28px;
272
+ height: 28px;
273
+ background: var(--blue);
274
+ color: var(--white);
275
+ font-size: 12px;
276
+ font-weight: 700;
277
+ display: flex;
278
+ align-items: center;
279
+ justify-content: center;
280
+ flex-shrink: 0;
281
+ margin-top: 2px;
282
+ }
283
+
284
+ .note-item-text {
285
+ font-size: 13px;
286
+ line-height: 1.8;
287
+ color: var(--text);
288
+ }
289
+
290
+ .note-item-text strong {
291
+ color: var(--blue);
292
+ font-weight: 700;
293
+ }
294
+
295
+ .note-footer {
296
+ position: absolute;
297
+ bottom: 50px;
298
+ left: 65px;
299
+ right: 65px;
300
+ text-align: center;
301
+ padding-top: 20px;
302
+ border-top: 1px solid var(--border-light);
303
+ }
304
+
305
+ .note-footer p {
306
+ font-size: 10px;
307
+ color: var(--text-faint);
308
+ letter-spacing: 1px;
309
+ }
310
+
311
+ /* ============ BOOK PAGES ============ */
312
+ .book-page {
313
+ width: 210mm;
314
+ min-height: 297mm;
315
+ margin: 0 auto;
316
+ background: var(--white);
317
+ padding: 45px 55px 65px 55px;
318
+ position: relative;
319
+ page-break-after: always;
320
+ }
321
+
322
+ .pg-head {
323
+ display: flex;
324
+ justify-content: space-between;
325
+ align-items: center;
326
+ padding-bottom: 10px;
327
+ border-bottom: 2px solid var(--blue);
328
+ margin-bottom: 28px;
329
+ }
330
+
331
+ .pg-head-l {
332
+ font-size: 8px;
333
+ letter-spacing: 3px;
334
+ text-transform: uppercase;
335
+ color: var(--blue);
336
+ font-weight: 600;
337
+ }
338
+
339
+ .pg-head-r {
340
+ font-size: 10px;
341
+ color: var(--text-light);
342
+ font-weight: 500;
343
+ }
344
+
345
+ .pg-num {
346
+ position: absolute;
347
+ bottom: 30px;
348
+ left: 50%;
349
+ transform: translateX(-50%);
350
+ font-size: 11px;
351
+ color: var(--text-faint);
352
+ font-weight: 600;
353
+ }
354
+
355
+ /* Chapter */
356
+ .ch-head {
357
+ text-align: center;
358
+ margin-bottom: 35px;
359
+ padding: 20px 0;
360
+ border-bottom: 1px solid var(--border-light);
361
+ }
362
+
363
+ .ch-label {
364
+ font-size: 9px;
365
+ letter-spacing: 5px;
366
+ text-transform: uppercase;
367
+ color: var(--blue);
368
+ font-weight: 600;
369
+ margin-bottom: 8px;
370
+ }
371
+
372
+ .ch-title {
373
+ font-family: 'Source Serif 4', serif;
374
+ font-size: 24px;
375
+ font-weight: 700;
376
+ color: var(--navy);
377
+ }
378
+
379
+ /* ============ QUESTIONS ============ */
380
+ .qb {
381
+ margin-bottom: 28px;
382
+ padding-bottom: 24px;
383
+ border-bottom: 1px solid var(--border-light);
384
+ }
385
+
386
+ .qb:last-of-type {
387
+ border-bottom: none;
388
+ }
389
+
390
+ .qb-top {
391
+ display: flex;
392
+ align-items: flex-start;
393
+ gap: 14px;
394
+ margin-bottom: 6px;
395
+ }
396
+
397
+ .qb-num {
398
+ width: 36px;
399
+ height: 36px;
400
+ background: var(--blue);
401
+ color: var(--white);
402
+ font-size: 14px;
403
+ font-weight: 700;
404
+ display: flex;
405
+ align-items: center;
406
+ justify-content: center;
407
+ flex-shrink: 0;
408
+ }
409
+
410
+ .qb-title-area {
411
+ flex: 1;
412
+ padding-top: 2px;
413
+ }
414
+
415
+ .qb-cat {
416
+ font-size: 8px;
417
+ letter-spacing: 2px;
418
+ text-transform: uppercase;
419
+ color: var(--blue);
420
+ font-weight: 600;
421
+ margin-bottom: 2px;
422
+ }
423
+
424
+ .qb-multi {
425
+ font-size: 9px;
426
+ letter-spacing: 1px;
427
+ color: var(--red);
428
+ font-weight: 700;
429
+ padding: 3px 10px;
430
+ background: var(--red-bg);
431
+ border-left: 3px solid var(--red);
432
+ display: inline-block;
433
+ margin-bottom: 10px;
434
+ margin-left: 50px;
435
+ }
436
+
437
+ .qb-stem {
438
+ font-size: 13.5px;
439
+ line-height: 1.75;
440
+ color: var(--text);
441
+ margin-bottom: 12px;
442
+ margin-left: 50px;
443
+ font-weight: 500;
444
+ }
445
+
446
+ .qb-opts {
447
+ list-style: none;
448
+ margin-left: 50px;
449
+ }
450
+
451
+ .qb-opts li {
452
+ display: flex;
453
+ align-items: baseline;
454
+ padding: 4px 0;
455
+ font-size: 13px;
456
+ color: var(--text);
457
+ line-height: 1.65;
458
+ }
459
+
460
+ .qb-opts li .lt {
461
+ font-weight: 700;
462
+ color: var(--blue-mid);
463
+ min-width: 24px;
464
+ font-size: 12px;
465
+ }
466
+
467
+ .qb-opts li .ot {
468
+ flex: 1;
469
+ }
470
+
471
+ /* ============ ANSWER KEY PAGES ============ */
472
+ .ak-block {
473
+ margin-bottom: 24px;
474
+ padding-bottom: 20px;
475
+ border-bottom: 1px solid var(--border-light);
476
+ }
477
+
478
+ .ak-block:last-of-type {
479
+ border-bottom: none;
480
+ }
481
+
482
+ .ak-top {
483
+ display: flex;
484
+ align-items: center;
485
+ gap: 12px;
486
+ margin-bottom: 10px;
487
+ }
488
+
489
+ .ak-num {
490
+ width: 30px;
491
+ height: 30px;
492
+ background: var(--blue);
493
+ color: var(--white);
494
+ font-size: 12px;
495
+ font-weight: 700;
496
+ display: flex;
497
+ align-items: center;
498
+ justify-content: center;
499
+ flex-shrink: 0;
500
+ }
501
+
502
+ .ak-answer {
503
+ font-size: 14px;
504
+ font-weight: 700;
505
+ color: var(--green-dark);
506
+ }
507
+
508
+ .ak-answer span {
509
+ display: inline-block;
510
+ background: var(--green-bg);
511
+ border: 1px solid var(--green);
512
+ padding: 2px 10px;
513
+ margin-left: 4px;
514
+ font-size: 13px;
515
+ }
516
+
517
+ .ak-reason {
518
+ font-size: 12.5px;
519
+ line-height: 1.8;
520
+ color: var(--text-mid);
521
+ margin-left: 42px;
522
+ padding: 10px 16px;
523
+ background: var(--blue-wash);
524
+ border-left: 3px solid var(--blue);
525
+ }
526
+
527
+ /* ============ BACK PAGE ============ */
528
+ .back-page {
529
+ width: 210mm;
530
+ height: 297mm;
531
+ margin: 0 auto;
532
+ background: linear-gradient(160deg, var(--navy) 0%, var(--blue-dark) 40%, var(--blue-mid) 100%);
533
+ position: relative;
534
+ display: flex;
535
+ flex-direction: column;
536
+ align-items: center;
537
+ justify-content: center;
538
+ overflow: hidden;
539
+ }
540
+
541
+ .back-page .cover-grid,
542
+ .back-page .cover-accent-line,
543
+ .back-page .cover-accent-line2 {
544
+ position: absolute;
545
+ }
546
+
547
+ .back-content {
548
+ text-align: center;
549
+ position: relative;
550
+ z-index: 2;
551
+ padding: 60px 50px;
552
+ max-width: 500px;
553
+ }
554
+
555
+ .back-line {
556
+ width: 50px;
557
+ height: 2px;
558
+ background: var(--blue-light);
559
+ margin: 0 auto 30px;
560
+ }
561
+
562
+ .back-msg {
563
+ font-size: 14px;
564
+ color: rgba(255,255,255,0.5);
565
+ line-height: 1.9;
566
+ margin-bottom: 35px;
567
+ }
568
+
569
+ .back-author {
570
+ font-family: 'Source Serif 4', serif;
571
+ font-size: 22px;
572
+ font-weight: 600;
573
+ color: var(--white);
574
+ margin-bottom: 6px;
575
+ }
576
+
577
+ .back-info {
578
+ font-size: 11px;
579
+ color: rgba(255,255,255,0.35);
580
+ letter-spacing: 2px;
581
+ line-height: 2;
582
+ }
583
+
584
+ .back-badge {
585
+ margin-top: 40px;
586
+ display: inline-block;
587
+ padding: 6px 20px;
588
+ border: 1px solid rgba(41,128,185,0.3);
589
+ font-size: 9px;
590
+ letter-spacing: 3px;
591
+ text-transform: uppercase;
592
+ color: var(--blue-light);
593
+ }
594
+
595
+ .back-disc {
596
+ margin-top: 50px;
597
+ padding-top: 20px;
598
+ border-top: 1px solid rgba(255,255,255,0.08);
599
+ }
600
+
601
+ .back-disc p {
602
+ font-size: 8px;
603
+ color: rgba(255,255,255,0.2);
604
+ letter-spacing: 2px;
605
+ line-height: 2;
606
+ }
607
+
608
+ /* ============ PDF BUTTON ============ */
609
+ .pdf-btn {
610
+ position: fixed;
611
+ bottom: 30px;
612
+ right: 30px;
613
+ padding: 14px 28px;
614
+ background: var(--blue);
615
+ color: #fff;
616
+ border: none;
617
+ border-radius: 4px;
618
+ cursor: pointer;
619
+ font-family: 'Inter', sans-serif;
620
+ font-size: 13px;
621
+ font-weight: 600;
622
+ letter-spacing: 1px;
623
+ box-shadow: 0 4px 20px rgba(30,87,153,0.4);
624
+ z-index: 1000;
625
+ text-decoration: none;
626
+ display: inline-flex;
627
+ align-items: center;
628
+ gap: 10px;
629
+ }
630
+
631
+ .pdf-btn:hover { background: var(--blue-light); }
632
+
633
+ @media print {
634
+ .pdf-btn { display: none !important; }
635
+ body { background: white; }
636
+ }
637
+ </style>
638
+ </head>
639
+ <body>
640
+
641
+ <!-- ============ COVER ============ -->
642
+ <div class="cover">
643
+ <div class="cover-grid"></div>
644
+ <div class="cover-accent-line"></div>
645
+ <div class="cover-accent-line2"></div>
646
+
647
+ <div class="cover-top-bar">
648
+ <span class="cover-top-label">Clinical Pharmacy</span>
649
+ <span class="cover-top-label">Therapeutic Review</span>
650
+ </div>
651
+
652
+ <div class="cover-content">
653
+ <div class="cover-photo">
654
+ <img src="{{ url_for('static', filename='hamza.jpeg') }}" alt="Dr Hamza Abu Nawara">
655
+ </div>
656
+
657
+ <div class="cover-dept">Department of Clinical Pharmacy</div>
658
+ <div class="cover-line"></div>
659
+
660
+ <h1 class="cover-title">Therapeutic<br>Decision-Making</h1>
661
+ <p class="cover-subtitle">TDM Style Case Questions</p>
662
+
663
+ <div class="cover-divider"></div>
664
+
665
+ <p class="cover-author-label">Collected and Prepared By</p>
666
+ <h2 class="cover-author">Dr Hamza Abu Nawara</h2>
667
+ <p class="cover-cred">Clinical Pharmacy Practice</p>
668
+ </div>
669
+
670
+ <div class="cover-bottom">
671
+ <span class="cover-bottom-text">For Educational Purposes Only</span>
672
+ <span class="cover-badge">First Edition 2025</span>
673
+ <span class="cover-bottom-text">300+ Clinical Cases</span>
674
+ </div>
675
+ </div>
676
+
677
+ <!-- ============ NOTE PAGE ============ -->
678
+ <div class="note-page">
679
+ <div class="note-header">
680
+ <div class="note-header-label">Important Notice</div>
681
+ <div class="note-header-title">Before You Begin</div>
682
+ </div>
683
+
684
+ <div class="note-intro">
685
+ These more than 300 cases are based on prior clinical notes and previous exam scenarios.
686
+ In current MCQ formats, some questions may have more than one correct answer and may
687
+ require selecting multiple options. All appropriate answers should be chosen based on
688
+ the clinical context.
689
+ </div>
690
+
691
+ <div class="note-item">
692
+ <div class="note-item-num">1</div>
693
+ <div class="note-item-text">
694
+ Each question presents a <strong>clinical scenario</strong> followed by multiple
695
+ options. Read the stem carefully before selecting your answer.
696
+ </div>
697
+ </div>
698
+
699
+ <div class="note-item">
700
+ <div class="note-item-num">2</div>
701
+ <div class="note-item-text">
702
+ <strong>Some questions require selecting more than one answer.</strong>
703
+ These are clearly indicated with a red notice specifying the number
704
+ of correct answers to select.
705
+ </div>
706
+ </div>
707
+
708
+ <div class="note-item">
709
+ <div class="note-item-num">3</div>
710
+ <div class="note-item-text">
711
+ Questions are presented <strong>without answers</strong> in the main section.
712
+ All correct answers with detailed clinical reasoning are provided in the
713
+ <strong>Answer Key</strong> section at the end of the book.
714
+ </div>
715
+ </div>
716
+
717
+ <div class="note-item">
718
+ <div class="note-item-num">4</div>
719
+ <div class="note-item-text">
720
+ This collection covers multiple therapeutic areas including neurology,
721
+ cardiology, pulmonology, dermatology, anticoagulation, and more.
722
+ </div>
723
+ </div>
724
+
725
+ <div class="note-item">
726
+ <div class="note-item-num">5</div>
727
+ <div class="note-item-text">
728
+ Always verify clinical decisions with <strong>current guidelines</strong>
729
+ and evidence-based references. This material is intended for educational
730
+ purposes and exam preparation only.
731
+ </div>
732
+ </div>
733
+
734
+ <div class="note-footer">
735
+ <p>Total Questions: {{ questions | length }} | Collected by Dr Hamza Abu Nawara | Clinical Pharmacy Practice</p>
736
+ </div>
737
+ </div>
738
+
739
+ <!-- ============ QUESTION PAGES ============ -->
740
+ {% set ns = namespace(page_count=2) %}
741
+ {% set per_page = 3 %}
742
+ {% set total_pages = ((questions | length) / per_page) | round(0, 'ceil') | int %}
743
+
744
+ {% for p in range(total_pages) %}
745
+ <div class="book-page">
746
+ <div class="pg-head">
747
+ <span class="pg-head-l">TDM Case Questions</span>
748
+ <span class="pg-head-r">Dr Hamza Abu Nawara</span>
749
+ </div>
750
+
751
+ {% if p == 0 %}
752
+ <div class="ch-head">
753
+ <div class="ch-label">Section One</div>
754
+ <h2 class="ch-title">Clinical Case Questions</h2>
755
+ </div>
756
+ {% endif %}
757
+
758
+ {% set start = p * per_page %}
759
+ {% set end = start + per_page %}
760
+
761
+ {% for q in questions[start:end] %}
762
+ <div class="qb">
763
+ <div class="qb-top">
764
+ <div class="qb-num">{{ q.question_number }}</div>
765
+ <div class="qb-title-area">
766
+ <p class="qb-stem">{{ q.question }}</p>
767
+ </div>
768
+ </div>
769
+
770
+ {% if q.answer | length > 1 %}
771
+ <div class="qb-multi">SELECT {{ q.answer | length }} CORRECT ANSWERS</div>
772
+ {% endif %}
773
+
774
+ <ul class="qb-opts">
775
+ {% for opt in q.choices %}
776
+ <li>
777
+ <span class="lt">{{ opt.letter }}.</span>
778
+ <span class="ot">{{ opt.text }}</span>
779
+ </li>
780
+ {% endfor %}
781
+ </ul>
782
+ </div>
783
+ {% endfor %}
784
+
785
+ {% set ns.page_count = ns.page_count + 1 %}
786
+ <div class="pg-num">{{ ns.page_count }}</div>
787
+ </div>
788
+ {% endfor %}
789
+
790
+ <!-- ============ ANSWER KEY PAGES ============ -->
791
+ {% set ak_per_page = 3 %}
792
+ {% set ak_total = ((questions | length) / ak_per_page) | round(0, 'ceil') | int %}
793
+
794
+ {% for p in range(ak_total) %}
795
+ <div class="book-page">
796
+ <div class="pg-head">
797
+ <span class="pg-head-l">Answer Key</span>
798
+ <span class="pg-head-r">Dr Hamza Abu Nawara</span>
799
+ </div>
800
+
801
+ {% if p == 0 %}
802
+ <div class="ch-head">
803
+ <div class="ch-label">Section Two</div>
804
+ <h2 class="ch-title">Answers and Clinical Reasoning</h2>
805
+ </div>
806
+ {% endif %}
807
+
808
+ {% set start = p * ak_per_page %}
809
+ {% set end = start + ak_per_page %}
810
+
811
+ {% for q in questions[start:end] %}
812
+ <div class="ak-block">
813
+ <div class="ak-top">
814
+ <div class="ak-num">{{ q.question_number }}</div>
815
+ <div class="ak-answer">
816
+ Answer{{ 's' if q.answer | length > 1 else '' }}:
817
+ {% for a in q.answer %}
818
+ <span>{{ a }}</span>
819
+ {% endfor %}
820
+ </div>
821
+ </div>
822
+ <div class="ak-reason">{{ q.reason }}</div>
823
+ </div>
824
+ {% endfor %}
825
+
826
+ {% set ns.page_count = ns.page_count + 1 %}
827
+ <div class="pg-num">{{ ns.page_count }}</div>
828
+ </div>
829
+ {% endfor %}
830
+
831
+ <!-- ============ BACK PAGE ============ -->
832
+ <div class="back-page">
833
+ <div class="cover-grid"></div>
834
+ <div class="cover-accent-line"></div>
835
+ <div class="cover-accent-line2"></div>
836
+
837
+ <div class="back-content">
838
+ <div class="back-line"></div>
839
+
840
+ <p class="back-msg">
841
+ These case-based questions are designed to strengthen your
842
+ clinical reasoning and therapeutic decision-making skills.
843
+ Continue reviewing, practicing, and always verify with
844
+ current clinical guidelines and evidence-based resources.
845
+ </p>
846
+
847
+ <div class="back-line"></div>
848
+
849
+ <h3 class="back-author">Dr Hamza Abu Nawara</h3>
850
+ <div class="back-info">
851
+ Clinical Pharmacy Practice<br>
852
+ Therapeutic Decision-Making Collection
853
+ </div>
854
+
855
+ <div class="back-badge">First Edition 2025</div>
856
+
857
+ <div class="back-disc">
858
+ <p>
859
+ FOR EDUCATIONAL PURPOSES ONLY<br>
860
+ ALWAYS CONSULT CURRENT CLINICAL GUIDELINES<br>
861
+ 300+ CLINICAL CASE-BASED QUESTIONS
862
+ </p>
863
+ </div>
864
+ </div>
865
+ </div>
866
+
867
+ <!-- ============ PDF BUTTON ============ -->
868
+ <a href="/pdf" class="pdf-btn">
869
+ <svg viewBox="0 0 24 24" width="18" height="18" fill="white">
870
+ <path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/>
871
+ </svg>
872
+ Download PDF
873
+ </a>
874
+
875
+ </body>
876
+ </html>
templates/index.html ADDED
@@ -0,0 +1,276 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!-- templates/index.html -->
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>TDM Quiz - Dr Hamza Abu Nawara</title>
8
+ <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
10
+
11
+ :root {
12
+ --navy: #0a1628;
13
+ --blue-dark: #0d2137;
14
+ --blue-mid: #1a3a5c;
15
+ --blue: #1e5799;
16
+ --blue-light: #2980b9;
17
+ --blue-pale: #e8f4fd;
18
+ --blue-wash: #f0f7fc;
19
+ --text: #1a1a2e;
20
+ --text-mid: #4a5568;
21
+ --text-light: #718096;
22
+ --text-faint: #a0aec0;
23
+ --white: #ffffff;
24
+ --off-white: #f8fafc;
25
+ --border: #d2dce6;
26
+ --border-light: #e2e8f0;
27
+ }
28
+
29
+ * { margin: 0; padding: 0; box-sizing: border-box; }
30
+
31
+ body {
32
+ font-family: 'Inter', -apple-system, sans-serif;
33
+ background: linear-gradient(160deg, var(--navy) 0%, var(--blue-dark) 40%, var(--blue-mid) 100%);
34
+ min-height: 100vh;
35
+ display: flex;
36
+ align-items: center;
37
+ justify-content: center;
38
+ color: var(--text);
39
+ position: relative;
40
+ overflow-x: hidden;
41
+ }
42
+
43
+ .bg-grid {
44
+ position: fixed;
45
+ top: 0; left: 0; width: 100%; height: 100%;
46
+ background-image:
47
+ linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
48
+ linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
49
+ background-size: 30px 30px;
50
+ pointer-events: none;
51
+ }
52
+
53
+ .card {
54
+ background: var(--white);
55
+ width: 480px;
56
+ max-width: 94vw;
57
+ position: relative;
58
+ z-index: 2;
59
+ box-shadow: 0 25px 80px rgba(0,0,0,0.3);
60
+ border-radius: 8px;
61
+ overflow: hidden;
62
+ }
63
+
64
+ .card-header {
65
+ background: linear-gradient(135deg, var(--navy), var(--blue-mid));
66
+ padding: 35px 35px 30px;
67
+ text-align: center;
68
+ }
69
+
70
+ .card-photo {
71
+ width: 80px;
72
+ height: 80px;
73
+ border-radius: 50%;
74
+ border: 3px solid rgba(41,128,185,0.5);
75
+ margin: 0 auto 16px;
76
+ overflow: hidden;
77
+ box-shadow: 0 0 30px rgba(41,128,185,0.2);
78
+ }
79
+
80
+ .card-photo img { width: 100%; height: 100%; object-fit: cover; }
81
+
82
+ .card-dept {
83
+ font-size: 9px;
84
+ letter-spacing: 4px;
85
+ text-transform: uppercase;
86
+ color: var(--blue-light);
87
+ font-weight: 600;
88
+ margin-bottom: 12px;
89
+ }
90
+
91
+ .card-line {
92
+ width: 40px; height: 2px;
93
+ background: var(--blue-light);
94
+ margin: 0 auto 12px;
95
+ }
96
+
97
+ .card-title {
98
+ font-family: 'Source Serif 4', serif;
99
+ font-size: 24px;
100
+ font-weight: 700;
101
+ color: var(--white);
102
+ margin-bottom: 4px;
103
+ }
104
+
105
+ .card-subtitle {
106
+ font-size: 12px;
107
+ color: rgba(255,255,255,0.4);
108
+ letter-spacing: 1px;
109
+ }
110
+
111
+ .card-body { padding: 28px 35px 35px; }
112
+
113
+ .card-notice {
114
+ font-size: 11px;
115
+ line-height: 1.8;
116
+ color: var(--text-mid);
117
+ padding: 12px 16px;
118
+ background: var(--blue-wash);
119
+ border-left: 3px solid var(--blue);
120
+ margin-bottom: 24px;
121
+ }
122
+
123
+ .card-notice strong { color: var(--blue); }
124
+
125
+ .total-badge {
126
+ display: inline-block;
127
+ padding: 4px 14px;
128
+ background: var(--blue-pale);
129
+ color: var(--blue);
130
+ font-size: 11px;
131
+ font-weight: 700;
132
+ margin-bottom: 20px;
133
+ }
134
+
135
+ .field-label {
136
+ font-size: 10px;
137
+ letter-spacing: 2px;
138
+ text-transform: uppercase;
139
+ color: var(--text-light);
140
+ font-weight: 600;
141
+ margin-bottom: 12px;
142
+ }
143
+
144
+ .options-grid {
145
+ display: grid;
146
+ grid-template-columns: 1fr 1fr;
147
+ gap: 8px;
148
+ margin-bottom: 24px;
149
+ }
150
+
151
+ .opt-radio { display: none; }
152
+
153
+ .opt-label {
154
+ display: flex;
155
+ align-items: center;
156
+ justify-content: center;
157
+ padding: 12px 10px;
158
+ border: 2px solid var(--border);
159
+ cursor: pointer;
160
+ font-size: 14px;
161
+ font-weight: 600;
162
+ color: var(--text-mid);
163
+ transition: all 0.2s ease;
164
+ text-align: center;
165
+ border-radius: 4px;
166
+ }
167
+
168
+ .opt-label:hover {
169
+ border-color: var(--blue);
170
+ color: var(--blue);
171
+ background: var(--blue-pale);
172
+ }
173
+
174
+ .opt-radio:checked + .opt-label {
175
+ border-color: var(--blue);
176
+ background: var(--blue);
177
+ color: var(--white);
178
+ }
179
+
180
+ .opt-label .num {
181
+ font-size: 18px;
182
+ font-weight: 800;
183
+ margin-right: 6px;
184
+ }
185
+
186
+ .opt-label .txt {
187
+ font-size: 12px;
188
+ font-weight: 500;
189
+ }
190
+
191
+ .start-btn {
192
+ width: 100%;
193
+ padding: 14px;
194
+ background: var(--blue);
195
+ color: var(--white);
196
+ border: none;
197
+ cursor: pointer;
198
+ font-family: 'Inter', sans-serif;
199
+ font-size: 13px;
200
+ font-weight: 700;
201
+ letter-spacing: 2px;
202
+ text-transform: uppercase;
203
+ transition: all 0.2s ease;
204
+ border-radius: 4px;
205
+ }
206
+
207
+ .start-btn:hover { background: var(--blue-light); }
208
+
209
+ .card-footer {
210
+ padding: 12px 35px;
211
+ border-top: 1px solid var(--border-light);
212
+ text-align: center;
213
+ }
214
+
215
+ .card-footer p {
216
+ font-size: 9px;
217
+ color: var(--text-faint);
218
+ letter-spacing: 1px;
219
+ }
220
+
221
+ @media (max-width: 520px) {
222
+ .card-header { padding: 28px 24px 24px; }
223
+ .card-body { padding: 24px 24px 28px; }
224
+ .card-title { font-size: 20px; }
225
+ }
226
+ </style>
227
+ </head>
228
+ <body>
229
+ <div class="bg-grid"></div>
230
+
231
+ <div class="card">
232
+ <div class="card-header">
233
+ <div class="card-photo">
234
+ <img src="{{ url_for('static', filename='hamza.jpeg') }}" alt="Dr Hamza Abu Nawara">
235
+ </div>
236
+ <div class="card-dept">Department of Clinical Pharmacy</div>
237
+ <div class="card-line"></div>
238
+ <h1 class="card-title">TDM Quiz</h1>
239
+ <p class="card-subtitle">Therapeutic Decision-Making</p>
240
+ </div>
241
+
242
+ <div class="card-body">
243
+ <div class="card-notice">
244
+ These more than 300 cases are based on prior clinical notes and previous
245
+ exam scenarios. Some questions may have <strong>more than one correct answer</strong>
246
+ and may require selecting multiple options.
247
+ </div>
248
+
249
+ <div class="total-badge">{{ total }} Questions Available</div>
250
+
251
+ <form action="/quiz" method="POST">
252
+ <div class="field-label">Select Number of Questions</div>
253
+ <div class="options-grid">
254
+ <input type="radio" name="count" value="30" id="c30" class="opt-radio" checked>
255
+ <label for="c30" class="opt-label"><span class="num">30</span><span class="txt">Questions</span></label>
256
+
257
+ <input type="radio" name="count" value="50" id="c50" class="opt-radio">
258
+ <label for="c50" class="opt-label"><span class="num">50</span><span class="txt">Questions</span></label>
259
+
260
+ <input type="radio" name="count" value="100" id="c100" class="opt-radio">
261
+ <label for="c100" class="opt-label"><span class="num">100</span><span class="txt">Questions</span></label>
262
+
263
+ <input type="radio" name="count" value="150" id="c150" class="opt-radio">
264
+ <label for="c150" class="opt-label"><span class="num">150</span><span class="txt">Questions</span></label>
265
+ </div>
266
+
267
+ <button type="submit" class="start-btn">Start Quiz</button>
268
+ </form>
269
+ </div>
270
+
271
+ <div class="card-footer">
272
+ <p>Collected by Dr Hamza Abu Nawara | For Educational Purposes Only</p>
273
+ </div>
274
+ </div>
275
+ </body>
276
+ </html>
templates/quiz.html ADDED
@@ -0,0 +1,862 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!-- templates/quiz.html -->
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>TDM Quiz - In Progress</title>
8
+ <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
10
+
11
+ :root {
12
+ --navy: #0a1628;
13
+ --blue-dark: #0d2137;
14
+ --blue-mid: #1a3a5c;
15
+ --blue: #1e5799;
16
+ --blue-light: #2980b9;
17
+ --blue-pale: #e8f4fd;
18
+ --blue-wash: #f0f7fc;
19
+ --text: #1a1a2e;
20
+ --text-mid: #4a5568;
21
+ --text-light: #718096;
22
+ --text-faint: #a0aec0;
23
+ --white: #ffffff;
24
+ --off-white: #f8fafc;
25
+ --border: #d2dce6;
26
+ --border-light: #e2e8f0;
27
+ --green: #27ae60;
28
+ --green-dark: #1a6b4a;
29
+ --green-bg: #eafaf1;
30
+ --green-border: #a9dfbf;
31
+ --red: #c0392b;
32
+ --red-dark: #922b21;
33
+ --red-bg: #fdf2f2;
34
+ --red-border: #f5b7b1;
35
+ --yellow-bg: #fef9e7;
36
+ --yellow-text: #7d6608;
37
+ --yellow-border: #f9e79f;
38
+ }
39
+
40
+ * { margin: 0; padding: 0; box-sizing: border-box; }
41
+
42
+ body {
43
+ font-family: 'Inter', -apple-system, sans-serif;
44
+ background: var(--off-white);
45
+ color: var(--text);
46
+ line-height: 1.6;
47
+ min-height: 100vh;
48
+ }
49
+
50
+ /* ===== TOP BAR ===== */
51
+ .top-bar {
52
+ background: linear-gradient(135deg, var(--navy), var(--blue-mid));
53
+ padding: 0 20px;
54
+ height: 56px;
55
+ display: flex;
56
+ align-items: center;
57
+ justify-content: space-between;
58
+ position: sticky;
59
+ top: 0;
60
+ z-index: 100;
61
+ box-shadow: 0 2px 20px rgba(0,0,0,0.15);
62
+ }
63
+
64
+ .top-bar-left {
65
+ display: flex;
66
+ align-items: center;
67
+ gap: 10px;
68
+ }
69
+
70
+ .top-bar-photo {
71
+ width: 32px; height: 32px;
72
+ border-radius: 50%;
73
+ border: 2px solid rgba(41,128,185,0.5);
74
+ overflow: hidden;
75
+ flex-shrink: 0;
76
+ }
77
+
78
+ .top-bar-photo img { width: 100%; height: 100%; object-fit: cover; }
79
+
80
+ .top-bar-info { line-height: 1.3; }
81
+
82
+ .top-bar-title {
83
+ font-size: 13px;
84
+ font-weight: 700;
85
+ color: var(--white);
86
+ }
87
+
88
+ .top-bar-sub {
89
+ font-size: 9px;
90
+ color: rgba(255,255,255,0.4);
91
+ }
92
+
93
+ .top-bar-center {
94
+ display: flex;
95
+ align-items: center;
96
+ gap: 12px;
97
+ }
98
+
99
+ .progress-wrap {
100
+ width: 120px;
101
+ height: 4px;
102
+ background: rgba(255,255,255,0.1);
103
+ border-radius: 2px;
104
+ overflow: hidden;
105
+ }
106
+
107
+ .progress-fill {
108
+ height: 100%;
109
+ background: var(--blue-light);
110
+ border-radius: 2px;
111
+ transition: width 0.4s ease;
112
+ width: 0%;
113
+ }
114
+
115
+ .progress-label {
116
+ font-size: 11px;
117
+ font-weight: 700;
118
+ color: var(--white);
119
+ white-space: nowrap;
120
+ }
121
+
122
+ .top-bar-right a {
123
+ font-size: 10px;
124
+ color: rgba(255,255,255,0.4);
125
+ text-decoration: none;
126
+ padding: 6px 12px;
127
+ border: 1px solid rgba(255,255,255,0.15);
128
+ border-radius: 3px;
129
+ transition: all 0.2s;
130
+ }
131
+
132
+ .top-bar-right a:hover {
133
+ color: var(--white);
134
+ border-color: rgba(255,255,255,0.4);
135
+ }
136
+
137
+ /* ===== MAIN ===== */
138
+ .main {
139
+ max-width: 700px;
140
+ margin: 0 auto;
141
+ padding: 20px 16px 40px;
142
+ }
143
+
144
+ /* ===== QUESTION CARD ===== */
145
+ .q-card {
146
+ background: var(--white);
147
+ margin-bottom: 20px;
148
+ border: 1px solid var(--border-light);
149
+ border-radius: 6px;
150
+ box-shadow: 0 1px 8px rgba(0,0,0,0.04);
151
+ position: relative;
152
+ overflow: hidden;
153
+ }
154
+
155
+ .q-card-top {
156
+ background: var(--blue-wash);
157
+ padding: 16px 20px;
158
+ display: flex;
159
+ align-items: flex-start;
160
+ gap: 14px;
161
+ border-bottom: 1px solid var(--border-light);
162
+ }
163
+
164
+ .q-num {
165
+ width: 34px;
166
+ height: 34px;
167
+ background: var(--blue);
168
+ color: var(--white);
169
+ font-size: 13px;
170
+ font-weight: 700;
171
+ display: flex;
172
+ align-items: center;
173
+ justify-content: center;
174
+ border-radius: 4px;
175
+ flex-shrink: 0;
176
+ }
177
+
178
+ .q-stem {
179
+ flex: 1;
180
+ font-size: 13px;
181
+ line-height: 1.7;
182
+ color: var(--text);
183
+ font-weight: 500;
184
+ padding-top: 4px;
185
+ }
186
+
187
+ .q-badge {
188
+ display: none;
189
+ font-size: 9px;
190
+ letter-spacing: 1px;
191
+ text-transform: uppercase;
192
+ font-weight: 700;
193
+ padding: 3px 10px;
194
+ border-radius: 3px;
195
+ flex-shrink: 0;
196
+ margin-top: 4px;
197
+ }
198
+
199
+ .q-badge.show { display: block; }
200
+ .q-badge.correct { background: var(--green-bg); color: var(--green-dark); border: 1px solid var(--green-border); }
201
+ .q-badge.wrong { background: var(--red-bg); color: var(--red-dark); border: 1px solid var(--red-border); }
202
+ .q-badge.partial { background: var(--yellow-bg); color: var(--yellow-text); border: 1px solid var(--yellow-border); }
203
+
204
+ .q-multi-tag {
205
+ margin: 10px 20px 0;
206
+ font-size: 9px;
207
+ letter-spacing: 1px;
208
+ color: var(--red);
209
+ font-weight: 700;
210
+ padding: 3px 10px;
211
+ background: var(--red-bg);
212
+ border-left: 3px solid var(--red);
213
+ display: inline-block;
214
+ }
215
+
216
+ .q-body {
217
+ padding: 14px 20px 18px;
218
+ }
219
+
220
+ /* Options */
221
+ .q-opts {
222
+ list-style: none;
223
+ }
224
+
225
+ .q-opt {
226
+ display: flex;
227
+ align-items: center;
228
+ padding: 10px 12px;
229
+ margin-bottom: 5px;
230
+ border: 2px solid var(--border);
231
+ border-radius: 4px;
232
+ cursor: pointer;
233
+ transition: all 0.15s ease;
234
+ position: relative;
235
+ }
236
+
237
+ .q-opt:hover:not(.locked) {
238
+ border-color: var(--blue);
239
+ background: var(--blue-pale);
240
+ }
241
+
242
+ .q-opt.selected {
243
+ border-color: var(--blue);
244
+ background: var(--blue-pale);
245
+ }
246
+
247
+ .q-opt.selected .lt { color: var(--blue); }
248
+
249
+ .q-opt.locked { cursor: default; }
250
+
251
+ .q-opt .lt {
252
+ font-weight: 700;
253
+ color: var(--blue-mid);
254
+ min-width: 24px;
255
+ font-size: 12px;
256
+ }
257
+
258
+ .q-opt .ot {
259
+ flex: 1;
260
+ font-size: 12.5px;
261
+ color: var(--text);
262
+ line-height: 1.55;
263
+ }
264
+
265
+ .q-opt .st {
266
+ width: 20px;
267
+ height: 20px;
268
+ display: none;
269
+ align-items: center;
270
+ justify-content: center;
271
+ flex-shrink: 0;
272
+ margin-left: 8px;
273
+ font-weight: 800;
274
+ font-size: 11px;
275
+ border-radius: 50%;
276
+ }
277
+
278
+ /* States */
279
+ .q-opt.is-correct {
280
+ border-color: var(--green);
281
+ background: var(--green-bg);
282
+ }
283
+ .q-opt.is-correct .lt { color: var(--green-dark); }
284
+ .q-opt.is-correct .ot { color: var(--green-dark); font-weight: 600; }
285
+ .q-opt.is-correct .st {
286
+ display: flex;
287
+ background: var(--green);
288
+ color: var(--white);
289
+ }
290
+
291
+ .q-opt.is-wrong {
292
+ border-color: var(--red);
293
+ background: var(--red-bg);
294
+ }
295
+ .q-opt.is-wrong .lt { color: var(--red-dark); }
296
+ .q-opt.is-wrong .ot { color: var(--red-dark); }
297
+ .q-opt.is-wrong .st {
298
+ display: flex;
299
+ background: var(--red);
300
+ color: var(--white);
301
+ }
302
+
303
+ .q-opt.is-missed {
304
+ border-color: var(--green-border);
305
+ background: var(--green-bg);
306
+ }
307
+ .q-opt.is-missed .lt { color: var(--green-dark); }
308
+ .q-opt.is-missed .ot { color: var(--green-dark); }
309
+ .q-opt.is-missed .st {
310
+ display: flex;
311
+ background: var(--green);
312
+ color: var(--white);
313
+ }
314
+
315
+ /* Confirm button */
316
+ .q-confirm {
317
+ margin-top: 12px;
318
+ padding: 10px 28px;
319
+ background: var(--blue);
320
+ color: var(--white);
321
+ border: none;
322
+ border-radius: 4px;
323
+ cursor: pointer;
324
+ font-family: 'Inter', sans-serif;
325
+ font-size: 12px;
326
+ font-weight: 700;
327
+ letter-spacing: 1px;
328
+ text-transform: uppercase;
329
+ transition: all 0.15s ease;
330
+ }
331
+
332
+ .q-confirm:hover { background: var(--blue-light); }
333
+ .q-confirm:disabled { background: var(--border); cursor: not-allowed; }
334
+ .q-confirm.hide { display: none; }
335
+
336
+ /* Reason box */
337
+ .q-reason {
338
+ display: none;
339
+ margin-top: 14px;
340
+ padding: 14px 16px;
341
+ border-radius: 4px;
342
+ background: var(--blue-wash);
343
+ border-left: 3px solid var(--blue);
344
+ }
345
+
346
+ .q-reason.show { display: block; }
347
+
348
+ .q-reason-title {
349
+ font-size: 9px;
350
+ letter-spacing: 2px;
351
+ text-transform: uppercase;
352
+ color: var(--blue);
353
+ font-weight: 700;
354
+ margin-bottom: 8px;
355
+ }
356
+
357
+ .q-reason-text {
358
+ font-size: 12px;
359
+ line-height: 1.85;
360
+ color: var(--text-mid);
361
+ }
362
+
363
+ .q-reason-text strong {
364
+ color: var(--blue);
365
+ font-weight: 700;
366
+ }
367
+
368
+ .q-reason-text .highlight-correct {
369
+ color: var(--green-dark);
370
+ font-weight: 700;
371
+ }
372
+
373
+ .q-reason-text .highlight-wrong {
374
+ color: var(--red-dark);
375
+ font-weight: 700;
376
+ }
377
+
378
+ /* ===== FINISH ===== */
379
+ .finish-area {
380
+ text-align: center;
381
+ padding: 30px 0 50px;
382
+ }
383
+
384
+ .finish-btn {
385
+ display: none;
386
+ padding: 14px 44px;
387
+ background: var(--blue);
388
+ color: var(--white);
389
+ border: none;
390
+ border-radius: 4px;
391
+ cursor: pointer;
392
+ font-family: 'Inter', sans-serif;
393
+ font-size: 13px;
394
+ font-weight: 700;
395
+ letter-spacing: 2px;
396
+ text-transform: uppercase;
397
+ transition: all 0.2s ease;
398
+ }
399
+
400
+ .finish-btn:hover { background: var(--blue-light); }
401
+ .finish-btn.show { display: inline-block; }
402
+
403
+ .finish-note {
404
+ display: none;
405
+ margin-top: 10px;
406
+ font-size: 11px;
407
+ color: var(--text-light);
408
+ }
409
+ .finish-note.show { display: block; }
410
+
411
+ /* ===== RESULT OVERLAY ===== */
412
+ .overlay {
413
+ display: none;
414
+ position: fixed;
415
+ top: 0; left: 0; right: 0; bottom: 0;
416
+ background: rgba(10,22,40,0.92);
417
+ z-index: 200;
418
+ align-items: center;
419
+ justify-content: center;
420
+ padding: 20px;
421
+ }
422
+
423
+ .overlay.show { display: flex; }
424
+
425
+ .result-card {
426
+ background: var(--white);
427
+ width: 420px;
428
+ max-width: 100%;
429
+ border-radius: 8px;
430
+ overflow: hidden;
431
+ box-shadow: 0 25px 80px rgba(0,0,0,0.4);
432
+ }
433
+
434
+ .result-head {
435
+ background: linear-gradient(135deg, var(--navy), var(--blue-mid));
436
+ padding: 28px 24px;
437
+ text-align: center;
438
+ }
439
+
440
+ .result-head-label {
441
+ font-size: 9px;
442
+ letter-spacing: 4px;
443
+ text-transform: uppercase;
444
+ color: rgba(255,255,255,0.4);
445
+ margin-bottom: 8px;
446
+ }
447
+
448
+ .result-head-title {
449
+ font-family: 'Source Serif 4', serif;
450
+ font-size: 22px;
451
+ font-weight: 700;
452
+ color: var(--white);
453
+ }
454
+
455
+ .result-body {
456
+ padding: 28px 24px;
457
+ text-align: center;
458
+ }
459
+
460
+ .result-percent {
461
+ font-size: 56px;
462
+ font-weight: 800;
463
+ color: var(--blue);
464
+ line-height: 1;
465
+ margin-bottom: 4px;
466
+ }
467
+
468
+ .result-percent-label {
469
+ font-size: 12px;
470
+ color: var(--text-light);
471
+ margin-bottom: 20px;
472
+ }
473
+
474
+ .result-grade {
475
+ font-size: 13px;
476
+ font-weight: 600;
477
+ padding: 6px 18px;
478
+ display: inline-block;
479
+ margin-bottom: 20px;
480
+ border-radius: 3px;
481
+ }
482
+
483
+ .result-grade.excellent { background: var(--green-bg); color: var(--green-dark); border: 1px solid var(--green-border); }
484
+ .result-grade.good { background: var(--blue-pale); color: var(--blue); border: 1px solid var(--border); }
485
+ .result-grade.fair { background: var(--yellow-bg); color: var(--yellow-text); border: 1px solid var(--yellow-border); }
486
+ .result-grade.poor { background: var(--red-bg); color: var(--red-dark); border: 1px solid var(--red-border); }
487
+
488
+ .result-stats {
489
+ display: flex;
490
+ justify-content: center;
491
+ gap: 24px;
492
+ margin-bottom: 24px;
493
+ padding: 16px 0;
494
+ border-top: 1px solid var(--border-light);
495
+ border-bottom: 1px solid var(--border-light);
496
+ }
497
+
498
+ .result-stat { text-align: center; }
499
+
500
+ .result-stat-num {
501
+ font-size: 24px;
502
+ font-weight: 800;
503
+ }
504
+
505
+ .result-stat-num.s-green { color: var(--green); }
506
+ .result-stat-num.s-red { color: var(--red); }
507
+ .result-stat-num.s-blue { color: var(--blue); }
508
+
509
+ .result-stat-label {
510
+ font-size: 9px;
511
+ letter-spacing: 2px;
512
+ text-transform: uppercase;
513
+ color: var(--text-faint);
514
+ font-weight: 600;
515
+ margin-top: 2px;
516
+ }
517
+
518
+ .result-actions {
519
+ display: flex;
520
+ gap: 8px;
521
+ }
522
+
523
+ .result-btn {
524
+ flex: 1;
525
+ padding: 12px;
526
+ font-family: 'Inter', sans-serif;
527
+ font-size: 11px;
528
+ font-weight: 700;
529
+ letter-spacing: 1px;
530
+ text-transform: uppercase;
531
+ cursor: pointer;
532
+ border: none;
533
+ border-radius: 4px;
534
+ transition: all 0.2s ease;
535
+ text-decoration: none;
536
+ text-align: center;
537
+ display: block;
538
+ }
539
+
540
+ .result-btn.primary { background: var(--blue); color: var(--white); }
541
+ .result-btn.primary:hover { background: var(--blue-light); }
542
+ .result-btn.secondary { background: var(--off-white); color: var(--text-mid); border: 1px solid var(--border); }
543
+ .result-btn.secondary:hover { background: var(--blue-pale); }
544
+
545
+ .result-foot {
546
+ padding: 10px 24px;
547
+ border-top: 1px solid var(--border-light);
548
+ text-align: center;
549
+ }
550
+
551
+ .result-foot p {
552
+ font-size: 9px;
553
+ color: var(--text-faint);
554
+ letter-spacing: 1px;
555
+ }
556
+
557
+ /* ===== RESPONSIVE ===== */
558
+ @media (max-width: 600px) {
559
+ .top-bar { padding: 0 12px; height: 50px; }
560
+ .top-bar-title { font-size: 12px; }
561
+ .progress-wrap { width: 80px; }
562
+ .main { padding: 14px 10px 30px; }
563
+ .q-card-top { padding: 12px 14px; }
564
+ .q-body { padding: 10px 14px 14px; }
565
+ .q-stem { font-size: 12px; }
566
+ .q-opt { padding: 8px 10px; }
567
+ .q-opt .ot { font-size: 11.5px; }
568
+ .q-reason-text { font-size: 11px; }
569
+ .result-percent { font-size: 44px; }
570
+ .result-stats { gap: 16px; }
571
+ }
572
+ </style>
573
+ </head>
574
+ <body>
575
+
576
+ <!-- TOP BAR -->
577
+ <div class="top-bar">
578
+ <div class="top-bar-left">
579
+ <div class="top-bar-photo">
580
+ <img src="{{ url_for('static', filename='hamza.jpeg') }}" alt="">
581
+ </div>
582
+ <div class="top-bar-info">
583
+ <div class="top-bar-title">TDM Quiz</div>
584
+ <div class="top-bar-sub">Dr Hamza Abu Nawara</div>
585
+ </div>
586
+ </div>
587
+ <div class="top-bar-center">
588
+ <div class="progress-wrap">
589
+ <div class="progress-fill" id="progressBar"></div>
590
+ </div>
591
+ <div class="progress-label"><span id="answeredCount">0</span>/{{ total }}</div>
592
+ </div>
593
+ <div class="top-bar-right">
594
+ <a href="/">Exit Quiz</a>
595
+ </div>
596
+ </div>
597
+
598
+ <!-- MAIN -->
599
+ <div class="main">
600
+
601
+ {% for q in questions %}
602
+ {% set qid = loop.index %}
603
+ <div class="q-card" id="qcard-{{ qid }}"
604
+ data-answers="{{ q.answer | join(',') }}"
605
+ data-multi="{{ 'true' if q.answer | length > 1 else 'false' }}"
606
+ data-reason="{{ q.reason | e }}">
607
+
608
+ <div class="q-card-top">
609
+ <div class="q-num">{{ q.quiz_number }}</div>
610
+ <div class="q-stem">{{ q.question }}</div>
611
+ <div class="q-badge" id="badge-{{ qid }}"></div>
612
+ </div>
613
+
614
+ {% if q.answer | length > 1 %}
615
+ <div class="q-multi-tag">SELECT {{ q.answer | length }} CORRECT ANSWERS</div>
616
+ {% endif %}
617
+
618
+ <div class="q-body">
619
+ <ul class="q-opts">
620
+ {% for opt in q.choices %}
621
+ <li class="q-opt" id="opt-{{ qid }}-{{ opt.letter }}"
622
+ data-qid="{{ qid }}"
623
+ data-letter="{{ opt.letter }}"
624
+ onclick="pickOpt(this)">
625
+ <span class="lt">{{ opt.letter }}.</span>
626
+ <span class="ot">{{ opt.text }}</span>
627
+ <span class="st" id="st-{{ qid }}-{{ opt.letter }}"></span>
628
+ </li>
629
+ {% endfor %}
630
+ </ul>
631
+
632
+ <button class="q-confirm" id="confirm-{{ qid }}" onclick="confirmAnswer({{ qid }})" disabled>
633
+ Confirm Answer
634
+ </button>
635
+
636
+ <div class="q-reason" id="reason-{{ qid }}">
637
+ <div class="q-reason-title">Clinical Reasoning</div>
638
+ <div class="q-reason-text" id="reason-text-{{ qid }}"></div>
639
+ </div>
640
+ </div>
641
+ </div>
642
+ {% endfor %}
643
+
644
+ <!-- FINISH -->
645
+ <div class="finish-area">
646
+ <button class="finish-btn" id="finishBtn" onclick="showResults()">View Results</button>
647
+ <div class="finish-note" id="finishNote">Answer all questions to see your results</div>
648
+ </div>
649
+ </div>
650
+
651
+ <!-- RESULT OVERLAY -->
652
+ <div class="overlay" id="resultOverlay">
653
+ <div class="result-card">
654
+ <div class="result-head">
655
+ <div class="result-head-label">Quiz Complete</div>
656
+ <div class="result-head-title">Your Results</div>
657
+ </div>
658
+ <div class="result-body">
659
+ <div class="result-percent" id="rPercent">0%</div>
660
+ <div class="result-percent-label">Overall Score</div>
661
+ <div class="result-grade" id="rGrade"></div>
662
+ <div class="result-stats">
663
+ <div class="result-stat">
664
+ <div class="result-stat-num s-green" id="rCorrect">0</div>
665
+ <div class="result-stat-label">Correct</div>
666
+ </div>
667
+ <div class="result-stat">
668
+ <div class="result-stat-num s-red" id="rWrong">0</div>
669
+ <div class="result-stat-label">Wrong</div>
670
+ </div>
671
+ <div class="result-stat">
672
+ <div class="result-stat-num s-blue" id="rTotal">0</div>
673
+ <div class="result-stat-label">Total</div>
674
+ </div>
675
+ </div>
676
+ <div class="result-actions">
677
+ <a href="/" class="result-btn primary">New Quiz</a>
678
+ <button class="result-btn secondary" onclick="closeResults()">Review Answers</button>
679
+ </div>
680
+ </div>
681
+ <div class="result-foot">
682
+ <p>Dr Hamza Abu Nawara | Therapeutic Decision-Making</p>
683
+ </div>
684
+ </div>
685
+ </div>
686
+
687
+ <script>
688
+ const TOTAL = {{ total }};
689
+ let answered = {};
690
+ let results = {};
691
+
692
+ function pickOpt(el) {
693
+ const qid = el.dataset.qid;
694
+ const card = document.getElementById('qcard-' + qid);
695
+
696
+ if (card.classList.contains('done')) return;
697
+
698
+ const isMulti = card.dataset.multi === 'true';
699
+
700
+ if (isMulti) {
701
+ el.classList.toggle('selected');
702
+ } else {
703
+ card.querySelectorAll('.q-opt').forEach(o => o.classList.remove('selected'));
704
+ el.classList.add('selected');
705
+ }
706
+
707
+ const hasSelected = card.querySelectorAll('.q-opt.selected').length > 0;
708
+ document.getElementById('confirm-' + qid).disabled = !hasSelected;
709
+ }
710
+
711
+ function formatReason(raw) {
712
+ // Bold text between ** **
713
+ let text = raw.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
714
+
715
+ // Convert - at start of line to bullet points
716
+ text = text.replace(/\n\s*-\s*/g, '<br>&bull; ');
717
+
718
+ // Convert remaining newlines
719
+ text = text.replace(/\n/g, '<br>');
720
+
721
+ return text;
722
+ }
723
+
724
+ function confirmAnswer(qid) {
725
+ const card = document.getElementById('qcard-' + qid);
726
+ if (card.classList.contains('done')) return;
727
+ card.classList.add('done');
728
+
729
+ const correctAnswers = card.dataset.answers.split(',');
730
+ const isMulti = card.dataset.multi === 'true';
731
+ const reason = card.dataset.reason;
732
+
733
+ const selectedEls = card.querySelectorAll('.q-opt.selected');
734
+ const selectedLetters = Array.from(selectedEls).map(o => o.dataset.letter);
735
+
736
+ // Lock all options
737
+ card.querySelectorAll('.q-opt').forEach(o => {
738
+ o.classList.add('locked');
739
+ o.classList.remove('selected');
740
+ });
741
+
742
+ // Hide confirm
743
+ document.getElementById('confirm-' + qid).classList.add('hide');
744
+
745
+ // Mark each option
746
+ card.querySelectorAll('.q-opt').forEach(opt => {
747
+ const letter = opt.dataset.letter;
748
+ const isCorrect = correctAnswers.includes(letter);
749
+ const isSelected = selectedLetters.includes(letter);
750
+ const icon = document.getElementById('st-' + qid + '-' + letter);
751
+
752
+ if (isSelected && isCorrect) {
753
+ opt.classList.add('is-correct');
754
+ icon.textContent = '\u2713';
755
+ } else if (isSelected && !isCorrect) {
756
+ opt.classList.add('is-wrong');
757
+ icon.textContent = '\u2717';
758
+ } else if (!isSelected && isCorrect) {
759
+ opt.classList.add('is-missed');
760
+ icon.textContent = '\u2713';
761
+ }
762
+ });
763
+
764
+ // Badge
765
+ const badge = document.getElementById('badge-' + qid);
766
+ badge.classList.add('show');
767
+
768
+ let isFullyCorrect = false;
769
+
770
+ if (isMulti) {
771
+ const allHit = correctAnswers.every(a => selectedLetters.includes(a));
772
+ const noExtra = selectedLetters.every(a => correctAnswers.includes(a));
773
+ const someHit = selectedLetters.some(a => correctAnswers.includes(a));
774
+
775
+ if (allHit && noExtra) {
776
+ badge.textContent = 'CORRECT';
777
+ badge.classList.add('correct');
778
+ isFullyCorrect = true;
779
+ } else if (someHit && noExtra) {
780
+ badge.textContent = 'PARTIAL';
781
+ badge.classList.add('partial');
782
+ } else {
783
+ badge.textContent = 'INCORRECT';
784
+ badge.classList.add('wrong');
785
+ }
786
+ } else {
787
+ if (selectedLetters.length > 0 && correctAnswers.includes(selectedLetters[0])) {
788
+ badge.textContent = 'CORRECT';
789
+ badge.classList.add('correct');
790
+ isFullyCorrect = true;
791
+ } else {
792
+ badge.textContent = 'INCORRECT';
793
+ badge.classList.add('wrong');
794
+ }
795
+ }
796
+
797
+ results[qid] = isFullyCorrect;
798
+
799
+ // Show reason with formatting
800
+ const reasonBox = document.getElementById('reason-' + qid);
801
+ document.getElementById('reason-text-' + qid).innerHTML = formatReason(reason);
802
+ reasonBox.classList.add('show');
803
+
804
+ // Update progress
805
+ answered[qid] = true;
806
+ const count = Object.keys(answered).length;
807
+ document.getElementById('answeredCount').textContent = count;
808
+ document.getElementById('progressBar').style.width = ((count / TOTAL) * 100) + '%';
809
+
810
+ // Show finish or note
811
+ if (count >= TOTAL) {
812
+ document.getElementById('finishBtn').classList.add('show');
813
+ document.getElementById('finishNote').classList.remove('show');
814
+ } else {
815
+ document.getElementById('finishNote').classList.add('show');
816
+ }
817
+
818
+ // Scroll to next
819
+ setTimeout(() => {
820
+ const next = document.getElementById('qcard-' + (qid + 1));
821
+ if (next) {
822
+ next.scrollIntoView({ behavior: 'smooth', block: 'start' });
823
+ }
824
+ }, 500);
825
+ }
826
+
827
+ function showResults() {
828
+ const correct = Object.values(results).filter(v => v).length;
829
+ const wrong = TOTAL - correct;
830
+ const pct = Math.round((correct / TOTAL) * 100);
831
+
832
+ document.getElementById('rCorrect').textContent = correct;
833
+ document.getElementById('rWrong').textContent = wrong;
834
+ document.getElementById('rTotal').textContent = TOTAL;
835
+ document.getElementById('rPercent').textContent = pct + '%';
836
+
837
+ const g = document.getElementById('rGrade');
838
+ if (pct >= 85) {
839
+ g.textContent = 'Excellent Performance';
840
+ g.className = 'result-grade excellent';
841
+ } else if (pct >= 70) {
842
+ g.textContent = 'Good Performance';
843
+ g.className = 'result-grade good';
844
+ } else if (pct >= 50) {
845
+ g.textContent = 'Fair - Needs Improvement';
846
+ g.className = 'result-grade fair';
847
+ } else {
848
+ g.textContent = 'Needs More Study';
849
+ g.className = 'result-grade poor';
850
+ }
851
+
852
+ document.getElementById('resultOverlay').classList.add('show');
853
+ }
854
+
855
+ function closeResults() {
856
+ document.getElementById('resultOverlay').classList.remove('show');
857
+ window.scrollTo({ top: 0, behavior: 'smooth' });
858
+ }
859
+ </script>
860
+
861
+ </body>
862
+ </html>