Add authors and explanations to review mode and fix some stuff

web/quiz.js

@@ -282,9 +282,11 @@ function showQuizResults() {
 		// Mark question correct or incorrect
 		el.classList.add(value.correct ? 'correct' : 'incorrect')
 
+		var q = state.questions[idx]
+
 		// traverse correct answers
 		if (state.questions[idx].type == 'Text') {
-			for (var [i, ans] of state.questions[idx].answers.entries()) {
+			for (var [i, ans] of q.answers.entries()) {
 				var inp = el.querySelectorAll('input')[i]
 
 				if (inp.value == ans)
@@ -296,15 +298,22 @@ function showQuizResults() {
 				}
 			}
 		} else {
-			for (var ans of state.questions[idx].answers)
+			for (var ans of q.answers)
 				el.querySelector(`input[value="${ans}"]`).classList.add('trueans')
 		}
 
 		// TODO: Write out explanation, author
+		var meta = document.createElement('div')
+		meta.className = 'meta'
+		meta.innerHTML = `
+			<p><i>Source/Author: ${q.author || '[No source/author provided]'}</i></p>
+			<h5>Explanation:</h5>
+			<p>${q.explanation || '[No explanation provided]'}</p>`
+		el.appendChild(meta)
 
 	}
 
-	document.querySelector('#quizSubmitButton').innerHTML = 'Back'
+	document.querySelector('#quizSubmitButton').value = 'Back'
 
 }
 
@@ -323,6 +332,10 @@ function mergeKeyReducer(acc, entry) {
 
 function submitQuiz() {
 
+	// If not running, we're most likely in review mode. Just switch back.
+	if (state.running == false)
+		changeView('postscreen')
+
 	if (getRule('sequential')) {
 
 		var n = nextQuestion()

web/ssparser.js

@@ -49,8 +49,8 @@ function parseLine(line) {
 	}
 
 	// Optional parameters
-	q.explanation	= els[4] || '[No explanation provided]'
-	q.author		= els[5] || '[No author provided]'
+	q.explanation	= els[4] || null
+	q.author		= els[5] || null
 	q.picture		= els[6] || null
 
 	return q

web/style.css

@@ -154,13 +154,31 @@ input[type="radio"]:hover + p, input[type="checkbox"]:hover + p {
 
 .question input.right {
 	color: #008800;
+	border-color: #008800;
 }
 
 .question.incorrect input:not(.right) {
 	color: #BB0000;
+	border-color: #BB0000;
 }
 
 .question.incorrect input[type="text"]:not(.right) + p {
 	margin-top: 0;
 	color: #008800;
 }
+
+.question .meta {
+	background: #ddd;
+	padding: 16px;
+	border-radius: 4px;
+	font-size: 16px;
+}
+
+.question .meta p {
+	margin: 0
+}
+
+.question .meta h5 {
+	font-size: 16px;
+	margin: 16px 0;
+}