Selecting multiple options

[maria]

Hi!

My issue is similar to the one here (https://www.pcibex.net/forums/topic/checkbox-unselecting-an-option/) but I was unable to adapt the solution, and I was hoping you could help me.

I have a template in which participants are asked to select any and all images that match a word. For this I use a selector element with the .log(“all”) option. However, only one image is highlighted at once for the participant. Is there a way to let the participant select (with the option to deselect) all that apply, and then confirm their choice with a button press once they are satisfied with what they have selected?

I include the template below:

Template(GetTable("myTable_testing").filter( row => (row.n_correct == "2c") & (row.pol == "pos")),
    row => newTrial("testing_2cor_pos",
    
    newSelector("shapes_1")
    ,
    newText(["Click on any and all pictures corresponding to ", row.word.toUpperCase()].join(""))
    .css("font-size", "30px")
    .center()
    .bold()
    .print()
    ,
    newImage("target_1", row.picture)
    .settings.size(200, 200)
    .settings.selector("shapes_1")
    ,
    newImage("target_2", row.p1)
    .settings.size(200, 200)
    .settings.selector("shapes_1")
    ,
    newImage("d2", row.p2)
    .settings.size(200, 200)
    .settings.selector("shapes_1")
    .log()
    ,
    newImage("d3", row.p3)
    .settings.size(200, 200)
    .settings.selector("shapes_1")
    ,
    newImage("d4", row.p4)
    .settings.size(200, 200)
    .settings.selector("shapes_1")
    ,
    newImage("d5", row.p5)
    .settings.size(200, 200)
    .settings.selector("shapes_1")
    ,
    newCanvas( 'myCanvas', 700, 500)
    .settings.add( 20, 40, getImage("target_1"), 0 )
    .settings.add( 20, 270, getImage("target_2"), 1 )
    .settings.add( 257, 40, getImage("d2"), 2 )
    .settings.add( 257, 270, getImage("d3"), 3 )
    .settings.add( 495, 40, getImage("d4"), 4 )
    .settings.add( 495, 270, getImage("d5"), 5 )
    .center()
    .print()
    ,

    getSelector("shapes_1")
    .shuffle()
    .frame("solid 6px black")
    .log("all")
    ,
    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)
)

Thank you!

[Jeremy]

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

[Author]

Posts