Matthew Bibby
Matthew Bibby

Jumping to a Specific Slide in a Course via the URL

Matthew BibbyMatthew Bibby

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.

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:

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!

Matthew Bibby
Author

Matthew Bibby

I'm Matt. I'm an eLearning Consultant. I help people like you develop memorable, engaging and profitable training programs. What do you need a hand with?

Comments