Created
October 6, 2014 20:07
-
-
Save wayspurrchen/5762a3fd6072924fd22e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| .container-one { | |
| min-height: 200px; | |
| background-color: white; | |
| } | |
| .container-two { | |
| min-height: 200px; | |
| background-color: green; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button id="start-quiz-button">Start the quiz!</button> | |
| <div class="container-one"> | |
| </div> | |
| <div class="container-two"> | |
| </div> | |
| <script src="http://underscorejs.org/underscore-min.js"></script> | |
| <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> | |
| <script src="quizzy_data.js"></script> | |
| <script src="quizzy_models.js"></script> | |
| <script src="quizzy_views.js"></script> | |
| <script src="quizzy_controllers.js"></script> | |
| <script> | |
| $('#start-quiz-button').on('click', function() { | |
| var $container = $('.container-two'); | |
| ApplicationController.startQuiz($container); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var ApplicationController = { | |
| $container: undefined, | |
| questionViews: [], | |
| questionModels: [], | |
| totalQuestions: undefined, | |
| correctAnswers: 0, | |
| startQuiz: function($container) { | |
| this.$container = $container; | |
| var questionsData = quizData.questions; | |
| this.totalQuestions = questionsData.length; | |
| for (var i = 0; i < questionsData.length; i++) { | |
| var questionModel = new Question(questionsData[i]); | |
| var questionView = new QuestionView(questionModel, this.$container); | |
| this.questionModels.push(questionModel); | |
| this.questionViews.push(questionView); | |
| } | |
| this.currentQuestionIndex = 0; | |
| this.showQuestion(this.currentQuestionIndex); | |
| }, | |
| showQuestion: function(index) { | |
| this.hideQuestions(); | |
| this.questionViews[index].show(); | |
| }, | |
| hideQuestions: function() { | |
| for (var i = 0; i < this.questionViews.length; i++) { | |
| this.questionViews[i].hide(); | |
| } | |
| }, | |
| checkAnswer: function(userAnswer) { | |
| var currentQuestion = this.questionModels[this.currentQuestionIndex]; | |
| var answer = currentQuestion.answer; | |
| if (userAnswer === answer) { | |
| this.correctAnswers++; | |
| } | |
| }, | |
| calculateScore: function() { | |
| return (this.correctAnswers / this.totalQuestions) * 100; | |
| }, | |
| nextQuestion: function() { | |
| this.currentQuestionIndex++; | |
| if (this.questionViews[this.currentQuestionIndex]) { | |
| this.showQuestion(this.currentQuestionIndex); | |
| } else { | |
| var percentScore = this.calculateScore(); | |
| this.showResults(percentScore); | |
| } | |
| }, | |
| showResults: function(percentScore) { | |
| this.hideQuestions(); | |
| this.$container.append( | |
| '<h1>You got ' + percentScore + '%! That\'s ' + | |
| this.correctAnswers + ' out of ' + this.totalQuestions + '!!!!!!!' | |
| ); | |
| } | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var quizData = { | |
| name: 'My Badly Named Quiz', | |
| scoring: '???', | |
| questions: [ | |
| { | |
| id: 0, | |
| question: 'What is the capital of Texas?', | |
| answer: 'Austin', | |
| choices: ['Austin', 'Germany', 'California'] | |
| }, | |
| { | |
| id: 1, | |
| question: 'What is Way\'s name?', | |
| answer: 'Way', | |
| choices: ['Way', 'Sally', 'Bob', 'Cat'] | |
| }, | |
| { | |
| id: 2, | |
| question: 'Where is Way from?', | |
| answer: 'All of the above', | |
| choices: ['Los Angeles', 'Chicago', 'Baltimore', 'All of the above'] | |
| }, | |
| { | |
| id: 3, | |
| question: 'How many students are in Cohort 9?', | |
| answer: '15', | |
| choices: ['15', '16', '17'] | |
| } | |
| ] | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function Question(questionData) { | |
| this.question = questionData.question; | |
| this.answer = questionData.answer; | |
| this.choices = questionData.choices; | |
| this.id = questionData.id; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function QuestionView(questionModel, $container) { | |
| var myTemplate = _.template([ | |
| '<div>', | |
| '<h2><%= question %></h2>', | |
| '<p>the answer is <%= answer %></p>', | |
| '<% for (var i = 0; i < choices.length; i++) { %>', | |
| '<input name="<%= id %>" type="radio" value="<%= choices[i] %>">', | |
| '<label><%= choices[i] %></label>', | |
| '<% } %>', | |
| '<button class="next-question-button" type="button">Next Question</button>', | |
| '</div>' | |
| ].join('')); | |
| var compiledHTML = myTemplate({ | |
| question: questionModel.question, | |
| answer: questionModel.answer, | |
| choices: questionModel.choices, | |
| id: questionModel.id | |
| }); | |
| var me = this; | |
| var $view = $(compiledHTML); | |
| $container.append($view); | |
| $view.find('.next-question-button').on('click', function() { | |
| var selectedChoice = $('input[type=radio]:checked').val(); | |
| ApplicationController.checkAnswer(selectedChoice); | |
| ApplicationController.nextQuestion(); | |
| }); | |
| this.show = function() { | |
| $view.show(); | |
| }; | |
| this.hide = function() { | |
| $view.hide(); | |
| }; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment