Build a Fun Apple Math Game with HTML, CSS, and JavaScript
🍎 Apple Math Game 🍎
🍎 Build a Fun Apple Math Game with HTML, CSS, and JavaScript
Looking for a simple and fun way to teach your kids addition and subtraction? How about a cute Apple Math Game where they can visually count apples? In this post, I’ll show you how to build a colorful math quiz using HTML, CSS, and JavaScript.
🌟 What This Game Does
This game:
-
Randomly generates addition or subtraction problems using small numbers.
-
Shows apples (🍎 emojis) to represent the math visually.
-
Lets the user input an answer and gives instant feedback.
-
Displays the result using apples again for reinforcement.
Perfect for young learners just getting started with math concepts!
🧩 How It Works
We create:
-
A question (like “3 + 2 = ?”).
-
A visual of apples to represent the numbers.
-
A text box for the user to input their answer.
-
Feedback on whether the answer is correct.
-
A final count of apples showing the result.
Let’s dive into the code.
🧑💻 The Code
Here’s the complete HTML file. Just copy and paste it into a file called apple-math-game.html and open it in your browser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Apple Math Game</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
.apples {
font-size: 40px;
margin: 10px;
}
#question {
font-size: 24px;
margin: 20px;
}
input {
padding: 10px;
font-size: 18px;
}
button {
padding: 10px 20px;
font-size: 18px;
margin-top: 10px;
}
#feedback {
margin-top: 20px;
font-size: 20px;
font-weight: bold;
}
#resultApples {
font-size: 40px;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>🍎 Apple Math Game 🍎</h1>
<div id="question"></div>
<div class="apples" id="appleVisual"></div>
<input type="number" id="answer" placeholder="Your answer">
<br>
<button onclick="checkAnswer()">Submit</button>
<div id="feedback"></div>
<div id="resultApples"></div>
<script>
let num1, num2, operation;
function getRandomInt(max) {
return Math.floor(Math.random() * max) + 1;
}
function generateQuestion() {
num1 = getRandomInt(5);
num2 = getRandomInt(5);
operation = Math.random() > 0.5 ? '+' : '-';
if (operation === '-' && num2 > num1) {
[num1, num2] = [num2, num1];
}
document.getElementById('question').innerText = `${num1} ${operation} ${num2} = ?`;
let appleLine = '';
if (operation === '+') {
appleLine = '🍎'.repeat(num1) + ' + ' + '🍎'.repeat(num2);
} else {
appleLine = '🍎'.repeat(num1) + ' - ' + '🍎'.repeat(num2);
}
document.getElementById('appleVisual').innerText = appleLine;
document.getElementById('answer').value = '';
document.getElementById('feedback').innerText = '';
document.getElementById('resultApples').innerText = '';
}
function checkAnswer() {
const userAnswer = parseInt(document.getElementById('answer').value);
const correctAnswer = operation === '+' ? num1 + num2 : num1 - num2;
const feedback = document.getElementById('feedback');
const resultApples = document.getElementById('resultApples');
if (userAnswer === correctAnswer) {
feedback.innerText = '✅ Correct! Great job!';
} else {
feedback.innerText = `❌ Oops! The correct answer is ${correctAnswer}.`;
}
// Show result apples
resultApples.innerText = '🍎'.repeat(correctAnswer);
setTimeout(generateQuestion, 3000);
}
generateQuestion();
</script>
</body>
</html>
🍏 Final Tips
-
You can easily customize the range of numbers by changing the
getRandomInt(5)function. -
Try replacing apples with other emojis like 🍌 or 🍇 to keep it fresh.
-
This game can be embedded into a teaching website or shared as a standalone app.
💬 What Do You Think?
If you tried this out or added your own twist to it, let me know! I’d love to see how you or your kids enjoyed the game.
Happy coding and happy learning! 🎉
Comments
Post a Comment