moth

puzzle.md

 1---
 2authors: 
 3  - neale
 4scripts:
 5  - filename: helpers.js
 6  - filename: draggable.js
 7answers:
 8  - helper
 9debug:
10  summary: Using JavaScript Input Helpers
11---
12MOTH only takes static answers:
13you can't, for instance, write code to check answer correctness.
14But you can provide as many correct answers as you like in a single puzzle.
15
16This page has an associated `helpers.js` script
17you can include to assist with input formatting,
18so people aren't confused about how to enter an answer.
19
20You could also write your own JavaScript to validate things.
21
22This is just a demonstration page.
23You will probably only want one of these in a page,
24to avoid confusing people.
25
26### RFC3339 Timestamp
27<div class="answer" data-join="">
28  <input type="date">
29  <input type="hidden" value="T">
30  <input type="time" step="1">
31  <input type="hidden" value="Z">
32</div>
33
34### All lower-case letters
35<input class="answer lower">
36
37### Multiple concatenated values
38<div class="answer lower">
39  <input type="color">
40  <input type="number">
41  <input type="range" min="0" max="127">
42  <input>
43</div>
44
45### Free input, sorted, concatenated values
46<ul class="answer lower sort">
47  <li><input></li>
48  <li><button class="expand" title="Add another input">➕</button><l/i>
49</ul>
50
51### User-draggable values
52<ul class="answer">
53  <li draggable="true"><input value="First" readonly></li>
54  <li draggable="true"><input value="Third" readonly></li>
55  <li draggable="true"><input value="Second" readonly></li>
56</ul>
57
58### Select from an ordered list of options
59<ul class="answer">
60  <li><input type="checkbox" value="horn">Horns</li>
61  <li><input type="checkbox" value="hoof">Hooves</li>
62  <li><input type="checkbox" value="antler">Antlers</li>
63</ul>
64
65### Substring matches
66#### Any substring
67<input class="answer substring">
68
69#### Only if at the beginning
70<input class="answer substring anchor-beg">
71
72#### Only if at the end
73<input class="answer substring anchor-end">