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                         this.log('done');
  10                         return;
  11                 }
  12
  13                 this.question.innerHTML = '';
  14                 put(this.question,
  15                         '[data-id=$] img[src=$]', word.id,
  16                         word.thumb()
  17                 );
  18         }
  19
  20         verify(click) {
  21                 let answer = click.target;
  22                 put(answer, '.chosen');
  23                 console.log(this.question, answer);
  24                 let match = this.question.dataset.id == answer.dataset.id;
  25                 put(answer, match ? '.good' : '.wrong');
  26                 this.log('pick', answer.dataset.id, answer.index, this.question.dataset.id);
  27                 this.next();
  28         }
  29
  30         setup() {
  31                 super.setup();
  32                 this.form.innerHTML = '';
  33                 this.question = put(this.form, 'figure');
  34                 this.words.splice(9)
  35
  36                 let answers = put(this.form, 'ul');
  37                 this.words
  38                         .forEach((answer, seq) => {
  39                                 put(answers, 'li[data-id=$][onclick=""]',
  40                                         answer.id, answer.label, {
  41                                                 onclick: e => this.verify(e),
  42                                                 index: seq,
  43                                         }
  44                                 )
  45                         });
  46                 this.words.shuffle();
  47                 this.next();
  48         }
  49 };