July 27, 2021 at 6:29 pm #7131
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!
AlexJuly 28, 2021 at 10:53 am #7135
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
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
addon the “drag” Canvas element, when it should have been
waiton 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
addcommand, 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
addcommand 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
JeremyJuly 29, 2021 at 8:40 pm #7139
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!
AlexJuly 29, 2021 at 9:22 pm #7140
Sorry, please ignore #1, it was simply an ordering issue.July 30, 2021 at 11:25 am #7143
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
You must be logged in to reply to this topic.