Communication between Storyline and 3rd party content

Hi everyone. I've been tasked by a customer to integrate a 3rd-party interaction (that I developed) into Storyline course so that the learners cannot skip the slide with the interaction. The client also wanted to pass the score from the interaction to Storyline to display custom feedback.

So I wanted to share the result and step-by-step guide with everyone. If you're inserting web objects on your slides, you should definitely read this (and show this to anyone who develops those objects for you).

Step 1. Make sure the 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. I created one for the game status and another for the game score. I can check my variables and execute certain actions based on their value later.

Step 3. Make sure Storyline listens to your messages.

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

Step 4. Restrict navigation.

First, I added a condition to the Next page button trigger. It only works if the game result custom variable equals "finished".

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

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

Step 5.

I added 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: http://community.articulate.com/tutorials/products/building-a-simple-counter.aspx

The whole result is available in the attached .story file.

You can also view it live here: http://bit.ly/stline1Feel free to get in touch if you need help with anything. I've been playing around with Storyline and JavaScript a lot recently, so I'll be happy to share and learn.