From 4d1fea2512e08b557f4c54801927db41aaff5d1c Mon Sep 17 00:00:00 2001
From: Mischa POSLAWSKY <perl@shiar.org>
Date: Mon, 15 Nov 2021 17:42:59 +0100
Subject: [PATCH] word/quiz: answer selection styling (hover)

---
 word/quiz.js  |  3 ++-
 word/quiz.plp | 18 ++++++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

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>';
-- 
2.30.0