Skip to content

Form Editing

Jump to bottom
Daniel Ramsay edited this page Sep 8, 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

<div class="row">
    <div class="col-md-4">
        <div class="radio">
            <label>
                <input name="choice" class="choice" id="choice26-1" value="Existing tool" type="radio"> Use existing tool
            </label>
        </div>
    </div>
    <div class="col-md-4">
        <div class="radio">
            <label>
                <input name="choice" class="choice" id="choice26-2" value="Adapt existing tool" type="radio"> Adapt existing tool
            </label>
        </div>
    </div>
    <div class="col-md-4">
        <div class="radio">
            <label>
                <input name="choice" class="choice" id="choice26-3" value="New tool" type="radio"> Build new tool
            </label>
        </div>
    </div>
</div>

Radio button markup is added to the slide content directly (using source mode in the WYSIWYG editor; </> in the toolbar). The value of the id="" attributes can be set to anything as long as it is unique for each input. The name and class attributes should be set to choice.

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

Option checkboxes

Example: slide 4.1

<ul>
    <li>
        <div class="checkbox">
             <input type="checkbox" name="answer[1]" id="checkbox42-1" value="Advising on how to choose or use a tool"> Advising on how to choose or use a tool
        </div>
    </li>
    <li>
        <div class="checkbox">
             <input type="checkbox" name="answer[2]" id="checkbox42-1" value="Building a tool"> Building a tool 
        </div>
    </li>
    <li>
         <div class="checkbox">
            <input type="checkbox" name="answer[3]" id="checkbox42-1" value="Help adapting an existing tool"> Help adapting an existing tool
        </div>
    </li>
    <li>
        <div class="checkbox">
             <input type="checkbox" name="answer[4]" id="checkbox42-1" value="Implementing and managing a tool"> Implementing and managing a tool
         </div>
    </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.

Clone this wiki locally