Fullscreen Demo Demo Experiment Run Experiment

Fullscreen Demo

Jaap Murre

Demo of how to force subjects to do a task in fullscreen. Note that browsers keep changing the rules and conditions of when and how to allow fullscreen, so if you are going to use this, be sure to test these functions well.


If you are a registered user and signed in, you can here copy this script and its stimuli to your own account, where you can edit it and change it in any way you want.

It is absolutely free to register (no credit card info asked!). You can then instantly copy this experiment with one click and edit it, change its accompanying texts, its landing page, stimuli, etc. Invite your colleagues, friends, or students to check out your experiment. There is no limit on how many people can do your experiment, even with a free account.

The catch? There is no catch! Just keep in mind that with a free account, you cannot collect data. For teaching that is usually not a problem. For research, prepaid data collection (unlimited subjects) starts as low as €10.00 for a 10-day period.

function manualFullscreen() 
{
    var d = new Box('white','#fafafa','black',100,5,'#f3f3f3',0,"square"),
        b = d.addblock("center","center",100,100,"white"),
        browser = BrowserDetect.browser;

    while (!isFullscreen()) 
    {
        if (browser == "Safari")
        {
            b.text("Please, press Command-Shift-F, so the browser window fills the entire screen<br>&nbsp;<br>");
            b.setimage("https://scripting.neurotask.com/assets/images/scripting/mac_keyboard.png");
        }
        else
        {
            b.text("Please, press F11, so the browser window fills the entire screen<br>&nbsp;<br>");
            b.setimage("https://scripting.neurotask.com/assets/images/scripting/keyboard_f11.png");
        }
        
        await("keypress");
        await(100); // Give browser time to open window
    }
    
    d.destroy();
}

function requestFullscreen(element,finish)
{
    var i = element || document.getElementById("the-body");
    
    // go full-screen
    if (i.requestFullscreen) {
    	i.requestFullscreen();
    } else if (i.webkitRequestFullscreen) {
    	i.webkitRequestFullscreen();
    } else if (i.mozRequestFullScreen) {
    	i.mozRequestFullScreen();
    } else if (i.msRequestFullscreen) {
    	i.msRequestFullscreen();
    }    
    else {
        manualFullscreen();
    }
    
    await(100); // TODO: Can this be much shorter or 0?
    finish();
}

function exitFullscreen()
{
    // exit full-screen
    if (document.exitFullscreen) {
    	document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
    	document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
    	document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
    	document.msExitFullscreen();
    }    
}

function isFullscreen()
{
    // Verify whether the outside of the window equals the screen size
    return screen.height === window.outerHeight &&
           screen.width === window.outerWidth;
}

window.$$ = false;

aspect.after(window,'onresize', function() // aspect.after() is a Dojo function
{
    if (isFullscreen())
    {
        console.log("Resized (fullscreen)");
    }
    else
    {
        console.log("Resized (not fullscreen)");

        if (window.$$)
        {
            verifyFullscreen();                
        }
    }
});


function verifyFullscreen(s)
{
    s = s || "Click this to move back to full screen";

    if (!isFullscreen())
    {
        text(s);
        console.log("Forcing fullscreen");
        await('click');
        waitfor()
        {
            requestFullscreen(null,resume);
        }
    }
}

function ensureFullscreen(s)
{
    verifyFullscreen("Start message"); 
    window.$$ = true;
}


// Pseudo-experiment during which we can try to get out of fullscreen
main = makebox('centered','black'); // Redefine the main Box to black

ensureFullscreen(); // Activates general fullscreen guard

for (var i = 0; i < 5; i++)
{
//    verifyFullscreen();    // Apply fullscreen check at specific points
    
    console.log("Loop: ",i);
    
    text("Click this until counter is 1. Counter  " + (5-i));
    await('click');
}

exitFullscreen();

text("Exiting...");

You can download the files as follows: Click on the file (link) and then right-click and choose Save as... from the menu. Some media files (e.g., sound) will have a download button for this purpose.

This experiment has no files of this type
This experiment has no files of this type
This experiment has no files of this type
This experiment has no YouTube links
This experiment has no files of this type