Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Fun Math Game</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background: linear-gradient(45deg, #6ab1e7, #4377c4); | |
| padding: 20px; | |
| } | |
| .container { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 20px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.2); | |
| max-width: 500px; | |
| width: 90%; | |
| text-align: center; | |
| } | |
| .header { | |
| margin-bottom: 2rem; | |
| } | |
| .title { | |
| font-size: 2rem; | |
| color: #4377c4; | |
| margin-bottom: 1rem; | |
| } | |
| .stats { | |
| display: flex; | |
| justify-content: space-around; | |
| margin-bottom: 1rem; | |
| } | |
| .stat-item { | |
| background: #f0f8ff; | |
| padding: 0.5rem 1rem; | |
| border-radius: 10px; | |
| font-weight: bold; | |
| } | |
| .question { | |
| font-size: 2.5rem; | |
| margin: 1.5rem 0; | |
| color: #333; | |
| animation: fadeIn 0.5s ease; | |
| } | |
| .options { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1rem; | |
| margin: 2rem 0; | |
| } | |
| .option { | |
| padding: 1rem; | |
| border: 2px solid #4377c4; | |
| border-radius: 15px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-size: 1.2rem; | |
| background: white; | |
| } | |
| .option:hover { | |
| background: #4377c4; | |
| color: white; | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(67, 119, 196, 0.3); | |
| } | |
| .feedback { | |
| margin: 1rem 0; | |
| font-size: 1.3rem; | |
| min-height: 1.5em; | |
| font-weight: bold; | |
| } | |
| .correct { | |
| color: #2ecc71; | |
| animation: bounce 0.5s ease; | |
| } | |
| .wrong { | |
| color: #e74c3c; | |
| animation: shake 0.5s ease; | |
| } | |
| .next-btn { | |
| background: #4377c4; | |
| color: white; | |
| border: none; | |
| padding: 1rem 2.5rem; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| font-size: 1.1rem; | |
| transition: all 0.3s ease; | |
| font-weight: bold; | |
| } | |
| .next-btn:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 5px 15px rgba(67, 119, 196, 0.3); | |
| } | |
| .timer { | |
| width: 100%; | |
| height: 5px; | |
| background: #eee; | |
| margin-bottom: 1rem; | |
| border-radius: 5px; | |
| overflow: hidden; | |
| } | |
| .timer-bar { | |
| height: 100%; | |
| background: #4377c4; | |
| width: 100%; | |
| transition: width 1s linear; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(-10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.1); } | |
| } | |
| @keyframes shake { | |
| 0%, 100% { transform: translateX(0); } | |
| 25% { transform: translateX(-5px); } | |
| 75% { transform: translateX(5px); } | |
| } | |
| @media (max-width: 480px) { | |
| .container { | |
| padding: 1rem; | |
| } | |
| .question { | |
| font-size: 1.8rem; | |
| } | |
| .option { | |
| font-size: 1rem; | |
| padding: 0.8rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1 class="title">Fun Math Game 🎮</h1> | |
| <div class="timer"> | |
| <div class="timer-bar" id="timer-bar"></div> | |
| </div> | |
| <div class="stats"> | |
| <div class="stat-item">Score: <span id="score">0</span></div> | |
| <div class="stat-item">Level: <span id="level">1</span></div> | |
| <div class="stat-item">Streak: <span id="streak">0</span></div> | |
| </div> | |
| </div> | |
| <div class="question" id="question"></div> | |
| <div class="options" id="options"></div> | |
| <div class="feedback" id="feedback"></div> | |
| <button class="next-btn" onclick="nextQuestion()">Next Question ➡️</button> | |
| </div> | |
| <script> | |
| let score = 0; | |
| let level = 1; | |
| let streak = 0; | |
| let correctAnswer; | |
| let timerInterval; | |
| function startTimer() { | |
| clearInterval(timerInterval); | |
| const timerBar = document.getElementById('timer-bar'); | |
| timerBar.style.width = '100%'; | |
| let timeLeft = 100; | |
| timerInterval = setInterval(() => { | |
| timeLeft -= 1; | |
| timerBar.style.width = timeLeft + '%'; | |
| if (timeLeft <= 0) { | |
| clearInterval(timerInterval); | |
| checkAnswer(null); | |
| } | |
| }, 100); | |
| } | |
| function generateQuestion() { | |
| const operations = ['+', '-', '*', '/']; | |
| const operation = operations[Math.floor(Math.random() * operations.length)]; | |
| let num1, num2; | |
| const maxNum = 10 + (level * 5); // Increase difficulty with level | |
| switch(operation) { | |
| case '+': | |
| num1 = Math.floor(Math.random() * maxNum); | |
| num2 = Math.floor(Math.random() * maxNum); | |
| correctAnswer = num1 + num2; | |
| break; | |
| case '-': | |
| num1 = Math.floor(Math.random() * maxNum); | |
| num2 = Math.floor(Math.random() * num1); | |
| correctAnswer = num1 - num2; | |
| break; | |
| case '*': | |
| num1 = Math.floor(Math.random() * (level + 5)); | |
| num2 = Math.floor(Math.random() * (level + 5)); | |
| correctAnswer = num1 * num2; | |
| break; | |
| case '/': | |
| num2 = Math.floor(Math.random() * (level + 3)) + 1; | |
| correctAnswer = Math.floor(Math.random() * (level + 3)); | |
| num1 = correctAnswer * num2; | |
| break; | |
| } | |
| document.getElementById('question').textContent = `${num1} ${operation} ${num2} = ?`; | |
| generateOptions(correctAnswer); | |
| startTimer(); | |
| } | |
| function generateOptions(correct) { | |
| const options = [correct]; | |
| const range = Math.max(10, correct * 0.5); | |
| while(options.length < 4) { | |
| const randomOption = correct + Math.floor(Math.random() * range) - (range/2); | |
| if(!options.includes(randomOption) && randomOption >= 0) { | |
| options.push(randomOption); | |
| } | |
| } | |
| options.sort(() => Math.random() - 0.5); | |
| const optionsContainer = document.getElementById('options'); | |
| optionsContainer.innerHTML = ''; | |
| options.forEach(option => { | |
| const button = document.createElement('div'); | |
| button.className = 'option'; | |
| button.textContent = option; | |
| button.onclick = () => checkAnswer(option); | |
| optionsContainer.appendChild(button); | |
| }); | |
| } | |
| function checkAnswer(selected) { | |
| clearInterval(timerInterval); | |
| const feedback = document.getElementById('feedback'); | |
| if(selected === correctAnswer) { | |
| score += (level * 10); | |
| streak++; | |
| if(streak % 3 === 0) level++; | |
| document.getElementById('score').textContent = score; | |
| document.getElementById('level').textContent = level; | |
| document.getElementById('streak').textContent = streak; | |
| feedback.textContent = "Awesome! 🎉"; | |
| feedback.className = 'feedback correct'; | |
| } else { | |
| streak = 0; | |
| document.getElementById('streak').textContent = streak; | |
| feedback.textContent = selected === null ? "Time's up! ⏰" : "Wrong! Try again! 😢"; | |
| feedback.className = 'feedback wrong'; | |
| } | |
| document.querySelectorAll('.option').forEach(option => { | |
| option.style.pointerEvents = 'none'; | |
| if(parseInt(option.textContent) === correctAnswer) { | |
| option.style.background = '#2ecc71'; | |
| option.style.color = 'white'; | |
| } else if(parseInt(option.textContent) === selected && selected !== correctAnswer) { | |
| option.style.background = '#e74c3c'; | |
| option.style.color = 'white'; | |
| } | |
| }); | |
| } | |
| function nextQuestion() { | |
| document.getElementById('feedback').textContent = ''; | |
| generateQuestion(); | |
| } | |
| // Start game | |
| generateQuestion(); | |
| </script> | |
| </body> | |
| </html> |