From: Mischa POSLAWSKY <perl@shiar.org>
Date: Mon, 27 Dec 2021 02:02:38 +0000 (+0100)
Subject: word/wijzer: quiz based on Per Seconde Wijzer
X-Git-Tag: v1.13~64
X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/6af9d408cefdd30a40794742e5ceed7cb3547d45

word/wijzer: quiz based on Per Seconde Wijzer
---

diff --git a/word/wijzer.js b/word/wijzer.js
new file mode 100644
index 0000000..b4dab8f
--- /dev/null
+++ b/word/wijzer.js
@@ -0,0 +1,44 @@
+class WordWijzer extends WordQuiz {
+	next() {
+		let word = this.words.shift();
+		if (!word) {
+			put(this.form, '.done');
+			this.form.querySelectorAll('li[onclick]').forEach(answer => {
+				answer.removeAttribute('onclick');
+			});
+			return;
+		}
+
+		this.question.innerHTML = '';
+		put(this.question,
+			'[data-id=$] img[src=$]', word[0],
+			`/data/word/en/${word[0]}.jpg`
+		);
+	}
+
+	verify(click) {
+		let answer = click.target;
+		put(answer, '.chosen');
+		console.log(this.question, answer);
+		let match = this.question.dataset.id == answer.dataset.id;
+		put(answer, match ? '.good' : '.wrong');
+		this.next();
+	}
+
+	setup() {
+		this.form = document.getElementById('quiz');
+		this.question = put(this.form, 'figure');
+		this.words.splice(9)
+
+		let answers = put(this.form, 'ul');
+		this.words
+			.forEach(answer => {
+				let label = answer[2].replace(/\/.*/, ''); // primary form
+				put(answers, 'li[data-id=$][onclick=""]',
+					answer[0], label, {onclick: e => this.verify(e)}
+				)
+			});
+		this.words.shuffle();
+		this.next();
+	}
+};
diff --git a/word/wijzer.plp b/word/wijzer.plp
new file mode 100644
index 0000000..d450806
--- /dev/null
+++ b/word/wijzer.plp
@@ -0,0 +1,44 @@
+<(../common.inc.plp)><:
+
+our $wordlistbase;
+
+Html({
+	raw => <<'EOT',
+<script src="/word/put.min.js"></script>
+<script src="/word/quiz.js"></script>
+<script src="/word/wijzer.js"></script>
+<style>
+#quiz {
+	display: grid;
+	grid: auto / 2fr 1fr;
+	margin: 2em 0 1ex;
+	align-items: center;
+	grid-gap: 1ex;
+}
+figure {
+	grid-column: 1;
+	grid-row-start: 1;
+	grid-row-end: span 9;
+}
+ul {
+	display: contents;
+}
+li {
+	grid-column: 2;
+	font-size: 20pt;
+	padding: 1ex .2ex;
+	transition: all .5s ease-in;
+}
+li.chosen {background: #FF08}
+.done li.wrong {background: #F008}
+.done li.good {background: #0F08}
+li[onclick]:hover {
+	cursor: pointer;
+	background: #8888;
+}
+</style>
+EOT
+});
+
+say '<h1>per seconde wijzer</h1><div id=quiz></div>';
+say "<script>new WordWijzer('/$wordlistbase.json')</script>";