word/wijzer: quiz based on Per Seconde Wijzer

[sheet.git] / word / wijzer.js

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();
+       }
+};