Progress Bar Visibility per Trial

[SHogenboom]

Hi all,

I'm looking for some guidance on whether or not it is possible to set the visibility of the progress bar per trial rather than for the entire experiment. I wanted to use the progress_bar as an indication of how much time there was left, but obviously that makes no sense for certain phases such as the informed consent / instruction trials.

I tried the following which did not work:

// SCREEN: Informed Consent
var informed_consent = {
  // text + keyboard response
  type: "html-keyboard-response",
  stimulus: // text to display
  "<p> -- Informed Consent Text --- </p>" +
  "<p> If you agree with these conditions press [SPACE] to continue </p>",
  choices: ["space"], // only proceed when the spacebar is pressed
  data: {data_type: "informed_consent"}, // for sub-sequent data selection
  on_load: function() {
      jsPsych.show_progress_bar: false
  }
};

Note; I added the jsPsych.show_progress_bar: false statement - which appears to do nothing other than break the experiment.

My initialisation looks like this:

// Initialize the experiment
jsPsych.init({
  timeline: timeline,
  // progress bar to indicate trial times
  show_progress_bar: true,
  // manual updates within trials
  auto_update_progress_bar: false,
  message_progress_bar: "Time"
});

Any help would be appreciated! Even if it means letting go of the progress-bar all together ;)

[SHogenboom]

Answering my own question because I was thinking way too complicated. I have now opted for simply hiding the progress bar from view for those trials where I don't need it. It should be noted that this may not be an optimal solution for everyone as the centering of the other elements is still dependent on that element existing - even though it is not visible.

Replace the on_load code with the following:

on_load: function() {
    // Remove progress bar from screen
    document.getElementById("jspsych-progressbar-container").style.visibility = "hidden";
  }

[MatthieuFra]

Hello, thanks a lot for this technique ! But when I turn in "hidden", it stays hidden for the rest of the experiment, what parameter should I use to change again the visibility to "visible" ?
Thanks!

[jodeleeuw]

document.getElementById("jspsych-progressbar-container").style.visibility = "visible"; should work to undo the "hidden" change.

[DominiqueMakowski]

For reference, I managed to hide it for some parts of the experiment and show it again by using:

document.querySelector('#jspsych-progressbar-container').style.display = "none"

and

document.querySelector('#jspsych-progressbar-container').style.display = "inline"

in an on_start statement.