Skip to main content
K
KeelyM
Inspiring
December 3, 2019
Question

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

  • December 3, 2019
  • 4 replies
  • 845 views

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. 

This topic has been closed for replies.

4 replies

chrismay_at_delta17095116
chrismay_at_delta17095116
Inspiring
December 3, 2019

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.

 

    Stagprime2687219
    Stagprime2687219
    Legend
    December 3, 2019

    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");
}

     

      TLCMediaDesign
      TLCMediaDesign
      Inspiring
      December 3, 2019

      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.

        K
        KeelyMAuthor
        Inspiring
        December 3, 2019

        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. 

        Lilybiri
        Lilybiri
        Legend
        December 3, 2019

        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

         

          K
          KeelyMAuthor
          Inspiring
          December 3, 2019

          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!

          Lilybiri
          Lilybiri
          Legend
          December 3, 2019

          Look at:

          http://blog.lilybiri.com/turn-an-image-into-a-button

            Terms & ConditionsAccessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices