Jumping to a Specific Slide in a Course viathe URL

In this tutorial, we will look at how to pass a number to Storyline via the URL so thatwe can use it to determine which slide the course should jump to when it opens.

Are you sick of saying "open the course and go to slide 48..."? Wouldn't it be

easier to just send someone a hyperlink that'll take them to a specific slide?

Or maybe you're using your course as a FAQ or help file and need a way to

share links to the relevant questions or articles with others?

Or do you want your learners to be able to link directly to something they

learnt in an online course for future reference?

In this tutorial, we will look at how to pass a number to Storyline via the URL

so that we can use it to determine which slide the course should jump to

when it opens.

Before we begin, big thanks to Steve Flowers and Russell Killips who have

both shared examples of this in the Articulate Forums previously. I'll be using

code from both Steve and Russell in this tutorial, so thank you both for the

contributions that you make to the community.

How Does This Work?

There are three parts to this:

The URL that we use to open the course.

The JavaScript that we use to get the info we want from the URL.

The triggers that we use in Storyline to do stuff with this info.

Let's look at each of these in turn.

The URL

In order to pass this information to Storyline, we are going to use something

called a query string.

A query string is essentially some data that is appended to a URL so that it can

be shared. You've probably come across one of these before without realising

it, they look a little bit like this:

http://www.example.com/page?name=Fred

The question mark indicates the start of the query string. Then the next part

specifies the field, followed by the data. So in this case, the name Fred would

be passed to the website.

We are going to use this method to pass a slide number to Storyline. So rather

than sending Fred's name, our query string will look more like this:

http://www.example.com/course/story.html?slide=3

The first part of the URL, http://www.example.com/course/story.html , is

what we'd normally use to open the course. Then we've got the query string,

i.e. ?slide=3 , which is something that we manually add onto the end of the

URL so that we can pass the data (which in this case is the number 3 ) to

Storyline. This could just as easily be ?slide=7 , ?slide=13 or ?slide=78 .

The JavaScript

Then we need to add some JavaScript to our Storyline course that will grab

the value from the query string and pass it to Storyline.

There are a number of ways that this can be done, but for this example, we

will use the simple approach:

var player = GetPlayer();

var query = window.location.search.substring(7);

player.SetVar("JumpToSlide",query);

Let's step through this code line by line.

First, we need to establish communication with the Storyline player, which

we can do using:

var player = GetPlayer();

Then we are going to create a new JavaScript variable called query which

we will use to temporarily store the value from our query string. Then we

will populate this variable with the value from our query string:

var query = window.location.search.substring(7);

The window.location code grabs the URL for the current page, then the

search code will grab the query string from that URL (e.g. ?slide=3 ) and

finally, the substring(7) code will grab the part of the query string that

begins with the seventh character.

Or explained another way...

If we just used window.location it would return

http://www.example.com/course/story.html?slide=3 .

If we used window.location.search it would return ?slide=3 .

And when we use window.location.search.substring(7) we get 3 .

Does that make sense? If not, don't stress, you can always use this code

without understanding it!

Okay, so now we need to take the value that is stored in the query variable

and pass it to Storyline:

player.SetVar("JumpToSlide",query);

For this to work, we'll need to make sure that there is a number variable

called JumpToSlide in Storyline.

The Storyline Triggers

Now that we have figured out how to structure the URL and got our

JavaScript sorted, let's turn out attention to Storyline.

For this tutorial, we are going to use a really simple project that contains ten

slides. Each slide looks a little like this:

As mentioned earlier, we need to create a number variable called

JumpToSlide to store the value from the query string.

So let's create that variable:

Now, we need to add some triggers to the master slide. So go to View > Slide

Master and then select the master slide that is used in your project:

The first trigger that we need is an Execute JavaScript trigger.

This should be set to run when the timeline starts and contain the JavaScript

we looked at earlier:

Then we need to have a series of conditional triggers that will jump to the

appropriate slide whenever the JumpToSlide variable changes.

Here is the first trigger:

This needs to be duplicated for each of the slides in the course. So when we

are done, the trigger list should look a little something like:

So now, when the course loads using a URL that includes a query string, such

