Select more than one image

[li_dx]

Hi Jeremy,

Sorry to bother you again! Here’s another question about the experiment. In the testing phase, participants will answer by choosing from multiple images. Is it possible for them to select more than one image? Thanks a lot!

// Testing trials for individual mapping
Template("testing-mapping-individual.csv", row =>
    newTrial("testing-mapping-individual",
        newTimer("break", 1000)
            .start()
            .wait()
        ,
        newAudio("audio", row.audio)
            .play()
        ,
        newText("sentence", row.sentence)
            .center()
            .print()
        ,
        newImage("image1", row.image1)
            .size(200, 200)
        ,
        newImage("image2", row.image2)
            .size(200, 200)
        ,
        newImage("image3", row.image3)
            .size(200, 200)
        ,
        newImage("image4", row.image4)
            .size(200, 200)
        ,
        newImage("image5", "none.png")
            .size(200, 200)
        ,
        newCanvas("side-by-side", 600,600)
            .add(  0, 0, getImage("image1"))
            .add(400, 0, getImage("image2"))
            .add(200, 200, getImage("image3"))
            .add(  0, 400, getImage("image4"))
            .add(400, 400, getImage("image5"))
            .center()
            .print()
        ,
        newSelector("selection")
            .add(getImage("image1"), getImage("image2"), getImage("image3"), getImage("image4"), getImage("image5"))
            .shuffle()
            .log()
            .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)
)

[Jeremy]

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

[li_dx]

Thanks a lot!! I love how the selected picture appears in a colored frame, and how it can also be unselected. This is amazing!

Just one more follow-up question: The columns for “image[1-4]selected” are all filled by “undefined”. Is that the right thing to happen? How do we make sense of the result? Thanks!

[Jeremy]

That’s because I used a lower case s where I should I have used an upper case S, in those getVar commands

Jeremy

[li_dx]

Got it! Thank you so much!

[Author]

Posts