word/wijzer.js

   1 class WordWijzer extends WordQuiz {
   2         next() {
   3                 let word = this.words.shift();
   4                 if (!word) {
   5                         put(this.form, '.done');
   6                         this.form.querySelectorAll('li[onclick]').forEach(answer => {
   7                                 answer.removeAttribute('onclick');
   8                         });
   9                         return;
  10                 }
  11
  12                 this.question.innerHTML = '';
  13                 put(this.question,
  14                         '[data-id=$] img[src=$]', word[2],
  15                         `/data/word/en/${word[2]}.jpg`
  16                 );
  17         }
  18
  19         verify(click) {
  20                 let answer = click.target;
  21                 put(answer, '.chosen');
  22                 console.log(this.question, answer);
  23                 let match = this.question.dataset.id == answer.dataset.id;
  24                 put(answer, match ? '.good' : '.wrong');
  25                 this.next();
  26         }
  27
  28         setup() {
  29                 this.form = document.getElementById('quiz');
  30                 this.question = put(this.form, 'figure');
  31                 this.words.splice(9)
  32
  33                 let answers = put(this.form, 'ul');
  34                 this.words
  35                         .forEach(answer => {
  36                                 let label = answer[0].replace(/\/.*/, ''); // primary form
  37                                 put(answers, 'li[data-id=$][onclick=""]',
  38                                         answer[2], label, {onclick: e => this.verify(e)}
  39                                 )
  40                         });
  41                 this.words.shuffle();
  42                 this.next();
  43         }
  44 };