Hugging Face's logo

Spaces:
Dembo
/
quizmaster-pro
Running

App Files Community
Dembo commited on
Commit
fa3a866
·
verified ·
1 Parent(s): 4ba4067

Create a Quiz App, with a quiz section, and a history section.

Browse files
Files changed (4) hide show
  1. README.md +8 -5
  2. history.html +244 -0
  3. index.html +159 -18
  4. quiz.html +384 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Quizmaster Pro
3
- emoji: 🌖
4
- colorFrom: pink
5
- colorTo: purple
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: QuizMaster Pro 🧠
3
+ colorFrom: gray
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
history.html ADDED
@@ -0,0 +1,244 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Quiz History - QuizMaster Pro</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.fog.min.js"></script>
12
+ <style>
13
+ .history-card {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .history-card:hover {
17
+ transform: translateY(-2px);
18
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
19
+ }
20
+ .score-ring {
21
+ transition: stroke-dashoffset 0.8s ease;
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="min-h-screen bg-gray-50">
26
+ <div id="vanta-bg" class="fixed inset-0 z-0"></div>
27
+
28
+ <nav class="bg-white shadow-lg fixed w-full z-10">
29
+ <div class="container mx-auto px-4">
30
+ <div class="flex justify-between items-center py-4">
31
+ <a href="index.html" class="flex items-center text-xl font-bold text-gray-800">
32
+ <i data-feather="brain" class="mr-2 text-red-500"></i>
33
+ QuizMaster Pro
34
+ </a>
35
+ <div class="flex space-x-4">
36
+ <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100">Quiz</a>
37
+ <a href="history.html" class="px-3 py-2 rounded-md text-sm font-medium bg-red-100 text-red-700">History</a>
38
+ </div>
39
+ </div>
40
+ </div>
41
+ </nav>
42
+
43
+ <main class="pt-20 pb-10 px-4 relative z-1">
44
+ <div class="container mx-auto max-w-4xl">
45
+ <div class="text-center mb-10">
46
+ <h1 class="text-4xl font-bold text-gray-800 mb-4">Your Quiz History</h1>
47
+ <p class="text-xl text-gray-600">Track your progress and improvement over time</p>
48
+ </div>
49
+
50
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
51
+ <div class="flex flex-wrap justify-between items-center mb-6">
52
+ <h2 class="text-2xl font-bold text-gray-800">Quiz Results</h2>
53
+ <div class="flex space-x-2 mt-4 md:mt-0">
54
+ <button id="filter-all" class="px-4 py-2 bg-red-500 text-white rounded-lg text-sm font-medium">All</button>
55
+ <button id="filter-geography" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm font-medium">Geography</button>
56
+ <button id="filter-programming" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm font-medium">Programming</button>
57
+ <button id="filter-movies" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm font-medium">Movies</button>
58
+ </div>
59
+ </div>
60
+
61
+ <div id="history-list" class="space-y-4">
62
+ <!-- History items will be loaded here -->
63
+ </div>
64
+
65
+ <div id="empty-state" class="text-center py-12 hidden">
66
+ <i data-feather="file-text" class="h-16 w-16 text-gray-300 mx-auto mb-4"></i>
67
+ <h3 class="text-xl font-semibold text-gray-600 mb-2">No quiz history yet</h3>
68
+ <p class="text-gray-500 mb-6">Take your first quiz to see your results here!</p>
69
+ <a href="index.html" class="inline-block px-6 py-3 bg-red-500 text-white rounded-lg font-medium hover:bg-red-600 transition">
70
+ Take a Quiz
71
+ </a>
72
+ </div>
73
+ </div>
74
+
75
+ <div class="bg-white rounded-xl shadow-md p-6">
76
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Statistics</h2>
77
+ <div class="grid md:grid-cols-3 gap-6">
78
+ <div class="text-center p-6 bg-red-50 rounded-lg">
79
+ <div class="text-3xl font-bold text-red-600 mb-2" id="total-quizzes">0</div>
80
+ <p class="text-gray-600">Total Quizzes Taken</p>
81
+ </div>
82
+ <div class="text-center p-6 bg-red-50 rounded-lg">
83
+ <div class="text-3xl font-bold text-red-600 mb-2" id="average-score">0%</div>
84
+ <p class="text-gray-600">Average Score</p>
85
+ </div>
86
+ <div class="text-center p-6 bg-red-50 rounded-lg">
87
+ <div class="text-3xl font-bold text-red-600 mb-2" id="best-category">-</div>
88
+ <p class="text-gray-600">Best Category</p>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </main>
94
+
95
+ <footer class="bg-white border-t border-gray-200 py-6 relative z-1">
96
+ <div class="container mx-auto px-4 text-center text-gray-600">
97
+ <p>© 2023 QuizMaster Pro. Track your progress, achieve mastery.</p>
98
+ </div>
99
+ </footer>
100
+
101
+ <script>
102
+ // Initialize Vanta.js background
103
+ VANTA.FOG({
104
+ el: "#vanta-bg",
105
+ mouseControls: true,
106
+ touchControls: true,
107
+ gyroControls: false,
108
+ minHeight: 200.00,
109
+ minWidth: 200.00,
110
+ highlightColor: 0xff5555,
111
+ midtoneColor: 0xff8888,
112
+ lowlightColor: 0xff2222,
113
+ baseColor: 0xf8fafc,
114
+ blurFactor: 0.40,
115
+ speed: 1.50,
116
+ zoom: 0.80
117
+ });
118
+
119
+ let currentFilter = 'all';
120
+ let quizHistory = [];
121
+
122
+ function loadHistory() {
123
+ quizHistory = JSON.parse(localStorage.getItem('quizResults') || '[]');
124
+ renderHistory();
125
+ updateStatistics();
126
+ }
127
+
128
+ function renderHistory() {
129
+ const container = document.getElementById('history-list');
130
+ const emptyState = document.getElementById('empty-state');
131
+
132
+ const filteredHistory = currentFilter === 'all'
133
+ ? quizHistory
134
+ : quizHistory.filter(item => item.category === currentFilter);
135
+
136
+ if (filteredHistory.length === 0) {
137
+ container.innerHTML = '';
138
+ emptyState.classList.remove('hidden');
139
+ return;
140
+ }
141
+
142
+ emptyState.classList.add('hidden');
143
+ container.innerHTML = filteredHistory.map((result, index) => `
144
+ <div class="history-card bg-white border border-gray-200 rounded-lg p-6">
145
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
146
+ <div class="mb-4 md:mb-0">
147
+ <h3 class="text-lg font-semibold text-gray-800 capitalize">${result.category} Quiz</h3>
148
+ <p class="text-sm text-gray-600">${new Date(result.date).toLocaleDateString()} • ${new Date(result.date).toLocaleTimeString()}</p>
149
+ </div>
150
+
151
+ <div class="flex items-center">
152
+ <div class="relative mr-4">
153
+ <svg width="60" height="60" class="transform -rotate-90">
154
+ <circle cx="30" cy="30" r="25" stroke="#e5e7eb" stroke-width="4" fill="transparent" />
155
+ <circle cx="30" cy="30" r="25" stroke="#ef4444" stroke-width="4"
156
+ fill="transparent" stroke-dasharray="157"
157
+ stroke-dashoffset="${157 - (result.score/result.total * 157)}"
158
+ class="score-ring" />
159
+ </svg>
160
+ <div class="absolute inset-0 flex items-center justify-center">
161
+ <span class="text-sm font-bold text-red-600">${Math.round((result.score/result.total)*100)}%</span>
162
+ </div>
163
+ </div>
164
+
165
+ <div class="text-right">
166
+ <div class="text-xl font-bold text-red-600">${result.score}/${result.total}</div>
167
+ <div class="text-sm text-gray-600">correct answers</div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ `).join('');
173
+ }
174
+
175
+ function updateStatistics() {
176
+ if (quizHistory.length === 0) {
177
+ document.getElementById('total-quizzes').textContent = '0';
178
+ document.getElementById('average-score').textContent = '0%';
179
+ document.getElementById('best-category').textContent = '-';
180
+ return;
181
+ }
182
+
183
+ // Total quizzes
184
+ document.getElementById('total-quizzes').textContent = quizHistory.length;
185
+
186
+ // Average score
187
+ const totalScore = quizHistory.reduce((sum, result) => sum + (result.score / result.total), 0);
188
+ const averageScore = (totalScore / quizHistory.length) * 100;
189
+ document.getElementById('average-score').textContent = `${Math.round(averageScore)}%`;
190
+
191
+ // Best category
192
+ const categoryScores = {};
193
+ quizHistory.forEach(result => {
194
+ if (!categoryScores[result.category]) {
195
+ categoryScores[result.category] = { total: 0, count: 0 };
196
+ }
197
+ categoryScores[result.category].total += result.score / result.total;
198
+ categoryScores[result.category].count++;
199
+ });
200
+
201
+ let bestCategory = '-';
202
+ let bestAverage = 0;
203
+
204
+ Object.entries(categoryScores).forEach(([category, data]) => {
205
+ const average = (data.total / data.count) * 100;
206
+ if (average > bestAverage) {
207
+ bestAverage = average;
208
+ bestCategory = category;
209
+ }
210
+ });
211
+
212
+ document.getElementById('best-category').textContent = bestCategory === '-' ? '-' : bestCategory.charAt(0).toUpperCase() + bestCategory.slice(1);
213
+ }
214
+
215
+ function setFilter(filter) {
216
+ currentFilter = filter;
217
+
218
+ // Update button styles
219
+ document.querySelectorAll('[id^="filter-"]').forEach(btn => {
220
+ btn.classList.remove('bg-red-500', 'text-white');
221
+ btn.classList.add('bg-gray-200', 'text-gray-700');
222
+ });
223
+ document.getElementById(`filter-${filter}`).classList.add('bg-red-500', 'text-white');
224
+ document.getElementById(`filter-${filter}`).classList.remove('bg-gray-200', 'text-gray-700');
225
+
226
+ renderHistory();
227
+ }
228
+
229
+ // Event listeners for filter buttons
230
+ document.getElementById('filter-all').addEventListener('click', () => setFilter('all'));
231
+ document.getElementById('filter-geography').addEventListener('click', () => setFilter('geography'));
232
+ document.getElementById('filter-programming').addEventListener('click', () => setFilter('programming'));
233
+ document.getElementById('filter-movies').addEventListener('click', () => setFilter('movies'));
234
+
235
+ // Initialize
236
+ document.addEventListener('DOMContentLoaded', () => {
237
+ loadHistory();
238
+ setFilter('all');
239
+ feather.replace();
240
+ });
241
+ </script>
242
+ </body>
243
+ </html>
244
+
index.html CHANGED
@@ -1,19 +1,160 @@
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>QuizMaster Pro - Test Your Knowledge</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
+ <style>
13
+ .vanta-bg {
14
+ position: fixed;
15
+ top: 0;
16
+ left: 0;
17
+ width: 100%;
18
+ height: 100%;
19
+ z-index: -1;
20
+ }
21
+ .card-hover {
22
+ transition: all 0.3s ease;
23
+ }
24
+ .card-hover:hover {
25
+ transform: translateY(-5px);
26
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
27
+ }
28
+ .progress-ring {
29
+ transition: stroke-dashoffset 0.5s ease;
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="min-h-screen bg-gray-50">
34
+ <div id="vanta-bg" class="vanta-bg"></div>
35
+
36
+ <nav class="bg-white shadow-lg fixed w-full z-10">
37
+ <div class="container mx-auto px-4">
38
+ <div class="flex justify-between items-center py-4">
39
+ <a href="index.html" class="flex items-center text-xl font-bold text-gray-800">
40
+ <i data-feather="brain" class="mr-2 text-red-500"></i>
41
+ QuizMaster Pro
42
+ </a>
43
+ <div class="flex space-x-4">
44
+ <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium bg-red-100 text-red-700">Quiz</a>
45
+ <a href="history.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100">History</a>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </nav>
50
+
51
+ <main class="pt-20 pb-10 px-4">
52
+ <div class="container mx-auto max-w-4xl">
53
+ <div class="text-center mb-10">
54
+ <h1 class="text-4xl font-bold text-gray-800 mb-4">Challenge Your Knowledge</h1>
55
+ <p class="text-xl text-gray-600">Select a quiz category and test your expertise!</p>
56
+ </div>
57
+
58
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
59
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
60
+ <div class="h-40 bg-red-100 flex items-center justify-center">
61
+ <i data-feather="globe" class="h-16 w-16 text-red-500"></i>
62
+ </div>
63
+ <div class="p-6">
64
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Geography</h3>
65
+ <p class="text-gray-600 mb-4">Test your knowledge of countries, capitals, and landmarks.</p>
66
+ <button onclick="startQuiz('geography')" class="w-full bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition">Start Quiz</button>
67
+ </div>
68
+ </div>
69
+
70
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
71
+ <div class="h-40 bg-red-100 flex items-center justify-center">
72
+ <i data-feather="code" class="h-16 w-16 text-red-500"></i>
73
+ </div>
74
+ <div class="p-6">
75
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Programming</h3>
76
+ <p class="text-gray-600 mb-4">Challenge your coding knowledge across multiple languages.</p>
77
+ <button onclick="startQuiz('programming')" class="w-full bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition">Start Quiz</button>
78
+ </div>
79
+ </div>
80
+
81
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
82
+ <div class="h-40 bg-red-100 flex items-center justify-center">
83
+ <i data-feather="film" class="h-16 w-16 text-red-500"></i>
84
+ </div>
85
+ <div class="p-6">
86
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Movies</h3>
87
+ <p class="text-gray-600 mb-4">How well do you know classic and modern cinema?</p>
88
+ <button onclick="startQuiz('movies')" class="w-full bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition">Start Quiz</button>
89
+ </div>
90
+ </div>
91
+ </div>
92
+
93
+ <div class="bg-white rounded-xl shadow-md p-6">
94
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Recent Results</h2>
95
+ <div id="recent-results" class="space-y-4">
96
+ <!-- Recent results will be loaded here -->
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </main>
101
+
102
+ <footer class="bg-white border-t border-gray-200 py-6">
103
+ <div class="container mx-auto px-4 text-center text-gray-600">
104
+ <p>© 2023 QuizMaster Pro. Test your knowledge, expand your mind.</p>
105
+ </div>
106
+ </footer>
107
+
108
+ <script>
109
+ // Initialize Vanta.js background
110
+ VANTA.NET({
111
+ el: "#vanta-bg",
112
+ mouseControls: true,
113
+ touchControls: true,
114
+ gyroControls: false,
115
+ minHeight: 200.00,
116
+ minWidth: 200.00,
117
+ scale: 1.00,
118
+ scaleMobile: 1.00,
119
+ color: 0xff5555,
120
+ backgroundColor: 0xf8fafc,
121
+ points: 12.00,
122
+ maxDistance: 22.00,
123
+ spacing: 18.00
124
+ });
125
+
126
+ // Load recent results
127
+ function loadRecentResults() {
128
+ const results = JSON.parse(localStorage.getItem('quizResults') || '[]').slice(0, 3);
129
+ const container = document.getElementById('recent-results');
130
+
131
+ if (results.length === 0) {
132
+ container.innerHTML = '<p class="text-gray-500 text-center py-4">No quiz history yet. Take a quiz to see your results here!</p>';
133
+ return;
134
+ }
135
+
136
+ container.innerHTML = results.map(result => `
137
+ <div class="flex justify-between items-center p-4 bg-gray-50 rounded-lg">
138
+ <div>
139
+ <h3 class="font-semibold capitalize">${result.category}</h3>
140
+ <p class="text-sm text-gray-600">${new Date(result.date).toLocaleDateString()}</p>
141
+ </div>
142
+ <div class="text-right">
143
+ <p class="text-lg font-bold text-red-500">${result.score}/${result.total}</p>
144
+ <p class="text-sm text-gray-600">${Math.round((result.score/result.total)*100)}%</p>
145
+ </div>
146
+ </div>
147
+ `).join('');
148
+ }
149
+
150
+ function startQuiz(category) {
151
+ localStorage.setItem('selectedCategory', category);
152
+ window.location.href = 'quiz.html';
153
+ }
154
+
155
+ // Initialize
156
+ feather.replace();
157
+ loadRecentResults();
158
+ </script>
159
+ </body>
160
  </html>
quiz.html ADDED
@@ -0,0 +1,384 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Quiz - QuizMaster Pro</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <style>
12
+ .option-card {
13
+ transition: all 0.2s ease;
14
+ }
15
+ .option-card:hover {
16
+ transform: translateY(-2px);
17
+ }
18
+ .option-card.selected {
19
+ border-color: #ef4444;
20
+ background-color: #fef2f2;
21
+ }
22
+ .option-card.correct {
23
+ border-color: #10b981;
24
+ background-color: #ecfdf5;
25
+ }
26
+ .option-card.incorrect {
27
+ border-color: #ef4444;
28
+ background-color: #fef2f2;
29
+ }
30
+ .progress-ring {
31
+ transition: stroke-dashoffset 0.5s ease;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="min-h-screen bg-gray-50">
36
+ <nav class="bg-white shadow-lg">
37
+ <div class="container mx-auto px-4">
38
+ <div class="flex justify-between items-center py-4">
39
+ <a href="index.html" class="flex items-center text-xl font-bold text-gray-800">
40
+ <i data-feather="brain" class="mr-2 text-red-500"></i>
41
+ QuizMaster Pro
42
+ </a>
43
+ <div class="flex space-x-4">
44
+ <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100">Quiz</a>
45
+ <a href="history.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100">History</a>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </nav>
50
+
51
+ <main class="py-10 px-4">
52
+ <div class="container mx-auto max-w-2xl">
53
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6">
54
+ <div class="flex justify-between items-center mb-6">
55
+ <h1 id="quiz-category" class="text-2xl font-bold text-gray-800 capitalize">Loading...</h1>
56
+ <div class="flex items-center">
57
+ <span class="text-sm text-gray-600 mr-2">Time:</span>
58
+ <div id="timer" class="text-lg font-semibold text-red-500">60</div>
59
+ </div>
60
+ </div>
61
+
62
+ <div class="mb-6">
63
+ <div class="flex justify-between text-sm text-gray-600 mb-1">
64
+ <span>Progress</span>
65
+ <span id="progress-text">0/10</span>
66
+ </div>
67
+ <div class="w-full bg-gray-200 rounded-full h-2">
68
+ <div id="progress-bar" class="bg-red-500 h-2 rounded-full transition-all" style="width: 0%"></div>
69
+ </div>
70
+ </div>
71
+
72
+ <div id="question-container" class="mb-6">
73
+ <h2 id="question" class="text-xl font-semibold text-gray-800 mb-6">Loading question...</h2>
74
+
75
+ <div id="options-container" class="space-y-3">
76
+ <!-- Options will be loaded here -->
77
+ </div>
78
+ </div>
79
+
80
+ <div class="flex justify-between">
81
+ <button id="prev-btn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition">
82
+ <i data-feather="arrow-left" class="inline mr-2 h-4 w-4"></i> Previous
83
+ </button>
84
+ <button id="next-btn" class="px-4 py-2 bg-red-500 text-white rounded-lg font-medium hover:bg-red-600 transition">
85
+ Next <i data-feather="arrow-right" class="inline ml-2 h-4 w-4"></i>
86
+ </button>
87
+ </div>
88
+ </div>
89
+
90
+ <div id="results-container" class="bg-white rounded-xl shadow-md p-6 hidden">
91
+ <div class="text-center mb-6">
92
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">Quiz Completed!</h2>
93
+ <p id="result-score" class="text-lg text-gray-600">Your score: 0/10</p>
94
+ </div>
95
+
96
+ <div class="flex justify-center mb-6">
97
+ <svg id="score-circle" width="120" height="120" class="transform -rotate-90">
98
+ <circle cx="60" cy="60" r="50" stroke="#e5e7eb" stroke-width="8" fill="transparent" />
99
+ <circle id="score-progress" cx="60" cy="60" r="50" stroke="#ef4444" stroke-width="8"
100
+ fill="transparent" stroke-dasharray="314" stroke-dashoffset="314" class="progress-ring" />
101
+ </svg>
102
+ </div>
103
+
104
+ <div class="text-center">
105
+ <button onclick="window.location.href='index.html'" class="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition mr-4">
106
+ <i data-feather="home" class="inline mr-2 h-4 w-4"></i> Home
107
+ </button>
108
+ <button onclick="restartQuiz()" class="px-6 py-3 bg-red-500 text-white rounded-lg font-medium hover:bg-red-600 transition">
109
+ <i data-feather="refresh-cw" class="inline mr-2 h-4 w-4"></i> Try Again
110
+ </button>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </main>
115
+
116
+ <script>
117
+ let currentQuestions = [];
118
+ let currentQuestionIndex = 0;
119
+ let userAnswers = [];
120
+ let score = 0;
121
+ let timerInterval;
122
+ let timeLeft = 60;
123
+
124
+ // Quiz data for different categories
125
+ const quizData = {
126
+ geography: [
127
+ {
128
+ question: "What is the capital of France?",
129
+ options: ["Paris", "London", "Berlin", "Madrid"],
130
+ correctAnswer: 0
131
+ },
132
+ {
133
+ question: "Which river is the longest in the world?",
134
+ options: ["Amazon", "Nile", "Mississippi", "Yangtze"],
135
+ correctAnswer: 1
136
+ },
137
+ {
138
+ question: "Which country has the largest population?",
139
+ options: ["India", "United States", "China", "Russia"],
140
+ correctAnswer: 2
141
+ },
142
+ {
143
+ question: "What is the smallest continent?",
144
+ options: ["Australia", "Europe", "Antarctica", "South America"],
145
+ correctAnswer: 0
146
+ },
147
+ {
148
+ question: "Which desert is the largest in the world?",
149
+ options: ["Sahara", "Gobi", "Arabian", "Antarctic"],
150
+ correctAnswer: 3
151
+ }
152
+ ],
153
+ programming: [
154
+ {
155
+ question: "What does HTML stand for?",
156
+ options: [
157
+ "Hyper Text Markup Language",
158
+ "High Tech Modern Language",
159
+ "Hyper Transfer Markup Language",
160
+ "Home Tool Markup Language"
161
+ ],
162
+ correctAnswer: 0
163
+ },
164
+ {
165
+ question: "Which language runs in a web browser?",
166
+ options: ["Java", "C", "Python", "JavaScript"],
167
+ correctAnswer: 3
168
+ },
169
+ {
170
+ question: "What is the correct way to create a function in JavaScript?",
171
+ options: [
172
+ "function = myFunction()",
173
+ "function myFunction()",
174
+ "function:myFunction()",
175
+ "create myFunction()"
176
+ ],
177
+ correctAnswer: 1
178
+ },
179
+ {
180
+ question: "Which symbol is used for comments in JavaScript?",
181
+ options: ["//", "<!--", "#", "*"],
182
+ correctAnswer: 0
183
+ },
184
+ {
185
+ question: "What is the output of: console.log(typeof null)?",
186
+ options: ["null", "undefined", "object", "string"],
187
+ correctAnswer: 2
188
+ }
189
+ ],
190
+ movies: [
191
+ {
192
+ question: "Who directed the movie 'Inception'?",
193
+ options: [
194
+ "Steven Spielberg",
195
+ "Christopher Nolan",
196
+ "James Cameron",
197
+ "Quentin Tarantino"
198
+ ],
199
+ correctAnswer: 1
200
+ },
201
+ {
202
+ question: "Which actor played Tony Stark in the Marvel Cinematic Universe?",
203
+ options: [
204
+ "Chris Evans",
205
+ "Chris Hemsworth",
206
+ "Robert Downey Jr.",
207
+ "Mark Ruffalo"
208
+ ],
209
+ correctAnswer: 2
210
+ },
211
+ {
212
+ question: "What year was the first Toy Story movie released?",
213
+ options: ["1995", "1998", "2000", "2002"],
214
+ correctAnswer: 0
215
+ },
216
+ {
217
+ question: "Which movie won the Academy Award for Best Picture in 2020?",
218
+ options: ["1917", "Joker", "Parasite", "Once Upon a Time in Hollywood"],
219
+ correctAnswer: 2
220
+ },
221
+ {
222
+ question: "Who played the Joker in 'The Dark Knight'?",
223
+ options: [
224
+ "Jack Nicholson",
225
+ "Heath Ledger",
226
+ "Joaquin Phoenix",
227
+ "Jared Leto"
228
+ ],
229
+ correctAnswer: 1
230
+ }
231
+ ]
232
+ };
233
+
234
+ function initializeQuiz() {
235
+ const category = localStorage.getItem('selectedCategory') || 'geography';
236
+ document.getElementById('quiz-category').textContent = category;
237
+
238
+ currentQuestions = [...quizData[category]];
239
+ currentQuestionIndex = 0;
240
+ userAnswers = new Array(currentQuestions.length).fill(null);
241
+ score = 0;
242
+
243
+ shuffleArray(currentQuestions);
244
+ loadQuestion();
245
+ startTimer();
246
+ }
247
+
248
+ function shuffleArray(array) {
249
+ for (let i = array.length - 1; i > 0; i--) {
250
+ const j = Math.floor(Math.random() * (i + 1));
251
+ [array[i], array[j]] = [array[j], array[i]];
252
+ }
253
+ }
254
+
255
+ function loadQuestion() {
256
+ const question = currentQuestions[currentQuestionIndex];
257
+ document.getElementById('question').textContent = question.question;
258
+
259
+ const optionsContainer = document.getElementById('options-container');
260
+ optionsContainer.innerHTML = '';
261
+
262
+ question.options.forEach((option, index) => {
263
+ const optionElement = document.createElement('div');
264
+ optionElement.className = 'option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer';
265
+ optionElement.innerHTML = `
266
+ <div class="flex items-center">
267
+ <div class="w-6 h-6 rounded-full border-2 border-gray-300 mr-3 flex items-center justify-center">
268
+ ${userAnswers[currentQuestionIndex] === index ?
269
+ '<div class="w-3 h-3 rounded-full bg-red-500"></div>' : ''}
270
+ </div>
271
+ <span>${option}</span>
272
+ </div>
273
+ `;
274
+
275
+ optionElement.addEventListener('click', () => selectOption(index));
276
+ optionsContainer.appendChild(optionElement);
277
+ });
278
+
279
+ updateProgress();
280
+ updateNavigationButtons();
281
+ }
282
+
283
+ function selectOption(optionIndex) {
284
+ userAnswers[currentQuestionIndex] = optionIndex;
285
+ loadQuestion();
286
+ }
287
+
288
+ function updateProgress() {
289
+ const progressText = document.getElementById('progress-text');
290
+ const progressBar = document.getElementById('progress-bar');
291
+
292
+ progressText.textContent = `${currentQuestionIndex + 1}/${currentQuestions.length}`;
293
+ progressBar.style.width = `${((currentQuestionIndex + 1) / currentQuestions.length) * 100}%`;
294
+ }
295
+
296
+ function updateNavigationButtons() {
297
+ document.getElementById('prev-btn').disabled = currentQuestionIndex === 0;
298
+ document.getElementById('next-btn').textContent =
299
+ currentQuestionIndex === currentQuestions.length - 1 ? 'Finish Quiz' : 'Next';
300
+ }
301
+
302
+ function nextQuestion() {
303
+ if (currentQuestionIndex < currentQuestions.length - 1) {
304
+ currentQuestionIndex++;
305
+ loadQuestion();
306
+ } else {
307
+ finishQuiz();
308
+ }
309
+ }
310
+
311
+ function prevQuestion() {
312
+ if (currentQuestionIndex > 0) {
313
+ currentQuestionIndex--;
314
+ loadQuestion();
315
+ }
316
+ }
317
+
318
+ function startTimer() {
319
+ clearInterval(timerInterval);
320
+ timeLeft = 60;
321
+ document.getElementById('timer').textContent = timeLeft;
322
+
323
+ timerInterval = setInterval(() => {
324
+ timeLeft--;
325
+ document.getElementById('timer').textContent = timeLeft;
326
+
327
+ if (timeLeft <= 0) {
328
+ finishQuiz();
329
+ }
330
+ }, 1000);
331
+ }
332
+
333
+ function finishQuiz() {
334
+ clearInterval(timerInterval);
335
+
336
+ // Calculate score
337
+ score = userAnswers.reduce((total, answer, index) => {
338
+ return total + (answer === currentQuestions[index].correctAnswer ? 1 : 0);
339
+ }, 0);
340
+
341
+ // Save result to history
342
+ const quizResult = {
343
+ category: localStorage.getItem('selectedCategory'),
344
+ score: score,
345
+ total: currentQuestions.length,
346
+ date: new Date().toISOString()
347
+ };
348
+
349
+ const history = JSON.parse(localStorage.getItem('quizResults') || '[]');
350
+ history.unshift(quizResult);
351
+ localStorage.setItem('quizResults', JSON.stringify(history));
352
+
353
+ // Show results
354
+ document.getElementById('question-container').classList.add('hidden');
355
+ document.getElementById('results-container').classList.remove('hidden');
356
+ document.getElementById('result-score').textContent = `Your score: ${score}/${currentQuestions.length}`;
357
+
358
+ // Animate score circle
359
+ const percentage = (score / currentQuestions.length) * 100;
360
+ const circle = document.getElementById('score-progress');
361
+ const circumference = 2 * Math.PI * 50;
362
+ const offset = circumference - (percentage / 100) * circumference;
363
+
364
+ setTimeout(() => {
365
+ circle.style.strokeDashoffset = offset;
366
+ }, 100);
367
+ }
368
+
369
+ function restartQuiz() {
370
+ initializeQuiz();
371
+ document.getElementById('question-container').classList.remove('hidden');
372
+ document.getElementById('results-container').classList.add('hidden');
373
+ }
374
+
375
+ // Event listeners
376
+ document.getElementById('next-btn').addEventListener('click', nextQuestion);
377
+ document.getElementById('prev-btn').addEventListener('click', prevQuestion);
378
+
379
+ // Initialize quiz when page loads
380
+ document.addEventListener('DOMContentLoaded', initializeQuiz);
381
+ feather.replace();
382
+ </script>
383
+ </body>
384
+ </html>