Custom Freeform Matching Drag and Drop

Feb 19, 2015


I've been doing a bunch of research but can't seem to find an answer that will help me out. I'm hoping someone here can help me.

I was looking to create a Graded matching drag and drop quiz question but do to some limitations (i.e. - one of my answers is a bit long so it shrinks the text size down to match the size of the button so all of my answers are not the same text size) I had to resort to creating my own buttons in Photoshop, due to the inability to adjust the size of the button it self to fit the text in Storyline. So I created a Freeform drag and drop question. I have inserted my buttons and have created hotspots for each drag item.

Everything seems to work, except for the fact that when I move one of my drag items to the drop target, the other drag items don't move to an available space just like they do in the Graded matching drag and drop question. In the Graded matching drag and drop question, when you drag an item to its correct target, the item that is currently taking up the spot moves to the newly created open space. Hopefully, this all makes sense.

Is there anyway to have my drag items move to an open space after one has been moved instead of laying behind other drag items? I've attached a couple of photos and also my Storyline file.

Any help is greatly appreciated. Thanks!

12 Replies
Arhip Alagoz

Hi Chris.

I do have that box checked. The boxes always seem to go back to their starting spots. I have unchecked "Return item to start point if dropped outside .... any drop target" but it still happens. For example, if I match each of the drag items to a drop target, then decide to change my answer and move a drag item to a different drop target, the newly moved drag item will snap into place but the old drag item gets kicked out and moves back to it's original starting point. It does not fill in the blank space. Does that makes sense?

I feel like I have tried everything. Maybe this simply can't be done? But then, how does the Graded matching drag and drop work?

Ashley Terwilliger-Pollard

Hi Arhip,

This sounds like it's working as expected. If you move a drag item into a box where there is already an answer, the other answer as you have it set up is kicked out back to it's starting point and therefore the user will have to drag it again to a new location. The only drag question types that would keep it within a potential answer location are questions like sequence drag and drop where they are already set in that location and just being dragged within the list. 

You may want to share a sample file here with some directions on what you'd like to set up so that the community could weigh in on potential ways to set this up. 

Arhip Alagoz

Hi Ashley,

Yes, what you said in your above statement is correct and that it is working like it's supposed to. The one issue I'm having, though, is when the user will move a drag item to a box where there is already an answer, the answer will move back to its starting point. BUT, most of the time that kicked out answer will be behind another answer so it is hard to see (see my attached "Matching_one_item.jpg" file in the first post). What I'm struggling with is to find a way to have that kicked out answer fill the empty space when it is kicked out and NOT go it its starting point, just like it does in the Graded matching drag and drop question. Is there a way to have it do that?

Will the files I've attached in my very first post not work for the community to weigh in?

Ashley Terwilliger-Pollard

Hi Arhip,

Yes, those files will work fine for the community to look at - I think I forgot about them when reading this thread as they weren't right in front of me. :-)  I'll defer to them, as I don't know a way to make it go to another location, not it's starting point. 

There wasn't a JPG attached to this most recent post, so if you'd like to add that here please feel free. 

Helen Tyson

Hi Arhip

I've never been able to recreate the exact function of the Matching Drag & Drop using a freeform question because, as Ashley says, the drag items will always snap back to their original position.

With this in mind, if we are building this type of slide we rearrange the original positions slightly so the drag items are initially shown away from the area of the screen taken up by the targets - often underneath or to the side.

You can choose to lay each drag item out, or if there isn't enough space to have the fixed portion, the targets AND the drag items laid out we put all the drag items in one spot and you can consider them one at a t time. If you choose to replace an item it will snap back to the original position and it is offered again for reconsideration.

I've attached a quick example of both layouts for you to see.



Tracey Stokely

Arhip, I totally get what you're saying here. I have the same problem and you're right, the freeform solution is not the solution. If we could change the Text like you do on a normal object (shape, etc.), we could accomplish what we're trying to do like don't let the font size auto resize to fit the shape. Let us change the font size down so that all the fonts are the same. But when we go into those controls, they're disabled for the matching drag and drop type questions.

Christie Pollick

Hi, Tracey -- Thanks so much for reaching out here, and first, I thought I would note that as this is an older discussion, Arhip or other participants may no longer be subscribed. If you'd like to reach someone directly, you are welcome to use the 'Contact Me' link on their profile page. And if there is certain functionality you would like to see made available, you are welcome to use this form to share your thoughts with our Product team here

Arhip Alagoz

Hi, Tracey.

I ended up doing what Helen Tyson suggested, slightly moving the starting position away from the final matching position. That way if you place a drag item over one that is still in its starting position or even replace your choice, you are still able to see a drag item that has not been moved yet. See photos attached.

Also, Helen's other solution is good one; putting all of the drag items in one spot so the user has to consider them one at a time. See her .story file. Really good example.