Sorting Drag And Drop

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

Do you want to learn how to use xAPI in this template? Learn Now!! 

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

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

This takes place over three layers: the base layer, where the interaction and most content resides, and two feedback layers.

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! Same with color, stroke, and style. Use the format pane to edit each button's appearance.

Objects on the Correct and Almost layers follow suit.

The dropzones are a little less straightforward, but still quite easy to edit. To change the fill or stroke of the main portion of either dropzone 1 or 2, select that shape and edit via the Format pane.

To change the headers on those objects you'll need to use the Edit States pane. Make sure you address all three states if your changes require it.

Similarly, the Trashcan icon can be edited via the states pane. Adjust the style freely—this is a fully editable shape.

If you'd like to remove one of the blocks from the interaction, edit the NumOfTabs_ variable via the Triggers pane. If you made changes to the styles of the draggers/tabs/blocks on the base layer, you'll want to replicate those changes on the Almost layer.