Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus 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
229,695 Points

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

SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus 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
229,695 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.