The "Group with drag and drop" template

Sort objects into different groups by dragging and dropping them onto areas. This is a combination of the Group and Drag and Drop templates. No image with areas to drop the objects on needs to be created. The areas are instead created by the template.

This is what a finished example might look like:

Click here to open this example in the Player (Opens in a new tab).

About the template

To make the exercise accessible, there is an alternative way for the user to move the options. It is possible to tab between the objects on the page or use shortcuts in screen reader software. You can then select an option with the Space or Enter keys, navigate to the area where you want to move the option and drop it with the Space or Enter keys.

The areas are placed to the left and right of the drag objects that are added. If you have two groups, the first is placed to the left and the second to the right. If you add more groups, they are alternatively placed to the left and right of the drag objects.
On a mobile, the drag objects are placed at the top and below that a column with the available groups is displayed. So, there can be a bit of scrolling needed on a mobile if you add many drag objects or groups.

Options in the "Content" tab

Title, Text and Footnote are, as in most other templates, the texts and instructions that appear on the page.

• Groups
  Corresponds to the areas to which the objects are to be dragged/moved. In each group, can have a number of alternatives. These are the objects to be dragged/moved to the respective group/area. With the button "Add groups" you can add as many groups/areas as you wish.
• Group header
  The name displayed in the Group/area.
• Color
  Select the color for the Group/surface (Optional).
• Alternatives
  The objects to be dragged/moved to current group/area. With the button "Add alternatives" you can add as many objects as you wish.

Options in the "Properties" tab

The settings for the template are:

• Enable the user to try again after answering incorrectly
  Choose is the user should be allowed to try again after answering incorrectly or if the correct answer should be shown after the first attempt.
• Show "Correct answer" button after two wrong answers
  Choose if the "Show correct answer" button should be displayed after two attempts or not shown at all.
• The user have to start from the beginning after answering incorrectly
  If this setting is enabled, all drag objects are moved back from the Groups/Surfaces after answering incorrectly. Even those that were correctly placed.
  If it is disabled, only the drag objects that are incorrectly placed will be moved back.
  You can therefore change the degree of difficulty of the exercise with this setting.
• Display mode
  How to use display modes is described in the separate guide "Display Modes".
• Button labels
  Option to change the text on buttons in the template (like Answer, Try again and Show correct answer buttons)