Reply To: Select more than one image

PennController for IBEX Forums Support Select more than one image Reply To: Select more than one image

#7389
Jeremy
Keymaster

Hi,

The Selector element does not come with the option to be an on/off switch by default, so you need to work around that to get what you want. In this case, you could use the same javascript randomizing method I employed in my other thread’s message, and create a Selector element for each Image element, and keep track of its status with a dedicated Var element, and then you can use a callback command to select/unselect accordingly:

makeImageSelector = imageName => newSelector("s"+imageName).add(getImage(imageName)).callback(
    getSelector("simage5").unselect(),
    newVar(imageName+"Selected",false).global().set(v=>true-v)
    .test.is(false).success( getSelector("s"+imageName).unselect() )
)
// Testing trials for individual mapping
Template("testing-mapping-individual.csv", row =>
    newTrial("testing-mapping-individual",
        images = [row.image1,row.image2,row.image3,row.image4].sort(v=>0.5-Math.random()),
        newTimer("break", 1000)
            .start()
            .wait()
        ,
        newAudio("audio", row.audio)
            .play()
        ,
        newText("sentence", row.sentence)
            .center()
            .print()
        ,
        newButton("dummy")
        ,
        defaultSelector.frame("solid 2px purple").callback( getButton("dummy").click() ).log()
        ,
        defaultImage.size(200,200)
        ,
        newImage("image1", images[0]),
        makeImageSelector("image1")
        ,
        newImage("image2", images[1]),
        makeImageSelector("image2")
        ,
        newImage("image3", images[2]),
        makeImageSelector("image3")
        ,
        newImage("image4", images[3]),
        makeImageSelector("image4")
        ,
        newImage("image5", 'none.png'),
        newSelector("simage5").add(getImage("image5")).callback(
            getSelector("simage1").unselect(),
            getSelector("simage2").unselect(),
            getSelector("simage3").unselect(),
            getSelector("simage4").unselect(),
            getVar("image1selected").set(false),
            getVar("image2selected").set(false),
            getVar("image3selected").set(false),
            getVar("image4selected").set(false)
        )
        ,
        newCanvas("side-by-side", 600,600)
            .add(  0, 0, getImage("image1"))
            .add(400, 0, getImage("image2"))
            .add(  0, 400, getImage("image3"))
            .add(400, 400, getImage("image4"))
            .add(200, 200, getImage("image5"))
            .center()
            .print()
        ,
        getButton("dummy").wait()
        ,
        newButton("click", "Done!")
            .center()
            .print()
            .wait()
        ,
        getAudio("audio")
            .wait("first")
    )
    .log("item", row.item)
    .log("task", row.task)
    .log("level", row.level)
    .log("label", row.label)
    .log("answer", row.answer)
    .log("image1", images[0])
    .log("image2", images[1])
    .log("image3", images[2])
    .log("image4", images[3])
    .log("image5", 'none.png')
    .log("image1selected", getVar("image1selected"))
    .log("image2selected", getVar("image2selected"))
    .log("image3selected", getVar("image3selected"))
    .log("image4selected", getVar("image4selected"))
);

Jeremy