| <!DOCTYPE html> |
| <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); |
| |
| 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(); |
| } |
| |
| |
| generateQuestion(); |
| </script> |
| </body> |
| </html> |
