JS Input Helpers

example-puzzles/example/5/helpers.js

@@ -0,0 +1,46 @@
+function helperUpdateAnswer(event) {
+  let e = event.currentTarget
+  let value = e.value
+  let inputs = e.querySelectorAll("input")
+  
+  if (inputs.length > 0) {
+    // If there are child input nodes, join their values with commas
+    let values = []
+    for (let c of inputs) {
+      if (c.type == "checkbox") {
+        if (c.checked) {
+          values.push(c.value)
+        }
+      } else {
+        values.push(c.value)
+      }
+    }
+    value = values.join(",")
+  }
+
+  // First make any adjustments to the value
+  if (e.classList.contains("lower")) {
+    value = value.toLowerCase()
+  }
+  if (e.classList.contains("upper")) {
+    value = value.toUpperCase()
+  }
+
+  document.querySelector("#answer").value = value
+}
+
+function helperActivate(e) {
+  e.addEventListener("input", helperUpdateAnswer)
+}
+
+function helperInit(event) {
+  for (let e of document.querySelectorAll(".answer")) {
+    helperActivate(e)
+  }
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", helperInit);
+} else {
+  helperInit();
+}

example-puzzles/example/5/puzzle.moth

@@ -0,0 +1,39 @@
+Summary: Using JavaScript Input Helpers
+Author: neale
+Script: helpers.js
+Answer: helper
+
+MOTH only takes static answers:
+you can't, for instance, write code to check answer correctness.
+But you can provide as many correct answers as you like in a single puzzle.
+
+This page has an associated `helpers.js` script
+you can include to assist with input formatting,
+so people aren't confused about how to enter an answer.
+
+You could also write your own JavaScript to validate things
+
+This is just a demonstration page.
+You will probably only want one of these in a page,
+to avoid confusing people.
+
+Timestamp
+<input type="datetime-local" class="answer">
+
+All lower-case letters
+<input class="answer lower">
+
+Multiple concatenated values
+<div class="answer lower">
+  <input type="color">
+  <input type="number">
+  <input type="range" min="0" max="127">
+  <input>
+</div>
+
+Select from an ordered list of options
+<ul class="answer">
+  <li><input type="checkbox" value="horn">Horns</li>
+  <li><input type="checkbox" value="hoof">Hooves</li>
+  <li><input type="checkbox" value="antler">Antlers</li>
+</ul>