How To: Jump to a Specific Slide in a Separate Course

I get a lot of questions on how to link to a specific slide in another external course.  Today I’ll show you how that can be accomplished.

Scenario:

Suppose we have a bunch individually published Captivate tutorials on how to use Microsoft Office.  Each tutorial has three slides of intro content with the fourth slide as a how-to video.  We also have a completely separate Help system and we’d like to link from the help system, directly to the training video on slide four.

Step 1

The first step is setting up the button that will make the jump.  The URL behind the button needs to send the slide number to the Captivate course.  To do that, we send a URL parameter. It should look something like this:

The “?” in the URL is telling the browser that whatever comes after this question mark is a parameter.  A parameter is like a variable that holds a piece of information.  In our case, the parameter’s name is “slide” and it equals 4. 

Step 2

The second step is for our Captivate Course to capture this parameter, and jump to the requested slide.  We can do this by executing some JavaScript on Slide Entry of the first slide.

GetSlideParam();

function GetSlideParam(){
    if(window.location.href.indexOf('?slide=') != -1) { 
        var startIndex = window.location.href.indexOf('?slide=' ) + 7;
        var URL = window.location.href.toString();
        var slideNumber = URL.substring(startIndex);
      
        if(slideNumber != '' || slideNumber != null){
            setTimeout(function(){NavigateToSlide(slideNumber);}, 200);
        }
    }
}

function NavigateToSlide(requestedSlide){
    var cpObj = document.Captivate;
    cpObj.cpEISetValue('cpCmndGotoSlide',requestedSlide - 1); 
    cpObj.cpEISetValue('rdcmndResume',1);
}

Code Explanation

The first line executes the GetSlideParam() function.  This function checks the incoming URL to see if it contains our “?slide=” parameter.  If it does, it then captures the slideNumber using the JavaScript substring method.  On line 9, we check to make sure we have something in our slideNumber variable before moving forward.  If so, we execute our NavigateToSlide method using a setTimeout.  The setTimeout() method executes a function after the specified amount of time has elapsed.  THIS IS THE KEY TO MAKING THIS WHOLE THING WORK!!!  If you don’t use setTimeout(), you will end up with a grey Captivate screen.  Why?  A lot is happening in the first slide.  Captivate is dynamically creating all of the other slides.  When our JavaScript is executed at the entry of the first slide, slide 4 DOES NOT EXIST yet.  So we wait a set amount of time before navigating.  In our case, we waited 200 milliseconds (1 second = 1000 milliseconds).  If you’re jumping to slide 85, you may want to wait a little longer so that slide 85 is created before you jump to it.  You may have to edit the milliseconds to get the desired results.

Live Demo

(Note the “?slide=4“ in the URL)

http://captivatedev.com/demo/Cp5/JumpToSpecificSlide/JumpToSpecificSlide.htm?slide=4

Download Demo

http://captivatedev.com/demo/Cp5/JumpToSpecificSlide/JumpToSpecificSlide.zip