restore dragged object position if dragged into incorrect place.

Jun 03, 2014

here's the scenario:

a slide with four text boxes (a, b, c and d) and four rectangles(1, 2, 3 and 4).

each text box can be dragged into any of the four rectangles but only one would be considered as correct, so, lets supose that the text box "a" have to be dragged into rectangle 1 in order to be considered as correct, so:

if the user drags the text box "a" into the rectangle 1, then this will happen:

the text box will turn green, the state of the text box will change to disabled so the user can't move it again and a layer with a positive msg (to reinforce the learning proccess) that can be hidden clicking on an oval in order to continue will be showed.

but if the user drags the text box "a" into rectangles 2, 3 or 4 then this will happen:

the text box will turn red, the state of the text box will change to drop incorrect and a layer with a tip message (to help the user to drag into the correct position)  that can be hidden clicking on an oval in order to continue will be showed.

here's my question: how do i make that the text box "a" returns to it's original position after the user dops it into an incorrect rectangle?

i've tried two things:

changed the state of the text box to "drop incorrect" but it only allows me to change the format of the text box (change it into red as said before) but the text box remains where it was droped and i can't find a place where i can tell storyline to restore the original object position if the state is drop incorrect.

used the option "dragged over" instead of  "dropped on" and "technically" does the job (returns the text box into it's original position) but i don't feel like really happy with this option basically because drag over and drop on are diferent types of interaction.

here you can find an example of what i've told you in this long post: http://ares.unimet.edu.ve/acad/Convenciones/story.html

and here is the .story file http://ares.unimet.edu.ve/acad/Convenciones/convenciones.story if you want to check it.

my best regards to you all. (excuse my english since it's not my mother tounge)

15 Replies
Antony Snow

Hi Hector - welcome to Heroes!

Please do not apologise for your English. Your description made perfect sense

Unfortunately, I am unable to view your example due to web filtering policies on our network but if I understand your issue correctly, you have your slide working as you want it to but you would like your 4 text boxes to return to their original position if the user drops them on an incorrect rectangle?

If you click on [Edit Drag and Drop] (above the Triggers panel), you will see a series of options on the right under the heading 'Drag Item Options'. Click to select the "Return item to start point if dropped outside" option and then select "a correct drop target" from the drop down.

I hope this helps

Antony

hector teran

thank you both for your answers but the solution that you gave me doesn't fully answer my question since i need to give an instant correct or incorrect feedback for each droped object, wich by the way can be easely done by defining wich drop targets are correct and wich targets are incorrect and depending on where the user drops the draged object you instantly show a layer or another. the thing is that the drag and drop question only allows me to give a general feedback on the question.

i'm starting to believe that the scenario that i'm trying to build is to complex and hasn't been considered by the storyline designers. by now, i will redesign the scenario this way:

1. i'll keep using a normal slide since the drag and drop trigger automaticaly returns a dragged object when it's dropped outside a correct drop target.

2. put a small tip icon next to the dragabble object in order to help the user to drag the object into the correct target.

3. set two triggers for the correct drop:

3.1. set both the drag object and the tip icon as disabled in one case to avoid the posibility of been moved again and in the other to be clickable.

3.2. show the specific feedback layer.

thank you very much for your help.

Alyssa Gomez

Hi there Adam!

Can you tell us a little more about what you're looking to do? Are you wanting to build a freeform drag and drop interaction with the option to give feedback for each individual drag item? Here's a good place to start - though this thread is older, it's got detailed steps and sample files you could use as a jumping off point. And hopefully in the meantime, your fellow community members can chime in and share how they've made this kind of interaction work!

Adam Vala

Hi Allysa,

thank you for your reaction. There are many way where I want to use DandD
restoring on position. Mainly in slides where I need more cooperation from
the user during the learning process. I tried to describe one of the
situation. It could be very helpfull for me.

Thanks.

Regards Adam

There are 7 statements in Area 1. Only 5 of them are correct. The statements
are ranked random. The user should choose 5 corrects statements  from area 1
and drag and drop them individually to the Area 2. Slide should allow to the
user drop maximum 5 statements. When user clicks on submit button the slide
should react like this:

1. if user drops all 5 correct answers then the feedback layer is appeared
and user is allowed to continues to the next slide

2.  if user drops correct and incorrect answers together then the feedback
layer is incorrect and correct answers are shifted from Area 2 to the Area 3
(appeared into Area 3) and they are stayed visible in Area 3. The incorrect
answers are shifted back to their initial position in the Area 1

3. The user should choose missing correct statements from rest of statements
in Area 1 and drop them to Area 2 and submit it and behaviour is same like
in point 2.

4. There are maximum 3 attempts. After 3rd attempts the slide with
information about correct statements is appeared and user is allow continue
to the next slide.

 

There is attached a small description of the situation. 

Refugio Jones

Hi Hector,

It looks like you're on the right track to make this interaction work for you. I can't tell which version of Storyline you're using nor can I tell how experienced you are with Storyline. I'll just be thorough and you can ignore what you don't need. The instructions I'm sharing here are for Storyline 2 and I'm assuming that you selected, "Convert to Freeform" from the Insert tab on the ribbon bar.

First, you will want to be able to return the drop item to it's original location if dropped in the incorrect rectangle. Here's what I would do:

Click "Form View" in the Question pane on the right of the Storyline screen. Open the "Drag Item Options" in the ribbon bar. Next, select the "Return item to start point if dropped outside" check box and then select "a correct drop target" from the drop down menu.

You will also need to create triggers. Here's some ideas:

1. Two triggers (one trigger for correct case and one for the incorrect case) for each text box to ensure that the drag item's state changes to correct or incorrect when it is dropped on the correct or incorrect drop targets.

2. Two triggers (one trigger for correct case and one for the incorrect case) for each text box to ensure that the feedback layer is displayed when the text box's state changes to correct or incorrect.

Be mindful of how you stack your triggers for each text box. Ensure that the trigger that you want to start first is stacked at the top of the triggers for each text box. In your case, you would place the the state change triggers above the layer display triggers.

If none of the advice here is working for you, try swapping your text boxes for rectangular boxes of the same size and simply type your text inside of the box. This might make a difference.

Good Luck!

Phil Mayor

Adding drop a trigger to any object will stop the built in bounce back working.  (I presume you areusing the freeform drag and drop interaction).  Instead of using a trigger (when dropped on) use the drop correct and incorrect states (you will need to uncheck this in the form). and show layers based on states.

Guido Roessling

Hi Hector,

I have looked at your Storyline 2 file. Refugio Jones already has already covered all necessary steps, but one important detail might be overlooked in reading his entry. I will give a verbose step-by-step recommendation below.

So far, it seems that you have created rectangles and text areas for each box. I would recommend the following:

  1. Create an empty slide, rather than editing the current slide (so the work you have invested does not go to waste and you can still "go back" if something goes wrong).
  2. Copy the title and introductory paragraph to the new slide.
  3. Instead of placing a text box inside a rectangle, use Insert - Shape and select a rectangle. Simply type the text content into this new shape (which can also easily be formatted to look nice).
  4. Do the same for all four answers and the "answer boxes" (empty).
  5. Go to the "insert" tab and select "convert to freeform" - Drag-and-Drop.
  6. Enter the form view - which should now be possible, to be found above the "triggers" area to the right - and select the "answer rectangles" and the "target drop items".
  7. To "snap back", go to the "drag item options" in the ribbon and then select "Return item to start point if dropped outside... a correct drop target".

You can then also insert the triggers, as described by Refugio.

Ben Sewell

I'm a bit late to help here, but the advice above seems great.

I tried doing something similar to this previously, but as a list. In the end, it made more sense to let the user attempt the question, but then move to the "correct" answers on submit. (so they could go back and forth between their answers and the correct ones).

This was made up of a mirror of the drag and drop interaction that was just a static slide.

Maria Costa-Stienstra

Hi, Mukesh.

Thank you for sharing your .story file!

There are a few ways to accomplish what you're looking for, but one suggestion would be to use Motion Paths. Take a look at this discussion for additional information and a short tutorial. 

Here are the triggers I would add to your Wrong layer:

 

Windows 10 (1) 2021-10-04 at 4.01.55 PM

The Line Motion Path 1 has the same starting and ending points:

Windows 10 (1) 2021-10-04 at 4.17.50 PM

Screen Recording 2021-10-04 at 04.19.51 PM

I am attaching the edited .story file with the proposed changes.

Let me know if you have additional questions!

Brett Conlon

Hi, I also came here looking for a snap-back solution but the above suggestions don't address moving the incorrect answers back to their original position once the Submit button is pressed.

I then found the following YouTube video, by David Anderson, that is the PERFECT fit. David suggests creating a motion path animation for the drag objects and using a trigger that sets a Motion Path but the path is zero pixels long (ie. the start and end position is the original position - where you want it to snap back to):

https://www.youtube.com/watch?v=PdhSjUOva4Y

In my project I have 8 Drag labels that need to be dropped at the top of 8 descriptions and I'm giving them unlimited attempts at it.

The only changes I made to my project was to change the trigger for the motion path to occur when the learner presses the Submit button (not based on the timeline, like David suggests). I also didn't add a "Drop Incorrect" state so that the "incorrect" objects look "fresh" when they are returned to their starting point after the Submit button is pressed.

Luciana Piazza

Hi, Brett! 

Thanks so much for sharing your findings in this thread! So glad to hear my colleague David's video was able to provide you with a perfect workaround using Motion Paths and appropriate triggers. Great news! 

I'm sure others will appreciate this as they come across this thread. 

If any other discoveries come up, feel free to reach out in the E-Learning Heroes Community! 

Have a great weekend! ✨