Radio List
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
| Field Name | Description/Use | Type/Options | Optional/Mandatory |
| Type (v7.4+) |
This field defaults to the specific form part you selected from the Nodes Toolbox; for example, a radio list. However, you can use this field to quickly change the type of form part without having to recreate answer options. If you first created your question and a checklist, for example, but realize it should be a radio list, use this field to select an alternative question type, and click save. The system transfers the key parameters into the new question type. Parameters specific to the question type (e.g. top choice for dropdown) remain in the configuration, and will be redisplayed if you convert the form part back to your original selection. Making this change may trigger some validation warnings, which you can address as necessary. WARNING: When converting a radio list with "Route on Output" to a checklist, remove the Route on Output flag prior to converting your part or remember to connect the checklist with the next node using a standard link (not one that says "default" or a specific answer option). NOTE: When switching from a checklist to dropdown, the data type stays set to collection, which results in the dropdown allowing multiple values. To force the user to select only one value from the dropdown list, change the data type to text or number based on the answer options. |
- Radiolist - Checklist - Dropdown |
Mandatory |
| HTML enabled | When this is enabled you can put HTML formatting in the Question caption, which means the system will display HTML tags in the text in the caption editor as they would appear in a browser. The editor browser provides limited HTML editing options for text formatting. You can toggle the HTML-enabled button on and off to alternate between seeing and editing tags and displaying them as they will appear. | Yes | No | Optional |
| Question | This is the text the system shows in front of the radio list control. | Text | Mandatory |
| Short logging caption | The system records this text in the variable $(short_caption) so that it can ben displayed on screen (e.g. via the part/node template) or used elsewhere in the logicnet model. Advanced Note: The short logging caption cannot itself resolve any $(...) variables but in that event, you can use $(_.meta.short_caption) instead. This pulls the short_caption from the Data Log which means the question has to be active (not disabled) and traversed (the field is only populated once the question appears on screen). |
Text | Optional |
| Data object | This field is used to store the result of the selection in a data object. | Data object | Mandatory |
| Data type | This is the item type of the data object the radio list is being used to create. | Text Number |
Mandatory |
| Caption object | This is the name of the data object in which the caption associated with the user’s choice will be stored. | Data object | Optional |
| Default value | The system uses the value you enter in this field to pre-select an option. Note that the value entered here has to match a value in Options. | Text | Optional |
| Prefill value | This is the value they system fills in the control when no value has been set to the data object. Note Prefill is different from default in the sense that the system will not save the value to the data object--it will only display on the screen. Any subsequent nodes will work on the basis that THIS object is undefined. When the form is submitted, the system stores the value to the data object. |
Text | Optional |
| Weight | You can enter a value here and the system will assign that weight to this value if you don't specify the weight of the "Options". | Number | Optional |
| Submit on select | This field is used to submit the form on radio list selection so that system executes parallel and downstream steps as soon as the user makes a selection. | Yes | No | Optional |
| Route on output | If you select this field the system will follow the path to the next step based on the selection the user makes. (v8+) The default leg is renamed _unanswered to be consistent with the checklist implementation of this feature. |
Yes | No | Optional (when using data location = manual only) |
| Speech command | This is the alternative caption the system recognizes when your application uses the Speech Recognition module to make the checklist component the current element so that its individual items can be specified. | Text | Optional |
| Data location | This field is used to determine the store type of the checklist object. When you select Manual, the system creates items in the list using the Options table below. If you select Collection the system displays an editor so you can select a collection containing the items to list. If you select Table, the system displays an editor so you can select a table resource from the project and specify the filters and column details for a controlled set of data from the table to display as options in the radio list. | - Manual - Collection - Table data |
Mandatory |
| Options | The system creates radio list options using this field.
|
Table | Mandatory |
| Shape | If your application is using the Visual Navigation Framework, this is the shape in which the system will display the node. | - Rectangle - Diamond - Hexagon |
Mandatory |
| Display options horizontally | By default, the system displays all options in a vertical list. If you enable this option the system displays the options horizontally. | Yes | No | Optional |
| Maximum amount of columns | This is the maximum number of columns the system should display horizontally when displaying the fields. | Number | Optional |
Validation Tab Options
| Field Name | Description/Use | Type/Options | Optional/Mandatory |
| Type | This field allows you to configure a validation error to display when the condition is violated.
|
Options | Optional |
| Condition or Rule | This is only required when type=custom.
|
Optional | |
| Message | This is the message the system displays to the user when a validation rule is violated. The system only shows the first message for the violated rule to the user. | Text | Optional |
Style Tab Options
See the Style Tab Options article for more information about these settings.
Advanced Tab Options
| Field Name | Description/Use | Type/Options | Optional/Mandatory |
| Captions (v8.1+) |
This allows you to specify different captions based on rules. The system only displays one caption, the last caption in the table the rule determines to be true. If there is no rule the system determines to be true, the system uses the 'standard' caption. For an example, see Multi-Caption Example Project. | Text | Optional |
| Calculator Call (VGN Tab in v7.4+) |
This field is used to receive the result of the check list from a call node. | Call Logicnet | Optional |
| Display link text (VGN Tab in v7.4+) |
This field is used to show the result of the call node with a specific text. | - Data object - Text |
Optional |
| Disable logging | Click this checkbox to disable logging. | Checkbox | Optional |
| Use Image map (v7.4.5+) |
If you click this checkbox, the system will open a image selection field that allows you to select an image from your resources/images folder. When a user accesses your application, the system displays the selected image between the radio list question and selection options. See below for more information. | Checkbox | Optional |
| Hide options (v7.4.5+) |
For use with an image map, click this checkbox for the system will display the radio list question and image, but not the options. | Checkbox | Optional |
| Display Label Options | This field is used to show which values can be assigned by the call node (Calculator Call) object. The result of the call node must be only one of the values on the list.
|
Table | Mandatory |
Disable input expression |
Use this to disable the input (prevents the user from editing/changing the selected option) based on the value of another variable by entering $(...) here. Otherwise this will reflect the "Disable Input" checkbox setting in the STYLE tab (1 for disabled, 0 for enabled). | Text | Optional |
| Only use Display Label for connectors | If your application uses the Visual Guideline Framework and you check this checkbox the system will use the display label values, including blanks, for all outputs. | Checkbox | Optional |
| Processing Mode (v7.4+) |
The default behavior is Always use form value, which takes the user input or on-screen value, including "not answered", and assigns it to the data object. If an earlier answer/pathway combines to set a later on-screen variable, choose Use ctx for this data object to display the context value. This value can always be overwritten by user input. |
- Always use form value - Use ctx when form value empty |
Mandatory |
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.