Hugging Face's logo

Spaces:
ghost613
/
quiz
Running

App Files Community
ghost613 commited on
Commit
51bd93f
·
verified ·
1 Parent(s): ee21e1c

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +543 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Quiz
3
- emoji: 👀
4
- colorFrom: yellow
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: quiz
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,543 @@
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>BrainyQuiz - Test Your General Knowledge</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes pulse {
11
+ 0%, 100% { transform: scale(1); }
12
+ 50% { transform: scale(1.05); }
13
+ }
14
+ .pulse-animation {
15
+ animation: pulse 1.5s infinite;
16
+ }
17
+ .option-selected {
18
+ transform: scale(0.98);
19
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
20
+ }
21
+ .progress-bar {
22
+ transition: width 0.5s ease-in-out;
23
+ }
24
+ .fade-in {
25
+ animation: fadeIn 0.5s ease-in;
26
+ }
27
+ @keyframes fadeIn {
28
+ from { opacity: 0; }
29
+ to { opacity: 1; }
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="bg-gradient-to-br from-blue-50 to-purple-50 min-h-screen font-sans">
34
+ <div class="container mx-auto px-4 py-8 max-w-4xl">
35
+ <!-- Header -->
36
+ <header class="text-center mb-12 fade-in">
37
+ <h1 class="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 mb-2">
38
+ <i class="fas fa-brain mr-2"></i>BrainyQuiz
39
+ </h1>
40
+ <p class="text-gray-600 text-lg">Test your general knowledge with our challenging quiz!</p>
41
+ </header>
42
+
43
+ <!-- Quiz Container -->
44
+ <div id="quiz-container" class="bg-white rounded-xl shadow-xl overflow-hidden transition-all duration-300">
45
+ <!-- Start Screen -->
46
+ <div id="start-screen" class="p-8 text-center fade-in">
47
+ <div class="w-24 h-24 mx-auto mb-6 bg-blue-100 rounded-full flex items-center justify-center">
48
+ <i class="fas fa-question text-blue-500 text-4xl"></i>
49
+ </div>
50
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Ready to Challenge Yourself?</h2>
51
+ <p class="text-gray-600 mb-8">This quiz contains 10 questions from various general knowledge categories. Try to answer as many as you can correctly!</p>
52
+
53
+ <div class="mb-8">
54
+ <label for="difficulty" class="block text-gray-700 font-medium mb-2">Select Difficulty:</label>
55
+ <select id="difficulty" class="w-full md:w-64 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
56
+ <option value="easy">Easy</option>
57
+ <option value="medium" selected>Medium</option>
58
+ <option value="hard">Hard</option>
59
+ </select>
60
+ </div>
61
+
62
+ <button id="start-btn" class="px-8 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-105 pulse-animation">
63
+ Start Quiz <i class="fas fa-play ml-2"></i>
64
+ </button>
65
+ </div>
66
+
67
+ <!-- Quiz Screen -->
68
+ <div id="quiz-screen" class="hidden p-6 md:p-8">
69
+ <!-- Progress Bar -->
70
+ <div class="mb-6">
71
+ <div class="flex justify-between items-center mb-2">
72
+ <span class="text-sm font-medium text-gray-600">Question <span id="current-question">1</span>/<span id="total-questions">10</span></span>
73
+ <span class="text-sm font-medium text-gray-600"><span id="score">0</span> points</span>
74
+ </div>
75
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
76
+ <div id="progress-bar" class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
77
+ </div>
78
+ </div>
79
+
80
+ <!-- Question -->
81
+ <div id="question-container" class="mb-8">
82
+ <h2 id="question" class="text-xl md:text-2xl font-semibold text-gray-800 mb-6"></h2>
83
+
84
+ <!-- Options -->
85
+ <div id="options-container" class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-8">
86
+ <!-- Options will be inserted here by JavaScript -->
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Navigation -->
91
+ <div class="flex justify-between">
92
+ <button id="prev-btn" class="px-6 py-2 bg-gray-200 text-gray-700 font-medium rounded-lg hover:bg-gray-300 transition disabled:opacity-50 disabled:cursor-not-allowed" disabled>
93
+ <i class="fas fa-arrow-left mr-2"></i> Previous
94
+ </button>
95
+ <button id="next-btn" class="px-6 py-2 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition">
96
+ Next <i class="fas fa-arrow-right ml-2"></i>
97
+ </button>
98
+ <button id="submit-btn" class="px-6 py-2 bg-green-500 text-white font-medium rounded-lg hover:bg-green-600 transition hidden">
99
+ Submit <i class="fas fa-check ml-2"></i>
100
+ </button>
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Results Screen -->
105
+ <div id="results-screen" class="hidden p-8 text-center">
106
+ <div class="w-32 h-32 mx-auto mb-6 rounded-full flex items-center justify-center" id="result-icon-container">
107
+ <!-- Icon will be inserted here by JavaScript -->
108
+ </div>
109
+ <h2 class="text-3xl font-bold text-gray-800 mb-4" id="result-title"></h2>
110
+ <p class="text-xl text-gray-600 mb-6">You scored <span id="final-score" class="font-bold text-blue-600">0</span> out of <span id="max-score" class="font-bold">10</span></p>
111
+
112
+ <div class="bg-gray-100 rounded-lg p-4 mb-8 text-left max-w-md mx-auto">
113
+ <h3 class="font-semibold text-gray-700 mb-2">Quiz Summary:</h3>
114
+ <p class="text-sm text-gray-600"><span id="correct-answers" class="font-medium text-green-600">0</span> correct answers</p>
115
+ <p class="text-sm text-gray-600"><span id="wrong-answers" class="font-medium text-red-600">0</span> wrong answers</p>
116
+ <p class="text-sm text-gray-600">Difficulty: <span id="played-difficulty" class="font-medium text-blue-600">Medium</span></p>
117
+ </div>
118
+
119
+ <div class="flex justify-center gap-4">
120
+ <button id="retry-btn" class="px-6 py-2 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition">
121
+ <i class="fas fa-redo mr-2"></i> Try Again
122
+ </button>
123
+ <button id="new-quiz-btn" class="px-6 py-2 bg-purple-500 text-white font-medium rounded-lg hover:bg-purple-600 transition">
124
+ <i class="fas fa-list mr-2"></i> New Quiz
125
+ </button>
126
+ </div>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Footer -->
131
+ <footer class="mt-12 text-center text-gray-500 text-sm">
132
+ <p>© 2023 BrainyQuiz. All rights reserved.</p>
133
+ <p class="mt-1">Test your knowledge and challenge your friends!</p>
134
+ </footer>
135
+ </div>
136
+
137
+ <script>
138
+ document.addEventListener('DOMContentLoaded', function() {
139
+ // DOM Elements
140
+ const startScreen = document.getElementById('start-screen');
141
+ const quizScreen = document.getElementById('quiz-screen');
142
+ const resultsScreen = document.getElementById('results-screen');
143
+ const startBtn = document.getElementById('start-btn');
144
+ const prevBtn = document.getElementById('prev-btn');
145
+ const nextBtn = document.getElementById('next-btn');
146
+ const submitBtn = document.getElementById('submit-btn');
147
+ const retryBtn = document.getElementById('retry-btn');
148
+ const newQuizBtn = document.getElementById('new-quiz-btn');
149
+ const questionElement = document.getElementById('question');
150
+ const optionsContainer = document.getElementById('options-container');
151
+ const currentQuestionElement = document.getElementById('current-question');
152
+ const totalQuestionsElement = document.getElementById('total-questions');
153
+ const scoreElement = document.getElementById('score');
154
+ const progressBar = document.getElementById('progress-bar');
155
+ const finalScoreElement = document.getElementById('final-score');
156
+ const maxScoreElement = document.getElementById('max-score');
157
+ const correctAnswersElement = document.getElementById('correct-answers');
158
+ const wrongAnswersElement = document.getElementById('wrong-answers');
159
+ const playedDifficultyElement = document.getElementById('played-difficulty');
160
+ const resultTitleElement = document.getElementById('result-title');
161
+ const resultIconContainer = document.getElementById('result-icon-container');
162
+ const difficultySelect = document.getElementById('difficulty');
163
+
164
+ // Quiz Variables
165
+ let currentQuestionIndex = 0;
166
+ let score = 0;
167
+ let questions = [];
168
+ let userAnswers = [];
169
+ let quizCompleted = false;
170
+
171
+ // Questions Data (can be expanded or fetched from an API)
172
+ const questionsData = {
173
+ easy: [
174
+ {
175
+ question: "What is the capital of France?",
176
+ options: ["Berlin", "Madrid", "Paris", "Rome"],
177
+ answer: "Paris",
178
+ points: 1
179
+ },
180
+ {
181
+ question: "Which planet is known as the Red Planet?",
182
+ options: ["Venus", "Mars", "Jupiter", "Saturn"],
183
+ answer: "Mars",
184
+ points: 1
185
+ },
186
+ {
187
+ question: "What is the largest mammal in the world?",
188
+ options: ["Elephant", "Blue Whale", "Giraffe", "Polar Bear"],
189
+ answer: "Blue Whale",
190
+ points: 1
191
+ },
192
+ {
193
+ question: "Who painted the Mona Lisa?",
194
+ options: ["Vincent van Gogh", "Pablo Picasso", "Leonardo da Vinci", "Michelangelo"],
195
+ answer: "Leonardo da Vinci",
196
+ points: 1
197
+ },
198
+ {
199
+ question: "What is the chemical symbol for gold?",
200
+ options: ["Go", "Gd", "Au", "Ag"],
201
+ answer: "Au",
202
+ points: 1
203
+ },
204
+ {
205
+ question: "Which country is home to the kangaroo?",
206
+ options: ["New Zealand", "South Africa", "Australia", "Brazil"],
207
+ answer: "Australia",
208
+ points: 1
209
+ },
210
+ {
211
+ question: "What is the largest ocean on Earth?",
212
+ options: ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"],
213
+ answer: "Pacific Ocean",
214
+ points: 1
215
+ },
216
+ {
217
+ question: "How many continents are there on Earth?",
218
+ options: ["5", "6", "7", "8"],
219
+ answer: "7",
220
+ points: 1
221
+ },
222
+ {
223
+ question: "What is the main ingredient in guacamole?",
224
+ options: ["Tomato", "Avocado", "Onion", "Pepper"],
225
+ answer: "Avocado",
226
+ points: 1
227
+ },
228
+ {
229
+ question: "Which year did World War II end?",
230
+ options: ["1943", "1945", "1947", "1950"],
231
+ answer: "1945",
232
+ points: 1
233
+ }
234
+ ],
235
+ medium: [
236
+ {
237
+ question: "Which element has the atomic number 1?",
238
+ options: ["Helium", "Hydrogen", "Oxygen", "Carbon"],
239
+ answer: "Hydrogen",
240
+ points: 2
241
+ },
242
+ {
243
+ question: "Who wrote 'Romeo and Juliet'?",
244
+ options: ["Charles Dickens", "William Shakespeare", "Jane Austen", "Mark Twain"],
245
+ answer: "William Shakespeare",
246
+ points: 2
247
+ },
248
+ {
249
+ question: "What is the largest organ in the human body?",
250
+ options: ["Liver", "Brain", "Skin", "Heart"],
251
+ answer: "Skin",
252
+ points: 2
253
+ },
254
+ {
255
+ question: "Which country is the largest by land area?",
256
+ options: ["Canada", "China", "United States", "Russia"],
257
+ answer: "Russia",
258
+ points: 2
259
+ },
260
+ {
261
+ question: "What is the currency of Japan?",
262
+ options: ["Yuan", "Won", "Yen", "Ringgit"],
263
+ answer: "Yen",
264
+ points: 2
265
+ },
266
+ {
267
+ question: "Which planet is closest to the Sun?",
268
+ options: ["Venus", "Mercury", "Earth", "Mars"],
269
+ answer: "Mercury",
270
+ points: 2
271
+ },
272
+ {
273
+ question: "Who discovered gravity?",
274
+ options: ["Albert Einstein", "Isaac Newton", "Galileo Galilei", "Nikola Tesla"],
275
+ answer: "Isaac Newton",
276
+ points: 2
277
+ },
278
+ {
279
+ question: "What is the tallest mountain in the world?",
280
+ options: ["K2", "Mount Everest", "Kangchenjunga", "Lhotse"],
281
+ answer: "Mount Everest",
282
+ points: 2
283
+ },
284
+ {
285
+ question: "Which language has the most native speakers?",
286
+ options: ["English", "Hindi", "Spanish", "Mandarin Chinese"],
287
+ answer: "Mandarin Chinese",
288
+ points: 2
289
+ },
290
+ {
291
+ question: "What is the largest desert in the world?",
292
+ options: ["Sahara Desert", "Arabian Desert", "Gobi Desert", "Antarctica"],
293
+ answer: "Antarctica",
294
+ points: 2
295
+ }
296
+ ],
297
+ hard: [
298
+ {
299
+ question: "Which country has the most time zones?",
300
+ options: ["United States", "Russia", "France", "China"],
301
+ answer: "France",
302
+ points: 3
303
+ },
304
+ {
305
+ question: "What is the only letter that doesn't appear in any US state name?",
306
+ options: ["Q", "Z", "X", "J"],
307
+ answer: "Q",
308
+ points: 3
309
+ },
310
+ {
311
+ question: "Which planet has the most moons?",
312
+ options: ["Jupiter", "Saturn", "Uranus", "Neptune"],
313
+ answer: "Saturn",
314
+ points: 3
315
+ },
316
+ {
317
+ question: "What is the only edible food that never goes bad?",
318
+ options: ["Salt", "Sugar", "Honey", "Rice"],
319
+ answer: "Honey",
320
+ points: 3
321
+ },
322
+ {
323
+ question: "Which country invented tea?",
324
+ options: ["India", "England", "China", "Japan"],
325
+ answer: "China",
326
+ points: 3
327
+ },
328
+ {
329
+ question: "What is the most spoken language in the world?",
330
+ options: ["English", "Mandarin Chinese", "Hindi", "Spanish"],
331
+ answer: "English",
332
+ points: 3
333
+ },
334
+ {
335
+ question: "Which animal has three hearts?",
336
+ options: ["Octopus", "Squid", "Cuttlefish", "Nautilus"],
337
+ answer: "Octopus",
338
+ points: 3
339
+ },
340
+ {
341
+ question: "What is the only continent without reptiles or snakes?",
342
+ options: ["Australia", "Antarctica", "Europe", "North America"],
343
+ answer: "Antarctica",
344
+ points: 3
345
+ },
346
+ {
347
+ question: "Which country has the most islands?",
348
+ options: ["Indonesia", "Philippines", "Sweden", "Canada"],
349
+ answer: "Sweden",
350
+ points: 3
351
+ },
352
+ {
353
+ question: "What is the smallest country in the world?",
354
+ options: ["Monaco", "Vatican City", "San Marino", "Liechtenstein"],
355
+ answer: "Vatican City",
356
+ points: 3
357
+ }
358
+ ]
359
+ };
360
+
361
+ // Start Quiz
362
+ startBtn.addEventListener('click', startQuiz);
363
+
364
+ // Next Question
365
+ nextBtn.addEventListener('click', () => {
366
+ if (currentQuestionIndex < questions.length - 1) {
367
+ currentQuestionIndex++;
368
+ showQuestion();
369
+ } else if (currentQuestionIndex === questions.length - 1) {
370
+ showResults();
371
+ }
372
+ });
373
+
374
+ // Previous Question
375
+ prevBtn.addEventListener('click', () => {
376
+ if (currentQuestionIndex > 0) {
377
+ currentQuestionIndex--;
378
+ showQuestion();
379
+ }
380
+ });
381
+
382
+ // Submit Quiz
383
+ submitBtn.addEventListener('click', showResults);
384
+
385
+ // Retry Quiz
386
+ retryBtn.addEventListener('click', () => {
387
+ startQuiz(difficultySelect.value);
388
+ });
389
+
390
+ // New Quiz
391
+ newQuizBtn.addEventListener('click', () => {
392
+ startScreen.classList.remove('hidden');
393
+ quizScreen.classList.add('hidden');
394
+ resultsScreen.classList.add('hidden');
395
+ });
396
+
397
+ // Start Quiz Function
398
+ function startQuiz() {
399
+ const difficulty = difficultySelect.value;
400
+ questions = [...questionsData[difficulty]];
401
+ currentQuestionIndex = 0;
402
+ score = 0;
403
+ userAnswers = Array(questions.length).fill(null);
404
+ quizCompleted = false;
405
+
406
+ startScreen.classList.add('hidden');
407
+ quizScreen.classList.remove('hidden');
408
+ resultsScreen.classList.add('hidden');
409
+
410
+ totalQuestionsElement.textContent = questions.length;
411
+ showQuestion();
412
+ }
413
+
414
+ // Show Question Function
415
+ function showQuestion() {
416
+ const question = questions[currentQuestionIndex];
417
+ questionElement.textContent = question.question;
418
+
419
+ // Clear previous options
420
+ optionsContainer.innerHTML = '';
421
+
422
+ // Create new options
423
+ question.options.forEach((option, index) => {
424
+ const optionElement = document.createElement('button');
425
+ optionElement.className = `option-btn p-4 text-left border border-gray-200 rounded-lg hover:bg-gray-50 transition flex items-center ${
426
+ userAnswers[currentQuestionIndex] === index ? 'bg-blue-100 option-selected' : ''
427
+ }`;
428
+
429
+ optionElement.innerHTML = `
430
+ <span class="w-8 h-8 flex items-center justify-center bg-blue-100 text-blue-700 rounded-full mr-3 font-medium">${String.fromCharCode(65 + index)}</span>
431
+ <span>${option}</span>
432
+ `;
433
+
434
+ optionElement.addEventListener('click', () => selectOption(index));
435
+ optionsContainer.appendChild(optionElement);
436
+ });
437
+
438
+ // Update navigation buttons
439
+ currentQuestionElement.textContent = currentQuestionIndex + 1;
440
+ prevBtn.disabled = currentQuestionIndex === 0;
441
+
442
+ if (currentQuestionIndex === questions.length - 1) {
443
+ nextBtn.classList.add('hidden');
444
+ submitBtn.classList.remove('hidden');
445
+ } else {
446
+ nextBtn.classList.remove('hidden');
447
+ submitBtn.classList.add('hidden');
448
+ }
449
+
450
+ // Update progress bar
451
+ const progressPercentage = ((currentQuestionIndex + 1) / questions.length) * 100;
452
+ progressBar.style.width = `${progressPercentage}%`;
453
+
454
+ // Update score
455
+ scoreElement.textContent = score;
456
+ }
457
+
458
+ // Select Option Function
459
+ function selectOption(optionIndex) {
460
+ if (quizCompleted) return;
461
+
462
+ const question = questions[currentQuestionIndex];
463
+ const optionButtons = document.querySelectorAll('.option-btn');
464
+
465
+ // Remove selected class from all options
466
+ optionButtons.forEach(btn => {
467
+ btn.classList.remove('bg-blue-100', 'option-selected');
468
+ });
469
+
470
+ // Add selected class to clicked option
471
+ optionButtons[optionIndex].classList.add('bg-blue-100', 'option-selected');
472
+
473
+ // Store user answer
474
+ userAnswers[currentQuestionIndex] = optionIndex;
475
+
476
+ // Check if answer is correct (only if not already answered)
477
+ if (question.answer === question.options[optionIndex]) {
478
+ // Only add points if this question wasn't answered before
479
+ if (userAnswers[currentQuestionIndex] === null) {
480
+ score += question.points;
481
+ scoreElement.textContent = score;
482
+ }
483
+ } else {
484
+ // If changing from correct to wrong answer, subtract points
485
+ if (userAnswers[currentQuestionIndex] !== null &&
486
+ question.answer === question.options[userAnswers[currentQuestionIndex]]) {
487
+ score -= question.points;
488
+ scoreElement.textContent = score;
489
+ }
490
+ }
491
+ }
492
+
493
+ // Show Results Function
494
+ function showResults() {
495
+ quizCompleted = true;
496
+
497
+ // Calculate final score and correct answers
498
+ let correctAnswers = 0;
499
+ questions.forEach((question, index) => {
500
+ if (userAnswers[index] !== null &&
501
+ question.options[userAnswers[index]] === question.answer) {
502
+ correctAnswers++;
503
+ }
504
+ });
505
+
506
+ const maxScore = questions.reduce((sum, question) => sum + question.points, 0);
507
+ const percentage = (score / maxScore) * 100;
508
+
509
+ // Set results content
510
+ finalScoreElement.textContent = score;
511
+ maxScoreElement.textContent = maxScore;
512
+ correctAnswersElement.textContent = correctAnswers;
513
+ wrongAnswersElement.textContent = questions.length - correctAnswers;
514
+ playedDifficultyElement.textContent = difficultySelect.options[difficultySelect.selectedIndex].text;
515
+
516
+ // Set result title and icon based on performance
517
+ let resultTitle, resultIcon, iconColor;
518
+ if (percentage >= 80) {
519
+ resultTitle = "Excellent!";
520
+ resultIcon = "fa-trophy";
521
+ iconColor = "bg-yellow-100 text-yellow-500";
522
+ } else if (percentage >= 50) {
523
+ resultTitle = "Good Job!";
524
+ resultIcon = "fa-thumbs-up";
525
+ iconColor = "bg-blue-100 text-blue-500";
526
+ } else {
527
+ resultTitle = "Try Again!";
528
+ resultIcon = "fa-redo";
529
+ iconColor = "bg-red-100 text-red-500";
530
+ }
531
+
532
+ resultTitleElement.textContent = resultTitle;
533
+ resultIconContainer.className = `w-32 h-32 mx-auto mb-6 rounded-full flex items-center justify-center ${iconColor}`;
534
+ resultIconContainer.innerHTML = `<i class="fas ${resultIcon} text-5xl"></i>`;
535
+
536
+ // Show results screen
537
+ quizScreen.classList.add('hidden');
538
+ resultsScreen.classList.remove('hidden');
539
+ }
540
+ });
541
+ </script>
542
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ghost613/quiz" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
543
+ </html>