AllAskew.jpg

Goto slide by slide name & goto slide containing shape with name in JavaScript

Steven Warwick
June 11, 2017

There are many cases where you have interactions that require jumping to another slide in the module.  The classic case is a “menu” slide with a number of options, where selecting an option transfers the learner to a particular lesson or detail slide.  This is also the basis of how adaptive learning is actually implemented.

Captivate provides you a way to jump to a particular slide using advanced actions.  Once you point to a particular slide, the advanced action jump will follow that slide even if it is moved or other slides are added before or after.  This is a well known capability that has been part of captivate for a long time.

There are some cases where having  the ability to perform these kinds of jumping functions in javascript is an advantage.

  •  It is sometimes easier to develop more complex branching decisions in javascript than directly in advanced actions
  •  There are cases where one wants to use a named object rather than a slide name to identify which slide to go to
  •  If slides are deleted, captivate removes the “jump to slide” action and replaces it with a “continue”  action.

Jump to slide by slide name

The following shows how to implement jump functions in Javascript.  First, we  define a Javascript function that gets added to the menu  slide,   and then each button is set up to call this function with the name of the slide that it wants to have the user jump to.

The javascript function is:

function gotoSlideNamed(aName) {
   var cpObjectList = Object.getOwnPropertyNames(cp.D);   // get all of the captivate-defined objects
   var findSlideLabels = function ( acc, val ) {   //  extract objects that have slide names
         if ( typeof cp.D[val].lb == "undefined" || cp.D[val].lb == "" ) return acc;
          acc[cp.D[val].lb ] = cp.D[val].from ;   // pick up the frame number
          return acc
          }
   var cpSlideObjects = cpObjectList.reduce ( findSlideLabels , {} )   // run the function on all of the captivate objects
   cpCmndGotoFrameAndResume = cpSlideObjects[aName];  // set the "next frame" variable to the start frame of the object
   return ;
}

This script  is  added to the menu slide using the “on entry execute Javascript” slide-level action.

Now, for each button,  you simply add the following “on success execute Javascript” action:

gotoSlideNamed("action_1")   // action_1 is just a made-up name,  you put the name of your desired slide there...

Now, any change in the module will not impact where you jump to.

It is common that once a learner completes a subsection, they are taken back to the menu.   In that case, we use the same function to make sure that the return jump is also robust.   Naming the menu slide “top_menu”   we add a “go back” button with the javascript:

gotoSlideNamed("top_menu")

Note that we tend not to use names with spaces in them just for safety.

Jump to slide by name of shape

There are some cases where you’d rather jump to a slide that happens to have an element on it with a specific name.   In this case,  there is another function we use that works for named elements rather than slide names:

function gotoSlideWithShapeName(aName) {
  var theSlide = cp.D[aName].apsn;    // get parent slide name
  cpCmndGotoFrameAndResume = cp.D[theSlide].from   // set next frame to the start frame number of that slide
  return
}

If you have a shape on the target slide with the id “section_3”  you can have a button that simply calls the javascript function:

gotoSlideWithShapeName("section_3")

With these two functions,  branching paths can be accomplished in Javascript, which can be an advantage in cases where you have complex branching scenarios.