word/quiz: automatic subpage setup including specific css

diff --git a/word.plp b/word.plp
index 0635161a96230df05d2eea57e057b96a824a0e32..36150ab33e1b4b7d1d66416919831a87788041bf 100644 (file)
--- 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 e842d0671d2b2321db5ba13798c48a7a9a219616..b5cb9291f614c648d8403e723c5d345a29e901e5 100644 (file)
--- 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 65184d83131dc09e00a178c17b22649e6b576672..314e036d65114e778b2b4963455d7caad3922de3 100644 (file)
--- 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 (file)
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 680cf0d886bea822915a45f19943e848fe5914c0..7402507aa90e33c1fb481c3840918ec93c455da8 100644 (file)
--- 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 (file)
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 614ab736270f0a04a40d76ca2af89f37e5248bf2..445b6f26ad6d64b48218f0b12af13f2b4e5e59aa 100644 (file)
--- 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>";