Hugging Face's logo

Spaces:
MartsFuture
/
daily-capital-quizz
Running

App Files Community
MartsFuture commited on
Commit
d5f1e39
·
verified ·
1 Parent(s): 4c6fe26

also after every country show me where in the world map to locate it easily - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +621 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Daily Capital Quizz
3
- emoji: 🏢
4
- colorFrom: red
5
- colorTo: gray
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: daily-capital-quizz
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,621 @@
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>Daily Capital Quiz</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ @keyframes float {
12
+ 0% { transform: translateY(0px); }
13
+ 50% { transform: translateY(-10px); }
14
+ 100% { transform: translateY(0px); }
15
+ }
16
+ .floating {
17
+ animation: float 3s ease-in-out infinite;
18
+ }
19
+ .card-enter {
20
+ opacity: 0;
21
+ transform: translateY(20px);
22
+ }
23
+ .card-enter-active {
24
+ opacity: 1;
25
+ transform: translateY(0);
26
+ transition: all 0.3s ease-out;
27
+ }
28
+ .progress-bar {
29
+ transition: width 0.5s ease-in-out;
30
+ }
31
+ .confetti {
32
+ position: absolute;
33
+ width: 10px;
34
+ height: 10px;
35
+ background-color: #f00;
36
+ opacity: 0;
37
+ }
38
+ .fa-lightbulb {
39
+ transition: transform 0.3s ease;
40
+ }
41
+ img[alt$="location"] {
42
+ filter: grayscale(100%) contrast(120%);
43
+ }
44
+ img[alt$="location"]:hover {
45
+ filter: none;
46
+ transition: filter 0.3s ease;
47
+ }
48
+ button:hover .fa-lightbulb {
49
+ transform: scale(1.2);
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
54
+ <div class="container mx-auto px-4 py-8 max-w-3xl">
55
+ <!-- Header -->
56
+ <header class="text-center mb-8 animate__animated animate__fadeIn">
57
+ <div class="floating inline-block mb-4">
58
+ <i class="fas fa-globe-americas text-6xl text-indigo-500"></i>
59
+ </div>
60
+ <h1 class="text-4xl font-bold text-indigo-800 mb-2">Daily Capital Quiz</h1>
61
+ <p class="text-lg text-indigo-600">Memorize all world capitals in just minutes a day!</p>
62
+
63
+ <div class="mt-6 bg-white rounded-lg shadow-md p-4 inline-block">
64
+ <div class="flex items-center justify-between mb-2">
65
+ <span class="text-sm font-medium text-gray-700">Today's Progress</span>
66
+ <span class="text-sm font-medium text-indigo-600" id="progress-text">0/3</span>
67
+ </div>
68
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
69
+ <div id="progress-bar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
70
+ </div>
71
+ </div>
72
+ </header>
73
+
74
+ <!-- Streak Counter -->
75
+ <div class="bg-white rounded-xl shadow-md p-4 mb-8 text-center animate__animated animate__fadeInUp">
76
+ <div class="flex justify-center items-center space-x-4">
77
+ <div class="bg-yellow-100 p-3 rounded-full">
78
+ <i class="fas fa-fire text-yellow-500 text-2xl"></i>
79
+ </div>
80
+ <div>
81
+ <p class="text-sm text-gray-500">Current Streak</p>
82
+ <h3 class="text-2xl font-bold text-gray-800" id="streak-count">0 days</h3>
83
+ </div>
84
+ </div>
85
+ </div>
86
+
87
+ <!-- Quiz Container -->
88
+ <div id="quiz-container" class="space-y-6">
89
+ <!-- Questions will be inserted here by JavaScript -->
90
+ </div>
91
+
92
+ <!-- Results Modal -->
93
+ <div id="results-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
94
+ <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 animate__animated animate__zoomIn">
95
+ <div class="text-center">
96
+ <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
97
+ <i class="fas fa-trophy text-green-500 text-3xl"></i>
98
+ </div>
99
+ <h3 class="text-2xl font-bold text-gray-800 mb-2">Great Job!</h3>
100
+ <p class="text-gray-600 mb-6">You completed today's quiz!</p>
101
+ <div class="bg-blue-50 rounded-lg p-4 mb-6">
102
+ <p class="text-sm text-blue-800">Come back tomorrow for more capitals to learn!</p>
103
+ </div>
104
+ <button id="close-modal" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition">
105
+ Close
106
+ </button>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+
112
+ <script>
113
+ // Countries and capitals data
114
+ const countries = [
115
+ { name: "Afghanistan", capital: "Kabul" },
116
+ { name: "Albania", capital: "Tirana" },
117
+ { name: "Algeria", capital: "Algiers" },
118
+ { name: "Andorra", capital: "Andorra la Vella" },
119
+ { name: "Angola", capital: "Luanda" },
120
+ { name: "Antigua and Barbuda", capital: "Saint John's" },
121
+ { name: "Argentina", capital: "Buenos Aires" },
122
+ { name: "Armenia", capital: "Yerevan" },
123
+ { name: "Australia", capital: "Canberra" },
124
+ { name: "Austria", capital: "Vienna" },
125
+ { name: "Azerbaijan", capital: "Baku" },
126
+ { name: "Bahamas", capital: "Nassau" },
127
+ { name: "Bahrain", capital: "Manama" },
128
+ { name: "Bangladesh", capital: "Dhaka" },
129
+ { name: "Barbados", capital: "Bridgetown" },
130
+ { name: "Belarus", capital: "Minsk" },
131
+ { name: "Belgium", capital: "Brussels" },
132
+ { name: "Belize", capital: "Belmopan" },
133
+ { name: "Benin", capital: "Porto-Novo" },
134
+ { name: "Bhutan", capital: "Thimphu" },
135
+ { name: "Bolivia", capital: "Sucre" },
136
+ { name: "Bosnia and Herzegovina", capital: "Sarajevo" },
137
+ { name: "Botswana", capital: "Gaborone" },
138
+ { name: "Brazil", capital: "Brasília" },
139
+ { name: "Brunei", capital: "Bandar Seri Begawan" },
140
+ { name: "Bulgaria", capital: "Sofia" },
141
+ { name: "Burkina Faso", capital: "Ouagadougou" },
142
+ { name: "Burundi", capital: "Gitega" },
143
+ { name: "Cambodia", capital: "Phnom Penh" },
144
+ { name: "Cameroon", capital: "Yaoundé" },
145
+ { name: "Canada", capital: "Ottawa" },
146
+ { name: "Cape Verde", capital: "Praia" },
147
+ { name: "Central African Republic", capital: "Bangui" },
148
+ { name: "Chad", capital: "N'Djamena" },
149
+ { name: "Chile", capital: "Santiago" },
150
+ { name: "China", capital: "Beijing" },
151
+ { name: "Colombia", capital: "Bogotá" },
152
+ { name: "Comoros", capital: "Moroni" },
153
+ { name: "Congo (Brazzaville)", capital: "Brazzaville" },
154
+ { name: "Congo (Kinshasa)", capital: "Kinshasa" },
155
+ { name: "Costa Rica", capital: "San José" },
156
+ { name: "Croatia", capital: "Zagreb" },
157
+ { name: "Cuba", capital: "Havana" },
158
+ { name: "Cyprus", capital: "Nicosia" },
159
+ { name: "Czech Republic", capital: "Prague" },
160
+ { name: "Denmark", capital: "Copenhagen" },
161
+ { name: "Djibouti", capital: "Djibouti" },
162
+ { name: "Dominica", capital: "Roseau" },
163
+ { name: "Dominican Republic", capital: "Santo Domingo" },
164
+ { name: "Ecuador", capital: "Quito" },
165
+ { name: "Egypt", capital: "Cairo" },
166
+ { name: "El Salvador", capital: "San Salvador" },
167
+ { name: "Equatorial Guinea", capital: "Malabo" },
168
+ { name: "Eritrea", capital: "Asmara" },
169
+ { name: "Estonia", capital: "Tallinn" },
170
+ { name: "Eswatini", capital: "Mbabane" },
171
+ { name: "Ethiopia", capital: "Addis Ababa" },
172
+ { name: "Fiji", capital: "Suva" },
173
+ { name: "Finland", capital: "Helsinki" },
174
+ { name: "France", capital: "Paris" },
175
+ { name: "Gabon", capital: "Libreville" },
176
+ { name: "Gambia", capital: "Banjul" },
177
+ { name: "Georgia", capital: "Tbilisi" },
178
+ { name: "Germany", capital: "Berlin" },
179
+ { name: "Ghana", capital: "Accra" },
180
+ { name: "Greece", capital: "Athens" },
181
+ { name: "Grenada", capital: "Saint George's" },
182
+ { name: "Guatemala", capital: "Guatemala City" },
183
+ { name: "Guinea", capital: "Conakry" },
184
+ { name: "Guinea-Bissau", capital: "Bissau" },
185
+ { name: "Guyana", capital: "Georgetown" },
186
+ { name: "Haiti", capital: "Port-au-Prince" },
187
+ { name: "Honduras", capital: "Tegucigalpa" },
188
+ { name: "Hungary", capital: "Budapest" },
189
+ { name: "Iceland", capital: "Reykjavík" },
190
+ { name: "India", capital: "New Delhi" },
191
+ { name: "Indonesia", capital: "Jakarta" },
192
+ { name: "Iran", capital: "Tehran" },
193
+ { name: "Iraq", capital: "Baghdad" },
194
+ { name: "Ireland", capital: "Dublin" },
195
+ { name: "Israel", capital: "Jerusalem" },
196
+ { name: "Italy", capital: "Rome" },
197
+ { name: "Ivory Coast", capital: "Yamoussoukro" },
198
+ { name: "Jamaica", capital: "Kingston" },
199
+ { name: "Japan", capital: "Tokyo" },
200
+ { name: "Jordan", capital: "Amman" },
201
+ { name: "Kazakhstan", capital: "Nur-Sultan" },
202
+ { name: "Kenya", capital: "Nairobi" },
203
+ { name: "Kiribati", capital: "South Tarawa" },
204
+ { name: "Korea, North", capital: "Pyongyang" },
205
+ { name: "Korea, South", capital: "Seoul" },
206
+ { name: "Kosovo", capital: "Pristina" },
207
+ { name: "Kuwait", capital: "Kuwait City" },
208
+ { name: "Kyrgyzstan", capital: "Bishkek" },
209
+ { name: "Laos", capital: "Vientiane" },
210
+ { name: "Latvia", capital: "Riga" },
211
+ { name: "Lebanon", capital: "Beirut" },
212
+ { name: "Lesotho", capital: "Maseru" },
213
+ { name: "Liberia", capital: "Monrovia" },
214
+ { name: "Libya", capital: "Tripoli" },
215
+ { name: "Liechtenstein", capital: "Vaduz" },
216
+ { name: "Lithuania", capital: "Vilnius" },
217
+ { name: "Luxembourg", capital: "Luxembourg" },
218
+ { name: "Madagascar", capital: "Antananarivo" },
219
+ { name: "Malawi", capital: "Lilongwe" },
220
+ { name: "Malaysia", capital: "Kuala Lumpur" },
221
+ { name: "Maldives", capital: "Malé" },
222
+ { name: "Mali", capital: "Bamako" },
223
+ { name: "Malta", capital: "Valletta" },
224
+ { name: "Marshall Islands", capital: "Majuro" },
225
+ { name: "Mauritania", capital: "Nouakchott" },
226
+ { name: "Mauritius", capital: "Port Louis" },
227
+ { name: "Mexico", capital: "Mexico City" },
228
+ { name: "Micronesia", capital: "Palikir" },
229
+ { name: "Moldova", capital: "Chisinau" },
230
+ { name: "Monaco", capital: "Monaco" },
231
+ { name: "Mongolia", capital: "Ulaanbaatar" },
232
+ { name: "Montenegro", capital: "Podgorica" },
233
+ { name: "Morocco", capital: "Rabat" },
234
+ { name: "Mozambique", capital: "Maputo" },
235
+ { name: "Myanmar", capital: "Naypyidaw" },
236
+ { name: "Namibia", capital: "Windhoek" },
237
+ { name: "Nauru", capital: "Yaren" },
238
+ { name: "Nepal", capital: "Kathmandu" },
239
+ { name: "Netherlands", capital: "Amsterdam" },
240
+ { name: "New Zealand", capital: "Wellington" },
241
+ { name: "Nicaragua", capital: "Managua" },
242
+ { name: "Niger", capital: "Niamey" },
243
+ { name: "Nigeria", capital: "Abuja" },
244
+ { name: "North Macedonia", capital: "Skopje" },
245
+ { name: "Norway", capital: "Oslo" },
246
+ { name: "Oman", capital: "Muscat" },
247
+ { name: "Pakistan", capital: "Islamabad" },
248
+ { name: "Palau", capital: "Ngerulmud" },
249
+ { name: "Panama", capital: "Panama City" },
250
+ { name: "Papua New Guinea", capital: "Port Moresby" },
251
+ { name: "Paraguay", capital: "Asunción" },
252
+ { name: "Peru", capital: "Lima" },
253
+ { name: "Philippines", capital: "Manila" },
254
+ { name: "Poland", capital: "Warsaw" },
255
+ { name: "Portugal", capital: "Lisbon" },
256
+ { name: "Qatar", capital: "Doha" },
257
+ { name: "Romania", capital: "Bucharest" },
258
+ { name: "Russia", capital: "Moscow" },
259
+ { name: "Rwanda", capital: "Kigali" },
260
+ { name: "Saint Kitts and Nevis", capital: "Basseterre" },
261
+ { name: "Saint Lucia", capital: "Castries" },
262
+ { name: "Saint Vincent and the Grenadines", capital: "Kingstown" },
263
+ { name: "Samoa", capital: "Apia" },
264
+ { name: "San Marino", capital: "San Marino" },
265
+ { name: "Sao Tome and Principe", capital: "São Tomé" },
266
+ { name: "Saudi Arabia", capital: "Riyadh" },
267
+ { name: "Senegal", capital: "Dakar" },
268
+ { name: "Serbia", capital: "Belgrade" },
269
+ { name: "Seychelles", capital: "Victoria" },
270
+ { name: "Sierra Leone", capital: "Freetown" },
271
+ { name: "Singapore", capital: "Singapore" },
272
+ { name: "Slovakia", capital: "Bratislava" },
273
+ { name: "Slovenia", capital: "Ljubljana" },
274
+ { name: "Solomon Islands", capital: "Honiara" },
275
+ { name: "Somalia", capital: "Mogadishu" },
276
+ { name: "South Africa", capital: "Pretoria" },
277
+ { name: "South Sudan", capital: "Juba" },
278
+ { name: "Spain", capital: "Madrid" },
279
+ { name: "Sri Lanka", capital: "Sri Jayawardenepura Kotte" },
280
+ { name: "Sudan", capital: "Khartoum" },
281
+ { name: "Suriname", capital: "Paramaribo" },
282
+ { name: "Sweden", capital: "Stockholm" },
283
+ { name: "Switzerland", capital: "Bern" },
284
+ { name: "Syria", capital: "Damascus" },
285
+ { name: "Taiwan", capital: "Taipei" },
286
+ { name: "Tajikistan", capital: "Dushanbe" },
287
+ { name: "Tanzania", capital: "Dodoma" },
288
+ { name: "Thailand", capital: "Bangkok" },
289
+ { name: "Togo", capital: "Lomé" },
290
+ { name: "Tonga", capital: "Nuku'alofa" },
291
+ { name: "Trinidad and Tobago", capital: "Port of Spain" },
292
+ { name: "Tunisia", capital: "Tunis" },
293
+ { name: "Turkey", capital: "Ankara" },
294
+ { name: "Turkmenistan", capital: "Ashgabat" },
295
+ { name: "Tuvalu", capital: "Funafuti" },
296
+ { name: "Uganda", capital: "Kampala" },
297
+ { name: "Ukraine", capital: "Kyiv" },
298
+ { name: "United Arab Emirates", capital: "Abu Dhabi" },
299
+ { name: "United Kingdom", capital: "London" },
300
+ { name: "United States", capital: "Washington, D.C." },
301
+ { name: "Uruguay", capital: "Montevideo" },
302
+ { name: "Uzbekistan", capital: "Tashkent" },
303
+ { name: "Vanuatu", capital: "Port Vila" },
304
+ { name: "Vatican City", capital: "Vatican City" },
305
+ { name: "Venezuela", capital: "Caracas" },
306
+ { name: "Vietnam", capital: "Hanoi" },
307
+ { name: "Yemen", capital: "Sana'a" },
308
+ { name: "Zambia", capital: "Lusaka" },
309
+ { name: "Zimbabwe", capital: "Harare" }
310
+ ];
311
+
312
+ // Get today's date for localStorage key
313
+ const today = new Date().toISOString().split('T')[0];
314
+
315
+ // Initialize app
316
+ document.addEventListener('DOMContentLoaded', function() {
317
+ // Check if user has already completed today's quiz
318
+ const completedToday = localStorage.getItem(`completed_${today}`);
319
+
320
+ // Initialize streak counter
321
+ const streak = localStorage.getItem('streak') || 0;
322
+ document.getElementById('streak-count').textContent = streak + ' days';
323
+
324
+ if (completedToday) {
325
+ // Show completion message if already completed today
326
+ showCompletedMessage();
327
+ } else {
328
+ // Generate new quiz if not completed today
329
+ generateQuiz();
330
+ }
331
+
332
+ // Set up modal close button
333
+ document.getElementById('close-modal').addEventListener('click', function() {
334
+ document.getElementById('results-modal').classList.add('hidden');
335
+ });
336
+ });
337
+
338
+ // Generate a quiz with 3 random countries
339
+ function generateQuiz() {
340
+ const quizContainer = document.getElementById('quiz-container');
341
+ quizContainer.innerHTML = '';
342
+
343
+ // Shuffle countries and pick 3
344
+ const shuffled = [...countries].sort(() => 0.5 - Math.random());
345
+ const selectedCountries = shuffled.slice(0, 3);
346
+
347
+ selectedCountries.forEach((country, index) => {
348
+ const card = document.createElement('div');
349
+ card.className = 'bg-white rounded-xl shadow-md overflow-hidden card-enter';
350
+ card.style.animationDelay = `${index * 0.1}s`;
351
+
352
+ card.innerHTML = `
353
+ <div class="p-6">
354
+ <div class="flex items-center mb-4">
355
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
356
+ <i class="fas fa-flag text-indigo-600"></i>
357
+ </div>
358
+ <h3 class="text-xl font-semibold text-gray-800">${country.name}</h3>
359
+ </div>
360
+ <div class="mb-4">
361
+ <label for="capital-${index}" class="block text-sm font-medium text-gray-700 mb-1">What is the capital of ${country.name}?</label>
362
+ <input type="text" id="capital-${index}" data-answer="${country.capital}"
363
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
364
+ placeholder="Enter capital city">
365
+ </div>
366
+ <div class="bg-gray-100 p-3 rounded-lg mb-4">
367
+ <p class="text-xs font-medium text-gray-600 mb-1">LOCATION TIP:</p>
368
+ <div class="flex items-center">
369
+ <img src="https://raw.githubusercontent.com/djaiss/mapsicon/master/all/${country.name.toLowerCase().replace(/ /g,'-')}/1024.png"
370
+ alt="${country.name} location"
371
+ class="w-12 h-12 object-contain mr-2 border border-gray-200 rounded">
372
+ <p class="text-xs text-gray-700">${getLocationTip(country.name)}</p>
373
+ </div>
374
+ </div>
375
+ <div id="feedback-${index}" class="hidden mt-2"></div>
376
+ <div class="flex space-x-2 mt-2">
377
+ <button onclick="checkAnswer(${index})" class="flex-1 bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition">
378
+ Check Answer
379
+ </button>
380
+ <button onclick="showMnemonic(${index})" class="bg-indigo-100 text-indigo-700 py-2 px-4 rounded-lg hover:bg-indigo-200 transition">
381
+ <i class="fas fa-lightbulb"></i>
382
+ </button>
383
+ </div>
384
+ </div>
385
+ `;
386
+
387
+ quizContainer.appendChild(card);
388
+ });
389
+
390
+ // Update progress
391
+ updateProgress(0, 3);
392
+ }
393
+
394
+ // Check user's answer
395
+ function checkAnswer(index) {
396
+ const userAnswer = document.getElementById(`capital-${index}`).value.trim();
397
+ const correctAnswer = document.getElementById(`capital-${index}`).dataset.answer;
398
+ const feedbackDiv = document.getElementById(`feedback-${index}`);
399
+
400
+ if (userAnswer.toLowerCase() === correctAnswer.toLowerCase()) {
401
+ // Correct answer
402
+ feedbackDiv.innerHTML = `
403
+ <div class="bg-green-50 border-l-4 border-green-500 p-4 animate__animated animate__fadeIn">
404
+ <div class="flex">
405
+ <div class="flex-shrink-0">
406
+ <i class="fas fa-check-circle text-green-500"></i>
407
+ </div>
408
+ <div class="ml-3">
409
+ <p class="text-sm text-green-700">
410
+ Correct! The capital of ${document.querySelector(`#quiz-container div:nth-child(${index+1}) h3`).textContent} is <strong>${correctAnswer}</strong>.
411
+ </p>
412
+ </div>
413
+ </div>
414
+ </div>
415
+ `;
416
+
417
+ // Disable input and button
418
+ document.getElementById(`capital-${index}`).disabled = true;
419
+ document.querySelector(`#quiz-container div:nth-child(${index+1}) button`).disabled = true;
420
+ document.querySelector(`#quiz-container div:nth-child(${index+1}) button`).classList.remove('hover:bg-indigo-700');
421
+ document.querySelector(`#quiz-container div:nth-child(${index+1}) button`).classList.add('bg-green-600');
422
+ document.querySelector(`#quiz-container div:nth-child(${index+1}) button`).textContent = 'Correct!';
423
+
424
+ // Update progress
425
+ const currentProgress = parseInt(document.getElementById('progress-text').textContent.split('/')[0]);
426
+ updateProgress(currentProgress + 1, 3);
427
+
428
+ // Check if all questions are answered
429
+ checkQuizCompletion();
430
+ } else {
431
+ // Incorrect answer
432
+ feedbackDiv.innerHTML = `
433
+ <div class="bg-red-50 border-l-4 border-red-500 p-4 animate__animated animate__shakeX">
434
+ <div class="flex">
435
+ <div class="flex-shrink-0">
436
+ <i class="fas fa-times-circle text-red-500"></i>
437
+ </div>
438
+ <div class="ml-3">
439
+ <p class="text-sm text-red-700">
440
+ Not quite right. Try again!
441
+ </p>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ `;
446
+ }
447
+
448
+ feedbackDiv.classList.remove('hidden');
449
+ }
450
+
451
+ // Update progress bar and text
452
+ function updateProgress(current, total) {
453
+ document.getElementById('progress-text').textContent = `${current}/${total}`;
454
+ const percentage = (current / total) * 100;
455
+ document.getElementById('progress-bar').style.width = `${percentage}%`;
456
+ }
457
+
458
+ // Check if all questions are answered correctly
459
+ function checkQuizCompletion() {
460
+ const currentProgress = parseInt(document.getElementById('progress-text').textContent.split('/')[0]);
461
+ const totalQuestions = parseInt(document.getElementById('progress-text').textContent.split('/')[1]);
462
+
463
+ if (currentProgress === totalQuestions) {
464
+ // Mark as completed for today
465
+ localStorage.setItem(`completed_${today}`, 'true');
466
+
467
+ // Update streak
468
+ const lastCompletedDate = localStorage.getItem('last_completed_date');
469
+ const streak = parseInt(localStorage.getItem('streak')) || 0;
470
+
471
+ if (lastCompletedDate === today) {
472
+ // Already updated today
473
+ } else if (lastCompletedDate === getYesterdayDate()) {
474
+ // Consecutive day - increment streak
475
+ localStorage.setItem('streak', streak + 1);
476
+ localStorage.setItem('last_completed_date', today);
477
+ document.getElementById('streak-count').textContent = (streak + 1) + ' days';
478
+ } else {
479
+ // New streak
480
+ localStorage.setItem('streak', 1);
481
+ localStorage.setItem('last_completed_date', today);
482
+ document.getElementById('streak-count').textContent = '1 day';
483
+ }
484
+
485
+ // Show completion modal after a delay
486
+ setTimeout(() => {
487
+ document.getElementById('results-modal').classList.remove('hidden');
488
+ createConfetti();
489
+ }, 1000);
490
+ }
491
+ }
492
+
493
+ // Show message if already completed today's quiz
494
+ function showCompletedMessage() {
495
+ const quizContainer = document.getElementById('quiz-container');
496
+ quizContainer.innerHTML = `
497
+ <div class="bg-white rounded-xl shadow-md p-8 text-center animate__animated animate__fadeIn">
498
+ <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
499
+ <i class="fas fa-check-circle text-green-500 text-3xl"></i>
500
+ </div>
501
+ <h3 class="text-2xl font-bold text-gray-800 mb-2">You've already completed today's quiz!</h3>
502
+ <p class="text-gray-600 mb-6">Come back tomorrow for more capitals to learn.</p>
503
+ <button onclick="generateQuiz()" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition">
504
+ Practice Anyway
505
+ </button>
506
+ </div>
507
+ `;
508
+
509
+ // Update progress to show completion
510
+ updateProgress(3, 3);
511
+ }
512
+
513
+ // Location tips for countries
514
+ function getLocationTip(countryName) {
515
+ const tips = {
516
+ "Afghanistan": "Central Asia, between Pakistan and Iran",
517
+ "Albania": "Southeast Europe, on the Adriatic Sea",
518
+ "Algeria": "North Africa, south of the Mediterranean",
519
+ "Andorra": "Between France and Spain in the Pyrenees",
520
+ "Angola": "Southwest Africa, on the Atlantic coast",
521
+ "Canada": "Northern North America, above USA",
522
+ "France": "Western Europe, borders English Channel",
523
+ "Japan": "East Asia, island chain in Pacific Ocean",
524
+ "United States": "North America, between Canada and Mexico"
525
+ // Add more location tips as needed
526
+ };
527
+ return tips[countryName] || `Located in ${getContinent(countryName)}. Look for it on a world map!`;
528
+ }
529
+
530
+ // Helper function to get continent
531
+ function getContinent(countryName) {
532
+ // Simplified continent mapping - you could expand this
533
+ if (["Canada","United States","Mexico"].includes(countryName)) return "North America";
534
+ if (["Brazil","Argentina","Colombia"].includes(countryName)) return "South America";
535
+ if (["France","Germany","Italy"].includes(countryName)) return "Europe";
536
+ if (["China","Japan","India"].includes(countryName)) return "Asia";
537
+ if (["Egypt","South Africa","Nigeria"].includes(countryName)) return "Africa";
538
+ if (["Australia","New Zealand"].includes(countryName)) return "Oceania";
539
+ return "the world map";
540
+ }
541
+
542
+ // Mnemonic devices for countries
543
+ const mnemonics = {
544
+ "Afghanistan": "Kabul - Think 'Kaboom!' like the explosions in Afghanistan's troubled history",
545
+ "Albania": "Tirana - Imagine a 'Tire' rolling down the Albanian mountains",
546
+ "Algeria": "Algiers - Sounds like 'Al gears' - picture Algeria as a country made of gears",
547
+ "Andorra": "Andorra la Vella - 'Vella' sounds like 'villa' - picture a fancy villa in the mountains",
548
+ "Angola": "Luanda - 'Luau' + 'anda' - imagine a Hawaiian luau in Angola",
549
+ // Add more mnemonics as needed...
550
+ "Canada": "Ottawa - Think 'Otter-wa' - picture otters playing in Canada's capital",
551
+ "France": "Paris - Remember 'Paris' rhymes with 'Eiffel' (as in Eiffel Tower)",
552
+ "Japan": "Tokyo - 'Toe-key-oh' - imagine unlocking Japan with a giant toe key",
553
+ "United States": "Washington, D.C. - Think of George Washington chopping down a cherry tree in D.C."
554
+ };
555
+
556
+ // Show mnemonic for a country
557
+ function showMnemonic(index) {
558
+ const countryName = document.querySelector(`#quiz-container div:nth-child(${index+1}) h3`).textContent;
559
+ const mnemonic = mnemonics[countryName] || "Try creating your own mnemonic! Break the capital into parts and associate it with something memorable about the country.";
560
+
561
+ const feedbackDiv = document.getElementById(`feedback-${index}`);
562
+ feedbackDiv.innerHTML = `
563
+ <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 animate__animated animate__fadeIn">
564
+ <div class="flex">
565
+ <div class="flex-shrink-0">
566
+ <i class="fas fa-lightbulb text-yellow-500"></i>
567
+ </div>
568
+ <div class="ml-3">
569
+ <p class="text-sm text-yellow-700 font-medium">Memory Tip:</p>
570
+ <p class="text-sm text-yellow-700 mt-1">${mnemonic}</p>
571
+ <p class="text-xs text-yellow-600 mt-2">Tip: Try saying it aloud and visualizing the connection!</p>
572
+ </div>
573
+ </div>
574
+ </div>
575
+ `;
576
+ feedbackDiv.classList.remove('hidden');
577
+ }
578
+
579
+ // Helper function to get yesterday's date in YYYY-MM-DD format
580
+ function getYesterdayDate() {
581
+ const yesterday = new Date();
582
+ yesterday.setDate(yesterday.getDate() - 1);
583
+ return yesterday.toISOString().split('T')[0];
584
+ }
585
+
586
+ // Create confetti effect
587
+ function createConfetti() {
588
+ const colors = ['#f87171', '#60a5fa', '#34d399', '#fbbf24', '#a78bfa'];
589
+
590
+ for (let i = 0; i < 50; i++) {
591
+ const confetti = document.createElement('div');
592
+ confetti.className = 'confetti';
593
+ confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
594
+ confetti.style.left = Math.random() * 100 + 'vw';
595
+ confetti.style.top = -10 + 'px';
596
+ confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
597
+ confetti.style.width = Math.random() * 10 + 5 + 'px';
598
+ confetti.style.height = Math.random() * 10 + 5 + 'px';
599
+
600
+ document.body.appendChild(confetti);
601
+
602
+ // Animate confetti
603
+ setTimeout(() => {
604
+ confetti.style.opacity = '1';
605
+ confetti.style.top = Math.random() * 100 + 'vh';
606
+ confetti.style.left = parseFloat(confetti.style.left) + (Math.random() - 0.5) * 20 + 'vw';
607
+ confetti.style.transition = `top ${Math.random() * 3 + 2}s ease-out, left ${Math.random() * 3 + 2}s linear, opacity ${Math.random() * 2 + 1}s ease-out`;
608
+
609
+ // Fade out
610
+ setTimeout(() => {
611
+ confetti.style.opacity = '0';
612
+ setTimeout(() => {
613
+ confetti.remove();
614
+ }, 1000);
615
+ }, Math.random() * 3000 + 2000);
616
+ }, 0);
617
+ }
618
+ }
619
+ </script>
620
+ <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=MartsFuture/daily-capital-quizz" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
621
+ </html>