Interactive Maths
Gamified educational web game for mental math arithmetic training across 4 mastery levels built with AI.
Interactive educational game designed for engaging mental arithmetic practice (addition, subtraction, multiplication, and division) for primary school students. Built entirely through AI-guided pair programming (ChatGPT and Founderz Prompt Engineering methodology), it features conceptual visual tutorials, difficulty tiers (1 and 2 digits), and instant motivational reinforcement with sounds and dynamic emojis without external dependencies.
System Objectives
Create an interactive and accessible web game for mental math practice and basic arithmetic operations.
Design a progressive learning system adapted for primary school students with 4 mastery tiers and customizable difficulty.
Implement a comprehensive formative feedback loop with conceptual tutorials, real-time score tracking, and motivational reinforcement.
Document and showcase the power of AI-assisted pair programming (ChatGPT / Prompt Engineering) to build complete, functional apps from scratch in minutes.
Key Capabilities & Modules
4 Fundamental Operations: individual selection of Addition, Subtraction, Multiplication, and Division.
4 Progressive Academic Tiers: Kindergarten 1 & 2, Primary 1 & 2 with algorithmic number range adaptation.
Custom Difficulty Controls: toggle between simple 1-digit foundations or advanced 2-digit arithmetic challenges.
Conceptual Tutorial Module: didactic introductory screen visually explaining each arithmetic concept before practice.
Gamified Reinforcement: real-time scorekeeper, optional round timer, reactive emojis, and animated positive feedback.
Architecture & Design Specifications
Self-contained reactive client-side SPA: the application procedurally generates random arithmetic problems bounded by the selected grade level. Answer validation and score tallying run inside the browser's local runtime, updating the DOM reactively with zero network dependencies.
🔍 Click diagram to enlarge to fullscreen
Invariant Architectural Principles:
- Positive Pedagogy: mistakes trigger encouraging hints and friendly correction without punitive penalties.
- Immediate Accessibility: zero load times, high-contrast touch interface optimized for tablets and mobile devices.
- Architectural Simplicity: clean, self-contained HTML, CSS, and JavaScript delivering full offline autonomy.
Technology Stack
FRONTEND
PEDAGOGY
AI_METHODOLOGY
HOSTING
Reference Articles & Architecture Series
This application is fully documented in an engineering series published on the blog:
Copiloting with AI: Learning with Founderz and ChatGPT
Learning how AI can be our day-to-day copilot thanks to Founderz, and how we can create useful and simple HTML applications with …
Read full article →Evolutionary History & Versions (SemVer)
Formal record of releases, feature additions, and security patches:
Official Interactive Maths release featuring 4 academic tiers and bilingual deployment
- Integration of 4 core operations (addition, subtraction, multiplication, division) and 4 school tiers.
- 1 and 2-digit difficulty toggle with introductory didactic learning module.
- Gamified scorekeeper with reactive emojis and friendly auditory feedback.
- Localization support with independent routes in Spanish (/es/) and English (/en/).
- Frozen state as an educational showcase and AI pair-programming case study.
Multiplication, division, and round timer
- Addition of advanced multiplication and division operations with interactive round timer.
First functional prototype with addition and subtraction
- Initial interactive arithmetic prototype generated through guided ChatGPT conversation.