| | <!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> |
