Numbo

Inspiration

Practising math often feels like a worksheet. We wanted it to feel like a trip. Numbo starts with a small story: Bobby, a friendly keeper of numbers, has lost his numbers one to nine, and a child helps bring them home.

What it does

Numbo is a math web app for grades 1 to 6. A child travels through nine places:

Each place has a hands-on tool (place-value blocks, an area model, tap-to-shade fractions, clocks, rulers, sliders) followed by ten-question rounds at three levels. Stars are earned to bring the numbers back to Bobby's shelf.

• A real voice. Every sentence is read aloud by a natural recorded voice, including the child's nickname and cheers. The browser's robotic text-to-speech is never used.
• Made for small readers. Grades 1 and 2 read questions aloud automatically. Big tap targets, a big-text mode, night mode, soft sound effects and gentle wording when an answer is wrong.
• Works on any screen. From a 320 px phone to a 1920 px desktop, with no sideways scrolling.
• Private by design. No account, no server and no tracking. Stars and settings stay in the browser.

How we built it

Numbo is one static page written in vanilla HTML, CSS and JavaScript, assembled by a small Node build script into a single self-contained file. All question generators are pure functions, so they are easy to test.

The voice was generated offline with the open Kokoro text-to-speech model: about 1,000 whole-sentence clips, plus a word sprite that is stitched together with the Web Audio API for sentences that are too rare to record. A plain <audio> fallback keeps sound working in browsers that are strict about audio.

Quality is checked automatically: unit tests for the generators and voice coverage, plus Playwright end-to-end tests for audio, responsive layout and accessibility, all running in GitHub Actions. The site is deployed with GitHub Pages.

Works on every screen

Numbo is fully responsive, so a child can use it on whatever device is at hand:

• Phone: big, thumb-friendly tiles, two per row.
• Tablet: roomy layouts with the same large tap targets.
• Desktop and laptop: a two-column home screen that makes use of the wider screen.

Layouts were tested from 320 px phones up to 1920 px desktops, with no sideways scrolling. Tap targets are at least 44 px, and text can be switched to a big-text mode. There is nothing to install: open the page in any modern browser. Responsive on phones, tablets and desktops, with a light and dark mode you can switch from the menu, and nothing to install.

Challenges we ran into

• Natural sound, offline. Reading every possible question aloud without a server meant recording sentences ahead of time and stitching words for the long tail, while keeping the page small.
• Audio rules in browsers. Browsers delay or block sound until the user interacts, so we preload the audio on the first tap and added a fallback and an in-app "Hear it" diagnostic.
• Accessibility for children. Contrast, tap-target size and reading level all needed their own pass, and we audited colours and layouts across phone, tablet and desktop.

What we learned

Small details change how a child feels: a real voice, a friendly mascot and kind wording after a mistake matter as much as the math itself.

What's next

More recorded voices, more grades and topics, and testing on more browsers and devices.

Try it: https://galangekapraja.github.io/numbo/ Code: https://github.com/galangekapraja/numbo (MIT license)

Built With

• css3
• github-actions
• html5
• javascript
• kokoro-tts
• node.js
• playwright
• python
• svg
• web-audio-api