Card Drop Component [Template]

The card drop component lets you build in engaging pulse checks and exercises to help learners reinforce knowledge and answer questions by placing labeled cards into specific drop zones.

This article provides an overview of the card drop component, component setup and behavior, and provides examples of card drop component configurations.

Component overview

The Card Drop component lets you create specific drop zones for each answer card or maintain the same drop zones for each answer card. Learners can test their knowledge through categorization and classification exercises.

The Card Drop component is a fully responsive and interactive component that works across different browsers, tablets, and smartphones. It is a fully accessible component that can be operated solely by using the keyboard. It can also be read by screen readers

Component set up

Follow these steps to add the Card Drop component to a Block:

1. Click Add Component.
2. Use the component search or scroll to find the Card Drop component.
3. Click the Card Drop component and select Add Full.

Click the Edit Component icon on the newly added Card Drop component to begin set up.

General & Behaviour sections

In the General section:

1. Add Title, or a Display Title, as needed. Display Title is seen by learners
2. Add your Card Drop Question.
3. Instruction Text that tells users how to use the component.
4. Include an Aria Label for screen readers, as needed.

In the Behaviour section:

The Card Drop component can be set up to deliver the same drop zones across all cards or set up to deliver custom drop zones for each card you create.

By default, the component is set to Each Card. This setting allows you to create custom drop zones for each card you add to the component.

Select All Cards to create drop zones that will be shared by all of the cards added to the component.

Update the number of attempts the learner is allowed, as needed. The default setting is 1 attempt.

The final setting in the Behaviour section lets you control what happens when a learner drops a card in an incorrect drop zone. When enabled, if a card is dropped in an incorrect zone, it is rejected and placed back in the card pile. If the toggle is disabled, learners receive feedback once all cards are dropped.

Add Component Cards & Drop Zones

Adding cards for your component differs slightly depending on the component setup of Each Card or All Cards in the Behaviour section.

Each Card

If Each Card is selected, the Cards section looks like this:

For Each Card:

1. Enter the text that should appear on the card. Format the text that appears on the card as needed.
2. Select Add Drop Zone to include a drop zone as an option for that card.

When you select Add Drop Zone, the editor expands:

3. Add and format the text for your drop zone.
4. add an aria label, as needed.
5. Select whether that drop zone is a correct or incorrect choice for that card.

Add, duplicate, or delete cards as needed.

Heads up!

You can duplicate a card to include some or all of the same drop zones for the next card, rather than recreating the same drop zones over and over.

6. To add a new card with unique drop zones, select Add Card.

All Cards

Select All Cards to create distinct Cards and Drop Zone sections that apply to all cards.

Add a Card:

1. Add a new card.
2. Add the text that should appear on the card.
3. Select the correct Drop Zone for the card.
4. Add, duplicate, or delete cards as needed.

Add a Drop Zone:

1. Add a new drop zone.
2. Add the text that should appear on the drop zone.
3. Set an aria label for screen readers, as needed.
4. Add, duplicate, or delete drop zones as needed.

Component Examples

The Card Drop component gives you a lot of flexibility. Below are examples that illustrate each Card Drop component setup:

Each Card Setup

Card 1 - appears with Drop Zones A and B

Card 2 - appears with Drop Zones A, B and C

Card 3 - appears with Drop Zones D and E

Card 4 - appears with Drop Zones A, B, C, D and E.

You can also set up a Card Drop component with a simpler configuration that utilizes shared drop zones across all cards.

All Cards Setup

Card 1 - appears with Drop Zones A and B.

Card 2 - appears with Drop Zones A and B.

Card 3 - appears with Drop Zones A and B.

Card 4 - appears with Drop Zones A and B.

Appearance

The Appearance section gives you access to define the display size of your cards (in pixels) for desktops, tablets, and phones. Cards are set to a default size of 300x150.

You may need to change the dimensions if you plan to include a lot of text on your card - use Live Preview to see how your cards look and amend as necessary.

Default Tablet and Mobile sizes will work correctly on devices but can be customized as needed.

Feedback

The Feedback section lets you tailor feedback for correct, partly correct, or incorrect card drops. Feedback can be displayed on the page, beneath the component or in a notification pop-up.

For each type of feedback, you can choose to include:

• global feedback set up in Course Builder > Edit Course Settings
• custom text as feedback
• custom imagery as feedback
• a link to a specific part of your course; if, for example, learners should revisit a particular section
• A feedback style that overrides the settings in Theme Editor > Notification Dialog section.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.