Tutorial: Jumping to a Specific Slide in a Course via the URL

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.

Click here to see the tutorial, click here to see the demo and here to download the source file.

Let me know if you have any questions, comments or are stuck with implementing any of this. I'm happy to help where I can.

14 Replies

Kelly Meeker
Staff

over 4 years ago02/07/17 at 11:43 pm (UTC)

Thanks for sharing this super cool tutorial, Matthew!

Matthew Bibby
Author

over 4 years ago02/08/17 at 12:09 am (UTC)

My pleasure Kelly, glad you like it.

M Lee

over 4 years ago04/17/17 at 11:47 pm (UTC)

Hello Matt, Thanks for sharing such a great idea! It works perfectly on Firefox, but unfortunately, I tried both IE and Chrome and none of them were functional. I found both IE and Chrome navigate to a html5 page. chrome

On firefox the URL was this:

Firefox

Any way to solve this issue please? Thanks a lot.

Matthew Bibby
Author

over 4 years ago04/18/17 at 1:11 am (UTC)

Hi Mu,

Yes, it is possible to solve that. See this part of the tutorial. These steps should ensure that the query string is passed along when it redirects to the HTML5 output.

Joanne Chen
Hero

over 4 years ago04/18/17 at 2:55 am (UTC)

Thanks Matthew, a great sharing as usual. You are the JS expert.

Matthew Bibby
Author

over 4 years ago04/18/17 at 6:03 am (UTC)

That's kind of you to say Joanne, but I can't take the credit for this trick!

That goes to Steve Flowers and Russell Killips.

over 3 years ago05/11/18 at 9:44 am (UTC)

Hi Matthew, great work and thanks for your help.

Apologies for the question on an old topic, but I am trying to implement this solution but it does not seem applicable to the HTML file of a Storyline 3 course. I cannot find where to put the parameters in the story.html file. Have you looked at this for storyline 3?

Cheers

Craig

Leslie McKerchie
Staff

over 3 years ago05/11/18 at 8:32 pm (UTC)

Hey Craig,

Matthew is pretty active in the forums, so hopefully he'll be able to chime in and help you out here. You are certainly welcome to reach out to the user directly via the 'Contact Me' option on the user profile if you do not hear back soon.

over 3 years ago05/11/18 at 11:08 pm (UTC)

craig morris

Apologies for the question on an old topic, but I am trying to implement this solution but it does not seem applicable to the HTML file of a Storyline 3 course. I cannot find where to put the parameters in the story.html file. Have you looked at this for storyline 3?

Hey Craig,

No worries about asking a question on an old topic. I like old stuff. Actually, one of my favourite people in the whole world is my Grandma and she's almost as old as the hills!

When SL3 came out, Articulate changed a lot of things behind the scenes. It doesn't surprise me that the code you need to edit has changed here. I'll dig into this when I have a chance and see if I can update this, but I won't have time for a little while as I've got a bunch of other stuff I need to focus on at the moment (including visiting my Grandma!), but I'll let you know once I've figured it out.

If you don't here back from me in a week or so, feel free to message me a reminder.

john faulkes

over 3 years ago05/14/18 at 1:17 pm (UTC)

Wouldn't it save a whole load of trouble if Articulate were to enable the 'Jump to slide' trigger 'Slide:' field to address a variable?

Kimberly Walker

2 years ago08/30/19 at 7:24 pm (UTC)

Q. Does this work in Storyline 360?
A. Probably. But some changes would need to be made to this process.

Can you help me with the additional changes needed in this process as I am working in Storyline 360?

Thank you so so very much for taking your time to help!

Kimberly

Elizabeth Parent

8 months ago02/12/21 at 2:27 pm (UTC)

Wow this is amazing.

I need this! Can you help me with Storyline 3? I need to change the story.html before publishing because many course need this!

Thanks

Erin Flage

8 months ago02/13/21 at 8:17 pm (UTC)

The original tutorial still works in Storyline 360 (and I would assume SL3). However, I've updated the Javascript to use the URLSearchParams API to provide more flexibility in what you can pass to the course.

Here's a working example. https://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/sto_1eueg6mpvm52g4m1g9h19d91e099/story.html?section=2

You can try 2, 3, 4 or 5 as variables.

There should be no need to modify the story.html file.

Stephen Gorey

8 months ago03/05/21 at 10:21 am (UTC)

Hi, has anyone managed to ever get this working within an LMS system ?

I have a working project but once it is uploaded to the LMS it breaks down. The problem is that the URL changes each time the user launches the training, rendering the process useless. I can't specify a unique URL within storyline as it changes each time.

Any help greatly appreciated,

Thanks,

Stephen.