From b0506a0377435db1c1b8520282d10e7831ff7c77 Mon Sep 17 00:00:00 2001
From: Oskar <o.winkels@fasttube.de>
Date: Sun, 17 Jan 2021 14:12:32 +0100
Subject: [PATCH] Finalize answer display, explanations and authors still tbd

---
 web/quiz.js   | 34 ++++++++++++++++++++++++++--------
 web/style.css | 32 +++++++++++++++++++++++++++++---
 2 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/web/quiz.js b/web/quiz.js
index aff8cce..f306709 100644
--- a/web/quiz.js
+++ b/web/quiz.js
@@ -270,23 +270,41 @@ function showQuizResults() {
 	var quizForm = document.querySelector('#quiz form')
 	quizForm.className = ''
 
+	console.log('Showing quiz results...')
+
+	changeView('quiz')
+
 	for (var [idx, value] of state.responses.entries()) {
 
-		console.log(idx+':', value)
+		console.log(idx + ':', value)
 		var el = document.getElementById('question' + idx)
 
-		console.log(el)
+		// Mark question correct or incorrect
+		el.classList.add(value.correct ? 'correct' : 'incorrect')
 
-		var a = value.answers
-		if (value.correct) {
-			el.classList.add('correct')
+		// traverse correct answers
+		if (state.questions[idx].type == 'Text') {
+			for (var [i, ans] of state.questions[idx].answers.entries()) {
+				var inp = el.querySelectorAll('input')[i]
+
+				if (inp.value == ans)
+					inp.classList.add('right')
+				else {
+					var note = document.createElement('p')
+					note.innerHTML = ans
+					inp.parentElement.appendChild(note)
+				}
+			}
 		} else {
-			el.classList.add('incorrect')
+			for (var ans of state.questions[idx].answers)
+				el.querySelector(`input[value="${ans}"]`).classList.add('trueans')
 		}
 
+		// TODO: Write out explanation, author
+
 	}
 
-	changeView('quiz')
+	document.querySelector('#quizSubmitButton').innerHTML = 'Back'
 
 }
 
@@ -332,7 +350,7 @@ function submitQuiz() {
 
 		var value = responses['q'+idx] || {answers: [], correct: false}
 
-		console.log(idx + ": " + value)
+		console.log(idx + ":", value)
 
 		if (state.questions[idx].type == 'ChooseOne' || state.questions[idx].type == 'ChooseAny') {
 			state.questions[idx].answers.sort()
diff --git a/web/style.css b/web/style.css
index f1c39ad..6b2c891 100644
--- a/web/style.css
+++ b/web/style.css
@@ -115,11 +115,11 @@ input[type="radio"] + p, input[type="checkbox"] + p {
 	border-radius: 3px;
 }
 
-input[type="radio"]:checked + p {
-	background: #aaf;
+input[type="radio"]:checked + p, input[type="checkbox"]:checked + p {
+	background: #ddf;
 }
 
-input[type="radio"]:hover + p {
+input[type="radio"]:hover + p, input[type="checkbox"]:hover + p {
 	background: #ddd;
 }
 
@@ -131,6 +131,11 @@ input[type="radio"]:hover + p {
 	display: none;
 }
 
+.question.correct label, .question.incorrect label,
+.question.correct input, .question.incorrect input {
+	pointer-events: none !important;
+}
+
 .question.correct h3, .question.correct h4 {
 	color: #008800;
 }
@@ -138,3 +143,24 @@ input[type="radio"]:hover + p {
 .question.incorrect h3, .question.incorrect h4 {
 	color: #BB0000;
 }
+
+.question input.trueans + p {
+	color: #008800;
+}
+
+.question.incorrect input:checked:not(.trueans) + p {
+	color: #BB0000;
+}
+
+.question input.right {
+	color: #008800;
+}
+
+.question.incorrect input:not(.right) {
+	color: #BB0000;
+}
+
+.question.incorrect input[type="text"]:not(.right) + p {
+	margin-top: 0;
+	color: #008800;
+}