Reply To: Progress bar for each sentence?

Hello Evgeniya,

What this chunk of code does is embed a Template command inside a newTrial command, which won’t produce the desired result. If you’d like to brush up on PCIbex experiment structure, I recommend taking a look at this section of the documentation

What you want to do is insert the commands in the newTrial you already have:

PennController.ResetPrefix(null);
const PROGRESS_SIZE = {w: 100, h: 20};

// Experimental trial
Template("items_pilot.csv", row => 
    newTrial("pilot_experiment",
        defaultText
            .cssContainer({"margin-bottom":"1em"})
            .css({"font-size": "large"})
            .center()
            .print()
        ,        
        newTimer("break", 1000)  //пауза между предложениями = 1 с
            .start()
            .wait()
        ,
        // Printing the Canvas element above the context (feel free to move it somewhere else)
        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()
        ,
        newText("context", row.context)
            .css({"background-color": "LightCyan"})
        ,    
        newText("sentence", row.sentence)
        ,
        newScale("natural", "1", "2", "3", "4", "5", "6", "7")
            .before( newText("left", "Полностью неприемлемо  ") )
            .after(  newText("right", "  Полностью приемлемо")  )
            .log("last")
            .print()
            .callback(getTimer("timeout").stop())
        ,
        // Initiating the countdown just before starting the "timeout" Timer element
        newVar("timerInfo").set(()=>[Date.now(),15000]) // 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()
        ,
        newTimer("timeout", 15000)
            .start()
            .wait()
        ,
        // Remove the progress bar once the timer ends (either naturally or by a selection)
        getCanvas("progressContainer").remove()
        ,
        // I moved this here because I presume you want to wait for a selection to happen before setting the Var element
        newVar("rating")
            .global()
            .set(getScale("natural"))
    )
    .log("group", row.group)
    .log( "rating" , getVar("rating") )
    .log("condition", row.condition)
    .log("item", row.item)
    .log("exp_number",row.exp_number)
    .log("construction", row.construction)
    .log("governor", row.governor)
    .log("noun", row.noun)
    .log("pr_n", row.pr_n)
)

Jeremy