eaglelandsonce commited on
Commit
6f3693c
·
verified ·
1 Parent(s): 73f2a57

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +103 -112
index.html CHANGED
@@ -13,9 +13,7 @@
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);
@@ -50,56 +48,21 @@
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
- #score {
66
- font-size: 24px;
67
- font-weight: bold;
68
- color: #0078D4;
69
- }
70
  .answer-container {
71
- display: flex;
72
- flex-wrap: wrap;
73
- justify-content: center;
74
- margin-top: 20px;
75
  }
76
  .answer-btn {
77
- margin: 5px;
78
- padding: 10px 15px;
79
- font-size: 18px;
80
- cursor: pointer;
81
- text-align: center;
82
- border: 2px solid #005a9e;
83
- border-radius: 5px;
84
- background-color: #0078D4;
85
- color: #fff;
86
- font-weight: bold;
87
- transition: background-color 0.3s, color 0.3s;
88
- }
89
- .answer-btn:hover {
90
- background-color: #005a9e;
91
- color: #f0f0f0;
92
- }
93
- .answer-btn.disabled {
94
- background-color: #cccccc;
95
- color: #666;
96
- cursor: not-allowed;
97
- }
98
- .feedback {
99
- margin-top: 10px;
100
- font-size: 18px;
101
- font-weight: bold;
102
  }
 
 
 
103
  </style>
104
  </head>
105
  <body>
@@ -130,6 +93,7 @@
130
  "Looping Statements",
131
  "Functions"
132
  ];
 
133
  const questions = [
134
  // Variables & Data Structures
135
  [
@@ -145,22 +109,12 @@
145
  },
146
  {
147
  q: "Which of the following data structures in Python are mutable (can be modified after creation)?",
148
- a: [
149
- "Only List",
150
- "Tuple and Dictionary",
151
- "List and Tuple",
152
- "List and Dictionary"
153
- ],
154
  correct: 3
155
  },
156
  {
157
  q: "Which of the following will retrieve the two middle elements from the list?\n\nmy_list = [1, \"two\", 3.5, \"four\", 5, 6.0, \"seven\", 8.2]",
158
- a: [
159
- "my_list[3:5]",
160
- "my_list[4:6]",
161
- "my_list[-5:-3]",
162
- "my_list[-4:-6]"
163
- ],
164
  correct: 0
165
  }
166
  ],
@@ -178,22 +132,12 @@
178
  },
179
  {
180
  q: "What is the output of the expression 2 + 3 * 4 in Python?",
181
- a: [
182
- "14",
183
- "20",
184
- "24",
185
- "18"
186
- ],
187
  correct: 0
188
  },
189
  {
190
  q: "Which operator is used for exponentiation in Python?",
191
- a: [
192
- "^",
193
- "**",
194
- "pow",
195
- "exp"
196
- ],
197
  correct: 1
198
  }
199
  ],
@@ -211,22 +155,12 @@
211
  },
212
  {
213
  q: "What keyword is used in Python to start an alternative block if none of the preceding conditions are true?",
214
- a: [
215
- "else",
216
- "otherwise",
217
- "default",
218
- "finally"
219
- ],
220
  correct: 0
221
  },
222
  {
223
  q: "Consider the following code snippet:\n\nif x > 10:\n console.log(\"Greater\")\nelif x == 10:\n console.log(\"Equal\")\nelse:\n console.log(\"Less\")\n\nWhich block is executed when x is 10?",
224
- a: [
225
- "if block",
226
- "elif block",
227
- "else block",
228
- "None of the above"
229
- ],
230
  correct: 1
231
  }
232
  ],
@@ -244,22 +178,12 @@
244
  },
245
  {
246
  q: "What is the output of the following code?\n\nfor i in range(1, 4):\n document.write(i + ' ');",
247
- a: [
248
- "1 2 3",
249
- "1 2 3 4",
250
- "0 1 2",
251
- "1 3"
252
- ],
253
  correct: 0
254
  },
255
  {
256
  q: "Which loop structure is best suited for iterating over elements in a list when the number of iterations is known?",
257
- a: [
258
- "while loop",
259
- "for loop",
260
- "do-while loop",
261
- "if-else loop"
262
- ],
263
  correct: 1
264
  }
