Deconstructing A Dynamic Quiz (Part III)

THE JAVASCRIPT (CONTINUED)

$('#next').on('click', function(event) {
    event.preventDefault();
    
    if($("#quiz").is(':animated')) {
        return false;
    }    
    choose();
    
    if(isNaN(selections[questionCounter])) {
        alert('Please make a selection!');
    }
    else {
        questionCounter++;
        displayNext();
    }
});

A click handler is created for the ‘next’ button. When clicked, a function is ran. The first thing it does is calls the preventDefault() method, which stops the default action of an element from occuring (in the case of a blank anchor tag, jumping to the top of the page).

It then asks if the ‘quiz’ element is currently being animated. If it is, then the click action returns false, and prevents the rest of the click function from happening.

If the ‘quiz’ element isn’t being animated, it then finds the value of the input the user has checked, and adds it to the selection array based on the number the questionCounter is at.

A final if / else statement is asked. If the selection array based on the question the user is on is not a number (if the user hasn’t made a selection, it would have a value of ‘null’), then the browser will alert the user to ‘Please make a selection!’.

Else, if the quiz isn’t in animation, there is a number in the selection array for the current questionCounter, and the ‘next’ button element has been clicked, then the questionCounter’s value is increased by one (moving to the next object in the questions variable) and the displayNext() function is executed again.

---

$('#prev').on('click', function(event) {
    event.preventDefault();

    if($("#quiz").is(':animated')) {
        return false;
    }
    questionCounter--;
    displayNext();
});

A click handler is created for the ‘prev’ button element. Much like the ‘next’ button element, a preventDefault() method and if statement asking if the ‘quiz’ element is currently being animated is added for the same reasons as above.

The only difference with this handler compared to the ‘next’ click handler, besides adding a value to the selection array and verify that an option was selected, is when the ‘prev’ button element is clicked, the questionCounter is decreased in value by one (goes back to the previous questions object) before running the displayNext() function again.

---

$('#start').on('click', function(event) {
    event.preventDefault();

    if($("#quiz").is(':animated')) {
        return false;
    }
    questionCounter = 0;
    selections = [];
    displayNext();
    $('#start').fadeOut();
});

The first couple lines of code for the ‘start’ element click handler follows the same formula as the ‘next’ and ‘prev’ elements, preventDefault() method and stopping the rest of the function from execution if the ‘quiz’ element is currently in animation.

It then resets the variables questionCounter and selections back to zero and a blank array respectively, executes the displayNext() function, and fades out the ‘start’ button element.

---

function displayScore() {
    var score = $('<p>',{id: 'question'});
    var numCorrect = 0;

    for (var i = 0; i < selections.length; i++) {
        if (selections[i] === questions[i].correctAnswer) {
            numCorrect++;
        }
    }
    score.append('You got ' + numCorrect + ' questions out of ' + questions.length + ' right!!!');
    return score;
};

The last function to write is the displayScore() function. The score variable is set to create a paragraph tag with an ID of ‘question’, and the numCorrect variable is set to the number 0.

A loop is created. It starts from zero, and increases by one until it reaches the total number of selections created within that variables array.

It then asks, based on the number position in the for loop, if the selection number is exactly equalled to the correctAnswer number in the questions object. If it is, the numCorrect variable is increased by one. If not, nothing happens.

When the for loop finishes, the score variable gets appended with a string that includes the new numCorrect value and the total number of questions objects in the questions variable.

The score variable and all appended variables and strings compiled and returned when the creationQuestionElement function is ran. The result may look something like this:

<p>You got 3 questions out of 5 right!!!</p>

---

displayNext();

Finally, executing the displayNext() function is what starts the entire quiz.