Hook them! JavaScript and Storyline to engage learners!

If you build, they come…

If that’s not the case, you must do something about motivating people to go to your course. One creative way to do that is the following:

Business Problem: Let’s assume you have a short quiz you want learners to take. You send out an email notification with a link to your target audience but nothing really happens.

Solution: Gamify the email with a simple trick (using challenge and mystery game mechanics):

  1. Send out one of the questions from the Quiz:


2. Challenge them to think about the answer and select one of the following two options:

Answer Option1

Answer Option2

Go ahead, select one and see what happens!!

How does it work?

I used Trina’s https://community.articulate.com/download/storyline-2-risk-assessment-quiz template to demonstrate this. Then, with some JavaScript magic, I tweaked the template. The two links you see above are both taking you to the same course. However, they also include an “option” at the end of the link: ?option=1 and ?option=2. When the course launches, it checks what the option number is in the link, and it automatically redirects to a slide to look create a personalized entry point. Now, you’ve just hooked the learner!

Download the source

Here’s the zip file that contains the Storyline source and the JavaScript.

What you find in the zip:

CanYouSpottheRisk.story – This is the Storyline 2 source file based on Trina’s original template. On slide 1, you will find a JavaScript trigger that runs and checks if there’s an “option” in the URL. If there’s an “option” in the URL, it sets the Answer Storyline variable to that value. Example: http://rabbitoreg.com/example/option/storyline.html is the course URL. Now, if you add an “option” argument: http://rabbitoreg.com/example/option/storyline.html?option=1 This will set the Answer variable to 1.

 var player = GetPlayer(); 

if (QueryString["option"]) 


player.SetVar("Answer",QueryString["option"]); // If there's an option in the URL, we set the Answer variable to that value. 




player.SetVar("Answer",0); // If there's no option in the URL, we set the Answer to 0. 


Now, in SL, all you need is a trigger that is watching the change of the Answer variable (original value is -1). Once the Answer changes, you can do a branching jump to any slide you want, based on the Answer variable.

add_this_to_user.js.txt - Contains a JavaScript function that you need to manually copy paste into the /story_content/user.js file after each time you republish the course. Don't worry about what exactly it does, overall we call this function to find collect URL information and sets a SL variable equal to the value of the the URL option. Example: http://rabbitoreg.com/example/option/story.html?option=1  The JS script checks if there's an "option" in the URL. In this case, there is and its value is 1. 

// @rabbitoreg This function checks the course URL for arguments such as ?option=1. This is used by the course to check if
// the learner clicked on a link with a specific option.
// When you republish the course, this function WILL NOT BE in the story_content/user.js file. You must copy paste it into the file manually.
var QueryString = function () {
 var query_string = {};
 var query = unescape(window.location.search.substring(1));
 var vars = query.split("&");
 for (var i=0;i<vars.length;i++) {
 var pair = vars[i].split("=");
 // If first entry with this name
 if (typeof query_string[pair[0]] === "undefined") {
 query_string[pair[0]] = pair[1];
 // If second entry with this name
 } else if (typeof query_string[pair[0]] === "string") {
 var arr = [ query_string[pair[0]], pair[1] ];
 query_string[pair[0]] = arr;
 // If third or later entry with this name
 } else {
 return query_string;
} ();

What about html5?

Well, good question. If you’re using the original Story.html that Storyline creates and try this on a mobile device, it won’t work. Why? Because the http://rabbitoreg.com/example/option/story.html?option=1 will redirect to the html5 version: http://rabbitoreg.com/example/option/story_html5.html and you lose the “option=1” part.

In order to save that, I included a story.html that does transfer the option in the URL. However, test it well since it’s somewhat changing the original behavior.

story.html – This is the launch file that some modification compared to Storyline’s automatically created version.



4 thoughts on “Hook them! JavaScript and Storyline to engage learners!

  1. This is a nice concept but I am not sure how you are linking to a specific Storyline slide using javascript. Is the ?=option 1 pointing to a specific slide? Can you provide an expample of the javascript code please?

  2. Hi Zsolt,

    That answers everything and I am very grateful to you for publishing the solution. Keep up the good work; there are few people who demonstrate how to extend Storyline with Javascript.

Leave a Reply

Your email address will not be published. Required fields are marked *