Spaces:
Running
Running
Update index.html
Browse files- 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 |
-
|
55 |
-
}
|
56 |
-
|
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 |
-
|
79 |
-
font-
|
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 |
-
|
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 |
-
//
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
-
|
325 |
-
const
|
|
|
|
|
|
|
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>${
|
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,
|
340 |
-
const
|
341 |
-
const
|
342 |
-
const
|
|
|
|
|
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: ${
|
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>
|
|