Warning / back to fullscreen

[InaQuadt]

Hello everyone,

I have added a fullscreen mode to my experiment to minimise distractions.
If a participant exits fullscreen by accident, I want to allow them to enter fullscreen again
or exit from the experiment but with a debriefing page.

Is there any way of giving a warning saying something like "please don't exit fullscreen mode.
If you want to withdraw from the experiment, you will be taken to an external debriefing page".

And then two buttons "Withdraw" and "back to fullscreen".

I already have a link to a debriefing page at the end of the experiment:

jsPsych.init({
timeline: [...],
on_finish: function(){
window.location.href = "link"

Best wishes,
Ina.

[becky-gilbert]

Hi Ina! The jsPsych.init function has a parameter called on_interaction_data_update. You can use this function to check the type of interaction event that occurred, and if the event was "fullscreenexit", show the warning message.

These Discussion posts should give you some ideas about how exactly to set this up: #1257, #1284.

And feel free to follow up here if you need further guidance.

[InaQuadt]

Hi Becky,

Thank you so much for taking the time to answer all my questions!!
I have tried to implement your suggestions but I am somehow stuck...

I don't know how the function on_interaction_data_update can show the warning message instead of pausing the experiment...

Can you (or anyone else!) please help me find my mistake?

This is my whole code so far:

var welcome = {
    type: 'instructions',
    pages: [
        '<div style="text-align:left"><h1>Welcome to my experiment!</h1>'        
    ],
    show_clickable_nav: true
}

var ID = {
	type: 'html-button-response',
  choices: ['ok'],
	prompt: '<p>This is your individual Participant ID.</p>' +
	        '<p style="color:red;">Please write it down in case you want to withdraw your data from the study.</p>',
	stimulus: function(){
    return jsPsych.randomization.randomID(15);
	}
}

var fullscreen = {
  type: 'fullscreen',
  fullscreen_mode: true,
}


var fullscreen_again = {
  type: 'fullscreen',
  message: '<p>Please do not leave fullscreen during the experiment! You can do it.</p>',
  fullscreen_mode: true
}

var if_no_fullscreen = {
    timeline: [fullscreen_again],
    conditional_function: function() {
      // get the data from the previous trial,
      var data = jsPsych.data.get().last(1).values()[0];
      if (data.screen_focus == "fullscreenexit") {
          return true;
      } else {
        return false;
      }
    }
}

var Question1 = {
    type: 'html-button-response',
    stimulus: '<p>Do you have a university degreee or an equally high level of education?</p>'+
              '<p>such as... </P>',
    choices: ['Yes', 'No'],
    
}

var Question2 = {
    type: 'html-button-response',
    stimulus: '<h1>Do you consider yourself to be late bilingual or monolingual?</h1>',
    choices: ['Late bilingual', 'Monolingual'],
    prompt: '<p><strong>Late Bilingual</strong> = You have learned a second language after the age of 7 and you are now fluent in two languages.</p>'+
            '<p> i.e. you were not fluent in two languages before the age of 7</p>'+
            '<p>&nbsp;</p>'+
            '<p><strong>Monolingual</strong> = You have not learned a second language to an extent that can be considered fluent.</p>'
}

var L1_L2 = {
  type: 'survey-text',
  questions: [
    {prompt: "What is your native language?", name: 'L1'}, 
    {prompt: "What is your second language? If you are monolingual please leave this blank.", 
    
        name: 'L2'}, 
    {prompt: "Do you speak any other languages? (YES/NO)", name: 'L3'}
  ],
}

var L_box = {
    type: 'survey-text',
    questions: [
      {prompt: 'Use this space if you would like to provide more detail about the languages you speak', 
      placeholder: 'Do you speak more than two languages?', 
      rows:20, 
      columns: 100}
    ]
}

var instructions = {
      type: 'html-keyboard-response',
      stimulus: "<p>As a reminder:" +
          "<p>If you see a <strong>circle</strong>, press the letter <strong>W</strong> on the keyboard as fast as you can</p>" +
          "<p>If you see a <strong>triangle</strong>, press the letter <strong>P</strong> on the keyboard as fast as you can</p>" +
          
          "<div style='width: 700px;'>"+
          "<div style='float: left;'><img src='img/circle.png'></img>" +
          "<p class='small'>Press <strong>W</strong></p></div>" +
          "<div class='float: right;'><img src='img/triangle.png'></img>" +
          "<p class='small'>Press <strong>P</strong></p></div>" +
          "</div>"+ 
          
          "<p>Position your  <strong>left index finger on the W</strong> and your  <strong>right index finger on the P.</strong></p>" +
          "<p style='color:red;'><strong>You will now start with a practice.</p>" +
          "<p style='color:red;'><strong>You will get feedback about whether you responded correctly.</p>"+
          "<p style='color:red;'><strong>When you are ready, press any key to start the practice trial.</p>",
     post_trial_gap: 2000
  }
    
var test_stimuli = [
  { stimulus: "img/circle.png", side: 'left', condition: 'congruent', data: { test_part: 'test', correct_response: 'W', side: 'left'}},
  { stimulus: "img/triangle.png", side: 'left', condition: 'incongruent', data: { test_part: 'test', correct_response: 'P', side: 'left' }},
  { stimulus: "img/circle.png", side: 'right', condition: 'congruent', data: { test_part: 'test', correct_response: 'W', side: 'right'}},
  { stimulus: "img/triangle.png", side: 'right', condition: 'congruent', data: { test_part: 'test', correct_response: 'P', side: 'right'}}
]

var fixation = {
  type: 'html-keyboard-response',
  stimulus: '<div style="font-size:60px;">+</div>',
  choices: jsPsych.NO_KEYS,
  trial_duration: function(){
    return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
  },
  data: {test_part: 'fixation'}
}

    
var test = {
  type: "html-keyboard-response",
  stimulus: function() {
      // define a variable called "shift" that determines the left/right shift value, based on "side" from timeline variables
      var shift;
      if (jsPsych.timelineVariable('side', true) == 'left') {
        // shift image 300 px to the left - percentages also work
        shift = "-600px";
      } else if (jsPsych.timelineVariable('side', true) == 'right') {
        // shift image 300 px to the right - percentages also work
        shift = "600px";
      }
      // combine the "stimulus" (image file path) and "shift" in a single HTML string to use for the trial stimulus
      return '<img src="'+jsPsych.timelineVariable('stimulus',true)+'" style="transform: translate('+shift+'); width:300px;"/>'
  },
  choices: ['w', 'p'],
  data: jsPsych.timelineVariable('data'),
  on_finish: function(data){
    data.correct = data.key_press == jsPsych.pluginAPI.convertKeyCharacterToKeyCode(data.correct_response);
  }
};

var feedback = {
	type: 'html-keyboard-response',
	stimulus: function(){
		var last_trial_correct = jsPsych.data.get().last(1).values()[0].correct;
		if(last_trial_correct){
			return '<p>Correct!</p>'
		} else {
			return '<p>Incorrect</p>'
		}
	},
		choices: jsPsych.NO_KEYS,
    trial_duration: 2000
}


var practice_procedure = {
  timeline: [fixation, test, feedback],
  timeline_variables: test_stimuli,
  repetitions: 2,
  randomize_order: true
}

var starting_Experiment = {
  type: "html-keyboard-response",
  stimulus: "<p>End of practice block.</p>"+
            "<p>Please note that you will no longer get feedback after your responses.</p>"+ 
            "<p>Remember, if you see a circle, press W. If you see a triangle, press P.</p>"+
            "<p>Press any key to begin the experiment.</p>",
  post_trial_gap: 1000
}

var test_procedure = {
  timeline: [fixation, test],
  timeline_variables: test_stimuli,
  repetitions: 2,
  randomize_order: true
}

var finish = {
    type: 'html-button-response',
    stimulus: '<p>Thank you for your time.</p>' +
              '<p>Please save the data by pressing the button below.</p>' +
              '<p>you will be taken to a debriefing page explaning in more detail what the experiment was about etc.</p>',
    choices: ['Finish experiment and save responses'],
}

jsPsych.init({
  timeline: [welcome,
            fullscreen,
            ID,
            Question1,
            Question2,
            L1_L2,
            L_box,
            instructions,
            practice_procedure,
            starting_Experiment,
            test_procedure,
            finish],
  
on_interaction_data_update: function(data){
		if(data.event == 'fullscreenexit'){
			jsPsych.pauseExperiment();
		}
		if(data.event == 'fullscreenenter'){
			jsPsych.resumeExperiment();
	}
},

on_finish: function (){
    window.location.href = "https://srjggpwahf.cognition.run/";
  },
})

[becky-gilbert]

EDIT: I tried this and it doesn't work. See this comment.

---

Hi @InaQuadt, sorry for the delay in responding! This may not be useful anymore but I'll follow up in case it's helpful for others.
I wonder if you could show your message using the jsPsych.getDisplayElement function to change the display content (innerHTML) to your message. You'd also want to clear it when the user goes back into fullscreen.

on_interaction_data_update: function(data){
  if(data.event == 'fullscreenexit'){
    jsPsych.pauseExperiment();
    jsPsych.getDisplayElement().innerHTML = "Please enter fullscreen to continue.";
  }
  if(data.event == 'fullscreenenter'){
    jsPsych.resumeExperiment();
    jsPsych.getDisplayElement().innerHTML = "";
  }
}

I haven't tried this. Does it work?

[juliameehan]

@InaQuadt did you try this? I have a similar thing I am trying to do if you've figured out a way!

[becky-gilbert]

Hi @InaQuadt and @juliameehan! It turns out that my earlier suggestion in this thread doesn't work - sorry. I think that pausing/resuming the experiment and changing the display might work between trials, but if someone exits fullscreen, that will almost certainly happen during a trial. So we can't just replace the contents of the page, because that will interfere with the current trial. Instead, we can hide the contents of the current trial, and add our own message about re-entering fullscreen. Then, once the person re-enters fullscreen, we can look to see if the 'please enter fullscreen' message is on the page, and if so, then remove it and show the trial content again.

Another issue is that the on_interaction_data_update function doesn't fire when the participant manually re-enters fullscreen, for instance by selecting fullscreen in their browser menu or pressing F11 (see #1628). In order for jsPsych to be able to track when the participant re-enters fullscreen, we need to use the requestFullscreen function (same function that is used in the fullscreen plugin). So now in the on_interaction_data_update function, instead of just showing a message asking the person to enter fullscreen, we might want to include a button that calls the requestFullscreen function when it's clicked.

Finally, I added a global variable called should_be_in_fullscreen that should be set to true whenever the participant is required to be in fullscreen, otherwise it should be false. This is necessary because otherwise when the person exits fullscreen at the end of the task/experiment, they'll still get the message asking them to go back into fullscreen. Even if you want the person to be in fullscreen throughout the whole experiment, it's still probably a good idea to use this variable and set it to false at the end of the last trial in the timeline.

Here's my full solution:

  var should_be_in_fullscreen = false;

  var fullscreen = {
    type: 'fullscreen',
    fullscreen_mode: true,
    on_start: function() {
      should_be_in_fullscreen = true; // once this trial starts, the participant should be in fullscreen
    }
  };

  var trial = {
    type: 'html-keyboard-response',
    stimulus: jsPsych.timelineVariable('stimulus')
  };

  var trial_procedure = {
    timeline: [trial],
    timeline_variables: [
      {stimulus: 'Hello!'},
      {stimulus: 'This'},
      {stimulus: 'is'},
      {stimulus: 'a'},
      {stimulus: 'task.'}
    ]
  };

  var fullscreen_exit = {
    type: 'fullscreen',
    fullscreen_mode: false,
    on_start: function() {
      should_be_in_fullscreen = false; // once this trial starts, the participant is no longer required to stay in fullscreen
    }
  };

  var done = {
    type: 'html-keyboard-response',
    stimulus: 'Done!'
  };

  jsPsych.init({
    timeline: [fullscreen, trial_procedure, fullscreen_exit, done],
    on_interaction_data_update: function(data){
      if(data.event == 'fullscreenexit' && should_be_in_fullscreen){
        console.log('exited fullscreen');
        // hide the contents of the current trial
        jsPsych.getDisplayElement().style.visibility = 'hidden';
        // add a div that contains a message and button to re-enter fullscreen
        jsPsych.getDisplayElement().insertAdjacentHTML('beforebegin',
        '<div id="message-div" style="margin: auto; width: 100%; text-align: center;">'+
        '<p>Please remain in fullscreen mode during the task.</p>'+
        '<p>When you click the button below, you will enter fullscreen mode.</p>'+
        '<button id="jspsych-fullscreen-btn" class="jspsych-btn">Continue</button></div>');
        // call the request fullscreen function when the button is clicked
        document.querySelector('#jspsych-fullscreen-btn').addEventListener('click', function() {
          var element = document.documentElement;
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
          } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
          }
        });
      }
      if(data.event == 'fullscreenenter'){
        console.log('entered fullscreen');
        // when entering fullscreen, check to see if the participant is re-entering fullscreen, 
        // i.e. the 'please enter fullscreen' message is on the page
        var msg_div = document.querySelector('#message-div');
        if (msg_div !== null) {
          // remove the message
          msg_div.remove(); 
          // show the contents of the current trial again
          jsPsych.getDisplayElement().style.visibility = 'visible';
        }
      }
    },
    on_finish: function () {
      jsPsych.data.displayData();
    }
  });

[juliameehan]

@becky-gilbert thank you so so much!!!! this worked perfectly for what I was looking to do.