Storyline Javascript xAPI Customization | Best Practices for xAPI

By Sean Putman (VP Learning and Development, Altair Engineering)

Storyline boxIn the first article I wrote about Storyline and xAPI. I looked at how Storyline dealt with xAPI out of the box. I created a course and published it with no customization and got a set of statements. Since Storyline can execute JavaScript I wanted to look at how to extend Storyline to provide a better xAPI output.

For this article I am using Storyline 2 and Rustici’s TinCan Wrapper. As with the first article, I am going to use a similar setup to launch and view the files, the Grassblade Plugin in a WordPress site. If you read the first article (which I recommend you do before going any further) you know that Storyline will give a statement for each slide that “Actor experienced the slide”. I wanted to be able to track items within each slide. To track an item in the slide we need to use Triggers.

Setting up the Triggers

In this example I want to track that a button was clicked on a slide. In this case it is a simple button moving us to the next slide, but it could be something that shows or hides other elements on a slide. Let’s look at what it takes to get the output from this button. With a button created I create a new Trigger for the button.


With the window open you set the JavaScript in the JavaScript dialog. The JavaScript code to execute is entered in the window. The verb and object need to be set in this instance. The Actor will come from Grassblade when the project is published.

A couple of things are needed to set each part of the statement. In the case of the verb we have the id and the display. ID will essentially be the URL to the verb definition in the registry. The display will be the human readable display of the verb. The object will need the id entered manually, which can be the course URL in this case. The definition of the object will need two additional items defined for the code I am using here, name and description. These two items are the name of the object and the description of the object. Here is what the code looks like in the window:


In this example have used a verb that is not part of the ADL registry in “clicked” so I have the id and the display. For the object I have defined the object id with the course URL, the name with “Next Button” and the description with “Next Button on first page”. That completes the definition of the JavaScript for execution. I also created a second Trigger on this button to go to the next slide as seen below.


Publishing the Files

There is no additional customization that needs to be done for the initial publish from Storyline other than setting the output to Tin Can API.


Once published there two files that need to be copied into the output folder, so I unzip the output. I will also need to edit the html launch page for the course.

Editing the Output

First let’s add the files to the folder, two files from the Rustici library need to be added to the top level folder of the output; tincan-min.js and tincan.js. You can download the library from the GitHub here. Once those are in the folder a reference needs to be added to the JavaScript libraries in the head section of the HTML file. When you open the file you will see a list of references to external JavaScript files near the bottom of the head section.


One line is added to the list to reference the tincan-min.js file. See the image below for the reference text.


Now that the reference is ready I can save the file and zip the folder to get it ready for upload to Grassblade.

The Statements

Once loaded, I can take the course and review the statements that are generated.


As expected I get the “attempted” and “experienced” statements from Storyline. Now I see a “clicked” statement that has been generated from the customized button. If I open the statement I see that the information in the JSON is what was entered into the script window in Storyline.

Sean Putman clicked Next Button | 48 seconds ago (Tue, Jun 28, 2016 1:35 AM)

      "name":"Sean Putman"
            "en-US":"Next Button"
            "en-US":"Next Button on first page"

That is it, a customized button in Storyline. Be aware every time you publish you will need to add the .js files to your output and edit the HTML file from Storyline. It is a good idea to keep a copy of the files after the initial customization in case you need a reference for future publishes.

If you find other/better ways to extend the capabilities please share them so we, as a community, can continue to extend Storyline for even better outputs.

SEAN PUTMAN (VP, Learning and Development, Altair Engineering)

DSC_4801b-3 Sean Putman, the Vice President of Learning Development for Altair Engineering and the Owner of Intellectus Learning, has been an instructor, instructional designer, and developer for over 15 years. He has spent his career designing and developing training programs, both instructor-led and online, for many different industries.  Sean has also spent the last few years focusing on the use and deployment of the Experience API and its affect on learning interventions.  Sean has spoken at many industry conferences on xAPI and related topics.

Speak Your Mind

This site uses Akismet to reduce spam. Learn how your comment data is processed.