Reply To: Ensure the user clicks on a given set of words before continuing

[Jeremy]

Hi,

Here’s a live demo: https://farm.pcibex.net/r/EMYHvp/

And here’s the code (you can edit it directly on the farm too):

newTargetButton = (name,text) => newButton(name, (name||text))
    .callback(
        getButton(name)
            .disable()
            .css("color","red")
        ,
        getVar("targetsLeft")
            .set(v=>v-1)
            .test.is(0)
            .success( getButton("Next").click() )
        ,
        getText("counter")
            .text( getVar("targetsLeft") )
    )
    .selector("buttons")
    
newFilerButton = (name,text) => newButton(name, (name||text))
    .callback( getButton(name).disable() )
    .selector("buttons")

newTrial(
    newVar("targetsLeft", 3)
    ,
    newText("counter", '3')
        .before( newText("# targets left: ") )
        .print()
    ,
    newCanvas("container", 800,100)
    ,
    newSelector("buttons").disableClicks()
    ,
    newTargetButton("target1").print(   0,0,getCanvas("container")),
    newTargetButton("target2").print(200, 0,getCanvas("container")),
    newTargetButton("target3").print(400, 0,getCanvas("container"))
    ,
    newFilerButton("filler1").print(600, 0,getCanvas("container")),
    newFilerButton("filler2").print(  0,40,getCanvas("container")),
    newFilerButton("filler3").print(200,40,getCanvas("container")),
    newFilerButton("filler4").print(400,40,getCanvas("container")),
    newFilerButton("filler5").print(600,40,getCanvas("container")),
    newFilerButton("filler6").print(  0,80,getCanvas("container")),
    newFilerButton("filler7").print(200,80,getCanvas("container"))
    ,
    getCanvas("container").print()
    ,
    getSelector("buttons").shuffle()
    ,
    newButton("Next").wait()
)

Let me know if you have any questions

Jeremy