Drag and Drop Solution - Sample with Multiple Correct Targets with drag off and return plus a lot more

Mar 29, 2021

Here's a sample Drag and Drop that provides almost everything people have been asking for.

1. Any number of targets can be correct for any object.
2. Objects not dropped on target are returned.
3. Targets can be cleared of dropped objects.
4. Multiple objects can be dropped on a single target.
5. On Try Again, it can clear or maintain the previous attempt.
6. Provides feedback that is specific to incorrect answers.
7. Answers can be saved and made available later in the course.
8. Allows partial, multiple, or very complex combinations of Correct answers.
9. Dropping objects can automatically resize or reshape.
10. Can enforce a minimum requirement for number of selected objects before submission is permitted.
There are  six examples, and since different ones highlight different features, not every one contains all the features.
It contains explanations of how it works, and instructions for modifying it.
Note: Since it uses a Pick one interaction, regular Drag and Drop options (like objects appearing one at a time, or the various stacking options) are not available through the SL menu, but must be created.

 

Feel free to use as is, or study it and take just the principle that meets your need.

 You can see it action here:

https://360.articulate.com/review/content/6b66b467-4d65-465b-bf44-cab98aa88bf3/review

EDIT: I've changed it to load in 360. Sorry about the confusion.

38 Replies
Walt Hamilton

Chris,

Try it now. What I've done is to split the learner's part of the interaction, and the evaluation, putting them on two separate slides. The learner drags, and when they submit, the answer is evaluated, and sent to the Pick One interaction slide, which has the Quiz functions on it. The Try Again button does use Reset to Initial State, but the quiz functions, like the number of attempts, aren't restarted.

If that isn't exactly what you need, one of the Complex Graphics with Reset is on one slide, and Resets without Restarting the Slide.

Chris Pim

Thanks Walt I will take a good look

I found a solution to my problem of having 9 draggable objects that can be dropped onto 9 drop spots...any object can be dropped on any drop, but only one object allowed on any drop spot. Drops that fall outside a drop area or drop on an already used spot return to initial location.  Once complete a reset button can be clicked which resets to default.

The way I did it, as I know which drag object is on which drop spot, was to set up an animation to move the object from its current location back to it's start location  using variables and triggers...It's a 9 X 9 interaction requiring 81 different animations, but it's quite elegant and looks great as it resets. 

Chris Pim

My solution works Ok. But I need an option to reset the drag and drop interaction on certain conditions but not always. The only effective/reliable way of resetting I can see is to reset the slide to initial position on revisiting the slide. But this means the interaction always resets...sometimes I want the user to continue or change their darg and drop choices and at other times I want it to reset to initial starting point.

Is there any way to achieve this with the Storyline revisiting option? Any help greatly appreciated.

Walt Hamilton

If you are only wanting to revisit once, you can do it with duplicate slides, one which saves, and one which resets. Start the learner on the one that saves, and when they are through, send them to the reset, or save as appropriate. The problem is that if you want to send them back multiple times, If their path is, for example, Save, Reset, Save, it won't work because the second trip to save will show the first save condition, and not the second.

Of course, if you want to get really wild, you could have a whole bunch of copies, and variables to keep track of them, and you could send them back as many times as you could stomach. Set them all to save, and each time, either send them to a new one, or the most recently visited one.

 

Ira S

Hi all,

I know this topic may be old but just wanted to give my contribution. I was actually asked by my client to do something similar. Drag and drop interaction with 4 different categories, 3 drop zones/targets each (12 altogether), and 9 drag objects where each drop zone/target could accept one or more correct answers/drag objects. The learner is allowed 3 attempts and a different incorrect layer should popup for every incorrect response after pressing the submit button. I used the standard drag & drop freeform, drop correct & drop incorrect states for drag objects, and customized triggers. I placed the reset button on the third incorrect feedback so interaction could be started from the beginning. Nothing too fancy and easy to understand. The "All correct" variable at the top will let you know if an interaction is correct or incorrect in real-time before hitting the submit button. Hope someone may found it useful.   

https://360.articulate.com/review/content/00a961b2-2855-4229-9126-44a6604a1424/review

Kathleen Czop

I do have a question, actually. I'm thinking I"ll have to do something custom, like one of yours but I'm wondering if maybe I can get what I set up to actually work with the drag and drop form. Either way, here is the issue:

I'm working on an interaction with a drag and drop which I'm very excited about but perhaps too ambitious. I'd like users to drag 8 true and false statements to either of 2 big rectangles (one for true and one for false) with 4 small rectangles inside them. The 4 small rectangles are in a "true group" or a "false group". It's meant to look like a pickleball court (see screenshot). I'd like the 8 statements (in small rectangles the size of the target ones I mentioned above) to be able to be dragged to any small rectangle on either the "true court" or "false court" depending on the answer. I'd like the answers to stay there until the end of the interaction so the user can look them over. 

Here is what I did for drag and drop options:

- return item to start point if dropped outside the correct target 

- reveal drag items one at a time

- Snap dropped items to drop target in tile form

I thought this would work, but the tiles don't line up properly as you can see in my file. 

I'd really love to reproduce an interaction like this for other projects. Would anyone mind having a look at my storyfile and giving me some advice on how I might get the objects to line up nicely in any of the 4 correct targets (not just one target assigned specifically for each object)?  I sense some work with variables coming my way!
Walt Hamilton

As long as you don't use them to drag, or as targets, or in triggers, the groups won't hurt you. But if you ever include them in one of these functions, you are likely to regret it.

The attached sample will line the items on the drop target. Using your slide, I created larger, invisible (filled, transparency 98%) shapes, edited them, and pasted the blue rectangles with words onto the Normal state.

I created new larger targets, and with a lot of trial and error got everything to line up.

Kathleen Czop

Interesting idea, I like this. So the larger invisible object rectangles allowed everything to fit on the court properly. But at first, the transparent shapes weren't totally transparent and I could see the shape over the woman's body. I went back and looked and they were set to 98%, setting them to 100% fixed it. Thank you so much for your help and ideas though, I so appreciate your time!

Walt Hamilton
You're welcome. PIAWYC  (Pass it along when you can). 
 
I traditionally set transparency to 98% because there have been reports of 100% not acting as a solid object. In this case having so many stacked resulted in them being visible. If 100% works, that's good. If it doesn't, experiment with a white fill, or background fill, or fill with the picture of the woman.