Hey DEV community! 👋
I just pushed a new educational puzzle game live on my web arcade, 7x.games. It’s called Number Bonds—a classic "part-part-whole" math concept where kids figure out how two smaller numbers combine to make a larger one.
While building educational games, I try to avoid heavy game engines like WebGL or Phaser. For a puzzle like this, DOM elements and React state are more than enough. But the challenge is making it look fluid, interactive, and visually appealing for kids without relying on massive image assets.
Here is a breakdown of how I engineered the UI and the math logic using Next.js, Tailwind CSS, and pure SVGs.
📐 1. The Visual Architecture: Pure SVG Connections
A Number Bond is typically represented as a large "Whole" circle connected by lines to two or more smaller "Part" circles.
Instead of exporting PNGs for every possible layout, I built a dynamic component. I used CSS Grid for the positioning of the HTML input bubbles, and placed an absolute-positioned
JavaScript
// Simplified example of the connecting lines
Because the lines are just SVG coordinates, they scale infinitely. Whether a kid is playing on a 4K smartboard or a tiny shattered iPhone screen, the geometry remains pixel-perfect.
🧠 2. The Deterministic Math Generator
A common trap in generating endless math problems is accidentally repeating the same question or creating impossible scenarios.
To solve this, I wrote a deterministic generator that calculates the "Whole" based on the selected difficulty limit, and then randomly splits it into two "Parts". The game randomly decides which of the three circles to leave blank.
JavaScript
function generateBond(maxTarget) {
// Generate the "Whole"
const whole = Math.floor(Math.random() * (maxTarget - 5 + 1)) + 5;
// Split into two parts
const part1 = Math.floor(Math.random() * (whole - 1)) + 1;
const part2 = whole - part1;
// Randomly select which bubble is the "question" (0 = Whole, 1 = Part1, 2 = Part2)
const hiddenIndex = Math.floor(Math.random() * 3);
return { whole, part1, part2, hiddenIndex };
}
This ensures the math is always clean, solvable, and fits perfectly within the difficulty tier the teacher selected.
⚡ 3. Kid-Friendly Input Handling
Typing on a mobile browser can be frustrating, especially for a 7-year-old. When you focus an , the mobile keyboard pushes the whole screen up, potentially hiding the game UI.
The Fix: I bypassed the native mobile keyboard entirely.
The input fields in the game are actually styled
This keeps the user locked into the game view, prevents the UI from shifting, and allows for rapid-fire answering to build up combo streaks.
What's Next?
Building these lightweight, fast-loading educational games has been an awesome exercise in React state management and UI design. My next goal is to implement a classroom dashboard so teachers can generate custom room codes and track the high scores of their students live.
If you want to check out the UI animations or test your elementary math speed, you can play it here: Number Bonds on 7x.games
How do you handle custom inputs on mobile web apps? Do you stick to native keyboards or build custom numpads to control the UI experience? Let me know in the comments!
Top comments (0)