From 7592752de0538056bb89083f8528b432758de727 Mon Sep 17 00:00:00 2001
From: Oskar <o.winkels@fasttube.de>
Date: Mon, 18 Jan 2021 00:03:58 +0100
Subject: [PATCH] Add authors and explanations to review mode and fix some
 stuff

---
 res/sample-questions.tsv |  2 +-
 web/quiz.js              | 19 ++++++++++++++++---
 web/ssparser.js          |  4 ++--
 web/style.css            | 18 ++++++++++++++++++
 4 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/res/sample-questions.tsv b/res/sample-questions.tsv
index 36c7050..47a2fbe 100644
--- a/res/sample-questions.tsv
+++ b/res/sample-questions.tsv
@@ -6,7 +6,7 @@ All the above"	"1
 ChooseOne	What is depicted on the picture	"7 speed double clutch transmission for AWD
 8 speed double clutch transmission for AWD
 7 speed double clutch transmission for 2WD
-Automatic transmission with torque conventer"	1		FSCzech	https://i.ibb.co/56LM89v/chiron-transmission.jpg
+Automatic transmission with torque conventer"	1	This gearbox is from the 2017 Bugatti Chiron	FSCzech	https://i.ibb.co/56LM89v/chiron-transmission.jpg
 Text	Calculate the (1) torsional- and (2) bending-nominal stress at the critical cross section for the load case shown below. Answer in N / mm² and round to one decimal place. Given: P = 12kW; n = 980 1/min; F = 500 N; xkrit = 110 mm; 0 ≤ x0 ≤ 120mm	"torsional-nominal stress
 bending-nominal stress"	"17.1
 18.2"	https://i.ibb.co/1r3yqY7/2b.png		https://i.ibb.co/tYTdw86/2a.png
diff --git a/web/quiz.js b/web/quiz.js
index f306709..9d6e56b 100644
--- a/web/quiz.js
+++ b/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()
diff --git a/web/ssparser.js b/web/ssparser.js
index 36abea5..9ed7b3c 100644
--- a/web/ssparser.js
+++ b/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
diff --git a/web/style.css b/web/style.css
index 6b2c891..6a7dc5e 100644
--- a/web/style.css
+++ b/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;
+}