Hello,
There are a couple problematic aspects with your code. First, elements are specific to trials, so you cannot define a Var element outside the scope of a newTrial. Second, your whichOne function runs the risk of an infinite recursive loop (although I have to say it’s a pretty smart way of testing many values without having to duplicate your code). I recommend you read this guide to get a better idea of when commands are executed
All callback commands will run a series of commands when the corresponding element’s relevant event happens (eg. a click on a Button element). They’re mainly useful to escape the purely top-down execution of the code, in allowing for interactions to unfold while the main thread of the script is waiting somewhere. It is true that they can also be used to re-execute a pre-defined block of code, but I think you are overusing the callback command in your code
I think what you want is this:
const whichOne = (numbers, selectorName) => numbers.map( number =>
getSelector(selectorName).test.selected(getImage("o" + number))
.success(
newAudio("o" + number + "selected", "o" + number + "Audio.m4a")
.play()
.wait()
,
getVar("selected").set(number)
)
)
const runPractice = (LP,RP,LO,RO,tag,correctChoice) => [
clear()
,
newCanvas("images", 1500, 750)
.color("white")
.add( 0 , 100 , newImage("p1", LP + ".jpeg" ).size(400, 400) )
.add(450 , 100 , newImage("p2", LP + RP + ".jpeg").size(600,400) )
.add(1100 , 100 , newImage("p3", RP + ".jpeg").size(400, 400) )
.add( 0 , 500 , newImage("o1", LO + ".png") )
.add(200 , 500 , newImage("o2", RO + ".png") )
.add(550 , 500 , newImage("o3", LO + ".png") )
.add(750 , 500 , newImage("o4", RO + ".png") )
.add(1100 , 500 , newImage("o5", LO + ".png") )
.add(1300, 500 , newImage("o6", RO + ".png") )
.add( "center at 50%", "bottom at 100%", newButton("Go") )
.print("center at 50vw","top at 2em")
,
getButton("Go").wait().remove()
,
newAudio("description", tag + ".m4a")
.play()
.wait()
,
newSelector("response")
.add( getImage("o1") , getImage("o2") , getImage("o3") , getImage("o4") , getImage("o5") , getImage("o6") )
.wait()
,
...whichOne([1,2,3,4,5,6],"response")
,
getVar("selected").test.is(row.correctChoice)
.success(
newHtml("readyscreen", "readyscreen.html")
.center()
.print()
,
getButton("Continue").print("center at 50%","bottom at 100%",getCanvas("images"))
)
.failure( getButton("runPracticeLaunch").click() )
]
Template("examples.csv", row =>
newTrial("practice",
newVar("selected", 0)
,
defaultImage.size(200,200)
,
newButton("runPracticeLaunch")
.callback(...runPractice(row.LP,row.RP,row.LO,row.RO,row.tag,row.correctChoice))
.click()
,
newButton("Continue")
.center()
.wait()
)
)
I couldn’t test this code with your project’s material (feel free to share the demonstration link with me so I can do it) but I tried an non-Template non-Audio version of it which worked. Note that I’m printing the button onto the Canvas element because otherwise they appear below it
Jeremy