CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Speed Math Game</title>
<style>
.speedMath7842-body {
font-family: Arial, sans-serif;
background-color: #f0f4f8;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
.speedMath7842-container {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 600px;
width: 100%;
}
.speedMath7842-header {
text-align: center;
margin-bottom: 20px;
}
.speedMath7842-title {
color: #2c3e50;
font-size: 24px;
margin-bottom: 10px;
}
.speedMath7842-description {
color: #7f8c8d;
font-size: 14px;
margin-bottom: 20px;
}
.speedMath7842-instructions {
color: #34495e;
font-size: 14px;
margin-bottom: 20px;
text-align: left;
}
.speedMath7842-game-area {
text-align: center;
}
.speedMath7842-equation {
font-size: 24px;
margin-bottom: 20px;
color: #2c3e50;
}
.speedMath7842-options {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.speedMath7842-option {
background-color: #3498db;
border: none;
border-radius: 5px;
color: #ffffff;
cursor: pointer;
font-size: 16px;
padding: 10px;
transition: background-color 0.3s;
}
.speedMath7842-option:hover {
background-color: #2980b9;
}
.speedMath7842-feedback {
font-size: 18px;
margin-bottom: 20px;
font-weight: bold;
}
.speedMath7842-feedback.correct {
color: #2ecc71;
}
.speedMath7842-feedback.wrong {
color: #e74c3c;
}
.speedMath7842-controls {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.speedMath7842-button {
background-color: #2ecc71;
border: none;
border-radius: 5px;
color: #ffffff;
cursor: pointer;
font-size: 16px;
padding: 10px 20px;
transition: background-color 0.3s;
}
.speedMath7842-button:hover {
background-color: #27ae60;
}
.speedMath7842-button:disabled {
background-color: #95a5a6;
cursor: not-allowed;
}
.speedMath7842-difficulty {
margin-bottom: 20px;
}
.speedMath7842-difficulty select {
padding: 5px;
font-size: 16px;
}
.speedMath7842-round-counter {
font-size: 18px;
margin-bottom: 10px;
color: #2c3e50;
}
@media (max-width: 480px) {
.speedMath7842-container {
padding: 10px;
}
.speedMath7842-title {
font-size: 20px;
}
.speedMath7842-equation {
font-size: 20px;
}
.speedMath7842-option {
font-size: 14px;
}
}
</style>
</head>
<body class="speedMath7842-body">
<div class="speedMath7842-container">
<div class="speedMath7842-header">
<h1 class="speedMath7842-title">Speed Math Game</h1>
<p class="speedMath7842-description">Test your math skills against the clock!</p>
<div class="speedMath7842-instructions">
<h3>How to play:</h3>
<ol>
<li>Choose a difficulty level</li>
<li>Click 'Start Game' to begin</li>
<li>Solve 10 math problems as quickly as possible</li>
<li>Select the correct answer from 4 options</li>
<li>Wrong answers add increasing penalties to your time</li>
</ol>
</div>
</div>
<div class="speedMath7842-game-area">
<div class="speedMath7842-difficulty">
<label for="difficulty">Choose difficulty: </label>
<select id="difficulty">
<option value="kindergarten">Kindergarten</option>
<option value="highschool">High School</option>
<option value="university">University</option>
</select>
</div>
<div class="speedMath7842-round-counter" id="roundCounter"></div>
<div class="speedMath7842-equation" id="equation"></div>
<div class="speedMath7842-options" id="options"></div>
<div class="speedMath7842-feedback" id="feedback"></div>
<div class="speedMath7842-controls">
<button class="speedMath7842-button" id="startButton">Start Game</button>
<button class="speedMath7842-button" id="newGameButton" disabled>New Game</button>
</div>
</div>
</div>
<script>
const equation = document.getElementById('equation');
const options = document.getElementById('options');
const feedback = document.getElementById('feedback');
const startButton = document.getElementById('startButton');
const newGameButton = document.getElementById('newGameButton');
const difficultySelect = document.getElementById('difficulty');
const roundCounter = document.getElementById('roundCounter');
let currentQuestion = 0;
let startTime;
let gameRunning = false;
let totalTime = 0;
let wrongAnswerCount = 0;
const difficulties = {
kindergarten: {
minNumber: 1,
maxNumber: 10,
operations: ['+', '-'],
minNumbers: 2,
maxNumbers: 2,
useDecimals: false,
useNegatives: false
},
highschool: {
minNumber: 1,
maxNumber: 20,
operations: ['+', '-', '*'],
minNumbers: 2,
maxNumbers: 4,
useDecimals: false,
useNegatives: false
},
university: {
minNumber: -50,
maxNumber: 50,
operations: ['+', '-', '*', '/'],
minNumbers: 4,
maxNumbers: 6,
useDecimals: true,
useNegatives: true
},
};
function generateNumber(min, max, useDecimals) {
let num = Math.random() * (max - min) + min;
return useDecimals ? Number(num.toFixed(1)) : Math.round(num);
}
function generateQuestion(difficulty) {
const { minNumber, maxNumber, operations, minNumbers, maxNumbers, useDecimals, useNegatives } = difficulties[difficulty];
const numCount = Math.floor(Math.random() * (maxNumbers - minNumbers + 1)) + minNumbers;
let numbers = [];
let equationText = '';
let result;
for (let i = 0; i < numCount; i++) {
const num = generateNumber(useNegatives ? minNumber : 0, maxNumber, useDecimals);
numbers.push(num);
if (i > 0) {
const operation = operations[Math.floor(Math.random() * operations.length)];
equationText += ` ${operation} `;
if (i < numCount - 1 && Math.random() < 0.5) {
equationText += '(';
}
}
equationText += num;
if (i > 0 && i < numCount - 1 && equationText.includes('(') && !equationText.endsWith(')')) {
equationText += ')';
}
}
if (equationText.includes('(') && !equationText.endsWith(')')) {
equationText += ')';
}
try {
result = eval(equationText);
result = Number(result.toFixed(2));
} catch (error) {
return generateQuestion(difficulty);
}
if (result === 0 || !isFinite(result) || isNaN(result)) {
return generateQuestion(difficulty);
}
return { equation: equationText, result };
}
function generateOptions(result) {
const options = [result];
const isDecimal = !Number.isInteger(result);
while (options.length < 4) {
let option;
if (isDecimal) {
option = Number((result + (Math.random() - 0.5) * 10).toFixed(2));
} else {
option = Math.round(result + (Math.random() - 0.5) * 10);
}
if (!options.includes(option) && option !== 0 && isFinite(option) && !isNaN(option)) {
options.push(option);
}
}
return options.sort(() => Math.random() - 0.5);
}
function displayQuestion(difficulty) {
const { equation: equationText, result } = generateQuestion(difficulty);
equation.textContent = `${equationText} = ?`;
const questionOptions = generateOptions(result);
options.innerHTML = '';
questionOptions.forEach(option => {
const button = document.createElement('button');
button.classList.add('speedMath7842-option');
button.textContent = option;
button.addEventListener('click', () => checkAnswer(option, result));
options.appendChild(button);
});
roundCounter.textContent = `Round: ${currentQuestion + 1}/10`;
}
function checkAnswer(selectedAnswer, correctAnswer) {
if (!gameRunning) return;
if (Math.abs(selectedAnswer - correctAnswer) < 0.01) {
feedback.textContent = 'Correct!';
feedback.className = 'speedMath7842-feedback correct';
wrongAnswerCount = 0;
} else {
feedback.textContent = 'Wrong!';
feedback.className = 'speedMath7842-feedback wrong';
const penalty = 5 * Math.pow(2, wrongAnswerCount);
totalTime += penalty;
wrongAnswerCount++;
}
currentQuestion++;
if (currentQuestion < 10) {
setTimeout(() => {
feedback.textContent = '';
displayQuestion(difficultySelect.value);
}, 1000);
} else {
endGame();
}
}
function startGame() {
gameRunning = true;
currentQuestion = 0;
totalTime = 0;
wrongAnswerCount = 0;
startTime = Date.now();
startButton.disabled = true;
newGameButton.disabled = true;
difficultySelect.disabled = true;
feedback.textContent = '';
displayQuestion(difficultySelect.value);
}
function endGame() {
gameRunning = false;
const finalTime = Math.floor((Date.now() - startTime) / 1000) + totalTime;
feedback.textContent = `Game Over! Final Time: ${finalTime}s`;
feedback.className = 'speedMath7842-feedback';
equation.textContent = '';
options.innerHTML = '';
roundCounter.textContent = '';
startButton.disabled = true;
newGameButton.disabled = false;
difficultySelect.disabled = false;
}
startButton.addEventListener('click', startGame);
newGameButton.addEventListener('click', () => {
startButton.disabled = false;
newGameButton.disabled = true;
feedback.textContent = '';
equation.textContent = '';
options.innerHTML = '';
roundCounter.textContent = '';
});
</script>
</body>
</html>