I am creating a fraction game where the player is dealt a card and can choose where to place the card. I disable the card once it is dropped because the player is not suppose to move the card after placing it. That all works fine. The issue is that the player can now drop another card on top of the first one and replace it, but I do not want that to happen. How can I disable the drop target once a card has been dropped on it. I've tried using triggers, but that hasn't worked either. I've attached my file. Any help would be appreciated.
You could try animating the drop target off screen using a motion path and setting it to 0.1s so it occurs almost immediately. I have no idea if the drag object would move with it, but I highly doubt it would.
I have exactly the same issue. (See attachment) I can't disable drop targets.
I have two sides, 7 objects and 7 drop targets. 4 objects must go on the left side, no matter in which drop target. 3 objects must go on the right side, no matter in which drop target. When I place an object in a valid drop target, the object is disabled and it is no longer possible to redrag it. When I place a bad item over it, it takes the place of my disabled object and the first one returns to its original position but remains in the disabled state. Which I don't want.
I would like the drop target to be disabled when a good object is placed in it, so that it cannot receive other objects.
Given the number of possibilities per drop target, if I use layers to replace each filled drop target, I have to create images for each possibility, which makes me a large number of images and layers (4 images per drop target on the left = 16 + 3 images per drop target on the right = 9).
Any ideas?
EDIT :
Even if I "hide" my drop target and replace it by another image, the drop target is still active.
1) Create a "deleted" state for your drop target and you delete the element from the scene in this state.
2) tell your drop target to switch to deleted state when your correct item is dropped inside. So your drop target will no longer display and would be disabled.
3) If your drop target had a specific shape you can tell by a trigger to display a fake drop target instead of the active one when the other one switch to deleted state.
It need more work, but in my case it is less tedious to set up.
For those of you having trouble understanding how to best support this look no further than Matthew Bibby's note ... you HAVE to put the shape on a separate layer ... then trigger that layer to "show" once the object has been dropped ... you'll need to ensure the objects from the base-layer are not set to hidden (do this in the gear icon menu when you are in "x" layer ... this will ensure the shape goes on top of the dropped object which will in turn; prevent the user from moving the tile .... you'll need a layer for each drop target
I ended up using Gillian's suggestion and it works. Thank you everyone who has contributed your ideas. You're definitely a creative bunch with great suggestions.
I find it unfortunate that we all have to find these workarounds for these things.
I see what you've done there and I don't think its the best solution ... in my opinion the user should not be required to trigger a 'click event' to disable the drag tile once it has been dropped - the layers trick mentioned atop of this article is the appropriate way to set this up ...
My sample is just a prototype. You can do many scenarios from it. It is not a canned solution where you open and eats. When you open it, you need to cook based on your recipe. I am just sharing people how to fish and feed him for a lifetime. Cheers!
RE: Drag and Drop Issue - How to disable drop targets
I tried the "deleted" state approach and it worked. By "deleted", is just a custom state where the actual object that was setup as the target_object is literally deleted, such that there are no actual objects in that state.
I tried the "deleted" state approach and it worked. By "deleted", is just a custom state where the actual object that was setup as the target_object is literally deleted, such that there are no actual objects in that state.
Gillian, I have 3 possible drag items that are all considered correct (just can't have more than 1 in each target. How do I go about disabling the drop target if any of the 3 possible items are dropped?
You have to create a variable for each drog target. You can define the variable value to 0 and change it to 1 when a correct item is dropped inside. Then you link the state of the drop target to the variable: when the variable value will change, the drop target will turn to a custom "deleted" state that you will create. :)
I’ve been struggling with this drag and drop issue for a while. I’ve been scouring the E-Learning Heroes and other parts of the interwebs for solutions. In this thread and others are snippets of suggestions and advise but I’ve yet to be able to find a comprehensive example build. So I made one. Hopefully this helps someone. Below is an (hopefully clear) explanation of the steps I took to create a drag and drop exercise that won’t allow you to drop multiple drops on the same target and won’t allow drops to be moved once they are dropped. The story file is attached so you can download and see all the triggers.
I created a Variable for each Drop Box Target, “Box1Variable”, “Box2Variable”, etc Add 1 to each Box Variable when any Shape is dropped in. This means you have to create a trigger for all 3 shapes to adjust the variable in all 3 boxes. (9 total triggers to accomplish this)
Created a “Deleted” State for each Box by creating a new state, named it “Deleted”, then actually deleted the box from the slide in that state. When the Box Variable for a given box is ≥ 1, it triggers the Deleted state. This leaves the shape that was dropped there, where it is, but won’t allow another shape to be dropped on top of it.
Created Slide Layers “Cover 1”, “Cover 2”, “Cover 3”. Each layer has a square Shape on it with a background color of grey at 80% opaque that covers the corresponding box on each slide. So the cover shape on “Cover 1” Layer covers the Box 1 Drop Target. They are each triggered to show when the corresponding Box Variable is ≥ 1. This prevents the user from clicking and dragging the Shape that was placed in the Box, around on the screen.
Submit Button default is set to “Disabled” state. When all 3 Box Variables are ≥ 1, the Submit Button changes to “Normal” state and can be clicked on.
Created “CorrectVariable” variable, which has 1 added every time the correct Shape is dropped on the correct Box. No points are added when an incorrect shape is dropped on a box. i.e. +1 when Shape 1 dropped on Box 1, but +0 when Shape 1 dropped on Box 2.
When user clicks Submit and CorrectVariable = 3, “Correct” feedback Layer is shown. When user clicks Submit and CorrectVariable < 3 then “Incorrect” feedback Layer is shown.
For reference, I’ve also included a Variable Reference box next to each Box that corresponds to the Variable for that Box, and a Variable Reference box next to the Submit button that corresponds to the CorrectVariable, so you can see how placing correct vs incorrect shapes on boxes causes the variables to change or not change. The reference variable text boxes are not necessary to the project in any way.
Each Feedback Layer has a “Back” button that will take you back and reset the slide to the initial state so you can play with the Correct and Incorrect features and watch the Variables change with different attempts.
Transparent layer did not work for me. Had to set the draggable objects to Disabled once correctly dropped (so they could no longer be moved), and set the drop target to a Deleted state I created, so that an additional object could not be dropped on it.
I tried all the above solutions, but what works perfect for me is here :
Make new state for the Drop box and make this empty. then add individual triggers to the all correct drag boxes that.... State change of Drop box to "new state"(empty), when user drop correct drag box to the current drop box.
if you have 3 drop box and user can drop any of the 3 correct box, then add same 3 triggers on the current drag box.
1) Create a "deleted" state for your drop target and you delete the element from the scene in this state.
2) tell your drop target to switch to deleted state when your correct item is dropped inside. So your drop target will no longer display and would be disabled.
3) If your drop target had a specific shape you can tell by a trigger to display a fake drop target instead of the active one when the other one switch to deleted state.
It need more work, but in my case it is less tedious to set up.
Hope this will help you too.
You know when you spend too many hours trying to figure something out by yourself? And it just drives you more and more insane? So you plead with yourself...
So... The moving the target to an empty state after its been dropped on worked initially but after recent updates and making changes it no longer works.
Has anyone found a new work around? I am working on a file with 25 drop zones...
25 Replies
Thanks Matthew. That is not a bad work around. I did try it, but even with the shape over the drop target, the new card replaces the old one.
You could try animating the drop target off screen using a motion path and setting it to 0.1s so it occurs almost immediately. I have no idea if the drag object would move with it, but I highly doubt it would.
I have exactly the same issue. (See attachment)
I can't disable drop targets.
I have two sides, 7 objects and 7 drop targets.
4 objects must go on the left side, no matter in which drop target. 3 objects must go on the right side, no matter in which drop target.
When I place an object in a valid drop target, the object is disabled and it is no longer possible to redrag it. When I place a bad item over it, it takes the place of my disabled object and the first one returns to its original position but remains in the disabled state. Which I don't want.
I would like the drop target to be disabled when a good object is placed in it, so that it cannot receive other objects.
Given the number of possibilities per drop target, if I use layers to replace each filled drop target, I have to create images for each possibility, which makes me a large number of images and layers (4 images per drop target on the left = 16 + 3 images per drop target on the right = 9).
Any ideas?
EDIT :
Even if I "hide" my drop target and replace it by another image, the drop target is still active.
I found a band-aid solution which is :
1) Create a "deleted" state for your drop target and you delete the element from the scene in this state.
2) tell your drop target to switch to deleted state when your correct item is dropped inside. So your drop target will no longer display and would be disabled.
3) If your drop target had a specific shape you can tell by a trigger to display a fake drop target instead of the active one when the other one switch to deleted state.
It need more work, but in my case it is less tedious to set up.
Hope this will help you too.
Thank you, Gillian, for the update!
For those of you having trouble understanding how to best support this look no further than Matthew Bibby's note ... you HAVE to put the shape on a separate layer ... then trigger that layer to "show" once the object has been dropped ... you'll need to ensure the objects from the base-layer are not set to hidden (do this in the gear icon menu when you are in "x" layer ... this will ensure the shape goes on top of the dropped object which will in turn; prevent the user from moving the tile .... you'll need a layer for each drop target
Hi,
I don't think this is an issue.
I ended up using Gillian's suggestion and it works. Thank you everyone who has contributed your ideas. You're definitely a creative bunch with great suggestions.
I find it unfortunate that we all have to find these workarounds for these things.
Ohh yeah, I forgot to add a dummy drop target. Cheers!
I see what you've done there and I don't think its the best solution ... in my opinion the user should not be required to trigger a 'click event' to disable the drag tile once it has been dropped - the layers trick mentioned atop of this article is the appropriate way to set this up ...
My sample is just a prototype. You can do many scenarios from it. It is not a canned solution where you open and eats. When you open it, you need to cook based on your recipe. I am just sharing people how to fish and feed him for a lifetime. Cheers!
RE: Drag and Drop Issue - How to disable drop targets
What do you mean by "Deleted" state? Do you mean Disabled?
JC,
I tried the "deleted" state approach and it worked. By "deleted", is just a custom state where the actual object that was setup as the target_object is literally deleted, such that there are no actual objects in that state.
Exactly! :)
Gillian, I have 3 possible drag items that are all considered correct (just can't have more than 1 in each target. How do I go about disabling the drop target if any of the 3 possible items are dropped?
Hi Kevin,
You have to create a variable for each drog target. You can define the variable value to 0 and change it to 1 when a correct item is dropped inside. Then you link the state of the drop target to the variable: when the variable value will change, the drop target will turn to a custom "deleted" state that you will create. :)
Hope it helps.
I’ve been struggling with this drag and drop issue for a while. I’ve been scouring the E-Learning Heroes and other parts of the interwebs for solutions. In this thread and others are snippets of suggestions and advise but I’ve yet to be able to find a comprehensive example build. So I made one. Hopefully this helps someone. Below is an (hopefully clear) explanation of the steps I took to create a drag and drop exercise that won’t allow you to drop multiple drops on the same target and won’t allow drops to be moved once they are dropped. The story file is attached so you can download and see all the triggers.
I created a Variable for each Drop Box Target, “Box1Variable”, “Box2Variable”, etc
Add 1 to each Box Variable when any Shape is dropped in. This means you have to create a trigger for all 3 shapes to adjust the variable in all 3 boxes. (9 total triggers to accomplish this)
Created a “Deleted” State for each Box by creating a new state, named it “Deleted”, then actually deleted the box from the slide in that state. When the Box Variable for a given box is ≥ 1, it triggers the Deleted state. This leaves the shape that was dropped there, where it is, but won’t allow another shape to be dropped on top of it.
Created Slide Layers “Cover 1”, “Cover 2”, “Cover 3”. Each layer has a square Shape on it with a background color of grey at 80% opaque that covers the corresponding box on each slide. So the cover shape on “Cover 1” Layer covers the Box 1 Drop Target. They are each triggered to show when the corresponding Box Variable is ≥ 1. This prevents the user from clicking and dragging the Shape that was placed in the Box, around on the screen.
Submit Button default is set to “Disabled” state. When all 3 Box Variables are ≥ 1, the Submit Button changes to “Normal” state and can be clicked on.
Created “CorrectVariable” variable, which has 1 added every time the correct Shape is dropped on the correct Box. No points are added when an incorrect shape is dropped on a box. i.e. +1 when Shape 1 dropped on Box 1, but +0 when Shape 1 dropped on Box 2.
When user clicks Submit and CorrectVariable = 3, “Correct” feedback Layer is shown. When user clicks Submit and CorrectVariable < 3 then “Incorrect” feedback Layer is shown.
For reference, I’ve also included a Variable Reference box next to each Box that corresponds to the Variable for that Box, and a Variable Reference box next to the Submit button that corresponds to the CorrectVariable, so you can see how placing correct vs incorrect shapes on boxes causes the variables to change or not change. The reference variable text boxes are not necessary to the project in any way.
Each Feedback Layer has a “Back” button that will take you back and reset the slide to the initial state so you can play with the Correct and Incorrect features and watch the Variables change with different attempts.
Hero status warranted, been wracking my brain over this and a transparent layer works beautifully, thank you 👍
Transparent layer did not work for me. Had to set the draggable objects to Disabled once correctly dropped (so they could no longer be moved), and set the drop target to a Deleted state I created, so that an additional object could not be dropped on it.
I tried all the above solutions, but what works perfect for me is here :
Make new state for the Drop box and make this empty. then add individual triggers to the all correct drag boxes that.... State change of Drop box to "new state"(empty), when user drop correct drag box to the current drop box.
if you have 3 drop box and user can drop any of the 3 correct box, then add same 3 triggers on the current drag box.
Happy that its working fine for me :)
Naveen,
Can the learner drag the dropped item off the target? If so, does that cause problems?
There is a sample that may help solve that problem at the bottom of this discussion:
https://community.articulate.com/discussions/articulate-storyline/allow-only-one-item-in-each-drop-target-not-working
I've been struggling with this issue for days, until I finally found this comment, tried it out, and it worked for me! Thank you so much Naveen!
You know when you spend too many hours trying to figure something out by yourself?
And it just drives you more and more insane?
So you plead with yourself...
Then you read Gillian's reply.
And your problems are solved.
Thank you Gillian.
🍻
So... The moving the target to an empty state after its been dropped on worked initially but after recent updates and making changes it no longer works.
Has anyone found a new work around? I am working on a file with 25 drop zones...
Hi Daniel,
Thanks for this Idea, I am wondering this solution for my activity. Let's see how it will work.
Once again Thanks.