Digital Lab

ABC Quest — an alphabet game I built for my kid.

A bilingual German/Slovenian alphabet game for preschool kids in Carinthia — and a look at why it's built the way it is, not just how.

The pedagogical brief

Carinthia (southern Austria) has a recognized Slovenian-speaking minority — kids there often grow up genuinely bilingual, or are being raised that way by choice. Learning the alphabet is usually a monolingual exercise: one set of letters, one set of words. ABC Quest treats the alphabet itself as the place where the two languages need to be reconciled, not bolted together afterward.

Concretely: German has Ä Ö Ü with no Slovenian equivalent; Slovenian has Č Š Ž with no German equivalent. Most letters overlap (A, B, D...) but the word behind each letter usually doesn't (Banane / Banana). The game's data model encodes this directly — each alphabet entry carries a lang field ("de", "sl", or "both") and separate de / sl word fields, so a German-only letter simply has no Slovenian word to show, rather than a wrong or invented one.

Why a "door" loop, specifically

The whole game is one repeated four-beat loop: walk → see a picture and hear its word → pick the matching starting letter → door opens, walk through. For a preschool attention span, this matters more than it might look:

• The reward is the same shape every time. A door that opens is unambiguous — there's no scoreboard to interpret, no paragraph of feedback to read. Right answer, door opens, walk through, immediately next picture.
• Three signals arrive together, not in sequence. The sign shows the picture, narrates the word out loud (SpeechSynthesisUtterance, locale-correct: de-DE or sl-SI), and the child has to map that to a written letter. Image, sound, and grapheme land in the same few seconds — that simultaneity is the actual mechanism for building the sound-to-letter association, not the game wrapper around it.
• Wrong answers don't stop anything. A wrong pick shakes the scene and clears after 600ms with no penalty, no life lost, no game-over. The cost of guessing wrong is kept close to zero on purpose, so guessing remains a reasonable strategy for a four-year-old rather than something to be afraid of.

Why the options are reshuffled every round

buildOptions() picks three random wrong letters and inserts the correct one at a random position, every single round. This is a small but deliberate anti-pattern fix: if the correct answer always appeared in the same screen position, a child could "solve" the game by memorizing position-to-reward instead of learning the letter-sound mapping. Reshuffling forces the only reliable strategy to be the real one.

How the scene is actually drawn

The background scene — sky, ground, trees, door — is a single inline <svg> redrawn on every animation frame. The sky palette cycles through five colour schemes keyed to the current letter index; the tree and bush positions are seeded from stepIdx so they look different each round but stay deterministic (the same letter always shows the same landscape). The character is also SVG, walking via requestAnimationFrame that nudges an x-coordinate by 3px per frame — a deliberately two-frame walk cycle, because at 16px scale more frames wouldn't read as smoother, just heavier.

The alphabet pictures on the sign are real PNG files in an images/ directory — one image per letter, drawn and named by convention (a_ananas.png, ae_aepfel.png, etc.). Using real image files means the pictures can be illustrated properly at any resolution, at the cost of 33 HTTP requests on first load. The tradeoff from the SVG-emoji approach in the earlier version: more visual fidelity, slightly heavier initial load.

The whole game runs from a single HTML file with React and Babel loaded via CDN — no build step, no node_modules. Babel transpiles the JSX in the browser on first visit. This makes the source completely readable as-is and trivially hostable anywhere, but it does mean a few hundred milliseconds of client-side compilation on cold load.

What's worth borrowing from this for other lessons

None of the techniques above are specific to the alphabet. The same loop shape (show stimulus → multisensory presentation → low-stakes multiple choice → unambiguous reward → repeat) works for number recognition, shape/color vocabulary, or a second language's basic vocabulary — anything where the actual learning is a fast stimulus-response mapping rather than reasoning. The single-HTML-file deployment approach (React + Babel via CDN, no build step) is also worth keeping in mind for small teaching tools: the entire game logic is human-readable in one file, deployable anywhere that can serve static files, and forkable without a development environment.