UPDATE: New version of demo to accommodate Articulate’s altered way of treating lesson IDs.

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 (you can do LMS or none).

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

1. Launch the course locally.
2. Start the course.
3. Click each menu item where the branches displayed (B1-C1 in my example)
4. The URL in the browser displays the link. It should look something like: …#/lessons/sdfiosdfsdfiosdfodsifsdieiwrnwn?…
5. Note down the ID (“sdfiosdfsdfiosdfodsifsdieiwrnwn”) you see after the /lessons/. For each branch. Don’t include the “?”, only the text between /lessons/ and the “?”. 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 (the long text ID from the URL)
   
   2. Branches (lessons to hide that belongs to this scenario. Use comma to separate them)
   
   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 (I’m using just three letters for ID to make it easier, in real life it’s a long text):

Scenario -> abc

Branch 1 -> vbn

Branch 2 -> nmk

Branch 3 -> rty

End Page -> iop

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

setBranchData("abc","vbn,nmk,rty",1,"iop",0)

Why?

“abc” is the ID of the scenario lesson

“vbn,nmk,rty” 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)

“iop” 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.

Consideration: this can be used for creating an experience rather than actually hiding content. Articulate’s search feature will find the hidden content, so it’s not like your audience would never be able to see it.