JavaScript problem with if/else statements

[anton9800]

Hello!

I have a quiz page.  The goal is to hide the custom Next Button when entering the page and enabling it when the quiz is either passed or failed for the last time.  Then if the user navigates back to this same quiz page, the next button should already be displayed.  I am trying to do this by assigning a value of 0 or 1 to a variable, and triggering an if statement if the value checks out.

When entering the page I run the following code:

var slideRef = window.cpAPIInterface.getCurrentSlideIndex();                        //gets current page number

cp.hide('next_button_KBQ_' + slideRef);                                                        //hides the Next button

var isTaken = window.cpAPIInterface.getVariableValue("L4_KBQ1_taken");   //assigns a variable value (variable set in Captivate with initial value of 0)

console.log("isTaken value is " + isTaken);

if (isTaken = 1) {                                                                                             //if this quiz page was passed, Next button is displayed

    cp.show('next_button_KBQ_'+slideRef);

    console.log("Enabling Next Button");

} else if (isTaken = 0) {

    cp.hide('next_button_KBQ_' + slideRef);                                                    //this shouldn't be unnecessary, but it's here for testing purposes

    console.log("Next Button should be disabled");

}

on Success and on Last Attempt part of the quiz I run the following code:

var slideRef = window.cpAPIInterface.getCurrentSlideIndex();

window.cpAPIInterface.setVariableValue("L4_KBQ1_taken", 1);                   // assign the variable with a value of 1

cp.show('next_button_KBQ_'+slideRef);

When I launch the course, I get the following console output:

isTaken value is 0

Enabling Next Button

So the button is displayed from the start.  If I pass the quiz and navigate back to the page, the console reads

isTaken value is 1

Enabling Next Button

So the variable is changing, Captivate reads the value of the variable just fine, but it skips the conditions and shows the button anyways from the very beginning.  What is going on here?

Thank you!

[Lilybiri]

I will leave this to a JS guru, but personally would do this with an

advanced action and using the design of score slides. Sorry for this

comment, I like to have simple solutions.

[anton9800]

Thank you for your answer!  The reason I wanted to do this with JavaScript is because I will have a lot of these screens and I was hoping to cover them all with this setup.

[TLCMediaDesign · Accepted solution]

You need to use == when comparing, not =. Also, you don't need the else if, just an else since there are only 2 options.

if (isTaken == 1) {                                                                                              //if this quiz page was passed, Next button is displayed

    cp.show('next_button_KBQ_'+slideRef);

    console.log("Enabling Next Button");

} else {

    cp.hide('next_button_KBQ_' + slideRef);                                                    //this shouldn't be unnecessary, but it's here for testing purposes

    console.log("Next Button should be disabled");

}

[anton9800]

Thank you, as always!  Completely overlooked the = vs == and that's all it was! 

I will work your other solution in as it is a lot less work, and I do have a lot of these quiz pages.

Thank you!

[Lilybiri]

What about a shared action?

[anton9800]

It would definitely work, I was just trying to avoid manually changing the variables on all those slides.  With the JS code, all I'd need to do is set initial variables with a value of 0, and call upon functions on the quiz pages.  TLCMediaDesign took it 10 steps further and offered an even simpler solution that doesnt require me to paste a lot of code on each of the quiz slides.

[atone_x]

Hi,

I took a look at your code. To hide the next button, you used the following:

cp.hide('next_button_KBQ_' + slideRef);              

You shouldn't need the slideRef variable to reference the slide number because the scope of your function resides in the page that triggered the JavaScript.

RD

[TLCMediaDesign]

There is a much easier way to do this. Put this script in the head of the html or include it in a separate js file. On success of attemps are reached, just execute JavaScript showQuizNext(). The script automatically checks the value of your variable onSlideEnter and shows the next button. The showQuizNext function shows the button and sets the variable based on the current slide.

var interfaceObj, eventEmitterObj;

window.addEventListener( 'moduleReadyEvent', function ( e )
{
interfaceObj = e.Data;
eventEmitterObj = interfaceObj.getEventEmitter();
initializeEventListeners();
});

function initializeEventListeners()
{
if ( interfaceObj )
{
     if ( eventEmitterObj )
  {
         eventEmitterObj.addEventListener( 'CPAPI_SLIDEENTER', function ( e )
   {        
    if ( 'L4_KBQ' + window.cpInfoCurrentSlide + '_taken' == 1 )
    {
     cp.show( 'next_button_KBQ_' + window.cpInfoCurrentSlide )
    }  
    
            });
  }
}
}

function showQuizNext()
{
cp.show( 'next_button_KBQ_' + window.cpInfoCurrentSlide );
'L4_KBQ' + window.cpInfoCurrentSlide + '_taken' = 1;
}