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