wayspurrchen/index.html

## index.html
<!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>

## quizzy_controllers.js
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 + '!!!!!!!'
		);
	}
};

## quizzy_data.js
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']
		}
	]
};

## quizzy_models.js
function Question(questionData) {
	this.question = questionData.question;
	this.answer   = questionData.answer;
	this.choices  = questionData.choices;
	this.id       = questionData.id;
}

## quizzy_views.js
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();
	};
}
	<!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();
	};
	}