PennController for IBEX › Forums › Support › Selecting multiple options
- This topic has 1 reply, 2 voices, and was last updated 4 years, 2 months ago by
Jeremy.
-
AuthorPosts
-
June 19, 2020 at 8:22 am #5680
maria
ParticipantHi!
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!
June 19, 2020 at 12:34 pm #5683Jeremy
KeymasterHi,
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
-
AuthorPosts
- You must be logged in to reply to this topic.