word/quiz: put-selector library to build html in js

An <10kB include (upto 1.2kB minified and compressed) to facilitate element
wrangling without need for larger jqueries and the like.  Easier to maintain
and should save more.

diff --git a/.gitignore b/.gitignore
index 5c53b312bee52468fc3ec73056124071c8dfbcbd..811bb088367319c258b55907d101d3f5dc9fde8f 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 # downloaded data and generated includes
 /data
+/word/put.js
 
 # derived contents
 /sitemap.xml

diff --git a/Makefile b/Makefile
index 2b1c53163067cac0d1e21d533e254144a3dc4d52..ad2f7a02d126e1716a13d9a487946e8864e6ebc1 100644 (file)
--- a/Makefile
+++ b/Makefile
@@ -17,7 +17,10 @@ sitemap.xml: tools/mksitemap
 light.css: tools/stripcss base.css
        $(call cmdsave,$^)
 
-word: data/wordlist.en.json data/wordlist.nl.json data/wordlist.ru.json
+word: word/put.js data/wordlist.en.json data/wordlist.nl.json data/wordlist.ru.json
+
+word/put.js: $(download)
+       tools/wget-ifmodified https://github.com/kriszyp/put-selector/raw/master/put.js $@
 
 data/DerivedAge.txt: $(download)
        tools/wget-ifmodified http://www.unicode.org/Public/UNIDATA/$(@F) $@

diff --git a/word/quiz.js b/word/quiz.js
index ce60d3a4a64d7fbfa33262e75347f70dd03fd195..3bfa2ca3097a42169631240fd17a4ecb4722a998 100644 (file)
--- a/word/quiz.js
+++ b/word/quiz.js
@@ -3,28 +3,23 @@ dataurl: '/data/wordlist.nl.json',
 
 next: () => {
        let word = quiz.words.shift();
-       let question = document.createElement('img');
-       question.src = `/data/word/en/${word[0]}.jpg`;
-       question.style.maxWidth = '50%';
+       let form = put(quiz.form,
+               'img[src=$]+ul', `/data/word/en/${word[0]}.jpg`,
+       );
 
        let answers = [word[2], quiz.words[1][2], quiz.words[2][2], quiz.words[3][2]]
                .sort(() => {return .5 - Math.random()}) // shuffle
-       let form = document.createElement('ul');
        answers.forEach(suggest => {
-               let option = document.createElement('li');
-               option.onclick = () => {
+               let option = put(form, 'li', suggest, {onclick: () => {
                        if (suggest != word[2]) {
                                // incorrect
-                               option.classList.add('wrong');
+                               put(option, '.wrong');
                                return;
                        }
-                       option.classList.add('good');
+                       put(option, '.good');
                        window.setTimeout(quiz.next, 500);
-               };
-               option.append(suggest);
-               form.append(option);
+               }});
        });
-       quiz.form.append(question, form);
 },
 
 setup: () => {

diff --git a/word/quiz.plp b/word/quiz.plp
index c40a7cd5724cc35379d0460335bcad458b253023..9d4afc8990413eece557226d7943fe47a688ebb6 100644 (file)
--- a/word/quiz.plp
+++ b/word/quiz.plp
@@ -2,8 +2,12 @@
 
 Html({
        raw => <<'EOT',
+<script src="/word/put.js"></script>
 <script src="/word/quiz.js"></script>
 <style>
+img {
+       max-width: 50%;
+}
 .wrong {background: red}
 .good {background: green}
 </style>