265
  ],
@@ -299,15 +223,33 @@
299
  ];
300
 
301
  let score = 0;
302
- let totalCards = 15;
303
  let answeredCards = 0;
304
  const gameBoard = document.getElementById("game-board");
305
  const questionDisplay = document.getElementById("question-display");
306
  const scoreDisplay = document.getElementById("score");
307
 
308
- // Create the 15 question cards (3 rows x 5 columns) after the category headers.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
309
  function createBoard() {
310
- // There are already 5 header divs; now create 15 cards.
311
  for (let row = 0; row < 3; row++) {
312
  for (let col = 0; col < 5; col++) {
313
  const card = document.createElement("div");
@@ -319,51 +261,100 @@
319
  }
320
  }
321
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
322
  function showQuestion(category, difficulty, cardElement) {
323
  if (cardElement.classList.contains("disabled")) return;
324
- const question = questions[category][difficulty];
325
- const answerHtml = question.a
 
 
 
326
  .map((answer, index) =>
327
  `<button class="answer-btn" onclick="checkAnswer(${category}, ${difficulty}, ${index})">${answer}</button>`
328
  )
329
  .join("");
 
330
  questionDisplay.innerHTML = `
331
  <h2>${categories[category]} for $${(difficulty + 1) * 100}</h2>
332
- <p>${question.q}</p>
333
  <div class="answer-container">${answerHtml}</div>`;
 
334
  cardElement.classList.add("disabled");
335
  cardElement.style.backgroundColor = "#cccccc";
336
  answeredCards++;
337
  }
338
 
339
- function checkAnswer(category, difficulty, selectedAnswer) {
340
- const question = questions[category][difficulty];
341
- const correctAnswer = question.a[question.correct];
342
- const isCorrect = selectedAnswer === question.correct;
 
 
343
  const value = (difficulty + 1) * 100;
 
344
  document.querySelectorAll(".answer-btn").forEach((btn) => {
345
  btn.disabled = true;
346
  btn.classList.add("disabled");
347
  });
 
348
  if (isCorrect) {
349
  score += value;
350
  questionDisplay.innerHTML += `<p class="feedback" style="color: green;">Correct! You earned $${value}.</p>`;
351
  } else {
352
  score -= value;
353
- questionDisplay.innerHTML += `<p class="feedback" style="color: red;">Wrong! You lost $${value}. The correct answer was: ${correctAnswer}</p>`;
354
  }
 
355
  scoreDisplay.textContent = "Score: " + score;
356
- if (answeredCards === totalCards) {
357
- endGame();
358
- }
359
  }
360
 
361
  function endGame() {
362
  questionDisplay.innerHTML = `<h2>Game Over!</h2><p>Your final score is $${score}.</p>`;
363
  }
364
 
 
 
 
365
  createBoard();
366
  </script>
367
  </body>
368
  </html>
369
-
 
13
  background-color: #f0f0f0;
14
  margin: 0;
15
  }
16
+ h1 { color: #0078D4; }
 
 
17
  #game-board {
18
  display: grid;
19
  grid-template-columns: repeat(5, 1fr);
 
48
  text-align: center;
49
  transition: background-color 0.3s;
50
  }
