Working with Radio Button elements (Inputs)

On the Insert tab the Inputs options include Radio Buttons:

Note: The Insert tab is always available in Claro. To access it in Flow you need to have the Ribbon toggle set to On.

Adding a Radio button element to your page creates a three-choice list with a radio button for each choice. The learner can select one of the choices.

To edit the default text for the choices, select the pencil icon then select each text field to change the text.

On the Options tab, the Variations section lets you switch the display style of the Radio Button element.

The Stack At options let you set the responsive behavior of the Radio Buttons in a Flow page.

In the Options section, you can select Sequential to order the buttons sequentially and select Full Width to have the buttons occupy the full width of the element.

To add an additional Choice to the Radio Button element, select Add. To remove a Choice, select the Choice you want to remove and click Remove Selected.

If you are in Designer mode the Options tab also lets you assign the learner’s selection on the Radio Button element to a Numeric variable.

To do that, select Variable to open the Form Variables panel.

Select the drop down list beside the Radio (it will be set to None by default).

If other Numeric variables have been created in the same Project they will be listed and you can choose one of them. Alternately, select New Variable then give the new variable a suitable name. Click OK to complete the process.

Using a Radio Button's Variable

The Radio Button’s variable will be:

• A numeric value matching the choice the learner made, for example, in a three-choice Radio Button, the variable will be set to 1, 2 or 3.
• A text string value matching the text of that choice, for example, "Apples" or "Oranges".

This means you can evaluate the numeric value as well as display the text value as a text string.

Here's an example use case.

Your page asks learners a question and uses a Radio Button element to provide three choices. 

"What is the next step you need to take?"

"1. Ask for a follow up call"

"2. Offer a discount"

"3. Ask what issues the client is having"

You've assigned the Radio Button element to a variable called "NextStep".

Once the learner makes a selection, you can evaluate the NextStep variable's numeric value and use it to trigger different pop ups as feedback. And in each pop up you can also display the text string value of the NextStep variable by inserting the variable into the text, for example, "You chose to {{NextStep}}, which is a good option at this point in your client call. This will..." 

The Style tab lets you set a color scheme for the Radio Button element. The colors are set by the Theme.

In Claro the FX tab lets you set an Entrance Effect including the Time the effect will take as well as the Direction of the effect.

You can also open the Timeline below the Stage to work with it.

In Flow the FX tab lets you set an Entrance Effect including the Direction of the effect. The effect will be triggered by the element's appearance on the page as the learner scrolls.

You can also set a Scroll effect on the element. Scroll effects give more control options than the basic Entrance effects.