DragDrop features

PennController for IBEX Forums Support DragDrop features

This topic contains 4 replies, has 2 voices, and was last updated by Jeremy Jeremy 2 months, 3 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #7131
    Avatar
    AlexY
    Participant

    Hi, I found on the documentation that we can do drag and drop now. I have been trying to use this feature by testing it out with a simple trial but unsuccessful. Here is the demo.

    Basically for this trial, I am just trying to see if the image can be dragged to either one of the gaps.

    Another question about the documentation page: would it be possible to have a demo link that includes the commands on that page so I can see how it actually works?

    Thanks a lot in advance!

    Alex

    #7135
    Jeremy
    Jeremy
    Keymaster

    Hi Alex,

    It is wiser to keep the debugger on until you’ve shared the data-collection link with your participants. For example, after I copied your project, I re-activated the debugger and noticed your project uses PennController 1.9, when the DragDrop element was introduced in 2.0.

    After I uploaded the most recent version of PennController.js to the Modules folder, the experiment started to run but stayed on the preloading page with the debugger complaining:

    Found an existing Image element named “fish-plural”--using name “fish-plural2” instead for new element

    Indeed, at line 43 you have newImage("fish-plural") when it should be getImage("fish-plural")—the experiment would try (and fail) to preload an inexistent image with the filename fish-plural2

    After I fixed that, the debugger no longer threw error messages, but I was still unable to drag the image: I looked up the Log tab of the debugger and noticed that the last command was add on the “drag” Canvas element, when it should have been wait on the DragDrop element if everything had run smoothly. And indeed, at line 36 you have .add(getImage("fish-plural")): coordinates are missing here, so PennController is trying to interpret the reference to the image as an X coordinate, and crashes (I should make the debugger throw an error message in such cases)

    After I provide coordinates to that add command, things work… -ish. Because the Canvas elements are created with no dimensions (e.g. newCanvas("gap-0")) they technically occupy no space on the page, and end up overlapping one another( (although uou can still see “gap-1” because it is printed 250px to the right of the left edge of the Canvas element). Giving them a size, for example 200×200 (newCanvas("gap-0", 200,200)) improves things: I can now drag and drop the image onto gap-0 or gap-1, and the trial will complete as expected (however it’s not easy to see with gap-1, because the text is printed 250px to the right, out of bounds of a 200×200 canvas)

    Note that because you print your Text elements onto Canvas elements, you don’t need any of the center, unfold or print commands you call on them: the add command will print them at the provided coordinates at once when executed. So here’s an optimized code (I added background colors to the canvases to delineate them visually):

    newCanvas("gap-0", 200,200)
            .add( "center at 50%", "middle at 50%", newText("gap0"))
            .color("lightblue")
            .center()
            .print()
            .log() //remember this
        ,
        newCanvas("gap-1", 200,200)
            .add( "center at 50%", "middle at 50%", newText("gap1"))
            .color("pink")
            .center()
            .print()
            .log() //remember this
        ,
        newCanvas("drag", 200,200)
            .add(0,0,newImage("fish-plural", "2fishRoundTank.png").size(200, 200) )
            .center()
            .print()
            .log()
        ,
        newDragDrop("dd")
            .addDrop(getCanvas("gap-0"),getCanvas("gap-1"))
            .addDrag(getImage("fish-plural"))
            .offset(25) // will pin the elements to (25,25) from the top-left edge of the dropzone
            .single()
            .log()
            .wait()
    

    Thank you for the suggestion about including a demonstration feature for code blocks on the documentation, it’s something I would like to implement one day, but unfortunately I cannot dedicate time to it at the moment

    Jeremy

    #7139
    Avatar
    AlexY
    Participant

    Thank you very much, Jeremy!

    Based on the codes you suggested, I am getting closer to what I wanted to do for my experiment: Basically I am trying to create a trial where the two gaps (gap-0 and gap-1) are embedded in a sentence, e.g. “This is ____ and _____.” There will be two draggable items where participants have to decide which item to put in which gap. I have tried various ways to modify the code but I can’t seem to solve the following issues:

    1. I cannot make the instruction display on top of the page.
    2. I cannot make the two canvases display horizontally. I have the same problem with the two draggable items.
    3. Is there a way to present the two canvases in a way that they are embedded in the sentence above: “This is _(gap-0)_ and _(gap-1)_.”?

    Thank you very much again for your help!

    Alex

    #7140
    Avatar
    AlexY
    Participant

    Sorry, please ignore #1, it was simply an ordering issue.

    #7143
    Jeremy
    Jeremy
    Keymaster

    Hi Alex,

    Here is a template/demo project featuring the DragDrop element that you might be interested in taking a look at: https://farm.pcibex.net/r/MOytaR/

    2. the main purpose of Canvas elements is precisely to control visual layout, in particular when you need to print two elements side by side. Here’s an example, printing two Canvas elements side by side:

    
    newCanvas("container", 400, 200)
      .add( 0,0, newCanvas("pink patch", 200,200).color("pink")) 
      .add( 0,0, newCanvas("blue patch", 200,200).color("blue"))
      .print()
    

    3. look at the code of the first trial in the demo project I shared above to see an example

    Jeremy

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.