Inspiration
Middle school math is usually taught through repetitive worksheets, and a lot of students disengage before they even get to the concept. We wanted to flip that experience — turn practice into something that feels like a game, with instant feedback, streaks, and visible progress, so students stay engaged long enough to actually learn.
What it does
Mathify is a browser-based math game built around four "worlds":
- 🍕 Fraction Frenzy — fractions, decimals, percents
- 🧮 Algebra Arena — solving for x
- 📐 Geometry Grid — angles, area, shapes
- 🔥 Boss Round: Mixed — everything combined
Students answer multiple-choice questions, earn XP for correct answers, build streaks for consecutive correct answers, and level up as XP grows. Wrong answers instantly reveal the correct one, turning mistakes into learning moments instead of dead ends.
How we built it
Mathify is built with plain HTML, CSS, and JavaScript — no frameworks, no backend — to keep it lightweight and let us focus on UI polish and game feel:
- Question banks are structured as JS objects, so new worlds and questions can be added easily
- Game state (XP, streak, level, progress) is tracked in a single JS state object and rendered reactively
- The visual design uses a neon "portal" theme — deep purple background, glowing gradient cards, Baloo 2 + Poppins fonts — to feel energetic and game-like rather than like a worksheet
- Deployed as a static site on Vercel, loading instantly with zero build step
Challenges we ran into
- Balancing game feel vs. learning value — too much animation or gamification can distract from the actual math, so we tuned feedback timing and visual noise carefully
- Designing a UI that feels premium and fun for middle schoolers without falling back on generic template colors or layouts
- Keeping the app fully dependency-free while still making it feel dynamic — shuffled answer order, live streak tracking, level-up logic — using only vanilla JS
- Deciding not to include a public leaderboard. Rankings can motivate some students, but they can also make slower learners feel discouraged or singled out in front of classmates. We chose to keep progress personal — XP, streaks, and levels — so every student feels rewarded for their own improvement, not compared against others
Accomplishments that we're proud of
- Built a fully working, polished game in a very short timeframe with zero external libraries
- Designed a distinctive visual identity instead of a generic "AI-template" look
- Got the feedback loop tight enough that answering feels satisfying, not just correct/incorrect
- Made it deployable in minutes with no build step, so anyone — including non-technical teachers — can host their own copy
- Made a conscious, student-wellbeing-first design choice by leaving out the leaderboard
What we learned
- Small game-design details — shuffled answers, streak counters, praise messages — meaningfully boost engagement even in a simple quiz format
- A lightweight, framework-free stack can still feel like a polished app if the UI/UX details are handled with care
- Instant feedback (shown immediately, not at the end) matters a lot for keeping younger learners engaged and motivated
- Not every gamification pattern is good for every audience — competition works for some age groups but can backfire for younger, more sensitive learners
What's next for Mathify
- Add a teacher dashboard to track class-wide progress
- Add more worlds (statistics, ratios, integers, word problems)
- Add adaptive difficulty that scales based on student performance
- Persist progress with local storage or a lightweight backend so XP carries across sessions
- Explore optional, opt-in friendly competition (e.g. private group challenges) instead of a public leaderboard
Log in or sign up for Devpost to join the conversation.