Numbers to English Words
Convert digits to natural English across ranges, ordinals, and years with instant feedback
The Problem
Many ESOL learners recognize digits but struggle to produce correct written forms, especially hyphenated tens (e.g., twenty-one), large-number groupings (thousands/millions), and special cases like years and ordinals. Teachers need targeted practice by number range and type with immediate feedback and low setup time.
Key Pain Points
- Hyphenation rules: Compound tens confuse learners who struggle with hyphen placement
- Large-number composition: Thousand/million/billion/trillion groupings are complex
- Year reading flexibility: Multiple valid formats (e.g., "twenty nineteen" vs "two thousand nineteen")
- No targeted practice: Existing tools don't scaffold by range (0–99 vs. 100–999 vs. millions)
- Limited feedback: No keyboard-first flow or clear progress tracking
The Solution
A browser-based game that displays a number (with commas for readability) and asks learners to type the written form. It supports multiple categories (0–99, hundreds, thousands, millions, ordinals, years) and accepts normalized answers. Special handling for years includes multiple valid phrasings.
Key Features
📚 Range Scaffolding
Drill 0–99, hundreds, thousands, or up to trillions—target specific ranges
📅 Year Flexibility
Accepts multiple valid forms for 2010+ (e.g., "twenty nineteen" or "two thousand nineteen")
✨ Normalization & Hyphenation
Strips commas/extra spaces; auto-formats hyphenated tens for display
📊 Progress Stats
Tracks Correct, Incorrect, Success Rate, and Streak
⌨️ Keyboard-First Flow
Enter to submit, ArrowRight to advance—rapid practice without mouse dependency
🎯 Category Practice
Cardinals by range, round numbers, ordinals, and years (1100–2099)
Screenshots & Walkthrough
Start screen: Choose a practice category (ranges, ordinals, years)
Question view: Number with commas, input field, and category label
Technical Implementation
Architecture
A client-only SPA route presents the Numbers game. Category selection drives the number generator; algorithms compute expected string outputs. Input is normalized by removing commas/dashes and collapsing spaces; correctness compares normalized forms. Special logic allows multiple valid year readings from 2010 onward.
Tech Stack
- Frontend: React, React Router, Vite
- Backend: None (fully client-side)
- Algorithms: Client-side number-to-words logic
- Icons: lucide-react
- Deployment: Static SPA
Key Challenges & Solutions
Challenge: Hyphenation and Normalization
Learners may omit hyphens or add commas inconsistently, creating frustration with "close enough" answers.
Solution: Normalize input by stripping commas/dashes and collapsing spaces; format display with correct hyphenation. Accept reasonable variations while maintaining accuracy.
Challenge: Multiple Valid Year Forms
Years can be read differently (e.g., 2019 as "twenty nineteen" or "two thousand nineteen").
Solution: yearToWords returns acceptable variants and validates against all of them for 2010+. Learners see accepted alternatives in feedback.
Challenge: Large-Number Composition
Correctly building "thousand/million/billion/trillion" phrases requires complex recursive logic.
Solution: Recursive compositional numberToWords with clean remainder handling up to trillions. Handles edge cases like round numbers.
Results & Impact
Higher accuracy on hyphenated tens through normalization + feedback. Faster practice sessions via keyboard shortcuts and autofocus. Teachers can quickly target specific ranges or year reading practice. Clear progress signals (success rate and streak) motivate learners.
Lessons Learned
Normalize to Reduce Friction
Accepting reasonable variations keeps focus on language, not punctuation. Learners shouldn't struggle with exact spacing when the words are correct.
Make Alternatives Explicit
Showing accepted year variants increases learner confidence. They see what else would have worked, reinforcing flexibility in language.
Scaffold by Ranges
Layered categories map cleanly to classroom objectives. Teachers can target specific weak areas without creating custom exercises.
Clear Feedback Drives Retention
Immediate, specific corrections improve recall and accuracy. Learners know exactly what to practice next.