Sorting Component

This component is NOT recommended for use when creating accessible courses.

The Sorting component is an interactive component that lets you test your learner’s knowledge by sorting items into the correct order.

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

Component overview

The Sorting component can be part of an assessment or used as a separate component in your course. The Sorting component is flexible and you can choose to display only text, or text and images, in your Sorting component items. There is also an option to set horizontal layout for the Sorting component items and various alternatives for displaying feedback, etc.

The Sorting component is fully responsive.

Component set up

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General & Behavior sections

In the General section:

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

Add your Question. Use the text editor to style and format your text.

1. Add Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.
3. Fill in Play Item Video ARIA Label, as needed.
4. Fill in Play Item Audio ARIA Label, as needed.

In the 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 Sorting component. This widget can display an icon and label prior to the Sorting component completion, which changes to a different icon and label once the Sorting component is completed.

In the Behavior section:

In the Behavior section, toggle to Disable Marking.

Note: When enabling Disable Marking, the Sorting Component will be marked as correct regardless of the order of the items.

In the Behavior section, you enter how many Attempts the learner is allowed for the Sorting component.

By default, Display Attempts Counter is enabled. Toggle to disable this setting.

1. Add Sorting Top/Left Label Text, as needed.
2. Add Sorting Bottom/Right Label Text, as needed.
3. Toggle to Show Video/Audio Sort Preview. Enabling this will display a video or audio preview of the current item sort order.
4. Edit text for Video/Audio Sort Preview Label Text, as needed. By default, this is set to Sorting Preview.
5. Enter Sorting Media Dialog Close Button Text, as needed. By default, this is set to Close.

Add Items

In the Items section, you Add Answers to your Sorting component.

For each Answer Item:

Add Item Text that is the text that will display as the sorting item text. Use Text Settings to style and format your text, as needed.

Select Media Type to be displayed for the Sorting Item. Available Media Type options are Image, Video, Gif, and Audio. Select your media and settings for the Sorting Item depending on the selected Media Type.

Add, Duplicate, and Delete Answer Items as needed.

Component Examples

The Sorting component gives you a lot of flexibility. Below are examples that illustrate different Sorting component configurations:

Example 1 – Sorting component items ready to sort into alphabetical order.

Example 2 – Sorting component displaying feedback in a pop-up.

Appearance

In the Appearance section, select Sorting Layout. By default, this is set to Vertical. This setting specifies which direction the sorting items are displayed.

Select Sorting Vertical Label Alignment to Left, Center, or Right. By default, this is set to Left.

Toggle to Display Item Number inside a circle in each Sorting component item.

Set the Maximum Item Image Width for all item image elements. By default, this is set to 300 px.

Note: Setting Maximum Item Image Width and Sorting Vertical Label Alignment applies when the layout is in Vertical mode.

Select Item Image Alignment to Left, Center, or Right.

Set Video/Audio Sort Preview Height. By default, this is set to 300 px.

Feedback

The Feedback section lets you tailor feedback for correct, partly correct, or incorrect answered questions. Feedback can be displayed on the page, beneath the Sorting component, or in a notification pop-up.

For each type of feedback, you can choose to include:

• global feedback set up
• custom text as feedback
• custom imagery as feedback
• a link to a specific part of your course; if, for example, learners should revisit a particular section
• a feedback style that overrides the theme styles settings

Did this article help?

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