How to create “fake branching” with RISE?

First, take a look at this “fake branching” demo. The story is somewhat whimsical and it “feels like” it’s personal, as it provides choices and responses. In reality, there’s no real branching.

Out-of-the-box, Articulate Rise (at least at this point) does not provide branching. You can, however, add stacked buttons as a choice to make. The problem is that every lesson shows up in the menu, and that kind of kills the thrill of a choose your linear adventure.


Branches are hidden in the menu.

Until now. Here’s how you can try it on your own:

  1. Download the sample.
  2. Unzip and test it locally.
  3. Create your own adventure:
    1. In Articulate Rise, create a new lesson online.
    2. Create a page with a scenario (block). Add three choices (stacked buttons). Don’t worry about the buttons yet.
    3. Create a page for the End Page (block)
    4. Create a branch:
      1. Add a page. This one will be the landing page for choice 1 from #2.
      2. Customize the text, so it make sense if someone chooses option 1 from the scenario.
      3. Add a button also to move to the End Page.
    5. Repeat #4 two more times, so you end up with a structure like this:
    6. Edit the scenario page. For each button, select the destination of your choice (one of the three branches).
    7. Test it online. You should be able to get from the scenario to the branches and the end page. However, they all show up in the menu.
    8. Export your course (no LMS).

So far, you’ve done the content part. You need some detective work:

  1. Launch the course locally.
  2. Start the course.
  3. Hover over each menu item where the branches displayed (B1-C1 in my example)
  4. The bottom of your browser displays the link. It should look something like: …#/list/3?…
  5. Note down the numbers you see after the list. For each branch. That is the ID of the lesson. It will not change when you republish the course, so you only have to do this once.

Here comes the magic. Hiding the Branches:

  1. Copy two files into the exported Rise project folder (where the index.html is):
    • zsolt.js
    • jquery-2.1.1.min.js
  2. Open the index.html in an editor (I use Note++) and locate the following line at the bottom:
      <script src="lib/main.bundle.js"></script>
  3. Under that line, copy the following two lines:
    <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
     <script type="text/javascript" src="zsolt.js"></script>
  4. The order matters! So, now you have these three lines:
    <script src="lib/main.bundle.js"></script>
     <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
     <script type="text/javascript" src="zsolt.js"></script>
  5. Save the index.html file.
  6. Open the zsolt.js file in the editor:
  7. setBranchData is a function you’re going to use. You can get rid of the examples (two lines of setBranchData) and create your own. The number of lines you create depends on the number of scenarios you have in your content. I had two scenarios in the example, that’s why there are two setBranchData lines.
  8. The setBranchData function will need 5 arguments:
    1. Lesson ID (you can see this by hovering over the lesson in the published Rise course: #/list/1 The id is "1")
    2. Branches (lessons to hide that belongs to this scenario. Use comma to seperate them: "2,8,4")
    3. Status. This is the only number you pass: 0 - Not visible, 1 - Visible You need to show the first one at least.
    4. Next Branch ID. If you do multiple fake branching, add the next ID here. 
    5. Previous Branch ID. If this is the first branch, set it to "0" since there's no previous branching. Otherwise, set it to the previous branch ID.

Example: you set up one scenario with three branches and an end page. You check the menu and the ids are the following:

Scenario -> 1

Branch 1 -> 2

Branch 2 -> 4

Branch 3 -> 5

End Page -> 3

You would add the following one line (after removing the existing setBranchData lines):



“1” is the ID of the scenario lesson

“2,4,5” are the IDs of the three branches you want to hide

1 is a status to show the scenario (if you had another scenario in the same lesson, you would give a 0 to hide it but the first scenario you want to show)

3 is the next lesson ID. Currently, it points to the end page. If you have more than one scenario, it would point to the next one.

0 is the previous scenario as this is the opening one. If you had multiple ones, you would add the previous lesson id here.

That’s it. Save it and test it.

TIP: don’t forget to show the developer window in your browser to see if there’s any red errors (Ctr+Shift+I in chrome). It also clears your cache every time you refresh your screen when testing.

About the Author

Leave a Comment:

Add Your Reply