Hugging Face's logo

Spaces:
eaglelandsonce
/
MLS_GenerativeAI_Landscape
Running

App Files Community
eaglelandsonce commited on
Commit
5154941
·
verified ·
1 Parent(s): cae0e49

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +365 -131
index.html CHANGED
@@ -1,175 +1,409 @@
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>Generative AI Jeopardy</title>
7
  <style>
8
- body {
9
- font-family: Arial, sans-serif;
10
- display: flex;
11
- flex-direction: column;
12
- align-items: center;
13
- background-color: #f0f0f0;
14
- margin: 0;
15
- }
16
- h1 {
17
- color: #0078D4;
18
- }
19
- #game-board {
20
- display: grid;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21
  grid-template-columns: repeat(5, 1fr);
22
- grid-auto-rows: 100px;
23
- gap: 2px;
24
- margin: 20px 0;
25
- background-color: #000;
26
- border: 4px solid #000;
27
- width: 80%;
28
- }
29
- .category {
30
- background-color: #005a9e;
31
- color: #fff;
32
- font-weight: bold;
33
- display: flex;
34
- justify-content: center;
35
- align-items: center;
36
- text-align: center;
37
- font-size: 18px;
38
- border: 1px solid #000;
39
- }
40
- .card {
41
- background-color: #0078D4;
42
- color: #fff;
43
- display: flex;
44
- justify-content: center;
45
- align-items: center;
46
- font-size: 16px;
47
- font-weight: bold;
48
- cursor: pointer;
49
- border: 1px solid #000;
50
- text-align: center;
51
- transition: background-color 0.3s;
52
- }
53
- .card:hover {
54
- background-color: #005a9e;
55
- }
56
- .card.disabled {
57
- background-color: #cccccc;
58
- cursor: default;
59
- }
60
- #question-display {
61
- width: 80%;
62
- text-align: center;
63
- margin-bottom: 20px;
64
- }
65
- #question-display button {
66
- display: block;
67
- margin: 10px auto;
68
- padding: 10px 20px;
69
- font-size: 16px;
70
- cursor: pointer;
71
- }
72
- #score {
73
- font-size: 24px;
74
- font-weight: bold;
75
- color: #0078D4;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
77
  </style>
78
  </head>
79
  <body>
80
  <h1>Generative AI Jeopardy</h1>
81
- <p>
82
- <strong>Learn More:</strong>
83
- <a href="https://olympus.mygreatlearning.com/courses/125919" target="_blank">Generative AI Landscape</a>
84
- </p>
85
- <div id="game-board">
86
- <!-- Categories -->
87
- <div class="category">Generative AI Fundamentals</div>
88
- <div class="category">Machine Learning & Deep Learning</div>
89
- <div class="category">Foundation Models & Transformers</div>
90
- <div class="category">Vector Embeddings & LLMs</div>
91
- <div class="category">AI Risks & Hallucinations</div>
 
 
 
92
  </div>
 
93
  <div id="question-display"></div>
94
- <div id="score">Score: 0</div>
 
 
 
 
 
 
95
 
96
  <script>
 
 
 
 
 
 
 
 
 
