Hi, sorry for the late reply
a) If you really want to have as close a constant visual layout as possible (which, technically, is never possible given the variety of screens and resolutions) you should use a constant unit (for example, pixels) to create your Canvas element(s) and place elements on it, and then you can use .scaling("page").print("center at 50vw","middle at 50vh") on the main Canvas element to display it in the middle of the page, scaled (with its content) to fit the page while preserving ratios (ie if the Canvas element is a square and the page is rectangular, there will be blank spaces on the right and left edges of the Canvas element)
The vw and vh and relative units, where one unit represents 1% of the page’s width/height, respectively. When you use .print("center at 50vw","middle at 50h") on an element, it prints it so that the element’s central point is at the center of the page. If the box of your Text element is wider than its textual content, the text won’t appear perfectly center, but rather a bit off to the left. The .center() command will center the (box corresponding to the) element relative to its parent HTML node’s box. When you use .center().print() on a Text element, it will usually center it on the page because most project’s CSS rules for the main PennController node center it too. Using .print(500,500) will align the element’s top-left edge at 500px right of left edge of the page, and 500px down from the top edge of the page
b) I will address each subpoint below, but first let me give you a code that, I think, accomplishes what you’re after:
newText("warning", "Please provide a judgment before you can continue")
.center()
.color("red")
.hidden()
.print()
,
newSelector("smileys")
.disableClicks()
.add( getImage("inappropriate"), getImage("infelicitous"), getImage("appropriate"))
.keys( "A" , "G" , "L" )
.once()
.log()
,
newCanvas( "End_of_trial_page" , 1000 , 35 )
.css( "border" , "solid 1px black" )
.center()
.add( 300,0, newText("move_on_to_new_trial", "PRESS THE SPACEBAR TO LOAD A NEWTRIAL" ) )
.print()
.log()
,
newKey("endtrial_newtrial"," ")
.log()
.wait(
getSelector("smileys").test.selected().failure( getText("warning").visible() )
)
)b.1) There is no .wait command on the Canvas element. I think you wanted to place the test inside the Key element’s wait command (ie. the message should appear when the spacebar is being pressed, but no selection has been made)
b.2) You can test which element was selected by passing a reference to .test.selected as an argument. Because there is a one-to-one correspondance between which key was pressed and which element is selected, that should do the trick. For example, given your Selector’s setup, getSelector("smileys").test.selected( getImage("appropriate") ) will succeed only if L was pressed (at the moment of making the selection, that is)
b.3) I’m not sure which second Selector you have in mind, but if I understand your design correctly, you want the message “press the spacebar” to be visible even before the participant has pressed one of A, G or L (and, consistently, have a warning message appear if they press the spacebar before A, G or L). So you don’t want to wait for a selection to happen before printing the “press the spacebar” message and listening to a keypress on the spacebar. In other words, you don’t want to put the script on hold by using a wait command on the Selector’s element before getting to your Key element’s wait command. But you only want to validate that Key element’s wait command if a selection has been made, hence the test command inside it
Jeremy