Created
August 28, 2014 16:15
-
-
Save wayspurrchen/d710540e9cf5d5c4fb6d to your computer and use it in GitHub Desktop.
Quizzy sample code
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> | |
| <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> | |
| <script src="http://underscorejs.org/underscore-min.js"></script> | |
| <script src="main.js"></script> | |
| </head> | |
| <body> | |
| <div id="quiz-app"></div> | |
| <script type="text/template" id="template-question"> | |
| <div> | |
| <h2><%= question %></h2> | |
| <input type="text"> | |
| <input type="submit"> | |
| </div> | |
| </script> | |
| <script> | |
| var myFancyQuizData = { | |
| quizTitle: "This is Way's Fancy Quiz", | |
| questions: [ | |
| { | |
| question: "What is the capital of Texas?", | |
| answer: "Austin" | |
| }, | |
| { | |
| question: "What is Way's favorite color?", | |
| answer: "green" | |
| }, | |
| { | |
| question: "What is the greatest language?", | |
| answer: "JavaScript" | |
| } | |
| ] | |
| }; | |
| Quizzy.start('#quiz-app', myFancyQuizData); | |
| </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 Quizzy = (function() { | |
| var $quizContainer; | |
| var quizData; | |
| var QuizController = { | |
| checkAnswer: function(input, questionModel) { | |
| if (input == questionModel.answer) { | |
| alert('You got it!!! *cheering*'); | |
| } else { | |
| alert('NOPE!! TRY AGAIN') | |
| } | |
| } | |
| }; | |
| function QuestionModel(questionData) { | |
| this.question = questionData.question; | |
| this.answer = questionData.answer; | |
| this.view = new QuestionView(this); | |
| } | |
| function QuestionView(questionModel) { | |
| var me = this; | |
| this.model = questionModel; | |
| this.template = $('#template-question').html(); | |
| var preppedTemplate = _.template(this.template); | |
| var compiledHtml = preppedTemplate({ | |
| question: this.model.question | |
| }); | |
| var $view = $(compiledHtml); | |
| $view.find('input[type="submit"]').on('click', function() { | |
| QuizController.checkAnswer( | |
| $view.find('input[type="text"]').val(), | |
| me.model | |
| ); | |
| }); | |
| $quizContainer.append($view); | |
| } | |
| function startApplication(selector, quizData) { | |
| $quizContainer = $(selector); | |
| $quizContainer.append('<h1>' + quizData.quizTitle + '</h1>'); | |
| var questionModels = []; | |
| for (var i in quizData.questions) { | |
| var model = new QuestionModel(quizData.questions[i]); | |
| questionModels.push(model); | |
| } | |
| } | |
| return { | |
| start: startApplication | |
| } | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment