๐ Fruit Set Game: A Fun Way to Learn Intersection and Union for Kids!
๐ Fruit Set Game ๐
๐ Fruit Set Game: A Fun Way to Learn Intersection and Union for Kids!
Learning math concepts like intersection and union doesn't have to be boring or difficult—especially when fruits and emojis are involved! ๐ This interactive fruit set game helps elementary school students understand basic set theory in a fun, visual, and intuitive way.
๐ฉ๐ซ What Is It?
The Fruit Set Game randomly shows two fruit baskets filled with emojis like ๐, ๐, ๐, and more. The game asks students:
-
"Which fruits are in BOTH baskets?" (๐ Intersection)
-
or
-
"Which fruits are in EITHER basket?" (๐ Union)
The child selects the fruits by clicking on them with the mouse—no need to type anything! It's all about visual learning and hands-on interaction.
๐ฏ Why It’s Great for Kids
-
✅ No typing needed—kids select fruits with a simple click
-
✅ Encourages pattern recognition and logical thinking
-
✅ Provides instant feedback with ✅ or ❌
-
✅ Makes abstract math concepts tangible and fun
๐ป How to Play
-
Copy and paste the code below into a
.htmlfile. -
Open the file in your web browser.
-
A question will appear with two fruit baskets.
-
Click on the fruits you think are the right answer.
-
Press "Check Answer" and see if you're correct!
-
A new question will appear every few seconds.
๐ง Learning Concepts Covered
-
Intersection (๊ต์งํฉ): Fruits that appear in both sets.
-
Union (ํฉ์งํฉ): Fruits that appear in either or both sets.
-
Builds the foundation for Venn diagrams and set logic.
๐งพ Full Source Code (Copy & Paste)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fruit Set Game – Intersection & Union</title>
<style>
body {
font-family: 'Comic Sans MS', cursive, sans-serif;
text-align: center;
background-color: #fff8dc;
padding: 20px;
}
h1 {
color: #ff6347;
}
.basket {
display: inline-block;
margin: 10px;
padding: 10px;
border: 2px dashed #888;
min-height: 60px;
font-size: 32px;
background-color: #f0fff0;
}
#question {
font-size: 24px;
margin: 20px;
}
.fruit-picker {
margin: 10px auto;
}
.fruit {
font-size: 32px;
padding: 10px;
cursor: pointer;
border: 2px solid transparent;
border-radius: 8px;
display: inline-block;
margin: 5px;
}
.fruit.selected {
border-color: #ff6347;
background-color: #ffe4e1;
}
button {
font-size: 18px;
padding: 8px 16px;
margin-top: 10px;
background-color: #add8e6;
border: none;
border-radius: 6px;
cursor: pointer;
}
#feedback {
margin-top: 15px;
font-size: 22px;
}
</style>
</head>
<body>
<h1>๐ Fruit Set Game ๐</h1>
<div>
<div class="basket" id="basketA">Basket A</div>
<div class="basket" id="basketB">Basket B</div>
</div>
<div id="question">What is the INTERSECTION of A and B?</div>
<div class="fruit-picker" id="fruit-picker"></div>
<button onclick="checkAnswer()">Check Answer</button>
<div id="feedback"></div>
<script>
const allFruits = ['๐','๐','๐','๐','๐','๐','๐','๐ฅ'];
let setA = [], setB = [], correctAnswer = [], selectedFruits = [];
let currentMode = 'intersection';
function shuffle(array) {
return array.sort(() => Math.random() - 0.5);
}
function generateQuestion() {
setA = shuffle(allFruits).slice(0, 4);
setB = shuffle(allFruits).slice(2, 6);
currentMode = Math.random() < 0.5 ? 'intersection' : 'union';
document.getElementById("basketA").innerText = "A: " + setA.join(" ");
document.getElementById("basketB").innerText = "B: " + setB.join(" ");
document.getElementById("question").innerText =
currentMode === 'intersection'
? "Which fruits are in BOTH baskets? (Intersection)"
: "Which fruits are in EITHER basket? (Union)";
if (currentMode === 'intersection') {
correctAnswer = setA.filter(f => setB.includes(f));
} else {
correctAnswer = Array.from(new Set([...setA, ...setB]));
}
selectedFruits = [];
displayFruitOptions();
document.getElementById("feedback").innerText = "";
}
function displayFruitOptions() {
const picker = document.getElementById("fruit-picker");
picker.innerHTML = "";
allFruits.forEach(fruit => {
const span = document.createElement("span");
span.className = "fruit";
span.innerText = fruit;
span.onclick = () => toggleFruit(fruit, span);
picker.appendChild(span);
});
}
function toggleFruit(fruit, element) {
if (selectedFruits.includes(fruit)) {
selectedFruits = selectedFruits.filter(f => f !== fruit);
element.classList.remove("selected");
} else {
selectedFruits.push(fruit);
element.classList.add("selected");
}
}
function checkAnswer() {
const sortedUser = [...new Set(selectedFruits)].sort().join("");
const sortedCorrect = [...new Set(correctAnswer)].sort().join("");
const feedback = document.getElementById("feedback");
if (sortedUser === sortedCorrect) {
feedback.innerText = "✅ Correct! Great job!";
feedback.style.color = "green";
} else {
feedback.innerText = `❌ Try again! Correct answer: ${correctAnswer.join(" ")}`;
feedback.style.color = "red";
}
setTimeout(generateQuestion, 3000);
}
window.onload = generateQuestion;
</script>
</body>
</html>
Comments
Post a Comment