Skip to content

Instantly share code, notes, and snippets.

@wayspurrchen
Created October 6, 2014 20:07
Show Gist options
  • Save wayspurrchen/5762a3fd6072924fd22e to your computer and use it in GitHub Desktop.
Save wayspurrchen/5762a3fd6072924fd22e to your computer and use it in GitHub Desktop.
<!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>
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 + '!!!!!!!'
);
}
};
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']
}
]
};
function Question(questionData) {
this.question = questionData.question;
this.answer = questionData.answer;
this.choices = questionData.choices;
this.id = questionData.id;
}
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