gilbert/index.html

## index.html
<html>
<head>Quizzy Part 1 MVC</head>
<body>

  <div id="app"></div>

  <script src="vendor/mithril.js" type="text/javascript"></script>
  <script src="quiz.js" type="text/javascript"></script>
  <script type="text/javascript">
    Quiz.vm.questions([
      {
        id: 100,
        content: "What is 2 + 2?",
        answerIdx: 1,
        options: [
          "2", "4", "yo why are you asking me this"
        ]
      },
      {
        id: 101,
        content: "What is 2 + 3?",
        answerIdx: 1,
        options: [
          "3", "5", "..."
        ]
      },
    ])

    var appDiv = document.getElementById('app')

    m.module(appDiv, Quiz)
  </script>
</body>
</html>

## quiz.js
(function () {
  window.Quiz = {}

  Quiz.vm = {
    questions: m.prop([]),
    // key is question id, value is the answerIdx that user chose
    userAnswers: m.prop({}),
    // key is question id, value is true or false
    correctStatus: m.prop({})
  }

  Quiz.saveResults = function (questionId, answers, answerStatuses) {
    // database / ajax / local storage stuff
  }

  Quiz.controller = function () {
    var ctrl = {}
    var vm = Quiz.vm
    ctrl.selectAnswer = function (questionId, answerIdx) {
      var answers = vm.userAnswers()
      answers[questionId] = answerIdx
    }
    ctrl.reset = function () {
      vm.userAnswers({})
      vm.correctStatus({})
    }
    ctrl.grade = function () {
      var answers = vm.userAnswers()
      var correct = vm.correctStatus()

      vm.questions().forEach(function (question) {
        var isCorrect = question.answerIdx === answers[question.id]
        correct[question.id] = isCorrect
      })

      Quiz.saveResults(question.id, answers, correct)
    }
    return ctrl
  }

  Quiz.view = function (ctrl) {
    return m('form.quiz', { onsubmit: pd(ctrl.grade) }, [
      Quiz.vm.questions().map(questionView),
      m('button', {
        onclick: function (e) { e.preventDefault(); ctrl.reset() }
        // Alternatively:
        // onclick: pd(ctrl.reset)
      }, "Reset Quiz Form"),
      m('button', "Submit")
    ])

    function questionView (question) {
      return m('.question', [
        m('h3', question.content),
        question.options.map(answerOptionView),
        answerStatus()
      ])

      function answerOptionView (optionText, idx) {
        var answers = Quiz.vm.userAnswers()
        return [
          m('input[type=radio]', {
            name: 'question_' + question.id,
            // Two-way Data Binding:
            // VM -> View
            checked: answers[question.id] === idx,
            // View -> VM
            onchange: ctrl.selectAnswer.bind(null, question.id, idx)
          }),
          m('label', optionText)
        ]
      }

      function answerStatus () {
        var correct = Quiz.vm.correctStatus()
        if (correct[question.id] === undefined) return;
        return m('.answer',
          correct[question.id] ? "You got it right!" : ":("
        )
      }
    }

  }

  // Wrap a function in another function that prevents the default
  function pd (callback) {
    return function (e) { e.preventDefault(); callback() }
  }

})()
	<html>
	<head>Quizzy Part 1 MVC</head>
	<body>

	<div id="app"></div>

	<script src="vendor/mithril.js" type="text/javascript"></script>
	<script src="quiz.js" type="text/javascript"></script>
	<script type="text/javascript">
	Quiz.vm.questions([
	{
	id: 100,
	content: "What is 2 + 2?",
	answerIdx: 1,
	options: [
	"2", "4", "yo why are you asking me this"
	]
	},
	{
	id: 101,
	content: "What is 2 + 3?",
	answerIdx: 1,
	options: [
	"3", "5", "..."
	]
	},
	])

	var appDiv = document.getElementById('app')

	m.module(appDiv, Quiz)
	</script>
	</body>
	</html>
	(function () {
	window.Quiz = {}

	Quiz.vm = {
	questions: m.prop([]),
	// key is question id, value is the answerIdx that user chose
	userAnswers: m.prop({}),
	// key is question id, value is true or false
	correctStatus: m.prop({})
	}

	Quiz.saveResults = function (questionId, answers, answerStatuses) {
	// database / ajax / local storage stuff
	}

	Quiz.controller = function () {
	var ctrl = {}
	var vm = Quiz.vm
	ctrl.selectAnswer = function (questionId, answerIdx) {
	var answers = vm.userAnswers()
	answers[questionId] = answerIdx
	}
	ctrl.reset = function () {
	vm.userAnswers({})
	vm.correctStatus({})
	}
	ctrl.grade = function () {
	var answers = vm.userAnswers()
	var correct = vm.correctStatus()

	vm.questions().forEach(function (question) {
	var isCorrect = question.answerIdx === answers[question.id]
	correct[question.id] = isCorrect
	})

	Quiz.saveResults(question.id, answers, correct)
	}
	return ctrl
	}

	Quiz.view = function (ctrl) {
	return m('form.quiz', { onsubmit: pd(ctrl.grade) }, [
	Quiz.vm.questions().map(questionView),
	m('button', {
	onclick: function (e) { e.preventDefault(); ctrl.reset() }
	// Alternatively:
	// onclick: pd(ctrl.reset)
	}, "Reset Quiz Form"),
	m('button', "Submit")
	])

	function questionView (question) {
	return m('.question', [
	m('h3', question.content),
	question.options.map(answerOptionView),
	answerStatus()
	])

	function answerOptionView (optionText, idx) {
	var answers = Quiz.vm.userAnswers()
	return [
	m('input[type=radio]', {
	name: 'question_' + question.id,
	// Two-way Data Binding:
	// VM -> View
	checked: answers[question.id] === idx,
	// View -> VM
	onchange: ctrl.selectAnswer.bind(null, question.id, idx)
	}),
	m('label', optionText)
	]
	}

	function answerStatus () {
	var correct = Quiz.vm.correctStatus()
	if (correct[question.id] === undefined) return;
	return m('.answer',
	correct[question.id] ? "You got it right!" : ":("
	)
	}
	}

	}

	// Wrap a function in another function that prevents the default
	function pd (callback) {
	return function (e) { e.preventDefault(); callback() }
	}

	})()