Checklist Component

The Checklist component lets you build a checklist into your Evolve course for the learner to check off.

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

Component overview

The Checklist component is an interactive component that lets you easily display a list of tasks, learning points, events, or process steps to learners for completion. The Checklist component is flexible and can be configured to show feedback once the component is completed.

The Checklist component is fully responsive and can display checklist items in a column layout and display item numbers, as needed.

Component set up

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

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

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

General section

In the General section:

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

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

1. Add Checklist 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 Checklist component that can display an icon and label prior to the Checklist component completion, which changes to a different icon and label once the Checklist component is completed.

Add Checklist Items

In the Items section, you Add Checklist Items to your Checklist component.

Enter Item Title. This is the text that will be displayed next to the checklist circle in your Checklist component.

Add, Duplicate, and Delete Checklist Items as needed.

Behaviour section

In the Behaviour section, you set Number Of Items Checked For Completion. This is the number of items that must be checked to complete the Checklist component. By default, this is set to 0.

Heads up!

If Number Of Items Checked For Completion is set to 0 or no value is entered, all Checklist component items must be checked for completion.

Toggle to Disable re-checking. With this setting enabled, the learner is stopped from unchecking a list item. By default, this setting is disabled.

Feedback settings

1. In the Behaviour section, you can select how the Feedback is displayed to the learner once the component is completed. Toggle Should Show Feedback to display a dialog once the component is completed.
2. Toggle Disable Feedback Dialog on Completion to switch this setting on. This will disable the feedback dialog automatically displaying once the component is completed. The learner will still be able to view the feedback using the “Show Feedback” button.
3. Toggle to enable Display Feedback Inline to display feedback below the component instead of a dialog. This setting enabled the Show Feedback Button, and Marking Icon is hidden.

Heads up!

If Should Show Feedback is enabled. A “Show Feedback” button will also be displayed below the items, and the button will be disabled until the component has been completed.

Enable Feedback Title to have feedback displayed with the display title of the Checklist component.

Heads up!

The Feedback Title setting will have no effect if Display Feedback Inline is enabled.

Enter your Feedback to be shown to the learner. Use the text editor to style and format your text, as needed.

Select a Feedback Image, as needed. Toggle to Set Image Per Device Size as needed.

Add Feedback Image Alt Text as needed.

Finally, in the Behaviour section, set Feedback Image Position. Select to position the Feedback Image on Top, Bottom , to the Left or to the Right . By default, this option is set to Right.

Appearance

1. In the Appearance section, toggle to Display Item Number. This will display a number inside the checkmark circle for each Checklist Item.
2. Select Check Mark Alignment to be aligned Top or Center. By default, this is set to Top.
3. Finally, in the Appearance section, toggle to Use Column Layout to display all Checklist Items in a column layout. When enabled, you set Columns by device size as needed. By default, the columns are set to 2 for desktops and tablets and 1 for mobiles.

Component Examples

The Checklist component gives you a lot of flexibility. Below are examples that illustrate some Checklist component setups:

Example 1 – Checklist component configured to show numbers inside the checklist item circles and to use column layout set to display the items in three columns. Item number 3 has been checked by the learner.

Example 2 – Checklist component configured with Check Mark Alignment set to Center and Should Show Feedback.

Example 3 – Shows the Feedback dialog after the Checklist component has been completed. In this example the Feedback Title is enabled and displayed before the Feedback text.

Did this article help?

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