Building an Educational Math Game with Next.js, Pure SVGs, and JSON-LD

Hey DEV community! 👋

I recently added a new educational game to my web arcade, 7x.games, called Fraction Math Master.

Usually, when developers think of building web games, they immediately reach for Canvas, WebGL, or engines like Phaser. But for educational puzzle games, that is often overkill. I wanted to share how I built a highly interactive, fast, and SEO-optimized math game using pure React, Tailwind CSS, and SVGs.

Here is a breakdown of the technical hurdles and how I solved them.

🍕 1. Drawing Dynamic "Pizza Slices" with SVG Math
Kids learn fractions best visually. I needed a way to show a circle divided into any number of slices (denominator) with a specific number of them shaded in (numerator).

Instead of loading heavy image assets, I built a FractionCircle React component that generates SVG paths on the fly using basic trigonometry.

By calculating the angle of each slice ((2 * Math.PI) / denominator), I used Math.cos and Math.sin to draw exact SVG arcs.

JavaScript
// Simplified snippet of the SVG math
const cx = size / 2;
const cy = size / 2;
const r = size / 2 - 8;
const sliceAngle = (2 * Math.PI) / den;

const startAngle = -Math.PI / 2 + i * sliceAngle;
const endAngle = startAngle + sliceAngle;

const x1 = cx + r * Math.cos(startAngle);
const y1 = cy + r * Math.sin(startAngle);
const x2 = cx + r * Math.cos(endAngle);
const y2 = cy + r * Math.sin(endAngle);

// Draw the wedge!
const path = M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2} Z;
Because it is pure SVG, it scales flawlessly on mobile screens, weighs literally bytes, and allows me to add smooth CSS transform: scale(1.03) pop animations when the user gets an answer correct.

🛑 2. Avoiding the "Infinite While Loop" Trap
The game generates dynamic multiple-choice questions (e.g., "Find an equivalent fraction for 2/4").

Initially, I used a while loop to generate random wrong answers. The logic was: Generate a random fraction. If it equals the correct answer, throw it out and loop again. The bug: If the math constraints were too tight (e.g., Easy Mode where the max denominator is 6), the random number generator could run out of unique wrong answers, trapping the browser in an infinite while loop and crashing the tab.

The Fix: I switched to a Deterministic Array Generator.
Instead of "guessing" random numbers, I wrote a helper function that instantly calculates every single possible wrong answer within the difficulty limits, pushes them into a pool, shuffles the pool, and returns the top 3.

JavaScript
// Pre-generate valid wrong answers to avoid infinite loops
function getSafeWrongs(correctN, correctD, count, maxD) {
const correctVal = correctN / correctD;
const pool = [];

for (let d = 2; d <= maxD + 5; d++) {
for (let n = 1; n < d; n++) {
if (n / d !== correctVal) {
pool.push({ num: n, den: d, label: ${n}/${d} });
}
}
}

shuffle(pool);
return pool.slice(0, count); // Guaranteed to never freeze!
}
Zero guessing. Zero chance of an infinite loop.

🔍 3. Enterprise SEO in Next.js (JSON-LD)
A web game is useless if no one plays it. To get this game ranking on Google for queries like "Fraction Games Online Free For Kids", standard