Drag-and-drop with no wrong answers: Prevent multiple drops in the same zone

smiller7502
smiller7502 Community Member Posts: 181
We have a drag-and-drop question with 14 drag items and 14 drop zones. There are no wrong answers, so every drop zone is set as "correct" for every drag item -- but this allows people to drop more than one answer in the same drop zone, which is wrong.

I have an idea of how to solve this with javascript, but it is fugly. Is there an easy way that I'm overlooking?

Comments

  • clammers
    clammers Community Member Posts: 123 ♪ Opening Act ♪
    Do you want the answers to stay visible after the question is answered? I've accomplished something like this in the past by having separate questions for each. Basically, you create one question as a template, then copy-and-paste for as many questions as you need. Make the question image Initially Hidden and the Question Text Always on Top. Then, create a separate "drop image" layered below all the questions. When a question is answered correctly, that question disappears.

    If you want the answers to stay visible, you would have to implement some sort of show/hide/move action on separate images (and I can't think of how to program that off the top of my head).

     
  • smiller7502
    smiller7502 Community Member Posts: 181
    Yes, the answers must remain visible -- and furthermore the learner must be able to drag the answers to other drop zones or back to the pool of drag items until he or she is satisfied with all 14 of the answers.

    The only thing I can think of is to run a script after every drop to read the question variable and mark all filled drop zones as incorrect answers for all remaining drag items. In addition to being fugly, that solution may not actually be possible.
  • timk
    timk Community Member Posts: 1,207 ♦ Idol ♦
    There are two ways I can think of:

    1. Just let them drop more than one item in a drop zone. People will know this can't be right and as this is the only way to answer the question incorrectly (if all items in all zones are correct) you can use the "If incorrect" to inform them that they must not drop more than one item in the same place.

    2. You can use javascript to reset one of the items if two are in the same zone. All actions and the javascript are Lectoras native code, so the question can be processed or reset the normal way and all items stay draggable.

    http://community.trivantis.com/shared-content/reset-drag-items/

    Tim
  • smiller7502
    smiller7502 Community Member Posts: 181
    I'm intrigued by the idea to "use javascript to reset one of the items if two are in the same zone." Is there a way to do that that doesn't require me to parse the question variable? Because that's where it gets fugly:
    • On page load, the question variable holds the value 1-(na), 2-(na), 3-(na), ..., 14-(na).
    • When I put drag item 2 in drop zone 1, the value becomes 1-(na), 2-1, 3-(na), ..., 14-(na).
    • When I then also put drag item 1 in drop zone 1, the value becomes 1-1, 2-1, 3-(na), ..., 14-(na).
    So unless there's a better way than parsing that variable, I have to write a script that looks at all 14 value pairs and determines whether the number after the hyphen in each pair is used in any other pair. If it is re-used, it would be easy enough to tell the user not to do that, but I do not see any way to return the user's most recent choice to the pool. I think I could arbitrarily return one of the duplicates to the pool, but if this was not the most recent one, the experience would be very confusing.

     
  • timk
    timk Community Member Posts: 1,207 ♦ Idol ♦
    I don't know another way to find out wich dropzones are already populated than using the question variable. In the example I've shared I'm using Lectora actions to check which items are in which dropzone. Of course for 14 drop zones you'd need a lot more actions. It should be possible and probably easier to use a script to go through the variable value.

    Currently I'm using normal On: Click actions to check the dropzones and reset the item on that the mouse button has been released. The problem with this is that when you drag Item 1 to a drop zone where Item 3 is already lying, Item 1 will be under Item 3 so the button is actually released on Item 3. Then of course Item 3 is reset, although it should be Item 1. This may be solved by using custom javascript with an On: Press function to either store in a variable which item is currently dragged or by modifying the z-index of the currently dragged object so it's above the other elements and the On: click action will target the correct item.

    Check Peters example in this topic:

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

    Tim