{"id":7138,"date":"2026-03-16T21:57:39","date_gmt":"2026-03-16T21:57:39","guid":{"rendered":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/?p=7138"},"modified":"2026-04-28T15:48:54","modified_gmt":"2026-04-28T15:48:54","slug":"designplus-order-items","status":"publish","type":"post","link":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/designplus-order-items\/","title":{"rendered":"DesignPLUS Order Items"},"content":{"rendered":"\n<p>The <strong>Order Items<\/strong> tool allows you to add ungraded, interactive learning checks directly to any Canvas content page. Similar to an &#8220;Ordering&#8221; question in Canvas New Quizzes, it presents a prompt and asks students to place the given items in order. These options can be text-based, image-based, or a combination of both.<\/p>\n\n\n\n<div class=\"wp-block-advgb-infobox advgb-infobox-wrapper has-text-align-left advgb-infobox-bf9bc3ea-195c-4501-8c44-7b11aa4b7060\"><div class=\"advgb-infobox-wrap\"><div class=\"advgb-infobox-icon-container\"><div class=\"advgb-infobox-icon-inner-container\"><i class=\"material-icons-outlined\">warning<\/i><\/div><\/div><div class=\"advgb-infobox-textcontent\"><h3 class=\"advgb-infobox-title\">Note<\/h3><p class=\"advgb-infobox-text\">Because these are intended as informal self-checks, Order Items activities have no connection to the Canvas Gradebook. However, anonymous usage data can be tracked. Review the <a href=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/designplus-interactive-data\/\" data-type=\"post\" data-id=\"6715\">DesignPLUS Interactive Data<\/a> guide for more information.<\/p><\/div><\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Example Uses:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Art History Timelines:<\/strong> Arranging historical art movements (e.g., Renaissance, Baroque, Impressionism, Cubism) or the specific evolutionary periods of a single artist&#8217;s career (like Picasso&#8217;s Blue Period transitioning into his Rose Period and then Cubism).<\/li>\n\n\n\n<li><strong>Story Sequencing Cards:<\/strong> Looking at 3 to 5 picture cards that tell a simple story (e.g., a seed, a sprout, a plant, a flower) and placing them in the correct &#8220;first, next, then, last&#8221; order.<\/li>\n\n\n\n<li><strong>The Darkroom Sequence:<\/strong> Giving students cards labeled with steps (Developer, Stop Bath, Fixer, Water Wash, Drying) and having them arrange the chemical sequence required to process analog film.<\/li>\n<\/ul>\n\n\n\n<p>View two examples of ordering activity layouts by interacting with the image slider below. You can navigate between the examples using the arrows on either side, or by selecting the dots at the bottom.<\/p>\n\n\n\n<div class=\"wp-block-advgb-images-slider advgb-images-slider-block advg-images-slider-572d3e9a-7603-4807-bcd4-a8890defc1e9\"><div class=\"advgb-images-slider\" dir=\"ltr\"><div class=\"advgb-image-slider-item\"><img decoding=\"async\" src=\"http:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_ExampleQuestion1.png\" class=\"advgb-image-slider-img\" alt=\"Vertical Layout\" style=\"width:100%;height:auto\"\/><div class=\"advgb-image-slider-item-info\" style=\"justify-content:flex-start;align-items:flex-end\"><h4 class=\"advgb-image-slider-title\" style=\"color:#251c5c\">Vertical Layout<\/h4><\/div><\/div><div class=\"advgb-image-slider-item\"><img decoding=\"async\" src=\"http:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_ExampleQuestion2.png\" class=\"advgb-image-slider-img\" alt=\"Horizontal Layout\" style=\"width:100%;height:auto\"\/><div class=\"advgb-image-slider-item-info\" style=\"justify-content:flex-start;align-items:flex-end\"><h4 class=\"advgb-image-slider-title\" style=\"color:#251c5c\">Horizontal Layout<\/h4><\/div><\/div><\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#adding-an-order-items-activity-to-a-content-page\">Adding an Order Items Activity to a Content Page<\/a><\/li>\n\n\n\n<li><a href=\"#content-panel\">Content Panel<\/a><\/li>\n\n\n\n<li><a href=\"#style-panel\">Style Panel<\/a><\/li>\n\n\n\n<li><a href=\"#advanced-panel\">Advanced Panel<\/a><\/li>\n\n\n\n<li><a href=\"#additional-resources\">Additional Resources<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"adding-an-order-items-activity-to-a-content-page\">Adding an Order Items Activity to a Content Page<\/h2>\n\n\n\n<p>While editing content in your Canvas course, launch the DesignPLUS Sidebar by clicking on the \ud83d\ude80 <strong>rocket ship icon<\/strong> at the top right corner of the screen.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Alternatively, press <strong>Alt\/Option + Shift + D<\/strong> on your keyboard.<\/li>\n<\/ul>\n\n\n\n<p>Place your cursor in the RCE (Rich Content Editor) where you want to add the Order Items interface.<\/p>\n\n\n\n<p>In the DesignPLUS Sidebar, click on the \u2795 <strong>Add New Elements<\/strong> tab.<\/p>\n\n\n\n<p>Click the <strong>Order Items<\/strong> button (found under the <strong>Interactive Exercises<\/strong> or <strong>Recently Used Tools<\/strong> headings).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Alternatively, use the <strong>Search<\/strong> textbox to search for <strong>Order Items<\/strong>. DesignPLUS will show results in real-time. Click the \u2716\ufe0f icon to clear your search.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"385\" height=\"368\" src=\"http:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems.png\" alt=\"A screenshot of the DesignPLUS Sidebar demonstrates accessing the 'Order 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 'Order Items' button, which features an icon of a downward arrow next to the numbers 1 and 9, has a green diagonal ribbon reading &quot;NEW&quot; across its top-left corner, and is located in the 'Recently Used Tools' list. Other un-highlighted tools like 'Match Items', 'Sort Items', and 'Embed' are also visible nearby.\" class=\"wp-image-7148\" srcset=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems.png 385w, https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems-300x287.png 300w\" sizes=\"auto, (max-width: 385px) 85vw, 385px\" \/><\/figure>\n<\/div>\n\n\n<p>After clicking on the <strong>Order Items<\/strong> button, that interface will be added to the RCE.<\/p>\n\n\n\n<p>Keep in mind the following as you make edits:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The Order Items interface may not look exactly like what you and your students will see after the page is saved. This is by design.<\/li>\n\n\n\n<li>The <strong>Order Items<\/strong> and <strong>Arrange the following items in the correct order<\/strong> text shown below can be edited directly in the RCE.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"706\" height=\"400\" src=\"http:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_EditInRCE.png\" alt=\"A screenshot of the Canvas LMS editing screen shows the insertion and placement of the DesignPLUS &quot;Order Items&quot; tool within a course content page. The upper portion of the view displays a standard content editor toolbar with menu options (Edit, View, Insert, Format, Tools, Table) and formatting tools like font size, headings, and basic text formatting icons. The main editing area below features the placeholder DesignPLUS element itself, which is marked by dashed purple borders and pink labels (one labeled &quot;Order Items&quot; at the top-right and another labeled &quot;Order Item List&quot; above the item stack). The element includes a main heading of &quot;Order Items&quot; and sub-instruction text &quot;Arrange the following items in the correct order.&quot; Centered within this element is a vertical list of three distinct, light-colored blocks with placeholder labels: &quot;Item 1&quot;, &quot;Item 2&quot;, and &quot;Item 3&quot;.\" class=\"wp-image-7150\" srcset=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_EditInRCE.png 706w, https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_EditInRCE-300x170.png 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"content-panel\">Content Panel<\/h2>\n\n\n\n<p>Use the <strong>Content<\/strong> panel to set up your answer choices, enable the option to add images, and determine which options are correct.<\/p>\n\n\n\n<ol style=\"list-style-type:upper-alpha\" class=\"wp-block-list\">\n<li><strong>Item Type:<\/strong> Choose whether your answer options will display as <strong>Text<\/strong>, <strong>Image<\/strong>, or <strong>Image with Caption<\/strong>.\n<ul class=\"wp-block-list\">\n<li><em>Note on Images:<\/em> If you select &#8220;Image&#8221; or &#8220;Image with Caption,&#8221; use the Canvas Rich Content Editor (RCE) toolbar to replace the placeholder images. The text you enter into the <strong>Answer Text Box<\/strong> will automatically become the alternative text (alt text) for that image, which is essential for screen reader accessibility.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Items:<\/strong> Set the total number of options displayed to students. Use the <strong>\u2795<\/strong> and <strong>\u2796<\/strong> buttons to quickly add or remove answer rows.<\/li>\n\n\n\n<li><strong><strong>\u22ee\u22ee<\/strong> Reorder:<\/strong> Click and drag the six-dot handle up or down to rearrange the order of your answer options.<\/li>\n\n\n\n<li><strong>Answer Text Box:<\/strong> Type in the text for each item to include in the Order Items activity.<\/li>\n\n\n\n<li><strong>\u2716\ufe0f Clear Text:<\/strong> Click this icon to quickly delete all text from that specific Answer Text Box.<\/li>\n\n\n\n<li><strong>Duplicate Item:<\/strong> Create an exact copy of the selected answer row.<\/li>\n\n\n\n<li><strong>\ud83d\uddd1\ufe0f Delete Item:<\/strong> Remove the selected answer option from your question entirely.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"387\" height=\"275\" src=\"http:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_ContentPanel.png\" alt=\"A screenshot of the &quot;Content&quot; panel for the &quot;Order Items&quot; tool from the DesignPLUS Sidebar shows an interface for configuring an ordering activity. The panel, located within a blue &quot;Content&quot; accordion header with a downward chevron, features an &quot;Item Type:&quot; segmented control (Annotation A) with buttons for &quot;Text&quot; (selected), &quot;Image,&quot; and &quot;Image with Caption.&quot; Below this is an &quot;Items:&quot; number input (Annotation B), currently set to &quot;3&quot; with increment and decrement arrows. A lower section contains three item rows with identical controls. Annotation &quot;C&quot; points to the six-dot drag handle icon at the start of each row, used for reordering. Annotation &quot;D&quot; highlights the text input box (e.g., &quot;Item 1&quot;). To the right of each input are three inline buttons: a clear-text button with an 'X' icon (Annotation E), a duplicate-item button with overlapping squares (Annotation F), and a red trashcan delete-item button (Annotation G).\" class=\"wp-image-7152\" srcset=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_ContentPanel.png 387w, https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_ContentPanel-300x213.png 300w\" sizes=\"auto, (max-width: 387px) 85vw, 387px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"style-panel\">Style Panel<\/h2>\n\n\n\n<p>Use the <strong>Style<\/strong> panel to customize the appearance of your Order Items activity on the Canvas page. The specific formatting options available here will change depending on the <strong>Item Type<\/strong> you selected in the <a href=\"#content-panel\"><strong>Content<\/strong> panel<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-advgb-adv-tabs advgb-tabs-wrapper advgb-tab-vert-desktop advgb-tab-vert-tablet advgb-tab-stack-mobile advgb-tabs-8e134e5e-12fe-49a3-aafe-1c11e7ca10f0\" data-tab-active=\"0\"><ul class=\"advgb-tabs-panel\" role=\"tablist\"><li class=\"advgb-tab advgb-tab-active\" role=\"presentation\" style=\"background-color:#e9e9e9;border-style:solid;border-width:1px;border-radius:10px\"><button class=\"advgb-tab-button\" id=\"advgb-tab-_d9341c-ca-0\" aria-controls=\"advgb-tab-panel-_d9341c-ca-0\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\" style=\"color:#242424;background:none;border:none;width:100%;text-align:inherit;cursor:pointer;padding:8px 16px;font:inherit\"><span>Text<\/span><\/button><\/li><li class=\"advgb-tab \" role=\"presentation\" style=\"background-color:#e9e9e9;border-style:solid;border-width:1px;border-radius:10px\"><button class=\"advgb-tab-button\" id=\"advgb-tab-_d9341c-ca-1\" aria-controls=\"advgb-tab-panel-_d9341c-ca-1\" role=\"tab\" aria-selected=\"false\" tabindex=\"0\" style=\"color:#242424;background:none;border:none;width:100%;text-align:inherit;cursor:pointer;padding:8px 16px;font:inherit\"><span>Image<\/span><\/button><\/li><li class=\"advgb-tab \" role=\"presentation\" style=\"background-color:#e9e9e9;border-style:solid;border-width:1px;border-radius:10px\"><button class=\"advgb-tab-button\" id=\"advgb-tab-_d9341c-ca-2\" aria-controls=\"advgb-tab-panel-_d9341c-ca-2\" role=\"tab\" aria-selected=\"false\" tabindex=\"0\" style=\"color:#242424;background:none;border:none;width:100%;text-align:inherit;cursor:pointer;padding:8px 16px;font:inherit\"><span>Image with Caption<\/span><\/button><\/li><\/ul><div class=\"advgb-tab-body-wrapper\" style=\"border-style:solid;border-width:1px;border-radius:10px\">\n<div class=\"wp-block-advgb-tab advgb-tab-body-container\"><div class=\"advgb-tab-body-header advgb-tab-class- \" id=\"advgb-tab-panel-_d9341c-ca-0\" role=\"tabpanel\" aria-labelledby=\"advgb-tab-_d9341c-ca-0\" tabindex=\"0\"><span>Text<\/span><\/div><div class=\"advgb-tab-_d9341c-ca advgb-tab-body\" aria-labelledby=\"advgb-tab-panel-_d9341c-ca-0\" style=\"display:none\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"386\" height=\"421\" src=\"http:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_StylePanel1.png\" alt=\"A screenshot of the &quot;Style&quot; panel for the &quot;Order Items&quot; tool from the DesignPLUS Sidebar displays several visual formatting options. Located under a blue &quot;Style&quot; accordion header, the panel contains four main setting categories followed by checkboxes. The &quot;Layout&quot; setting features a segmented control with a downward-pointing arrow (currently selected) and a right-pointing arrow. Below that, a &quot;Background Color&quot; button displays a paint palette icon. The &quot;Controls Corners&quot; setting offers a segmented button to choose between &quot;Square&quot; (selected) and &quot;Rounded.&quot; Similarly, the &quot;Controls Outline&quot; setting allows users to toggle between &quot;None&quot; (selected) and &quot;Outline.&quot; Finally, the bottom of the panel lists three unchecked boxes: &quot;Hide the solution from students,&quot; &quot;Hide the controls from students,&quot; and &quot;Hide the timer from students.&quot;\" class=\"wp-image-7155\" srcset=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_StylePanel1.png 386w, https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_StylePanel1-275x300.png 275w\" sizes=\"auto, (max-width: 386px) 85vw, 386px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Layout:<\/strong> Select between <strong>Vertical Layout<\/strong> and <strong>Horizontal Layout<\/strong>.<\/li>\n\n\n\n<li>\ud83c\udfa8 <strong>Background Color:<\/strong> Set the background color displayed behind the possible answers in your Order Items activity.<\/li>\n\n\n\n<li><strong>Controls Corners:<\/strong> Choose <strong>Square<\/strong> or <strong>Rounded<\/strong> corners for the control bar at the bottom of the activity (which houses the \u2714\ufe0f <strong>Check<\/strong> button, <strong>Reset<\/strong> button, and timer).<\/li>\n\n\n\n<li><strong>Controls Outline:<\/strong> Select <strong>Outline<\/strong> to add a border around the entire Order Items interface and the bottom control bar, or select <strong>None<\/strong> to leave it borderless.<\/li>\n\n\n\n<li>\u2611\ufe0f <strong>Hide the solution from students:<\/strong> Check this box to prevent the &#8220;Solution&#8221; button from appearing after students check their answers.<\/li>\n\n\n\n<li>\u2611\ufe0f <strong>Hide the controls from students:<\/strong> Check this box to hide the \u2714\ufe0f <strong>Check<\/strong> button, <strong>Reset<\/strong> button, and timer entirely.<\/li>\n\n\n\n<li>\u2611\ufe0f <strong>Hide the timer from students:<\/strong> Check this box to hide only the timer in the bottom right corner of the activity.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-advgb-tab advgb-tab-body-container\"><div class=\"advgb-tab-body-header advgb-tab-class- \" id=\"advgb-tab-panel-_d9341c-ca-1\" role=\"tabpanel\" aria-labelledby=\"advgb-tab-_d9341c-ca-1\" tabindex=\"0\"><span>Image<\/span><\/div><div class=\"advgb-tab-_d9341c-ca advgb-tab-body\" aria-labelledby=\"advgb-tab-panel-_d9341c-ca-1\" style=\"display:none\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"384\" height=\"523\" src=\"http:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_StylePanel2.png\" alt=\"A screenshot of the &quot;Style&quot; panel for the &quot;Order Items&quot; tool from the DesignPLUS Sidebar displays visual formatting options under a blue accordion header. From top to bottom, the panel includes a &quot;Layout&quot; setting with a selected downward-pointing arrow and an unselected right-pointing arrow. Below it is a &quot;Background Color&quot; button featuring a paint palette icon. Next is an &quot;Image Ratio&quot; section displaying a grid of aspect ratio buttons, with &quot;4:3&quot; currently selected among other options like 16:9, 1:1, and 3:4. The &quot;Controls Corners&quot; setting has &quot;Square&quot; selected over &quot;Rounded,&quot; and the &quot;Controls Outline&quot; setting shows &quot;None&quot; selected over &quot;Outline.&quot; Finally, three unchecked boxes appear at the bottom: &quot;Hide the solution from students,&quot; &quot;Hide the controls from students,&quot; and &quot;Hide the timer from students.&quot;\" class=\"wp-image-7156\" srcset=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_StylePanel2.png 384w, https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_StylePanel2-220x300.png 220w\" sizes=\"auto, (max-width: 384px) 85vw, 384px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Layout:<\/strong> Select between <strong>Vertical Layout<\/strong> and <strong>Horizontal Layout<\/strong>.<\/li>\n\n\n\n<li>\ud83c\udfa8 <strong>Background Color:<\/strong> Set the background color displayed behind the possible answers in your Order Items activity.<\/li>\n\n\n\n<li><strong>Image Ratio:<\/strong> Define the aspect ratio for all images used within the activity.<\/li>\n\n\n\n<li><strong>Controls Corners:<\/strong> Choose <strong>Square<\/strong> or <strong>Rounded<\/strong> corners for the control bar at the bottom of the activity (which houses the \u2714\ufe0f <strong>Check<\/strong> button, <strong>Reset<\/strong> button, and timer).<\/li>\n\n\n\n<li><strong>Controls Outline:<\/strong> Select <strong>Outline<\/strong> to add a border around the entire Order Items interface and the bottom control bar, or select <strong>None<\/strong> to leave it borderless.<\/li>\n\n\n\n<li>\u2611\ufe0f <strong>Hide the solution from students:<\/strong> Check this box to prevent the &#8220;Solution&#8221; button from appearing after students check their answers.<\/li>\n\n\n\n<li>\u2611\ufe0f <strong>Hide the controls from students:<\/strong> Check this box to hide the \u2714\ufe0f <strong>Check<\/strong> button, <strong>Reset<\/strong> button, and timer entirely.<\/li>\n\n\n\n<li>\u2611\ufe0f <strong>Hide the timer from students:<\/strong> Check this box to hide only the timer in the bottom right corner of the activity.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-advgb-tab advgb-tab-body-container\"><div class=\"advgb-tab-body-header advgb-tab-class- header-active\" id=\"advgb-tab-panel-_d9341c-ca-2\" role=\"tabpanel\" aria-labelledby=\"advgb-tab-_d9341c-ca-2\" tabindex=\"0\"><span>Image with Caption<\/span><\/div><div class=\"advgb-tab-_d9341c-ca advgb-tab-body\" aria-labelledby=\"advgb-tab-panel-_d9341c-ca-2\" style=\"display:block\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"387\" height=\"585\" src=\"http:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_StylePanel3.png\" alt=\"A screenshot of the &quot;Style&quot; panel for the &quot;Order Items&quot; tool from the DesignPLUS Sidebar displays visual formatting options under a blue accordion header. From top to bottom, the panel includes a &quot;Layout&quot; setting with a selected downward-pointing arrow. Below it is an &quot;Image Text Alignment&quot; setting featuring icons for left-align (currently selected), center-align, right-align, and an eraser to clear formatting. Next is a &quot;Background Color&quot; button with a paint palette icon, followed by an &quot;Image Ratio&quot; section where &quot;4:3&quot; is selected among a grid of other ratios. The &quot;Controls Corners&quot; setting has &quot;Square&quot; selected over &quot;Rounded,&quot; and the &quot;Controls Outline&quot; setting shows &quot;None&quot; selected over &quot;Outline.&quot; Finally, three unchecked boxes appear at the bottom: &quot;Hide the solution from students,&quot; &quot;Hide the controls from students,&quot; and &quot;Hide the timer from students.&quot;\" class=\"wp-image-7157\" srcset=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_StylePanel3.png 387w, https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_StylePanel3-198x300.png 198w\" sizes=\"auto, (max-width: 387px) 85vw, 387px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Layout:<\/strong> Select between <strong>Vertical Layout<\/strong> and <strong>Horizontal Layout<\/strong>.<\/li>\n\n\n\n<li><strong>Image Text Alignment:<\/strong> Choose to align your text to the Left, Center, Right, or revert to the Default alignment.<\/li>\n\n\n\n<li>\ud83c\udfa8 <strong>Background Color:<\/strong> Set the background color displayed behind the possible answers in your Order Items activity.<\/li>\n\n\n\n<li><strong>Image Ratio:<\/strong> Define the aspect ratio for all images used within the activity.<\/li>\n\n\n\n<li><strong>Controls Corners:<\/strong> Choose <strong>Square<\/strong> or <strong>Rounded<\/strong> corners for the control bar at the bottom of the activity (which houses the \u2714\ufe0f <strong>Check<\/strong> button, <strong>Reset<\/strong> button, and timer).<\/li>\n\n\n\n<li><strong>Controls Outline:<\/strong> Select <strong>Outline<\/strong> to add a border around the entire Order Items interface and the bottom control bar, or select <strong>None<\/strong> to leave it borderless.<\/li>\n\n\n\n<li>\u2611\ufe0f <strong>Hide the solution from students:<\/strong> Check this box to prevent the &#8220;Solution&#8221; button from appearing after students check their answers.<\/li>\n\n\n\n<li>\u2611\ufe0f <strong>Hide the controls from students:<\/strong> Check this box to hide the \u2714\ufe0f <strong>Check<\/strong> button, <strong>Reset<\/strong> button, and timer entirely.<\/li>\n\n\n\n<li>\u2611\ufe0f <strong>Hide the timer from students:<\/strong> Check this box to hide only the timer in the bottom right corner of the activity.<\/li>\n<\/ul>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"advanced-panel\">Advanced Panel<\/h2>\n\n\n\n<p>The <strong>Advanced<\/strong> panel contains additional settings for your Order Items activity that can modify the way it functions for your students.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"384\" height=\"224\" src=\"http:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_AdvancedPanel.png\" alt=\"A screenshot captures the &quot;Advanced&quot; settings panel for the &quot;Order Items&quot; tool in the DesignPLUS Sidebar within the Canvas LMS. The panel has a blue header bar with the word &quot;Advanced&quot; and an accordion arrow. Inside, there is a &quot;Data Tracking Title&quot; label and an adjacent text input field containing the text &quot;Order Items 1&quot;. Below the title section are four unchecked checkboxes with their labels: &quot;Disable data tracking for this interactive,&quot; &quot;Show feedback when 100% correct,&quot; &quot;Show feedback when incorrect,&quot; and &quot;Hide 'Next' until all interactives completed.&quot;\" class=\"wp-image-7159\" srcset=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_AdvancedPanel.png 384w, https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_OrderItems_AdvancedPanel-300x175.png 300w\" sizes=\"auto, (max-width: 384px) 85vw, 384px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Data Tracking Title:<\/strong> Enter a custom name to track anonymous usage data for this specific activity. (Review the <a href=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/designplus-interactive-data\/\" data-type=\"post\" data-id=\"6715\">DesignPLUS Interactive Data<\/a> guide for more information.)<\/li>\n\n\n\n<li>\u2611\ufe0f <strong>Disable data tracking for this interactive:<\/strong> Check this box to opt out of collecting anonymous usage data for this specific tool.<\/li>\n\n\n\n<li>\u2611\ufe0f <strong>Show feedback when 100% correct:<\/strong> 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.<\/li>\n\n\n\n<li>\u2611\ufe0f <strong>Show feedback when incorrect:<\/strong> Check this box to provide a custom &#8220;try again&#8221; message. Selecting this adds a red placeholder box in the RCE where you can type your feedback.<\/li>\n\n\n\n<li>\u2611\ufe0f <strong>Hide &#8220;Next&#8221; until all interactives completed:<\/strong> Check this box to hide the Canvas &#8220;Next&#8221; button at the bottom of the page until the student successfully completes the activity.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"additional-resources\">Additional Resources<\/h2>\n\n\n\n<div class=\"wp-block-advgb-adv-tabs advgb-tabs-wrapper advgb-tab-vert-desktop advgb-tab-vert-tablet advgb-tab-stack-mobile advgb-tabs-9e249218-0ebb-4964-854e-f83e4da9b2fc\" data-tab-active=\"0\"><ul class=\"advgb-tabs-panel\" role=\"tablist\"><li class=\"advgb-tab advgb-tab-active\" role=\"presentation\" style=\"background-color:#e9e9e9;border-style:solid;border-width:1px;border-radius:10px\"><button class=\"advgb-tab-button\" id=\"advgb-tab-_835064-6e-0\" aria-controls=\"advgb-tab-panel-_835064-6e-0\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\" style=\"color:#242424;background:none;border:none;width:100%;text-align:inherit;cursor:pointer;padding:8px 16px;font:inherit\"><span>Order Items<\/span><\/button><\/li><\/ul><div class=\"advgb-tab-body-wrapper\" style=\"border-style:solid;border-width:1px;border-radius:10px\">\n<div class=\"wp-block-advgb-tab advgb-tab-body-container\"><div class=\"advgb-tab-body-header advgb-tab-class- header-active\" id=\"advgb-tab-panel-_835064-6e-0\" role=\"tabpanel\" aria-labelledby=\"advgb-tab-_835064-6e-0\" tabindex=\"0\"><span>Order Items<\/span><\/div><div class=\"advgb-tab-_835064-6e advgb-tab-body\" aria-labelledby=\"advgb-tab-panel-_835064-6e-0\" style=\"display:block\">\n<p><a href=\"https:\/\/cidilabs.instructure.com\/courses\/6630\/pages\/order-items\" target=\"_blank\" rel=\"noreferrer noopener\">Order Items: [New] DesignPLUS User Guide<\/a><\/p>\n\n\n\n<p style=\"text-align: center;\"><iframe class=\"vidyard_iframe\" title=\"DesignPLUS: Order Items (11 min)\" src=\"\/\/play.vidyard.com\/mvovw3S5Sz5Zqxt7DAkBKJ.html?\" width=640 height=360 scrolling=\"no\" frameborder=\"0\" allowtransparency=\"true\" allowfullscreen referrerpolicy=\"no-referrer-when-downgrade\"><\/iframe>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><em>Portions of this guide were created in collaboration with generative AI to brainstorm and refine ideas and grammar.<\/em><\/p>\n<style class=\"advgb-styles-renderer\">#advgb-infobox-bf9bc3ea-195c-4501-8c44-7b11aa4b7060, .advgb-infobox-bf9bc3ea-195c-4501-8c44-7b11aa4b7060 {background-color: #f5f5f5;padding: 20px 20px 20px 20px;border: 0px solid #e8e8e8 ;border-radius: 0px;}#advgb-infobox-bf9bc3ea-195c-4501-8c44-7b11aa4b7060 .advgb-infobox-icon-container, .advgb-infobox-bf9bc3ea-195c-4501-8c44-7b11aa4b7060 .advgb-infobox-icon-container {background-color: #f5f5f5;padding: 0;margin: 0;border: 0px solid #e8e8e8 ;border-radius: 0px;}#advgb-infobox-bf9bc3ea-195c-4501-8c44-7b11aa4b7060 .advgb-infobox-icon-container i, .advgb-infobox-bf9bc3ea-195c-4501-8c44-7b11aa4b7060 .advgb-infobox-icon-container i {color: #251c5c;font-size: 70px;display: block;}#advgb-infobox-bf9bc3ea-195c-4501-8c44-7b11aa4b7060 .advgb-infobox-textcontent .advgb-infobox-title, .advgb-infobox-bf9bc3ea-195c-4501-8c44-7b11aa4b7060 .advgb-infobox-textcontent .advgb-infobox-title {color: #333;padding: 0;margin: 5px 0 10px 0;white-space: pre-wrap;}#advgb-infobox-bf9bc3ea-195c-4501-8c44-7b11aa4b7060 .advgb-infobox-textcontent .advgb-infobox-text, .advgb-infobox-bf9bc3ea-195c-4501-8c44-7b11aa4b7060 .advgb-infobox-textcontent .advgb-infobox-text {color: #333;padding: 0;margin: 0;white-space: pre-wrap;}.advgb-tabs-8e134e5e-12fe-49a3-aafe-1c11e7ca10f0 ul.advgb-tabs-panel li.advgb-tab.advgb-tab-active {background-color:#251c5c !important;color:#fff !important;}#advgb-tabs-8e134e5e-12fe-49a3-aafe-1c11e7ca10f0 .advgb-tab-body-header.header-active, .advgb-tabs-8e134e5e-12fe-49a3-aafe-1c11e7ca10f0 .advgb-tab-body-header.header-active{background-color:#251c5c !important;color:#fff !important;}.advgb-tabs-9e249218-0ebb-4964-854e-f83e4da9b2fc ul.advgb-tabs-panel li.advgb-tab.advgb-tab-active {background-color:#251c5c !important;color:#fff !important;}#advgb-tabs-9e249218-0ebb-4964-854e-f83e4da9b2fc .advgb-tab-body-header.header-active, .advgb-tabs-9e249218-0ebb-4964-854e-f83e4da9b2fc .advgb-tab-body-header.header-active{background-color:#251c5c !important;color:#fff !important;}<\/style>","protected":false},"excerpt":{"rendered":"<p>The Order Items tool allows you to add ungraded, interactive learning checks directly to any Canvas content page. Similar to an &#8220;Ordering&#8221; question in Canvas New Quizzes, it presents a prompt and asks students to place the given items in order. These options can be text-based, image-based, or a combination of both. Example Uses: View &hellip; <a href=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/designplus-order-items\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;DesignPLUS Order Items&#8221;<\/span><\/a><\/p>\n","protected":false},"author":4255,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[4,244],"tags":[506,24,121,128,533,298,504,505],"class_list":["post-7138","post","type-post","status-publish","format-standard","hentry","category-canvas","category-cidi-labs","tag-advanced","tag-content","tag-designplus","tag-items","tag-order","tag-page","tag-panel","tag-style"],"author_meta":{"display_name":"Chris Hofer","author_link":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/author\/chofer\/"},"featured_img":null,"coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/category\/canvas\/\" class=\"advgb-post-tax-term\">Canvas<\/a>","<a href=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/category\/cidi-labs\/\" class=\"advgb-post-tax-term\">Cidi Labs<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Canvas<\/span>","<span class=\"advgb-post-tax-term\">Cidi Labs<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/category\/cidi-labs\/\" class=\"advgb-post-tax-term\">Advanced<\/a>","<a href=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/category\/cidi-labs\/\" class=\"advgb-post-tax-term\">Content<\/a>","<a href=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/category\/cidi-labs\/\" class=\"advgb-post-tax-term\">DesignPLUS<\/a>","<a href=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/category\/cidi-labs\/\" class=\"advgb-post-tax-term\">Items<\/a>","<a href=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/category\/cidi-labs\/\" class=\"advgb-post-tax-term\">Order<\/a>","<a href=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/category\/cidi-labs\/\" class=\"advgb-post-tax-term\">Page<\/a>","<a href=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/category\/cidi-labs\/\" class=\"advgb-post-tax-term\">Panel<\/a>","<a href=\"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/category\/cidi-labs\/\" class=\"advgb-post-tax-term\">Style<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Advanced<\/span>","<span class=\"advgb-post-tax-term\">Content<\/span>","<span class=\"advgb-post-tax-term\">DesignPLUS<\/span>","<span class=\"advgb-post-tax-term\">Items<\/span>","<span class=\"advgb-post-tax-term\">Order<\/span>","<span class=\"advgb-post-tax-term\">Page<\/span>","<span class=\"advgb-post-tax-term\">Panel<\/span>","<span class=\"advgb-post-tax-term\">Style<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 2 months ago","modified":"Updated 1 week ago"},"absolute_dates":{"created":"Posted on March 16, 2026","modified":"Updated on April 28, 2026"},"absolute_dates_time":{"created":"Posted on March 16, 2026 9:57 pm","modified":"Updated on April 28, 2026 3:48 pm"},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/posts\/7138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/users\/4255"}],"replies":[{"embeddable":true,"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/comments?post=7138"}],"version-history":[{"count":19,"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/posts\/7138\/revisions"}],"predecessor-version":[{"id":7627,"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/posts\/7138\/revisions\/7627"}],"wp:attachment":[{"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/media?parent=7138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/categories?post=7138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/tags?post=7138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}