Skip to content

Drag and Drop: How to Snap Back Incorrect Options in Articulate Storyline2

Drag and Drop: How to Snap Back Incorrect Options in Articulate Storyline2

Articulate Storyline gives you the power to design out-of-the-box interactivities for an e-learning course. Today you can easily create interactivities like drag and drop in less than a few minutes. Of course, we have read in my previous blogs on how Articulate Storyline can be your weapon of choice to meet many of the challenges that developers face today. Today, I am again back with a new challenge and will tell you how Articulate Storyline has helped meet this requirement.

I have worked on a drag-and-drop interactivity, where if the user drags the item and drops in the incorrect drop target, the drag item snap backs to its original position giving the user an option to try the interactivity again. Though this kind of requirement is possible in Articulate Storyline1, in Storyline 2, the functionality to meet the above requirement is different.

The steps involved to meet the requirement in Storyline 2 are :

Step 1:
First create the customized drag-and-drop question with a number of attempts more than 1.
And assign the drag items to the correct drop targets.

Step 1

Step 2:

Go to animation pane and add the animation path as line animation for each Drag item. And adjust animation path so as to snap back to same position if it drops incorrectly.

Step 2

Step 3:

Create one variable for each Draggable item. For example, variable Drop1 for draggable Item1.

Step 3

Trigger 1: Adjust the variable Drop1 to true if the draggable Item1 is dropped on the correct drop target.

Trigger 1Trigger 2: Adjust the variable Drop1 to false if the draggable Item1 is dropped on incorrect drop targets.

Trigger 2

Trigger 3: Go to “Try Again” layer and add move trigger draggable item 1 if it drops in the incorrect drop target.

Trigger 3

Repeat step 3 for the remaining draggable items that is, Drag 2, and Drag 3.

Step 4:

Add one more trigger to hide the Try Again layer when a user clicks the “Try Again” button. This should be the last in the order of triggers.

Step 4

Then publish your course and check the output.

Check the output

In this way, you can snap back incorrect drag and drop objects to try again in Articulate Storyline2. In my next blog, I will be talking about the most craziest requirements I faced, and how I could meet them using Articulate Storyline2; so stay tuned.

Rapid eLearning Authoring Tools - A Training Manager's Guide