word/quiz: generic page container setup

diff --git a/word.plp b/word.plp
index 5571299e4d3e178c865e355d6bb0cdb815e26225..0635161a96230df05d2eea57e057b96a824a0e32 100644 (file)
--- a/word.plp
+++ b/word.plp
@@ -18,7 +18,7 @@ if ($Request and $Request =~ m{\A([^/]+)}) {
                        lang => $lang,
                });
                say '<h1>Words</h1>';
-               say '<section id="gallery"></section>';
+               say '<section id="quiz"></section>';
                say "<script>new Word\u$name()</script>";
        }
        exit;

diff --git a/word/finder.js b/word/finder.js
index 734e4b086d9556b21603bb7d0233448ac825a360..e842d0671d2b2321db5ba13798c48a7a9a219616 100644 (file)
--- a/word/finder.js
+++ b/word/finder.js
@@ -41,11 +41,11 @@ class WordFinder extends WordQuiz {
        }
 
        setup() {
-               this.gallery = document.getElementById('gallery');
-               this.gallery.innerHTML = '';
-               put(this.gallery, 'p', 'Under construction.');
+               super.setup();
+               this.form.innerHTML = '';
+               put(this.form, 'p', 'Under construction.');
                for (let cat of this.preset.cat || this.data[''][3]) {
-                       this.add(put(this.gallery, 'ul.gallery'), [cat]);
+                       this.add(put(this.form, 'ul.gallery'), [cat]);
                }
        }
 

diff --git a/word/memory.js b/word/memory.js
index 99e76e87ad66cec3e9d757f5b234ce68bacfc996..a70ec06638ac20ce07a2ec60bc2aff3803617ff8 100644 (file)
--- a/word/memory.js
+++ b/word/memory.js
@@ -42,6 +42,7 @@ class WordMemory extends WordQuiz {
        }
 
        load() {
+               this.configure();
                if (this.preset.pairs) {
                        this.dataurl = '/data/wordpairs.json';
                        fetch(this.dataurl).then(res => res.json()).then(pairs => {
@@ -55,8 +56,10 @@ class WordMemory extends WordQuiz {
        }
 
        setup() {
+               super.setup();
                this.turned = [];
-               this.form = document.getElementById('quiz');
+               this.form.innerHTML = '';
+               this.form.className = '';
 
                let cards;
                if (this.words) {

diff --git a/word/multichoice.js b/word/multichoice.js
index 58ed7b7bef26408dfa9e0579d93264cd3457bf47..680cf0d886bea822915a45f19943e848fe5914c0 100644 (file)
--- a/word/multichoice.js
+++ b/word/multichoice.js
@@ -25,7 +25,7 @@ class WordMultiChoice extends WordQuiz {
        }
 
        setup() {
-               this.form = document.getElementById('quiz');
+               super.setup();
                this.next();
        }
 };

diff --git a/word/quiz.js b/word/quiz.js
index 68c2ee81e69e1b7ccaaa34fa43e463cce76852bd..3243b19ed5c2f52ef019868a32136f253bf41481 100644 (file)
--- a/word/quiz.js
+++ b/word/quiz.js
@@ -62,7 +62,7 @@ class WordQuiz {
                return selection;
        }
 
-       configure(params) {
+       configure(params = window.location.hash.split('#')) {
                const opts = new Map(params.map(arg => arg.split(/[:=](.*)/)));
                for (let [query, val] of opts) {
                        if (query.match(/^\d+$/)) {
@@ -78,8 +78,12 @@ class WordQuiz {
                this.preset.dataurl = `/data/wordlist.${this.preset.lang}.json`
        }
 
+       setup() {
+               this.form = document.getElementById('quiz');
+       }
+
        load() {
-               this.configure(window.location.hash.split('#'));
+               this.configure();
                fetch(this.preset.dataurl).then(res => res.json()).then(json => {
                        this.words = this.dataselect(json)
                        this.setup();

diff --git a/word/wijzer.js b/word/wijzer.js
index 7446cc990e1231c7881041892c79da5e4d6e0457..2f73052e2fd93117134bbee055f39c567bcc2ea9 100644 (file)
--- a/word/wijzer.js
+++ b/word/wijzer.js
@@ -28,7 +28,8 @@ class WordWijzer extends WordQuiz {
        }
 
        setup() {
-               this.form = document.getElementById('quiz');
+               super.setup();
+               this.form.innerHTML = '';
                this.question = put(this.form, 'figure');
                this.words.splice(9)