I've been trying to figure out how to create a snap to location when the user drags (text) to an image which has a box underneath it. An Example scenario is when the user drags the (text) to the image, the text would stay on top of the image. What I want to happen is if the user gets the answer correct the text would snap into the text box below the image, but if they got it wrong it would return back to where it started from.
If someone could give me some advise on how this could be done would be much appreciated.
Your solution doesn't give me the snap to box function. I've attached a example of what I'm trying to achieve. The user will click and drag the black & grainy text to the image, if they would place it on the image but not in the box it would snap back to its original place. What I want it to do is if the user places the text on the image it would snap into the box.
Did you take a look at the drag and drop options (Step #3) here? You can choose what happens if a user doesn't drop it on a correct or any drop target, and how it'll snap to the target when dropped.
Your solution worked perfectly for the issue I was having, but now I have another question. Is it possible to have a drop item snap to a particular location if dropped near the target drop?
Example - I have an image of a bird and below that image is a rectangle box which when you drag the text box which has (bird) written in it on the box it snaps to place (which is correct). But if you drop the text on the image nothing will happen.
Is there a way to make it so if the user drops the text on the image it will snap to the rectangle box?
There isn't an option to allow it to be dropped somewhere else that is connected or associated with the drop target. Perhaps instead you'll want to look at setting up the drop target as a transparent shape over the entire image and text box? If you use that set up and the center is to the side of the intended drop target from the users perspective (yet still covers it) when the user drags an object to the target, you can set it to snap to the center of the transparent shape/hotspot which will appear next to or below the drop target.
I've found a solution which works for now, just to add to the question list haha. Is it possible to reset the drag items on the try again scene when the user clicks submit button.
So example - when the user has dragged all the items to the drop location and then clicked submit but has made a mistake the (try again) scene will appear. When they click try again I would want the drag items to return to there original position from when they first got to that scene from a previous scene.
The built in behavior is to not have those reset to their initial locations so that the user is able to see how they previously answered and move the items again. If you don't need to limit the number of attempts that a user has at this, you could set the "continue" button on the try again layer trigger Jump to slide, same slide that you are on with the Drag and Drop. Just make sure that the Slide Properties button is (gear to the right of the base layer) is set to "Reset to Initial State." That will treat the slide as a brand new attempt.
If you need to track the number of attempts and limit the user to X you'll need to also track a variable that is adjusted when the user is on the try again layer. That way when they've attempted it X number of times, instead of showing the try again layer your trigger condition will be to show the "incorrect" layer instead.
7 Replies
You can try changing the position of the text in the drop correct state, that might work for you.
Hi Strat,
Thanks for your reply.
Your solution doesn't give me the snap to box function. I've attached a example of what I'm trying to achieve.
The user will click and drag the black & grainy text to the image, if they would place it on the image but not in the box it would snap back to its original place. What I want it to do is if the user places the text on the image it would snap into the box.
Can this be done?
Regards,
Seb
Hi Seb,
Did you take a look at the drag and drop options (Step #3) here? You can choose what happens if a user doesn't drop it on a correct or any drop target, and how it'll snap to the target when dropped.
Hi Ashley,
Thanks for your reply.
Your solution worked perfectly for the issue I was having, but now I have another question.
Is it possible to have a drop item snap to a particular location if dropped near the target drop?
Example - I have an image of a bird and below that image is a rectangle box which when you drag the text box which has (bird) written in it on the box it snaps to place (which is correct). But if you drop the text on the image nothing will happen.
Is there a way to make it so if the user drops the text on the image it will snap to the rectangle box?
Regards,
Seb
Hi Seb,
There isn't an option to allow it to be dropped somewhere else that is connected or associated with the drop target. Perhaps instead you'll want to look at setting up the drop target as a transparent shape over the entire image and text box? If you use that set up and the center is to the side of the intended drop target from the users perspective (yet still covers it) when the user drags an object to the target, you can set it to snap to the center of the transparent shape/hotspot which will appear next to or below the drop target.
Hi Ashley,
Thanks for your reply.
I've found a solution which works for now, just to add to the question list haha. Is it possible to reset the drag items on the try again scene when the user clicks submit button.
So example - when the user has dragged all the items to the drop location and then clicked submit but has made a mistake the (try again) scene will appear. When they click try again I would want the drag items to return to there original position from when they first got to that scene from a previous scene.
Hope to hear from you soon.
Regards,
Seb
Hi Seb,
The built in behavior is to not have those reset to their initial locations so that the user is able to see how they previously answered and move the items again. If you don't need to limit the number of attempts that a user has at this, you could set the "continue" button on the try again layer trigger Jump to slide, same slide that you are on with the Drag and Drop. Just make sure that the Slide Properties button is (gear to the right of the base layer) is set to "Reset to Initial State." That will treat the slide as a brand new attempt.
If you need to track the number of attempts and limit the user to X you'll need to also track a variable that is adjusted when the user is on the try again layer. That way when they've attempted it X number of times, instead of showing the try again layer your trigger condition will be to show the "incorrect" layer instead.
This discussion is closed. You can start a new discussion or contact Articulate Support.