5 prompts to build your first learning game with Claude
You have quiz questions. Here is how to turn them into a game you can play.
Here's the whole trip: build it, change one thing, check it, fix it, share it.
Before you start
Make a new, empty folder on your computer. Call it my-first-game.
Open the Claude desktop app and click the Code tab. Click the folder button next to Local and choose Open folder. Pick my-first-game, then click Select Folder (Open on a Mac). If it asks whether to trust this workspace, click Trust workspace. (You can use Claude Code instead. Either one needs a paid Claude plan, such as Pro.)
If Claude asks before it saves a file, click Allow once.
Paste each prompt below, in order. Where you see [square brackets], type your own words in their place. Delete the brackets too.
You don't need to know how to code. Claude does that part.
1. How do I start a small game from my quiz questions?
What it's for: turns your questions into a game in one file.
Make a small game from my quiz questions. Save it as one file called game.html that I can open by double-clicking. I don't know how to code, so please talk to me in plain words.
My topic: [your topic]
Who plays it: [for example, new hires]
My questions, with the choices and the right answer marked:
[paste your questions here]
Show one question at a time. After each answer, tell the player if they were right and why. Show a score at the end, with a Play again button. Keep all the words the player reads together in one place near the top of the file, so they are easy to change later.
When you're done, tell me how to open it and what I should see.What you should see: a file called game.html in your folder. Double-click it. Your game opens in your web browser.
Can't find it? Ask Claude: “Open game.html for me.”
Play it once, start to finish. If something looks off, that's fine. Prompts 3 and 4 are for that.
2. How do I make one change I can see?
What it's for: shows you that you can change the game by asking.
Make one change, and only one: [for example, make the background a warm cream color and the answer buttons bigger]. Don't touch anything else. Tell me what you changed and what I should look for.What you should see: Claude tells you what it changed. Go back to your game and press F5 (on a Mac, Cmd + R) to reload it. Or double-click game.html again. The change is there.
Small changes are easy to spot, and easy to undo.
3. How do I check it like a player?
What it's for: finds what's wrong before your learners do.
Check this game as if you were [who plays it] playing it for the first time. Read every question, choice and reply. If you can open a browser, play it all the way through. If you can't, tell me what you couldn't check.
Tell me anything that is wrong, confusing, or gives away the answer. Check that every choice marked right really is right, that every choice has a reply, and that no text spills out of its box.
For each problem, say where it is and suggest a fix. Don't change any files until I say so.What you should see: a short list of what Claude found, or a note that it found nothing. It changes nothing yet. You decide what to fix.
To fix something from Claude's list, use prompt 4, or say: “Fix number 1 only.” One at a time.
4. How do I fix what broke without starting over?
What it's for: fixes one problem and leaves the rest alone.
Something is wrong: [what you saw, in your own words. For example, "the score says 4 out of 3" or "the last button does nothing"]. Fix only that. Don't rebuild the game or change anything else. Tell me what you changed, and what I should see when I refresh.What you should see: the problem is gone, and the rest of the game still looks the same.
Bonus tip. If a change goes wrong, say this:
Undo that last change.
5. How do I get it ready to share or put in my course?
What it's for: packs the finished game and shows you how to put it online.
Get this game ready to share. Put a copy of everything it needs in a new folder called share, and leave my working files alone. Open the copy and check that it still works. Then walk me through putting it online, one step at a time in plain words, using Netlify Drop (https://app.netlify.com/drop). Also tell me how I would add it to a course, if my course tool is [your tool, or "I'm not sure"]. Tell me anything you're not sure about.What you should see: a share folder, and steps for getting a link. Open the link in a private (incognito) window before you send it to anyone. (Ctrl + Shift + N in Chrome or Edge. Cmd + Shift + N on a Mac.) That is what they will see.
Netlify Drop is free. It puts your game on the web. Sign in to a free Netlify account first. If Netlify says the site is private, click Make public, or the link will only work for you.
Good to know: anyone with the link can play it, so leave out anything private to your company. This game doesn't send scores to your course tool.
What's next?
You just went through the first steps of the method I teach: Explore, Model, Modify, Actualize. Look, play, change, share.
Want a finished game you can drop your questions into? The games in my shop are $10 each: see the games
Want to watch it done start to finish? There's a free workshop replay on my workshops page.
Rachel
E.M. Designs