A quiz is the most reusable thing on this list. Build it once and it becomes a trivia game, a training tool, a revision app or a lead magnet by swapping a JSON file.

1. Separate questions from code

Questions live in a data file — JSON or Markdown — never in the source. This is the whole design decision. It means writing content doesn't require touching the game, and someone non-technical can add questions.

quiz-build.txt
Build a quiz game. One HTML file plus a questions.json.

Question shape: text, an array of answers, the index of the correct
one, and an optional explanation.

The game:
- One question per screen, answers as real buttons.
- On answer: show right or wrong immediately, plus the explanation,
  then a Next button. Never auto-advance.
- Progress indicator, and a score screen at the end with a review of
  what was missed.
- Questions and answers both shuffled each play.
- Keyboard: number keys to answer, Enter for next.

No framework. Works on a phone.

2. Don't auto-advance

The single most common mistake. Jumping straight to the next question after an answer means the player never reads why they were wrong, which is the only educational part. Show the result, let them press on.

3. Keep the answer honest

If the correct index is in the JSON the browser downloads, a curious player can read it. For a fun quiz that's fine — say so and move on. For anything scored competitively, questions come from a server one at a time and answers are checked there.

4. Make the ending good

The score screen is what gets shared. Show what they got wrong with the explanations, a shareable result — a simple text summary works better than an image — and an immediate "play again" that reshuffles.

Write the explanations before the questions. A question you can't explain concisely is usually a badly worded question.