Explore the community Forums Lectora Lectora Questions & Answers Drag and drop question: snap back if incorrect

Tagged: 

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #315867 Score: 0
    Profile photo of susan cheng
    susan cheng
    Member
    beginner
    intermediate
    friend finder
    contributor
    @scheng1337

    Hi All,

    I need my drag items return back to their original location when they are dropped into a incorrect spot, any idea?

    Please check the attachment.

    Thanks,

    Susan

    • This topic was modified 3 years, 4 months ago by Profile photo of susan cheng susan cheng.
    Attachments:
    1. snap-back1.zip
    #315884 Score: 1
    Profile photo of Erica Hunter
    Erica Hunter
    Member
    beginner
    intermediate
    verified member
    contributor
    curious george
    wise owl
    LUC16 Attendee
    LUC16
    3 pts
    @beeps

    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

     

    This post has received 1 vote up.
    Attachments:
    1. snap-demo.zip
    #315923 Score: 3
    Profile photo of Peter Jackson
    Peter Jackson
    Member
    beginner
    intermediate
    advanced
    friend finder
    contributor
    junior moderator
    wise owl
    group mod
    entry
    winner
    17 pts
    @pjackson2462

    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:

    <script>
    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);
    }
    }
    </script>

    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

    This post has received 3 votes up.
    #315942 Score: 0
    Profile photo of susan cheng
    susan cheng
    Member
    beginner
    intermediate
    friend finder
    contributor
    @scheng1337

    Thanks so much Peter.
    I will try this and let you know.
    Regards,
    Susan

     

    #315949 Score: 0
    Profile photo of susan cheng
    susan cheng
    Member
    beginner
    intermediate
    friend finder
    contributor
    @scheng1337

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

    Susan

    #315950 Score: 0
    Profile photo of susan cheng
    susan cheng
    Member
    beginner
    intermediate
    friend finder
    contributor
    @scheng1337

    Hi Peter,

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

    Regards,

    Susan

    Attachments:
    1. snap_back.zip
    #316006 Score: 0
    Profile photo of Alexis Scott
    Alexis Scott
    Member
    beginner
    intermediate
    contributor
    advanced
    friend finder
    profile
    Group Member
    entry
    entry
    curious george
    3 pts
    @ascott7223

    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.

    #316019 Score: 1
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    309 pts
    @timk

    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 ' " (if you don’t mark the code as code 😉 ).

    2. The name of the question variable in Lectora is “Question_0001” but in javascript it’s “VarQuestion_0001”

    Tim

    This post has received 1 vote up.
    • This reply was modified 3 years, 4 months ago by Profile photo of Tim K Tim K.
    Attachments:
    1. snap_back1.zip
    #316105 Score: 0
    Profile photo of susan cheng
    susan cheng
    Member
    beginner
    intermediate
    friend finder
    contributor
    @scheng1337

    Thanks Tim, it works now. Awesome!
    Regards,

    Susan

    #316108 Score: 0
    Profile photo of susan cheng
    susan cheng
    Member
    beginner
    intermediate
    friend finder
    contributor
    @scheng1337

    Thanks Alexis, Good to know it.

    Regards,
    Susan

    #376508 Score: 0
    Profile photo of SB Chapman
    SB Chapman
    Member
    beginner
    intermediate
    profile
    picture perfect
    wise owl
    friend finder
    contributor
    curious george
    Group Member
    @schapman1885

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

    #377585 Score: 0
    Profile photo of SB Chapman
    SB Chapman
    Member
    beginner
    intermediate
    profile
    picture perfect
    wise owl
    friend finder
    contributor
    curious george
    Group Member
    @schapman1885

    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?

    #377621 Score: 0
    Profile photo of SB Chapman
    SB Chapman
    Member
    beginner
    intermediate
    profile
    picture perfect
    wise owl
    friend finder
    contributor
    curious george
    Group Member
    @schapman1885

    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.

    <script>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 +’-(na)’)){
    dragMgr.arrDragItems[dropId-1].restoreInit(restoreInitFunc);
    }
    }
    </script>

    #377675 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    309 pts
    @timk

    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.

    #387503 Score: 0
    Profile photo of Jessica Cobbley
    Jessica Cobbley
    Member
    beginner
    intermediate
    wise owl
    curious george
    @jcobbley8757

    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.

     

    Jessica

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.