Spaces:
Running
Running
Update index.html
Browse files- index.html +368 -18
index.html
CHANGED
@@ -1,19 +1,369 @@
|
|
1 |
-
<!
|
2 |
-
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>Week 1 Python Questions</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: 90%;
|
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 |
+
#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>
|
106 |
+
<h1>Week 1 Python Questions</h1>
|
107 |
+
<p>
|
108 |
+
<strong>Learn More:</strong>
|
109 |
+
<a href="https://chatgpt.com/g/g-67d5c827fc7c81919c5397d969d78a90-python-buddy-and-joke-teller" target="_blank">
|
110 |
+
Python Buddy and Joke Teller
|
111 |
+
</a>
|
112 |
+
</p>
|
113 |
+
<div id="game-board">
|
114 |
+
<!-- Category Headers -->
|
115 |
+
<div class="category">Variables & Data Structures</div>
|
116 |
+
<div class="category">Operators</div>
|
117 |
+
<div class="category">Conditional Statements</div>
|
118 |
+
<div class="category">Looping Statements</div>
|
119 |
+
<div class="category">Functions</div>
|
120 |
+
<!-- Question Cards will be created dynamically below the headers -->
|
121 |
+
</div>
|
122 |
+
<div id="question-display"></div>
|
123 |
+
<div id="score">Score: 0</div>
|
124 |
+
|
125 |
+
<script>
|
126 |
+
const categories = [
|
127 |
+
"Variables & Data Structures",
|
128 |
+
"Operators",
|
129 |
+
"Conditional Statements",
|
130 |
+
"Looping Statements",
|
131 |
+
"Functions"
|
132 |
+
];
|
133 |
+
const questions = [
|
134 |
+
// Variables & Data Structures
|
135 |
+
[
|
136 |
+
{
|
137 |
+
q: "Which of the following is true regarding variables in Python?",
|
138 |
+
a: [
|
139 |
+
"Values assigned to variables can be modified",
|
140 |
+
"Variables can store data structures such as arrays and dictionaries",
|
141 |
+
"Variables can only store integer and floats",
|
142 |
+
"Variables can store integer, floats, strings and booleans"
|
143 |
+
],
|
144 |
+
correct: 3
|
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 |
+
],
|
167 |
+
// Operators
|
168 |
+
[
|
169 |
+
{
|
170 |
+
q: "Which of the following combinations accurately matches mathematical symbols with their respective operations?",
|
171 |
+
a: [
|
172 |
+
"+ for addition, - for subtraction",
|
173 |
+
"* for exponentiation, / for modulus",
|
174 |
+
"% for multiplication, ** for division",
|
175 |
+
"** for multiplication, % for subtraction"
|
176 |
+
],
|
177 |
+
correct: 0
|
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 |
+
],
|
200 |
+
// Conditional Statements
|
201 |
+
[
|
202 |
+
{
|
203 |
+
q: "Which statement accurately describes the behavior of the 'elif' construct in Python?",
|
204 |
+
a: [
|
205 |
+
"\"elif\" is used to define a block of code to be executed if the preceding \"if\" or \"elif\" condition(s) evaluate to False.",
|
206 |
+
"\"elif\" is mandatory and must be included after every \"if\" statement.",
|
207 |
+
"\"elif\" is used only when there are multiple conditions and no \"else\" block is present.",
|
208 |
+
"\"elif\" is equivalent to \"else if\" and can be used interchangeably with the \"else\" statement."
|
209 |
+
],
|
210 |
+
correct: 0
|
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 |
+
],
|
233 |
+
// Looping Statements
|
234 |
+
[
|
235 |
+
{
|
236 |
+
q: "Which of the following statements is true regarding loops in Python?",
|
237 |
+
a: [
|
238 |
+
"The \"for\" loop requires a condition to be evaluated before execution.",
|
239 |
+
"The \"for\" loop iterates through a sequence, executing on each element.",
|
240 |
+
"The \"while\" loop iterates through a sequence, executing on each element.",
|
241 |
+
"The \"while\" loop does not require a condition to be evaluated."
|
242 |
+
],
|
243 |
+
correct: 1
|
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 |
+
],
|
266 |
+
// Functions
|
267 |
+
[
|
268 |
+
{
|
269 |
+
q: "What is the primary purpose of functions in Python?",
|
270 |
+
a: [
|
271 |
+
"To execute a specific task only once in a program.",
|
272 |
+
"To break code into modular chunks for reusability and organization.",
|
273 |
+
"To combine multiple variables into a single variable.",
|
274 |
+
"To declare built-in variables that are predefined."
|
275 |
+
],
|
276 |
+
correct: 1
|
277 |
+
},
|
278 |
+
{
|
279 |
+
q: "How do you define a user-defined function in Python?",
|
280 |
+
a: [
|
281 |
+
"function functionName(parameters):",
|
282 |
+
"def functionName(parameters):",
|
283 |
+
"func functionName(parameters):",
|
284 |
+
"define functionName(parameters):"
|
285 |
+
],
|
286 |
+
correct: 1
|
287 |
+
},
|
288 |
+
{
|
289 |
+
q: "Which of the following statements about the return statement in Python is false?",
|
290 |
+
a: [
|
291 |
+
"A function can have multiple return statements.",
|
292 |
+
"A function can return multiple values in a single return statement.",
|
293 |
+
"The return statement returns a value computed by the function.",
|
294 |
+
"A function must always include a return statement."
|
295 |
+
],
|
296 |
+
correct: 3
|
297 |
+
}
|
298 |
+
]
|
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");
|
314 |
+
card.className = "card";
|
315 |
+
card.textContent = "$" + ((row + 1) * 100);
|
316 |
+
card.onclick = () => showQuestion(col, row, card);
|
317 |
+
gameBoard.appendChild(card);
|
318 |
+
}
|
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 |
+
|