Skip to content

Form Editing

Jump to bottom
Daniel Ramsay edited this page Nov 14, 2019 · 27 revisions

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>--]

Do you share or disclose personal data to any other people or organisations?

<div class="row">
    <div class="col-md-4">
[--radio|share_personal_data|yes|Yes--]
    </div>
    <div class="col-md-4">
[--radio|share_personal_data|no|No--]
    </div>
</div>

Does the project involve transfers of personal data outside the EU or EEA?

<div class="row">
    <div class="col-md-4">
[--radio|share_outside_eu|yes|Yes--]
    </div>
    <div class="col-md-4">
[--radio|share_outside_eu|no|No--]
    </div>
</div>

The first parameter (share_outside_eu) is a field name. Radio buttons are grouped into sets which share the same field name. Only one option can be chosen from a set with a given name.

The second parameter (yes/no) 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.

Alpaca form

[--alpaca|<id>--]

Loads a custom form from app/controller/forms/.json. The current saved data is passed into the form.

Example

Example for slide 2.2 (which uses answers from 2.1):

[--alpaca|2.2--]

Additional forms can be added to the codebase as files, and placed into slides using this placeholder tag.

Some custom transformation can be carried out before the form is rendered, but this needs to be written into the /project/form/ controller method.

Clone this wiki locally