Drag and drop blocks are an excellent activity for correctly identifying and sorting information amongst several choices. The user drags an object (content or text) from an initial zone, and places it in a one of several zones. If the user places the object into the correct zone, it will remain in place and form a column. If the object is placed in an incorrect zone, the object will automatically return to the original zone. There are several types of Drag and Drop activity types: Flexible, Grouping and Matching. Flexible is the most commonly used, and is the example used for the instructions below. Details on the other Drag and Drop types are covered in the Options section.
Start in the Page management area of the Sequence page.
Zones are the columns which source objects will be dragged into. Zones should be setup before the sources, so that sources can be assigned a correct zone.
Repeat steps 1 - 7 until you have the desired number of drop zones.
Sources are the ‘draggable objects’ which the user will drag into the zones setup above.
Repeat steps 1 - 7 until you have the desired number of sources.
The row and column layout can be confusing when conceptualising where to layout sources and zones. It is helpful to think of the drag and drop as a grid. The Example section below shows how a drag and drop activity behaves.
A Grouping drag and drop has only two zones, which appear as columns. These are already setup in the back-end. One column shows the list of sources (called DragOptions) and the other is the zone for the correct choices. A Grouping Drag and drop allows the user to drag all options which are correct into the Correct column, and leave the options they think are incorrect as they are. Individual feedback can be added to each option, as well as overall feedback once the user has dragged all the options they feel belong together in the Correct group.
A Matching Drag and drop shows two columns in a similar way to the Grouping Drag and drop. With a Matching Drag and drop however, each source object has only one correct target zone to be placed into. Each source and target is setup as a matching pair. Source objects appear in the left-hand column, and must be dragged onto their corresponding target zone on the right hand side. Once the user has dragged all the objects, a feedback button is clicked to display either individual feedback for each source object, or overall feedback for the activity.
You can now customise the visual appearance of the drag and drop zones.
Start editing a Drag and drop zone and then head to the visual tab in the top right.
From here you customise the colours and spacing of both the text content labeling the drop zone and the drop zone itself.