OOJS Quiz App with JQuery - Issue with quiz object

Question

I'm using JQuery when I'm making the OOJS Quiz App and am having issues with the instance of the quiz object resetting its currentQuestionIndex to 0 and correctAnswer count to 0 after the second time the submit button has been clicked. I know it has to do with the app.js reloading, but I am not sure how to fix this. Ideas? Here's the app.js file code:

var quiz = new Quiz("80s Television")

var quizTitleElem = document.getElementById("quiz-title");
// debugger;
quiz.renderHeader(quizTitleElem, quiz.title);


var question1 = new Question("You set off on a journey to the closest star to Earth. Where are you going?", ["Alpha Centauri ", "The sun ", "Proxima Centauri ","Sirius "], 1)
var question2 = new Question("In the Star Trek television series spacecraft used deuterium to fuel their warp drives. Deuterium is a form of what element?", ["Carbon","Oxygen","Nitrogen", "Hydrogen"], 3)
var question3 = new Question("What is the most widely-consumed addictive chemical substance in the world?", ["Caffeine ','Alcohol ','Marijuana ','Nicotine"], 0)
var question4 = new Question("It was the Age of Dinosaurs. During which era of geologic time did dinosaurs dominate the world?", ["Paleozoic", "Cenozoic", "Mesozoic", "Jurassic"], 2)

quiz.addQuestion(question1);
quiz.addQuestion(question2);
quiz.addQuestion(question3);
quiz.addQuestion(question4);

function displayQuestion(){
  formElem = document.getElementById("questionForm");

  quiz.renderChoices(formElem);

  questionParagraphElem = document.getElementById("question");

  quiz.renderQuestion(questionParagraphElem);
}


  displayQuestion();

  $("#submit").click(function(e){
    choice = $('input:radio[name=answer]:checked').val();
    debugger;
    quiz.checkChoice(choice);
    console.log(choice);

    quiz.nextQuestion();
    displayQuestion();
  });

function Quiz(title){
  this.title = title;
  this.questions = [];
  this.currentQuestionIndex = 0;
  this.correctQuestions = 0;
}

Quiz.prototype.addQuestion = function(question) {
  this.questions.push(question);
};

Quiz.prototype.startQuiz = function(){
  var currentQuestion = this.questions[this.currentQuestionIndex];
  currentQuestion.play();
}

Quiz.prototype.gameOver = function(){
  this.currentQuestionIndex = 0;
}

Quiz.prototype.nextQuestion = function(){
  var currentQuestion = this.questions[this.currentQuestionIndex]
  currentQuestion.over();

  this.currentQuestionIndex++;
}

Quiz.prototype.checkChoice = function(choice){
  var answer = this.questions[this.currentQuestionIndex].correctAnswer;
  debugger;
  if ( parseInt(choice) === answer) {
    this.correctQuestions++;
  };
}

Question.prototype.toHTML = function(){
  var htmlString = '<input type="radio" name="answer" value="0">';
  htmlString += this.choices[0];
  htmlString += '</br> <input type="radio" name="answer" value="1">';
  htmlString +=  this.choices[1];
  htmlString += '</br><input type="radio" name="answer" value="2">';
  htmlString += this.choices[2];
  htmlString += '</br><input type="radio" name="answer" value="3">';
  htmlString += this.choices[3];
  htmlString += '</br><button id="submit">Submit</button>';

  return htmlString;
};

Quiz.prototype.renderHeader = function(titleElem, title) {
  titleElem.innerHTML += title + " Trivia!"
};

Quiz.prototype.renderChoices = function(form){
  form.innerHTML = "";
  var currentQuestion = this.questions[this.currentQuestionIndex];
  debugger;
  form.innerHTML += currentQuestion.toHTML();
};

Quiz.prototype.renderQuestion= function(question){
  debugger;
  var currentQuestion = this.questions[this.currentQuestionIndex];
  question.innerHTML = currentQuestion.question;

};

Welcome to the Treehouse Community

Looking to learn something new?

Candice Haddad

Candice Haddad

OOJS Quiz App with JQuery - Issue with quiz object

Jon Kussmann

Jon Kussmann

Candice Haddad

Candice Haddad