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.

6 Replies
Steve Flowers

Good stuff, Sergey! I like the PostMessage() method but have had some trouble with consistent operation in older browsers.

A parent DOM reference, on the other hand, hasn't failed yet when communicating from an iFrame to the containing window. Have you seen problems with parent reference going from the iFrame to the parent? It's impossible to push the other way using DOM references, which makes PostMessage() handy.

Sergey Snegirev branchtrack.com

Thanks, Steve. PostMessage has certain limitations in IE but can still be used in all browsers (http://caniuse.com/#search=postMessage)

As for the DOM references, they will not work cross-domain, unlike PostMessages. Since a lot of our users embed BranchTrack dialogues directly from branchtrack.com into their courses that are then hosted somewhere.on.their.lms.com, we cannot use that. If you add all HTML files locally to your course, you can easily just use DOM references to parent/child.

Suzanne Armstrong

Hi Sergey,

Thanks for this post! Is it possible to do something similar with video content that is hosted on a third party site? I have a client that wants to stream a very lengthy video clip through a storyline screen and wants to prevent the user from proceeding to the Quiz (in Storyline) until they've watched the entire video.

I've been playing with a the file posted on this thread but am also seeking other options to understand fully what is possible.

Thank you!

Sergey Snegirev branchtrack.com

Hi Suzanne! Steve's example with triggers in that thread is pure genius.

If you're looking at a 3rd party video hosting, you will have to use a bit of scripting. Almost any decent 3rd party video player offers an API to access its timeline with JavaScript. You would need to constantly monitor the current playhead position and issue an alert the user if they skip a piece. You can also see when the video has reached the end and enable the Next button then. I'll try to find time to build a YouTube example for this.