jspsych 6.3.1 → 7.1.2

package/plugins/jspsych-webgazer-calibrate.js

@@ -1,161 +0,0 @@
-/**
- * jspsych-webgazer-calibrate
- * Josh de Leeuw
- **/
-
-jsPsych.plugins["webgazer-calibrate"] = (function() {
-
-    var plugin = {};
-  
-    plugin.info = {
-      name: 'webgazer-calibrate',
-      description: '',
-      parameters: {
-        calibration_points: {
-          type: jsPsych.plugins.parameterType.INT,
-          default: [[10,10], [10,50], [10,90], [50,10], [50,50], [50,90], [90,10], [90,50], [90,90]]
-        },
-        calibration_mode: {
-          type: jsPsych.plugins.parameterType.STRING,
-          default: 'click', // options: 'click', 'view'
-        },
-        point_size:{
-          type: jsPsych.plugins.parameterType.INT,
-          default: 20
-        },
-        repetitions_per_point: {
-          type: jsPsych.plugins.parameterType.INT,
-          default: 1
-        },
-        randomize_calibration_order: {
-          type: jsPsych.plugins.parameterType.BOOL,
-          default: false
-        },
-        time_to_saccade: {
-          type: jsPsych.plugins.parameterType.INT,
-          default: 1000
-        },
-        time_per_point: {
-          type: jsPsych.plugins.parameterType.STRING,
-          default: 1000
-        }
-      }
-    }
-  
-    plugin.trial = function(display_element, trial) {
-  
-      var html = `
-        <div id='webgazer-calibrate-container' style='position: relative; width:100vw; height:100vh'>
-        </div>`
-  
-      display_element.innerHTML = html;
-  
-      var wg_container = display_element.querySelector('#webgazer-calibrate-container');
-        
-      var reps_completed = 0;
-      var points_completed = -1;
-      var cal_points = null;
-
-      calibrate();
-      
-      function calibrate(){
-        jsPsych.extensions['webgazer'].resume();
-        if(trial.calibration_mode == 'click'){
-          jsPsych.extensions['webgazer'].startMouseCalibration();
-        }
-        next_calibration_round();
-      }
-
-      function next_calibration_round(){
-        if(trial.randomize_calibration_order){
-          cal_points = jsPsych.randomization.shuffle(trial.calibration_points);
-        } else {
-          cal_points = trial.calibration_points;
-        }
-        points_completed = -1;
-        next_calibration_point();
-      }
-  
-      function next_calibration_point(){
-        points_completed++;
-        if(points_completed == cal_points.length){
-          reps_completed++;
-          if(reps_completed == trial.repetitions_per_point){
-            calibration_done();
-          } else {
-            next_calibration_round();
-          }
-        } else {
-          var pt = cal_points[points_completed];
-          calibration_display_gaze_only(pt);
-        }
-      }
-
-      function calibration_display_gaze_only(pt){
-        var pt_html = `<div id="calibration-point" style="width:${trial.point_size}px; height:${trial.point_size}px; border-radius:${trial.point_size}px; border: 1px solid #000; background-color: #333; position: absolute; left:${pt[0]}%; top:${pt[1]}%;"></div>`
-        wg_container.innerHTML = pt_html;
-
-        var pt_dom = wg_container.querySelector('#calibration-point');
-        
-        if(trial.calibration_mode == 'click'){
-          pt_dom.style.cursor = 'pointer';
-          pt_dom.addEventListener('click', function(){
-            next_calibration_point();
-          })
-        }
-        
-        if(trial.calibration_mode == 'view'){
-          var br = pt_dom.getBoundingClientRect();
-          var x = br.left + br.width / 2;
-          var y = br.top + br.height / 2;
-  
-          var pt_start_cal = performance.now() + trial.time_to_saccade;
-          var pt_finish = performance.now() + trial.time_to_saccade + trial.time_per_point;
-          
-          requestAnimationFrame(function watch_dot(){
-            
-            if(performance.now() > pt_start_cal){
-              jsPsych.extensions['webgazer'].calibratePoint(x,y,'click');
-            }
-            if(performance.now() < pt_finish){
-              requestAnimationFrame(watch_dot);
-            } else {
-              next_calibration_point();
-            }
-          })
-        }  
-      }
-
-      function calibration_done(){
-        if(trial.calibration_mode == 'click'){
-          jsPsych.extensions['webgazer'].stopMouseCalibration();
-        }
-        wg_container.innerHTML = "";
-        end_trial();
-      }
-
-      // function to end trial when it is time
-      function end_trial() {
-        jsPsych.extensions['webgazer'].pause();
-        jsPsych.extensions['webgazer'].hidePredictions();
-        jsPsych.extensions['webgazer'].hideVideo();
-  
-        // kill any remaining setTimeout handlers
-        jsPsych.pluginAPI.clearAllTimeouts();
-  
-        // gather the data to store for the trial
-        var trial_data = {
-  
-        };
-  
-        // clear the display
-        display_element.innerHTML = '';
-  
-        // move on to the next trial
-        jsPsych.finishTrial(trial_data);
-      };
-  
-    };
-  
-    return plugin;
-  })();

