word/quiz: poc js asks random images with 4 translations

diff --git a/Makefile b/Makefile
index be3a2d8a1c07ac52ecc7e5b9eab71a382de9dbb6..96e0344323042821702eb6c9a468c70db90fcdb7 100644 (file)
--- 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 a7acea5ae10d9874e3324b8ffc4117ed27077531..b5a07bf60a9fe9b0f24f49a5df6048a1bfc2ce23 100644 (file)
--- 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 (file)
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();