A playful, kid-friendly web app for learning the numbers 0–100 — by sight, by sound, and by play — plus first sums and number bonds. Built with Blazor WebAssembly (.NET 8), it runs entirely in the browser, works offline as an installable PWA, and speaks every number out loud in English or Dutch.
-
🔢 Number Chart — a colorful 0–100 grid (honderdveld), one colour per decade. Tap any number to hear it spoken aloud.
-
🃏 Flash Cards — a number flips to reveal its written word; tap Hear it to listen. Keeps a streak going for every card heard before flipping.
-
⭐ Number Quiz — multiple-choice practice with eight question modes:
-
Word — match the spoken/written word to the number
-
Before — what comes before a number
-
After — what comes after a number
-
Between — what fits between two numbers
-
Count — count the dots
-
Add — addition within 20, shown with two groups of dots
-
Subtract — subtraction within 20, shown as dots taken away
-
Make 10 — number bonds: how many more make ten
-
Jump 10 — 10 more / 10 less than a number
-
Split — splitshuisjes: the whole on the roof, one part in a room, what goes in the other room? (13 = 8 + ?, 70 = 30 + ?, 47 = 40 + ?)
Sums up to 20 and Make 10 are drawn in ten-frames (2 × 5 grids, like at school): for 8 + 5 the 8 is orange and the 5 is gold, finishing the first ten and spilling into the second.
The quiz has an automatic level (saved on the device): five first-try answers in a row move up a level, two missed questions in a row move down. Level 1 is a warm-up (to 20, with Count and Make 10); level 2 goes to 50 with sums that cross ten; level 3 goes to 100 with whole-tens sums (30 + 40); level 4 adds two-digit ± one-digit sums (47 − 3). Wrong answers are picked to be tempting: off by one, off by ten, or the reversed number (74 for 47).
Modes can be toggled on/off, with optional auto-advance (off / 2s / 3s / 5s), live scoring, and a 🔥 streak counter.
-
-
🕒 Klok (Clock) — the time is shown and spoken ("half 3" / "half past 2"); tap the right clock out of four drawn analog clocks. Four stages: whole hours, half hours, quarters, 5 minutes. Wrong clocks are chosen on purpose — the Dutch half-hour trap (3:30 for "half 3"), swapped hands, one hour off — and get a spoken hint.
-
🐸 Kikker (Frog) — a number line from 0 to 100 that zooms in on the task. The frog sits on a number and has to make some jumps: 🐸 43
+10+3→ ? Tap the lily pad where it lands; the wrong pads are the usual slips (forgot the small jump, 10 or 1 off). Right: the frog really jumps — big yellow arcs for each 10, a green arc for the small jump — and says every number it lands on. Wrong: plons, into the water, with a hint to do the big jumps first. "Vooruit" or "Vooruit en terug" (also jumping back). -
🐊 Krokodil (Crocodile) — two numbers and a drawn, animated crocodile that always eats the biggest one. Tap a number: the crocodile lunges and chomps it (then shows 47 > 43 — its open mouth is the sign), or shakes its head "Bah!" at the smaller one. Up to 20 or up to 100, with pairs picked to make you look twice: same tens (43/47), swapped digits (47/74), 29 vs 31, neighbours.
-
🛒 Star Shop — correct quiz answers earn ⭐ stars, scaled by the first-try streak (1 → 2 → 3 → 4 stars as the streak climbs through 5/10/20). The shop opens as a modal from the star badge, so kids can spend without leaving the quiz and losing their streak. Three tiers to save up for:
- Quick wins — a single friend (🦖 dino, 🐱 cat, 🚀 rocket…) walks, floats, or flies across the screen.
- Premium spectacles — layered CSS animations: 🎉 confetti, 🎆 fireworks, 🚀 a rocket launch to the moon, 🐉 a fire-breathing dragon, 🌈 a drawn rainbow with a galloping unicorn, a 🐾 animal parade.
- Deluxe light shows — a real
<canvas>particle engine (gravity, drag, fading light trails, hundreds of particles at 60fps): 🎊 confetti storm, 🌈 rainbow fountain, 🌠 meteor shower, 🔥 fire tornado, 🌌 galaxy, 🎆 mega fireworks.
The balance is saved on the device, and each not-yet-affordable reward shows a fill that "charges up" as the balance approaches its price — so kids can see how close the next show is.
-
🔊 Spoken feedback — every number, question, and answer is read aloud using the browser's Web Speech API, with TTS-tuned Dutch pronunciations. The app picks the best-sounding voice itself (Google / natural / online voices before eSpeak, which is what browsers on Linux fall back to), and the ⚙️ settings have a voice list with a test button to choose one per device.
-
🌍 Bilingual — full English and Dutch (default) UI and speech, switchable on the fly.
-
🎨 Themeable — eight preset accent colors plus a custom color picker. Your choice and language are saved in
localStorage. -
📱 PWA & mobile-first — installable to the home screen, works offline via a service worker, with a dedicated mobile navigation layout.
| Framework | Blazor WebAssembly, .NET 8 |
| Hosting | Static files (no server backend) — served by nginx in Docker |
| Speech | Web Speech API (SpeechSynthesis) via JS interop |
| Persistence | Browser localStorage |
| PWA | Web manifest + service worker |
The app has no backend and no external dependencies at runtime — all logic (number words, quiz generation, scoring) runs client-side in WebAssembly.
dotnet runThen open the URL shown in the console (typically https://localhost:5xxx).
dotnet publish -c Release -o ./publishThe static site is emitted to ./publish/wwwroot.
A multi-stage Dockerfile builds the WASM app and serves the static output with nginx.
docker compose up --buildBy default the app is published on host port 5012 (http://localhost:5012). Edit the port mapping in compose.yaml to change it.
Components/
Layout/ MainLayout, NavMenu
Pages/ Home, NumberChart, FlashCards, NumberQuiz, Multiply, Klok, Krokodil, Kikker
Shared/ AnalogClock, TenFrames, ActivityCard, MobileNav, PageHeader, SettingsPanel, ShopModal, StarBadge, TtButton
wwwroot/
js/speech.js Web Speech API interop
js/effects.js Canvas particle engine for the deluxe shop shows
index.html Theme pre-load + PWA bootstrap
service-worker.js
manifest.json
ClockTime.cs A clock time and how to say it (EN/NL, incl. "half drie" = 2:30)
NumberHelper.cs Number → word/speech-word lookups (EN/NL)
LanguageService.cs Current-language state + change notifications
StarService.cs Star balance — earned in the quiz, spent in the shop, saved to localStorage
ShopState.cs Whether the shop modal is open (so it can open from anywhere)
Strings.cs All UI/speech strings (EN/NL)
This project does not currently specify a license.