Hugging Face's logo

Spaces:
ThorAILabs
/
MathGame
Running

App Files Community
ThorAILabs commited on
Commit
383f554
·
verified ·
1 Parent(s): 37c7406

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +378 -19
index.html CHANGED
@@ -1,19 +1,378 @@
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>Infinite Algebra Game</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
+ .fade-in {
18
+ animation: fadeIn 0.5s ease-in-out;
19
+ }
20
+ @keyframes fadeIn {
21
+ from { opacity: 0; transform: translateY(10px); }
22
+ to { opacity: 1; transform: translateY(0); }
23
+ }
24
+ .shake {
25
+ animation: shake 0.5s;
26
+ }
27
+ @keyframes shake {
28
+ 0%, 100% { transform: translateX(0); }
29
+ 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
30
+ 20%, 40%, 60%, 80% { transform: translateX(5px); }
31
+ }
32
+ </style>
33
+ </head>
34
+ <body class="bg-gradient-to-br from-indigo-900 to-purple-800 min-h-screen text-white font-sans">
35
+ <div class="container mx-auto px-4 py-8 max-w-3xl">
36
+ <header class="text-center mb-8">
37
+ <h1 class="text-4xl font-bold mb-2">∞ Infinite Algebra Game</h1>
38
+ <p class="text-xl opacity-80">Solve algebra problems as they get progressively harder!</p>
39
+ </header>
40
+
41
+ <div class="bg-white/10 backdrop-blur-md rounded-xl shadow-2xl overflow-hidden transition-all duration-300">
42
+ <!-- Game Stats -->
43
+ <div class="flex justify-between items-center p-6 border-b border-white/10">
44
+ <div class="text-center">
45
+ <div class="text-sm opacity-70">Level</div>
46
+ <div class="text-2xl font-bold" id="level">1</div>
47
+ </div>
48
+ <div class="text-center">
49
+ <div class="text-sm opacity-70">Score</div>
50
+ <div class="text-2xl font-bold" id="score">0</div>
51
+ </div>
52
+ <div class="text-center">
53
+ <div class="text-sm opacity-70">Streak</div>
54
+ <div class="text-2xl font-bold" id="streak">0</div>
55
+ </div>
56
+ </div>
57
+
58
+ <!-- Game Area -->
59
+ <div class="p-8 text-center">
60
+ <div class="mb-8">
61
+ <div class="text-lg mb-2 opacity-80">Solve for x:</div>
62
+ <div class="text-5xl font-bold mb-6 fade-in" id="problem">2x + 5 = 15</div>
63
+ <div class="max-w-xs mx-auto relative">
64
+ <input type="number" id="answer" class="w-full bg-white/20 border border-white/30 rounded-lg py-4 px-6 text-2xl text-center focus:outline-none focus:ring-2 focus:ring-purple-400 transition" placeholder="Your answer" autofocus>
65
+ <button id="submit-btn" class="mt-4 bg-purple-600 hover:bg-purple-500 text-white font-bold py-3 px-8 rounded-full transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-50">
66
+ Submit <i class="fas fa-arrow-right ml-2"></i>
67
+ </button>
68
+ </div>
69
+ </div>
70
+
71
+ <div id="feedback" class="h-8 mb-4"></div>
72
+
73
+ <div class="bg-white/10 rounded-lg p-4 text-left hidden" id="hint-box">
74
+ <div class="flex items-start">
75
+ <div class="mr-3 text-purple-300 text-xl"><i class="fas fa-lightbulb"></i></div>
76
+ <div>
77
+ <div class="font-bold mb-1">Hint</div>
78
+ <div id="hint-text">Remember to isolate x by performing inverse operations on both sides of the equation.</div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </div>
83
+
84
+ <!-- Game Controls -->
85
+ <div class="p-6 border-t border-white/10 flex justify-between">
86
+ <button id="hint-btn" class="text-purple-300 hover:text-purple-200 transition flex items-center">
87
+ <i class="fas fa-lightbulb mr-2"></i> Get Hint
88
+ </button>
89
+ <button id="new-game-btn" class="text-white/70 hover:text-white transition flex items-center">
90
+ <i class="fas fa-redo mr-2"></i> New Game
91
+ </button>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- How to Play -->
96
+ <div class="mt-8 bg-white/10 backdrop-blur-md rounded-xl p-6">
97
+ <h2 class="text-xl font-bold mb-4 flex items-center">
98
+ <i class="fas fa-question-circle mr-2"></i> How to Play
99
+ </h2>
100
+ <ul class="space-y-2">
101
+ <li class="flex items-start">
102
+ <i class="fas fa-check-circle text-purple-300 mr-2 mt-1"></i>
103
+ <span>Solve the algebra equation for x</span>
104
+ </li>
105
+ <li class="flex items-start">
106
+ <i class="fas fa-check-circle text-purple-300 mr-2 mt-1"></i>
107
+ <span>Type your answer in the box and press Submit</span>
108
+ </li>
109
+ <li class="flex items-start">
110
+ <i class="fas fa-check-circle text-purple-300 mr-2 mt-1"></i>
111
+ <span>Problems get harder as you level up</span>
112
+ </li>
113
+ <li class="flex items-start">
114
+ <i class="fas fa-check-circle text-purple-300 mr-2 mt-1"></i>
115
+ <span>Correct answers give you points and increase your streak</span>
116
+ </li>
117
+ </ul>
118
+ </div>
119
+ </div>
120
+
121
+ <script>
122
+ // Game state
123
+ const gameState = {
124
+ level: 1,
125
+ score: 0,
126
+ streak: 0,
127
+ currentProblem: null,
128
+ correctAnswer: null,
129
+ hintShown: false
130
+ };
131
+
132
+ // DOM elements
133
+ const elements = {
134
+ level: document.getElementById('level'),
135
+ score: document.getElementById('score'),
136
+ streak: document.getElementById('streak'),
137
+ problem: document.getElementById('problem'),
138
+ answer: document.getElementById('answer'),
139
+ submitBtn: document.getElementById('submit-btn'),
140
+ feedback: document.getElementById('feedback'),
141
+ hintBox: document.getElementById('hint-box'),
142
+ hintText: document.getElementById('hint-text'),
143
+ hintBtn: document.getElementById('hint-btn'),
144
+ newGameBtn: document.getElementById('new-game-btn')
145
+ };
146
+
147
+ // Initialize game
148
+ function initGame() {
149
+ gameState.level = 1;
150
+ gameState.score = 0;
151
+ gameState.streak = 0;
152
+ gameState.hintShown = false;
153
+ updateUI();
154
+ generateProblem();
155
+ elements.answer.value = '';
156
+ elements.answer.focus();
157
+ elements.feedback.innerHTML = '';
158
+ elements.hintBox.classList.add('hidden');
159
+ }
160
+
161
+ // Update UI with current game state
162
+ function updateUI() {
163
+ elements.level.textContent = gameState.level;
164
+ elements.score.textContent = gameState.score;
165
+ elements.streak.textContent = gameState.streak;
166
+ }
167
+
168
+ // Generate a new algebra problem based on current level
169
+ function generateProblem() {
170
+ let a, b, c, equation, answer;
171
+
172
+ // Adjust problem difficulty based on level
173
+ if (gameState.level <= 3) {
174
+ // Simple equations: ax + b = c
175
+ a = getRandomInt(1, 5);
176
+ b = getRandomInt(1, 10);
177
+ c = a * getRandomInt(1, 10) + b;
178
+ equation = `${a}x + ${b} = ${c}`;
179
+ answer = (c - b) / a;
180
+ } else if (gameState.level <= 6) {
181
+ // Equations with subtraction: ax - b = c
182
+ a = getRandomInt(1, 8);
183
+ b = getRandomInt(1, 15);
184
+ c = a * getRandomInt(1, 10) - b;
185
+ equation = `${a}x - ${b} = ${c}`;
186
+ answer = (c + b) / a;
187
+ } else if (gameState.level <= 9) {
188
+ // Equations with multiplication coefficients: a(bx + c) = d
189
+ a = getRandomInt(2, 5);
190
+ b = getRandomInt(1, 5);
191
+ c = getRandomInt(1, 10);
192
+ const d = a * (b * getRandomInt(1, 10) + c);
193
+ equation = `${a}(${b}x + ${c}) = ${d}`;
194
+ answer = (d / a - c) / b;
195
+ } else if (gameState.level <= 12) {
196
+ // Equations with division: (ax + b)/c = d
197
+ a = getRandomInt(1, 5);
198
+ b = getRandomInt(1, 10);
199
+ c = getRandomInt(2, 5);
200
+ const d = Math.floor((a * getRandomInt(1, 10) + b) / c);
201
+ equation = `(${a}x + ${b})/${c} = ${d}`;
202
+ answer = (d * c - b) / a;
203
+ } else {
204
+ // More complex equations with multiple operations
205
+ const operation = getRandomInt(1, 3);
206
+ switch(operation) {
207
+ case 1:
208
+ // ax + b = cx + d
209
+ a = getRandomInt(1, 6);
210
+ b = getRandomInt(1, 15);
211
+ c = getRandomInt(1, 6);
212
+ const d = (a - c) * getRandomInt(1, 10) + b;
213
+ equation = `${a}x + ${b} = ${c}x + ${d}`;
214
+ answer = (d - b) / (a - c);
215
+ break;
216
+ case 2:
217
+ // a(x + b) = c(x - d)
218
+ a = getRandomInt(2, 5);
219
+ b = getRandomInt(1, 5);
220
+ c = getRandomInt(2, 5);
221
+ const e = getRandomInt(1, 5);
222
+ const f = (a * (e + b)) / c + e;
223
+ equation = `${a}(x + ${b}) = ${c}(x - ${e})`;
224
+ answer = f;
225
+ break;
226
+ case 3:
227
+ // (ax + b)/(cx + d) = e
228
+ a = getRandomInt(1, 4);
229
+ b = getRandomInt(1, 8);
230
+ c = getRandomInt(1, 4);
231
+ const g = getRandomInt(1, 3);
232
+ const h = getRandomInt(1, 5);
233
+ const i = (a * h + b) / (c * h + g);
234
+ equation = `(${a}x + ${b})/(${c}x + ${g}) = ${i}`;
235
+ answer = h;
236
+ break;
237
+ }
238
+ }
239
+
240
+ gameState.currentProblem = equation;
241
+ gameState.correctAnswer = answer;
242
+ gameState.hintShown = false;
243
+
244
+ // Add fade-in animation
245
+ elements.problem.classList.remove('fade-in');
246
+ void elements.problem.offsetWidth; // Trigger reflow
247
+ elements.problem.classList.add('fade-in');
248
+
249
+ elements.problem.textContent = equation;
250
+ elements.hintBox.classList.add('hidden');
251
+
252
+ // Generate hint based on problem type
253
+ generateHint(equation, answer);
254
+ }
255
+
256
+ // Generate a hint for the current problem
257
+ function generateHint(equation, answer) {
258
+ let hint = "";
259
+
260
+ if (equation.includes('+') && !equation.includes('(') && !equation.includes('/')) {
261
+ hint = `To solve ${equation}, subtract the constant term from both sides, then divide by the coefficient of x.`;
262
+ } else if (equation.includes('-') && !equation.includes('(') && !equation.includes('/')) {
263
+ hint = `To solve ${equation}, add the constant term to both sides, then divide by the coefficient of x.`;
264
+ } else if (equation.includes('(') && equation.includes(')') && !equation.includes('/')) {
265
+ hint = `First, distribute the multiplication across the parentheses in ${equation}, then combine like terms and solve as usual.`;
266
+ } else if (equation.includes('/')) {
267
+ hint = `For ${equation}, start by eliminating the denominator by multiplying both sides by it, then proceed to solve the resulting equation.`;
268
+ } else {
269
+ hint = `Combine like terms in ${equation} to isolate x on one side of the equation, then solve for x.`;
270
+ }
271
+
272
+ elements.hintText.textContent = hint;
273
+ }
274
+
275
+ // Check the user's answer
276
+ function checkAnswer() {
277
+ const userAnswer = parseFloat(elements.answer.value);
278
+
279
+ if (isNaN(userAnswer)) {
280
+ showFeedback('Please enter a valid number', 'error');
281
+ elements.answer.classList.add('shake');
282
+ setTimeout(() => elements.answer.classList.remove('shake'), 500);
283
+ return;
284
+ }
285
+
286
+ // Round to 2 decimal places for comparison
287
+ const roundedUserAnswer = Math.round(userAnswer * 100) / 100;
288
+ const roundedCorrectAnswer = Math.round(gameState.correctAnswer * 100) / 100;
289
+
290
+ if (roundedUserAnswer === roundedCorrectAnswer) {
291
+ // Correct answer
292
+ gameState.score += gameState.level * 10;
293
+ gameState.streak += 1;
294
+
295
+ // Bonus for streak
296
+ if (gameState.streak >= 3) {
297
+ gameState.score += gameState.streak * 5;
298
+ }
299
+
300
+ // Level up every 3 correct answers
301
+ if (gameState.streak % 3 === 0) {
302
+ gameState.level += 1;
303
+ }
304
+
305
+ updateUI();
306
+ showFeedback(`Correct! x = ${roundedCorrectAnswer}`, 'success');
307
+
308
+ // Add celebration effect
309
+ elements.problem.classList.add('pulse-animation');
310
+ setTimeout(() => {
311
+ elements.problem.classList.remove('pulse-animation');
312
+ generateProblem();
313
+ elements.answer.value = '';
314
+ elements.answer.focus();
315
+ }, 1000);
316
+ } else {
317
+ // Wrong answer
318
+ gameState.streak = 0;
319
+ updateUI();
320
+ showFeedback(`Incorrect. Try again!`, 'error');
321
+ elements.answer.classList.add('shake');
322
+ setTimeout(() => elements.answer.classList.remove('shake'), 500);
323
+ elements.answer.select();
324
+ }
325
+ }
326
+
327
+ // Show feedback message
328
+ function showFeedback(message, type) {
329
+ elements.feedback.innerHTML = '';
330
+ const feedbackEl = document.createElement('div');
331
+ feedbackEl.className = `px-4 py-2 rounded-lg font-medium fade-in ${type === 'success' ? 'bg-green-500/20 text-green-200' : 'bg-red-500/20 text-red-200'}`;
332
+ feedbackEl.textContent = message;
333
+ elements.feedback.appendChild(feedbackEl);
334
+
335
+ // Remove feedback after 3 seconds
336
+ setTimeout(() => {
337
+ feedbackEl.classList.remove('fade-in');
338
+ feedbackEl.classList.add('opacity-0', 'transition-opacity', 'duration-300');
339
+ setTimeout(() => {
340
+ if (elements.feedback.contains(feedbackEl)) {
341
+ elements.feedback.removeChild(feedbackEl);
342
+ }
343
+ }, 300);
344
+ }, 3000);
345
+ }
346
+
347
+ // Show hint
348
+ function showHint() {
349
+ if (!gameState.hintShown) {
350
+ elements.hintBox.classList.remove('hidden');
351
+ gameState.hintShown = true;
352
+
353
+ // Penalize for using hint
354
+ gameState.score = Math.max(0, gameState.score - 5);
355
+ updateUI();
356
+ }
357
+ }
358
+
359
+ // Helper function to get random integer
360
+ function getRandomInt(min, max) {
361
+ return Math.floor(Math.random() * (max - min + 1)) + min;
362
+ }
363
+
364
+ // Event listeners
365
+ elements.submitBtn.addEventListener('click', checkAnswer);
366
+ elements.answer.addEventListener('keypress', (e) => {
367
+ if (e.key === 'Enter') {
368
+ checkAnswer();
369
+ }
370
+ });
371
+ elements.hintBtn.addEventListener('click', showHint);
372
+ elements.newGameBtn.addEventListener('click', initGame);
373
+
374
+ // Start the game
375
+ initGame();
376
+ </script>
377
+ </body>
378
+ </html>