Components
Created by Smart Sparrow

Grouping

The Grouping widget asks learners to arrange a selection of items into a number of different categories. Instructors can set up the number of categories and items, which can be both text or images.

 

Unique ways to use this widget

There are multiple ways you can use this widget. For example:

  • Ask learners to sort a group of items into their corresponding categories. E.g. Sort all of the following animals into whether they are mammals or reptiles.
  • Preset the items incorrectly and ask learners to unjumble the items into their correct positions.

 

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. You must change the Mode to Config mode to set up the widget.
  4. Add extra groups and items by clicking on the buttons on the far left.
    • Extra groups can also be added by clicking the + button that appears when hovering between two existing groups. This will insert a new group in between the two existing groups
    • Items can either be text or images which can be uploaded from your computer.
  5. Set the correct answer by clicking the ‘Set Correct Answer” button and dragging each item to its correct group.
  6. Make sure to change the mode to “Student” when done.

 

Other options

  • You can preset the location of the items by switching over to ‘Student mode’ and placing the items into groups.
  • Use the CAPI property Color Theme to set the theme color for the background and items. Pick the color by writing a rgb value, hex code or even a common name of a color e.g. purple.
  • Turning on Randomize will randomise the order in which items appear in their groups. This is useful to jumble up the item bank.
  • The CAPI property Show Hints can be turned on in the additional actions of a trap state. This will highlight any incorrect items in red and correct items in green. All hints will disappear automatically the next time the learner touches an item.
  • Enabled allows you to control whether the widget can be modified by learners. This is useful when showing the correct answer and you want to prevent learners from modifying the widget further.

 

Accessibility

The grouping 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 into the available groups. As a student moves through the list, they will be read each item and the student will have the option to select it using their keyboard. Once the item is selected they will then be able to associate the item to the appropriate group using the keyboard controls.

 

Component Properties

Properties available for creating trap states or configuring your questions.

Property Purpose Type
Mode
Mode of the widget
Config
Student
Config JSON
The configuration data for the widget.
String
Color Theme
The color used to change the theme color of groups and text items. Any valid CSS string is allowed
String
CSS
Css or the url of the CSS file to style the widget
String
Enabled
Whether or not items can move around or not
Boolean
Randomize
Randomize the ordering of items within a group
Boolean
Show Hints
Displays a highlight around items with color based whether they are positioned correctly or incorrectly. Re-displays on a check event
Boolean
Item Locations
JSON string for a map of all the item locations. Groups are sorted left to right and items are sorted alphabetically by id.
String
Correct
True or false if all items are currently within their correctly set group
Boolean
Items.{itemId}
The current group the item is set in. Can write to this given a dropdown of the existing groups
{Group 1.Name}
{Group 2.Name}
{Group 3.Name}
Property Purpose Type
Mode
Mode of the widget
Config
Student
Config JSON
The configuration data for the widget.
String
Color Theme
The color used to change the theme color of groups and text items. Any valid CSS string is allowed
String
CSS
Css or the url of the CSS file to style the widget
String
Enabled
Whether or not items can move around or not
Boolean
Randomize
Randomize the ordering of items within a group
Boolean
Show Hints
Displays a highlight around items with color based whether they are positioned correctly or incorrectly. Re-displays on a check event
Boolean
Item Locations
JSON string for a map of all the item locations. Groups are sorted left to right and items are sorted alphabetically by id.
String
Correct
True or false if all items are currently within their correctly set group
Boolean
Items.{itemId}
The current group the item is set in. Can write to this given a dropdown of the existing groups
{Group 1.Name}
{Group 2.Name}
{Group 3.Name}
Property Purpose Type
Mode
Mode of the widget
Config
Student
Config JSON
The configuration data for the widget.
String
Color Theme
The color used to change the theme color of groups and text items. Any valid CSS string is allowed
String
CSS
Css or the url of the CSS file to style the widget
String
Enabled
Whether or not items can move around or not
Boolean
Randomize
Randomize the ordering of items within a group
Boolean
Show Hints
Displays a highlight around items with color based whether they are positioned correctly or incorrectly. Re-displays on a check event
Boolean
Item Locations
JSON string for a map of all the item locations. Groups are sorted left to right and items are sorted alphabetically by id.
String
Correct
True or false if all items are currently within their correctly set group
Boolean
Items.{itemId}
The current group the item is set in. Can write to this given a dropdown of the existing groups
{Group 1.Name}
{Group 2.Name}
{Group 3.Name}
Property Purpose Type
Mode
Mode of the widget
Config
Student
Config JSON
The configuration data for the widget.
String
Color Theme
The color used to change the theme color of groups and text items. Any valid CSS string is allowed
String
CSS
Css or the url of the CSS file to style the widget
String
Enabled
Whether or not items can move around or not
Boolean
Randomize
Randomize the ordering of items within a group
Boolean
Show Hints
Displays a highlight around items with color based whether they are positioned correctly or incorrectly. Re-displays on a check event
Boolean
Item Locations
JSON string for a map of all the item locations. Groups are sorted left to right and items are sorted alphabetically by id.
String
Correct
True or false if all items are currently within their correctly set group
Boolean
Items.{itemId}
The current group the item is set in. Can write to this given a dropdown of the existing groups
{Group 1.Name}
{Group 2.Name}
{Group 3.Name}
Property Purpose Type
Mode
Mode of the widget
Config
Student
Config JSON
The configuration data for the widget.
String
Color Theme
The color used to change the theme color of groups and text items. Any valid CSS string is allowed
String
CSS
Css or the url of the CSS file to style the widget
String
Enabled
Whether or not items can move around or not
Boolean
Randomize
Randomize the ordering of items within a group
Boolean
Item Locations
JSON string for a map of all the item locations. Groups are sorted left to right and items are sorted alphabetically by id.
String
Correct
True or false if all items are currently within their correctly set group
Boolean
Items.{itemId}
The current group the item is set in. Can write to this given a dropdown of the existing groups
{Group 1.Name}
{Group 2.Name}
{Group 3.Name}
Property Purpose Type
Mode
Mode of the widget
Config
Student
Config JSON
The configuration data for the widget.
String
Color Theme
The color used to change the theme color of groups and text items. Any valid CSS string is allowed
String
CSS
Css or the url of the CSS file to style the widget
String
Enabled
Whether or not items can move around or not
Boolean
Randomize
Randomize the ordering of items within a group
Boolean
Item Locations
JSON string for a map of all the item locations. Groups are sorted left to right and items are sorted alphabetically by id.
String
Correct
True or false if all items are currently within their correctly set group
Boolean
Items.{itemId}
The current group the item is set in. Can write to this given a dropdown of the existing groups
{Group 1.Name}
{Group 2.Name}
{Group 3.Name}

 

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

Similar Components