word/quiz: answer selection styling (hover)

diff --git a/word/quiz.js b/word/quiz.js
index ef5e0d84735c1f41565916d10db7080306a878ca..d2a581824d6feb4f271af1524140c720e1eb968d 100644 (file)
--- a/word/quiz.js
+++ b/word/quiz.js
@@ -8,7 +8,8 @@ class Quiz {
                let answers = [word[2], this.words[1][2], this.words[2][2], this.words[3][2]]
                        .sort(() => {return .5 - Math.random()}) // shuffle
                answers.forEach(suggest => {
                let answers = [word[2], this.words[1][2], this.words[2][2], this.words[3][2]]
                        .sort(() => {return .5 - Math.random()}) // shuffle
                answers.forEach(suggest => {

-                       let option = put(form, 'li', suggest, {onclick: () => {
+                       let label = suggest.replace(/\/.*/, '');
+                       let option = put(form, 'li', label, {onclick: () => {

                                if (suggest != word[2]) {
                                        // incorrect
                                        put(option, '.wrong');
                                if (suggest != word[2]) {
                                        // incorrect
                                        put(option, '.wrong');

diff --git a/word/quiz.plp b/word/quiz.plp
index 00d82d27d36c441c13bacb833a23c266045db997..7fc375e8fcd5c81519ae1ae015c5586e7237904b 100644 (file)
--- a/word/quiz.plp
+++ b/word/quiz.plp
@@ -6,11 +6,21 @@ Html({
 <script src="/word/quiz.js"></script>
 <style>
 img {
 <script src="/word/quiz.js"></script>
 <style>
 img {

-       max-width: 50%;
+       width: 90vw;
+       max-width: 64em;
+       margin: 2em 0 1ex;

 }
 }

-.wrong {background: red}
-.good {background: green}
+li {
+       font-size: 20pt;
+       padding: .2ex;
+}
+li:hover {
+       cursor: pointer;
+       background: #8888;
+}
+li.wrong {background: #F008}
+li.good {background: #0F08}

 </style>
 EOT
 });
 </style>
 EOT
 });

-say '<h1>quiz</h1><p id="quiz">test</p>';
+say '<h1 id=quiz>quiz</h1>';