Hide custom Submit button until all drops are occupied on drag n drop questions
Jan 06, 2023
Hello community!
I know other discussions about this have come up, and I have consulted them, but they do not solve the issue I want to solve.
I for styling reasons I want to use my own Submit button on my drag n drop, and I only want it to appear when the user has dragged an option onto each drop location.
When it comes to drag n drop design options, I want any item to be returned to the start location if dropped outside any drop target, and want a single object to be able to be on each location at a time. These options create the "snap back" effect.
I am using a counter to keep track of how many objects have been removed from their initial location, and have tried different ways of changing this variable according to the user's actions, here are some options I have tried:
In both cases my counter starts at 10, any time an object is dropped on a drop location the counter gets -1, when the user puts an object back in the initial location the counter gets +1, the submit button appears when the counter is at 5 meaning that all target locations have an object on them. The issue here is that the snap back effect doesn't affect this therefore doesn't change the counter appropriately.
1. In option 1 I use an intersects trigger such that "Add value 1 to Counter When draggedObject intersects with rectangleContainingInitialLocations". This is demonstrated on slide 1 of my attached file.
2. In option 2 I use an intersects trigger such that "Add value 1 to Counter When user drops draggedObject on any of dropLocations". This is demonstrated on slide 2 of my attached file.
Any suggestions are welcome, thank you in advance!
2 Replies
Hi Stephanie!
I've played around with it for a few minutes. Beats me why your submit button isn't changing state to normal when you reach 5. You could use that trigger when dropping an object on a target change submit button to normal if counter = 5. Doesn't work. Don't know why.
Another idea is to have the submit button appear immediately but have a "Didn't complete" layer be displayed if the counter is higher than 5 and people click submit. You could then tell the user what the problem was, have them acknowledge the message and try again.
I had a similar challenge in the past when the Custom Submit button was always visible. I had not considered that users would immediately click on the submit button without doing any interaction. :)
Here is what I did and I hope it makes sense.
I creates a custom Submit button, and for speed I created a shape rectangle the same color as the background behind the Submit button so that it basically covered and hid the Submit button. I named the colored rectangle shape "SubmitHideShape"
Each of the draggable elements had 3 states:
Normal
Dragged Over
Drop correct
When the user dragged an item onto the target item I created a trigger to change the drag item to Dragged Over. (The trigger had to allow for the user dragging over any of the drop targets)
When all of the items were dragged over, I created a trigger that basically said
When each of the draggable items were in a state of Dragged Over, hide the SubmitHideShape...which showed the Submit Button.
I could have simply hidden the submit button when the slide started and then set the Submit button to normal when all of the draggable items were set to Dragged Over...but I wanted to make my life hard :) and at the time it was a fast solution to get it done....