Quick Math Arithmetic Game — Free HTML CSS JS Snippet

Speed-arithmetic games like this one are a staple of mental maths practice apps because they combine two things that make casual games sticky: a hard time constraint and instant right/wrong feedback. This snippet builds a complete 60-second rapid-fire arithmetic quiz in vanilla JavaScript — random addition, subtraction, and multiplication problems, a live countdown, immediate visual feedback on every submission, and a persisted best score using localStorage so returning players have something to beat.

Problem generation and difficulty-appropriate ranges

generateProblem() randomly selects one of three operators — addition, subtraction, or multiplication — and generates operands within ranges chosen specifically to keep each problem type roughly equally difficult under time pressure. Addition and subtraction use operands from 1 to 50, which keeps sums in a comfortably mental-maths range without ever needing carrying-heavy three-digit arithmetic. Subtraction specifically generates b as randInt(1, a), which guarantees a - b is always non-negative — the game deliberately avoids negative-number answers to keep the input format simple (a plain numeric field, no minus-sign parsing ambiguity). Multiplication uses the classic 1-to-12 times-table range, matching how most people actually memorise multiplication facts, which keeps multiplication problems fast to solve rather than requiring long multiplication.

The countdown timer and its visual language

A setInterval running once per second decrements timeLeft and updates both a numeric 60s-style label and a horizontal progress bar whose width is set to (timeLeft / GAME_SECONDS) * 100 percent. In the final ten seconds, a .low class swaps the bar's gradient from the indigo accent to a red gradient, giving players a clear, low-cost visual cue that time is running out without needing to read the numeric label. When timeLeft reaches zero, endGame() fires immediately, stops the interval, and swaps the play area for a results summary — there is no grace period, matching how real speed-round games behave.

Instant feedback without breaking flow

Every submission — whether via the Submit button or the Enter key on the numeric input — is handled by a single handleSubmit() function that parses the input, compares it to currentAnswer, and immediately calls generateProblem() regardless of whether the answer was right or wrong, so play never pauses to wait for acknowledgement. Correct answers trigger a green colour flash on the problem text via a .flash-correct class; incorrect answers trigger a red CSS shake keyframe animation via .flash-wrong. Both classes are removed and a layout reflow is forced with void playArea.offsetWidth before re-adding the class, which is the standard trick for restarting a CSS animation that was already applied on the previous problem — without it, two wrong answers in a row would only animate once.

Scoring, accuracy, and the results screen

The game tracks three separate counters: answered (total problems submitted), correct (correct answers), and a derived score that in this implementation equals correct — each correct answer is worth one point, keeping the scoring model transparent and easy to read at a glance during play. When the timer expires, the results screen computes accuracy as Math.round((correct / answered) * 100) and displays answered count, correct count, and accuracy percentage side by side.

Persisting a best score with localStorage

getBest() and setBest() wrap localStorage.getItem/setItem in try/catch blocks (some browser contexts, like sandboxed iframes with storage disabled, throw on access) around a single numeric key, quick-math-best-score. At the end of each round, if the current correct count exceeds the stored best, the game updates localStorage, refreshes the header badge, and shows a "New best score!" message — the score persists across page reloads and browser sessions since localStorage survives until explicitly cleared, unlike sessionStorage or in-memory state.