Captivate Styles

Sorting Drag & Drop Captivate

***All template files are tested using modern browsers, such as Chrome and Firefox. We do not support or test using Internet Explorer.***

In this video, we're going to take a look at the structure of our Sorting Drag and Drop template, and how to make a few edits to the file.

Basic functionality is as follows:
The user drags each of 6 different draggers to 1 of 3 areas: dropzone 1, dropzone 2, or the trash.
When a dragger is dropped, it disappears, and the area it was sorted to changes color to provide visual feedback.
When all have been dropped, a correct feedback group appears, with a congratulatory message, or the scroe_feedback group appears, showing which blocks the user got correct or incorrect.

All elements are directly editable and customizable by you.

On the simpler end of things, all text is live, and editable. Simply click the object you want to change, and change it!
The dragger text is populated via variables.
Visit the Set_DraggerText action to change these.
All formatting for all is fair game; color, stroke, and style.
Use the Style pane to edit each object's appearance.
Make sure you check states when editing.

One special note - the trashcan is a shape fill.
To replace this image, use a transparent PNG or SVG.

To set the answers for this interaction, you'll need to access the variables pane.
For each dragger variable, enter a value between 1-3, relative to the dropzone you'd like them to go to.