Radio Group

The Radio Group control creates a set of radio buttons. Radio buttons are a set of controls that allow only one of the items to be selected at a time. The layout of a Radio Group can be a bit difficult to manage as items will wrap until they run out of usable area, and anything remaining will be cut off. This means that you’ll need to work with the various properties (including dimensions, font, padding and spacing) to achieve the layout that meets your UI’s design.

Radio Group Settings

General Settings

Accessible Name

The visual label that appears on the button.

This value must be a meaningful label for the control. In addition, there must be a visible label in the underlying screen shot that matches this name.

Width/Height/Top/Left

Controls the size of the control and position of the control on the screen.

Tip

With the control selected and focused in the Editing Canvas, you can press the right, left, up or down arrows to nudge the control one pixel in the direction pressed.

Holding the control key while pressing one of the arrows will resize the control in the direction pressed by one pixel.

Holding shift will cause the nudge or resize to scale by 10 pixels instead of 1.

Options

The list of options that appear in the drop down. You can add new options by entering your option label the text input and then pressing the Add button. Options appear in the list with behavior similar to both the Screen and control list: You can delete an option by clicking the trash can icon, or move the option up or down in the list using the up and down chevrons. Options, however, cannot be edited; If you need to change the label on an option, you will need to delete and re-create it.

You can add a blank option by clicking the Add button with no text in the text label input. The item will display as [ blank ] in the list, but will appear as an empty option to the learner.

Values

Default Value

The value of the control when the learner first arrives at the screen.

Required Value

The value of the control that learner must provide for the control to be evaluated as correct.

Feedback Hint

The hint text that appears in the error dialog if the user enters the value in this control incorrectly.

Box

The box properties for a Radio Group modify the background of each item, not the outer container.

Background Color

Sets the background color of the control. Clicking the swatch for the color will open a color picker dialog allowing you to choose the color visually.

Border Style

Sets the type of border used on the control. Options for this setting are Solid (normal),  Inset or Outset (chiseled 3D appearance), dotted, dashed or none to remove the border entirely.

Border Width

The pixel width of the border. Note that the 3D styles will be nearly invisible unless the width is set to 2 or greater.

Border Radius

Allows the borders on the control to be rounded by the value specified. A value of 0 will create square corners.

Border Color

The color of the border. Using a 3D style disables this option (as the effect determines the color). Clicking the swatch for the color will open a color picker dialog allowing you to choose the color visually.

Additional Details

Check Style

The type of check to place in the box. The default value is “Circle”. Available values are a Check symbol, an “X”, or square which will allow you to replicate the appearance of checkboxes.

Layout Direction

Allows you to align the items in the group in a column or a row.

Item Spacing

The amount of empty space between each item, in pixels.

Check Color

Sets the color of the check symbol.

Box Size

Sets the size of the box in pixels. Values can be between 12 and 32 pixels. Changing this value will also change the size of the check symbol.

When changing this value, you must also change the value of Box Border Radius to be half of this value to maintain a circular box.

Box Line Style

Sets the type of line used for the box; Values are the same as Border Style.

Box Line Width

Sets the width of the line used for the box. Altering this value will subtract from the size of the check symbol rather than enlarging the box itself.

Box Line Radius

Sets the border radius on the box, creating rounded corners. A value of 0 will create a square box.

Box Line Color

Sets the color of the box line.

Box Background Color

Sets the background color that appears within the box.