package/plugins/jspsych-webgazer-init-camera.js

@@ -1,139 +0,0 @@
-/**
- * jspsych-webgazer-init-camera
- * Josh de Leeuw
- **/
-
- jsPsych.plugins["webgazer-init-camera"] = (function () {
-
-  var plugin = {};
-
-  plugin.info = {
-    name: 'webgazer-init-camera',
-    description: '',
-    parameters: {
-      instructions: {
-        type: jsPsych.plugins.parameterType.HTML_STRING,
-        default: `
-            <p>Position your head so that the webcam has a good view of your eyes.</p>
-            <p>Center your face in the box and look directly towards the camera.</p>
-            <p>It is important that you try and keep your head reasonably still throughout the experiment, so please take a moment to adjust your setup to be comfortable.</p>
-            <p>When your face is centered in the box and the box is green, you can click to continue.</p>`
-      },
-      button_text: {
-        type: jsPsych.plugins.parameterType.STRING,
-        default: 'Continue'
-      }
-    }
-  }
-
-  plugin.trial = function (display_element, trial) {
-
-    var start_time = performance.now();
-    var load_time;
-
-    if (!jsPsych.extensions.webgazer.isInitialized()) {
-      jsPsych.extensions.webgazer.start().then(function () {
-        showTrial();
-      }).catch(function () {
-        display_element.innerHTML = `<p>The experiment cannot continue because the eye tracker failed to start.</p>
-            <p>This may be because of a technical problem or because you did not grant permission for the page to use your camera.</p>`
-      });
-    } else {
-      showTrial();
-    }
-
-    function showTrial() {
-
-      load_time = Math.round(performance.now() - start_time);
-
-      var style = `
-        <style id="webgazer-center-style">
-          #webgazerVideoContainer { top: 20px !important; left: calc(50% - 160px) !important;}
-        </style>
-      `
-      document.querySelector('head').insertAdjacentHTML('beforeend', style);
-
-      var html = `
-        <div id='webgazer-init-container' style='position: relative; width:100vw; height:100vh'>
-        </div>`
-
-      display_element.innerHTML = html;
-
-      jsPsych.extensions['webgazer'].showVideo();
-      jsPsych.extensions['webgazer'].resume();
-
-      var wg_container = display_element.querySelector('#webgazer-init-container');
-
-
-      wg_container.innerHTML = `
-        <div style='position: absolute; top: max(260px, 40%); left: calc(50% - 400px); width:800px;'>
-        ${trial.instructions}
-        <button id='jspsych-wg-cont' class='jspsych-btn' disabled>${trial.button_text}</button>
-        </div>`
-
-      if(is_face_detect_green()){
-        document.querySelector('#jspsych-wg-cont').disabled = false;
-      } else {
-        var observer = new MutationObserver(face_detect_event_observer);
-        observer.observe(document, {
-          attributes: true,
-          attributeFilter: ['style'],
-          subtree: true
-        });
-      }
-
-      document.querySelector('#jspsych-wg-cont').addEventListener('click', function () {
-        if(observer){
-          observer.disconnect();
-        }
-        end_trial();
-      });
-    }
-
-    function is_face_detect_green(){
-      if(document.querySelector("#webgazerFaceFeedbackBox")){
-        return document.querySelector('#webgazerFaceFeedbackBox').style.borderColor == "green"
-      } else {
-        return false;
-      }
-    }
-
-    function face_detect_event_observer(mutationsList, observer) {
-      if (mutationsList[0].target == document.querySelector('#webgazerFaceFeedbackBox')) {
-        if (mutationsList[0].type == 'attributes' && mutationsList[0].target.style.borderColor == "green") {
-          document.querySelector('#jspsych-wg-cont').disabled = false;
-        }
-        if (mutationsList[0].type == 'attributes' && mutationsList[0].target.style.borderColor == "red") {
-          document.querySelector('#jspsych-wg-cont').disabled = true;
-        }
-      }
-    }
-
-    // function to end trial when it is time
-    function end_trial() {
-      
-      jsPsych.extensions['webgazer'].pause();
-      jsPsych.extensions['webgazer'].hideVideo();
-
-
-      // kill any remaining setTimeout handlers
-      jsPsych.pluginAPI.clearAllTimeouts();
-
-      // gather the data to store for the trial
-      var trial_data = {
-        load_time: load_time
-      };
-
-      // clear the display
-      display_element.innerHTML = '';
-
-      document.querySelector('#webgazer-center-style').remove();
-
-      // move on to the next trial
-      jsPsych.finishTrial(trial_data);
-    };
-
-  };
-
-  return plugin;
-})();

