Forum Discussion
Drag and Drop - Only One Spot Works
Good morning folks,
This is a bit of a long explanation so please bear with me. I have to explain lots of context.
I'm having a problem with a drag-and-drop interaction. These questions are asking the learners to drag an icon of a vehicle onto the proper location of a piece of machinery. There are three possible spots, only one correct spot based on the vehicle type. There are several issues going on so here goes...
1. I created three circles that were the possible spots (circle_front; circle_on; circle_behind). Dragging the icon itself into the three possible spots didn't work. So I created a fourth circle in the center of the icon, grouped those items together, and made all the circles 99% transparent. I set the question to drag the group to the drop circles and this configuration worked great. I was dragging and dropping onto three different spots easily. But...
2. I used an icon that had a transparent background. So the learners had to drag the vehicle from the "outline" of the icon. Because the icon is transparent, you can't drag from "inside" the icon, there is nothing to click there. My testers didn't like that they couldn't drag from anywhere within the vehicle. So...
3. I created a solid icon so the learners can click and drag from anywhere on the vehicle, not being restricted to dragging from the icon's outline. But now, when I test it in preview mode, I am only able to drop the group to one of the drop circles (circle_front, for example). Anytime I try to drop the vehicle onto any of the other circles, the group jumps back to "circle_front" as if it's the only drop spot. Maddening!
4. I would prefer the drop areas to "snap" to ensure the learner is at a designated spot. But I changed the drag and drop option setting to "free" to allow the users to put the icon anywhere, and even when the icon is on the EXACT SPOT, the answer is marked incorrect.
I can't figure out why the other circles aren't being recognized as possible drop spots, or why the drop spots are so off-kilter. I've changed the arrangement several times (sending to front/back/forward/backward); ungrouping, regrouping... I'm at a loss. I even changed the drop shapes from circles to rectangles to fit the icon's height, and that didn't work either. The slide is attached. (While editing and testing, the 'drop' rectangles are red and yellow to ensure the best spot. After testing--and when I discover that it works--I change them to white, then 99% transparency). Does anyone have any ideas?
Attached is the original file to give an idea of how it's supposed to work.
Hi Jeff, and I had a look at both of your files. The original worked fine, except when you try to find that 'sweet spot'. Might I suggest three ghosted images of where the front wheel could align to, so users find it a bit easier to place the car? I also had a look at your second file,and it appears that it is the 'solid car' (png) that is the issue. I changed it back to the Icon you originally had, and that worked with the rectangular drop spot.
I hope this helps, but I would suggest again the three ghosted wheels idea to help people place the car.
Excellent work, by the way.Thanks for the help. I'll give that a shot.
