Dragging Items

dcarroll3658
dcarroll3658 Community Member Posts: 20
Hi there

Is there any way to allow a participant to drag an item around the screen without it being done in a test environment?

Any feedback would be great.

Thanks
Dan

Comments

  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    The only way to add draggable objects using plain Lectora functionality is to add a D&D question. Note that you don't have to create a test, you can simply add a question on any page. You will be able to select draggable items, their landing spots as well as access the results of what's-dragged-where via the question variable.

    Alternatively, you can use external scripting. I recommend jQuery UI Draggable (see this: http://trivantis.com/blog/using-jquery-lectora-customize-e-learning-courses-part-3/) or Greensock Draggable (see this: https://greensock.com/draggable).
  • dcarroll3658
    dcarroll3658 Community Member Posts: 20
    Hi Sergey

    I Am having some trouble getting Greensock Draggable to work. These are the steps I followed. Installed the Draggable.js file at the title level as an external file as a header object.

    Then place an action to run the javascript code (with Lectora object ID) supplied by greensock on the object I wanted dragged.

    Is that correct? If not do you have a Lectora file with something similar can I take a look at it please.

    Your assistance is much appreciated.

    Thanks

    Dan

     
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    Here's a demo: https://dl.dropboxusercontent.com/u/11433463/trivantis/draggable/html/index.html
    Here's the source file: https://dl.dropboxusercontent.com/u/11433463/trivantis/draggable/draggable.zip

    So you have to add all the library scripts to an external object set to META TAGS. Then, in an "On Show" action on page or on particular objects, you execute the Draggable.create("#text89"); line. The problem, however, is it will only work on text boxes. Since Lectora wraps all shapes and images in< A >tags, you have to modify that line to Draggable.create("#image102", {dragClickables: true});. Also, note that if you have an action attached to a draggable object, the action will fire as soon as you drop the dragged item.
  • dcarroll3658
    dcarroll3658 Community Member Posts: 20
    Hi Sergey,

    Thanks for taking the time to send that information through. That is exactly what I want to recreate. Is it possible to send through the Lectora Title so that I can unpack it that way?

    Thanks again

    Dan

     

     
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    The second link above contains the Lectora title.
  • dcarroll3658
    dcarroll3658 Community Member Posts: 20
    Hi Sergey

    Thanks. However I don't see how I can open any of those files in Lectora...

    What I would like if possible is that draggable example above in a Lectora .awt format. This way I can see how it is put together. This will help as I have followed a bunch of tutorials but still can't get it to work.

    I appreciate your help Sergey

    Regards

    Dan
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    The zipped file contains the AWT file. Download it. Unzip it. Open the AWT in Lectora.
  • dcarroll3658
    dcarroll3658 Community Member Posts: 20
    Hi Sergey

    Thanks for the Lectora file and all your other advice it has been very helpful. I have been able to get the drag effect to work.

    I have another question if you have the time. I now have a really nice draggable custom png magnifying glass. Is there anyway to make this image the cursor for a Lectora page. Now I am not talking about the little pixelated icon other threads discuss but an actual image.

    The problem I am having now is trying to get the draggable object to trigger actions to make thinks appear when over the top.

    Probably not possible but just checking to see if you have heard anything like this being done.

    Thanks

    Again

    Dan

     

     
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Allthough this isnot the appropriate spot to post this, i cannot find a way to send a user a sample awt directly without either adding it to a post ( like now ) or sharing it to the community.

    This is for Daniel Carroll. Hi Dan, setup a simple question that should work like you asked for before..

    Kind regards,

    Math
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Hi Dan,

    Adapted the sample to show the incorrect/correct answers a user choose on the false page.

    Kind regards,

    Math