two new plugins: activating fullscreen and something like terms and conditions

[jonasl...@gmx.de]

Hi Everyone,

since I coded two new plugins for my experiment I might as well share them. The first one enables or disables fullscreen after a klick on a button (less distraction during experiments!), the other only allows to continue after a checkbox is checked. I use it because our uiversity ethics guideline forces us to have participants agree on having read some stuff. Here's the code:

jspsych-fullscreen.js:
jsPsych['fullscreen'] = (function(){

    var plugin = {};

    plugin.create = function(params){
        var trials = [];

        trials[0] = {};
        trials[0].text = params.showtext;
        trials[0].button = params.buttontext;
        trials[0].exit = params.exit || false;

        return trials;
    }
  
  

    plugin.trial = function(display_element, trial){
        display_element.html(trial.text);
      
        display_element.append("<div class='jspsych-fullscreen'><button id='jspsych-fullscreen-button'>" + trial.button + "</button></div>");
        $('#jspsych-fullscreen-button').on('click',function(){
            if (!trial.exit) { launchIntoFullscreen(document.documentElement); }
            else { quitFullscreen(document.documentElement);}
            display_element.html('');
            jsPsych.finishTrial();
        });
    }

    return plugin;
})();

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();
  }}
function quitFullscreen(element) {
  if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }}


example code snippet:
var activate_fullscreen = {
    type: 'fullscreen',
    showtext: '<p style="padding-top: 50px; text-align: center;">This experiment is now shon in fullscreen-mode',
    buttontext: "OK"
}

experiment.push(activate_fullscreen);

...
var end_fullscreen = {    type: 'fullscreen',    showtext: '<p style="padding-top: 50px; text-align: center;">exiting fullscreen-mode',    buttontext: "OK",    exit: true}    experiment.push(end_fullscreen);

jspsych-t-a-c.js:
jsPsych['t-a-c'] = (function(){

    var plugin = {};

    plugin.create = function(params){
        var trials = [];

        trials[0] = {};
        trials[0].text = params.text;
        trials[0].check = params.check_text;
        trials[0].button = params.button_text;

        return trials;
    }
      
    plugin.trial = function(display_element, trial){
        display_element.html(trial.text);
                display_element.append("<div class='jspsych-t-a-c'><input type='checkbox' name='jspsych-t-a-c-checkbox' value='jspsych-t-a-c-checkbox-value' id='jspsych-t-a-c-checkbox-id'>" + trial.check + "</input></div>");
        display_element.append("<div class='jspsych-t-a-c'><button id='jspsych-t-a-c-button'>" + trial.button + " &gt;</button></div>");
        document.getElementById('jspsych-t-a-c-button').style.color = "#AAA";
        $('#jspsych-t-a-c-checkbox-id').on('click',function(){
            if (document.getElementById('jspsych-t-a-c-checkbox-id').checked) document.getElementById('jspsych-t-a-c-button').style.color = "#555";
            else document.getElementById('jspsych-t-a-c-button').style.color = "#AAA";
        });
        $('#jspsych-t-a-c-button').on('click',function(){
            if (document.getElementById('jspsych-t-a-c-checkbox-id').checked) {
                display_element.html('');
                jsPsych.finishTrial();
            }
                    });
    }

    return plugin;

})();


example:
var intro = {        type: 't-a-c',        text: '<p>Dear participant, bla bla bla do you really want this?</p>',        check_text: "I do agree to the terms and conditions",        button_text: "continue"    }    experiment.push(intro);