QuizMaster

A quiz looks simple, but a good one has many moving parts: questions arriving from an API, a timer that must stop at the right moment, answers that must be checked once and only once, and a score that persists between games.

Model the game in two classes with clear responsibilities: Quiz owns the game state — settings, score, progress and high scores — while Question owns one question's rendering, timer and answer checking.

A neon, game-like theme with a hexagon background, bold display type and clear feedback: correct and wrong answers are highlighted, and a “time's up” message appears when the clock runs out.

ES modules split the code into quiz.js, question.js and ui-controls.js. The Open Trivia DB API is called with the chosen category, difficulty and amount; answers are shuffled and HTML entities in questions are decoded with DOMParser.

Players can answer with the mouse or with keys 1–4, start the game with Enter, and see helpful messages if the setup form is incomplete. Loading and error states cover the API call.

The tricky part was the timer and the event listeners. If a player answered at the same moment the clock ran out, or a keyboard listener from a previous question was still active, the same answer could be counted twice.

Each Question now starts its own interval and removes its own listeners when it ends — whether by an answer or by time running out — and marks itself as answered so any second action is ignored.

With no framework and no build step the game loads instantly. High scores are kept in LocalStorage, sorted, trimmed to the top ten and read safely inside try/catch.

A polished, replayable game that shows clean object-oriented JavaScript in action. It is live on GitHub Pages.