moth/example-puzzles/example/5/puzzle.moth

59 lines
1.6 KiB
Plaintext
Raw Normal View History

2019-02-24 15:51:40 -07:00
Summary: Using JavaScript Input Helpers
Author: neale
Script: helpers.js
2019-09-09 18:31:34 -06:00
Script: draggable.js
2019-02-24 15:51:40 -07:00
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.
2019-02-24 15:51:40 -07:00
This is just a demonstration page.
You will probably only want one of these in a page,
to avoid confusing people.
RFC3339 Timestamp
<div class="answer" data-join="">
<input type="date">
<input type="hidden" value="T">
<input type="time" step="1">
<input type="hidden" value="Z">
</div>
2019-02-24 15:51:40 -07:00
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>
Free input, sorted, concatenated values
<ul class="answer lower sort">
<li><input></li>
<li><button class="expand" title="Add another input"></button><l/i>
</ul>
2019-09-09 18:31:34 -06:00
User-draggable values
<ul class="answer">
<li draggable="true"><input value="First" readonly></li>
<li draggable="true"><input value="Third" readonly></li>
<li draggable="true"><input value="Second" readonly></li>
</ul>
2019-02-24 15:51:40 -07:00
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>