word/quiz: answer selection styling (hover)

[sheet.git] / word / quiz.js

diff --git a/word/quiz.js b/word/quiz.js
index ce60d3a4a64d7fbfa33262e75347f70dd03fd195..d2a581824d6feb4f271af1524140c720e1eb968d 100644 (file)
--- a/word/quiz.js
+++ b/word/quiz.js
@@ -1,41 +1,36 @@
-let quiz = {
-dataurl: '/data/wordlist.nl.json',
+class Quiz {
+       next() {
+               let word = this.words.shift();
+               let form = put(this.form,
+                       '+img[src=$]+ul', `/data/word/en/${word[0]}.jpg`,
+               );
 
-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)
+               let answers = [word[2], this.words[1][2], this.words[2][2], this.words[3][2]]
                        .sort(() => {return .5 - Math.random()}) // shuffle
-                       .map(row => row.split(/:/))
-               quiz.next();
-       });
-},
+               answers.forEach(suggest => {
+                       let label = suggest.replace(/\/.*/, '');
+                       let option = put(form, 'li', label, {onclick: () => {
+                               if (suggest != word[2]) {
+                                       // incorrect
+                                       put(option, '.wrong');
+                                       return;
+                               }
+                               put(option, '.good');
+                               window.setTimeout(() => this.next(), 500);
+                       }});
+               });
+       }
+
+       constructor() {
+               this.dataurl = '/data/wordlist.nl.json';
+               fetch(this.dataurl).then(res => res.json()).then(json => {
+                       this.form = document.getElementById('quiz');
+                       this.words = Object.values(json)
+                               .sort(() => {return .5 - Math.random()}) // shuffle
+                               .map(row => row.split(/:/))
+                       this.next();
+               });
+       }
 };
 
-quiz.setup();
+new Quiz();