automatically resize to full screen when clicking

Question

I am trying to insert some javascript code into qualtrics. I want it to resize the user's browser after the user presses the "next" button (this is after a short statement telling the user that the user's browser will be resized). When I run this code with an HTML file in my own browser, it works. However, it does not work in qualtrics. I know it is grabbing the "NextButton" element correctly because I tested the button click with a basic alert. Does anyone know if there is something in qualtrics that blocks this fullscreen function? Is there a way to get around it? My Javascript code is pasted below. Thanks in advance!

Qualtrics.SurveyEngine.addOnload(function()
{

$("#NextButton").click( function()
{
    alert("hi");
    launchIntoFullscreen(document.documentElement); 

});


function launchIntoFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}   

});

Answer 1

I think you have a conflict between your NextButton click handler and the Qualtrics NextButton click handler. Qualtrics is winning.

The way I've handled similar situations before is to hide the Qualtrics NextButton, and add my own button that executes whatever code I need before it clicks the Qualtrics NextButton.

Something like this:

Qualtrics.SurveyEngine.addOnload(function () {

$('NextButton').hide();
$('NextButton').insert({
    before: "<input id=\"checkButton\" type=\"button\" value=\"  >>  \" title=\"  >>  \">"
}); 
$('checkButton').onclick = function fullScreen() {
    launchIntoFullscreen(document.documentElement); 
    $('NextButton').click();
};

function launchIntoFullscreen(element) {
      if(element.requestFullscreen) {
        element.requestFullscreen();
      } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
}       

});

Answer 2

You should check if that Web API is actually supported inside Qualtrics.

try Modernizer or something like this. how to detect a browser supports requestFullscreen

if it's actually supported then the element wasn't valid and requestfullscreen didn't get invoked.