From: Mischa POSLAWSKY <perl@shiar.org>
Date: Thu, 30 Dec 2021 04:57:50 +0000 (+0100)
Subject: word/quiz: common base class for all subpages
X-Git-Tag: v1.13~67
X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/af99f42e425d0fd4e22d92458d5dc2049429d684

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 c3adfd4..375b7c1 100644
--- 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 8aa952c..d0364e4 100644
--- 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 b98842f..aa018d0 100644
--- 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 15a51e3..a72f975 100644
--- 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
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);
+	}
+}