51
+ .card:hover { background-color: #005a9e; }
52
+ .card.disabled { background-color: #cccccc; cursor: default; }
53
+ #question-display { width: 80%; text-align: center; margin-bottom: 20px; }
54
+ #score { font-size: 24px; font-weight: bold; color: #0078D4; }
 
 
 
 
 
 
 
 
 
 
 
 
 
55
  .answer-container {
56
+ display: flex; flex-wrap: wrap; justify-content: center; margin-top: 20px;
 
 
 
57
  }
58
  .answer-btn {
59
+ margin: 5px; padding: 10px 15px; font-size: 18px; cursor: pointer; text-align: center;
60
+ border: 2px solid #005a9e; border-radius: 5px; background-color: #0078D4; color: #fff;
61
+ font-weight: bold; transition: background-color 0.3s, color 0.3s;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  }
63
+ .answer-btn:hover { background-color: #005a9e; color: #f0f0f0; }
64
+ .answer-btn.disabled { background-color: #cccccc; color: #666; cursor: not-allowed; }
65
+ .feedback { margin-top: 10px; font-size: 18px; font-weight: bold; }
66
  </style>
67
  </head>
68
  <body>
 
93
  "Looping Statements",
94
  "Functions"
95
  ];
96
+
97
  const questions = [
98
  // Variables & Data Structures
99
  [
 
109
  },
110
  {
111
  q: "Which of the following data structures in Python are mutable (can be modified after creation)?",
112
+ a: ["Only List", "Tuple and Dictionary", "List and Tuple", "List and Dictionary"],
 
 
 
 
 
113
  correct: 3
114
  },
115
  {
116
  q: "Which of the following will retrieve the two middle elements from the list?\n\nmy_list = [1, \"two\", 3.5, \"four\", 5, 6.0, \"seven\", 8.2]",
117
+ a: ["my_list[3:5]", "my_list[4:6]", "my_list[-5:-3]", "my_list[-4:-6]"],
 
 
 
 
 
118
  correct: 0
119
  }
120
  ],
 
132
  },
133
  {
134
  q: "What is the output of the expression 2 + 3 * 4 in Python?",
135
+ a: ["14", "20", "24", "18"],
 
 
 
 
 
136
  correct: 0
137
  },
138
  {
139
  q: "Which operator is used for exponentiation in Python?",
140
+ a: ["^", "**", "pow", "exp"],
 
 
 
 
 
141
  correct: 1
142
  }
143
  ],
 
155
  },
156
  {
157
  q: "What keyword is used in Python to start an alternative block if none of the preceding conditions are true?",
158
+ a: ["else", "otherwise", "default", "finally"],
 
 
 
 
 
159
  correct: 0
160
  },
161
  {
162
  q: "Consider the following code snippet:\n\nif x > 10:\n console.log(\"Greater\")\nelif x == 10:\n console.log(\"Equal\")\nelse:\n console.log(\"Less\")\n\nWhich block is executed when x is 10?",
163
+ a: ["if block", "elif block", "else block", "None of the above"],
 
 
 
 
 
164
  correct: 1
165
  }
166
  ],
 
178
  },
179
  {
180
  q: "What is the output of the following code?\n\nfor i in range(1, 4):\n document.write(i + ' ');",
181
+ a: ["1 2 3", "1 2 3 4", "0 1 2", "1 3"],
 
 
 
 
 
182
  correct: 0
183
  },
184
  {
185
  q: "Which loop structure is best suited for iterating over elements in a list when the number of iterations is known?",
186
+ a: ["while loop", "for loop", "do-while loop", "if-else loop"],
 
 
 
 
 
187
  correct: 1
188
  }
189
  ],
 
223
  ];
224
 
225
  let score = 0;
226
+ const totalCards = 15;
227
  let answeredCards = 0;
228
  const gameBoard = document.getElementById("game-board");
229
  const questionDisplay = document.getElementById("question-display");
230
  const scoreDisplay = document.getElementById("score");
231
 
