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.
13 Replies
Thanks for sharing this super cool tutorial, Matthew!
My pleasure Kelly, glad you like it.
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.
On firefox the URL was this:
Any way to solve this issue please? Thanks a lot.
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.
Thanks Matthew, a great sharing as usual. You are the JS expert.
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.
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
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.
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.
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?
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
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
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.