A picture quiz game: we show you a stylized scene of a famous marathon, and you guess which race it is from four options. After each guess you get instant feedback plus a fun fact about the race.

Rendering mermaid diagram...

• index.ts — Hono HTTP server. Serves the frontend and exposes GET /api/quiz?count=N, which returns N random rounds. Each round has a picture (scene), four shuffled options, the correct answer, and a fact.
• backend/races.ts — the race "database". Every race includes an inline SVG illustration of a recognizable landmark on its course, so the game needs no external images and never shows a broken picture.
• frontend/ — a small React app (via Twind for Tailwind styling):
  • components/App.tsx — loads a quiz, tracks the current round and score.
  • components/RoundView.tsx — one question: picture, options, feedback.
  • components/RaceImage.tsx / OptionButton.tsx — presentational pieces.
  • components/Results.tsx — final score with a medal.

Open the root URL. Click an option, read the feedback, then advance. At the end you get a score out of 8 and can play again with a freshly shuffled set.

Append an entry to the RACES array in backend/races.ts. Give it a unique id, a name, city, country, a fact, and a scene (inline SVG using the frame(sky, inner) helper, drawn on a 0 0 400 280 canvas). It's automatically included in the quiz and used as a distractor for other questions.