Skip to content

Form Editing

Daniel Ramsay edited this page Sep 29, 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.

Radio buttons

Example: slide 2.6 in original Alidade content

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

There are two parameters:

  • symbolic name
  • display title
[--radio|<value>|<title>--]

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

The first parameter (option1) is the value saved to the database.

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

Option checkboxes

Example: slide 4.1

[--check|<name>|<title>--]
<ul>
    <li>
       [--check|answer[1]|Advising on how to choose or use a tool--]
    </li>
    <li>
       [--check|answer[2]|Building a tool--]
    </li>
    <li>
       [--check|answer[2]|Help adapting an existing tool--]
    </li>
</ul>

name should be set to answer[x] where x increases sequentially. Options are presented in a list.

Saving checkbox answers requires support to be written in to the slide save code.

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

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

Clone this wiki locally