Drag and Drop

Creating the Drag and drop block

Start in the Page management area of the Sequence page.

1. Click on the (Select type to create) dropdown menu above the Blocks area, and select Flexible Drag n Drop block.
2. Click Add.
3. Enter a block heading and text content in the Main tab as required.
4. Click Save and Publish.

Adding the Drag and Drop

1. Click on the Drag and Drop tab.
2. Enter a question into The Question field. This can be a question which the user will answer by completing the activity, or instructions to the user.
3. Underneath the Drop and Source zone fields, at the bottom of the page, are options to set up the rows and columns of the Drag and drop grid. Enter values into the rows and columns fields as required. A simple drag and drop will usually have one row, and as many columns as there are zones required.

Adding drop zones

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.

1. Click on the Add a drop zone button.
2. Add a label for the drop zone into the Text content field. This can be hidden if required (for example if this is the zone in which the sources sit before being moved) by checking the Hide the text checkbox. Adding a zone label is very useful for organising the zones in the back-end.
3. Add an image to the Icon or zone background (optional).
4. Enter a row number for the zone into the Row to position this zone field.
5. Enter a column number for the zone into the Column to position this zone field.
6. Click Save and close.

Repeat steps 1 - 7 until you have the desired number of drop zones.

Adding sources

Sources are the ‘draggable objects’ which the user will drag into the zones setup above.

1. Click the Add a source button.
2. Add a label for the source into the Text content field. This will be the text that appears on the object which the user will drag into a zone.
3. Add an image to the Icon or source background (optional). If an image is added, the user will then be dragging the image into the zone instead of text. Check the Hide the text checkbox if the image option is chosen.
4. Select a row and column number for the source to sit in initially into the respective row and column fields. If left blank or 0 is added, the sources will sit above the drag and drop grid.
5. Click Save.
6. Click on the Select Zones to allow this source to be placed in dropdown menu and select the zone which is the correct option for this source. The zones must be set-up before the sources. More than one zone can be chosen. Zones can also be removed from this field by clicking the x on the zone listing preview.
7. Click Save and close.

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.

Grouping Drag and drop

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.

• The Heading on the options group field is the heading for the column which the draggable source objects sit in by default.
• The Heading for the correct options location is the heading for the correct column into which the user drags all source objects they think are correct.
• The Button Label field is for the text which will appear on the Feedback button which the user clicks once they have completed the drag and drop.
• The Overall Feedback field is a content field for the feedback which will be shown to user after the Feedback button is clicked.
• Each DragOption has a Choice field (for the text that is the draggable object option), a Feedback field (for individual feedback for that choice), a Tick this box if this is the correct answer checkbox, and a Score field (optional). More than one DragOption can be correct.
• Grouping Drag and Drops also have a Reset button on the front-end so that users can reset the activity to its original state.

Matching Drag and drop

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.

• The Column headings menu contains field for the source and target column headings (optional).
• Underneath the Matching pairs list is a series of options which dictate how the activity behaves. The bottom Setup menu allows an initial number of matching pairs to be created. If this option is not chosen, each matching pair must be setup separately.
• Each matching pair has a The information to be dragged to the target field, for the source object text, a Text shown in the target area - where options are placed field for the target zone text, a Feedback field (for individual feedback) and a Score field (optional).
• The Options menu contains an Allow user to drop source info onto incorrect targets checkbox. If this is left unchecked, a source object will simply return to the original left-hand column if placed on the wrong target zone.
• The Feedback menu contains a field for Overall feedback. If content is placed here, individual feedback for each source object will be disabled. There is also a Do not show any feedback for this activity checkbox.
• The Postscript menu contains a content field for text to be placed underneath the Drag and drop activity (optional).

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.