Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Object-Oriented JavaScript (2015) Practice Project Project Overview

David Mendiola
seal-mask
.a{fill-rule:evenodd;}techdegree
David Mendiola
Full Stack JavaScript Techdegree Student 16,579 Points

My honest solution

My solution the the oop quiz app, I honestly didn't look at Andrew's solution at all till the end and after viewing his answer I knew I could have optimized and automated things a bit more, definitely some good things I learned that I will apply.

I didn't use quiz_ui.js at all. I actually started using an array to store the "answers" but for the sake moving forward I just used answer1 and answer2. I thought to myself I definitely know how to access them arrays but the command would be super long. I wish I had though after seeing the answer.

I think the most difficult part of this project for me was how to validate the answer. I used the id of the element since it was unique to each answer.

questions.js

function Question(question, firstAnswer, secondAnswer, correctAnswer){
    this.question = question;
    this.firstAnswer = firstAnswer;
    this.secondAnswer = secondAnswer;
    this.correctAnswer = correctAnswer;
}

quiz.js

function Quiz(){
    this.questions = [];    
    this.score = 0;
    this.currentQuestion = 0;
    //quiz always starts with at least 1 question
    this.progress = 1;
}
// adds question to quiz
Quiz.prototype.addQuestion = function(question){
    this.questions.push(question);
}
// calculate quiz score
Quiz.prototype.updateScore = function(){
    this.score++;
}
// get the users answer
Quiz.prototype.getAnswer = function(buttonClickId){
    var userAnswer;
    var quizQuestion = this.questions[this.currentQuestion];
    if (buttonClickId == "guess0"){
        userAnswer = quizQuestion.firstAnswer;
    }
    if (buttonClickId == "guess1"){
        userAnswer = quizQuestion.secondAnswer;
    }
    return userAnswer;
}
// check the users answer
Quiz.prototype.checkAnswer = function(buttonClickId){
    if (this.quizProgress()){
        var userAnswer = this.getAnswer(buttonClickId);
        var quizQuestion = this.questions[this.currentQuestion];
        if (userAnswer == quizQuestion.correctAnswer){
            this.updateScore();
        }
        this.currentQuestion++;
        this.progress++;    
    }
}
// check the quiz status
Quiz.prototype.quizProgress = function(){
    if (this.currentQuestion != this.questions.length){
        return true;
    } else {
        return false;
    }
}
// load quiz
Quiz.prototype.load = function(questionEl, firstAnswerEl, secondAnswerEl, progressEl, quizEl){
    if (this.quizProgress()){
        questionEl.innerHTML = this.questions[this.currentQuestion].question;
        firstAnswerEl.innerHTML = this.questions[this.currentQuestion].firstAnswer;
        secondAnswerEl.innerHTML = this.questions[this.currentQuestion].secondAnswer;
        progressEl.innerHTML = "Question ";
        progressEl.innerHTML += this.progress;
        progressEl.innerHTML += " of ";
        progressEl.innerHTML += this.questions.length;
    } else {
        quizEl.innerHTML = "<h1>Gamer Over!</h1>";
        quizEl.innerHTML += "<h3>You score is: " + this.score;
        quizEl.innerHTML += "</h3>";
    }
}

app.js

// create quiz
var quiz = new Quiz();
// create questions
var question1 = new Question("What color is the sky?", "Blue", "Red", "Blue");
var question2 = new Question("What is the current year?", 2016, 2017, 2017);
// add questions to quiz
quiz.addQuestion(question1);
quiz.addQuestion(question2);
// get quiz elements
var question = document.getElementById("question");
var firstAnswer = document.getElementById("choice0");
var secondAnswer = document.getElementById("choice1");
var progress = document.getElementById("progress");
var quizWrapper = document.getElementById("quiz");
// load quiz content first time
quiz.load(question, firstAnswer, secondAnswer, progress, quizWrapper);
// listen to answers
var guess0 = document.getElementById("guess0");
guess0.onclick = function(){
    quiz.checkAnswer(this.id);
    quiz.load(question, firstAnswer, secondAnswer, progress, quizWrapper);
}
var guess1 = document.getElementById("guess1");
guess1.onclick = function(){
    quiz.checkAnswer(this.id);
    quiz.load(question, firstAnswer, secondAnswer, progress, quizWrapper);
}

I'm definitely going to make this more automated but it was a great lesson overall.