Highlighted

How to disable custom next button on specific slide number - removeEventListener not working??

Engaged ,
Dec 03, 2019

Copy link to clipboard

Copied

I've created custom nagivation next/back buttons for my Captivate project by inserting .png's of my buttons, then attaching a javascript file that gives them the funtions of "window.cpAPIInterface.next();" and "window.cpAPIInterface.previous();"

 

All I'd like to do is 'disable' my next button on a certain slide (until a specific condition is met) - I'm at a loss as to why removeEventListener isn't working? I have something that looks like this - 

 

var currSlide = cpAPIInterface.getVariableValue("cpInfoCurrentSlide"); 
var nextBtn = document.getElementById("nextBtnc");

function runByPages(){
if(currSlide==27){
window.nextBtn.removeEventListener("click", nextSlide);
} else {
window.nextBtn.addEventListener("click", nextSlide);
}

runByPages(); 
function nextSlide(){
window.cpAPIInterface.next(); 
}

All of this is placed inside of a function which has an event listener for "CPAPI_SLIDEENTER", so I believe it should be running it each time the user moves to a new slide. 

For some reason, when I hit slide 27, my next button still goes through to the next slide when clicked. At one point I added an alert, to make sure it was detecting when the user was on slide 27, and it seemed to be detecting that just fine. 

 

I've looked into doing this with advanced actions and image buttons inside of Captivate, but I'm not seeing an option to set a button's display time to "for rest of project" and I really don't want to copy and paste my next button onto every slide. 

 

Any advice is greatly appreciated. 

Topics

Advanced, Advanced actions

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

How to disable custom next button on specific slide number - removeEventListener not working??

Engaged ,
Dec 03, 2019

Copy link to clipboard

Copied

I've created custom nagivation next/back buttons for my Captivate project by inserting .png's of my buttons, then attaching a javascript file that gives them the funtions of "window.cpAPIInterface.next();" and "window.cpAPIInterface.previous();"

 

All I'd like to do is 'disable' my next button on a certain slide (until a specific condition is met) - I'm at a loss as to why removeEventListener isn't working? I have something that looks like this - 

 

var currSlide = cpAPIInterface.getVariableValue("cpInfoCurrentSlide"); 
var nextBtn = document.getElementById("nextBtnc");

function runByPages(){
if(currSlide==27){
window.nextBtn.removeEventListener("click", nextSlide);
} else {
window.nextBtn.addEventListener("click", nextSlide);
}

runByPages(); 
function nextSlide(){
window.cpAPIInterface.next(); 
}

All of this is placed inside of a function which has an event listener for "CPAPI_SLIDEENTER", so I believe it should be running it each time the user moves to a new slide. 

For some reason, when I hit slide 27, my next button still goes through to the next slide when clicked. At one point I added an alert, to make sure it was detecting when the user was on slide 27, and it seemed to be detecting that just fine. 

 

I've looked into doing this with advanced actions and image buttons inside of Captivate, but I'm not seeing an option to set a button's display time to "for rest of project" and I really don't want to copy and paste my next button onto every slide. 

 

Any advice is greatly appreciated. 

Topics

Advanced, Advanced actions

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
Most Valuable Participant ,
Dec 03, 2019

Copy link to clipboard

Copied

Cannot help you with the JS, but want to react to your last sentence. Image buttons are 'old', expect them to disappear soon. Since Captivate 6, quite a while ago, I only use Shape buttons, which can be filled with images. They can be displayed for the rest of the project, they can be added to master slides, to question slides and score slide. Missed that?

 

Captivate 11.5, most recent version, allows moreover to use bitmap images and SVGs directly as buttons, with the same features as shape buttons. They just lack the possibility to be defined in an object style.

 

Have a look at:

http://blog.lilybiri.com/overvew-6-button-types

 

As a JS expert you will probably not be interested by the easy shared action which you can use to hide/show custom navigation buttons on slides:

http://blog.lilybiri.com/shared-or-advanced-use-case-hide-slash-show-custom-navigation

 

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 ,
Dec 03, 2019

Copy link to clipboard

Copied

Thanks so much! I'm by no means a JS expert, I didn't realize shape buttons could be filled with images - I'll take a look at that. Might be the way I need to go. 

 

Thank you!

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...
Most Valuable Participant ,
Dec 03, 2019

Copy link to clipboard

Copied

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...
Adobe Community Professional ,
Dec 03, 2019

Copy link to clipboard

Copied

That's because you didn't add the event listener, Captivate did.

 

Use:

cp.disable('nextBtn')

cp.enable('nextBtn')

 

You don't need to add the "c" to the end of the element name.

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 ,
Dec 03, 2019

Copy link to clipboard

Copied

Thank you! I've tried using disable/enable like you have, but that doesn't seem to be working. I didn't apply any actions to my "button" in my Captivate project, in my Captivate project it is simply an image with the ID of "nextBtn". If I get rid of my nextSlide(); function and don't apply it to my next "button", the button doesn't do anything. I apologize if that wasn't clear in my original post.

 

Though I may go the route of having my "buttons" be actual proper buttons in captivate and then use cp.disable as you have listed. I can't seem to get it working the way I want entirely with my external javascript file unforunately. 

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...
Advocate ,
Dec 03, 2019

Copy link to clipboard

Copied

Sorry - didn't mean to double post the concept - this post was not up yet when I went into edit mode.

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 ,
Dec 03, 2019

Copy link to clipboard

Copied

No worries - I think I'm going to go the route of using Captivate buttons, thanks to Lilybiri for pointing out shape buttons to me, then will try the disable/enable in my javascript file!

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...
Advocate ,
Dec 03, 2019

Copy link to clipboard

Copied

What if you tried the following...

If the name of the button on slide 27 is  "nextBtn"...

You can set the onSuccess action of the button to go to the next slide.

 

Otherwise - your code above appears to be missing a closing curly brace for the  runByPages()  function.

 

if(currSlide==27){
cp.disable("nextBtn");
}
else {
cp.enable("nextBtn");
}

 

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 ,
Dec 03, 2019

Copy link to clipboard

Copied

You could put all this script in the button's success action > Execute Javascript.

var currSlide = cpAPIInterface.getVariableValue("cpInfoCurrentSlide");
if(currSlide==27){
   return;
} else {
   window.cpAPIInterface.next(); 
}

You can do the same logic with Captivate's advanced actions. In either case make sure the "Continue Playing the Project" checkbox is unchecked.

The option to display for the rest of the slide is under the Timing tab.

 Screen Shot 2019-12-03 at 3.57.25 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