232
+ // Precompute an even distribution of correct positions (0,1,2) over 15 cards.
233
+ const correctPositions = (() => {
234
+ const arr = [];
235
+ for (let i = 0; i < totalCards; i++) arr.push(i % 3); // five 0s, five 1s, five 2s
236
+ // Shuffle
237
+ for (let i = arr.length - 1; i > 0; i--) {
238
+ const j = Math.floor(Math.random() * (i + 1));
239
+ [arr[i], arr[j]] = [arr[j], arr[i]];
240
+ }
241
+ return arr;
242
+ })();
243
+
244
+ // Persist per-question generated choices and correct index.
245
+ const questionMeta = new Map(); // key: "c-d" -> { choices: string[3], correctIndex: 0|1|2 }
246
+
247
+ function getQuestionIndex(category, difficulty) {
248
+ // Stable mapping 0..14: group by category columns, each with 3 rows
249
+ return category * 3 + difficulty;
250
+ }
251
+
252
  function createBoard() {
 
253
  for (let row = 0; row < 3; row++) {
254
  for (let col = 0; col < 5; col++) {
255
  const card = document.createElement("div");
 
261
  }
262
  }
263
 
264
+ function prepareThreeChoices(category, difficulty) {
265
+ const key = `${category}-${difficulty}`;
266
+ if (questionMeta.has(key)) return questionMeta.get(key);
267
+
268
+ const q = questions[category][difficulty];
269
+ const all = q.a;
270
+ const correctIdxInAll = q.correct;
271
+ const correctText = all[correctIdxInAll];
272
+
273
+ // Collect indices of wrong answers
274
+ const wrongIdxs = all.map((_, i) => i).filter(i => i !== correctIdxInAll);
275
+
276
+ // Pick 2 wrong answers at random
277
+ for (let i = wrongIdxs.length - 1; i > 0; i--) {
278
+ const j = Math.floor(Math.random() * (i + 1));
279
+ [wrongIdxs[i], wrongIdxs[j]] = [wrongIdxs[j], wrongIdxs[i]];
280
+ }
281
+ const chosenWrongs = wrongIdxs.slice(0, 2).map(i => all[i]);
282
+
283
+ // Place correct answer at preassigned position for this question
284
+ const pos = correctPositions[getQuestionIndex(category, difficulty)];
285
+ const slots = [null, null, null];
286
+ slots[pos] = correctText;
287
+
288
+ // Fill remaining slots with the two wrong answers (random order)
289
+ const shuffledWrongs = [...chosenWrongs];
290
+ if (Math.random() < 0.5) shuffledWrongs.reverse();
291
+ let wi = 0;
292
+ for (let s = 0; s < 3; s++) {
293
+ if (slots[s] === null) {
294
+ slots[s] = shuffledWrongs[wi++];
295
+ }
296
+ }
297
+
298
+ const meta = { choices: slots, correctIndex: pos };
299
+ questionMeta.set(key, meta);
300
+ return meta;
301
+ }
302
+
303
  function showQuestion(category, difficulty, cardElement) {
304
  if (cardElement.classList.contains("disabled")) return;
305
+
306
+ const q = questions[category][difficulty];
307
+ const { choices, correctIndex } = prepareThreeChoices(category, difficulty);
308
+
309
+ const answerHtml = choices
310
  .map((answer, index) =>
311
  `<button class="answer-btn" onclick="checkAnswer(${category}, ${difficulty}, ${index})">${answer}</button>`
312
  )
313
  .join("");
314
+
315
  questionDisplay.innerHTML = `
316
  <h2>${categories[category]} for $${(difficulty + 1) * 100}</h2>
317
+ <p>${q.q}</p>
318
  <div class="answer-container">${answerHtml}</div>`;
319
+
320
  cardElement.classList.add("disabled");
321
  cardElement.style.backgroundColor = "#cccccc";
322
  answeredCards++;
323
  }
324
 
325
+ function checkAnswer(category, difficulty, selectedIndex) {
326
+ const key = `${category}-${difficulty}`;
327
+ const meta = questionMeta.get(key);
328
+ const q = questions[category][difficulty];
329
+ const correctText = meta.choices[meta.correctIndex];
330
+ const isCorrect = selectedIndex === meta.correctIndex;
331
  const value = (difficulty + 1) * 100;
332
+
333
  document.querySelectorAll(".answer-btn").forEach((btn) => {
334
  btn.disabled = true;
335
  btn.classList.add("disabled");
336
  });
337
+
338
  if (isCorrect) {
339
  score += value;
340
  questionDisplay.innerHTML += `<p class="feedback" style="color: green;">Correct! You earned $${value}.</p>`;
341
  } else {
342
  score -= value;
343
+ questionDisplay.innerHTML += `<p class="feedback" style="color: red;">Wrong! You lost $${value}. The correct answer was: ${correctText}</p>`;
344
  }
345
+
346
  scoreDisplay.textContent = "Score: " + score;
347
+ if (answeredCards === totalCards) endGame();
 
 
348
  }
349
 
350
  function endGame() {
351
  questionDisplay.innerHTML = `<h2>Game Over!</h2><p>Your final score is $${score}.</p>`;
352
  }
353
 
354
+ // Expose functions needed by inline onclick handlers
355
+ window.checkAnswer = checkAnswer;
356
+
357
  createBoard();
358
  </script>
359
  </body>
360
  </html>