Reply To: Selecting multiple options

PennController for IBEX Forums Support Selecting multiple options Reply To: Selecting multiple options



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),
        .frame("solid 6px black")
        .callback( getVar(name+"-var").set(v=>1-v)"-sel").unselect()) )
    newImage(name, file)

Template( GetTable("myTable_testing").filter( row => (row.n_correct == "2c") & (row.pol == "pos")) ,
  row => newTrial("testing_2cor_pos",
    newText( "Click on any and all pictures corresponding to "+row.word.toUpperCase() )
        .css("font-size", "30px")
    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 )
  .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