Drag and Drop - check each drop as it happens

I am trying to create a drag and drop question that has 15 items, all to be matched.

What I need it to do is give correct/incorrect feedback when each item is dropped rather than after all the pairs have been made. And then return the incorrect item back to its starting place.

I haven't been able to figure out a way to do this. Does anyone have an example or instructions?

Thanks!

Discussion (15)

I'm struggling with the same thing. As far as I can figure, the only way to do this with the built-in functions is to have 15 separate questions, and that presents some significant challenges I haven't yet overcome. The questions can all be on the same page so that it looks like one question to the learner, but:

  1. Each question must have it own drop zones, and if they overlap the learner can only drop in the front-most question.
  2. The on-click action fires on mouse up, not mouse down, so I cannot control which question's drop zones are visible based on which item the learner drags.

I could require the learner to drag the items in a predefined order, but that's not especially friendly design, and it would defeat the purpose of a drag-and-drop question asking the learner to put things in order.

There may be a javascript way to do this, but I'm not even sure where to start.

undefined

That doesn't give feedback when each item is dropped, only after all the matches are made. I'm looking for something that can give feedback when you drop an item, not after all have been done.

Do think im gonna mockup both a pure Lectora multiple drop solution and a Javascript based one.

Thanks for that, but it still doesn't give a result for each separate drop when it is made.

Check this thread:

http://community.trivantis.com/forums/topic/drag-and-drop-question-snap-back-if-incorrect/

undefined

Easy to add. In the actiongroup based upon any result you can add whatever feedback you want.

Cleaned a very old drag and drop... Couldnot upload the Lectora file because it was too big. Will clean it later and add it.

http://community.trivantis.com/shared-content/drag-drop-multiple-elements/

Kind regards,

Math

I do think there is an alternate solution. Posted a similar solution recently. Will check it later today, but basically its using immediate feedback, and then both correct and incorrect feedback trigger an Actiongroup that checks result(s) of the drop and change variables accordingly. The dropzones can be solved too..not sure how i did it..will check it later...

Using Javascript to complete build a drag and drop:

Here is an old solution i made in V11. Works, but a lot in it can be improved.

http://community.trivantis.com/wp-content/uploads/lectora-published/303972/303970/index.html

That's exactly what I'm running into. And I'm not a javascript programmer, either :-/

For the first 2 dragitems this setup works. Gives feedback when dropping correctly or incorrectly. Although it will be a hell of a job to get 15 or more elements setup properly. Lots of actiongroups and lots of conditions needed to get all working as needed. So i do think for this to work properly we need to add a Javascript check upon the drop. Checking whether the VarQuestion contains a correct answer for any given situation and returning something to Lectora to act upon that. Gonna work on that tomorrow...

Basically this function is needed for a check how many choices are incorrect.

function count(main_str, sub_str)

{

main_str += '';

sub_str += '';if (sub_str.length <= 0)

{

return main_str.length + 1;

}subStr = sub_str.replace(/[.*+?^${}()|[\]\\]/g, '\\$undefined

}

console.log(count("1-1,2-(na),3-(na),4-(na),5-(na),6-(na),7-(na),8-(na),9-(na)", '(na)'));

Gonna add that tonight...

Based on Tim's link to undefinedpjackson2462undefined solution for this i mocked up a partially working sample. Biggest thing to solve yet is the checks for proper condition if a given answer is correct or not. Especially with 15 or more dropitems, you have quite a few variables to doublecheck... writing this down gives me an idea how to properly solve this though...

Well here is a partial solution for it, giving anyone something to continue on.

Doing this without the use of Javascript does work after the initial 3 choices of a drag and drop. The first 3 it wont react upon if you remove the JS. After that it does work...have to dive into how Lectora creates a default draganddrop to figure out why.

Regards,

Math

Alright here is a complete working version. The script mentioned above wasnot needed afterall because Peter Jackson code already had that functionality in it. Only thing that needed to be done , is sending a variable back to Lectora so it knows how many drops are correct. Offcourse you can enhance this by adding specific feedback for any choice you make.

undefined

Thanks - yes that works, but it doesn't give a response, it just snaps back. Is this as close as I can get?

Thanks! I'll give this a try. You're a gem!

I would build this totally outside of Lectora where you have complete control over everything and then add it in a web window. You can add a hidden true/false Lectora question on the same page and assign the drag and drop score to it's question variable. Attached is a rudimentary example that I think does most of what you are looking to accomplish. Keep in mind that to run the published material you need to be on a server (WAMP or XAMPP works too). You should be able to see it work in a Lectora preview too.

I know this is different from what the guys above suggest, which works as well. I commented the code a bit. If there is any interest, have questions or need help adding additional functionality let me know.

Discussions have been disabled for this post