Highlighted

Using external js file to execute functions - find/get current slide numbers

Engaged ,
Oct 17, 2019

Copy link to clipboard

Copied

Hey there, I'm working on a Captivate project and using an external javascript file to control my navigation buttons. Besides not having to republish my project over and over again, I like using an external javascript file to animate my navigatoin buttons a bit with greensock.

 

I'm really rusty with javascript and people on the forums have helped me a lot in getting as far as I am - currently my external js file starts out with - 

var interfaceObj;
var eventEmitterObj;
window.addEventListener("moduleReadyEvent", function(evt){
interfaceObj = evt.Data;
eventEmitterObj = interfaceObj.getEventEmitter();
initializeEventListeners();
});

and then all my animations/functions are placed inside of the initializeEventListeners(); function. 

 

The issue I'm running into is I've written out functions for my back button (with an id of 'backBtn'), but that button doesn't show up until the second slide of the project - so when the project tries to read my javascript on the first page it throws errors at me since the 'backBtn' doesn't techincally exist yet (I'm guessing that's why?) 

 

My question is - how could I set it so that my functions for my back button don't try to execute or be read until I'm on the second slide of my project. I've tried a few different ways to get the slide numbers and put in an if statement about it - but so far all my attempts are failing. 

 

In general I think it would be really nice to be able to determine which slide/slides I want a function to be 'located' on (if that makes sense)?  But I'm not sure what is the best way to go about this. Any advice is appreciated a lot, thanks! 

 

Topics

Advanced

Views

286

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Using external js file to execute functions - find/get current slide numbers

Engaged ,
Oct 17, 2019

Copy link to clipboard

Copied

Hey there, I'm working on a Captivate project and using an external javascript file to control my navigation buttons. Besides not having to republish my project over and over again, I like using an external javascript file to animate my navigatoin buttons a bit with greensock.

 

I'm really rusty with javascript and people on the forums have helped me a lot in getting as far as I am - currently my external js file starts out with - 

var interfaceObj;
var eventEmitterObj;
window.addEventListener("moduleReadyEvent", function(evt){
interfaceObj = evt.Data;
eventEmitterObj = interfaceObj.getEventEmitter();
initializeEventListeners();
});

and then all my animations/functions are placed inside of the initializeEventListeners(); function. 

 

The issue I'm running into is I've written out functions for my back button (with an id of 'backBtn'), but that button doesn't show up until the second slide of the project - so when the project tries to read my javascript on the first page it throws errors at me since the 'backBtn' doesn't techincally exist yet (I'm guessing that's why?) 

 

My question is - how could I set it so that my functions for my back button don't try to execute or be read until I'm on the second slide of my project. I've tried a few different ways to get the slide numbers and put in an if statement about it - but so far all my attempts are failing. 

 

In general I think it would be really nice to be able to determine which slide/slides I want a function to be 'located' on (if that makes sense)?  But I'm not sure what is the best way to go about this. Any advice is appreciated a lot, thanks! 

 

Topics

Advanced

Views

287

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Engaged ,
Oct 18, 2019

Copy link to clipboard

Copied

If anyone else runs into this issue it is a pretty easy fix - I just had to do some more digging. 

I found that cpAPIInterface.gteVariableValue("cpInfoCurrentSlide") will return the current slide number so I put it into a variable called 'currSlide' and then made a function with an if statement - 

function secondPage(){

if(currSlide>=2) {

}

 

Then I add in my functions/animations for my back navigation button and then I call that function. 

I'm sure there's probably a better way of doing this, but for now it seems to be working!

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Oct 18, 2019

Copy link to clipboard

Copied

There is also the SLIDE_ENTER_EVENT that you can listen for. It fires every time you enter a slide.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Engaged ,
Oct 18, 2019

Copy link to clipboard

Copied

That's what I have my main function running through - 

function initializeEventListeners(){
	if(interfaceObj){
		if(eventEmitterObj){
			eventEmitterObj.addEventListener("CPAPI_SLIDEENTER", function(){

 but since it fires on the first slide, and my back button element doesn't exist until the second slide, when I had event listeners targeting my back button inside this main function, it would give errors in the console.log on the first slide and break my button functionality. (At least I think that's what was happening?) Once I put everything for the back button inside of my secondPage() function which has the if statement to see if we're on the second slide - it seems to be working. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Oct 22, 2019

Copy link to clipboard

Copied

What I do is put the back button on every slide. All my buttons are hidden (the eyeball in the properties).

 

Then I query what slide I am on on every slide and either hide or show buttons as needed.

Slide 1 hides the back button. The last slide hides the next button.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Engaged ,
Oct 22, 2019

Copy link to clipboard

Copied

That's a really good idea! I may have to try that, because my method was working when there were only two slides, however with multiple slides when I hit the back button, it is flying back all the way to the beginning (so far only have three slides). I think this is happening because when it goes back to the previous slide, it is still reading the mousedown even listener on the button? Though my function to go to previous slide isn't supposed to happen until the mouseup event listener (I'm using GSAP to animate the buttons scale on mousedown and mouseup). I may just have to give up on animating the buttons and just use a click function - but maybe doing something like you're saying would help. 

 

Is it something as simple as setting a variable for the current slide and then making a function to show/hide buttons if the project is on the slide you want? 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Engaged ,
Oct 22, 2019

Copy link to clipboard

Copied

Thank you for sharing this method! I'm still having issues with my back button jumping back two slides, but I think that may be a GSAP issue or something in my functions isn't working properly. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Nov 01, 2019

Copy link to clipboard

Copied

There is a JS variable created by Captivate, cpInfoCurrentSlide, which tells you what slide you are on.

 

There are a ton of variables and functions you can access. You can do some Googling, or...

Publish a lesson, open it in Chrome and then open the developer tools. start typing "cp" in the console and you will see a huge list of things to play with!

Screen Shot 2019-11-01 at 3.12.38 PM.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Captivate User Guide
New Group