PennController for IBEX › Forums › Support › Progress bar for each sentence? › Reply To: Progress bar for each sentence?
May 4, 2023 at 7:36 am
#10506
![](https://www.pcibex.net/wp-content/uploads/2018/10/IMG_8365-e1540835663655-150x150.jpg)
Keymaster
Hello Evgeniya,
At the top of your script, define the size you want for that progress bar, for example 100*20px: const PROGRESS_SIZE = {w: 100, h: 20}
Then in your trial, print the Canvas elements that stand for your progress bar and run a function to update it when you launch the timeout. In this example, I’m setting a duration of 5000m:
newCanvas("progressContainer", PROGRESS_SIZE.w, PROGRESS_SIZE.h) .add(0,0,newCanvas("progress", PROGRESS_SIZE.w, PROGRESS_SIZE.h).color("green")) .css("border","solid 1px black") .center() .print() , newVar("timerInfo").set(()=>[Date.now(),5000]) // set the duration here , newFunction( "updateProgress", ()=>{ const [s,d] = getVar("timerInfo")._element.value; const p = (Date.now()-s) / d; if (p>1) return; getCanvas("progress").size((1-p)*PROGRESS_SIZE.w,PROGRESS_SIZE.h)._runPromises(); window.requestAnimationFrame( getFunction("updateProgress")._element.function ); } ).call()
Here’s a full example:
const PROGRESS_SIZE = {w: 100, h: 20} newTrial( newCanvas("progressContainer", PROGRESS_SIZE.w, PROGRESS_SIZE.h) .add(0,0,newCanvas("progress", PROGRESS_SIZE.w, PROGRESS_SIZE.h).color("green")) .css("border","solid 1px black") .center() .print() , newVar("timerInfo").set(()=>[Date.now(),5000]) // set the duration here , newFunction( "updateProgress", ()=>{ const [s,d] = getVar("timerInfo")._element.value; const p = (Date.now()-s) / d; if (p>1) return; getCanvas("progress").size((1-p)*PROGRESS_SIZE.w,PROGRESS_SIZE.h)._runPromises(); window.requestAnimationFrame( getFunction("updateProgress")._element.function ); } ).call() , newController("AcceptabilityJudgment",{ s:"What did the cat chase that was running to hide?", q:"How good does this sentence sound?", as:['1','2','3','4','5'], presentAsScale: true, timeout:5000 // the durations have to match }) .center().print().wait().remove() , getCanvas("progressContainer").remove(), newButton("Next").center().print().wait() )
Jeremy