97
  const questions = [
98
  [
99
- { q: "What is Generative AI?", a: ["AI that creates new data similar to training data", "A rule-based expert system", "A basic search algorithm"], correct: 0 },
100
- { q: "Which area of AI does Generative AI belong to?", a: ["Symbolic AI", "Deep Learning", "Database Management"], correct: 1 },
101
- { q: "What problem does Generative AI solve?", a: ["Sorting algorithms", "Data compression", "Inverse problem of classification"], correct: 2 }
 
 
 
 
 
 
 
 
102
  ],
103
  [
104
- { q: "What is the primary difference between Discriminative and Generative models?", a: ["Discriminative models generate new data", "They are identical", "Generative models learn data distribution"], correct: 2 },
105
- { q: "Which is NOT an example of a foundation model?", a: ["GPT-4", "BERT", "Linear Regression"], correct: 2 },
106
- { q: "Which ML technique is used to train Generative AI?", a: ["Linear Regression", "Unsupervised Learning", "Supervised Learning"], correct: 2 }
 
 
 
 
 
 
 
 
107
  ],
108
  [
109
- { q: "What key technology underpins Transformer models?", a: ["Markov Chains", "Decision Trees", "Attention Mechanism"], correct: 2 },
110
- { q: "Which company introduced the Transformer architecture?", a: ["Microsoft", "OpenAI", "Google"], correct: 2 },
111
- { q: "What makes Transformer models scalable?", a: ["More CPU cores", "Sequential execution", "Parallelization"], correct: 2 }
 
 
 
 
 
 
112
  ],
113
  [
114
- { q: "What are vector embeddings used for?", a: ["Sorting files", "Representing words numerically", "Data encryption"], correct: 1 },
115
- { q: "Which method is used to store vector embeddings?", a: ["Excel Sheets", "Vector Databases", "Data Frames"], correct: 1 },
116
- { q: "Which AI model uses vector embeddings heavily?", a: ["Clustering Models", "Large Language Models (LLMs)", "Decision Trees"], correct: 1 }
 
 
 
 
 
 
117
  ],
118
  [
119
- { q: "What is AI hallucination?", a: ["Overfitting", "A sleep disorder", "Generating incorrect or fabricated information"], correct: 2 },
120
- { q: "How can AI hallucinations be reduced?", a: ["Better data and fine-tuning", "Removing training data", "Increasing randomness"], correct: 0 },
121
- { q: "Which is a risk of Generative AI?", a: ["Better accuracy", "Improved efficiency", "Misinformation"], correct: 2 }
 
 
 
 
 
 
122
  ]
123
  ];
124
 
125
- let score = 0;
126
- const gameBoard = document.getElementById("game-board");
127
- const questionDisplay = document.getElementById("question-display");
128
- const scoreDisplay = document.getElementById("score");
 
 
 
 
 
 
 
 
 
 
 
129
 
130
  function createBoard() {
 
 
 
 
 
 
 
 
131
  for (let row = 0; row < 3; row++) {
132
  for (let col = 0; col < 5; col++) {
133
  const card = document.createElement("div");
134
- card.className = "card";
135
  card.textContent = `$${(row + 1) * 100}`;
136
- card.onclick = () => showQuestion(col, row, card);
137
- gameBoard.appendChild(card);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
138
  }
139
  }
140
  }
141
 
142
- function showQuestion(categoryIndex, questionIndex, cardElement) {
143
- if (cardElement.classList.contains("disabled")) return;
144
-
145
- const questionData = questions[categoryIndex][questionIndex];
146
- questionDisplay.innerHTML = "";
147
-
148
- const questionText = document.createElement("p");
149
- questionText.textContent = questionData.q;
150
- questionDisplay.appendChild(questionText);
151
-
152
- questionData.a.forEach((answer, index) => {
153
- const btn = document.createElement("button");
154
- btn.textContent = answer;
155
- btn.onclick = () => {
156
- if (index === questionData.correct) {
157
- score += (questionIndex + 1) * 100;
158
- } else {
159
- score -= (questionIndex + 1) * 100;
160
- }
161
- scoreDisplay.textContent = `Score: ${score}`;
162
- cardElement.classList.add("disabled");
163
- cardElement.onclick = null;
164
-
165
- setTimeout(() => {
166
- questionDisplay.innerHTML = "";
167
- }, 2000);
168
- };
169
- questionDisplay.appendChild(btn);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
170
  });
171
  }
172
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
173
  createBoard();
174
  </script>
175
  </body>
 
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>Generative AI Jeopardy</title>
7
  <style>
