Food Components Explorer
Learn the 7 essentials: Carbs, Proteins, Fats, Vitamins, Minerals, Fiber, Water
Complete each level to earn XP, stars ⭐ and badges 🏅.
Gutenberg Safe: No inline onclick. Everything uses JS event listeners.
Key Topics & Instructions
▼Rewards: Earn XP, Stars ⭐, and Badges 🏅 by completing levels with fewer mistakes.
- Level 1: Match component with function.
- Level 2: Drag foods into categories (2 correct each).
- Level 3: Memory match icons.
- Level 4: Balanced meal simulation with consequences.
Level: 1/4
XP: 0
Stars: 0 ⭐
Badges: 0 🏅
Progress
Level 1: Match Components with Functions
Click one left + one right to match.
Components
Functions
🧩
Tip: Carbs = energy, Proteins = build/repair, Fats = store energy.
Level 2: Drag & Drop Classification
Drop foods into correct categories (2 each).
Food Bank
Drop Zones
Carbohydrates
Proteins
Fats
Vitamins/Minerals
Fiber-rich
🥗
Rule: Each zone needs 2 correct items. Distractors stay in bank.
Level 3: Memory Match
Find matching pairs.
Moves: 0
Matches: 0/8
🧠
Tip: Fewer moves = bonus XP!
Level 4: Balanced Meal Simulation
Adjust sliders to balance energy + health. (Aim >= 60% for both)
🍞
🍗
🧈
🍊
⚡
💪
🛡️
Balanced Meal Lab 🍽️
Balanced → bubbles appear. Unbalanced → health drops.
Controls
Carbs 🍞
40
Proteins 🍗
30
Fats 🧈
20
Vitamins 🍊
35
Energy: Good
Health: Good
🍎
Consequence: Too much carbs → crash. Too little protein → weak muscles.
