Created by Smart Sparrow

Drag and Drop

The Drag-and-Drop widget allows learners to move items from a “bank” to designated answer areas.

Unique ways to use this widget

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

  • Students drag each word or image to its appropriate category.
  • Students drag an item into a specific cell within a table.
  • Students rebuild the correct order for an equation or sentence.


Have a play


Basic setup instructions

  1. Copy the widget link by clicking on the Get Component button at the top of this page.
  2. In the Author Tool, add a blank component from the Components tab and resize it to your liking.
  3. Paste the url that you’ve just copied into the Component’s source.
  4. With the component selected, Click on Configure and select Options to set it up.
  5. Click the gear icon on the Drop Area and individual Bank Items to alter the look and settings for each item.
  6. This widget is set entirely via the options menu. Have a look at the CAPI table desciption at the bottom of the article for more information on what you can do.
  7. Before deploying your lesson to students, make sure you switch the widget from Config Mode into Student Mode.

You can also watch this 10-minute demo on how to set up the Drag-and-Drop widget:



Q: I’ve set up my widget, but when I preview it I can’t complete the activity the way students should.A: This is because you still have the widget set to “Config” mode. Use the edit icon on the Widget’s iFrame to change it to “Student” mode. Whenever you want to make changes to the widget, switch it back to “Config” mode.

Q: How can I enhance the visual design of my Drag-and-Drop activity?A: Try using more images as the base of your activity, either to form the drop areas or as the items themselves. If you still want some extra pizzazz, the Drag-and-Drop widget can be fed CSS code to further customize its design. If you’re not familiar with CSS, email our support team and we can help you out.



Advanced 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