8
+ :root{
9
+ --blue:#0a49a6;
10
+ --blue-dark:#073a84;
11
+ --gold:#ffd24a;
12
+ --board-gap:10px;
13
+ --card-depth:28px;
14
+ }
15
+ *{box-sizing:border-box}
16
+ body{
17
+ font-family: system-ui, Arial, sans-serif;
18
+ display:flex;flex-direction:column;align-items:center;
19
+ background: radial-gradient(1200px 700px at 50% -200px, #f2f6ff 0%, #e9efff 30%, #cfdafc 100%) fixed;
20
+ margin:0; min-height:100vh;
21
+ }
22
+ h1{ color:#173e8c; margin:22px 0 6px; text-shadow:0 2px 0 #fff;}
23
+ a.source{ font-size:14px; color:#334; margin-bottom:8px; text-decoration:none}
24
+ a.source:hover{ text-decoration:underline }
25
+ .topbar {
26
+ width:min(1100px,95vw);
27
+ display:flex;
28
+ justify-content:space-between;
29
+ align-items:center;
30
+ gap:10px;
31
+ margin-bottom:8px;
32
+ }
33
+ .btn-reset{
34
+ padding:8px 12px; border-radius:10px; font-weight:800; cursor:pointer;
35
+ border:2px solid #0d3a85; color:#fff; background:linear-gradient(180deg,#1362ff,#0d3a85);
36
+ box-shadow:0 8px 18px rgba(0,0,0,.25);
37
+ }
38
+ .btn-reset:hover{ transform: translateY(-1px) }
39
+ .btn-reset:active{ transform: translateY(0) }
40
+ .stage{ perspective: 1200px; width:min(1100px, 95vw); }
41
+ #game-board{
42
+ display:grid;
43
  grid-template-columns: repeat(5, 1fr);
44
+ grid-auto-rows: 120px;
45
+ gap: var(--board-gap);
46
+ padding: var(--board-gap);
47
+ border-radius:18px;
48
+ background: linear-gradient(180deg, #0e1a3a, #01060f);
49
+ box-shadow:
50
+ 0 20px 45px rgba(0,0,0,.35),
51
+ inset 0 0 0 4px #000;
52
+ transform: rotateX(8deg);
53
+ transform-origin: top center;
54
+ }
55
+ .category, .card{
56
+ position:relative;
57
+ border-radius:14px;
58
+ user-select:none;
59
+ transform-style: preserve-3d;
60
+ transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
61
+ box-shadow:
62
+ 0 var(--card-depth) calc(var(--card-depth) + 12px) rgba(0,0,0,.35),
63
+ inset 0 0 0 1px rgba(255,255,255,.15);
64
+ }
65
+ .category{
66
+ background: linear-gradient(180deg, #004fbf 0%, #003d93 60%, #003684 100%);
67
+ color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:.3px;
68
+ display:flex; justify-content:center; align-items:center; text-align:center;
69
+ border:1px solid #00122c;
70
+ text-shadow:0 2px 0 rgba(0,0,0,.35);
71
+ padding: 8px;
72
+ }
73
+ .card{
74
+ cursor:pointer; font-weight:900; color: var(--gold);
75
+ background:
76
+ radial-gradient(80% 80% at 50% 25%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
77
+ linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%);
78
+ border:1px solid #031b3f;
79
+ display:flex; justify-content:center; align-items:center; text-align:center;
80
+ font-size: clamp(16px, 2.4vw, 26px);
81
+ text-shadow: 0 2px 0 #000, 0 0 10px rgba(255,210,74,.35);
82
+ }
83
+ .card.tilt:hover{
84
+ transform: translateZ(10px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
85
+ box-shadow:
86
+ 0 24px 48px rgba(0,0,0,.4),
87
+ 0 0 24px rgba(255,210,74,.15),
88
+ inset 0 0 0 1px rgba(255,255,255,.18);
89
+ filter: saturate(1.1);
90
+ }
91
+ .card:active{ transform: translateZ(0) scale(.985); box-shadow: 0 12px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12); }
92
+ .card.disabled{ cursor:default; color:#bfc7da; background: linear-gradient(180deg,#6b7aa6,#4e5b85); text-shadow:none; filter:grayscale(.2) brightness(.92); }
93
+ #question-display{ width:min(1000px, 92vw); text-align:center; margin:16px 0 6px; }
94
+ #question-display h2{ margin:8px 0 6px; color:#0d2b6f }
95
+ #question-display p { font-size: 22px; line-height: 1.4; }
96
+ #score{ font-size:24px; font-weight:800; color:#0d2b6f; margin:0 0 8px 0 }
97
+ .answer-container{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:14px }
98
+ .answer-btn{
99
+ margin:0; padding:10px 16px; font-size:18px; cursor:pointer;
100
+ border:2px solid #0d3a85; border-radius:10px; font-weight:800; color:#fff;
101
+ background: linear-gradient(180deg,#1362ff,#0d3a85);
102
+ box-shadow: 0 8px 18px rgba(0,0,0,.25);
103
+ transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
104
+ }
105
+ .answer-btn:hover{ transform: translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.28) }
106
+ .answer-btn:active{ transform: translateY(0); box-shadow:0 8px 18px rgba(0,0,0,.25) }
107
+ .answer-btn.disabled{ background:#aab4cc; color:#445; cursor:not-allowed; border-color:#889 }
108
+ .feedback{ margin-top:10px; font-size:18px; font-weight:800 }
109
+ .dd-overlay{
110
+ position: fixed; inset:0; display:none; align-items:center; justify-content:center;
111
+ z-index: 9999; pointer-events:none;
112
+ background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.08), rgba(0,0,0,.7));
113
+ animation: dd-bg 1.2s ease-in-out 2;
114
+ }
115
+ .dd-text{
116
+ font-size: clamp(40px, 7vw, 120px);
117
+ font-weight: 900; color:#ffe17a; letter-spacing:2px;
118
+ text-shadow:
119
+ 0 0 12px rgba(255,225,122,.9),
120
+ 0 0 40px rgba(255,225,122,.6),
121
+ 0 6px 0 #000;
122
+ animation: flash 1.2s steps(2, jump-none) 2, wobble .9s ease-in-out 2;
123
  }
124
+ @keyframes flash{ 0%,49%{opacity:1;filter:drop-shadow(0 0 24px rgba(255,225,122,.85));} 50%,100%{opacity:0;filter:none;} }
125
+ @keyframes wobble{ 0%{transform:scale(1) rotate(0)} 50%{transform:scale(1.06) rotate(-2deg)} 100%{transform:scale(1) rotate(0)} }
126
+ @keyframes dd-bg{ 0%{background: radial-gradient(40% 40% at 50% 50%, rgba(255,255,255,.12), rgba(0,0,0,.9));} 100%{background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.08), rgba(0,0,0,.7));} }
127
+ .flash-ring{ position:absolute; inset:-3px; border-radius:14px; pointer-events:none; box-shadow:0 0 0 3px rgba(255,225,122,.95), 0 0 30px 6px rgba(255,225,122,.6); animation: ring 1.2s ease-in-out 2; }
128
+ @keyframes ring{ 0%{opacity:1;transform:scale(1)} 50%{opacity:.1;transform:scale(.96)} 100%{opacity:1;transform:scale(1)} }
129
+ .daily-double-banner{ color:#b30000; font-weight:900; font-size:22px; margin:8px 0 }
130
+ #review{
131
+ width:min(1000px, 92vw);
132
+ margin:14px 0 24px 0;
133
+ padding:12px;
134
+ background:#fff;
135
+ border:1px solid #ccd3e0;
136
+ border-radius:12px;
137
+ box-shadow:0 6px 20px rgba(0,0,0,.08);
138
+ }
139
+ #review h3{ margin:0 0 8px 0; color:#0d2b6f }
140
+ .missed{ margin:8px 0; text-align:left }
141
+ .missed .q{ font-weight:700 }
142
+ .missed .a{ margin-left:8px }
143
  </style>
144
  </head>
145
  <body>
146
  <h1>Generative AI Jeopardy</h1>
147
+ <a class="source" href="https://olympus.mygreatlearning.com/courses/125919" target="_blank">
148
+ Learn More: Generative AI Landscape
149
+ </a>
150
+
151
+ <div class="topbar">
152
+ <div id="score">Score: 0</div>
153
+ <button class="btn-reset" id="reset-btn" title="Start a fresh round">Reset Game</button>
154
+ </div>
155
+
156
+ <div class="stage">
157
+ <div id="game-board">
158
+ <!-- Category headers injected -->
159
+ <!-- Cards injected -->
160
+ </div>
161
  </div>
162
+
163
  <div id="question-display"></div>
164
+ <div id="review" style="display:none;"></div>
165
+
166
+ <!-- Optional: add a daily-double.mp3 next to this file if you want sound -->
167
+ <audio id="dd-audio" preload="auto">
168
+ <source src="daily-double.mp3" type="audio/mpeg">
169
+ </audio>
170
+ <div id="dd-overlay" class="dd-overlay"><div class="dd-text">DAILY&nbsp;DOUBLE!</div></div>
171
 
172
  <script>
173
+ const categories = [
174
+ "Generative AI Fundamentals",
175
+ "Machine Learning & Deep Learning",
176
+ "Foundation Models & Transformers",
177
+ "Vector Embeddings & LLMs",
178
+ "AI Risks & Hallucinations"
179
+ ];
180
+
181
+ // Your original questions intact
182
  const questions = [
183
  [
184
+ { q: "What is Generative AI?", a: [
185
+ "AI that creates new data similar to training data",
186
+ "A rule-based expert system",
187
+ "A basic search algorithm"
188
+ ], correct: 0 },
189
+ { q: "Which area of AI does Generative AI belong to?", a: [
190
+ "Symbolic AI", "Deep Learning", "Database Management"
191
+ ], correct: 1 },
192
+ { q: "What problem does Generative AI solve?", a: [
193
+ "Sorting algorithms", "Data compression", "Inverse problem of classification"
194
+ ], correct: 2 }
195
  ],
196
  [
197
+ { q: "What is the primary difference between Discriminative and Generative models?", a: [
198
+ "Discriminative models generate new data",
199
+ "They are identical",
200
+ "Generative models learn data distribution"
201
+ ], correct: 2 },
202
+ { q: "Which is NOT an example of a foundation model?", a: [
203
+ "GPT-4", "BERT", "Linear Regression"
204
+ ], correct: 2 },
205
+ { q: "Which ML technique is used to train Generative AI?", a: [
206
+ "Linear Regression", "Unsupervised Learning", "Supervised Learning"
207
+ ], correct: 2 }
208
  ],
209
  [
210
+ { q: "What key technology underpins Transformer models?", a: [
211
+ "Markov Chains", "Decision Trees", "Attention Mechanism"
212
+ ], correct: 2 },
213
+ { q: "Which company introduced the Transformer architecture?", a: [
214
+ "Microsoft", "OpenAI", "Google"
215
+ ], correct: 2 },
216
+ { q: "What makes Transformer models scalable?", a: [
217
+ "More CPU cores", "Sequential execution", "Parallelization"
218
+ ], correct: 2 }
219
  ],
220
  [
221
+ { q: "What are vector embeddings used for?", a: [
222
+ "Sorting files", "Representing words numerically", "Data encryption"
223
+ ], correct: 1 },
224
+ { q: "Which method is used to store vector embeddings?", a: [
225
+ "Excel Sheets", "Vector Databases", "Data Frames"
226
+ ], correct: 1 },
227
+ { q: "Which AI model uses vector embeddings heavily?", a: [
228
+ "Clustering Models", "Large Language Models (LLMs)", "Decision Trees"
229
+ ], correct: 1 }
230
  ],
231
  [
232
+ { q: "What is AI hallucination?", a: [
233
+ "Overfitting", "A sleep disorder", "Generating incorrect or fabricated information"
234
+ ], correct: 2 },
235
+ { q: "How can AI hallucinations be reduced?", a: [
236
+ "Better data and fine-tuning", "Removing training data", "Increasing randomness"
237
+ ], correct: 0 },
238
+ { q: "Which is a risk of Generative AI?", a: [
239
+ "Better accuracy", "Improved efficiency", "Misinformation"
240
+ ], correct: 2 }
241
  ]
242
  ];
243
 
244
+ let score = 0, answered = 0;
245
+ const total = 15;
246
+ const board = document.getElementById("game-board"),
247
+ qdisp = document.getElementById("question-display"),
248
+ sdisp = document.getElementById("score"),
249
+ review = document.getElementById("review");
250
+ const ddOverlay = document.getElementById("dd-overlay");
251
+ const ddAudio = document.getElementById("dd-audio");
252
+ const shuffleRegistry = new Map();
253
+ const missedQuestions = [];
254
+
255
+ // Random Daily Double position
256
+ const dailyDouble = { col: Math.floor(Math.random() * 5), row: Math.floor(Math.random() * 3) };
257
+
258
+ document.getElementById('reset-btn').addEventListener('click', () => location.reload());
259
 
260
  function createBoard() {
261
+ // Inject category headers
262
+ categories.forEach(cat => {
263
+ const c = document.createElement("div");
264
+ c.className = "category";
265
+ c.textContent = cat;
266
+ board.appendChild(c);
267
+ });
268
+ // Inject 3 rows x 5 cols of cards
269
  for (let row = 0; row < 3; row++) {
270
  for (let col = 0; col < 5; col++) {
271
  const card = document.createElement("div");
272
+ card.className = "card tilt";
273
  card.textContent = `$${(row + 1) * 100}`;
274
+ card.dataset.col = col;
275
+ card.dataset.row = row;
276
+
277
+ card.addEventListener("mousemove", (e) => {
278
+ const r = card.getBoundingClientRect();
279
+ const x = (e.clientX - r.left) / r.width;
280
+ const y = (e.clientY - r.top) / r.height;
281
+ card.style.setProperty("--ry", `${(x - 0.5) * 10}deg`);
282
+ card.style.setProperty("--rx", `${(0.5 - y) * 10}deg`);
283
+ });
284
+ card.addEventListener("mouseleave", () => {
285
+ card.style.removeProperty("--ry");
286
+ card.style.removeProperty("--rx");
287
+ });
288
+
289
+ card.onclick = () => handleCardClick(card);
290
+ board.appendChild(card);
291
  }
292
  }
293
  }
294
 
295
+ function handleCardClick(card){
296
+ if (card.classList.contains("disabled")) return;
297
+ const col = +card.dataset.col;
298
+ const row = +card.dataset.row;
299
+ const isDD = (col === dailyDouble.col && row === dailyDouble.row);
300
+ if (isDD){
301
+ triggerDailyDouble(card, () => showQuestion(col, row, card, true));
302
+ } else {
303
+ showQuestion(col, row, card, false);
304
+ }
305
+ }
306
+
307
+ function triggerDailyDouble(card, onDone){
308
+ const ring = document.createElement("div");
309
+ ring.className = "flash-ring";
310
+ card.appendChild(ring);
311
+ ddAudio && ddAudio.play && ddAudio.play().catch(()=>{});
312
+ ddOverlay.style.display = "flex";
313
+ setTimeout(() => {
314
+ ddOverlay.style.display = "none";
315
+ ring.remove();
316
+ onDone();
317
+ }, 2400);
318
+ }
319
+
320
+ function showQuestion(categoryIndex, difficulty, card, isDailyDouble){
321
+ const q = questions[categoryIndex][difficulty];
322
+ // Shuffle answers for fairness
323
+ const options = q.a.map((text, origIdx) => ({ text, origIdx }));
324
+ for (let i = options.length - 1; i > 0; i--) {
325
+ const j = Math.floor(Math.random() * (i + 1));
326
+ [options[i], options[j]] = [options[j], options[i]];
327
+ }
328
+ const shuffledCorrectIndex = options.findIndex(o => o.origIdx === q.correct);
329
+ const key = `${categoryIndex}-${difficulty}`;
330
+ shuffleRegistry.set(key, { shuffledCorrectIndex, isDailyDouble });
331
+
332
+ const dailyDoubleBanner = isDailyDouble ? `<div class="daily-double-banner">🎉 DAILY DOUBLE! 🎉</div>` : "";
333
+
334
+ qdisp.innerHTML = `
335
+ ${dailyDoubleBanner}
336
+ <h2>${categories[categoryIndex]} for $${(difficulty + 1) * 100}${isDailyDouble ? " (x2)" : ""}</h2>
337
+ <p>${q.q}</p>
338
+ <div class="answer-container">
339
+ ${options.map((opt, i) =>
340
+ `<button class="answer-btn" data-ans="${i}" data-key="${key}">${opt.text}</button>`
341
+ ).join("")}
342
+ </div>
343
+ `;
344
+ card.classList.add("disabled");
345
+
346
+ document.querySelectorAll('.answer-btn').forEach(btn => {
347
+ btn.addEventListener('click', () => {
348
+ if (btn.classList.contains('disabled')) return;
349
+ const chosenIndex = parseInt(btn.getAttribute('data-ans'), 10);
350
+ const k = btn.getAttribute('data-key');
351
+ checkAnswer(categoryIndex, difficulty, chosenIndex, k);
352
+ }, { once: true });
353
  });
354
  }
355
 
356
+ function checkAnswer(cat, diff, chosenShuffledIndex, key){
357
+ const q = questions[cat][diff];
358
+ const reg = shuffleRegistry.get(key);
359
+ const isCorrect = (chosenShuffledIndex === reg.shuffledCorrectIndex);
360
+ let val = (diff + 1) * 100;
361
+ if (reg.isDailyDouble) val *= 2;
362
+
363
+ document.querySelectorAll(".answer-btn").forEach(b => {
364
+ b.disabled = true; b.classList.add("disabled");
365
+ });
366
+
367
+ if (isCorrect) {
368
+ score += val;
369
+ qdisp.innerHTML += `<p class="feedback" style="color:green;">✅ Correct! +$${val.toLocaleString()}</p>`;
370
+ } else {
371
+ score -= val;
372
+ const correctText = q.a[q.correct];
373
+ const chosenBtn = document.querySelector(`.answer-btn[data-ans="${chosenShuffledIndex}"][data-key="${key}"]`);
374
+ const chosenPretty = chosenBtn ? chosenBtn.textContent : "(your choice)";
375
+ qdisp.innerHTML += `<p class="feedback" style="color:#b00020;">❌ Wrong! −$${val.toLocaleString()}<br/>Correct answer: <em>${correctText}</em></p>`;
376
+ missedQuestions.push({
377
+ category: categories[cat],
378
+ value: `$${(diff+1)*100}${reg.isDailyDouble ? " (x2)" : ""}`,
379
+ question: q.q,
380
+ yourAnswer: chosenPretty,
381
+ correctAnswer: correctText
382
+ });
383
+ }
384
+ sdisp.textContent = `Score: ${score}`;
385
+
386
+ if (++answered === total) endGame();
387
+ }
388
+
389
+ function endGame(){
390
+ qdisp.innerHTML += `<h2 style="margin-top:12px">Game Over!</h2><p>Your final score: $${score.toLocaleString()}</p>`;
391
+ if (missedQuestions.length){
392
+ const items = missedQuestions.map(m =>
393
+ `<div class="missed">
394
+ <div class="q">(${m.category} • ${m.value}) ${m.question}</div>
395
+ <div class="a">Your answer: <em>${m.yourAnswer}</em></div>
396
+ <div class="a">Correct: <strong>${m.correctAnswer}</strong></div>
397
+ </div>`
398
+ ).join("");
399
+ review.style.display = "block";
400
+ review.innerHTML = `<h3>Review: Questions to Revisit (${missedQuestions.length})</h3>${items}`;
401
+ } else {
402
+ review.style.display = "block";
403
+ review.innerHTML = `<h3>Perfect Round!</h3><p>You answered all questions correctly 🎉</p>`;
404
+ }
405
+ }
406
+
407
  createBoard();
408
  </script>
409
  </body>