Automatic Progress Bar¶
jsPsych can show a progress bar at the top of the experiment page indicating the participant's overall completion progress. The progress bar is rendered outside the jsPsych display element, and it requires the jspsych.css
file to be loaded on the page. As of version 6.0, the progress bar looks like this:
To show the progress bar, set the show_progress_bar
option in initJsPsych
to true
:
const jsPsych = initJsPsych({
show_progress_bar: true
});
The progress bar automatically updates after every trial.
Manual Control¶
The progress bar can also be manually controlled by setting jsPsych.progressBar.progress
. The value of jsPsych.progressBar.progress
should be a number between 0 and 1. For example, to set the progress bar to 85% full, you would do this:
const trial = {
type: jsPsychHtmlKeyboardResponse,
stimulus: 'Almost done...',
on_finish: function(){
jsPsych.progressBar.progress = 0.85; // set progress bar to 85% full.
}
}
You can also get the current value of the progress bar as jsPsych.progressBar.progress
const proportion_complete = jsPsych.progressBar.progress;
If you are going to use manual progress bar control, you may want to disable the automatic progress bar updates by setting the auto_update_progress_bar
property in initJsPsych()
to false
.
const jsPsych = initJsPsych({
show_progress_bar: true,
auto_update_progress_bar: false
});
Here's a complete example showing how to use these functions and initJsPsych()
settings to manually update the progress bar:
const jsPsych = initJsPsych({
show_progress_bar: true,
auto_update_progress_bar: false
});
const n_trials = 5;
const start = {
type: jsPsychHtmlKeyboardResponse,
stimulus: 'Press any key to start!',
on_start: function() {
// set progress bar to 0 at the start of experiment
jsPsych.progressBar.progress = 0
}
};
const trial = {
type: jsPsychHtmlKeyboardResponse,
stimulus: 'This is a trial!',
on_finish: function() {
// at the end of each trial, update the progress bar
// based on the current value and the proportion to update for each trial
var curr_progress_bar_value = jsPsych.progressBar.progress;
jsPsych.progressBar.progress = curr_progress_bar_value + (1/n_trials)
}
};
const trials = {
timeline: [trial],
repetitions: n_trials
};
const done = {
type: jsPsychHtmlKeyboardResponse,
stimulus: 'Done!'
};
jsPsych.run([start, trials, done]);
Custom Text¶
By default, jsPsych adds the text "Completion Progress" to the left of the progress bar. You can specify custom text using the message_progress_bar
parameter in initJsPsych
.
// support for different spoken languages
const jsPsych = initJsPsych({
show_progress_bar: true,
message_progress_bar: 'Porcentaje completo'
});
// no message
const jsPsych = initJsPsych({
show_progress_bar: true,
message_progress_bar: ''
});