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

Posted by baloch baloch
baloch baloch
261 Points

why is it not working?

quiz_UI.js

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.getCurrectQuestion().choices;

    for(var i = 0; i < choices.length; i++) {
        this.populateIdWithHTML("choice" + i, choices[i]);
        this.guessHandler("guess" + i, choices[i]);
    }
},
displayScore: function() {
    var gameOverHTML = "<hi>Game Over</h1>";
    gameOverHTML += "<h2> Your Score is: " + quiz.score + "</h2>";
    this.populateIdWithHTML("quiz", gameOverHTML);
},

populateIdWithHTML: function(id, text) {
    var button = document.getElementById(id);
    button.onclick = function() {
        quiz.guess(guess);
        QuixUI.displayNext();
    }
},

displayProgress: function() {
    var currentQuestionNumber = quiz.currentQuestionIndex + 1;
    this.populateIdWithHTML("progress", "Question " + currentQuestionNumber + " of " + quiz.questions.length);
}

};

Question.js


function Question(text, choices, answer) {
    this.text = text;
    this.choices = choices;
    this.answer = answer;
}

Question.prototype.isCorrectAnswer = function (choice) {
    return this.answer === choice;
};

quiz.js

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

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

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

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

app.js

var questions = [
    new Question("who was the first President of Pakistan?", [ "Quaid e Azam", "Izqandar Mirza"], "Izqandar Mirza"),
    new Question("Who is the best player in the world?", ["Cristiano Ronaldo", "Lionel Messi"], "Lionel Messi")
];

var quiz = new Quiz(question);


QuizUI.displayNext();

index.html

<!DOCTYPE html> <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>Awesome 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="quiz_ui.js"></script> <script src="app.js"></script> </body> </html>

1 Answer

Steven Parker
Steven Parker
243,199 Points
Steven Parker
Steven Parker
243,199 Points

The snapshot in your other question is a better way to share the code. But it would help if you describe what about it is "not working".

You might want to delete this question.