Description

The radiolist part allows users to select a value from a list of items, causing that value to be stored in the corresponding data object. Unlike a checklist, a radio list is a list of objects from which a user can only select one item at a time. The radiolist part contains a routing function that allows you to create links to different downstream steps based on the selected value.

Use

You can use this part to create an interactive form that presents a question or topic to a user along with a discrete list of selectable answers. The user selects or deselects a single option at a time, and they can only select one option from the presented list. The radiolist part saves the value associated with the option selected by the user in the data object. Since there is only one allowable option, the data object is not a collection. However, in the data object parameter, you can specify one element within a collection.

An important element of this part is that it has a built-in routing function that you can activate by checking the "route on output" option. This allows you to assign a different outbound link from the radio list form node to downstream nodes for each possible answer.

For projects created without a framework, you can use the radiolist part to add a radio list control in a page. In the Designer, add a form node. In the form node editor, "insert radio list" appears as an option in the menu bar. Position your cursor in the HTML editor where you want to insert the radio list control, and select the insert radio list option. The system inserts the part and displays the radiolist part editor. If your project is based on a framework, you can also create individual radio list "form part" nodes. The part editor may contain additional parameters for controlling functionality specific to that framework. Based on the framework type for your project,  you can add options and pass the selected option to a variable and store the selections this way.

NOTE: Due to the underlying code, you should not use the following words in a data object name: and, break, do, else, elseif, end, false, for, function, if, in, local, nil not, or, repeat, return, then, true, until, while, type. You should also never start a data object with a number.

Tips and Tricks

Route on Output in Assessment Framework Applications

Use this feature to determine the user experience when answering questions. With route on output unchecked, any subsequent questions will appear on screen at the same time and the user can answer in any order. For a more structured step-by-step user experience, connect the _unanswered leg of a radio (with route on output enabled) to the STOP node (or an empty process node) to cause the UI to stop here until the question is answered. In version 8 and later, the same feature is available for checklists.

Reordering Options

As of v8, you can easily reorder manually entered options in a radiolist, dropdown, or checklist by dragging the row up or down. Using your mouse, click and hold the left-most column indicator, move it to the right location, and release. 

Sticky Editor Tabs

From v8 on, the part editor tab navigation is sticky in that whichever tab is active for the node you are inspecting/editing, when you click to another node, the same tab opens. This is helpful when you are making "mass changes", for instance adding mandatory validation to multiple nodes: select the validation tab, then as you click on each node to be edited, the validation tab automatically shows first.

Editor Fields

Basic Tab Options

Validation Tab Options

Style Tab Options

See the Style Tab Options article for more information about these settings.

Advanced Tab Options

Clickable Image Maps

For Release 7.4.5 onwards, Designer Users can utilize an image map with defined areas to act as an input (either radiolist or checklist). When clicking on an area (can be a rectangle, circle, or multi-point polygon), the click is translated into the selection of an answer option. An example project shows a human body map with clickable areas for heart, lungs, etc. The radiolist options can be shown or hidden from view.

For help laying out the clickable areas, there are several free tools available on the internet, including:

• https://www.image-map.net/ (good for creating simple image maps) or
•  https://summerstyle.github.io/summer/ (more sophisticated tool for intricate shapes, PLUS the ability to load a set of coordinates and edit).

For some basic information on how clickable maps work in browsers, see this article.

Implementation Notes:

• Clickable areas should not overlap. Take care to draw the map coordinates accurately.
• Only one fully enclosed area can be defined for each answer option.
• Depending on the image, leave space between areas so the user can easily tell which part of the image is selected.
• Clickable areas will show with a change in mouse style.
• When hovering over a clickable area, the system shows the caption for that answer option as a tooltip.

Examples

Download and import this example project in your workspace. This example shows various basic configurations of the radio list part.

Clickable Image Example

Download and import this second example project to see the human body as a clickable map supporting a radiolist choice.

Conditions on Answer Options

Check out the article on Setting Conditions on Answer Options for help showing a subset of answer options based on user-defined conditions.