Quiz App: Buttons in javascript are not functioning

Question

Currently I'm working on a quiz in multiple choice format. However, when I click on a button, it simply doesn't work!

Here's the full code of my mini quiz https://github.com/selvabalasingam/TypeQuiz/blob/master/js/app.js

But I'm sure that the problem lies between lines 89-103 (I've pasted a portion of this code below)

$('button.choice').click(function(e) {
    var choice = $(e.target).text();
    var question = quiz.getCurrentQuestion(); 
    // check if the answer is right and update question number and score
    if (Question.answer == choice) {
        getTotalCorrect = $('.questionCount').text(getTotalCorrect+1); 
        getScore = $('.scorePercentage').text(getScore);
    }
    else {
        getTotalCorrect = $('.questionCount').text(getTotalCorrect+0); 
        getScore = $('.scorePercentage').text(getScore);
    }
    // then go to the next question
    getNextQuestion();
});

Can anyone tell what the problem is? Is there a way I could fix this?

Answer 1

Change

getTotalCorrect = $('.questionCount').text(getTotalCorrect+1);

to

getTotalCorrect = $('.questionCount').text(quiz.getTotalCorrect+1);

Answer 2

You never set your Question.answer value. This value is sometimes a function and sometimes an object. You should probably rename Question.answer (as a function to Question.setAnswer .

from this gist

Question.prototype = {
    setAnswer: function(choice) {
        this.answer = choice;
    },
}

That being said, Question.answer / Question.setAnswer is never called, instead you want to look directly at Question.correctChoice .

   if (Question.correctChoice == choice) {
        getTotalCorrect = $('.questionCount').text(getTotalCorrect+1); 
        getScore = $('.scorePercentage').text(getScore);
    }
    else {
        getTotalCorrect = $('.questionCount').text(getTotalCorrect+0); 
        getScore = $('.scorePercentage').text(getScore);
    }

Answer 3

If you take a look at the console, you'll see that getTotalCorrect is undefined . This is because getTotalCorrect is a method attached to the scope of the quiz object, but you're trying to access it globally.

You can change this:

if (Question.answer == choice) {
    getTotalCorrect = $('.questionCount').text(getTotalCorrect+1); 
    getScore = $('.scorePercentage').text(getScore);
}
else {
    getTotalCorrect = $('.questionCount').text(getTotalCorrect+0); 
    getScore = $('.scorePercentage').text(getScore);
}
getNextQuestion();

to:

question.answer = choice;    // pass the user's choice to the question object
$('.questionCount').text(quiz.getTotalCorrect());
$('.scorePercentage').text(quiz.getScore());
quiz.getNextQuestion();    // load the next question
renderText(quiz.getCurrentQuestion());    // render the new font

It looks like renderText would indefinitely call itself:

var renderText = function(question) {
    $('.text').css('font-family', question.correctChoice);
    renderText(quiz.getCurrentQuestion());   // infinite recursion call
};

Instead, call renderText when the page loads, like so:

var renderText = function(question) {
    $('.text').css('font-family', question.correctChoice);
};

renderText(quiz.getCurrentQuestion());