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

[sheet.git] / wordquiz.js

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