Visualize Permutations and Combinations with Fruits!
Fruit Permutation & Combination Visualizer
Combinations (order doesn't matter)
Permutations (order matters)
Have you ever wondered how many different ways you can arrange fruits when choosing some from a basket? Today, let’s explore permutations and combinations with a fun and simple program using fruit emojis!
🍏 What You Will Learn
-
The difference between permutations and combinations
-
How to calculate them
-
How to see them visually using fruit icons!
🥧 Meet the Fruits
We have five fruits in our basket:
-
🍎 Apple
-
🍌 Banana
-
🍇 Grapes
-
🍓 Strawberry
-
🍍 Pineapple
You can choose any number of fruits from 1 to 5. Once you choose, the program shows you:
-
All combinations (order doesn’t matter)
-
All permutations (order matters)
-
The math formulas and actual counts
🌐 Simple Definitions
Combination: A selection of items where the order does not matter.
-
Formula: C(n, r) = n! / (r! × (n-r)!)
Permutation: An arrangement of items where the order matters.
-
Formula: P(n, r) = n! / (n-r)!
Example: If you choose 3 out of 5 fruits, combinations are groupings like 🍎🍌🍓, while permutations show different orders like 🍌🍎🍓.
⚖️ Try It Yourself!
Copy and paste the following code into a .html file and open it in your browser. It’s interactive and fun!
💻 Full Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fruit Permutation and Combination</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; max-width: 900px; margin: auto; }
h1 { color: #2c3e50; }
.fruit-list, .output { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.combo, .perm { border: 1px solid #ccc; padding: 10px; border-radius: 8px; background: #f9f9f9; }
.set { display: flex; gap: 5px; padding: 5px; background: #eef; border-radius: 5px; margin: 5px 0; }
input { width: 50px; margin-right: 10px; }
</style>
</head>
<body>
<h1>Fruit Permutation & Combination Visualizer</h1>
<div>
<label>Select number of fruits (n): </label>
<input type="number" id="fruitCount" min="1" max="5" value="3">
<button onclick="generateSets()">Generate</button>
</div>
<div class="fruit-list" id="fruitIcons">
<span>🍎 Apple</span>
<span>🍌 Banana</span>
<span>🍇 Grapes</span>
<span>🍓 Strawberry</span>
<span>🍍 Pineapple</span>
</div>
<div class="output">
<div class="combo">
<h2>Combinations (order doesn't matter)</h2>
<div id="combinations"></div>
<div id="comboFormula"></div>
</div>
<div class="perm">
<h2>Permutations (order matters)</h2>
<div id="permutations"></div>
<div id="permFormula"></div>
</div>
</div>
<script>
const fruits = [
{ icon: "🍎", name: "Apple" },
{ icon: "🍌", name: "Banana" },
{ icon: "🍇", name: "Grapes" },
{ icon: "🍓", name: "Strawberry" },
{ icon: "🍍", name: "Pineapple" }
];
function factorial(n) {
return n <= 1 ? 1 : n * factorial(n - 1);
}
function combinations(arr, n) {
if (n === 0) return [[]];
if (arr.length === 0) return [];
const [first, ...rest] = arr;
const withFirst = combinations(rest, n - 1).map(c => [first, ...c]);
const withoutFirst = combinations(rest, n);
return withFirst.concat(withoutFirst);
}
function permutations(arr) {
if (arr.length === 1) return [arr];
const result = [];
arr.forEach((item, index) => {
const rest = arr.slice(0, index).concat(arr.slice(index + 1));
permutations(rest).forEach(p => result.push([item, ...p]));
});
return result;
}
function generateSets() {
const n = parseInt(document.getElementById("fruitCount").value);
const combContainer = document.getElementById("combinations");
const permContainer = document.getElementById("permutations");
const comboFormula = document.getElementById("comboFormula");
const permFormula = document.getElementById("permFormula");
combContainer.innerHTML = "";
permContainer.innerHTML = "";
const combos = combinations(fruits, n);
const perms = combos.flatMap(c => permutations(c));
combos.forEach(c => {
const div = document.createElement("div");
div.className = "set";
div.innerHTML = c.map(f => f.icon).join(" ");
combContainer.appendChild(div);
});
perms.forEach(p => {
const div = document.createElement("div");
div.className = "set";
div.innerHTML = p.map(f => f.icon).join(" ");
permContainer.appendChild(div);
});
comboFormula.innerHTML = `<strong>Combination Formula:</strong> C(5, ${n}) = 5! / (${n}! * (5 - ${n})!) = ${factorial(5)} / (${factorial(n)} * ${factorial(5 - n)}) = <strong>${combos.length}</strong>`;
permFormula.innerHTML = `<strong>Permutation Formula:</strong> P(5, ${n}) = 5! / (5 - ${n})! = ${factorial(5)} / ${factorial(5 - n)} = <strong>${perms.length}</strong>`;
}
generateSets();
</script>
</body>
</html>
📄 Wrap-Up
This visual fruit tool is a great way to learn and teach the difference between permutations and combinations. You can modify the number of fruits, or even add new icons. Great for math learners and educators alike!
Enjoy arranging your fruity sets!
Comments
Post a Comment