Drag and drop with multiple drop targets using states for feedback

May 17, 2017

I'm creating a drag and drop with multiple correct drop targets.  

Ideally, the drop target states would change to correct or incorrect drop for immediate feedback.  

1--is it possible to have multiple drop states (so an icon and it's label can go in any one of the four boxes on the correct side)?

2--how do I get the drop states to work correctly

Here's a video showing what happens when I use the states on the drop items--even when I've dropped in the correct area.



6 Replies
Walt Hamilton

Here's a sample of multiple correct drop zones. The box Yes1 changes states when dropped on a correct target. Note that in this case all targets are correct, but that can be changed with the trigger conditions.

Groups and states do not play nicely together. I get away with it in the example because the object is a shape with text on it, not a grouped object and textbox.

to use names and icons like your graphic shows, create a text box for the name, then edit the state and paste the icon as part of the state.

J Pace

I just tried a new shape, and it worked.  Looks like it has something to do with the original rectangle.  Any ideas on how to fix it?  Or do I just need to replace the drop targets with new ones?

Are variables the only way to make it so drop items can go to multiple drop targets?

Lastly,  since you didn't use a drag and drop question--how did you get the drop items to snap to the center of the targets?

Walt Hamilton

As Ashley points out, the only to have more than one possible drop target for an object is to create a custom slide. That sample was created to give 3 levels of functionality.

Level 1 -  Drag and drop one object on another.The minimum can be created by using a normal slide with a trigger that does something when one object is dropped on another. The trigger is what gives you both a draggable object and a target. The center of the object is aligned to the center of the target. You must use a built-in drag and drop interaction to have any other choices for alignment. To add complexity to the interaction, you may need to keep track of what object is located where on the screen, and since computers can concentrate on only 1 item at a time, I used variables to remember that information.

Level 2 - Report the results of the activity to the user, The variables are only used to record what actions have happened so the results can be determined when the submit button is clicked. In a normal drag and drop interaction, that function is built into the slide. In a normal slide, you need to use the variables to pass on what happened. If you just use that information to tell the user how they did, that's all you need.

Level 3 - Keep and utilize the results.  If you need to pass the results on to a results slide for use by an LMS, then you need to create the interaction as some sort of a built-in interaction. The Pick One seems to be the easiest one to modify for this sort of purpose.


This discussion is closed. You can start a new discussion or contact Articulate Support.