GRADES 8–9 · LESSON 3
Branching Story: 5 Endings From One Map
Draw the map of your story first, then build it so every key press is a choice.
By the end of this lesson you will have — one keyboard-driven branching story with exactly 5 endings, built from a story map you drew first
What you'll show at the end: A story map of boxes and arrows with 5 endings, and a p5.js story where key presses choose the path, plus a tally of which ending you reached in 5 plays.
p5.js Web Editor
Check each tool's age rule before you sign up. If you are under 13, ask a parent first — some tools here are 13+ only.
Follow these steps
- On paper, draw your story map: one start box, some choice boxes, and exactly 5 ending boxes. Label every arrow with the key that picks it (for example, A or B).
- Open the p5.js Web Editor delete the example code in the editor first, then paste the starter code from this page. Number every box on your map starting at 0 (your start box is 0, like Scene 0 in the starter), and type each box's text into the scenes list in the same order.
- In the next list, copy your map's arrows: for each scene, write which key goes to which scene number. Press Play and check that every key goes where your map says.
- Play 5 times without planning ahead and tally which ending you reach each time. Stuck? Copy the question from the box next to these steps into the AI you're allowed to use (under 13: a parent's account, with your parent). Then take a photo of your map next to a screenshot of one ending.
Free tools for this lesson
Starting fresh?
No story map yet? This starter has 3 scenes: 1 choice and 2 endings. Grow it to 5 endings.
let scenes = [
"Scene 0: A locked door and an open window. Press A for the door, B for the window.",
"Scene 1 (ending): The door was never locked. You walk into the kitchen.",
"Scene 2 (ending): You climb out and land in the garden."
];
let next = [{ a: 1, b: 2 }, {}, {}]; // which key goes to which scene
let scene = 0;
function setup() {
createCanvas(400, 400);
textSize(18);
}
function draw() {
background(240);
text(scenes[scene], 20, 30, 360, 340);
}
function keyPressed() {
let k = key.toLowerCase();
if (next[scene][k] !== undefined) scene = next[scene][k];
}
Source (adapted for this grade: wording changed, facts unchanged)
anthropic.com/learn — AI Fluency: Framework and Foundations, Description and Discernment (adapted for Grades 8–9)
anthropic.com/learn — AI Fluency: Framework and Foundations, Description and Discernment (adapted for Grades 8–9)