Skip to content

Form Editing

Daniel Ramsay edited this page Aug 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

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

Clone this wiki locally