as http://www.example.com/course/story.html?slide=10 , then it will jump

to the appropriate slide.

Unless...

There is one small problem.

If you link to the Flash version of the course using a URL such as

http://www.example.com/course/story.html?slide=5 and the learner

doesn't have Flash enabled, then they will be redirected to

http://www.example.com/course/story_html5.html .

During the redirection to the HTML5 version of the course, the query string

will be stripped from the URL, which means that the learner will be taken to

the start of the course rather than the fifth slide as specified by the query

string.

This potential issue can be addressed by making a small change to the

story.html file after the course is published.

So after you publish the course, click Open:

Then find the story.html file and open it using your preferred text editor (if

you don't have one, then grab a copy of Sublime Text).

You'll be greeted with something like this:

Now, just jump down to line 81 where you see something that says else if

(g_bRedirectHTML5) :

This is the Storyline redirect script and we are going to make a little addition

to this so that Storyline will bring our query string along for the ride as it

redirects.

What we need to do here is add a new line after the closing bracket on line 96

and enter the following code:

strLocation += "&" + document.location.search.substr(1);

}

else

{

strLocation += "?" + document.location.search.substr(1);

}

So like this:

Once that file has been saved, we are all done.

Here's a Demo

Here is a demo so you can see how it works.

This link will take you to Slide #2 thanks to a ?slide=2 query string.

This link will take you to Slide #3 thanks to a ?slide=3 query string.

This link will take you to Slide #4 thanks to a ?slide=4 query string.

This link will take you to Slide #5 thanks to a ?slide=5 query string.

This link will take you to Slide #6 thanks to a ?slide=6 query string.

This link will take you to Slide #7 thanks to a ?slide=7 query string.

This link will take you to Slide #8 thanks to a ?slide=8 query string.

This link will take you to Slide #9 thanks to a ?slide=9 query string.

This link will take you to Slide #10 thanks to a ?slide=10 query string.

This link will open the course normally (thanks to no query string).

Files You Might Need:

Here is the .story file that was used in this example.

Frequently Asked Questions:

Q. What happens if I try with a number that's too big, say ?slide=99999 ?

A. Not much, assuming you don't have a Slide #99999! The value will simply

be passed to the JumpToSlide variable and nothing will happen.

Q. What happens if I use a different five-letter word, say ?hello=5 ?

A. Everything would still work. But the word used must have five letters

because the substring(7) demands it.

(Or, if you really want to use four letter words, we could just change the code).

Q. Can I specify both the scene and the slide in the query string?

A. Sure, this example from Russell will show you how to do that.

Q. Does this work in Storyline 360?

A. Probably. But some changes would need to be made to this process.

Q. Will this work in an LMS?

A. Probably not.

Q. When I applied this to my course, I noticed that the first slide appeared for

a split second before it jumped to the correct slide. What's up with that?

A. That happens because it takes a moment to run through the triggers on the

slide master. Just apply some fade in animations to the first slide to minimise

the effect.

Q. Do I have to add the code to story.html every time I publish the course?

A. Yes, you do. Although when you get to a point where you want to use this

technique in every course, you could alter the story.html template. If you

need a hand doing that, let me know.

Q. Does this still work if I have my course set to Always resume?

A. Yes.

Q. Does this still work if I have my course set to Prompt to resume?

A. Yes.

Q. Does this work in HTML5? (i.e. will it work on my phone and tablet?)

A. Yes, it will.

Q. Will this work in Articulate Mobile Player?

A. No, it will not.

Q. Do Articulate support this method?

A. No, as it involves JavaScript and modifying the published output it isn't

something they can help with. But if you get stuck, let me know.

Q. My question isn't listed here, what should I do?

A. Query things. With a string. Or you could ask in the comments below.

If you found this tutorial helpful and think others in your network will also,

please share using the share buttons below. Thanks!

STORYLINE TUTORIALS

JAVASCRIPT

SHARE:

AUTHOR

Matthew Bibby

I'm Matt. I'm an eLearning Consultant. I help people like you develop memorable,

engaging and pro�table training programs. What do you need a hand with?

VIEW COMMENTS