Predict the Output Quiz Game — Free HTML CSS JS Snippet

"What does this log?" is the single most efficient format for teaching a language's sharp edges, because the learner commits to a prediction before seeing the truth — and a wrong prediction is what makes the explanation stick. This snippet is a complete, playable version of that format for JavaScript: eight questions covering the quirks that actually cost people debugging hours, a per-question countdown, immediate colour-coded reveal, and a written explanation of the mechanism behind every answer.

The questions are real behaviour, not trivia

Each entry covers something a working developer genuinely hits: typeof null returning 'object', [1, 2, 10].sort() producing [1, 10, 2] because the default comparator stringifies, 0.1 + 0.2 === 0.3 being false under IEEE-754, var in a loop with setTimeout logging 3 3 3 because all callbacks share one binding, '5' - 3 and '5' + 3 diverging because + is overloaded, microtasks draining before macrotasks so a resolved promise beats setTimeout(fn, 0), const preventing reassignment but not mutation, and [] + {} coercing to '[object Object]'. Every explain string names the underlying rule and, where useful, the fix — pass a comparator, use let, compare floats with an epsilon.

Shuffled order with a stable answer index

restart() builds a shuffled array of question indices with a Fisher-Yates pass and walks that array rather than the questions themselves, so replaying the quiz presents a different sequence without ever mutating QUESTIONS. The answer for each question is stored as an index into its own options array, which keeps the data compact and makes the reveal logic trivial: mark the button at q.answer correct, and mark the chosen button wrong when it differs.

A countdown that ends the question rather than the game

Each question runs a one-second setInterval driving a width-animated bar that turns red in its last five seconds. Running out of time calls the same reveal() function the click handler uses, passing -1 as the choice — so a timeout is treated as an answered question with no selection: the correct option still highlights, the explanation still appears, and the player still learns the answer. Reusing one reveal path for both routes is what keeps the timeout case from becoming a second, subtly different code path.

Guarding against double scoring

reveal() returns immediately if answered is already true, and every option button is disabled the moment an answer lands. That double guard matters because the timer and a click can otherwise race: a click landing in the same tick as the countdown reaching zero would otherwise run the scoring branch twice. The interval is cleared inside reveal() rather than at the next render, so no stray tick can fire while the explanation is on screen.

Reveal, explanation, and final score as three states

The card shows one of three states at a time — the live question, the explanation panel with the verdict heading and the "Next question" button, or the final score panel — toggled with the hidden attribute rather than by swapping innerHTML. The verdict itself distinguishes three outcomes: correct, wrong, and out of time, so the feedback text always matches how the question actually ended.