eaglelandsonce commited on
Commit
73f2a57
·
verified ·
1 Parent(s): 0b4e513

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +368 -18
index.html CHANGED
@@ -1,19 +1,369 @@
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>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
+