0

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();
  }
}   

});
Didi Crous
  • 1
  • 1

2 Answers2

2

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();
      }
}       

});
T. Gibbons
  • 4,919
  • 2
  • 15
  • 32
  • Do you know if this is still the case? I don't seem to have the problem when I've tested, but I'm concerned that this could be a problem for users. – Eric May 14 '19 at 04:48
0

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.

Community
  • 1
  • 1
MKoosej
  • 3,405
  • 3
  • 21
  • 29
  • ok, thanks! so am I SOL if Qualtrics doesn't support the fullscreen API? – Didi Crous Oct 20 '15 at 22:12
  • if it doesn't support the API , you have to mimic the behavior with a dialog over your page or something like that. What people would do pre web API and full screen – MKoosej Oct 21 '15 at 19:02