DesignPLUS Sort Items (Column Layout)

The Sort Items tool allows you to embed ungraded, interactive knowledge checks directly into any Canvas content page. Similar to a “Categorization” question in Canvas New Quizzes, students respond to a prompt by sorting given items into specific target categories.

Key Features:

  • Flexible Formats: Items in the Answer Bank can be text-based, image-based, or a combination of both.
  • Added Difficulty: You can challenge students by including “distractors”โ€”options that do not belong in any of the categories.

Example Uses:

  • Thematic Grouping: Sorting contemporary pieces into specific thematic categories (e.g., identity, environmentalism, globalization) based on the visual narrative or artist statements.
  • Era Identification: Sorting historical posters or editorial layouts into their proper design eras, such as Bauhaus, Art Deco, Swiss Style, or Postmodernism.
  • Lens Selection: Sorting photographs into categories based on the camera lens used to shoot them (e.g., macro, wide-angle, telephoto) by analyzing the depth of field and distortion.
An interactive 'Sort Items' activity in Canvas. Instructions tell the user to sort famous artworks into the correct artist's gallery: Vincent van Gogh or Leonardo da Vinci, with a warning that one artwork belongs to neither. An 'Answer Bank' contains five draggable buttons: Mona Lisa, Vitruvian Man, The Persistence of Memory, The Starry Night, and Sunflowers. Below the bank are two empty target containers labeled 'Vincent van Gogh' and 'Leonardo da Vinci'. A bottom control bar features Check, Shuffle, and Reset buttons, alongside a timer displaying '0:00' and an information icon.

Adding a Sort Items Activity to a Content Page

While editing content in your Canvas course, launch the DesignPLUS Sidebar by clicking on the ๐Ÿš€ rocket ship icon at the top right corner of the screen.

  • Alternatively, press Alt/Option + Shift + D on your keyboard.

Place your cursor in the RCE (Rich Content Editor) where you want to add the Sort Items interface.

In the DesignPLUS Sidebar, click on the โž• Add New Elements tab.

Click the Sort Items button (found under the Interactive Exercises or Recently Used Tools headings).

  • Alternatively, use the Search textbox to search for Sort Items. DesignPLUS will show results in real-time. Click the โœ–๏ธ icon to clear your search.
A screenshot of the DesignPLUS Sidebar demonstrates accessing the 'Sort Items' tool. An initial arrow points to the 'Add New Elements' tab in the top navigation bar, which features a large plus sign and is the currently active view. Within the 'Add New Elements' panel, two other arrows highlight the primary methods for finding the tool: one points to the 'Search' input field, and the other points directly to the 'Sort Items' button, which features an icon of two opposing horizontal arrows and is located in the 'Recently Used Tools' list. Other un-highlighted tools like 'Order Items', 'Match Items', and 'Embed' are also visible nearby.

Clicking the Sort Items button inserts the activity interface directly into the Rich Content Editor (RCE). As you build your activity, keep the following in mind:

  • Edit View vs. Student View: The interface in the RCE will look slightly different from the final published page. This is by design to make authoring easier.
  • Direct Text Editing: You can click directly into the RCE to type over the default title (“Sort Items”) and instructions (“Sort the following items into their correct categories.”).
  • Hidden Instructor Notes: The purple “Editor Only Instructions” box contains helpful authoring reminders. This box and its contents are completely invisible to students.
  • Editing Buckets and Items: You must use the Content panel in the DesignPLUS Sidebar to change bucket names, correct items, and distractors.
An editing view of the 'Sort Items' tool within the Canvas Rich Content Editor. The activity is outlined with dashed borders indicating editable structural regions like 'Sort Pool', 'Answer Bank', and 'Sort Bucket'. Below the main instruction, "Sort the following items into their correct categories," the Answer Bank features a purple "Editor Only Instructions" banner. This banner explains that authors should add correct items directly to their respective target buckets and only place distractors in the Answer Bank, noting that all items will be moved to the Answer Bank when viewed by students. Currently, a single button labeled 'Distractor' sits in the Answer Bank. Below it are two side-by-side target containers: 'Bucket 1', holding buttons for 'Item 1.1' and 'Item 1.2', and 'Bucket 2', holding buttons for 'Item 2.1' and 'Item 2.2'.

