From: Mischa POSLAWSKY <perl@shiar.org>
Date: Mon, 6 Jun 2022 19:58:24 +0000 (+0200)
Subject: word/quiz: automatic subpage setup including specific css
X-Git-Tag: v1.14~63
X-Git-Url: http://git.shiar.net/sheet.git/commitdiff_plain/679167933e1f6655dbd24547175db23fedd391b4

word/quiz: automatic subpage setup including specific css
---

diff --git a/word.plp b/word.plp
index 0635161..36150ab 100644
--- a/word.plp
+++ b/word.plp
@@ -12,8 +12,13 @@ if ($Request and $Request =~ m{\A([^/]+)}) {
 	}
 	else {
 		Html({
-			raw => join("\n", map qq(<script src="/word/$_"></script>),
-				'put.min.js', 'quiz.js', "$name.js",
+			raw => join("\n",
+				(map {qq(<script src="/word/$_"></script>)}
+					'put.min.js', 'quiz.js', "$name.js",
+				),
+				(map {qq(<link rel="stylesheet" type="text/css" href="/$_">)}
+					grep {-e} "word/$name.css"
+				),
 			),
 			lang => $lang,
 		});
diff --git a/word/finder.js b/word/finder.js
index e842d06..b5cb929 100644
--- a/word/finder.js
+++ b/word/finder.js
@@ -23,7 +23,7 @@ class WordFinder extends WordQuiz {
 					innerHTML: this.namehtml(title),
 				});
 			}
-			if (level <= 1 && subs.length >= 2) {
+			if (level <= 1 && subs.length >= 4) {
 				put(worditem, '.large');
 			}
 			if (subs.length) {
diff --git a/word/memory.plp b/word/memory.css
similarity index 80%
rename from word/memory.plp
rename to word/memory.css
index 65184d8..314e036 100644
--- a/word/memory.plp
+++ b/word/memory.css
@@ -1,13 +1,3 @@
-<(../common.inc.plp)><:
-
-our $wordlistbase;
-
-Html({
-	raw => <<'EOT',
-<script src="/word/put.min.js"></script>
-<script src="/word/quiz.js"></script>
-<script src="/word/memory.js"></script>
-<style>
 /* cards */
 #quiz {
 	display: grid;
@@ -70,8 +60,3 @@ figure.good {
 	66% { filter: hue-rotate(360deg); transform: rotate(360deg) }
 	100% { filter: hue-rotate(360deg); transform: rotate(360deg) }
 }
-</style>
-EOT
-});
-say '<h1>memory</h1><p id="quiz"></p>';
-say "<script>new WordMemory('/$wordlistbase.json')</script>";
diff --git a/word/multichoice.css b/word/multichoice.css
new file mode 100644
index 0000000..15c3023
--- /dev/null
+++ b/word/multichoice.css
@@ -0,0 +1,15 @@
+img {
+	width: 90vw;
+	max-width: 64em;
+	margin: 2em 0 1ex;
+}
+li {
+	font-size: 20pt;
+	padding: .2ex;
+}
+li:hover {
+	cursor: pointer;
+	background: #8888;
+}
+li.wrong {background: #F008}
+li.good {background: #0F08}
diff --git a/word/multichoice.js b/word/multichoice.js
index 680cf0d..7402507 100644
--- a/word/multichoice.js
+++ b/word/multichoice.js
@@ -1,4 +1,4 @@
-class WordMultiChoice extends WordQuiz {
+class WordMultichoice extends WordQuiz {
 	next() {
 		if (this.words.length < 4) return;
 		let word = this.words.shift();
diff --git a/word/multichoice.plp b/word/multichoice.plp
deleted file mode 100644
index a72f975..0000000
--- a/word/multichoice.plp
+++ /dev/null
@@ -1,31 +0,0 @@
-<(../common.inc.plp)><:
-
-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 {
-	width: 90vw;
-	max-width: 64em;
-	margin: 2em 0 1ex;
-}
-li {
-	font-size: 20pt;
-	padding: .2ex;
-}
-li:hover {
-	cursor: pointer;
-	background: #8888;
-}
-li.wrong {background: #F008}
-li.good {background: #0F08}
-</style>
-EOT
-});
-
-say '<h1 id=quiz>quiz</h1>';
-say "<script>new WordMultiChoice('/$wordlistbase.json')</script>";
diff --git a/word/wijzer.plp b/word/wijzer.css
similarity index 64%
rename from word/wijzer.plp
rename to word/wijzer.css
index 614ab73..445b6f2 100644
--- a/word/wijzer.plp
+++ b/word/wijzer.css
@@ -1,13 +1,3 @@
-<(../common.inc.plp)><:
-
-our $wordlistbase;
-
-Html({
-	raw => <<'EOT',
-<script src="/word/put.min.js"></script>
-<script src="/word/quiz.js"></script>
-<script src="/word/wijzer.js"></script>
-<style>
 #quiz {
 	display: grid;
 	grid: auto / 2fr 1fr;
@@ -48,9 +38,3 @@ li[onclick]:hover {
 		grid-column: auto;
 	}
 }
-</style>
-EOT
-});
-
-say '<h1>per seconde wijzer</h1><div id=quiz></div>';
-say "<script>new WordWijzer('/$wordlistbase.json')</script>";