Drag and drop targets to one target, in a specific order.

Sep 20, 2023

Anyone know how to designate drop targets as correct, when the user drops them on the same target,  but in a 1st, 2nd, 3rd etc... order. If the user,  for instance drops the target that should be third,  first,  it would tell them they're incorrect.  

Basically,  I have a pizza and I need users to drop the rolling pin first,  then the sauce,  then cheese etc... in that order.  Not just pile it all on there and getting it all " correct" because they're in the right spot, I really need a way to identify the correct order.  

Thanks for any help with this!

5 Replies
Joanne Chen

Hi Jennifer,

You can do it in several ways.
One is to create multiple slides for creating a series drag&drop, since it has specific order, it means there is only one correct drop for one slide. Jump to next slide when dropping correctly, show incorrect layer when dropping incorrect.

Another way is to use the state of pizza as a condition. For example: if the correct matching is:
item1>>pizza (normal state)
item2>>pizza1(state for item1 is added)
item3>>pizza12 (state for item1&2 are added)

Show incorrct layer when item2 drops on the pizza if the state of the pizza is Not pizza1.
Show incorrct layer when item3 drops on the pizza if the state of the pizza is Not pizza12.
Change the state of the pizza to pizza1 when item1 drops on pizza if the state of the pizza is normal.
Change the state of the pizza to pizza12 when item2 drops on pizza if the state of the pizza is pizza1.
Change the state of the pizza to pizza123 when item3 drops on pizza if the state of the pizza is pizza12.

Sandeep Gadam

Hello Jennifer, I guess you're looking for a sequential drag and drop just like the default sequence drop down that's available in Storyline.

The default drag and drop wouldn't suffice your requirement within a single slide since you want this to be in a specific order. So, I suggest you to build a custom drag and drop by creating pick many interaction which is available in freeform.

Please share your SL project here so that someone can assist you with a better possible solution by reviewing your file.

Nedim Ramic

You can achieve this by using the free form drag and drop interaction combined with motion paths that will ensure the dropped element returns to its original position if it's not dropped in a specific order. In this example the correct order of dropped items is as follow: cheese, bacon, and basil. Otherwise, the popup message will keep showing until all elements are dropped in the correct order. Let me know if this is something that you may be looking for.

You may also take a look or use frees template and assets to play with a similar interaction at