word/wijzer: quiz based on Per Seconde Wijzer

diff --git a/word/wijzer.js b/word/wijzer.js
new file mode 100644 (file)
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 (file)
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>";