HelpDek

Shop smart and become your family's hero!

Comment 1

HelpDek — Project Story

Inspiration

HelpDek is inspired by a warm, nostalgic Indonesian childhood experience. Growing up, children are often sent on small shopping errands by their parents—a task affectionately prompted by the phrase "Tolong belikan ini, Dek" (Help buy this, little one).

Through this simple everyday activity, children practice vital cognitive and social skills:

  • Memory & Focus: Remembering a parent's requests without a physical list.
  • Communication & Politeness: Interacting respectfully with local shopkeepers.
  • Financial Literacy: Handling cash, understanding prices, and counting change.

We wanted to capture this charming slice of life in a playful digital format, turning a neighborhood errand into an engaging browser-based educational game.

What it does

HelpDek is an interactive game where players step into the shoes of a child completing a shopping errand:

  1. Character Selection: Choose to play as Leo or Mia.
  2. The Mission: Meet a parent (Mom or Dad) who gives a specific shopping list (e.g., 3 coffees, 1 bag of rice) and a set amount of cash.
  3. The Journey: Walk down the street, hearing distant vendor jingles (Ice cream, cotton candy, or toys). Players must resist distractions to save their "lives" (hearts).
  4. The Shop: Answer a two-step quiz for each item on the list: first identifying the product, then selecting the correct quantity.
  5. The Promo: Face a special offer at checkout (e.g., add a promo item or keep the change).
  6. Score & Results: Receive a final score based on remaining money, lives, and successful answers.

The game features dynamic voice synthesis (Text-to-Speech) for accessibility and a cheerful audio track to keep the experience lively.

How we built it

HelpDek was built as a lightweight, dependency-free static web application to ensure portability and high performance on both mobile and desktop screens.

  • Frontend Structure: Plain HTML5 and semantic markup for maximum compatibility.
  • Styling: Vanilla CSS3 utilizing a curated color palette (coral, warm yellow, sky blue), glassmorphic panels (#fff8e9ef with solid borders), custom animations (character-bob, logo-float), and media queries for mobile responsiveness.
  • Logic: Vanilla JavaScript (ES6) featuring a single centralized game state object. Complete screen layouts are rendered dynamically by replacing HTML inside the main <main id="game"> shell.
  • Interactive Layering: A 3-tiered CSS stacking context to place the parent/vendor characters cleanly in front of the background panel, while keeping interactive quiz options on the absolute top layer.
  • Speech & Audio: Built-in browser Web Speech API for speech synthesis, along with HTML5 Audio elements for loopable background soundtracks and effects.

Challenges we ran into

1. Browser Autoplay & Audio Policies

Modern web browsers block audio playback and speech synthesis until the user performs an active gesture on the page. We solved this by implementing an explicit sound-toggle button and activation mechanism on the title screen, satisfying browser policies while giving players full volume control.

2. The Overlapping Sprite Collision (Z-Index Hierarchy)

During gameplay, the decorative seller or parent sprite (rendered at the bottom-right of the screen) would overlap with the quiz options card. Because the character sprite had fixed positioning, it blocked clicks on the rightmost option button. We solved this by redesigning the layering hierarchy:

  • Placing the large cream-colored panel (.panel) at z-index: 1.
  • Placing the character sprite (.npc) at z-index: 2 (so they visually stand in front of the panel).
  • Placing the quiz options (.quiz-options) at z-index: 3 (so choices always sit on top of the character's body).
  • Adding pointer-events: none to the .npc image so clicks bypass the character sprite completely.

3. Dynamic Distractor Filtering

We wanted the quiz to be fair but challenging. If a distractor item in the multiple-choice list was actually needed later in the mission, it would confuse the player. We wrote logic in JavaScript to filter the distractor options dynamically, ensuring they only display items not included in the active mission list.

Accomplishments that we're proud of

  • High-Fidelity Visuals: Creating a visually stunning, cozy visual-novel aesthetic using only vanilla CSS and animations.
  • Responsive Layouts: Designing buttons and quiz cards that adapt gracefully from small phone screens to wide desktop monitors.
  • Accessibility-First Design: Adding spoken-voice synthesis (Text-to-Speech) that reads dialogues aloud to assist younger players who are still learning to read.

What we learned

  • Visual Sandwiching with Stacking Contexts: We learned how to build robust layering in CSS using relative/fixed positioning and z-index to overlap characters, dialogue boxes, and buttons without breaking layout structures.
  • Pointer Events Utility: Using pointer-events: none is a highly effective way to create beautiful, layered visual graphics without compromising clickability of interactive elements underneath.
  • Vanilla State Management: Keeping state centralized in a simple JS object is incredibly powerful for managing multi-stage game flows without the bloat of external frameworks.

What's next for HelpDek

  • Indonesian/English Bilingual Toggle: Full localization for both Bahasa Indonesia and English text/voices.
  • Progressive Web App (PWA): Packaging the game so kids can install it on tablets and play offline without an internet connection.
  • Local Storage Integration: Saving high scores, player preferences, and custom avatars locally on the device.
  • More Neighbors & Levels: Adding more characters, randomized street events, and custom neighborhood shops to explore.

Built With

Share this project:

Updates