Reply To: Selecting multiple options

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