Advanced Drag & Drop - Reset on each action

I am creating an elearning game that will mainly live in Javascript. In the game the learner needs to drag & drop ingredients into a pan. For example, eggs, strawberrys, cheese, milk, etc. Each time the object is dropped into the pan, we track it with JS. However, we need that item to reset so the user can add 2 eggs or 3 strawberry's, etc. 

Right now the only way the drag & drop resets is when the entire set is complete or submitted (unless I am missing some huge, and probably obvious trick). Does anyone have any suggestions? We'd like to not stack, say 10 eggs through layers, but it may come to that.

1 Reply
Jason Reed

Hi Bryce,

If I understand correctly, you want to have multiple dragable items that can be dropped in a pan, but that "regenerate" after a learner uses one up. So, if I drop a strawberry into the pan, another one appears in its place. Does that sound right?

I don't know if you need to use layers, but you could play with hidden states. If you stack maybe three strawberries on top of one another and make the initial state of two of them hidden, you'll just see the one you can drag and drop.

Then you'll need a trigger that says something like, "change state of Strawberry 2 to Normal, when Strawberry 1 is dropped on Frying Pan"

It might get a little convoluted, but that should work if I understand the game correctly :)