I am conducting a picture-text verification experiment where people read comics and decide whether the target character’s speech matches the content/conversations of the pictures. If yes, they press “j”; otherwise, they press “f”. I find that when the pictures are displayed, the pictures are tilted to the right, not centered although the canvas is centered in the script with the “.center()” command.
Ibex also gives me a warning “An element named isCorrect already exists–naming this one isCorrect-2”. I only have one isCorrect variable in my csv file. I am using the same template I’ve been using from another experiment which runs normally without warnings or picture issues (that one is here: https://farm.pcibex.net/r/lXNiKQ/).
These issues were addressed in an email exchange. I report the suggested solution below:
One solution is to keep the container of the Canvas element in the page flow with appropriate dimensions so that other elements will know how to be positioned relative to it, but position the Canvas element itself outside of the flow so as to be able to center it. Here is how to do it:
.cssContainer("height","520px") // make sure the 520px are vertically occupied in the flow
.add("center at 50%", 0, getImage("image"))