Drag and Drop Stacking Problem

Feb 25, 2022


I have created a drag and drop exercise where I want learners to stack some boxes vertically, one on top of the other. The boxes are different sizes and they can create different combinations of stacks to attempt to get the right answer. 

My problem is that there seems to be no good way to have the boxes stack vertically that is also clean. Under the drag and drop options menu the snap dropped items to drop target option "Tile" does Exactly what I want... except it stacks them top to bottom, and there seems to be no way to change the Tile function to make it stack bottom to top. 

Currently my other option is to use "Free" and require the learners to manually stack them, however they could simply put all of the correct boxes in one spot on the drop target and still get the correct answer.

OR I could create some complicated state logic on the drop target to show a specific state for each combination.

Does anyone have any other ideas???

Storyline 360 developers, if you are reading this, I think if there was an option to change the tiling direction that would be a really useful feature to include in the next update!! 

Thanks in advance!!




2 Replies
Maria Costa-Stienstra

Hello, Learning Support.

Thank you for reaching out!

What you're trying to accomplish would have to be done with a custom design (including states and triggers, as you mentioned), as I'm not aware of an out-of-the-box solution.

One idea I had, but it won't perfectly fit your design since your boxes have different heights, is to only allow the user to drop the package on one transparent shape at a time (from the bottom to the top):

Screen Recording 2022-03-08 at 10.57.05 AM

This was created using motion paths that only move the next "transparent shape" into position when the one below has an item:

Windows 10 (1) 2022-03-08 at 10.58.31 AM

The only downside of doing it this way with your design is that if the user incorrectly places the smaller box first, then there will be a gap between the first box and the second. 

I hope others in the community can give you additional suggestions, or that this at least gives you a starting point.