Skip to main content
A
anton9800
Inspiring
September 16, 2016
Answered

JavaScript problem with if/else statements

  • September 16, 2016
  • 3 replies
  • 1648 views

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!

This topic has been closed for replies.
Correct answer TLCMediaDesign

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

}

3 replies

TLCMediaDesign
TLCMediaDesign
Inspiring
September 17, 2016

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

    atone_x
    atone_x
    Participating Frequently
    September 17, 2016

    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

     

    Lilybiri
    Lilybiri
    Legend
    September 16, 2016

    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.

    A
    anton9800Author
    Inspiring
    September 17, 2016

    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
    TLCMediaDesignCorrect answer
    Inspiring
    September 17, 2016

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

    }

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