Lesson 9 of 10

Choose Your Own Adventure

A story where you click to choose. Every paragraph and every button is made by JavaScript.

What you will learn

Functions with parameters
Helper functions
createElement
appendChild
Passing a function to a listener

Before you start

Calculator. There your code reacted to the page. Here your code builds the page.

What this page does

Read the text and click a button to choose. New text and new buttons appear, until you reach an ending. Open adventure.html and look for the story. It is not there. Every word came from JavaScript.

How it works

Two small helper functions do all the work.

createParagraph(text) makes a <p>, puts the text in it, and adds it to the page.
createButton(text, onClick) makes a <button>, labels it, connects a function to its click, and adds it to the page.

Each choice is a function, such as goLeft or petSquirrel. Each one calls the helpers to add the next part of the story and the next set of buttons. startAdventure() runs when the page loads.

Build it step by step

Build the two helpers first. Then grow the story one branch at a time.

Make the page
Make adventure.html with a heading and an intro paragraph. Put the <script> tag at the end of <body>. Open it. You see the intro and nothing else.

Write the paragraph helper

Write createParagraph(text). Then call it once at the bottom of the file with createParagraph("test"); to check that text appears.

function createParagraph(text) {
    var newParagraph = document.createElement("p"); // make a <p>
    newParagraph.textContent = text;                // put text in it
    document.body.appendChild(newParagraph);        // add it to the page
}

Write the button helper

Write createButton(text, onClick). It follows the same pattern and adds a click listener. Test it. Clicking should add a paragraph.

function createButton(text, onClick) {
    var newButton = document.createElement("button"); // make a <button>
    newButton.textContent = text;                     // label it
    newButton.addEventListener("click", onClick);     // run onClick on click
    document.body.appendChild(newButton);             // add it to the page
}

4
Write the first scene
Delete your test calls. Write startAdventure(). It uses both helpers to set up the first choice. goLeft and goRight do not exist yet, so write them as empty functions for now.
```
function startAdventure() {
    createParagraph("You are in a dark forest. Go left or right?");
    createButton("Left", goLeft);
    createButton("Right", goRight);
}
```
5
Grow each branch
Fill in one choice function at a time. Each one uses the same recipe: one paragraph for the story, then one button for each choice. An ending is a function with a paragraph and no buttons.
```
function goRight() {
    createParagraph("You fall into a pit. Game over.");
}
```
Start the game
Call startAdventure() on the last line of the file. The first scene now appears when the page opens.

Try these changes

Make these in the files beside this guide. None of them need anything the lesson has not covered.

Add a new branch that is three choices deep.
Give one ending a Play again button that reloads the page.
Keep an inventory in a variable and change what a scene says based on it.
Clear the old scene before drawing the new one, so the page does not just grow.

Teacher's versionHow to run this lesson, what to check, and any answers. Students do not need this.

How to teach it

Test each helper on its own before any story exists. A student who trusts the two helpers can write the rest alone.
The missing brackets in createButton("Left", goLeft) are the bug of this lesson. Write goLeft() on purpose and reload. The page runs the scene immediately. Then fix it.
Plan the story on paper as a tree before coding. One box per scene, one arrow per choice. The code then writes itself.
Empty stub functions in step 4 stop the page erroring. Explain that this is normal practice, not a trick.