package/plugins/jspsych-webgazer-validate.js

@@ -1,314 +0,0 @@
-/**
- * jspsych-webgazer-validate
- * Josh de Leeuw
- **/
-
- jsPsych.plugins["webgazer-validate"] = (function() {
-
-  var plugin = {};
-
-  plugin.info = {
-    name: 'webgazer-validate',
-    description: '',
-    parameters: {
-      validation_points: {
-        type: jsPsych.plugins.parameterType.INT,
-        default: [[10,10], [10,50], [10,90], [50,10], [50,50], [50,90], [90,10], [90,50], [90,90]]
-      },
-      validation_point_coordinates: {
-        type: jsPsych.plugins.parameterType.STRING,
-        default: 'percent' // options: 'percent', 'center-offset-pixels'
-      },
-      roi_radius: {
-        type: jsPsych.plugins.parameterType.INT,
-        default: 200
-      },
-      randomize_validation_order: {
-        type: jsPsych.plugins.parameterType.BOOL,
-        default: false
-      },
-      time_to_saccade: {
-        type: jsPsych.plugins.parameterType.INT,
-        default: 1000
-      },
-      validation_duration: {
-        type: jsPsych.plugins.parameterType.INT,
-        default: 2000
-      },
-      point_size:{
-        type: jsPsych.plugins.parameterType.INT,
-        default: 20
-      },
-      show_validation_data: {
-        type: jsPsych.plugins.parameterType.BOOL,
-        default: false
-      }
-    }
-  }
-
-  plugin.trial = function(display_element, trial) {
-
-    var trial_data = {}
-    trial_data.raw_gaze = [];
-    trial_data.percent_in_roi = [];
-    trial_data.average_offset = [];
-    trial_data.validation_points = null;
-
-    var html = `
-      <div id='webgazer-validate-container' style='position: relative; width:100vw; height:100vh; overflow: hidden;'>
-      </div>`
-
-    display_element.innerHTML = html;
-
-    var wg_container = display_element.querySelector('#webgazer-validate-container');
-
-    var points_completed = -1;
-    var val_points = null;
-    var start = performance.now();
-
-    validate();
-
-    function validate(){
-      
-      if(trial.randomize_validation_order){
-        val_points = jsPsych.randomization.shuffle(trial.validation_points);
-      } else {
-        val_points = trial.validation_points;
-      }
-      trial_data.validation_points = val_points;
-      points_completed = -1;
-      //jsPsych.extensions['webgazer'].resume();
-      jsPsych.extensions.webgazer.startSampleInterval();
-      //jsPsych.extensions.webgazer.showPredictions();  
-      next_validation_point();
-    }
-
-    function next_validation_point(){
-      points_completed++;
-      if(points_completed == val_points.length){
-        validation_done();
-      } else {
-        var pt = val_points[points_completed];
-        validation_display(pt);
-      }
-    }
-
-    function validation_display(pt){
-      var pt_html = drawValidationPoint(pt[0], pt[1]);
-      wg_container.innerHTML = pt_html;
-
-      var pt_dom = wg_container.querySelector('.validation-point');
-
-      var br = pt_dom.getBoundingClientRect();
-      var x = br.left + br.width / 2;
-      var y = br.top + br.height / 2;
-
-      var pt_start_val = performance.now() + trial.time_to_saccade;
-      var pt_finish = pt_start_val + trial.validation_duration;
-
-      var pt_data = [];
-
-      var cancelGazeUpdate = jsPsych.extensions['webgazer'].onGazeUpdate(function(prediction){
-        if(performance.now() > pt_start_val){
-          pt_data.push({x: prediction.x, y: prediction.y, dx: prediction.x - x, dy: prediction.y - y, t: Math.round(prediction.t-start)});
-        }
-      });
-
-      requestAnimationFrame(function watch_dot(){
-        if(performance.now() < pt_finish){
-          requestAnimationFrame(watch_dot);
-        } else {
-          trial_data.raw_gaze.push(pt_data);
-          cancelGazeUpdate();
-          
-          next_validation_point();
-        }
-      });
-
-    }
-
-    function drawValidationPoint(x,y){
-      if(trial.validation_point_coordinates == 'percent'){
-        return drawValidationPoint_PercentMode(x,y);
-      } 
-      if(trial.validation_point_coordinates == 'center-offset-pixels'){
-        return drawValidationPoint_CenterOffsetMode(x,y);
-      }
-    }
-
-    function drawValidationPoint_PercentMode(x,y){
-      return `<div class="validation-point" style="width:${trial.point_size}px; height:${trial.point_size}px; border-radius:${trial.point_size}px; border: 1px solid #000; background-color: #333; position: absolute; left:${x}%; top:${y}%;"></div>`
-    }
-
-    function drawValidationPoint_CenterOffsetMode(x,y){
-      return `<div class="validation-point" style="width:${trial.point_size}px; height:${trial.point_size}px; border-radius:${trial.point_size}px; border: 1px solid #000; background-color: #333; position: absolute; left:calc(50% - ${trial.point_size/2}px + ${x}px); top:calc(50% - ${trial.point_size/2}px + ${y}px);"></div>`
-    }
-
-    function drawCircle(target_x, target_y, dx, dy, r){
-      if(trial.validation_point_coordinates == 'percent'){
-        return drawCircle_PercentMode(target_x, target_y, dx, dy, r);
-      } 
-      if(trial.validation_point_coordinates == 'center-offset-pixels'){
-        return drawCircle_CenterOffsetMode(target_x, target_y, dx, dy, r);
-      }
-    }
-
-    function drawCircle_PercentMode(target_x, target_y, dx, dy, r){
-      var html = `
-        <div class="validation-centroid" style="width:${r*2}px; height:${r*2}px; border: 2px dotted #ccc; border-radius: ${r}px; background-color: transparent; position: absolute; left:calc(${target_x}% + ${dx-r}px); top:calc(${target_y}% + ${dy-r}px);"></div>
-      `
-      return html;
-    }
-
-    function drawCircle_CenterOffsetMode(target_x, target_y, dx, dy, r){
-      var html = `
-        <div class="validation-centroid" style="width:${r*2}px; height:${r*2}px; border: 2px dotted #ccc; border-radius: ${r}px; background-color: transparent; position: absolute; left:calc(50% + ${target_x}px + ${dx-r}px); top:calc(50% + ${target_y}px + ${dy-r}px);"></div>
-      `
-      return html;
-    }
-
-    function drawRawDataPoint(target_x, target_y, dx, dy, ){
-      if(trial.validation_point_coordinates == 'percent'){
-        return drawRawDataPoint_PercentMode(target_x, target_y, dx, dy);
-      } 
-      if(trial.validation_point_coordinates == 'center-offset-pixels'){
-        return drawRawDataPoint_CenterOffsetMode(target_x, target_y, dx, dy);
-      }
-    }
-
-    function drawRawDataPoint_PercentMode(target_x, target_y, dx, dy){
-      var color = Math.sqrt(dx*dx + dy*dy) <= trial.roi_radius ? '#afa' : '#faa';
-      return `<div class="raw-data-point" style="width:5px; height:5px; border-radius:5px; background-color: ${color}; opacity:0.8; position: absolute; left:calc(${target_x}% + ${dx-2}px); top:calc(${target_y}% + ${dy-2}px);"></div>`
-    }
-
-    function drawRawDataPoint_CenterOffsetMode(target_x, target_y, dx, dy){
-      var color = Math.sqrt(dx*dx + dy*dy) <= trial.roi_radius ? '#afa' : '#faa';
-      return `<div class="raw-data-point" style="width:5px; height:5px; border-radius:5px; background-color: ${color}; opacity:0.8; position: absolute; left:calc(50% + ${target_x}px + ${dx-2}px); top:calc(50% + ${target_y}px + ${dy-2}px);"></div>`
-    }
-
-    function median(arr){
-      var mid = Math.floor(arr.length/2);
-      var sorted_arr = arr.sort((a,b) => a-b);
-      if(arr.length % 2 == 0){
-        return sorted_arr[mid-1] + sorted_arr[mid] / 2;
-      } else {
-        return sorted_arr[mid];
-      }
-    }
-
-    function calculateGazeCentroid(gazeData){
-
-      var x_diff_m = gazeData.reduce(function(accumulator, currentValue, index){
-        accumulator += currentValue.dx;
-        if(index == gazeData.length-1){
-          return accumulator / gazeData.length;
-        } else {
-          return accumulator;
-        }
-      }, 0);
-
-      var y_diff_m = gazeData.reduce(function(accumulator, currentValue, index){
-        accumulator += currentValue.dy;
-        if(index == gazeData.length-1){
-          return accumulator / gazeData.length;
-        } else {
-          return accumulator;
-        }
-      }, 0);
-
-      var median_distance = median(gazeData.map(function(x){ return(Math.sqrt(Math.pow(x.dx-x_diff_m,2) + Math.pow(x.dy-y_diff_m,2)))}));
-
-      return {
-        x: x_diff_m,
-        y: y_diff_m,
-        r: median_distance
-      }
-    }
-
-    function calculatePercentInROI(gazeData){
-      var distances = gazeData.map(function(p){ 
-        return(Math.sqrt(Math.pow(p.dx,2) + Math.pow(p.dy,2)))
-      });
-      var sum_in_roi = distances.reduce(function(accumulator, currentValue){
-        if(currentValue <= trial.roi_radius){
-          accumulator++;
-        }
-        return accumulator;
-      }, 0);
-      var percent = sum_in_roi / gazeData.length * 100;
-      return percent;
-    }
-
-    function calculateSampleRate(gazeData){
-      var mean_diff = [];
-      for(var i=0; i<gazeData.length; i++){
-        if(gazeData[i].length > 1){
-          var t_diff = [];
-          for(var j=1; j<gazeData[i].length; j++){
-            t_diff.push(gazeData[i][j].t - gazeData[i][j-1].t)
-          }
-          mean_diff.push(t_diff.reduce(function(a,b) { return(a+b) },0) / t_diff.length);
-        }
-      }
-      if(mean_diff.length > 0){
-        return 1000 / (mean_diff.reduce(function(a,b) { return(a+b) }, 0) / mean_diff.length);
-      } else {
-        return null;
-      }
-      
-    }
-
-    function validation_done(){
-      trial_data.samples_per_sec = calculateSampleRate(trial_data.raw_gaze).toFixed(2);
-      for(var i=0; i<trial.validation_points.length; i++){
-        trial_data.percent_in_roi[i] = calculatePercentInROI(trial_data.raw_gaze[i]);
-        trial_data.average_offset[i] = calculateGazeCentroid(trial_data.raw_gaze[i]);
-      }
-      if(trial.show_validation_data){
-        
-        show_validation_data();
-      } else {
-        end_trial();
-      }
-    }
-
-    function show_validation_data(){
-      var html = '';
-      for(var i=0; i<trial.validation_points.length; i++){
-        html += drawValidationPoint(trial.validation_points[i][0], trial.validation_points[i][1]);
-        html += drawCircle(trial.validation_points[i][0], trial.validation_points[i][1], 0, 0, trial.roi_radius);
-        for(var j=0; j<trial_data.raw_gaze[i].length; j++){
-          html += drawRawDataPoint(trial.validation_points[i][0], trial.validation_points[i][1], trial_data.raw_gaze[i][j].dx, trial_data.raw_gaze[i][j].dy)
-        }
-      }
-      
-      html += '<button id="cont" style="position:absolute; top: 50%; left:calc(50% - 50px); width: 100px;" class="jspsych-btn">Continue</btn>';
-      wg_container.innerHTML = html;
-      wg_container.querySelector('#cont').addEventListener('click', function(){
-        jsPsych.extensions.webgazer.pause();
-        end_trial();
-      });
-      // turn on webgazer's loop
-      jsPsych.extensions.webgazer.showPredictions();
-      jsPsych.extensions.webgazer.stopSampleInterval();
-      jsPsych.extensions.webgazer.resume();        
-    }
-
-    // function to end trial when it is time
-    function end_trial() {
-      jsPsych.extensions.webgazer.stopSampleInterval();
-
-      // kill any remaining setTimeout handlers
-      jsPsych.pluginAPI.clearAllTimeouts();    
-
-      // clear the display
-      display_element.innerHTML = '';
-
-      // move on to the next trial
-      jsPsych.finishTrial(trial_data);
-    };
-
-  };
-
-  return plugin;
-})();

