Components
Created by Smart Sparrow

Click to Order

The Click to Order component allows a learner to indicate the order of a group of items by clicking on a set of ‘cards’ in the desired sequence. As a designer you can define the number of cards in addition to the text labels and images that appear on the individual cards.

Unique ways to use this widget

It can be used to create activities based around identifying the correct sequence of a series of steps, ordering events in a timeline, or placing items in an order of priority or importance.

 

Have a play

 

Basic setup instructions

  1. Copy the widget link by clicking on the Get Component button at the top of this page.
  2. In the Author Tool, add a blank component from the Components tab and resize it to your liking.
  3. Paste the url that you’ve just copied into the Component’s source.
  4. With the component selected, Click on Configure and select Options to set it up.
  5. Select the upload image icon to choose an image from your computer for each of the items shown. You can also select the text box below to add a caption for each of the images.
  6. If you would like to feature more items you can use the Add Item button. To remove an item use the trash icon that appears when you hover over the item.
  7. Use the Edit correct order button to record the correct click sequence. When complete select Set Correct Order to save this answer.
  8. For setting up the trap states which tie into this component see this article. To see a list of properties tied to this component see the Component Properties table below.

 

Other Options

Select Randomize in the options menu to randomize the order of the cards for each individual student.

 

Component Properties

Properties available for creating trap states or configuring your questions.

Property Purpose Type
Slot {slotIndex} correct
Is the order of the card in this slot correct
Boolean
Mode
Mode of the widget
Configuration
Student
Config JSON
The configuration data for the widget
String
Randomize
Randomize the order of the cards
Boolean
Show Hints
Show students if their current order is correct or incorrect
Boolean
Show Correct
Show students the correct order
Boolean
Enabled
The activity is enabled
Boolean
Attempted
Student interacted with the activity
Boolean
Correct
The order is correct
Boolean
Current Order
Student's current order
Array
Custom CSS
Customise the activity even more
String
Screen Reader Language
The language used by screen readers
Arabic
English
French
Italian
Japanese
Portuguese
Russian
Spanish
Direction
Language direction of the widget
LTR
RTL
Slot {slotIndex} Alt Text
The screen reader description of the slot
String
Property Purpose Type
Mode
Mode of the widget
Configuration
Student
Config JSON
The configuration data for the widget
String
Randomize
Randomize the order of the cards
Boolean
Show Hints
Show students if their current order is correct or incorrect
Boolean
Show Correct
Show students the correct order
Boolean
Enabled
The activity is enabled
Boolean
Attempted
Student interacted with the activity
Boolean
Correct
The order is correct
Boolean
Current Order
Student's current order
Array
Custom CSS
Customise the activity even more
String
Property Purpose Type
Mode
Mode of the widget
Config
Student
Config JSON
The configuration data for the widget
String
Randomize
Randomize the order of the cards
Boolean
Show Hints
Show students if their current order is correct or incorrect
Boolean
Show Correct
Show students the correct order
Boolean
Enabled
The activity is enabled
Boolean
Attempted
Student interacted with the activity
Boolean
Correct
The order is correct
Boolean
Current Order
Student's current order
Array
Custom CSS
Customise the activity even more
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