<!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); // 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>