Jump to slide in Storyline from outside the course?

Aug 12, 2016

Using something like JavaScript, is there ANY way I can go to a specific slide or scene in a Storyline course, from outside the course?

Example: A learner is just working on a webpage at their job and it asks them:

"Hey, did you want to learn more on this function? Click here to be taken directly to the specific part of this bigger course that talks about what you're seeing here."

And then it jumps to, say, slide 23 in scene 5?

29 Replies
Brian Dennis

I believe there's javascript support inside SL to jump to a specific slide. Search these forums for a list of functions available.

Invoking code inside your SL project from outside is a whole different ballgame. For starters, you're likely to encounter a Cross Origin Access error, or null function exception. I suppose you could work up some web object approach, but that's far from certain to work. Keep in mind when SL's javascript functionality is available

Russell Killips
James Holt

I like it. 

You can replace all of the individual slide triggers with the following JavaScript.

var player = GetPlayer();
var nSceneNumb = player.GetVar("nScene");
var nSlideNumb = player.GetVar("nSlide");

//function get slide index
function getIndexOf(array,scn,sld) {
var length = array.length;
for (var i=0; i<length; i++) {
if (array[i].sceneIndex==scn & array[i].sceneSlideIndex==sld-1) {
return i;
}
}
return false;
}

//run function
var result_slideId = getIndexOf(story.allSlides,nSceneNumb, nSlideNumb);

//show slide index
player.showSlideIndex(result_slideId);

James Holt

Hi Russell,

Correct! The JavaScript works with HTML5 however, a good flash actions script 3 developer, should be able to connect the script and drop a small SWF on the first slide.

similar to Set/Get Articulate Storyline Variables within your AS3 Flash file. (elearningehnanced.com)

https://elearningenhanced.com/blog/2012/05/24/setget-articulate-storyline-variables-within-your-as3-flash-file

Russell Killips

Hello Matthew,

You could modify the Storyline HTML5 redirect script.  This script is in the story.html file.

For me it is on line 81. else if (g_bRedirectHTML5)

Here are my changes to the Redirect Script. The changes are in bold and are underlined.

else if (g_bRedirectHTML5)
{
      var strLocation = "story_html5.html";
 
      if (g_bTinCan)
      {
            strLocation += "?tincan=" + g_bTinCan + "&" + document.location.search.substr(1);
      }
      else if (g_bLMS)
      {
            strLocation += "?lms=1";
  
            if (g_bWarnOnCommitFail)
            {
                  strLocation += "&warncommit=1";
            }

            strLocation += "&" + document.location.search.substr(1);
      }
      else
      {
            strLocation += "?" + document.location.search.substr(1);
      }
 
      location.replace(strLocation); 
}

Mette Bang Petersen

I was so happy to find out that this worked perfectly!

In Storyline 2 that was. But alas, the story.html file looks a lot different in Articulate 360. Any idea where (and what)  to put in the new story.html file?

 

Html5 still doesn't recognize the url's without some "extra guidance". Flash gets it, though. 

Example: 

http://elearning.kk.dk/tmf/borger/pafgiftertest/story_flash.html?scene=3&slide=1

vs:

http://elearning.kk.dk/tmf/borger/pafgiftertest/story_html5.html?scene=3&slide=1 

NB. Click "Nej" to the resume-box that pops up on revisiting. 

Russell Killips

Hello Everyone,

Tonya contacted me recently about this not working when there is a video on the slide. I think it wasn't working because the Jump To Slide triggers were executing before the video slide had time to load. So I changed the jump to slide triggers to run on timeline end instead of when the variable nSlide changes. I adjusted the timeline to be 3 seconds long. You may need to adjust the length of the timeline to meet your needs.

I have attached my updated project which was done using Storyline 360.

Tonya Bovender

Ashley,

Russell explained above and attached his updated file. For me, it was really about making the timeline of the first slide only 3 seconds long and changing the Jump To Slide triggers to run when the timeline ended. Those two changes apparently give the slides time to load in the videos before the jump is requested. 

Hope that helps!

Ryan Nieman

I'm back to using this method (calling a particular slide via a query string) again for a new project. However, now when I try to navigate back to the Home page from which the query string originated, the string just executes again. I can no longer navigate from the home page normally. How do I make the query string execute once and then "turn off?" Thank you!

Leslie McKerchie

Hey Beth,

Looks like there were many ideas shared here, and it sounds like you may be using the latest one shared by Russell so hopefully he'll be able to chime in and help you out.

My first thought is to add a condition to your trigger, but without seeing what you have setup I'm not sure if that's fitting.

If you could share your .story file, that would be helpful as well for someone to pop in and help you out with your setup.

Ryan Nieman

Yes, I'm glad to share the file. It is a generic file due to client confidentiality.

The slides are numbered 1 through 8 and should appear when called through a query string. Once I click the Home button and return to the Home slide, the javascript runs again and displays the same slide called by the string.

Thanks for the help!

Ashley Terwilliger-Pollard

Hi Beth,

Thanks for following up, and I'm sorry you haven't received any help with this yet! Javascript code and making edits to it isn't something our team here in ELH is equipped to help with. We leave those type of questions to the ELH community of users, many of whom are Javascript experts! 

You could also try starting a new discussion with the question about using Javascript in the title and share your file again too. That way you may get some more eyes on it. 

Ravindra Gardi

I am trying to achieve below things:

1.      I am trying to find out the JavaScript function(in storyline 3) which is used for JumpToSlide trigger.

2.      I am trying to jump to the particular slide from the outside of the articulate package

3.      Basically, we have our own LMS and TOC. If I clicked on the particulate item of TOC it should execute the jump to slide trigger and jump to particulate page of package.

4.      I have tried below suggested method:

https://community.articulate.com/discussions/articulate-storyline/jump-to-slide-in-storyline-from-outside-the-course

But problem with this method is that it has used the URL to get data and it is loading the module every time when clicked on TOC.

I don’t want to reload the module again and again.

if any help on this really helpful.