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. 

} 

else 

{ 

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 {
 query_string[pair[0]].push(pair[1]);
 }
 } 
 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.