wordquiz.js

   1 let quiz = {
   2 dataurl: '/data/wordlist.nl.json',
   3
   4 next: () => {
   5         let word = quiz.words.shift();
   6         let question = document.createElement('img');
   7         question.src = `/data/word/en/${word[0]}.jpg`;
   8         question.style.maxWidth = '50%';
   9
  10         let answers = [word[2], quiz.words[1][2], quiz.words[2][2], quiz.words[3][2]]
  11                 .sort(() => {return .5 - Math.random()}) // shuffle
  12         let form = document.createElement('ul');
  13         answers.forEach(suggest => {
  14                 let option = document.createElement('li');
  15                 option.onclick = () => {
  16                         if (suggest != word[2]) {
  17                                 // incorrect
  18                                 option.classList.add('wrong');
  19                                 return;
  20                         }
  21                         option.classList.add('good');
  22                         window.setTimeout(quiz.next, 500);
  23                 };
  24                 option.append(suggest);
  25                 form.append(option);
  26         });
  27         quiz.form.append(question, form);
  28 },
  29
  30 setup: () => {
  31         fetch(quiz.dataurl).then(res => res.json()).then(json => {
  32                 quiz.form = document.getElementById('quiz');
  33                 quiz.words = Object.values(json)
  34                         .sort(() => {return .5 - Math.random()}) // shuffle
  35                         .map(row => row.split(/:/))
  36                 quiz.next();
  37         });
  38 },
  39 };
  40
  41 quiz.setup();