Option {…} …

An option is a form feature that consists of a pre-formulated phrase and an associated form field to select the option. The form field is usually a checkbox that can be either checked or not checked, giving users a binary choice.

Options can occur in polls, in multiple-choice tests, in order forms or to confirm terms of service for example.

Aneamal also offers a few special-purpose options: preselected options, required options, mutually exclusive options and binary challenges. This page discusses basic options.

How to

Mark each option with curly brackets {…} at the beginning of a new line. The right curly bracket is followed by a space and the option’s text.

Each option can have a key between its curly brackets { and } as in the examples below. This key is not displayed publicly, but it can be processed programmatically when the form is submitted. The key identifies a selected option then.

You can write a question or task directly in the line above the options as shown in the second example.

Examples

The first example shows a simple option.

{toothbrush} I want a free bamboo toothbrush.

The second example asks a question with multiple options as answers:

Which terrestrial planets have you visited already?
{☿} Mercury
{♀} Venus
{♁} Earth
{♂} Mars

For developers

When Aneamal is translated to HTML, an options block is turned into an HTML fieldset element. Inside there will be an input element for each option. The element’s type is checkbox and its value attribute contains the option’s key. The input is followed by a label element that contains the option’s text. The options are separated by br elements. So the first example becomes:

<fieldset>
<input id='_1' name='_1' form='_f1' type='checkbox' value='toothbrush'> <label for='_1'>I want a free bamboo toothbrush.</label>
</fieldset>

The values of the HTML attributes id, name, form and for vary depending on where the options block occurs in the webpage.

A question directly above the options is turned into a HTML legend element when Aneamal is translated to HTML. So the second example becomes:

<fieldset>
<legend>Which terrestrial planets have you visited already?</legend>
<input id='_2' name='_1' form='_f2' type='checkbox' value='☿'> <label for='_2'>Mercury</label><br>
<input id='_3' name='_2' form='_f2' type='checkbox' value='♀'> <label for='_3'>Venus</label><br>
<input id='_4' name='_3' form='_f2' type='checkbox' value='♁'> <label for='_4'>Earth</label><br>
<input id='_5' name='_4' form='_f2' type='checkbox' value='♂'> <label for='_5'>Mars</label>
</fieldset>