From: Mischa POSLAWSKY <perl@shiar.org>
Date: Wed, 20 Oct 2021 21:33:04 +0000 (+0200)
Subject: word/quiz: put-selector library to build html in js
X-Git-Tag: v1.13~126
X-Git-Url: http://git.shiar.net/sheet.git/commitdiff_plain/672c988ed67ead332ff818d481b0a452b988aa30

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 5c53b31..811bb08 100644
--- 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 2b1c531..ad2f7a0 100644
--- 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 ce60d3a..3bfa2ca 100644
--- 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 c40a7cd..9d4afc8 100644
--- 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>