All well and good! That's why I'm here. This layout uses Bootstrap navs and tabs to navigate between the different scenes in your story, so all of the different parts of your story are stored on the same page. This does, however, have a few minor limitations:

• Dynamic tabs do not work on Bulletins or Literature submissions. This code will only work on character pages.
• The nav system will not let you use the same link in a menu twice in a row. If you have options that cycle back to a previous scene, that scene will need at least two options, or else your reader will get stuck. For example, if you click this button and come back to this scene, it won't let you click it again.

With that in mind, let's move on to how to create scenes and link them together.

When you return to the previous scene, the button that lead here won't work anymore, unless you refresh the page.

Each scene in your story is contained in a div; for every scene you add, you will need to make a new copy of all of the text between the comments scene template and scene end. The beginning of the div is <div class="tab-pane fade" id="SCENE">. Everything in between this and its matching </div> tag at the end is what will show up in that scene.

You can leave the contents of class alone, but the id of each scene div must be unique, so change the word SCENE to (almost) anything you like. Your code will be linear, but your story is not, so organization is important.

The nav section that links scenes together is kept as an unordered list, between the <ul> </ul> tags. In turn, each option takes two lines, like so:

<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#SCENE">
  <i class="fas fa-angle-right fa-fw"></i> <strong>Decision A</strong></li>

It looks like a lot, but you can leave most of this alone. At the end of the first line, you will need to change the contents of href so the link will know to open the correct scene div. Keep the # sign, but change SCENE to the ID of the scene you want it to link to.

You can add extra options by pasting extra copies of these two lines before the > tag, and add links directly to your text by wrapping the words between the tags <a data-toggle="tab" href="#SCENE"> and </a>.

These are the important things to know about making and organizing divs for scenes, and creating nav menus to link them together. You don't have to modify any other parts of the code to make a complete adventure, but if you're familiar with HTML and Bootstrap classes, you can add to or change them to customize the look of you story.

Then you're good to go! Good luck and have fun writing!