Content Panel

The Content panel is where you manage your sorting activity by adding, editing, or deleting buckets, items, and distractors. Because this panel is context-sensitive, the settings it displays will dynamically update depending on where you click your cursor within the RCE.

The panel is organized into three main hierarchical areas:

  • The Pool: The overarching container for the entire activity. This includes the main question, the answer bank, the target buckets, and all draggable items.
  • A Bucket: A specific category container within the Pool where students will drag and drop their correct answers.
  • An Item: The individual draggable answers (including distractors) that belong inside a specific bucket or the answer bank.
Pool

As long as the Pool tab (A) is active, these configuration options will remain available regardless of where your cursor is placed within the activity in the editor.

A screenshot of the "Content" panel in the DesignPLUS Sidebar shows configuration options for the "Sort Items" tool. An initial row of controls, indicated by callout A, features three primary tabs labeled "Pool", "Bucket", and "Item", with the "Pool" tab highlighted in dark grey as the active view. Callout B points to an "+ Add Bucket" button. Under the text label "Item Type:", callout C highlights options for "Text", "Image", and "Image with Caption", where "Text" is selected. The lower part of the panel displays a list of existing buckets, currently showing "Bucket 1" and "Bucket 2", each featuring callouts for its various interactive elements. A typical list item, as marked, contains a reorder handle (six dots, callout D), an editable text field for the bucket name (callout E), a grey circular "X" button to clear (callout F), a duplicate stacked icon button (callout G), and a red trash can icon for deletion (callout H). These icons are repeated for each bucket listed.
  1. Tool State (Pool, Bucket, Item): Switch between configuring the overarching Pool, specific Buckets, or individual Items.
  2. โž• Add Bucket: Add a new target category for students to sort their answers into.
  3. Item Type: Choose whether your draggable options will display as Text, Image, or Image with Caption.
    • Note: The option selected here applies to all items and distractors in the activity.
  4. โ‹ฎโ‹ฎ Reorder: Click and drag the six-dot handle up or down to rearrange the order of the buckets.
  5. Bucket Text Box: Type or edit the display name for each bucket.
  6. โœ–๏ธ Clear Text: Click this icon to quickly erase the text from that specific bucket’s text box.
  7. Duplicate Bucket: Create an exact copy of the selected bucket row.
  8. ๐Ÿ—‘๏ธ Delete Bucket: Permanently remove the selected bucket from the activity.
Bucket

When the Bucket tab (A) is active, its settings are context-sensitive. The configuration options will only display if your cursor is placed directly inside a specific bucket or the Answer Bank within the RCE. If you click outside of these areas (such as on the main activity instructions), the panel will hide the settings and display the warning message: “Select a bucket to see its items.”

An excerpt of the DesignPLUS Sidebar showing the 'Content' panel for the 'Sort Items' tool, with the 'Bucket' tab currently selected in a row of three tabs: 'Pool', 'Bucket' (annotated A), and 'Item'. To the right of the tabs is an '+ Add Item' button (annotated B). Below, a section titled 'Item Type:' presents a button group with options for 'Text' (annotated C and selected), 'Image', and 'Image with Caption'. The main list below shows items belonging to the selected bucket, with two entries: 'Item 1.1' and 'Item 1.2'. Each item entry consists of a row of controls: a drag handle with six dots (annotated D) for reordering, followed by an editable text field showing the item name, 'Item 1.1' (annotated E). To the right of the text field are buttons to clear text (grey circular 'x', annotated F), duplicate the item (stacked squares, annotated G), and delete the item (red trash can, annotated H). The same controls are repeated for the second item, 'Item 1.2'.
  1. Tool State (Pool, Bucket, Item): Switch to the Bucket tab to manage the individual items (answers) assigned to a specific bucket.
  2. โž• Add Item: Click to add a new correct answer to the currently selected bucket.
  3. Item Type: Choose whether your draggable options will display as Text, Image, or Image with Caption.
    • Note: The option selected here applies to all distractors or items within the selected bucket.
  4. โ‹ฎโ‹ฎ Reorder: Click and drag the six-dot handle up or down to rearrange the order in which distractors or items appear within this bucket.
  5. Item Text Box: Type or edit the text for the specific answer option.
    • Note: If you selected “Image” in the Pool settings, this will be an image upload/selection field instead.
  6. โœ–๏ธ Clear Text: Click the ‘x’ icon to quickly erase the text from that specific distractor’s or item’s text box.
  7. Duplicate Item: Create an exact copy of the selected distractor or item row.
  8. ๐Ÿ—‘๏ธ Delete Item: Permanently remove the selected distractor or item from this bucket.
