Help with progress bar

[veranicolette]

So my experiment currently has two items on its timeline, the instructions page and the experiment itself. The progress bar immediately fills up to 50% after the instructions page is shown and doesn't move at all during the different trials and it fills up to 100% when the experiment is finished. How could I fix this where it'll progress with every trial?

[becky-gilbert]

Hi @veranicolette, you could use the jsPsych.setProgressBar function to manually set the progress bar values. For instance, in your instructions trial, you could use the on_load function to set the progress bar to 0 or a very small value:

on_load: function() {
  jsPsych.setProgressBar(0.05);
}

And to change the values in your main task, you need some way of tracking or calculating how far through the task the participant is. One way to do this is to use jsPsych's data functions, like the .filter function and .count function, to figure out how many trials of the main task the person has done. Then you can update the progress bar at the beginning or end of each trial:

var n_trials = 10;
var trial = {
  //... other trial parameters...
  on_finish: function(data) {
    var trial_count = jsPsych.data.get().filter({task_segment: "main_task"}).count();
    var progress = trial_count/n_trials;
    jsPsych.setProgressBar(progress);
  }
}

Another option is to create a global count variable that increases by 1 after each trial, and use that to set the progress bar value at the end of each trial:

var count = 0;
var n_trials = 10;
var trial = {
  //... other trial parameters...
  on_finish: function(data) {
    count++;
    var progress = count/n_trials;
    jsPsych.setProgressBar(progress);
  }
}

I hope this helps!

[veranicolette]

It's working now, thank you!

[becky-gilbert]

Forgot to say that if you want to set the progress bar values yourself, I think you need to set auto_update_progress_bar to false in your jsPsych.init settings:

jsPsych.init({
  //... other settings...
  show_progress_bar: true,
  auto_update_progress_bar: false
});