Gizi Seimbang — Nutrition Literacy Game.

Description

Gizi Seimbang is a drag-and-drop nutrition literacy game about building balanced meals. Learners drag foods from a shelf onto the matching plate zones, watch calories, protein, carbohydrates, fat, and fiber update in real time, and chase a nutrition score. The food data is grounded in TKPI Kemenkes RI and the AKG guidelines from Permenkes No. 28/2019.

Background

This “One Day One Code” build was designed for junior-high-level equivalence education (Paket B) to teach the concept of a balanced plate. Rather than presenting nutrition as abstract numbers, it lets students assemble real Indonesian foods and immediately see how their choices affect the nutritional profile of a meal.

Goal

The goal was to make nutrition education interactive and grounded in real, local food data, giving learners instant feedback on their choices while keeping the whole thing a static, installation-free, mobile-first site.

Features

• 5 levels with 2 to 3 challenges each (14 challenges total), using a stepper that unlocks the next challenge only when the current one is complete.
• 40+ real foods sourced from TKPI Kemenkes RI, with strict category validation so a food only drops into its matching zone; wrong drops shake red with an educational hint.
• A real-time nutrition panel shown as a bar chart, plus a shopping budget on some levels that updates as foods are added or removed.
• 3 badges (Family Nutritionist, Smart Shopper, and Score 300+) and a 2-question reflection journal per level, saved to localStorage.
• Accessible and mobile-first design: a 3-step onboarding, tabbed Foods / Plate / Nutrition panels, tap-to-pick and tap-to-place, large touch targets, and prefers-reduced-motion support.

Technologies

• Vanilla JavaScript split across app.js, data.js, and levels.js for the game logic, the food database, and level definitions.
• HTML5 Drag and Drop API on desktop, with tap-to-place on mobile.
• HTML5 and CSS3 for the interface, and localStorage for scores, badges, and reflections.

How to Run

Clone the shared one-day-one-code repository and open the project’s folder, then open index.html directly in a browser, since it is fully static with no server or install required. You can optionally serve it with a static server such as python3 -m http.server 8000. A live version is available at the demo link.

Technical Decisions

The food database is kept separate from the game logic so real TKPI values drive the nutrition calculations directly, and category validation is strict so learners get corrective feedback the moment a food lands in the wrong zone. The interface was built mobile-first with tap-to-place and tabbed panels, since the target audience largely uses phones, and macros update live to reinforce cause and effect.

What I Learned

I learned how to translate official nutrition reference data into a working game model, how to design validation that teaches rather than just blocks mistakes, and how to build an accessible, mobile-first educational interface with drag-and-drop plus a touch-friendly fallback.

Notes

This is part of the shared one-day-one-code repository and is an educational daily build for equivalence education. The project folder also includes a teaching module (Modul Ajar) and a preview image.