package/plugins/template/jspsych-plugin-template.js

@@ -1,35 +0,0 @@
-/*
- * Example plugin template
- */
-
-jsPsych.plugins["PLUGIN-NAME"] = (function() {
-
-  var plugin = {};
-
-  plugin.info = {
-    name: "PLUGIN-NAME",
-    parameters: {
-      parameter_name: {
-        type: jsPsych.plugins.parameterType.INT, // BOOL, STRING, INT, FLOAT, FUNCTION, KEY, SELECT, HTML_STRING, IMAGE, AUDIO, VIDEO, OBJECT, COMPLEX
-        default: undefined
-      },
-      parameter_name: {
-        type: jsPsych.plugins.parameterType.IMAGE,
-        default: undefined
-      }
-    }
-  }
-
-  plugin.trial = function(display_element, trial) {
-
-    // data saving
-    var trial_data = {
-      parameter_name: 'parameter value'
-    };
-
-    // end trial
-    jsPsych.finishTrial(trial_data);
-  };
-
-  return plugin;
-})();

package/tests/README.md

@@ -1,7 +0,0 @@
-# Testing jsPsych
-
-Tests are written with [Jest](https://facebook.github.io/jest/).
-
-To run the tests, install Node and npm. Run `npm install` in the root jsPsych directory. Then run `npm test`.
-
-To add tests, follow examples contained in this folder.