From 5d87ef3cd8bd0104cc663a2872a87b89d1c546bb Mon Sep 17 00:00:00 2001
From: Mischa POSLAWSKY <perl@shiar.org>
Date: Sat, 10 Jul 2021 00:13:35 +0200
Subject: [PATCH] word/quiz: poc js asks random images with 4 translations

---
 Makefile    |  2 ++
 word.plp    | 14 ++++++++++++++
 wordquiz.js | 41 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 57 insertions(+)
 create mode 100644 wordquiz.js

diff --git a/Makefile b/Makefile
index be3a2d8..96e0344 100644
--- a/Makefile
+++ b/Makefile
@@ -68,6 +68,8 @@ data/wordlist.en.inc.pl: tools/mkwordlist data/wordlist.version.txt
 	$(call cmdsave,$<)
 data/wordlist.%.inc.pl: tools/mkwordlist data/wordlist.version.txt
 	$(call cmdsave,$< $*)
+data/wordlist.%.json: data/wordlist.%.inc.pl
+	$(call cmdsave,perl -MJSON=encode_json -E "print encode_json(do \$$ARGV[0])" ./$<)
 
 .SECONDARY: data/font/%.ttf
 data/font/%.ttf:
diff --git a/word.plp b/word.plp
index a7acea5..b5a07bf 100644
--- a/word.plp
+++ b/word.plp
@@ -5,6 +5,20 @@ if ($Request and $Request =~ s{^edit/?}{}) {
 	exit;
 }
 
+if ($Request and $Request =~ s{^quiz/?}{}) {
+	Html({
+		raw => <<'EOT',
+<script src="/wordquiz.js"></script>
+<style>
+.wrong {background: red}
+.good {background: green}
+</style>
+EOT
+	});
+	say '<h1>quiz</h1><p id="quiz">test</p>';
+	exit;
+}
+
 my $lang = $get{lang} || 'en';
 my $wordlist = "data/wordlist.$lang.inc.pl";
 my $limit = $get{v} // (exists $get{v} ? 4 : 3);
diff --git a/wordquiz.js b/wordquiz.js
new file mode 100644
index 0000000..ce60d3a
--- /dev/null
+++ b/wordquiz.js
@@ -0,0 +1,41 @@
+let quiz = {
+dataurl: '/data/wordlist.nl.json',
+
+next: () => {
+	let word = quiz.words.shift();
+	let question = document.createElement('img');
+	question.src = `/data/word/en/${word[0]}.jpg`;
+	question.style.maxWidth = '50%';
+
+	let answers = [word[2], quiz.words[1][2], quiz.words[2][2], quiz.words[3][2]]
+		.sort(() => {return .5 - Math.random()}) // shuffle
+	let form = document.createElement('ul');
+	answers.forEach(suggest => {
+		let option = document.createElement('li');
+		option.onclick = () => {
+			if (suggest != word[2]) {
+				// incorrect
+				option.classList.add('wrong');
+				return;
+			}
+			option.classList.add('good');
+			window.setTimeout(quiz.next, 500);
+		};
+		option.append(suggest);
+		form.append(option);
+	});
+	quiz.form.append(question, form);
+},
+
+setup: () => {
+	fetch(quiz.dataurl).then(res => res.json()).then(json => {
+		quiz.form = document.getElementById('quiz');
+		quiz.words = Object.values(json)
+			.sort(() => {return .5 - Math.random()}) // shuffle
+			.map(row => row.split(/:/))
+		quiz.next();
+	});
+},
+};
+
+quiz.setup();
-- 
2.30.0