Reply To: Progress bar for each sentence?

[Jeremy]

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