Add support for hints in quizz questions.

docs/demo/elements.md

@@ -49,9 +49,14 @@ module enable the creation of quizzes as dynamic page elements.
 
 <script>
 async function question(text, want) {
-    const node = document.currentScript;
-    const quizz = await tdoc.import('tdoc/quizz.js');
-    quizz.question(node, text, resp => resp === want);
+  const node = document.currentScript;
+  const quizz = await tdoc.import('tdoc/quizz.js');
+  quizz.question(node, text, resp => {
+    if (resp === want) return true;
+    if (resp === 'hint') {
+      return `The solution is probably "${want}". Maybe. I'm not sure.`;
+    }
+  });
 }
 </script>
 

tdoc/common/static/tdoc/quizz.js

@@ -28,27 +28,35 @@ export function question(node, prompt, check) {
 <div class="input">\
 <input autocapitalize="off" autocomplete="off" autocorrect="off"\
  spellcheck="false"><button class="tdoc-check fa-check"></button></div>\
+<div class="hint hide"></div>\
 </div>`);
     if (prompt) {
         if (typeof prompt === 'string') prompt = text(prompt);
         div.querySelector('.prompt').appendChild(prompt);
     }
     const input = div.querySelector('input');
     const btn = div.querySelector('button');
+    const hint = div.querySelector('.hint');
     function checkResp(resp) {
         input.parentNode.classList.remove('good', 'bad');
+        hint.classList.add('hide');
         const good = check(resp);
-        input.parentNode.classList.add(good ? 'good' : 'bad');
+        input.parentNode.classList.add(good === true ? 'good' : 'bad');
+        if (typeof good === 'string') {
+            hint.replaceChildren(text(good));
+            hint.classList.remove('hide');
+        }
         return good;
     }
     input.addEventListener('input', () => {
         input.parentNode.classList.remove('good', 'bad');
+        hint.classList.add('hide');
     });
     input.addEventListener('keydown', (e) => {
         if (e.altKey || e.ctrlKey || e.metaKey) return;
         if (e.key === 'Enter') {
             e.preventDefault();
-            if (!checkResp(input.value)) return;
+            if (checkResp(input.value) !== true) return;
             find(div, true)?.querySelector?.('input')?.focus?.()
         } else if (e.key === 'ArrowUp' && !e.shiftKey) {
             e.preventDefault();
@@ -58,7 +66,11 @@ export function question(node, prompt, check) {
             find(div, true)?.querySelector?.('input')?.focus?.()
         }
     });
-    btn.addEventListener('click', () => { checkResp(input.value); });
+    input.addEventListener('blur', () => hint.classList.add('hide'));
+    btn.addEventListener('click', () => checkResp(input.value));
+    btn.addEventListener('blur', (e) => {
+        if (e.relatedTarget !== input) hint.classList.add('hide');
+    });
     node.after(div);
     focusIfVisible(input);
     return div;

tdoc/common/static/tdoc/styles.css.jinja

@@ -156,6 +156,7 @@ div.tdoc-quizz {
     align-items: baseline;
     margin: 0.3rem 0;
     column-gap: 0.3rem;
+    position: relative;
 }
 div.tdoc-quizz > .prompt {
     flex: 1 1 auto;
@@ -191,11 +192,29 @@ div.tdoc-quizz > .input::before {
 }
 div.tdoc-quizz > .input.bad::before {
     content: '\f00d';
-    color: red;
+    color: var(--pst-color-danger);
 }
 div.tdoc-quizz > .input.good::before {
     content: '\f00c';
-    color: green;
+    color: var(--pst-color-success);
+}
+div.tdoc-quizz > .hint {
+    position: absolute;
+    bottom: calc(100% + 0.8rem);
+    right: 0;
+    max-width: 60%;
+    padding: 0.25rem 0.5rem;
+    border-left: 0.2rem solid var(--pst-color-success);
+    border-radius: 0.25rem;
+    background-color: var(--pst-color-success-bg);
+    box-shadow: 0 0.2rem 0.5rem var(--pst-color-shadow),
+                0 0 0.0625rem var(--pst-color-shadow);
+    z-index: 100;
+    transition: 0.3s visibility, 0.3s opacity;
+}
+div.tdoc-quizz > .hint.hide {
+    visibility: hidden;
+    opacity: 0;
 }
 
 /* Auto-sizing text area */