Item

When the Item tab (A) is active, its settings are context-sensitive. The configuration options will only display if your cursor is placed directly inside a specific bucket or the Answer Bank within the RCE. If you click outside of these areas (such as on the main activity instructions), the panel will hide the settings and display the warning message: “Select an item to edit.”

A screenshot of the 'Content' panel in the DesignPLUS Sidebar showing configuration options for the Item state. The top section contains three tabs: Pool, Bucket, and Item, with the Item tab (annotated A) selected and highlighted in dark gray. Directly below the tabs, the label "Item Type:" (annotated B) is displayed, followed by a button group with options for Text (selected), Image, and Image with Caption.
  1. Tool State (Pool, Bucket, Item): Select the Item tab to manage the specific properties of an individual answer or distractor.
  2. Item Type: Choose whether this specific draggable option will display as Text, an Image, or an Image with Caption.
    • Note: Unlike the global settings in the Pool tab, changes made here apply only to the single item or distractor you currently have selected.

Style Panel

The Style panel allows you to customize the Sort Items interface by adjusting colors, repositioning the answer bank, and hiding specific controls. These options update dynamically based on your selections in the Rich Content Editor (RCE) and the DesignPLUS Content panel.

Pool
Text

If ‘Pool’ is selected and the Item Type is set to ‘Text’ in the Content panel, the following options become available in the Style panel:

This image is a screenshot of the DesignPLUS Sidebar's "Style" panel integrated into the Canvas LMS, showing various activity configuration settings. At the top, a toggle selection (A) offers options for "Pool" (currently selected), "Bucket", and "Item". A "Color" heading (B) includes buttons with palette icons for "Bucket Color" and "Item Color". The "Answer Bank Location" section (C) has four buttons for placing the bank at the "Top" (selected), "Bottom", "Left", or "Right". "Controls Corners" (D) offers "Square" (selected) and "Rounded" options, while a "Controls Outline" heading (E) provides "None" (selected) and "Outline" choices. Finally, three unchecked checkboxes at the bottom allow instructors to "Hide the solution from students" (F), "Hide the controls from students" (G), and "Hide the timer from students" (H).
  1. Tool State (Pool, Bucket, Item): Switch between configuring the overarching Pool, specific Buckets, or individual Items.
  2. Color: Choose custom colors for your Buckets and Items using the ๐ŸŽจ Bucket Color and ๐ŸŽจ Item Color color pickers.
  3. Answer Bank Location: Select Top, Bottom, Left, or Right. The Answer Bank will automatically update in the RCE based on your selection.
  4. Controls Corners: Choose Square or Rounded corners for the control bar at the bottom of the activity (which houses the โœ”๏ธ Check button, Shuffle button, Reset button, and timer).
  5. Controls Outline: Select Outline to add a border around the entire Sort Items interface and the bottom control bar, or select None to leave it borderless.
  6. โ˜‘๏ธ Hide the solution from students: Check this box to prevent the “Solution” button from appearing after students check their answers.
  7. โ˜‘๏ธ Hide the controls from students: Check this box to hide the โœ”๏ธ Check button, Reset button, and timer entirely.
  8. โ˜‘๏ธ Hide the timer from students: Check this box to hide only the timer in the bottom right corner of the activity.
Image

If ‘Pool’ is selected and the Item Type is set to ‘Image’ in the Content panel, the following options become available in the Style panel:

