Still not quite there with my onclick function with if statement in the quiz challenge

Question

Hi,

Still struggling to get this code to work. Im assuming the problem is around the onclick function as the second question is loading up but will not move on from there. Possibly still getting the if statement wrong but Im not sure.

Ive now watched the tutors version to get some ideas on how I might be able to fix but cant seem to find a solution.

Thank you for any help in advance.

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Amazing Quiz</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="grid">
    <div id="quiz" class="centered grid__col--8">
        <h1>Football Quiz</h1>

        <h2 id="question" class="headline-secondary--grouped"></h2>

        <p id="choice0"></p>
        <button id="guess0" class="btn--default">Select Answer</button>

        <p id="choice1"></p>
        <button id="guess1" class="btn--default">Select Answer</button>

        <footer>
            <p id="progress">Question x of y</p>
        </footer>
    </div>
</div>

<script src="quiz.js"></script>
<script src="question.js"></script>
<script src="app.js"></script>
<script src="quiz_ui.js"></script>
</body>
</html>

quiz.js

function Quiz() {
  this.questions = [];
  this.questionsAnswered = 0;
  this.correctAnswers = 0;
}

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

Quiz.prototype.renderInQuestion = function(element) {
  element.innerHTML = "";
  element.innerHTML += this.questions[this.questionsAnswered].askToHTML();
}

Quiz.prototype.renderInCorrect = function(element) {
  element.innerHTML = "";
  element.innerHTML += this.questions[this.questionsAnswered].correctToHTML();
}

Quiz.prototype.renderInWrong = function(element) {
  element.innerHTML = "";
  element.innerHTML += this.questions[this.questionsAnswered].wrongToHTML();
}

Quiz.prototype.nextQuestion = function(variable) {
  variable.renderInQuestion(questionElement);
  variable.renderInCorrect(choice0Element);
  variable.renderInWrong(choice1Element);  
}

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

Quiz.prototype.finalHTML = function() {
  var finalHTML = '<h2>';
  finalHTML += 'You got ';
  finalHTML += quiz.correctAnswers;
  finalHTML += ' right</h2>';
  return finalHTML;

  questionElement.innerHTML = finalHTML;
  choice0Element.innerHTML = "";
  choice1Element.innerHTML = "";
}

app.js

var quiz = new Quiz();

var questionOne = new Question("Who is the current Arsenal F.C manager?", "Arsene Wenger", "Alex Ferguson");

var questionTwo = new Question("Who is the current Man UTD F.C manager?", "Jose Mourinho", "Alex Ferguson");

quiz.add(questionOne);
quiz.add(questionTwo);

var questionElement = document.getElementById("question");
var choice0Element = document.getElementById("choice0");
var choice1Element = document.getElementById("choice1");

quiz.renderInQuestion(questionElement);
quiz.renderInCorrect(choice0Element);
quiz.renderInWrong(choice1Element);

quiz_ui.js

var correctButton = document.getElementById("guess0");
correctButton.onclick = function() {
    quiz.questionsAnswered ++;
  if (quiz.hasEnded()) { 
    quiz.finalHTML();
  } else {
    quiz.correctAnswers ++;
    quiz.nextQuestion(quiz);    
  }
}

var wrongButton = document.getElementById("guess1");
wrongButton.onclick = function() {
    quiz.questionsAnswered ++;
  if (quiz.hasEnded()) { 
    quiz.finalHTML();
  } else {
    quiz.nextQuestion(quiz);    
  }
}

Answer 1 · 2018-02-08T12:15:34Z

February 8, 2018 12:15pm

Hi Ben. Bottom of quiz.js. In the finalHTML function, your return statement has come too early, and the 3 remaining render tasks will not take place. Make it like so, and all will be good.

  Quiz.prototype.finalHTML = function() {
    var finalHTML = '<h2>';
    finalHTML += 'You got ';
    finalHTML += quiz.correctAnswers;
    finalHTML += ' right</h2>';

    questionElement.innerHTML = finalHTML;
    choice0Element.innerHTML = "";
    choice1Element.innerHTML = "";
    return
  }

Welcome to the Treehouse Community

Looking to learn something new?

Ben Bushell

Ben Bushell

Still not quite there with my onclick function with if statement in the quiz challenge

1 Answer

Neil McPartlin

Neil McPartlin

Ben Bushell

Ben Bushell