Lesson 5 — Create an Interactive Story
Build a tiny story where the reader makes two choices and reaches two possible endings. Output: my-first-interactive-story.html — a free, parent-guided lesson.
Free · Parent-guided
Safety rule: Use ideas, not secrets. Do not enter real names, school names, addresses, phone numbers, emails, passwords, photos, medical details, financial details, account information, exact locations, or private family details into any AI tool.
For parents
From games to story logic
This lesson shifts from games to story logic — your child learns how choices create different outcomes. You may help copy, save, and open the HTML file; let your child choose the story idea, character, choices, and endings (all fictional).
The project
What your child will build
A tiny local browser interactive story, saved as one HTML file:
- ✓One fictional character
- ✓One opening scene
- ✓Two choices
- ✓Two endings
- ✓A restart button
- ✓Saved as my-first-interactive-story.html and opened locally in the browser
The key rules
Rule 1
Two Choices Rule
The reader chooses between two clear options.
Rule 2
Two Endings Rule
Each choice leads to a different ending.
Rule 3
Restart Rule
The reader can restart the story from the beginning.
Rule 4
Fiction Rule
Use imaginary characters, places, and events — never real private details.
Plan first
Story map
Fill this in before coding (keep everything fictional):
- Character:
- Place:
- Problem:
- Choice A:
- Choice B:
- Ending A:
- Ending B:
Lesson path
1Pick a tiny fictional story ideaChoose an imaginary character and a simple situation. Keep it small and made-up.
2Fill in the story mapWrite the character, place, problem, two choices, and two endings before coding.
3Ask AI for a one-file HTML interactive storyUse a parent-approved AI assistant. Ask for ONE HTML file with two choices, two endings, and a restart.
4Copy the codeCopy the full code the AI gives you. A parent may help with copying.
5Save as my-first-interactive-story.htmlPaste into a plain text/code editor and save with a name ending in .html.
6Open it in a browserDouble-click the file to open it in Chrome, Safari, or Edge — no internet needed.
7Test both choicesTry Choice A and Choice B and check they lead to two different endings.
8Test the restart buttonMake sure the reader can start the story over from the beginning.
Pick one
Safe story ideas
Beginner-friendly, fully fictional ideas:
- •A robot choosing between two doors
- •A dragon choosing a snack
- •A space explorer choosing a planet
- •A cat choosing where to nap
- •A tiny wizard choosing a spell
- •A submarine choosing a path
- •A garden helper choosing which seed to plant
Prompt cards
Copy-friendly prompts for a parent-approved AI assistant. When copying prompts, use ideas, not secrets.
Prompt 1 — Story idea
Help me create a tiny fictional interactive story for a child beginner. It should have one character, one opening scene, two choices, two endings, and a restart button. Do not ask for personal information.
Prompt 2 — One-file HTML
Create a one-file HTML interactive story. It should work when saved as my-first-interactive-story.html and opened in a browser. Use simple HTML, CSS, and JavaScript in one file. Do not use external libraries, accounts, uploads, or online features.
Prompt 3 — Improve the choices
Make the two choices clearer and easier for a child to understand. Keep the story tiny. Keep two choices, two endings, and a restart button.
Prompt 4 — Fix my story
My interactive story did not work. Please help me check the code. Explain the fix simply. Keep it as one HTML file.
Save it
Save as my-first-interactive-story.html
- Open a plain text or code editor.
- Paste the full code.
- Save the file as
my-first-interactive-story.html. - Make sure the filename ends in
.html(not.txt). - Open the file in Chrome, Safari, or Edge.
- If it opens as plain text, check the filename and re-save.
- If buttons do nothing, ask the AI to fix the JavaScript while keeping one file.
Test it
Test checklist
- ✓The page opens
- ✓The opening scene appears
- ✓Choice A works
- ✓Choice B works
- ✓Ending A appears
- ✓Ending B appears
- ✓Restart button works
- ✓Story stays fictional
- ✓No private information is included
- ✓No upload/account/online feature was added
Stuck?
Troubleshooting — common fixes
- File opens as text, not a storyThe filename must end in .html (not .txt). Re-save with the correct ending.
- Blank screenOpen the file again, or ask the AI: “My story shows a blank screen. Fix it and keep it as one HTML file.”
- Buttons do nothingAsk the AI to fix the JavaScript for the choice buttons, keeping everything in one file.
- Both choices lead to the same endingAsk the AI to make Choice A and Choice B lead to two different endings.
- Restart button does not workAsk the AI to make the restart button return to the opening scene.
- Story became too longAsk for a shorter version: one scene, two choices, two short endings.
- AI added too many choicesAsk the AI to keep only two choices and two endings.
- AI split the project into several filesAsk the AI to put all the HTML, CSS, and JavaScript back into one single HTML file.
- AI asked for private detailsDo not share them. Say: “Use made-up, fictional ideas only. Do not ask for personal information.”
Compare
Open the sample interactive story
See a finished example to compare against. It opens locally in a new tab — no internet needed. This is an example, not your child's project.
You made your first interactive story. 🎉
You planned a tiny fictional story, gave the reader two choices and two endings, and added a restart — all in one local HTML file.
Next: Lesson 6 — Build a Useful Mini Tool →