Make Your Articulate Storyline Better with BranchTrack

When designing BranchTrack we wanted our simulations to be compatible with other e-learning tools, Articulate Storyline being one of them. It makes a lot of sense to supplement Storyline courses with interactive, dialogue-based simulations that engage learners with real situations. These simulations break the monotony of turning pages and allow players to put their gained knowledge to the test.

Step 1. Make sure the BranchTrack simulation aka web object is talking to Storyline

Normally, browsers are not very happy about an embedded content frame talking to the parent page and vice versa for security reasons. Our interaction uses JavaScript function "postMessage" to send data to the parent page (i.e. Storyline). Among other advantages, this method makes sure that browsers cannot block this communication. PostMessage() has been introduced in JavaScript for exactly this reason.

Step 2. Create custom variables.

Custom variables are great and powerful. You can create one for the simulation status (finished or unfinished) and another for the simulation score. You can check your variables and execute certain actions based on their value later.

Step 3. Make sure Storyline listens to your messages.

It's simple. Just add a new trigger at the beginning of slide timeline that executes a simple JS function (see the code below). Now Storyline can listen to whatever the embedded simulation sends it. It also saves the message data into Storyline variables. By the way, it is always a good habit to comment your code.

window.addEventListener('message', function(message) {
  data = JSON.parse(message.data);
  if (data.type=='branchtrack:player:finish') {
    var player = GetPlayer();
    player.SetVar("BranchTrackStatus", "finished");
    player.SetVar("BranchTrackScore", data.details.results.score);
  }
});

Step 4. Restrict navigation.

Here's an example: You can add a condition to the Next page button trigger. It only works if the simulation result custom variable equals to "finished".

Then, restrict navigation in player settings so users cannot skip slides using the player menu.

Finally, create an extra trigger for the Next page button. It displays a warning textbox if the simulation result is anything but "finished". Otherwise some users might think the Next page button is simply broken.

Step 5. Add the score to the other slide.

If you want to display a custom variable in text, simply do this:

1. Go to Insert > Text > Text Box and click once on your slide to create an active text box.
2. With the text box selected, go back to Insert > Text > Reference
3. Select Counter and click OK

Also, check out this excellent tutorial: https://community.articulate.com/discussions/building-better-courses/communication-between-storyline-and-3rd-party-content

You can view a simulation in a Storyline course here: https://branchtrack.link/demo/storyline2/story.html