GoTo Slide by Slide Label

[Gaanf]

Hi there,

Anybody knows of a way to jump to a specific slide by specifying the slide label rather then the slide number; maybe some hidden/undocumented method similar to cpCmndGotoSlideByUIDAndResume ?

(No, replacing UID by Label in the above doesn't work )

[Lilybiri]

I always use Jump to slide with slide labels, never with nubmers. But of course I only use shared or advanced actions for such simple navigations.  Sorry....

[Gaanf]

Thanks, Lilibyri.

Yes, I know that Captivate presents number as well as labels in the selectors when using simple or advanced actions. I was more looking for something that can be used in a script.

[Lilybiri]

Advanced actions and shared actions are scripts, since they become JS when published. It is a pity that we cannot 'read(' the converted scripts. You know my point of view: why use JS when it can be done with those actions? You could maybe create an array to link the slide numbers to the slide labels? It looks like advanced actions have a way to link both.

[Gaanf]

In my work case at hand I wanted js, because I wanted to populate the slide labels in the GoTo command dynamically from a varaiable value. I don't think AAs or SAs can do that, can they?

Nevermind, I can work around...

[TLCMediaDesign · Accepted solution]

You can do it but in my experience you need external JavaScript to safely execute for loops.

You can get all of the labels, parse through them and jump.

You can use this function in an external js file:

function jumpSlideLabel(which)

{

     var idx = 0;

     var getSlides = cp.model.data.project_main.slides.split(",");

     for ( var i = 0; I < getSlides.length' I++ )

     {

          if ( cp.model.data[getSlides].lb === which )

          {

               window.cpCmndGotoSlide = i;

               window.cpCmndResume = 1;

               break;

          }

}

In Captivate, call the function with the argument as the label:

jumpSlideLabel("Slide label");

[Gaanf]

Thanks a lot, I'll give that a try.

[chrismay_at_delta]

I think there was a typo on one line:

var getSlides = cp.model.data.project_main.slides.spli(",");

should be:

var getSlides = cp.model.data.project_main.slides.split(",");

[TLCMediaDesign]

Thanks, fixed it. I have to type everything, they disabled copy and paste on our office computers on web pages. Horrible to type long pieces of code.!

[KeelyM]

hi TLC,

I'm currently trying to incorporate this code you wrote into a captivate project. I'm using Captivate 2017, but I'm building a web object separately (an html file, css, and js file) then zipping them up and adding them into captivate as an html animation. It seems I'm having an issue getting the JS file to communicate with Captivate. I tried changing it slightly to,

function jumpSlideLabel(which){

var idx = 0;

var getSlides = cp.model.data.project_main.slides.split(",");

for (var i=0; i<getSlides.length; i++) {

if (cp.model.data[getSlides].lb===which) {

window.parent.window.cpCmndGotoSlide = i;

window.parent.window.cpCmndResume = 1;

break;

}

}

}

Hoping that the window.parent.window would help it communicate w/ Captivate. However, when I publish the project and try to click my buttons to take me to another slide, it does not change slides. I'm receiving an error in the console log that 'cp' is not defined in my JS file.

I'm doing things slightly differently, where I'm calling the function inside my external JS file too. In my external HTML I have a div with the id of "#oneSlideOne" and I gave it a variable of "oneSlideOne" to simplify things. This is how I'm calling the function (note there is some code for GSAP animation in there)

function goToOne(){

jumpSlideLabel("SlideOne");

tl.reverse();

}

oneSlideOne.addEventListener("mousedown",goToOne);

Any ideas what could be causing this issue?

Advice is much appreciated, thanks!

[TLCMediaDesign]

It's because of the code cp.model.data is in the parent also:

function jumpSlideLabel(which){

var idx = 0;

var getSlides = window.parent.cp.model.data.project_main.slides.split(",");

for (var i=0; i<getSlides.length; i++) {

if (window.parent.cp.model.data[getSlides].lb===which) {

window.parent.window.cpCmndGotoSlide = i;

window.parent.window.cpCmndResume = 1;

break;

}

}

}

[KeelyM]

Thank you! I should have caught that.

I'm having another issue with my html zip file, I wonder if you've had this happen before, I have the html animation set to display for 'rest of project', however, it will randomly disappear completely. Sometimes on slide 3, sometimes on slide 4, sometimes on slide 2. I'm really confused since it's quite random.

I have another web object on my slides that is also set to display for 'rest of project', but it's an .oam file out of Animate that's only some 300 by 200 pixels wide. My .zip html file is the full 1920x1080 covering the entire screen. I'm not sure if this is a Z depth issue?  I have 'place on top' checked for both objects.

[TLCMediaDesign]

I've never used 2 before, but make sure they are at the top of the timeline on the first slide. You can layer an iframe on top of another iframe, but you may have to add some CSS.

[KeelyM]

I'm unfamiliar with what constitutes an iFrame, are all web objects basically iFrames?

[TLCMediaDesign]

Yes, all web objects are put into iframes, which is basically a new window on top of the current window.

[KeelyM]

I'm thinking it must be some sort of Z depth issue. I just tried resizing my html .zip to just be about 300 pixels wide (not covering up my other web object) and it's now properly displaying and remaining interactive for the entire module. Guess I just need to be wary if I have multiple web objects that they don't cover each other up - unless you have any advice on how that could work? (My big 1920x1080 zip file only has content on a small part of it, the rest of the screen was empty/alpha channel).

I'm going to try and find a way to get all my web object interactions working in ONE html/css/js zip file. Going to be difficult to find out how to only have certain objects appear on certain slides, but I think if I can get that done maybe it will work.

Anyways, thank you very much for your help on these forums!!

[KeelyM]

I'm not well-versed enough in code yet to understand how all this works, but I thought I'd share another piece of code that I found on a forum (did not write it myself) that has worked well for me so far. It should be noted, I've never put this code directly into Captivate, I use it in an Animate project then export as an .oam file and add that to captivate.

function gotoSlideNamed(aName) {

   var cpObjectList = Object.getOwnPropertyNames(window.parent.window.cp.D); 

   var findSlideLabels = function ( acc, val ) {

         if ( typeof window.parent.window.cp.D[val].lb == "undefined" || window.parent.window.cp.D[val].lb == "" ) return acc;

          acc[window.parent.window.cp.D[val].lb ] = window.parent.window.cp.D[val].from ;

          return acc

          }

   var cpSlideObjects = cpObjectList.reduce ( findSlideLabels , {} )

   window.parent.window.cpCmndGotoFrameAndResume = cpSlideObjects[aName];

   return ;

}

then just call

gotoSlideNamed("YourSlideName");

TLC's looks shorter though, I may try that out as well and see how it goes!

[TLCMediaDesign]

This code only would work if the code is running in an iFrame.

[jorgenf50250910]

Hi TLCMediaDesign, I'm very concerned upon reading this:

You can do it but in my experience you need external JavaScript to safely execute for loops.

I'm in the process of setting up a course structure dependent on JavaScript to function correctly. The customer do not wish to use external js. Does this mean I cannot count on my for loops running correctly from the script window and are there other major pitfalls as basic as this using the script window?

Hope for a quick response! Thanks Jorgen

[Gaanf]

I think TLCMediaDesign refers to the issue that certain characters are not properly escaped when entered into the Script Window inside Advanced Actions (the Script Window on simple actions doesn't seem to suffer from that). Among those problematic charcters is '<', which is frequently used when writing a loop; e.g.:

for (i = 0; i < 10; i++) {
  [do something];
}

In case you want or need to stay clear of external JavaScript for whatever reason, here's a work-around:

Write out the code in an external editor first, then replace '<' by...

'&lt;' (HTML Number for '<') or
'&#60;' (HTML Name for '<')

...before copying the code over to the Script Window in an Advanced Action. On saving the Script Window, those strings will be properly escaped and converted to the '<' character. Note that you'll have to cover all '<' character occurrences in the code at once in every copy and past action. You can't just edit/add one of several occurrences that way, so it's probably good advise to always copy the entire code to a blank Script Window in one shot.
You can also type the HTML Number/Name strings directly into the Script Window, but again you'd have to make sure to enter all occurrences in one shot.

See also https://forums.adobe.com/message/10709838 

[jorgenf50250910]

Hi and thanks a lot for your reply, I'm only using the script window that is avaliable On Enter: Execute Javascript > Script Window. Everything seems to work fine on different devices etc, but got concerned when I read that loops should be done in external Javascript and the script window might not be 100% reliable. 

So I guess I don't have to worry then as long as I stay away from the one inside advanced actions, phew! 😄

Cheers Jorgen

[Lilybiri]

If you use the On Enter event with the 'Execute JavaScript' from the dropdown list, you do use a 'simple action', which is the term used by Gaanf. 

[TLCMediaDesign]

If I remeber correctly, loops execute correctly when using Execute JavaScript from a simple action, it's when you execute JavaScript in an Advanced Action is when the "<" sign breaks the code.