Choose Your Own Adventure

What this page does

Read the text and click a button to choose. New text and new buttons appear. This keeps going until you reach an ending. Open adventure.html and look for the story. It is not there. JavaScript made every word.

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> and labels it. It connects a function to the button's click. Then it adds the button to the page.

Each choice is a function, such as goLeft or petSquirrel. Each one calls the two helper functions. The helper functions 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 helper functions first. Then grow the story one branch at a time.

1. 1

   Make the page

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

2. 2

   Write the paragraph helper

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

   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
   }

3. 3

   Write the button helper

   Write createButton(text, onClick). It follows the same pattern. It also 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. 4

   Write the first scene

   Delete your test calls. Write startAdventure(). It uses both helper functions to set up the first choice. goLeft and goRight do not exist yet. 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. 5

   Grow each branch

   Fill in one choice function at a time. Each one follows the same pattern. It makes one paragraph for the story. Then it makes 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.");
   }

6. 6

   Start the game

   Call startAdventure() on the last line of the file. The first scene now appears when the page opens.