Drag and Drop with state changes

Jun 22, 2017

I have a freeform drag and drop interaction where learners are dragging items into emergency kits. The items start out at different sizes, but I have state changes set up so that they change to uniform squares when they are dragged onto a drop target. This way they can be displayed in a nice grid.

However, even though I have "snap to center" selected, the items are not lining up the grid properly. I suspect this has to do with the state changes that change the size, but I'm not sure how to fix it. 

The file is attached. Any help would be appreciated! Thanks! :)

4 Replies
Chris Cole

Hi Deidre -

I believe what is happening is that Storyline is indeed snapping the dragged image to the center of the drop target. However, it is using the center of the full-size image as the reference point for centering. It snaps the full-size image to the center of the target (even though the smaller state-sized image is showing). The smaller state image "lives" in the upper left corner of its' larger version of itself. Make sense? 

In other words, the smaller state version of the water bottle is located at the upper left corner of the larger Normal state version of the water bottle; they are not centered relative to each other. Even though the smaller water bottle is showing, Storyline is centering the larger water bottle.

I think I see a bigger problem though. If I drag water bottle image 45 to the lower back pack, I would only be considered correct if I happen to drop it on rectangle 9, and only rectangle 9. If I drop that water bottle on any other rectangle in the backpack, it will not be counted as correct. Perhaps you have a plan for working out how this exercise is scored, but I think the learner will get frustrated when they put a water bottle in the back pack and get it wrong because they did not know which of the 24 rectangles to drop it on.

Hope this helps.


Deidre Witan

Chris that makes sense. I will try centering them all and hopefully that will work! I figured it was something like that but I couldn't get my brain around it.

The way I'm setting up the interaction there is no one "correct" way to do it, so it's fine if the learner drops things on the "incorrect" targets. Once I get the drag and drop working properly I'm going to add variables to count up how much water, food, etc. they packed and if it's enough. One step at a time, though. :)

Alyssa - Thanks for your help! This is actually a separate drag and drop interaction with a different issue. I got the other one working and just forgot to post an update (sorry!). In fact, I used what I learned from that issue to get the state changes working on this one. Progress!

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