X-Git-Url: http://git.shiar.net/sheet.git/blobdiff_plain/30bf0fcde3f7e44f1ec7bcfc8253dfce8f81e8e6..004e069b46889f35372bc73615dc9a163a0f297b:/word/quiz.js diff --git a/word/quiz.js b/word/quiz.js index ce60d3a..ef5e0d8 100644 --- a/word/quiz.js +++ b/word/quiz.js @@ -1,41 +1,35 @@ -let quiz = { -dataurl: '/data/wordlist.nl.json', +class Quiz { + next() { + let word = this.words.shift(); + let form = put(this.form, + '+img[src=$]+ul', `/data/word/en/${word[0]}.jpg`, + ); -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) + let answers = [word[2], this.words[1][2], this.words[2][2], this.words[3][2]] .sort(() => {return .5 - Math.random()}) // shuffle - .map(row => row.split(/:/)) - quiz.next(); - }); -}, + answers.forEach(suggest => { + let option = put(form, 'li', suggest, {onclick: () => { + if (suggest != word[2]) { + // incorrect + put(option, '.wrong'); + return; + } + put(option, '.good'); + window.setTimeout(() => this.next(), 500); + }}); + }); + } + + constructor() { + this.dataurl = '/data/wordlist.nl.json'; + fetch(this.dataurl).then(res => res.json()).then(json => { + this.form = document.getElementById('quiz'); + this.words = Object.values(json) + .sort(() => {return .5 - Math.random()}) // shuffle + .map(row => row.split(/:/)) + this.next(); + }); + } }; -quiz.setup(); +new Quiz();