JavaScript

SAMUEL LAWRENCE
PRO
SAMUEL LAWRENCE
Pro Student 8,447 Points

Restart Button for the Awesome Quiz code challenge

Hi I wanted to add a restart button to the Awesome Quiz app that would take you back to the first question of the quiz.

Here's my code so far

var QuizUI = {
  displayNext: function() {
    if(quiz.hasEnded()) {
      this.displayScore();
    } else {
      this.displayQuestion();
      this.displayChoices();
      this.displayProgress();

    }
  },
  displayQuestion: function() {
    this.populateIdWithHTML("question", quiz.getCurrentQuestion().text);
  },
  displayChoices: function() {
    var choices = quiz.getCurrentQuestion().choices;

    for(var i = 0; i < choices.length; i++) {
      this.populateIdWithHTML("choice" + i, choices[i]);
      this.guessHandler("guess" + i, choices[i]);
    }
  },
  displayScore: function(id) {
    var gameOverHTML = "<h1>Game Over</h1>";
    gameOverHTML += "<h2> Your Score is: " + quiz.score + "</h2>";
    gameOverHTML += "<p> Your got " + quiz.score + " out of " + quiz.questions.length + " questions correct." + "</h2>";
    if (quiz.score == quiz.questions.length || quiz.score >= 5) {
      gameOverHTML += "<h2> It's nice to see you've been paying attention. </h2>";
    } else if (quiz.score <= 4){
      gameOverHTML += "<h2> You don't know me very well! </h2>";
    }
    gameOverHTML += "<button id='restart' class='btn--default'> Restart Quiz. </button>";
    this.populateIdWithHTML("quiz", gameOverHTML);
    this.restartHandler();
  },
  populateIdWithHTML: function(id, text) {
    var element = document.getElementById(id);
    element.innerHTML = text;
  },
  guessHandler: function(id, guess) {
    var button = document.getElementById(id);
    button.onclick = function() {
      quiz.guess(guess);
      QuizUI.displayNext();
    }
  },
  restartHandler: function() {
    var restartButton = document.getElementById("restart");
    restartButton.onclick = function() {
      quiz.restart();
      QuizUI.displayQuestion();
    }
  },
  displayProgress: function() {
    var currenQuestionNumber = quiz.currentQuestionIndex + 1;
    this.populateIdWithHTML("progress", "Question " + currenQuestionNumber + " of " + quiz.questions.length);
  }
}

I'm gotten the button to display but I can't seem to figure out how to get it to display to the first question.

function Quiz(questions) {
  this.score = 0;
  this.questions = questions;
  this.currentQuestionIndex = 0;
}

Quiz.prototype.guess = function(answer) {
  if(this.getCurrentQuestion().isCorrectAnswer(answer)) {
    this.score++;
  }
  this.currentQuestionIndex++;
};

Quiz.prototype.getCurrentQuestion = function() {
  return this.questions[this.currentQuestionIndex];
};

Quiz.prototype.hasEnded = function() {
  return this.currentQuestionIndex >= this.questions.length;
};

Quiz.prototype.restart = function() {
  if(this.currentQuestionIndex >= this.questions.length) {
    this.currentQuestionIndex = 0;
  }
  return this.currentQuestionIndex;
}

In the quiz.js file I created a restart object prototype that sets the currentQuestionIndex back to 0 and then in the quiz-ui.js file I created an onclick on the new button element I created but when I click it I'm getting a TypeError: null is not an object (evaluating 'element.innerHTML = text')

Can anyone help me figure this out? Thanks

Steven Parker Jennifer Nordell

Steven Parker
Steven Parker
142,115 Points

Can you post a workspace snapshot so I can try it?

SAMUEL LAWRENCE
SAMUEL LAWRENCE
Pro Student 8,447 Points

Hi Steven Parker and Jennifer Nordell here is a snapshot of my workspace. I'm trying to get the restart button I created to restart the quiz. I spent days trying to figure it out. Nothing. please help.

Workspace https://w.trhou.se/aoyr9ly9sn

I have another question but I will post a new question.

1 Answer

Steven Parker
Steven Parker
142,115 Points

When you display each question, the "displayChoices" function calls "guessHandler" to set up a click handler to respond to clicks on the button.

But when you display the restart button, it doesn't look like a click handler is ever set up. You'll need one to respond to the user clicking on it.

But you'll also need to make some changes to how the game works, as right now when it displays the final screen it removes some of the resources necessary to play (such as the "choice" elements). So you'll either need to preserve those or re-create them to restart the game.