From: Mischa POSLAWSKY <perl@shiar.org>
Date: Mon, 15 Nov 2021 16:42:59 +0000 (+0100)
Subject: word/quiz: answer selection styling (hover)
X-Git-Tag: v1.13~93
X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/4d1fea2512e08b557f4c54801927db41aaff5d1c

word/quiz: answer selection styling (hover)
---

diff --git a/word/quiz.js b/word/quiz.js
index ef5e0d8..d2a5818 100644
--- a/word/quiz.js
+++ b/word/quiz.js
@@ -8,7 +8,8 @@ class Quiz {
 		let answers = [word[2], this.words[1][2], this.words[2][2], this.words[3][2]]
 			.sort(() => {return .5 - Math.random()}) // shuffle
 		answers.forEach(suggest => {
-			let option = put(form, 'li', suggest, {onclick: () => {
+			let label = suggest.replace(/\/.*/, '');
+			let option = put(form, 'li', label, {onclick: () => {
 				if (suggest != word[2]) {
 					// incorrect
 					put(option, '.wrong');
diff --git a/word/quiz.plp b/word/quiz.plp
index 00d82d2..7fc375e 100644
--- a/word/quiz.plp
+++ b/word/quiz.plp
@@ -6,11 +6,21 @@ Html({
 <script src="/word/quiz.js"></script>
 <style>
 img {
-	max-width: 50%;
+	width: 90vw;
+	max-width: 64em;
+	margin: 2em 0 1ex;
 }
-.wrong {background: red}
-.good {background: green}
+li {
+	font-size: 20pt;
+	padding: .2ex;
+}
+li:hover {
+	cursor: pointer;
+	background: #8888;
+}
+li.wrong {background: #F008}
+li.good {background: #0F08}
 </style>
 EOT
 });
-say '<h1>quiz</h1><p id="quiz">test</p>';
+say '<h1 id=quiz>quiz</h1>';