Game Design & Development · Tiny-Loop Tutorial · Archetype #9
Tutorial: Quiz Adventure
This is the exact Quiz Adventure archetype from What Makes a Game? — already built and running below. Play it, then swap the question set and avatar using the panel underneath. You can't break the loop itself; that part is locked. Once you've tuned a version you like, you'll build this same architecture two more times: with Scratch's blocks, then from real scratch in JavaScript.
🗺️ The Architecture
Every tiny-loop game starts as a concept, then gets broken into a core loop, a systems list, and a structure — before anyone touches sprites or colors. Here's the Quiz Adventure's architecture. Notice this one is different from the others: almost all of the design work is writing, not programming — the engine is short.
The four systems, in order of execution on every answer:
- Question display system — shows the current question's text and its answer choices as buttons.
- Answer-check system — compares the clicked choice against the question's correct answer.
- Hint/retry system — a wrong answer shows a hint and uses up one retry; running out of retries reveals the answer so no one gets stuck.
- Progress system — a correct (or revealed) answer advances the progress bar to the next question, or ends the quest on the last one.
🎮 Play & Customize
Click an answer. Correct answers advance the quest; wrong answers give you a hint and another try.
Loading…
Tune the Game (limited, on purpose)
Notice what you can't change here: there's no field for "how answer-checking works" or "how the progress bar advances." That's the engine — the part every version of this game shares. You're only tuning content (and writing questions), not rewriting architecture. That's the limit, on purpose.
What these actually touch in the engine: Retries per Question only sets the starting value of retriesLeft each time a question renders — the same retriesLeft <= 0 check in onChoice() decides when to reveal the answer and advance, whatever that starting number is. Question Set swaps in a whole different questions array — onChoice() never looks at whether a question is math, science, or animals, only at choices and correct.
👀 Peek at the Code
The game running above is this code — nothing hidden. It's split into two parts on purpose: a small config & question-set object you just edited with the panel, and a locked engine that reads it.
✏️ Config & Content — this is what the panel above editsconst config = { theme: 'math', avatar: '🧙', retries: 3 }; const questions = [ { text: '5 + 7 = ?', choices: ['10', '12', '13'], correct: 1, hint: 'Count up from 7, four times.' }, // ...more questions ];
👆 The config line updates live — hit "Apply & Restart" above and watch it change. (The questions excerpt always shows the Math Dungeon set as an example; picking a different Question Set swaps in a same-shaped array with different text.)
function onChoice(choiceIndex) { const q = questions[currentIndex]; // 1. check the answer if (choiceIndex === q.correct) { advance(); // 2. correct: move to the next question, or win return; } // 3. wrong: show the hint, use up a retry retriesLeft--; showHint(q.hint); if (retriesLeft <= 0) advance(); // 4. out of retries: reveal & advance anyway }
🛠️ Now Build It For Real
You've played a working Quiz Adventure and seen exactly how it's built. Next, build this same architecture yourself — twice, in two different tools.
🧩 Step 1 — Build It in Scratch
The "Build the Loop with Blocks" section above already shows the exact scripts — backdrop, sprites, Lists, variables (including a "for this sprite only" one), and all nine scripts, block by block, in Scratch's own category colors. Open a Scratch tab side-by-side and copy each script exactly; the game should come to life the same way it does here.
Open a blank Scratch project tab →Want more practice first? The Scratch Team publishes an official Community Quiz project you can open and remix directly.
Open the official Scratch "Community Quiz" project →