Drag and drop question: snap back if incorrect

This might not be the best method, but you could make a separate question for each drop. That way, if the item isn't placed in the drop zone it goes with it will snap back to the starting point.

I attached the file so you can see what I did. I didn't edit the drop zone graphic, but I copied the question and removed the extra zones. The correct drag is above each box. You'll see if you drag them down that they will only snap if they are correct. Otherwise they will snap back.

If you go this route, edit your image so each color is it's own image that can be used for a drop zone. You can they lay them out how you want them on the page.

Erica

undefined

Thanks Erica,

This is cool! The only concern is three questions will get 3 marks witch we want count as one question.

Regards,

Susan

I have this in one of my courses. All I had to do was go into the question properties, and under Feedback > Incorrect Feedback, set the action to Reset Question.

Resetting the question will "snap back" all drag items. Peters' solution only resets an incorrectly dropped item. I discovered two issue in your file:

1. If you copy code from this forum to Lectora you have to replace all quotes ' or " with real quotes '; undefined-) ).

2. The name of the question variable in Lectora is "Question_0001" but in javascript it's "VarQuestion_0001"

Tim

Thanks so much Peter.

I will try this and let you know.

Regards,

Susan

undefined

G'day Susan,

This can be done using a few lines of JavaScript. On the page with the DD question add an "HTML Extension" with a type of "Custome DIV", click the Edit button and add the following JavaScript:

undefined

var ansVar = VarQuestion_0002;

var restoreInitFunc = Update_qu53;

function dragItemDrop(dropId){

window.setTimeout('delayDragItemDrop('+dropId+')',100);

}

function delayDragItemDrop(dropId){

var ansVarArray = ansVar.getValue().split(',');

if(ansVarArray[dropId-1]!=(dropId + '-' + dropId)){

dragMgr.arrDragItems[dropId-1].restoreInit(restoreInitFunc);

}

}

undefined

In the above script change the VarQuestion_0002 to the correct variable name for the question, also, change the "Update_qu53" to the correct question HTML name. To find this see the help on "Viewing the HTML name of an object". So if the HTML name is qu1036 then change Update_qu53 to Update_qu1036

Add a Run JavaScript Action to each of the drag objects:

dragItemDrop(1);

Where the number is the drag item number.

For this to work you need to ensure that the drag item names are consecutive numbers and these match the names of the "Drop Zone Names" that are also consecutive numbers and all are correct. This is the default for a new DD question.

Therefore, if drag name "2" is dropped on drop zone name "2" then this is correct and the drag item (number 2) will not reset, if, however, drag name "2" is dropped on drop zone "1" or "3" or any drop zone that is not named number "2" the drag item will reset.

Once done you can test this in "Run" mode or F10.

BTW a nice option for DD questions would be to randomize the position of the drag items:-)

HTH

Regards, Peter

Hi Peter,

When add the Run JavaScript Action to the drag item, should I it add to Mouse Click event?

Regards,

Susan

Thanks Tim, it works now. Awesome!

Regards,

Susan

Thanks Alexis, Good to know it.

Regards,

Susan

Wow.... this is exactly what I was looking for!

So, I have been using this with no problem...until today. I have 2 separate drag-and-drop interactions where the first item will not snap back. The other items snap back. Just not the first one. Any ideas?

After reading through the code and doing some testing with a collegeue, we dscovered that the

The following line: if(ansVarArray[dropId-1]!=(dropId + ‘-‘ + dropId)){

was problematic for us when we needed the first item to snap back.

So we made the following update: if(ansVarArray[dropId-1]!=(dropId +'-(na)')){

This allowed the first item to properly snapback into place.

undefinedvar ansVar = VarQuestion_0002;

var restoreInitFunc = Update_qu53;

function dragItemDrop(dropId){

window.setTimeout(‘delayDragItemDrop(‘+dropId+’)’,100);

}

function delayDragItemDrop(dropId){

var ansVarArray = ansVar.getValue().split(‘,’);

if(ansVarArray[dropId-1]!=(dropId +'-(na)')){

dragMgr.arrDragItems[dropId-1].restoreInit(restoreInitFunc);

}

}

undefined

Did you test your version when dropping the first item correctly?

The original version says: If the question variable does not contain "1-1", i.e. the first item is dropped incorrectly, make it snap back.

The new version says: If the question variable does not contain "1-(na)", i.e. if it has been dropped, make it snap back. With this condition I'd expect the item to be reset from any drop zone.

Am I correct in reading that this won't work if you are doing a many-to-one or many-to-many drag and drop? I have 12 or so drag items but only 2 drop zones. Not being a javascript person, I am not sure if this script can be changed to work for many-to-many.

undefined

Jessica

I have been researching this question as well. Is it possible to use this method with one drop zone and several drag items? I would like immediate feedback for each incorrect response, preferably snap back. I would appreciate any tips. Thank You!

Tim,

Your posts have been very helpful. I am trying to create a drag and drop question with one drop zone but several correct drag items. I would like incorrect items to snap back. I followed your instructions and script, but I have one question. Since I only have one drop zone, how should I populate the JavaScript box for the incorrect answers so they will snap back. In other words, On Mouse Click Run JavaScript dragItemDrop(?); Do I need to change something in the HTML Extension code? I would appreciate any help you can provide. Thank You!

Tim,

Thank you so much for your help. I have attached an example of the type of drag and drop questions I am working on. I have one drop zone. Each question has 5 drag items. Depending on the question, there may be 1-5 correct drag items. (The example question has 3 correct answers). I would like to set it up so each time they drag an item it will either stick or snap back depending on whether it is correct or not. If I understand the code you just sent me, I can only have one drag item snap back? Let me know if I am not understanding correctly. I am not great at code. Thanks again!!

Lisa

The code can be used to reset any item you like. I've attached your sample. Each of the incorrect items has an action to reset itself when clicked, i.e. when dropped.

But you could also reset item 2 when item 3 is dropped or reset items 1 and 4 when item 5 is dropped, etc.

Hi Lisa,

here's a sample of a DND question with 1 dropzone and 2 correct items. I've simplified the code a little:

dragMgr.arrDragItems[3-1].restoreInit(Update_qu484);

This code resets the 3rd item from the 1st dropzone. If you wanted to reset the 2nd item you'd have to change it to [2-1]. You may also have to update "qu484" with the actual html name of your question.

undefined

Thank you so much, Tim. I was able to fix my problem and everything is working the way I want it to. I really appreciate your help!!

Lisa