Components
Created by Smart Sparrow

List Sorting

The sorting list provides a set of text items that learners can rearrange by clicking and dragging. It can be set to have either a vertical or horizontal orientation. It can be used to l for create activities focused towards identifying the correct sequence of a series of steps, ordering events in a timeline, or placing items in an order of priority or importance. As a designer, in addition to the text items, you can set the colours and labels applied alongside the list.

 

Unique ways to use this widget

There are multiple ways you can use this widget to assess learner knowledge. For example:

  • Sorting items based on temperature, color, likelihood to act a certain way, etc.
  • Ask students to organize items based on their personal preference, as a self-reflection activity.

 

Have a play

 

Basic setup instructions

  1. This component can be found in the Author. Insert the widget from the Components tab and resize it to your liking.
  2. With the component selected, Click on Configure and select Options to set it up.
  3. Open the options menu to set your list items. In the ‘Item list’ field enter in your items in sequence separated by commas. For example (Wash,Dry,Iron) would create a list with three items with these labels. To add another item simple add it to the existing list eg. (wash,dry,iron,put away)
  4. Have a look at the CAPI table desciption at the bottom of the article for more information on what you can do.

 

Other Options

  • The orientation can be changed using the Orientation setting in the options menu
  • You can define the key colour for the coloured marker next to the list using the bar colour field. This field will except html colour codes (eg, ‘yellow’, rgb(255, 165, 0) or ‘#FFFF00’). To remove this bar simply set it to ‘white’ or your background color.
  • You can turn on the header and footer feature in the options menu to label the list so it makes sense for the learner , eg. most-least, first-last, highest priority-lowest priority When this option is selected, text fields appear in the options menu to allow these labels to be set.
  • If you need to add commas into your items, you can use the HTML equivalent code: ,
  • For more advanced trap state creation, you can target each item slot individually with Content Slots.Slot X

 

Accessibility

The list sorting component can be used to develop activities which can be completed using a keyboard and/or a screen reader.

When using a screen reader, a student will be read a voice instruction explaining how to sort a list of items. As a student moves through the list, they will be read the item as well it’s relative position to other items in the list. Upon selecting each item, the student will then be able to reposition the item where the new position will be instantly reported to them.

 

Capi Table

Property Purpose Acceptable Inputs Readable Writable
Content Slots.Slot {slotIndex}
The current text of the item in content slot
String
Is Correct
Whether or not the current order of items is correct
Boolean
User Modified
Whether or not the widget has been modified or not
Boolean
Item List
Array of all item texts
String
Correct Item List
Array of all item texts in the correct order
String
Orientation
The orientation for the order list
Vertical
Horizontal
textWrapping
Items fit the content instead of being a uniform size
Boolean
Bar Color
Color for the bars on the left hand side
String
Randomize
Randomize the order of items on start-up
Boolean
Show Answer
Set to true to show the correct answer
Boolean
Show Header & Footer
Boolean to show the header and footer
Boolean
Custom CSS
Css or the url of the CSS file to style the widget
String
Header Label
Label for the top most item
String
Footer Label
Label for the bottom most item
String
Property Purpose Acceptable Inputs Readable Writable
Content Slots.Slot {slotIndex}
The current text of the item in content slot
String
Is Correct
Whether or not the current order of items is correct
Boolean
User Modified
Whether or not the widget has been modified or not
Boolean
Item List
Array of all item texts
String
Correct Item List
Array of all item texts in the correct order
String
Orientation
The orientation for the order list
Vertical
Horizontal
textWrapping
Items fit the content instead of being a uniform size
Boolean
Bar Color
Color for the bars on the left hand side
String
Randomize
Randomize the order of items on start-up
Boolean
Show Answer
Set to true to show the correct answer
Boolean
Show Header & Footer
Boolean to show the header and footer
Boolean
Custom CSS
Css or the url of the CSS file to style the widget
String
Header Label
Label for the top most item
String
Footer Label
Label for the bottom most item
String
Property Purpose Acceptable Inputs Readable Writable
Content Slots.Slot {slotIndex}
The current text of the item in content slot
String
Is Correct
Whether or not the current order of items is correct
Boolean
User Modified
Whether or not the widget has been modified or not
Boolean
Item List
Array of all item texts
String
Correct Item List
Array of all item texts in the correct order
String
Orientation
The orientation for the order list
Vertical
Horizontal
Bar Color
Color for the bars on the left hand side
String
Randomize
Randomize the order of items on start-up
Boolean
Show Answer
Set to true to show the correct answer
Boolean
Show Header & Footer
Boolean to show the header and footer
Boolean
Custom CSS
Css or the url of the CSS file to style the widget
String
Header Label
Label for the top most item
String
Footer Label
Label for the bottom most item
String

 

Advanced widget setup

Contact our team for help setting up the widget and trap states in your lessons.

Want to work with us to create your own component?
Request services