My Big Question: The best way to make the Quiz UI work for multiple quizzes.

Question

Here's what I did:

Quiz.prototype.RunQuizUI = function () {

  var quiz = this;

  var object = {
    displayNext : function () {
      if (quiz.hasEnded()) {
        this.displayFinalScore();
      } else {
        this.displayQuestion();
        this.displayChoices();
        this.displayProgress();
        this.displayScoreCounter();
      }
    },

    displayQuestion : function () {
      this.populateIdWithHTML("question", quiz.getCurrentQuestion().question);
    },

    displayChoices : function () {
      var choices = quiz.getCurrentQuestion().choices;
      for (var i = 0; i < choices.length; i++) {
        this.populateIdWithHTML("choice" + i, choices[i]);
        this.answerHandler("button" + i, choices[i]);
      }
    },

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

    displayScoreCounter : function () {
      var scoreCounterHTML = "Score: " + quiz.score + "/" + quiz.questions.length;
      this.populateIdWithHTML("scoreCounter", scoreCounterHTML);
    },

    displayFinalScore : function () {
      var quizCompletedHTML = '<h1>Quiz Completed</h1>';
      quizCompletedHTML += '<h2>You scored ' + quiz.score;
      quizCompletedHTML += ' out of ' + quiz.questions.length + '</h2>';
      this.populateIdWithHTML('quiz', quizCompletedHTML);
    },

    populateIdWithHTML : function (id, string) {
      var element = document.getElementById(id);
      element.innerHTML = string;
    },

    answerHandler : function (id, answer) {
      var UI = this;
      var button = document.getElementById(id);
      button.onclick = function () {
        quiz.checkAnswer(answer);
        UI.displayNext();
      };
    }
  };

  object.displayNext();

};

And in the app.js:

var quiz = new Quiz (questions);
quiz.RunQuizUI();

But... that's very non-conventional, and kind of leaves me asking: "But what does it do?" It's kind of scary, because I am not sure exactly what it is doing behind the scenes. Is the fact that a big old object is being created (temporarily) every time an instance runs the UI a deal breaker? Or should it be avoided because it is just too non-conventional and confusing to look at?

Here is another solution, which a friend of mine proposed. I have been having a lot of trouble getting it to work:

var QuizUI = {

  setCurrentQuiz: function (quizInstance) {
    this.currentQuiz = quizInstance;
  };

//every reference to "quiz" below will need to be changed to this.currentQuiz,
//which will make the code quite verbose. I am not a fan of this,
//but if the performance benefit is worth it (as compared to my other solution above)
//then so be it.

  displayNext : function () {
    if (quiz.hasEnded()) {
      this.displayFinalScore();
    } else {
      this.displayQuestion();
      this.displayChoices();
      this.displayProgress();
      this.displayScoreCounter();
    }
  },

  displayQuestion : function () {
    this.populateIdWithHTML("question", quiz.getCurrentQuestion().question);
  },

  displayChoices : function () {
    var choices = quiz.getCurrentQuestion().choices;
    for (var i = 0; i < choices.length; i++) {
      this.populateIdWithHTML("choice" + i, choices[i]);
      this.answerHandler("button" + i, choices[i]);
    }
  },

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

  displayScoreCounter : function () {
    var scoreCounterHTML = "Score: " + quiz.score + "/" + quiz.questions.length;
    this.populateIdWithHTML("scoreCounter", scoreCounterHTML);
  },

  displayFinalScore : function () {
    var quizCompletedHTML = '<h1>Quiz Completed</h1>';
    quizCompletedHTML += '<h2>You scored ' + quiz.score;
    quizCompletedHTML += ' out of ' + quiz.questions.length + '</h2>';
    this.populateIdWithHTML('quiz', quizCompletedHTML);
  },

  populateIdWithHTML : function (id, string) {
    var element = document.getElementById(id);
    element.innerHTML = string;
  },

  answerHandler : function (id, answer) {
    var UI = this;
    var button = document.getElementById(id);
    button.onclick = function () {
      quiz.checkAnswer(answer);
      UI.displayNext();
    };
  }
};

//and add this to the quiz prototype:

Quiz.prototype.runQuizUI = function () {
  QuizUI.setCurrentQuiz(this);
  QuizUI.displayNext();
};

//app.js remains the same as in the above example, just call quiz.runQuizUI(); on your new quiz instance

So, what do you all think of these ideas? Andrew Chalkley, would especially love your input here.

Welcome to the Treehouse Community

Looking to learn something new?

Brendan Moran

Brendan Moran

My Big Question: The best way to make the Quiz UI work for multiple quizzes.

Steven Parker

Steven Parker

Brendan Moran

Brendan Moran

Brendan Moran

Brendan Moran

Steven Parker

Steven Parker

Brendan Moran

Brendan Moran