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