Form Editing

Currently, the markup for the form contained in a slide is contained within the slide body itself.

Slide content allows the use of placeholders for generating some form elements.

Text areas

[--answer--]

Renders a single textarea for long text answers.

[--multiple-answer-0--] ... [--multiple-answer-9--]

Example: slide 1.3 in original Alidade content (sort of)

These placeholders can be used to render multiple textareas in a single slide. Note that the counters must be sequential. The counters can start at 0 or 1.

Radio buttons

Example: slide 2.6 in original Alidade content

Radio buttons are added with the [--radio] macro.

There are three parameters:

• field name
• symbolic name
• display title

[--radio|<name>|<value>|<title>--]

e.g
[--radio|optionfield|option1|Choose Option 1--]
[--radio|optionfield|option2|Choose Option 2--]

<div class="row">
    <div class="col-md-4">
       [--radio|chosen|option1|My Option 1--]
    </div>
    <div class="col-md-4">
       [--radio|chosen|option2|My Option 2--]
    </div>
</div>

The first parameter (chosen) is a field name. Only one option can be chosen from a set within a given field.

The second parameter (option1) is the value saved to the database. Every radio button value within a given set should have a unique name.

The third parameter is the label shown alongside the radio button.

The column widths are standard bootstrap. col-md-x should total 12 for each row.

Option checkboxes

Example: slide 4.1

[--check|<name>|<title>--]

<p>I am looking for advice on:</p>
<ul>
    <li>
       [--check|advise|Advising on how to choose or use a tool--]
    </li>
    <li>
       [--check|building|Building a tool--]
    </li>
    <li>
       [--check|adapting|Help adapting an existing tool--]
    </li>
</ul>

Checkboxes that are not directly related must be given a unique name. If you are using a set of checkboxes as a multi-select option (i.e. "check all that apply"), then use a single name followed by square brackets.

<p>I will be collecting data on:</p>
<ul>
    <li>
       [--check|topic[]|Some stuff--]
    </li>
    <li>
       [--check|topic[]|Physical Characteristics--]
    </li>
    <li>
       [--check|topic[]|Behaviour--]
    </li>
</ul>

Optional selection panels within pages

Similar to slide 1.3 in the original alidade content, single-option buttons can be used to show or hide information regions (and form elements) in a slide.

[--choicebutton|<name>|<title>--]

Creates a button with the internal identifier name and the title title. Multiple buttons can be placed on the same line in the text editor to show a row of buttons.

[--choicepanel|<name>--]
(some content)
[--endchoicepanel--]

Slide content enclosed within a [--choicepanel--] will only be shown when a button with the same name identifier is selected. The choice of button is persisted when the user moves between slides, and the corresponding content is shown when they revisit a slide.

Example

[--choicebutton|panel1|Option 1--][--choicebutton|panel2|Option 2--]

[--choicepanel|panel1--]
You chose option 1
[--endchoicepanel--]
[--choicepanel|panel2--]
You chose option 2
[--endchoicepanel--]

Array items

[--array|<name>--]

Renders a list of text boxes, with a hover toolbar to add/remove/reorder entries.

Sideboxes

[--box|<type>--]content[--endbox--]

You can create boxes that can go pretty much everywhere you want. Supported values for type

Light blue — [--box|questions--]content[--endbox--]

Grey — [--box|example--]content[--endbox--]

Green — [--box|casestudy--]content[--endbox--]

Purple — [--box|research--]content[--endbox--]

Orange — [--box|tips--]content[--endbox--]

Sideboxes we have so far:

• Example
• Context

Previous Answer

To insert a box containing the answer to a previous question

[--prev|<step>.<slide>|<field>--]

Example:

[--prev|1.1|answer--]

Can display the message "Previous content not found" if the user has not completed this slide yet.