A screenshot of the 'Style' panel in the DesignPLUS Sidebar within the Canvas LMS. At the top (A), a horizontal button group presents three context options: 'Pool' (selected), 'Bucket', and 'Item'. Below this, the 'Color' section (B) features buttons for 'Bucket Color' and 'Item Color', each including a palette icon. The 'Image Ratio' section (C) displays a multi-row grid of aspect ratio buttons, with '4:3' selected and numerous other options including 3:2, 16:9, 10:3, 5:1, 1:1, 2:3, 5:7, 3:4, and 4:5. The 'Answer Bank Location' section (D) provides buttons for 'Top' (selected), 'Bottom', 'Left', and 'Right'. The 'Controls Corners' section (E) allows selecting 'Square' (selected) or 'Rounded'. The 'Controls Outline' section (F) provides choices for 'None' (selected) and 'Outline'. The panel concludes with three unchecked checkboxes labeled 'Hide the solution from students' (G), 'Hide the controls from students' (H), and 'Hide the timer from students' (I).
  1. Tool State (Pool, Bucket, Item): Switch between configuring the overarching Pool, specific Buckets, or individual Items.
  2. Color: Choose custom colors for your Buckets and Items using the ๐ŸŽจ Bucket Color and ๐ŸŽจ Item Color color pickers.
  3. Image Ratio: Define the aspect ratio for all images used within the activity.
  4. Answer Bank Location: Select Top, Bottom, Left, or Right. The Answer Bank will automatically update in the RCE based on your selection.
  5. Controls Corners: Choose Square or Rounded corners for the control bar at the bottom of the activity (which houses the โœ”๏ธ Check button, Shuffle button, Reset button, and timer).
  6. Controls Outline: Select Outline to add a border around the entire Sort Items interface and the bottom control bar, or select None to leave it borderless.
  7. โ˜‘๏ธ Hide the solution from students: Check this box to prevent the “Solution” button from appearing after students check their answers.
  8. โ˜‘๏ธ Hide the controls from students: Check this box to hide the โœ”๏ธ Check button, Reset button, and timer entirely.
  9. โ˜‘๏ธ Hide the timer from students: Check this box to hide only the timer in the bottom right corner of the activity.
Image with Caption

If ‘Pool’ is selected and the Item Type is set to ‘Image with Caption’ in the Content panel, the following options become available in the Style panel:

This image is a screenshot of the DesignPLUS Sidebar's "Style" panel integrated into the Canvas LMS. At the top, a blue title bar reads "Style" with an icon indicating it is an expandable accordion panel. Below this, a toggle selection (A) offers options for "Pool" (currently selected), "Bucket", and "Item". A "Color" heading (B) includes buttons with palette icons for "Bucket Color" and "Item Color". The "Image Ratio" section (C) displays a grid of aspect ratio buttons with "4:3" currently selected. The "Answer Bank Location" section (D) provides buttons to place the bank at the "Top" (selected), "Bottom", "Left", or "Right". The "Image Text Alignment" section (E) includes four icon buttons for text alignment, followed by an "Image Text Location" section (F) with "Top" (selected) and "Bottom" choices. "Controls Corners" (G) offers "Square" (selected) and "Rounded" options, while a "Controls Outline" heading (H) provides "None" (selected) and "Outline" choices. Finally, three unchecked checkboxes at the bottom allow users to "Hide the solution from students" (I), "Hide the controls from students" (J), and "Hide the timer from students" (K).
  1. Tool State (Pool, Bucket, Item): Switch between configuring the overarching Pool, specific Buckets, or individual Items.
  2. Color: Choose custom colors for your Buckets and Items using the ๐ŸŽจ Bucket Color and ๐ŸŽจ Item Color color pickers.
  3. Image Ratio: Define the aspect ratio for all images used within the activity.
  4. Answer Bank Location: Select Top, Bottom, Left, or Right. The Answer Bank will automatically update in the RCE based on your selection.
  5. Image Text Alignment: Select Align Left, Align Center, Align Right, or Default Alignment (the eraser icon) to revert to the default setting.
  6. Image Text Location: Select Top or Bottom. The text above or below each image in the RCE will update based on your selection.
  7. Controls Corners: Choose Square or Rounded corners for the control bar at the bottom of the activity (which houses the โœ”๏ธ Check button, Shuffle button, Reset button, and timer).
  8. Controls Outline: Select Outline to add a border around the entire Sort Items interface and the bottom control bar, or select None to leave it borderless.
  9. โ˜‘๏ธ Hide the solution from students: Check this box to prevent the “Solution” button from appearing after students check their answers.
  10. โ˜‘๏ธ Hide the controls from students: Check this box to hide the โœ”๏ธ Check button, Reset button, and timer entirely.
  11. โ˜‘๏ธ Hide the timer from students: Check this box to hide only the timer in the bottom right corner of the activity.
