Improve the quizz demo.

docs/demo/elements.md

@@ -50,20 +50,21 @@ module enable the creation of quizzes as dynamic page elements.
 <script>
 async function question(prompt, want) {
   const node = document.currentScript;
+  const core = await tdoc.import('tdoc/core.js');
   const quizz = await tdoc.import('tdoc/quizz.js');
-  quizz.question(node, prompt, resp => {
+  await core.typesetMath(quizz.question(node, prompt, resp => {
     if (resp === want) return true;
-    if (resp === 'hint') {
-      return `The solution is probably "${want}". Maybe. I'm not sure.`;
-    }
-  });
+    return core.html(
+      `The solution is <em>probably</em> "${want}". Maybe. I'm not sure.`);
+  }));
 }
 </script>
 
 1.  <script>
     const value = Math.floor(256 * Math.random());
-    question(`Convert 0b${value.toString(2).padStart(8, '0')} to decimal.`,
-             value.toString());
+    question(
+      `Convert \\(${value.toString(2).padStart(8, '0')}_2\\) to decimal.`,
+      value.toString());
     </script>
 2.  <script>
     question(`\
@@ -72,7 +73,7 @@ async function question(prompt, want) {
     indicate plausible alternatives.`, '42');
     </script>
 3.  The input field of quizz questions without a prompt uses the whole line.
-    <script>question(undefined, "I see");</script>
+    <script>question(undefined, "cool");</script>
 
 ## IFrames
 

tdoc/common/static/tdoc/quizz.js

@@ -40,13 +40,14 @@ export function question(node, prompt, check) {
     function checkResp(resp) {
         input.parentNode.classList.remove('good', 'bad');
         hint.classList.add('hide');
-        const good = check(resp);
-        input.parentNode.classList.add(good === true ? 'good' : 'bad');
-        if (typeof good === 'string') {
-            hint.replaceChildren(text(good));
+        let res = check(resp);
+        input.parentNode.classList.add(res === true ? 'good' : 'bad');
+        if (typeof res === 'string' && res !== '') res = text(res);
+        if (res instanceof Node) {
+            hint.replaceChildren(res);
             hint.classList.remove('hide');
         }
-        return good;
+        return res === true;
     }
     input.addEventListener('input', () => {
         input.parentNode.classList.remove('good', 'bad');
@@ -56,7 +57,7 @@ export function question(node, prompt, check) {
         if (e.altKey || e.ctrlKey || e.metaKey) return;
         if (e.key === 'Enter') {
             e.preventDefault();
-            if (checkResp(input.value) !== true) return;
+            if (!checkResp(input.value)) return;
             find(div, true)?.querySelector?.('input')?.focus?.()
         } else if (e.key === 'ArrowUp' && !e.shiftKey) {
             e.preventDefault();