Hi,
You will need to create one Selector per Image, as Selectors were designed to represent exclusive choices. You will also need to create a Var element to determine whether a click on the image should select or unselect it. Since you will have to do this for all of your images, it’s best to just define a function that you call on each of your images, like this:
const newToggleImage = (name,file) => [
newVar(name+"-var", 1),
newSelector(name+"-sel")
.frame("solid 6px black")
.callback( getVar(name+"-var").set(v=>1-v).test.is(1).success(getSelector(name+"-sel").unselect()) )
.log()
,
newImage(name, file)
.size(200,200)
.selector("shapes").selector(name+"-sel")
]
Template( GetTable("myTable_testing").filter( row => (row.n_correct == "2c") & (row.pol == "pos")) ,
row => newTrial("testing_2cor_pos",
newSelector("shapes").disable()
,
newText( "Click on any and all pictures corresponding to "+row.word.toUpperCase() )
.css("font-size", "30px")
.center()
.bold()
.print()
,
newToggleImage("target_1", row.picture),
newToggleImage("target_2", row.p1),
newToggleImage("d2", row.p2),
newToggleImage("d3", row.p3),
newToggleImage("d4", row.p4),
newToggleImage("d5", row.p5)
,
newCanvas( 'myCanvas', 700, 500)
.add( 20, 40, getImage("target_1"), 0 )
.add( 20, 270, getImage("target_2"), 1 )
.add( 257, 40, getImage("d2"), 2 )
.add( 257, 270, getImage("d3"), 3 )
.add( 495, 40, getImage("d4"), 4 )
.add( 495, 270, getImage("d5"), 5 )
.center()
.print()
,
getSelector("shapes").shuffle()
,
newButton("confirm")
.print()
.wait()
)
.log("target_1", row.picture)
.log("target_2", row.p1)
.log("d2", row.p2)
.log("d3", row.p3)
.log("d4", row.p4)
.log("d5", row.p5)
)
Given that several people have expressed the need for a checkbox-like behavior, I will consider implementing this option in a future release of PennController
Jeremy