Drag and Drop with state changes

May 20, 2015

I am using Storyline 1 to build a drag-and-drop interaction (attached). The draggable items are text boxes. I would like them to: 

  • Appear one at a time
  • Appear in the normal state (blue text)
  • Change to white state (white text) when dragged over the Argument and Both hotspots (blue parts of the diagram)
  • Change back to normal state (blue text) when dragged away from the Argument and Both hotspots. I'm currently doing this with a trigger to change back to normal when dragged over the Persuasive hotspot or the background rectangle.
  • Fly back to the start position when dropped incorrectly
  • Disappear when dropped correctly. I've tried to do this both by making a Drop Correct state that is empty and by setting triggers to change to the hidden state when dropped on the corresponding hotspot

Additionally, I would also like the non-draggable text box with matching text appear when its counterpart has been dropped correctly. This way, the answers appear arranged neatly at the end of the interaction.

Right now, the behavior is erratic. Items are sticking in place to incorrect drop targets, not changing states when dropped, and the next item appears while the first one is still draggable.

Any ideas for how to fix this would be greatly appreciated. Thank you!!

4 Replies
Ashley Terwilliger-Pollard

Hi Deia,

You shouldn't need all these triggers to do this - although some of your requirements are in contradiction with one another.

I stripped down your file to just three text boxes and removed all the extra states/triggers you had. 

- Only one item appears at a time to be dragged
- When dropped correctly, it goes to the hidden state
- Returns to the start position if dropped incorrectly 

These are the two that you won't be able to have in conjunction with the above using the built in set up:

  • Change to white state (white text) when dragged over the Argument and Both hotspots (blue parts of the diagram)   Each drag element can only have one correct drop target, so they're either disappearing or returning to the start if dropped in the middle
  • Change back to normal state (blue text) when dragged away from the Argument and Both hotspots. I'm currently doing this with a trigger to change back to normal when dragged over the Persuasive hotspot or the background rectangle. Since it was dropped correctly, it's disappeared and is no longer able to be used as a drag item. 

If you still need those conditions hopefully someone in the community will be able to chime in and offer a custom solution. 

Deia _

Haha I see where what I said could be confusing. Hopefully this will clear it up:

There are three freeform hotspots that are drop targets. Each item should only have one drop target that is correct, because "both" is its own, separate, hotspot. The circles underneath are just for show and are not part of the interaction at all.

Essentially, there are four different things you should be able to do with the draggable item: Drag it overtop of Argument/Both hotspots (draggable item is white), drag it overtop of the Persuasive hotspot or background rectangle (draggable item is blue), drop it in the correct hotspot (draggable item disappears), or drop it outside of the correct hotspot (draggable item flies back to the beginning).

It seems to me that this would require 3 states (blue, white, hidden) for each draggable item, with corresponding triggers. The behavior when dropped incorrectly would be governed by the freeform interaction settings.

I actually was able to get this working correctly for a while, but when I tried to add in the final piece (the text within the diagram appearing upon correct answer) it all went crazy. Does the order of the triggers matter maybe?

I'll see if I can't get it working again tonight and post a copy. :)

Thanks for your help!

Deia _

Ok so I've got it mostly working. I quit using the hotspots as drop targets and used them solely for the state change triggers. Instead, I set up a "dummy" drop zone (rectangle 2) that's hidden behind the diagram.

The only thing that's broken in this version is that the draggable items are not flying back to the start when dropped incorrectly. Not sure how to fix this. I tried putting "none" as the drop target but that didn't change anything.

Any and all help is appreciated. Thank you!

Ashley Terwilliger-Pollard

Hi Deia,

Thanks for sharing some additional information and an updated file. I think all your additional triggers are interfering with and overriding the drag and drop built in options. As far as the triggers you laid out, you shouldn't need a trigger to change the state to hidden - that will happen based on it being the "dropped correct" state as described here.  Trigger order is also important as described here, but again, it seems your triggers to change states and such are overriding the built in drag and drop options. 

Also, on this new file I see that the "drop target" for all items is rectangle 2 which you mentioned being a dummy drop target? Since it doesn't match your description I'm unsure what role that is playing in this file - and I also see there is a trigger for a lot of the items to change the state based on when the user drags items over that rectangle, but not every item would be dragged over.

At this point, it does seem to be working as expected, so I'll defer to the community for more expertise on your design questions. 

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