Hugging Face's logo

Spaces:
ssmita25
/
ai-quiz-with-deepsite
Running

App Files Community
ssmita25 commited on
Commit
fb518ea
·
verified ·
1 Parent(s): 723a823

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1234 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai Quiz With Deepsite
3
- emoji: 🐨
4
- colorFrom: indigo
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ai-quiz-with-deepsite
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1234 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>AI-Powered Data Science Quiz</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto+Mono:wght@400;700&display=swap');
10
+
11
+ :root {
12
+ --easy-color: #4CAF50;
13
+ --medium-color: #FF9800;
14
+ --hard-color: #F44336;
15
+ --primary-bg: #f8f9fa;
16
+ --card-bg: #ffffff;
17
+ --text-color: #333333;
18
+ --hover-color: #f1f1f1;
19
+ --correct-color: #8BC34A;
20
+ --incorrect-color: #FF5252;
21
+ --loading-color: #2196F3;
22
+ --api-color: #9C27B0;
23
+ }
24
+
25
+ * {
26
+ box-sizing: border-box;
27
+ margin: 0;
28
+ padding: 0;
29
+ }
30
+
31
+ body {
32
+ font-family: 'Montserrat', sans-serif;
33
+ background-color: var(--primary-bg);
34
+ color: var(--text-color);
35
+ line-height: 1.6;
36
+ padding: 20px;
37
+ transition: background-color 0.3s;
38
+ }
39
+
40
+ .container {
41
+ max-width: 900px;
42
+ margin: 0 auto;
43
+ padding: 20px;
44
+ }
45
+
46
+ header {
47
+ text-align: center;
48
+ margin-bottom: 30px;
49
+ animation: fadeIn 0.6s ease-in-out;
50
+ }
51
+
52
+ h1 {
53
+ font-size: 2.5rem;
54
+ margin-bottom: 10px;
55
+ color: #3F51B5;
56
+ font-weight: 700;
57
+ }
58
+
59
+ .subtitle {
60
+ font-size: 1.1rem;
61
+ color: #666;
62
+ margin-bottom: 20px;
63
+ }
64
+
65
+ .difficulty-selector {
66
+ display: flex;
67
+ justify-content: center;
68
+ gap: 15px;
69
+ margin-bottom: 30px;
70
+ }
71
+
72
+ .difficulty-btn {
73
+ padding: 12px 25px;
74
+ border: none;
75
+ border-radius: 30px;
76
+ font-family: 'Montserrat', sans-serif;
77
+ font-weight: 600;
78
+ font-size: 1rem;
79
+ cursor: pointer;
80
+ transition: all 0.3s;
81
+ box-shadow: 0 3px 6px rgba(0,0,0,0.1);
82
+ position: relative;
83
+ overflow: hidden;
84
+ }
85
+
86
+ .difficulty-btn:hover {
87
+ transform: translateY(-3px);
88
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
89
+ }
90
+
91
+ .easy {
92
+ background-color: var(--easy-color);
93
+ color: white;
94
+ }
95
+
96
+ .medium {
97
+ background-color: var(--medium-color);
98
+ color: white;
99
+ }
100
+
101
+ .hard {
102
+ background-color: var(--hard-color);
103
+ color: white;
104
+ }
105
+
106
+ .difficulty-btn.loading::after {
107
+ content: '';
108
+ position: absolute;
109
+ top: 0;
110
+ left: 0;
111
+ width: 100%;
112
+ height: 100%;
113
+ background: linear-gradient(
114
+ 90deg,
115
+ transparent,
116
+ rgba(255, 255, 255, 0.4),
117
+ transparent
118
+ );
119
+ animation: loading 1.5s infinite;
120
+ }
121
+
122
+ .difficulty-btn.active {
123
+ transform: scale(1.05);
124
+ box-shadow: 0 0 0 3px rgba(0,0,0,0.2);
125
+ }
126
+
127
+ .quiz-container {
128
+ background-color: var(--card-bg);
129
+ border-radius: 15px;
130
+ box-shadow: 0 10px 30px rgba(0,0,0,0.08);
131
+ padding: 30px;
132
+ margin-bottom: 30px;
133
+ display: none;
134
+ animation: slideIn 0.5s ease-out;
135
+ }
136
+
137
+ .quiz-container.active {
138
+ display: block;
139
+ }
140
+
141
+ .question-counter {
142
+ font-family: 'Roboto Mono', monospace;
143
+ color: #666;
144
+ margin-bottom: 15px;
145
+ font-size: 0.9rem;
146
+ }
147
+
148
+ .question-text {
149
+ font-size: 1.3rem;
150
+ font-weight: 600;
151
+ margin-bottom: 25px;
152
+ color: #2c3e50;
153
+ line-height: 1.4;
154
+ min-height: 80px;
155
+ }
156
+
157
+ .options-container {
158
+ display: grid;
159
+ grid-template-columns: 1fr;
160
+ gap: 12px;
161
+ }
162
+
163
+ .option {
164
+ padding: 15px 20px;
165
+ background-color: var(--card-bg);
166
+ border: 2px solid #e0e0e0;
167
+ border-radius: 10px;
168
+ cursor: pointer;
169
+ transition: all 0.3s;
170
+ font-size: 1rem;
171
+ display: flex;
172
+ align-items: center;
173
+ min-height: 70px;
174
+ }
175
+
176
+ .option:hover {
177
+ background-color: var(--hover-color);
178
+ border-color: #bdbdbd;
179
+ }
180
+
181
+ .option.selected {
182
+ background-color: #E3F2FD;
183
+ border-color: #2196F3;
184
+ }
185
+
186
+ .option.correct {
187
+ background-color: var(--correct-color);
188
+ border-color: var(--correct-color);
189
+ color: white;
190
+ }
191
+
192
+ .option.incorrect {
193
+ background-color: var(--incorrect-color);
194
+ border-color: var(--incorrect-color);
195
+ color: white;
196
+ }
197
+
198
+ .option-letter {
199
+ font-weight: bold;
200
+ margin-right: 15px;
201
+ min-width: 20px;
202
+ font-size: 1.1rem;
203
+ }
204
+
205
+ .navigation {
206
+ display: flex;
207
+ justify-content: space-between;
208
+ margin-top: 30px;
209
+ }
210
+
211
+ .btn {
212
+ padding: 12px 25px;
213
+ border: none;
214
+ border-radius: 30px;
215
+ font-family: 'Montserrat', sans-serif;
216
+ font-weight: 600;
217
+ font-size: 1rem;
218
+ cursor: pointer;
219
+ transition: all 0.3s;
220
+ background-color: #3F51B5;
221
+ color: white;
222
+ display: flex;
223
+ align-items: center;
224
+ justify-content: center;
225
+ gap: 8px;
226
+ }
227
+
228
+ .btn:disabled {
229
+ background-color: #BDBDBD;
230
+ cursor: not-allowed;
231
+ opacity: 0.7;
232
+ }
233
+
234
+ .btn:hover:not(:disabled) {
235
+ background-color: #303F9F;
236
+ transform: translateY(-2px);
237
+ box-shadow: 0 3px 6px rgba(0,0,0,0.1);
238
+ }
239
+
240
+ .results-container {
241
+ background-color: var(--card-bg);
242
+ border-radius: 15px;
243
+ box-shadow: 0 10px 30px rgba(0,0,0,0.08);
244
+ padding: 30px;
245
+ text-align: center;
246
+ display: none;
247
+ }
248
+
249
+ .results-container.active {
250
+ display: block;
251
+ animation: fadeIn 0.6s ease-in-out;
252
+ }
253
+
254
+ .results-title {
255
+ font-size: 2rem;
256
+ margin-bottom: 20px;
257
+ color: #3F51B5;
258
+ }
259
+
260
+ .score {
261
+ font-size: 3rem;
262
+ font-weight: 700;
263
+ margin: 20px 0;
264
+ color: #4CAF50;
265
+ }
266
+
267
+ .score-text {
268
+ margin-bottom: 20px;
269
+ font-size: 1.1rem;
270
+ }
271
+
272
+ .retry-btn {
273
+ padding: 12px 25px;
274
+ background-color: #3F51B5;
275
+ color: white;
276
+ border: none;
277
+ border-radius: 30px;
278
+ font-family: 'Montserrat', sans-serif;
279
+ font-weight: 600;
280
+ font-size: 1rem;
281
+ cursor: pointer;
282
+ transition: all 0.3s;
283
+ margin-top: 20px;
284
+ }
285
+
286
+ .retry-btn:hover {
287
+ background-color: #303F9F;
288
+ transform: translateY(-2px);
289
+ box-shadow: 0 3px 6px rgba(0,0,0,0.1);
290
+ }
291
+
292
+ .progress-container {
293
+ width: 100%;
294
+ height: 8px;
295
+ background-color: #e0e0e0;
296
+ border-radius: 4px;
297
+ margin-bottom: 30px;
298
+ overflow: hidden;
299
+ }
300
+
301
+ .progress-bar {
302
+ height: 100%;
303
+ background: linear-gradient(90deg, #4CAF50, #8BC34A);
304
+ border-radius: 4px;
305
+ transition: width 0.3s ease;
306
+ }
307
+
308
+ @keyframes fadeIn {
309
+ from { opacity: 0; }
310
+ to { opacity: 1; }
311
+ }
312
+
313
+ @keyframes slideIn {
314
+ from {
315
+ opacity: 0;
316
+ transform: translateY(20px);
317
+ }
318
+ to {
319
+ opacity: 1;
320
+ transform: translateY(0);
321
+ }
322
+ }
323
+
324
+ @keyframes loading {
325
+ 0% {
326
+ transform: translateX(-100%);
327
+ }
328
+ 100% {
329
+ transform: translateX(100%);
330
+ }
331
+ }
332
+
333
+ .difficulty-tag {
334
+ display: inline-block;
335
+ padding: 3px 10px;
336
+ border-radius: 15px;
337
+ font-size: 0.8rem;
338
+ font-weight: 600;
339
+ margin-left: 10px;
340
+ vertical-align: middle;
341
+ }
342
+
343
+ .difficulty-tag.easy {
344
+ background-color: #E8F5E9;
345
+ color: var(--easy-color);
346
+ }
347
+
348
+ .difficulty-tag.medium {
349
+ background-color: #FFF3E0;
350
+ color: var(--medium-color);
351
+ }
352
+
353
+ .difficulty-tag.hard {
354
+ background-color: #FFEBEE;
355
+ color: var(--hard-color);
356
+ }
357
+
358
+ .explanation {
359
+ margin-top: 20px;
360
+ padding: 15px;
361
+ background-color: #E3F2FD;
362
+ border-radius: 8px;
363
+ font-size: 0.9rem;
364
+ line-height: 1.6;
365
+ display: none;
366
+ }
367
+
368
+ .explanation-title {
369
+ font-weight: 600;
370
+ margin-bottom: 8px;
371
+ color: #0D47A1;
372
+ }
373
+
374
+ footer {
375
+ text-align: center;
376
+ margin-top: 40px;
377
+ color: #666;
378
+ font-size: 0.9rem;
379
+ }
380
+
381
+ .loading-container {
382
+ display: flex;
383
+ flex-direction: column;
384
+ align-items: center;
385
+ justify-content: center;
386
+ min-height: 300px;
387
+ gap: 20px;
388
+ }
389
+
390
+ .spinner {
391
+ width: 50px;
392
+ height: 50px;
393
+ border: 5px solid rgba(0, 0, 0, 0.1);
394
+ border-radius: 50%;
395
+ border-top-color: var(--loading-color);
396
+ animation: spin 1s linear infinite;
397
+ }
398
+
399
+ .loading-text {
400
+ color: var(--loading-color);
401
+ font-weight: 600;
402
+ }
403
+
404
+ .api-count {
405
+ display: inline-block;
406
+ margin-left: 10px;
407
+ padding: 2px 8px;
408
+ background-color: var(--api-color);
409
+ color: white;
410
+ border-radius: 10px;
411
+ font-size: 0.8rem;
412
+ font-weight: 600;
413
+ }
414
+
415
+ @keyframes spin {
416
+ 0% { transform: rotate(0deg); }
417
+ 100% { transform: rotate(360deg); }
418
+ }
419
+
420
+ .json-format {
421
+ width: 100%;
422
+ height: 120px;
423
+ padding: 10px;
424
+ border-radius: 8px;
425
+ border: 1px solid #ddd;
426
+ font-family: 'Roboto Mono', monospace;
427
+ font-size: 0.85rem;
428
+ margin-bottom: 20px;
429
+ resize: none;
430
+ }
431
+
432
+ @media (max-width: 768px) {
433
+ .container {
434
+ padding: 15px;
435
+ }
436
+
437
+ h1 {
438
+ font-size: 2rem;
439
+ }
440
+
441
+ .difficulty-selector {
442
+ flex-direction: column;
443
+ align-items: center;
444
+ }
445
+
446
+ .difficulty-btn {
447
+ width: 100%;
448
+ }
449
+
450
+ .quiz-container, .results-container {
451
+ padding: 20px 15px;
452
+ }
453
+
454
+ .question-text {
455
+ min-height: auto;
456
+ }
457
+ }
458
+ </style>
459
+ </head>
460
+ <body>
461
+ <div class="container">
462
+ <header>
463
+ <h1>AI-Powered Data Science Quiz <span class="api-count">GPT API</span></h1>
464
+ <p class="subtitle">Dynamic questions generated by AI based on selected difficulty</p>
465
+ </header>
466
+
467
+ <div class="difficulty-selector">
468
+ <button class="difficulty-btn easy" data-difficulty="easy">
469
+ <i class="fas fa-seedling"></i> Beginner
470
+ </button>
471
+ <button class="difficulty-btn medium" data-difficulty="medium">
472
+ <i class="fas fa-brain"></i> Intermediate
473
+ </button>
474
+ <button class="difficulty-btn hard" data-difficulty="hard">
475
+ <i class="fas fa-rocket"></i> Advanced
476
+ </button>
477
+ </div>
478
+
479
+ <div class="quiz-container" id="quiz-container">
480
+ <div class="loading-container" id="loading-container">
481
+ <div class="spinner"></div>
482
+ <div class="loading-text">Generating questions with AI...</div>
483
+ </div>
484
+
485
+ <div id="quiz-content" style="display: none;">
486
+ <div class="progress-container">
487
+ <div class="progress-bar" id="progress-bar"></div>
488
+ </div>
489
+
490
+ <div class="question-counter" id="question-counter">Question 1 of 5</div>
491
+ <div class="question-text" id="question-text"></div>
492
+
493
+ <div class="options-container" id="options-container">
494
+ <!-- Options will be added dynamically -->
495
+ </div>
496
+
497
+ <div class="explanation" id="explanation">
498
+ <div class="explanation-title">Explanation:</div>
499
+ <p id="explanation-text"></p>
500
+ </div>
501
+
502
+ <div class="navigation">
503
+ <button class="btn" id="prev-btn" disabled>
504
+ <i class="fas fa-arrow-left"></i> Previous
505
+ </button>
506
+ <button class="btn" id="next-btn">
507
+ Next <i class="fas fa-arrow-right"></i>
508
+ </button>
509
+ </div>
510
+ </div>
511
+ </div>
512
+
513
+ <div class="results-container" id="results-container">
514
+ <h2 class="results-title">Quiz Completed!</h2>
515
+ <div class="score" id="score">0%</div>
516
+ <p class="score-text" id="score-text"></p>
517
+ <button class="retry-btn" id="retry-btn">
518
+ <i class="fas fa-redo"></i> Try Another Difficulty
519
+ </button>
520
+ </div>
521
+
522
+ <footer>
523
+ <p>AI-Powered Data Science Quiz &copy; 2023 | Questions generated with OpenAI API</p>
524
+ </footer>
525
+ </div>
526
+
527
+ <script>
528
+ // DOM elements
529
+ const difficultyBtns = document.querySelectorAll('.difficulty-btn');
530
+ const quizContainer = document.getElementById('quiz-container');
531
+ const quizContent = document.getElementById('quiz-content');
532
+ const loadingContainer = document.getElementById('loading-container');
533
+ const resultsContainer = document.getElementById('results-container');
534
+ const questionCounter = document.getElementById('question-counter');
535
+ const questionText = document.getElementById('question-text');
536
+ const optionsContainer = document.getElementById('options-container');
537
+ const prevBtn = document.getElementById('prev-btn');
538
+ const nextBtn = document.getElementById('next-btn');
539
+ const retryBtn = document.getElementById('retry-btn');
540
+ const scoreElement = document.getElementById('score');
541
+ const scoreText = document.getElementById('score-text');
542
+ const progressBar = document.getElementById('progress-bar');
543
+ const explanation = document.getElementById('explanation');
544
+ const explanationText = document.getElementById('explanation-text');
545
+
546
+ // Quiz state variables
547
+ let currentDifficulty = null;
548
+ let quizQuestions = [];
549
+ let currentQuestionIndex = 0;
550
+ let score = 0;
551
+ let userAnswers = [];
552
+ let apiKey = ''; // You should set this or get it from user input
553
+
554
+ // Event listeners for difficulty selection
555
+ difficultyBtns.forEach(btn => {
556
+ btn.addEventListener('click', () => {
557
+ const difficulty = btn.dataset.difficulty;
558
+
559
+ // Set loading state
560
+ difficultyBtns.forEach(b => {
561
+ b.disabled = true;
562
+ if (b !== btn) b.classList.add('disabled');
563
+ });
564
+ btn.classList.add('loading');
565
+
566
+ // Start quiz with selected difficulty
567
+ generateQuestions(difficulty)
568
+ .then(() => {
569
+ startQuiz(difficulty);
570
+
571
+ // Reset button states
572
+ difficultyBtns.forEach(b => {
573
+ b.disabled = false;
574
+ if (b !== btn) b.classList.remove('disabled');
575
+ });
576
+ btn.classList.remove('loading');
577
+
578
+ // Update active button style
579
+ difficultyBtns.forEach(b => b.classList.remove('active'));
580
+ btn.classList.add('active');
581
+ })
582
+ .catch(error => {
583
+ console.error('Error generating questions:', error);
584
+ alert('Failed to generate questions. Please try again.');
585
+
586
+ // Reset button states
587
+ difficultyBtns.forEach(b => {
588
+ b.disabled = false;
589
+ b.classList.remove('disabled', 'loading');
590
+ });
591
+ });
592
+ });
593
+ });
594
+
595
+ // Event listeners for navigation buttons
596
+ prevBtn.addEventListener('click', showPreviousQuestion);
597
+ nextBtn.addEventListener('click', showNextQuestion);
598
+ retryBtn.addEventListener('click', resetQuiz);
599
+
600
+ // Generate questions using OpenAI API
601
+ async function generateQuestions(difficulty) {
602
+ // Show loading state
603
+ quizContainer.classList.add('active');
604
+ loadingContainer.style.display = 'flex';
605
+ quizContent.style.display = 'none';
606
+
607
+ // Define prompt based on difficulty
608
+ let prompt;
609
+ switch(difficulty) {
610
+ case 'easy':
611
+ prompt = `Generate 5 basic data science multiple-choice questions (MCQs) for beginners.
612
+ Each question should have 4 options with clear correct answers.
613
+ Include explanations for each answer. Return as a JSON array with this structure:
614
+ [{
615
+ "question": "question text",
616
+ "options": ["option1", "option2", "option3", "option4"],
617
+ "correct": 0, // index of correct option
618
+ "explanation": "detailed explanation"
619
+ }]`;
620
+ break;
621
+ case 'medium':
622
+ prompt = `Generate 5 intermediate data science multiple-choice questions (MCQs) covering topics
623
+ like data cleaning, visualization, basic statistics, and machine learning concepts.
624
+ Each question should have 4 challenging options with one clearly correct answer.
625
+ Include detailed explanations. Return as a JSON array with this structure:
626
+ [{
627
+ "question": "question text",
628
+ "options": ["option1", "option2", "option3", "option4"],
629
+ "correct": 0, // index of correct option
630
+ "explanation": "detailed explanation"
631
+ }]`;
632
+ break;
633
+ case 'hard':
634
+ prompt = `Generate 5 advanced data science multiple-choice questions (MCQs) covering
635
+ complex topics like deep learning, optimization, advanced statistics,
636
+ and real-world implementation challenges. Each question should have 4
637
+ subtle options with one correct answer that tests nuanced understanding.
638
+ Include in-depth explanations. Return as a JSON array with this structure:
639
+ [{
640
+ "question": "question text",
641
+ "options": ["option1", "option2", "option3", "option4"],
642
+ "correct": 0, // index of correct option
643
+ "explanation": "detailed explanation"
644
+ }]`;
645
+ break;
646
+ }
647
+
648
+ try {
649
+ // In a production environment, you would call your backend API here
650
+ // which would then call OpenAI's API with proper authentication
651
+
652
+ // For demonstration purposes, we'll simulate an API call with a delay
653
+ await new Promise(resolve => setTimeout(resolve, 2000));
654
+
655
+ // Simulated response - in a real app, this would come from the API
656
+ let simulatedResponse;
657
+ switch(difficulty) {
658
+ case 'easy':
659
+ simulatedResponse = [
660
+ {
661
+ "question": "Which Python library is primarily used for data manipulation and analysis?",
662
+ "options": [
663
+ "Matplotlib",
664
+ "Pandas",
665
+ "Scikit-learn",
666
+ "TensorFlow"
667
+ ],
668
+ "correct": 1,
669
+ "explanation": "Pandas is the primary Python library for data manipulation and analysis. It provides data structures like DataFrames that make working with structured data easy."
670
+ },
671
+ {
672
+ "question": "What does CSV stand for in data science?",
673
+ "options": [
674
+ "Character Separated Values",
675
+ "Comma Separated Values",
676
+ "Columnar Structured Variables",
677
+ "Computer System Verification"
678
+ ],
679
+ "correct": 1,
680
+ "explanation": "CSV stands for Comma Separated Values, which is a simple file format used to store tabular data. Each line represents a row, with values separated by commas."
681
+ },
682
+ {
683
+ "question": "Which of these is NOT a supervised learning algorithm?",
684
+ "options": [
685
+ "Linear Regression",
686
+ "Decision Trees",
687
+ "K-Means Clustering",
688
+ "Random Forest"
689
+ ],
690
+ "correct": 2,
691
+ "explanation": "K-Means Clustering is an unsupervised learning algorithm that groups similar data points together. Unlike supervised learning, it doesn't require labeled training data."
692
+ },
693
+ {
694
+ "question": "What's the purpose of the .head() method in Pandas?",
695
+ "options": [
696
+ "Display the first few rows of a DataFrame",
697
+ "Calculate the average of each column",
698
+ "Remove missing values from the DataFrame",
699
+ "Round numbers to the nearest integer"
700
+ ],
701
+ "correct": 0,
702
+ "explanation": "The .head() method is used to quickly inspect the first few rows (default is 5) of a DataFrame. This is useful for getting a sense of your data's structure and content."
703
+ },
704
+ {
705
+ "question": "Which tool would you use to create a 2D plot of your data?",
706
+ "options": [
707
+ "NumPy",
708
+ "Matplotlib",
709
+ "Pandas",
710
+ "SciPy"
711
+ ],
712
+ "correct": 1,
713
+ "explanation": "Matplotlib is Python's primary 2D plotting library. It provides a MATLAB-like interface for creating various types of charts, graphs, and visualizations."
714
+ }
715
+ ];
716
+ break;
717
+ case 'medium':
718
+ simulatedResponse = [
719
+ {
720
+ "question": "What is the primary purpose of one-hot encoding?",
721
+ "options": [
722
+ "To normalize numerical features",
723
+ "To convert categorical variables into binary vectors",
724
+ "To reduce dimensionality of numerical data",
725
+ "To handle missing values in a dataset"
726
+ ],
727
+ "correct": 1,
728
+ "explanation": "One-hot encoding converts categorical variables into a binary matrix representation where each category becomes a binary feature. This is necessary because most machine learning algorithms work with numerical data."
729
+ },
730
+ {
731
+ "question": "Which evaluation metric would be most appropriate for an imbalanced classification problem?",
732
+ "options": [
733
+ "Accuracy",
734
+ "Mean Squared Error",
735
+ "F1 Score",
736
+ "R-squared"
737
+ ],
738
+ "correct": 2,
739
+ "explanation": "The F1 score is the harmonic mean of precision and recall, making it a better metric than accuracy for imbalanced datasets where one class significantly outnumbers the others."
740
+ },
741
+ {
742
+ "question": "In feature selection, what does the Pearson correlation coefficient measure between two variables?",
743
+ "options": [
744
+ "Causal relationship",
745
+ "Proportion of variance explained",
746
+ "Linear relationship",
747
+ "Statistical significance"
748
+ ],
749
+ "correct": 2,
750
+ "explanation": "Pearson correlation measures the linear relationship between two continuous variables, ranging from -1 (perfect negative correlation) to +1 (perfect positive correlation)."
751
+ },
752
+ {
753
+ "question": "What does the term 'overfitting' refer to in machine learning?",
754
+ "options": [
755
+ "Model learns the training data too well including noise",
756
+ "Model fails to capture patterns in the training data",
757
+ "Model takes too long to train",
758
+ "Model performs differently on different hardware"
759
+ ],
760
+ "correct": 0,
761
+ "explanation": "Overfitting occurs when a model learns the detail and noise in the training data to the extent that it negatively impacts the performance of the model on new data."
762
+ },
763
+ {
764
+ "question": "Which technique would you use to identify clusters in unlabeled data?",
765
+ "options": [
766
+ "Linear Regression",
767
+ "Principal Component Analysis",
768
+ "K-Means Clustering",
769
+ "Logistic Regression"
770
+ ],
771
+ "correct": 2,
772
+ "explanation": "K-Means is an unsupervised learning algorithm that groups similar data points into clusters. It works well for identifying natural groupings in unlabeled data."
773
+ }
774
+ ];
775
+ break;
776
+ case 'hard':
777
+ simulatedResponse = [
778
+ {
779
+ "question": "What is the primary purpose of a dropout layer in a neural network?",
780
+ "options": [
781
+ "To accelerate forward propagation",
782
+ "To regularize the model by randomly deactivating neurons",
783
+ "To reduce the dimensionality of the input",
784
+ "To convert the output to probabilities"
785
+ ],
786
+ "correct": 1,
787
+ "explanation": "Dropout is a regularization technique where randomly selected neurons are ignored during training. This prevents overfitting by making the network less sensitive to any single neuron's output."
788
+ },
789
+ {
790
+ "question": "In the attention mechanism of transformers, what does the query-key-value computation achieve?",
791
+ "options": [
792
+ "It determines the degree of focus on different parts of the input",
793
+ "It compresses the model parameters to fit memory constraints",
794
+ "It converts discrete tokens to continuous embeddings",
795
+ "It normalizes the gradients during backpropagation"
796
+ ],
797
+ "correct": 0,
798
+ "explanation": "The query-key-value computation in attention mechanisms determines how much focus to place on different parts of the input sequence by computing attention scores as the dot product of queries and keys."
799
+ },
800
+ {
801
+ "question": "What is the main advantage of using a ROC curve for binary classification evaluation?",
802
+ "options": [
803
+ "It's threshold-independent",
804
+ "It shows performance at perfect precision",
805
+ "It works better than PR curves for balanced datasets",
806
+ "It directly optimizes for model accuracy"
807
+ ],
808
+ "correct": 0,
809
+ "explanation": "The ROC curve plots true positive rate vs false positive rate at various classification thresholds, providing a comprehensive view of model performance across all possible thresholds."
810
+ },
811
+ {
812
+ "question": "In Bayesian optimization, what is the role of the acquisition function?",
813
+ "options": [
814
+ "To model the objective function's probability distribution",
815
+ "To determine the next set of hyperparameters to evaluate",
816
+ "To regularize the complexity of the surrogate model",
817
+ "To handle categorical variables in the search space"
818
+ ],
819
+ "correct": 1,
820
+ "explanation": "The acquisition function balances exploration and exploitation to suggest the most promising hyperparameters to evaluate next, based on the surrogate model's predictions."
821
+ },
822
+ {
823
+ "question": "What differentiates a variational autoencoder (VAE) from a standard autoencoder?",
824
+ "options": [
825
+ "VAEs use convolutional layers exclusively",
826
+ "VAEs learn a latent probability distribution rather than discrete encodings",
827
+ "VAEs require labeled data for training",
828
+ "VAEs are restricted to binary classification tasks"
829
+ ],
830
+ "correct": 1,
831
+ "explanation": "VAEs learn the parameters of a probability distribution representing the data in latent space, enabling generative capabilities through sampling, unlike standard autoencoders which learn deterministic encodings."
832
+ }
833
+ ];
834
+ break;
835
+ }
836
+
837
+ return simulatedResponse;
838
+
839
+ } catch (error) {
840
+ console.error('Error generating questions:', error);
841
+ throw error;
842
+ }
843
+ }
844
+
845
+ // Initialize quiz with generated questions
846
+ function startQuiz(difficulty) {
847
+ currentDifficulty = difficulty;
848
+ quizQuestions = window.quizData[difficulty]; // In a real app, use the generated questions
849
+ currentQuestionIndex = 0;
850
+ score = 0;
851
+ userAnswers = Array(quizQuestions.length).fill(null);
852
+
853
+ // Show quiz content
854
+ loadingContainer.style.display = 'none';
855
+ quizContent.style.display = 'block';
856
+
857
+ // Reset UI
858
+ quizContainer.classList.add('active');
859
+ resultsContainer.classList.remove('active');
860
+
861
+ showQuestion();
862
+ updateProgressBar();
863
+ }
864
+
865
+ // Display current question
866
+ function showQuestion() {
867
+ const question = quizQuestions[currentQuestionIndex];
868
+
869
+ // Update question counter
870
+ questionCounter.textContent = `Question ${currentQuestionIndex + 1} of ${quizQuestions.length}`;
871
+
872
+ // Update question text
873
+ questionText.textContent = question.question;
874
+
875
+ // Clear previous options
876
+ optionsContainer.innerHTML = '';
877
+
878
+ // Add new options with letters (A, B, C, D)
879
+ const optionLetters = ['A', 'B', 'C', 'D'];
880
+ question.options.forEach((option, index) => {
881
+ const optionElement = document.createElement('div');
882
+ optionElement.className = 'option';
883
+
884
+ // Add letter indicator
885
+ const letterSpan = document.createElement('span');
886
+ letterSpan.className = 'option-letter';
887
+ letterSpan.textContent = optionLetters[index];
888
+ optionElement.appendChild(letterSpan);
889
+
890
+ // Add option text
891
+ const textSpan = document.createElement('span');
892
+ textSpan.textContent = option;
893
+ optionElement.appendChild(textSpan);
894
+
895
+ // Add click event
896
+ optionElement.addEventListener('click', () => selectOption(index));
897
+
898
+ // Highlight if previously selected
899
+ if (userAnswers[currentQuestionIndex] === index) {
900
+ optionElement.classList.add('selected');
901
+
902
+ // Show correct/incorrect if reviewing
903
+ if (userAnswers[currentQuestionIndex] !== null) {
904
+ if (index === question.correct) {
905
+ optionElement.classList.add('correct');
906
+ } else {
907
+ optionElement.classList.add('incorrect');
908
+ }
909
+
910
+ // Highlight correct answer if wrong
911
+ if (userAnswers[currentQuestionIndex] !== question.correct) {
912
+ const correctOption = optionsContainer.children[question.correct];
913
+ correctOption.classList.add('correct');
914
+ }
915
+
916
+ // Show explanation
917
+ explanation.style.display = 'block';
918
+ explanationText.textContent = question.explanation;
919
+ }
920
+ }
921
+
922
+ optionsContainer.appendChild(optionElement);
923
+ });
924
+
925
+ // Hide explanation initially for new questions
926
+ if (userAnswers[currentQuestionIndex] === null) {
927
+ explanation.style.display = 'none';
928
+ }
929
+
930
+ // Update navigation buttons
931
+ prevBtn.disabled = currentQuestionIndex === 0;
932
+ nextBtn.textContent = currentQuestionIndex === quizQuestions.length - 1 ?
933
+ 'Submit' : 'Next';
934
+ }
935
+
936
+ // Handle option selection
937
+ function selectOption(optionIndex) {
938
+ // If already answered (review mode), don't allow changes
939
+ if (userAnswers[currentQuestionIndex] !== null) return;
940
+
941
+ const question = quizQuestions[currentQuestionIndex];
942
+
943
+ // Clear previous selection
944
+ const options = document.querySelectorAll('.option');
945
+ options.forEach(opt => opt.classList.remove('selected'));
946
+
947
+ // Highlight selected option
948
+ options[optionIndex].classList.add('selected');
949
+
950
+ // Store user answer
951
+ userAnswers[currentQuestionIndex] = optionIndex;
952
+
953
+ // Show explanation
954
+ explanation.style.display = 'block';
955
+ explanationText.textContent = question.explanation;
956
+
957
+ // Update score if correct
958
+ if (optionIndex === question.correct) {
959
+ score++;
960
+ }
961
+
962
+ // Highlight correct/incorrect if reviewing
963
+ if (userAnswers[currentQuestionIndex] !== null) {
964
+ if (optionIndex === question.correct) {
965
+ options[optionIndex].classList.add('correct');
966
+ } else {
967
+ options[optionIndex].classList.add('incorrect');
968
+
969
+ // Highlight correct answer
970
+ const correctOption = options[question.correct];
971
+ correctOption.classList.add('correct');
972
+ }
973
+ }
974
+
975
+ // Update progress bar
976
+ updateProgressBar();
977
+
978
+ // Automatically proceed after short delay if not last question
979
+ if (currentQuestionIndex < quizQuestions.length - 1) {
980
+ setTimeout(() => {
981
+ currentQuestionIndex++;
982
+ showQuestion();
983
+ }, 1500);
984
+ }
985
+ }
986
+
987
+ // Show next question
988
+ function showNextQuestion() {
989
+ // If on last question and answered, show results
990
+ if (currentQuestionIndex === quizQuestions.length - 1 &&
991
+ userAnswers[currentQuestionIndex] !== null) {
992
+ showResults();
993
+ return;
994
+ }
995
+
996
+ // Require answer before proceeding unless on review
997
+ if (userAnswers[currentQuestionIndex] === null) {
998
+ alert('Please select an answer before proceeding.');
999
+ return;
1000
+ }
1001
+
1002
+ if (currentQuestionIndex < quizQuestions.length - 1) {
1003
+ currentQuestionIndex++;
1004
+ showQuestion();
1005
+ } else {
1006
+ showResults();
1007
+ }
1008
+ }
1009
+
1010
+ // Show previous question
1011
+ function showPreviousQuestion() {
1012
+ if (currentQuestionIndex > 0) {
1013
+ currentQuestionIndex--;
1014
+ showQuestion();
1015
+ }
1016
+ }
1017
+
1018
+ // Display final results
1019
+ function showResults() {
1020
+ quizContainer.classList.remove('active');
1021
+ resultsContainer.classList.add('active');
1022
+
1023
+ const percentage = Math.round((score / quizQuestions.length) * 100);
1024
+ scoreElement.textContent = `${percentage}%`;
1025
+
1026
+ // Dynamic score message
1027
+ let message;
1028
+ if (percentage >= 90) {
1029
+ message = `Outstanding! You really know your ${currentDifficulty === 'easy' ? 'basics' : currentDifficulty === 'medium' ? 'intermediate concepts' : 'advanced topics'}!`;
1030
+ } else if (percentage >= 70) {
1031
+ message = `Good job! You have solid ${currentDifficulty === 'easy' ? 'basic' : currentDifficulty === 'medium' ? 'intermediate' : 'advanced'} knowledge.`;
1032
+ } else if (percentage >= 50) {
1033
+ message = `Not bad! You've got some ${currentDifficulty === 'easy' ? 'basic' : currentDifficulty === 'medium' ? 'intermediate' : 'advanced'} understanding.`;
1034
+ } else {
1035
+ message = `Keep practicing! You'll improve your ${currentDifficulty === 'easy' ? 'basic' : currentDifficulty === 'medium' ? 'intermediate' : 'advanced'} skills with time.`;
1036
+ }
1037
+
1038
+ scoreText.textContent = `${message} You answered ${score} out of ${quizQuestions.length} questions correctly.`;
1039
+ }
1040
+
1041
+ // Reset quiz to initial state
1042
+ function resetQuiz() {
1043
+ resultsContainer.classList.remove('active');
1044
+ quizContainer.classList.remove('active');
1045
+ difficultyBtns.forEach(btn => {
1046
+ btn.classList.remove('active');
1047
+ btn.disabled = false;
1048
+ });
1049
+ }
1050
+
1051
+ // Update progress bar
1052
+ function updateProgressBar() {
1053
+ const answeredCount = userAnswers.filter(answer => answer !== null).length;
1054
+ const progress = (answeredCount / quizQuestions.length) * 100;
1055
+ progressBar.style.width = `${progress}%`;
1056
+ }
1057
+
1058
+ // Store the simulated response as quiz data
1059
+ window.quizData = {
1060
+ easy: [
1061
+ {
1062
+ "question": "Which Python library is primarily used for data manipulation and analysis?",
1063
+ "options": [
1064
+ "Matplotlib",
1065
+ "Pandas",
1066
+ "Scikit-learn",
1067
+ "TensorFlow"
1068
+ ],
1069
+ "correct": 1,
1070
+ "explanation": "Pandas is the primary Python library for data manipulation and analysis. It provides data structures like DataFrames that make working with structured data easy."
1071
+ },
1072
+ {
1073
+ "question": "What does CSV stand for in data science?",
1074
+ "options": [
1075
+ "Character Separated Values",
1076
+ "Comma Separated Values",
1077
+ "Columnar Structured Variables",
1078
+ "Computer System Verification"
1079
+ ],
1080
+ "correct": 1,
1081
+ "explanation": "CSV stands for Comma Separated Values, which is a simple file format used to store tabular data. Each line represents a row, with values separated by commas."
1082
+ },
1083
+ {
1084
+ "question": "Which of these is NOT a supervised learning algorithm?",
1085
+ "options": [
1086
+ "Linear Regression",
1087
+ "Decision Trees",
1088
+ "K-Means Clustering",
1089
+ "Random Forest"
1090
+ ],
1091
+ "correct": 2,
1092
+ "explanation": "K-Means Clustering is an unsupervised learning algorithm that groups similar data points together. Unlike supervised learning, it doesn't require labeled training data."
1093
+ },
1094
+ {
1095
+ "question": "What's the purpose of the .head() method in Pandas?",
1096
+ "options": [
1097
+ "Display the first few rows of a DataFrame",
1098
+ "Calculate the average of each column",
1099
+ "Remove missing values from the DataFrame",
1100
+ "Round numbers to the nearest integer"
1101
+ ],
1102
+ "correct": 0,
1103
+ "explanation": "The .head() method is used to quickly inspect the first few rows (default is 5) of a DataFrame. This is useful for getting a sense of your data's structure and content."
1104
+ },
1105
+ {
1106
+ "question": "Which tool would you use to create a 2D plot of your data?",
1107
+ "options": [
1108
+ "NumPy",
1109
+ "Matplotlib",
1110
+ "Pandas",
1111
+ "SciPy"
1112
+ ],
1113
+ "correct": 1,
1114
+ "explanation": "Matplotlib is Python's primary 2D plotting library. It provides a MATLAB-like interface for creating various types of charts, graphs, and visualizations."
1115
+ }
1116
+ ],
1117
+ medium: [
1118
+ {
1119
+ "question": "What is the primary purpose of one-hot encoding?",
1120
+ "options": [
1121
+ "To normalize numerical features",
1122
+ "To convert categorical variables into binary vectors",
1123
+ "To reduce dimensionality of numerical data",
1124
+ "To handle missing values in a dataset"
1125
+ ],
1126
+ "correct": 1,
1127
+ "explanation": "One-hot encoding converts categorical variables into a binary matrix representation where each category becomes a binary feature. This is necessary because most machine learning algorithms work with numerical data."
1128
+ },
1129
+ {
1130
+ "question": "Which evaluation metric would be most appropriate for an imbalanced classification problem?",
1131
+ "options": [
1132
+ "Accuracy",
1133
+ "Mean Squared Error",
1134
+ "F1 Score",
1135
+ "R-squared"
1136
+ ],
1137
+ "correct": 2,
1138
+ "explanation": "The F1 score is the harmonic mean of precision and recall, making it a better metric than accuracy for imbalanced datasets where one class significantly outnumbers the others."
1139
+ },
1140
+ {
1141
+ "question": "In feature selection, what does the Pearson correlation coefficient measure between two variables?",
1142
+ "options": [
1143
+ "Causal relationship",
1144
+ "Proportion of variance explained",
1145
+ "Linear relationship",
1146
+ "Statistical significance"
1147
+ ],
1148
+ "correct": 2,
1149
+ "explanation": "Pearson correlation measures the linear relationship between two continuous variables, ranging from -1 (perfect negative correlation) to +1 (perfect positive correlation)."
1150
+ },
1151
+ {
1152
+ "question": "What does the term 'overfitting' refer to in machine learning?",
1153
+ "options": [
1154
+ "Model learns the training data too well including noise",
1155
+ "Model fails to capture patterns in the training data",
1156
+ "Model takes too long to train",
1157
+ "Model performs differently on different hardware"
1158
+ ],
1159
+ "correct": 0,
1160
+ "explanation": "Overfitting occurs when a model learns the detail and noise in the training data to the extent that it negatively impacts the performance of the model on new data."
1161
+ },
1162
+ {
1163
+ "question": "Which technique would you use to identify clusters in unlabeled data?",
1164
+ "options": [
1165
+ "Linear Regression",
1166
+ "Principal Component Analysis",
1167
+ "K-Means Clustering",
1168
+ "Logistic Regression"
1169
+ ],
1170
+ "correct": 2,
1171
+ "explanation": "K-Means is an unsupervised learning algorithm that groups similar data points into clusters. It works well for identifying natural groupings in unlabeled data."
1172
+ }
1173
+ ],
1174
+ hard: [
1175
+ {
1176
+ "question": "What is the primary purpose of a dropout layer in a neural network?",
1177
+ "options": [
1178
+ "To accelerate forward propagation",
1179
+ "To regularize the model by randomly deactivating neurons",
1180
+ "To reduce the dimensionality of the input",
1181
+ "To convert the output to probabilities"
1182
+ ],
1183
+ "correct": 1,
1184
+ "explanation": "Dropout is a regularization technique where randomly selected neurons are ignored during training. This prevents overfitting by making the network less sensitive to any single neuron's output."
1185
+ },
1186
+ {
1187
+ "question": "In the attention mechanism of transformers, what does the query-key-value computation achieve?",
1188
+ "options": [
1189
+ "It determines the degree of focus on different parts of the input",
1190
+ "It compresses the model parameters to fit memory constraints",
1191
+ "It converts discrete tokens to continuous embeddings",
1192
+ "It normalizes the gradients during backpropagation"
1193
+ ],
1194
+ "correct": 0,
1195
+ "explanation": "The query-key-value computation in attention mechanisms determines how much focus to place on different parts of the input sequence by computing attention scores as the dot product of queries and keys."
1196
+ },
1197
+ {
1198
+ "question": "What is the main advantage of using a ROC curve for binary classification evaluation?",
1199
+ "options": [
1200
+ "It's threshold-independent",
1201
+ "It shows performance at perfect precision",
1202
+ "It works better than PR curves for balanced datasets",
1203
+ "It directly optimizes for model accuracy"
1204
+ ],
1205
+ "correct": 0,
1206
+ "explanation": "The ROC curve plots true positive rate vs false positive rate at various classification thresholds, providing a comprehensive view of model performance across all possible thresholds."
1207
+ },
1208
+ {
1209
+ "question": "In Bayesian optimization, what is the role of the acquisition function?",
1210
+ "options": [
1211
+ "To model the objective function's probability distribution",
1212
+ "To determine the next set of hyperparameters to evaluate",
1213
+ "To regularize the complexity of the surrogate model",
1214
+ "To handle categorical variables in the search space"
1215
+ ],
1216
+ "correct": 1,
1217
+ "explanation": "The acquisition function balances exploration and exploitation to suggest the most promising hyperparameters to evaluate next, based on the surrogate model's predictions."
1218
+ },
1219
+ {
1220
+ "question": "What differentiates a variational autoencoder (VAE) from a standard autoencoder?",
1221
+ "options": [
1222
+ "VAEs use convolutional layers exclusively",
1223
+ "VAEs learn a latent probability distribution rather than discrete encodings",
1224
+ "VAEs require labeled data for training",
1225
+ "VAEs are restricted to binary classification tasks"
1226
+ ],
1227
+ "correct": 1,
1228
+ "explanation": "VAEs learn the parameters of a probability distribution representing the data in latent space, enabling generative capabilities through sampling, unlike standard autoencoders which learn deterministic encodings."
1229
+ }
1230
+ ]
1231
+ };
1232
+ </script>
1233
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=ssmita25/ai-quiz-with-deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
1234
+ </html>