Bucket

The Bucket tab (A) is highly context-sensitive. To view its configuration options in the Style panel, two conditions must be met:

  • Your Item Type must be set to ‘Text’, ‘Image’, or ‘Image with Caption’ within the Content panel.
  • Your cursor must be placed directly inside a specific bucket or the Answer Bank within the Rich Content Editor (RCE).

If you click outside of these designated areas (such as on the main activity instructions), the settings will hide and display a warning message: “Select a bucket to edit.”

A screenshot of the expandable "Style" panel from the DesignPLUS Sidebar within the Canvas LMS. At the top, labeled area "A" points to a segmented control bar with three buttons: "Pool", "Bucket", and "Item"; the "Bucket" button is highlighted dark gray and selected. Below this, labeled area "B" points to the "Color" section header. Underneath this header are two dark gray buttons with palette icons; the first is labeled "Bucket Color" and the second is "Item Color".
  1. Tool State (Pool, Bucket, Item): Switch between configuring the overarching Pool, specific Buckets, or individual Items.
  2. Color: Choose custom colors for your Buckets and Items using the ๐ŸŽจ Bucket Color and ๐ŸŽจ Item Color color pickers.
Item

The Item tab (A) is highly context-sensitive. To view its configuration options in the Style panel, two conditions must be met:

  • Your Item Type must be set to ‘Text’, ‘Image’, or ‘Image with Caption’ within the Content panel.
  • Your cursor must be placed directly inside a specific sortable item within the Rich Content Editor (RCE).

If you click outside of a designated item (such as on the main activity instructions or the bucket background), the settings will hide and display a warning message: “Select an item to edit.”

A screenshot of the expandable "Style" panel from the DesignPLUS Sidebar within the Canvas LMS. Underneath the blue "Style" header, labeled area "A" points to a segmented control bar with three buttons: "Pool", "Bucket", and "Item"; the "Item" button is highlighted dark gray and selected. Below this, labeled area "B" points to the "Color" section header. Underneath this header is a single dark gray button with a palette icon labeled "Item Color".
  1. Tool State (Pool, Bucket, Item): Switch between configuring the overarching Pool, specific Buckets, or individual Items.
  2. Color: Choose a color for your Item using the ๐ŸŽจ Item Color color picker.

Advanced Panel

The Advanced panel contains additional settings for your Select All activity that can modify the way it functions for your students.

This image is a screenshot of the DesignPLUS Sidebar's "Advanced" panel for the Sort Items tool, which is integrated into the Canvas LMS. At the top, a blue header titled "Advanced" has an icon indicating it is an expandable accordion panel. Below the header, a label "Data Tracking Title" is shown with an input field containing the text "Sort Items 1". This is followed by four unchecked checkboxes with the labels: "Disable data tracking for this interactive", "Show feedback when 100% correct", "Show feedback when incorrect", and "Hide 'Next' until all interactives completed".
  • Data Tracking Title: Enter a custom name to track anonymous usage data for this specific activity. (Review the DesignPLUS Interactive Data guide for more information.)
  • โ˜‘๏ธ Disable data tracking for this interactive: Check this box to opt out of collecting anonymous usage data for this specific tool.
  • โ˜‘๏ธ Show feedback when 100% correct: Check this box to provide a custom success message. Selecting this adds a green placeholder box in the Rich Content Editor (RCE) where you can type your feedback.
  • โ˜‘๏ธ Show feedback when incorrect: Check this box to provide a custom “try again” message. Selecting this adds a red placeholder box in the RCE where you can type your feedback.
  • โ˜‘๏ธ Hide “Next” until all interactives completed: Check this box to hide the Canvas “Next” button at the bottom of the page until the student successfully completes the activity.

Additional Resources