Quiz App: кнопки в javascript не работают

Question

В настоящее время я работаю над викториной в формате множественного выбора. Однако, когда я нажимаю на кнопку, она просто не работает!

Вот полный код моей мини-викторина https://github.com/selvabalasingam/TypeQuiz/blob/master/js/app.js

Но я уверен, что проблема лежит между линиями 89-103 (Я вставил часть этого кода ниже)

$('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(); 
}); 

Может ли кто-нибудь сказать, в чем проблема? Есть ли способ исправить это?

Answer 1

Если вы посмотрите на консоль, вы увидите, что getTotalCorrect - undefined. Это потому, что getTotalCorrect is am Этот элемент привязан к области объекта quiz, но вы пытаетесь получить к нему доступ по всему миру.

Вы можете изменить это:

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

к:

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 

Похоже renderText бы неопределенно называть себя:

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

Вместо этого вызовите renderText при загрузке страницы, например:

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

renderText(quiz.getCurrentQuestion()); 

Answer 2

Изменить

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

в

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

Answer 3

Вы никогда не установите значение Question.answer. Это значение иногда является функцией, а иногда и объектом. Вы, вероятно, следует переименовать Question.answer (как функции Question.setAnswer.

from this gist

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

Это, как говорится, Question.answer/Question.setAnswer никогда не вызывается, вместо этого вы хотите, чтобы смотреть прямо на 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); 
    }