word/quiz: put-selector library to build html in js

[sheet.git] / word / quiz.js

diff --git a/word/quiz.js b/word/quiz.js
index ce60d3a4a64d7fbfa33262e75347f70dd03fd195..3bfa2ca3097a42169631240fd17a4ecb4722a998 100644 (file)
--- a/word/quiz.js
+++ b/word/quiz.js
@@ -3,28 +3,23 @@ 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 form = put(quiz.form,
+               'img[src=$]+ul', `/data/word/en/${word[0]}.jpg`,
+       );
 
        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 = () => {
+               let option = put(form, 'li', suggest, {onclick: () => {
                        if (suggest != word[2]) {
                                // incorrect
-                               option.classList.add('wrong');
+                               put(option, '.wrong');
                                return;
                        }
-                       option.classList.add('good');
+                       put(option, '.good');
                        window.setTimeout(quiz.next, 500);
-               };
-               option.append(suggest);
-               form.append(option);
+               }});
        });
-       quiz.form.append(question, form);
 },
 
 setup: () => {