word/quiz: common base class for all subpages

Only json loading from multichoice to start with.

diff --git a/word/memory.js b/word/memory.js
index c3adfd4590d3d7dd6e4edc519620a84b8442b78f..375b7c185bab825ba6eb63b5ea80862952ac6cf0 100644 (file)
--- a/word/memory.js
+++ b/word/memory.js
@@ -1,4 +1,4 @@
-class WordMemory {
+class WordMemory extends WordQuiz {
        turn(click) {
                let target = click.currentTarget;
                if (!target.classList.contains('turn')) {
@@ -37,7 +37,7 @@ class WordMemory {
                .forEach(card => put(card, '!.turn!.bad'));
        }
 
-       constructor() {
+       load(dataurl) {
                this.dataurl = '/data/wordpairs.json';
                fetch(this.dataurl).then(res => res.json()).then(pairs => {
                        this.turned = [];
@@ -55,5 +55,3 @@ class WordMemory {
                });
        }
 };
-
-new WordMemory();

diff --git a/word/memory.plp b/word/memory.plp
index 8aa952cbe24958d91725be8a2d952896f949e3d6..d0364e43bd601fc4dadf230adc9e28f86b81777b 100644 (file)
--- a/word/memory.plp
+++ b/word/memory.plp
@@ -3,6 +3,7 @@
 Html({
        raw => <<'EOT',
 <script src="/word/put.min.js"></script>
+<script src="/word/quiz.js"></script>
 <script src="/word/memory.js"></script>
 <style>
 /* cards */
@@ -70,3 +71,4 @@ figure.good {
 EOT
 });
 say '<h1>memory</h1><p id="quiz"></p>';
+say "<script>new WordMemory()</script>";

diff --git a/word/multichoice.js b/word/multichoice.js
index b98842f18a074e0cc6643b4afe38f8ba6975e1a7..aa018d015294ec5f031d58c8112542795b031178 100644 (file)
--- a/word/multichoice.js
+++ b/word/multichoice.js
@@ -1,4 +1,4 @@
-class Quiz {
+class WordMultiChoice extends WordQuiz {
        next() {
                let word = this.words.shift();
                let form = put(this.form,
@@ -21,12 +21,8 @@ class Quiz {
                });
        }
 
-       constructor(dataurl) {
-               fetch(dataurl).then(res => res.json()).then(json => {
-                       this.form = document.getElementById('quiz');
-                       this.words = Object.values(json)
-                               .sort(() => {return .5 - Math.random()}) // shuffle
-                       this.next();
-               });
+       setup() {
+               this.form = document.getElementById('quiz');
+               this.next();
        }
 };

diff --git a/word/multichoice.plp b/word/multichoice.plp
index 15a51e3c66298a9e6ec7c0ec1fd39188d1c6cf17..a72f9753f82a39c4407792a8609ebad0b877edb3 100644 (file)
--- a/word/multichoice.plp
+++ b/word/multichoice.plp
@@ -5,6 +5,7 @@ our $wordlistbase;
 Html({
        raw => <<'EOT',
 <script src="/word/put.min.js"></script>
+<script src="/word/quiz.js"></script>
 <script src="/word/multichoice.js"></script>
 <style>
 img {
@@ -27,4 +28,4 @@ EOT
 });
 
 say '<h1 id=quiz>quiz</h1>';
-say "<script>new Quiz('/$wordlistbase.json')</script>";
+say "<script>new WordMultiChoice('/$wordlistbase.json')</script>";

diff --git a/word/quiz.js b/word/quiz.js
new file mode 100644 (file)
index 0000000..0217586
--- /dev/null
+++ b/word/quiz.js
@@ -0,0 +1,17 @@
+class WordQuiz {
+       dataselect(json) {
+               let rows = Object.values(json);
+               return rows.sort(() => {return .5 - Math.random()}) // shuffle
+       }
+
+       load(dataurl) {
+               fetch(dataurl).then(res => res.json()).then(json => {
+                       this.words = this.dataselect(json)
+                       this.setup();
+               });
+       }
+
+       constructor(dataurl) {
+               this.load(dataurl);
+       }
+}