Select Component

The Select component lets the learner select an option from a drop-down list. The chosen option value can also be saved to a Variable.

This article provides an overview of the Select component, component setup and behavior, and examples of Select component configurations.

Component overview

The Select component is an interactive component that lets the learner select an option from a drop-down list. The Select component is flexible and, with the configuration set to Allow Editing, the learner can select another option after submitting. The selected option value can also be saved to a Variable.

The Select component is fully responsive and can be added to your Evolve course as a left-handed, full-width, or a right-handed component.

Component set up

Follow these steps to add the Select component to a Block:

1. Click Add Component.
2. Use the component search or scroll to find the Select component.
3. Click the Select component and select Add Left, Add Full, or Add Right.

Click the Edit Component icon on the newly added Select component to begin set up.

General section

In the General section:

Add Select Title, or a Select Display Title, as needed. Select Display Title is seen by learners.

Scroll down the page and add your Select Body. Use the text editor to style and format your text, as needed.

1. Add Select Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label. The Interaction Label allows you to add a widget before or after the Select component that can display an icon and label prior to the Select component completion, which changes to a different icon and label once the Select component is completed.

Select section

In the Select section:

1. Enter some Placeholder text. This is the text displayed on the Select component prior to the learner selecting an option.
2. Enter Submit Button Text that will be shown on the submit button.
3. Enter Submitted Label Text that will be displayed when an answer has been submitted.

1. Scroll down the page and toggle to Allow Editing. By default, this setting is enabled.
2. Enter Edit Button text, as needed.
3. Enter a Select Aria Label for screen readers, as needed.

Heads up!

Allowing Editing does not reset the component completion status.

Select Options section

In the Select Options section, you Add Select Option items to your Select component.

1. Enter Option Text. This is the text displayed in the component for your Select Option item.
2. Enter Option Value. This value can be saved to a Variable if this setting is enabled in the Behaviour section.

Add, duplicate, or delete Select Option Items as needed.

Behaviour section

In the Behaviour section, you toggle to Save User Answer to Variable. When enabled, you Select Variable or Create Variable.

Select a Variable Save Type. Variable Save Type controls how the learner’s selected option affects the value in the variable. Replace: replaces the current value of the variable with the value the user saves in the component. Concatenate: merges the option value to the variable. By default, Variable Save Type is set to Replace.

Component Examples

The following examples show how the Select component can be displayed in an Evolve course:

Example 1 – This example shows the Select component before an option has been selected.

Example 2 – This example shows the Selected component after submitting an answer and the Submitted Label Text is displayed below the Select component options. The setting Allow Editing is enabled and the Edit button is shown with the text “Edit Answer.”

Did this article help?

Let us know by leaving a star rating or review at the top of this article.