drag and drop in correct order

Jul 09, 2019

Lindsey Statler
By Lindsey Statler

Hi there,

I've been scouring this website for information on how to create a freeform drag and drop where the learner has to drag the items and drop them in a specific order, but I haven't been able to find the exact answer I'm looking for. Hoping someone can help! Here's what I'm trying to do - the course is how to make a sandwich and I have 7 ingredients and one drop spot. I want the learner to have to drag the ingredients one at a time and drop them on the plate in a set order (the correct order is listed on the left hand side of the slide). If they try to drag an item and drop it out of order, I want the item to bounce back to it's starting point. I don't want a submit button, but I do want a "correct" feedback slide or some type of pop-up letting them know they got it correct once they place all the items in the correct order. It would be great if I could also have a hint pop up if the learner tries to place 2 or more items on the drop spot out of order.

Appreciate the help in advance!

10 Replies
Jerry Beaucaire
almost 5 years ago07/09/19 at 7:45 pm (UTC)

My suggestion:

  1. Add a STATE to each of your correct items called INVISIBLE (except for ONION, skip that one).  After you create this state, delete the image from the state so the state exists, but has nothing in it.   Then set INVISIBLE as the beginning state for all your food except onion.
  2. Now paste a new copy of the same food images back over the originals in the exact same spots.  Name each one of these new ones as tomatoBAD, LettuceBAD, etc.
  3. Add each of these BAD images to your Form View list of DRAG ITEMS, but do not assign them a Drop Target.
  4. Under Drag & Drop Options, set the "Return item to start point if dropped outside: a correct drop target"
  5. Last step is to set two triggers on each of the CORRECT items, starting with Onion.
    • Change state of TOMATO to Normal when Onion is dropped on top loaf
    • Change state of TomatoBAD to HIDDEN when Onion is dropped on top loaf.
  6. I also added a SUBMIT trigger when the bottom loaf is dropped on the top loaf so the interaction completes automatically.

 

See what we've done?  The only droppable item that is visible initially is the onion.  All the others are fakes ones that are always wrong and will snap back if you try to use them.  Once you drop the onion, you reveal the next real one and hide it's corresponding BAD version that was on top of it.  Visually no one can see that happen, but it works!

 

Jerry Beaucaire
almost 5 years ago07/09/19 at 7:52 pm (UTC)

BTW, if you apply triggers of any kind to the BAD images,  they become droppable on the bread even though they have no target assigned, so I can't think of a way to count missteps and give a hint without losing the "snap back wrong answers" effect.   Now that the interaction works the way you want, it should be OK, no one can get this question wrong.

Robert Baker
over 1 year ago09/16/22 at 1:54 pm (UTC)

Hey Laruen, 

I actually built it out using Jerry's suggestion. But it's a long process. I attached the file but you can see- many triggers. I also had to basically use/create my own illustrations because there are not that many for medical gear, at least that I could find.  

I was just curious about it - I work for a Hospital Organization - we are developing several eLearnings for donning/doffing different types of PPE (Chemical, Bio, etc.) and this requires the use of elements in a certain order. 

Thank you for the quick reply!

 

Sign In to Reply