drag and drop submit button

Oct 21, 2014

Hi there

I have a drag and drop interaction where there are 16 boxes that need to be dragged into 4 spaces. I have created the 16 boxes with correct and incorrect states.

The drag and drop has been set up so that there is no score (as the user gets immediate feedback from the states) but the user has to answer the question.

So when I preview this slide, and click submit I get a pop up saying "You must complete the question before submitting", which is exactly what I want.

However, if I then go and drag just one shape onto the correct target, I can click the submit button and move to the next slide.

How do I prevent users from doing this? They need to move all 16 shapes before they can progress.

I tried adding conditions onto the submit button, so "shapes", then select the shape from the If drop down, is equal to drop correct. But this stopped the whole thing from working altogether.

Please can someone shed some light on what I'm doing wrong...!

I have attached the file (sorting activity plus slide after)

Thanks a million.


21 Replies
Shelley McKay

Dear Prakash and Wendy

Thanks for getting back to me.

Prakash, that's what I initially did but when you click submit nothing happens (which is fine) but there is no pop up message that tells the user what's happening. It just looks like it's not working.

Is there any way to get a pop up message saying that you need to move all 16 objects to the correct drop targets before you can continue? Or will I just need to put this into my instructions?

Wendy, I hadn't thought of doing it that way - thanks so much for putting that together. However, Prakash's solution requires less rework

But thanks so much.


Frédéric Lanthier

Hey! I know this post is a little old, but I still have a problem with this.
This solution DOES work UNLESS in a drag and drop where you can only drop one item in each drop zone. Because if you drop an item in a drop zone where there was already an item, it bumps the previous item back to the start point. BUT Storyline doesn't keep track of this, so it's impossible to use a trigger to know how many items have been dropped. It would be really nice to have a fix for this problem.

Lauren Connelly

Hi Frédéric!

I can see where that can be frustrating! Let me show you a quick fix.

First take a look at the Drag & Drop Options. If you want multiple items to be dropped in the same hotspot, make sure Allow only one item in each drop target is not checked.

Here's a slide where I used the drag and drop feature. I chose Return item to start point if dropped outside a correct drop target. This ensures the items go back to their original spot if its dropped outside of the hotspot. Let me know if you are still running into an issue.


Frédéric Lanthier

I can't do it with the "drop correct" state because feedback is delayed in my activities, but I already tried doing it with the "dropped" state. It works, as long as the user doesn't drop a shape to an occupied zone, and that is a big problem for us. As I said previously, this bumps the previous shape out of the zone (back to the start point). But, it still considers the shape as being "dropped", Storyline doesn't update the state back to normal. I also tried with true/false variables, but the status is not updated when the users drops a shape on another shape. 

So the problem is: if the user places all the shapes, the submit button becomes available. But now, if the user changes one shape to another spot (bumping the previous shape), one shape is now at start point, but submit button stays available. This is the problem we are trying to solve.

Leslie McKerchie

Hi Frédéric,

Thank you for further explaining what you would like to see as well as the obstacle you are running into.

You are correct, the objects do not change state when snapping back automatically.

One solution is to allow retries and have the try again layer remind them to drop one object per zone.

I've attached a brief example.

Frédéric Lanthier

So I've tried this solution, but it doesn't work when you have "drop correct" and "drop incorrect" states. It changes states when you click submit, and after that, you can't drag the answers.
(And I also tried to force back to "normal" states on the "try again" layer, but it doesn't work, maybe because it's a built-in function?)

Here is my example if you want to take a look!

Leslie McKerchie

Hi Frédéric,

Thanks for reaching back out and sharing a sample .story file for us to take a look.

I adjusted a few things in your course:

  • Added a button on the Try Again layer - the base layer button was still displaying
  • Adjusted the states to change when the button was selected
  • Added a trigger to this button to close the layer

Take a look and see if this is closer to the behavior you would like to see.

Frédéric Lanthier

Hello! I just looked at it, and I noticed a few problems. 

The states of the answers still changes to correct/incorrect when you click on submit

Also, I don't think the "unlimited attempts" is really an option, because it means the user can't have it wrong.

So I guess the real problem is why doesn't the "invalid answer" pop-up show up when you click on submit after you bumped an answer back to the starting zone?

Ashley Terwilliger-Pollard

Hi Frédéric, 

The states for dropped correct/incorrect would change when you click submit or when dropped on a target. There isn't another built-in option. If you don't want to see the state changes at all, you could remove that state from each drag item. 

If you're using the unlimited attempts, you can also track how many attempts they make using a variable on the try again layer, and when they reach a designated number have that called out as incorrect and move the learner forward. 

The "invalid answer" pop up is only going to appear if a learner didn't answer the question at all, i.e., didn't drag any items to drop targets. If they drag some items, but not all of the correct choices, that would still count as answering the question. 

Frédéric Lanthier

I understand that what I consider a bug is the normal behavior (concerning half-answering a question).

But what about when a user places all the shapes, and then changes one shape to another spot (bumping the previous shape), one shape is now at the starting point, but there's no invalid pop up showing up, because storyline doesn't keep track of the "bumping out"? Should I submit a feature request for this?
(State of an answer does not change when bumping out an answer from a drag and drop spot)

Lauren Connelly

Hi Frédéric, 

I see what you're saying about the way the shapes are "out of order" if a user drops a shape where another one is. 

I looked at the "drag and drop options" and it doesn't look like any of those would keep the options in order. Mainly because there are many sequences you would have to account for.

While looking for more information, I found this discussion! You'll find tips on working around this issue. 

Vincent Scoma

Hey Frédéric,

Thank you for popping back in and sharing that update!

In the thread that Lauren provided a link to, the feature request was for something a little different than what you are describing here. Also in that thread, Crystal provided a great example of how the drop states should work that I think might help!

As Ashley mentioned previously, the “invalid answer” window only appears if the learner did not attempt the question at all. Even if they swap out shapes and one shape ends up back at the starting point, this would be considered an incorrect answer by design.

I also wanted to share about how we work to prioritize feature requests, and if you’d like to see this type of change, I’d love to have you share more thoughts with our team here.

Please let us know if you have any additional questions!

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