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.
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
Follow these steps to add the Sorting component to a Block:
- Click Add Component.
- Use the component search or scroll to find the Sorting component.
- Click the Sorting component and select Add Left, Add Full, or Add Right.
Click the Edit Component icon on the newly added Sorting component to begin set up.
General & Behaviour sections
In the General section:
Add Sorting Title, or a Sorting Display Title, as needed. Sorting Display Title is seen by learners.
Add your Sorting Question. Use the text editor to style and format your text.
- Add Sorting Instruction Text that tells users how to use the component.
- Include an Aria Label for screen readers, as needed.
- Fill in Play Item Video Aria Label, as needed.
- 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 that 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 Behaviour section:
In the Behaviour section, toggle to Disable Marking.
When enabling Disable Marking, the Sorting Component will be marked as correct regardless of the order of the items.
In the Behaviour 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.
- Add Sorting Top/Left Label Text, as needed.
- Add Sorting Bottom/Right Label Text, as needed.
- Toggle to Show Video/Audio Sort Preview. Enabling this will display a video or audio preview of the current item sort order.
- Edit text for Video/Audio Sort Preview Label Text, as needed. By default, this is set to Sorting Preview.
- Enter Sorting Media Dialog Close Button Text, as needed. By default, this is set to Close.
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.
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.
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.
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.
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.