progress bar issue

[viviantic]

Hello jsPsych team!

I tried to add a progress bar to my self-paced reading experiment #1052 . The experiment was running, but the progress bar didn't seem to work. What I did was that I created a global count variable that increases by 1 after each trial as suggested by @becky-gilbert in #1180 .

Not sure if this is the right way, but my count variable was set as

//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 = 17; //1 instruction trial, 3 practice trials, 1 start_task instruction trial , 6 critical trials, 6 filler trials, so it's 17 in total. 

I set it this way because I want the progress bar to advance each time when my participants finish reading the instruction or finish doing each practice/critical/filler trial, etc.

Then I added a few lines (starting with the on_finish line below) to my var practice_procedure var block1 var block2 and var block3 as seen below. Once again, not sure if this is the right way.

 //create practice procedure 
    var practice_procedure = {
            timeline: [instructions, fixation, practice, practice_question, feedback],
            timeline_variables: practice_stimuli,
            randomize_order: true,
            on_finish: function(data) {
              count++;
              var progress = count/n_trials;
              jsPsych.setProgressBar(progress);
            } 
        };
        timeline.push(practice_procedure);
      
 // skip other lines 
      
     //create 3 blocks
    var block1 = {
      timeline: [fixation, main_task, main_question],
      timeline_variables: main_stimuli_rand.slice(0,4), 
      on_finish: function(data) {
         count++;
         var progress = count/n_trials;
         jsPsych.setProgressBar(progress);
      } 
    };
    timeline.push(block1);

    var block2= {
      timeline: [fixation, main_task, main_question],
      timeline_variables: main_stimuli_rand.slice(4,8), 
      on_finish: function(data) {
         count++;
         var progress = count/n_trials;
         jsPsych.setProgressBar(progress);
      } 
    };
    timeline.push(block2);
    
    var block3= {
      timeline: [fixation, main_task, main_question],
      timeline_variables: main_stimuli_rand.slice(8,12),
      on_finish: function(data) {
         count++;
         var progress = count/n_trials;
         jsPsych.setProgressBar(progress);
      } 
    };
    timeline.push(block3);

and finally I add show_progress_bar to my jsPsych.init:

// run experiment
	jsPsych.init({
		timeline: timeline,
        show_progress_bar: true,
		on_finish: function(){
			jsPsych.data.displayData();
		}
	});

It didn't seem to work. Any suggestions on how to fix it?

Also, I was wondering if it is possible to show some text next to the progress bar to indicate how far along the participants have gone (e.g., 10/17 completed, 11/17 completed, 12/17 completed, etc.).

Any suggestions would be greatly appreciated.

[jodeleeuw]

Hi @viviantic ,

You may need to set auto_update_progress_bar: false in jsPsych.init(). See here.

Adding text next to the progress bar would require some changes to the progress bar code in jspsych.js. It's a good idea for a future version.

[viviantic]

Got it. Thank you @jodeleeuw!