Features

Key Features and Benefits

• Interactivity: Improves learning through active participation in matching related concepts.
• Accessibility: Fully accessible to all users, including keyboard navigation support.
• Customization: Supports text content and can be configured for various matching activities like vocabulary pairs, concept relationships, or classification exercises.
• DesignPLUS Integration: Part of the Design Tools for Canvas, allowing for easy creation without needing to know HTML.
• Visual Feedback: Provides immediate feedback when items are successfully matched with visual indicators.

Usage in Canvas

Functionality: Students click on items in the "Items to Match" area. When two items form a correct pair, they receive visual confirmation and are moved to the "Matched Items" section.

Scoring: Tracks completion progress and can display final scores with reset functionality.

Placement: Can be added to pages, assignments, or discussions within Canvas.

The base match items template has been adapted with:

• TSTC branding colors (Texas Blue background with red borders)
• Enhanced visual hierarchy with proper icon integration
• Responsive design for various screen sizes

  Code Snippet

Canvas Page Wrapper

If you are pasting this into a page that already has work in it, you will likely already have a wrapper in place. If you are starting with an empty page, you will need to add this wrapper. Be sure to place your end div at the end of the code.

<div id="dp-wrapper" class="dp-wrapper dp-flat-sections">

Code Snippet

This is the template code for this activity.

      
      <div class="dp-match-items dp-match-pairing dp-si-rounded dp-si-outline" style="background-color: #1d2757; padding: 20px; border-radius: 10px; border: 2px solid #d13138;">
        <h4 class="dp-has-icon" style="color: white;"><i class="fas fa-object-ungroup"><span class="dp-icon-content" style="display: none;">&nbsp;</span></i> Match Items</h4>
        <p class="dp-match-instructions" style="color: white; border: none; background: transparent;">Select each set of two matching items.</p>
        <div class="dp-unmatched-items">
            <h4 class="dp-has-icon unmatched-items-header"><i class="fas fa-search"><span class="dp-icon-content" style="display: none;">&nbsp;</span></i> Items to Match</h4>
            <dl class="dp-match dp-match-text">
                <dt data-pair-id="pair-0">Pair 1 Item 1</dt>
                <dd data-pair-id="pair-0">Pair 1 Item 2</dd>
                <dt data-pair-id="pair-1">Pair 2 Item 1</dt>
                <dd data-pair-id="pair-1">Pair 2 Item 2</dd>
                <dt data-pair-id="pair-2">Pair 3 Item 1</dt>
                <dd data-pair-id="pair-2">Pair 3 Item 2</dd>
            </dl>
        </div>
    </div>
    <p>&nbsp;</p>