jspsych 6.3.1 → 7.1.2

package/plugins/jspsych-serial-reaction-time-mouse.js

@@ -1,212 +0,0 @@
-/**
- * jspsych-serial-reaction-time
- * Josh de Leeuw
- *
- * plugin for running a serial reaction time task
- *
- * documentation: docs.jspsych.org
- *
- **/
-
-jsPsych.plugins["serial-reaction-time-mouse"] = (function() {
-
-  var plugin = {};
-
-  plugin.info = {
-    name: 'serial-reaction-time-mouse',
-    description: '',
-    parameters: {
-      target: {
-        type: jsPsych.plugins.parameterType.INT,
-        pretty_name: 'Target',
-        array: true,
-        default: undefined,
-        description: 'The location of the target. The array should be the [row, column] of the target.'
-      },
-      grid: {
-        type: jsPsych.plugins.parameterType.BOOL,
-        pretty_name: 'Grid',
-        array: true,
-        default: [[1,1,1,1]],
-        description: 'This array represents the grid of boxes shown on the screen.'
-      },
-      grid_square_size: {
-        type: jsPsych.plugins.parameterType.INT,
-        pretty_name: 'Grid square size',
-        default: 100,
-        description: 'The width and height in pixels of each square in the grid.'
-      },
-      target_color: {
-        type: jsPsych.plugins.parameterType.STRING,
-        pretty_name: 'Target color',
-        default: "#999",
-        description: 'The color of the target square.'
-      },
-      response_ends_trial: {
-        type: jsPsych.plugins.parameterType.BOOL,
-        pretty_name: 'Response ends trial',
-        default: true,
-        description: 'If true, the trial ends after a mouse click.'
-      },
-      pre_target_duration: {
-        type: jsPsych.plugins.parameterType.INT,
-        pretty_name: 'Pre-target duration',
-        default: 0,
-        description: 'The number of milliseconds to display the grid before the target changes color.'
-      },
-      trial_duration: {
-        type: jsPsych.plugins.parameterType.INT,
-        pretty_name: 'Trial duration',
-        default: null,
-        description: 'How long to show the trial'
-      },
-      fade_duration: {
-        type: jsPsych.plugins.parameterType.INT,
-        pretty_name: 'Fade duration',
-        default: null,
-        description: 'If a positive number, the target will progressively change color at the start of the trial, with the transition lasting this many milliseconds.'
-      },
-      allow_nontarget_responses: {
-        type: jsPsych.plugins.parameterType.BOOL,
-        pretty_name: 'Allow nontarget response',
-        default: false,
-        description: 'If true, then user can make nontarget response.'
-      },
-      prompt: {
-        type: jsPsych.plugins.parameterType.STRING,
-        pretty_name: 'Prompt',
-        default: null,
-        description: 'Any content here will be displayed below the stimulus'
-      },
-    }
-  }
-
-  plugin.trial = function(display_element, trial) {
-
-    var startTime = -1;
-    var response = {
-      rt: null,
-      row: null,
-      column: null
-    }
-
-    // display stimulus
-    var stimulus = this.stimulus(trial.grid, trial.grid_square_size);
-    display_element.innerHTML = stimulus;
-
-
-		if(trial.pre_target_duration <= 0){
-			showTarget();
-		} else {
-			jsPsych.pluginAPI.setTimeout(function(){
-				showTarget();
-			}, trial.pre_target_duration);
-		}
-
-		//show prompt if there is one
-    if (trial.prompt !== null) {
-      display_element.insertAdjacentHTML('beforeend', trial.prompt);
-    }
-
-		function showTarget(){
-      var resp_targets;
-      if(!trial.allow_nontarget_responses){
-        resp_targets = [display_element.querySelector('#jspsych-serial-reaction-time-stimulus-cell-'+trial.target[0]+'-'+trial.target[1])]
-      } else {
-        resp_targets = display_element.querySelectorAll('.jspsych-serial-reaction-time-stimulus-cell');
-      }
-      for(var i=0; i<resp_targets.length; i++){
-        resp_targets[i].addEventListener('mousedown', function(e){
-          if(startTime == -1){
-            return;
-          } else {
-            var info = {}
-            info.row = e.currentTarget.getAttribute('data-row');
-            info.column = e.currentTarget.getAttribute('data-column');
-            info.rt = performance.now() - startTime;
-            after_response(info);
-          }
-        });
-      }
-
-      startTime = performance.now();
-
-      if(trial.fade_duration == null){
-        display_element.querySelector('#jspsych-serial-reaction-time-stimulus-cell-'+trial.target[0]+'-'+trial.target[1]).style.backgroundColor = trial.target_color;
-      } else {
-        display_element.querySelector('#jspsych-serial-reaction-time-stimulus-cell-'+trial.target[0]+'-'+trial.target[1]).style.transition = "background-color "+trial.fade_duration;
-        display_element.querySelector('#jspsych-serial-reaction-time-stimulus-cell-'+trial.target[0]+'-'+trial.target[1]).style.backgroundColor = trial.target_color;
-      }
-
-			if(trial.trial_duration !== null){
-				jsPsych.pluginAPI.setTimeout(endTrial, trial.trial_duration);
-			}
-
-		}
-
-    function endTrial() {
-
-      // kill any remaining setTimeout handlers
-      jsPsych.pluginAPI.clearAllTimeouts();
-
-      // gather the data to store for the trial
-      var trial_data = {
-        rt: response.rt,
-				grid: trial.grid,
-				target: trial.target,
-        response: [parseInt(response.row,10), parseInt(response.column,10)],
-        correct: response.row == trial.target[0] && response.column == trial.target[1]
-      };
-
-      // clear the display
-      display_element.innerHTML = '';
-
-      // move on to the next trial
-      jsPsych.finishTrial(trial_data);
-
-    };
-
-    // function to handle responses by the subject
-    function after_response(info) {
-
-			// only record first response
-      response = response.rt == null ? info : response;
-
-      if (trial.response_ends_trial) {
-        endTrial();
-      }
-    };
-
-  };
-
-  plugin.stimulus = function(grid, square_size, target, target_color, labels) {
-    var stimulus = "<div id='jspsych-serial-reaction-time-stimulus' style='margin:auto; display: table; table-layout: fixed; border-spacing:"+square_size/4+"px'>";
-    for(var i=0; i<grid.length; i++){
-      stimulus += "<div class='jspsych-serial-reaction-time-stimulus-row' style='display:table-row;'>";
-      for(var j=0; j<grid[i].length; j++){
-        var classname = 'jspsych-serial-reaction-time-stimulus-cell';
-
-        stimulus += "<div class='"+classname+"' id='jspsych-serial-reaction-time-stimulus-cell-"+i+"-"+j+"' "+
-          "data-row="+i+" data-column="+j+" "+
-          "style='width:"+square_size+"px; height:"+square_size+"px; display:table-cell; vertical-align:middle; text-align: center; cursor: pointer; font-size:"+square_size/2+"px;";
-        if(grid[i][j] == 1){
-          stimulus += "border: 2px solid black;"
-        }
-        if(typeof target !== 'undefined' && target[0] == i && target[1] == j){
-          stimulus += "background-color: "+target_color+";"
-        }
-        stimulus += "'>";
-        if(typeof labels !=='undefined' && labels[i][j] !== false){
-          stimulus += labels[i][j]
-        }
-        stimulus += "</div>";
-      }
-      stimulus += "</div>";
-    }
-    stimulus += "</div>";
-
-    return stimulus
-  }
-
-  return plugin;
-})();

package/plugins/jspsych-serial-reaction-time.js

@@ -1,247 +0,0 @@
-/**
- * jspsych-serial-reaction-time
- * Josh de Leeuw
- *
- * plugin for running a serial reaction time task
- *
- * documentation: docs.jspsych.org
- *
- **/
-
-jsPsych.plugins["serial-reaction-time"] = (function() {
-
-  var plugin = {};
-
-  plugin.info = {
-    name: 'serial-reaction-time',
-    description: '',
-    parameters: {
-      grid: {
-        type: jsPsych.plugins.parameterType.BOOL,
-        pretty_name: 'Grid',
-        array: true,
-        default: [[1,1,1,1]],
-        description: 'This array represents the grid of boxes shown on the screen.'
-      },
-      target: {
-        type: jsPsych.plugins.parameterType.INT,
-        pretty_name: 'Target',
-        array: true,
-        default: undefined,
-        description: 'The location of the target. The array should be the [row, column] of the target.'
-      },
-      choices: {
-        type: jsPsych.plugins.parameterType.KEY,
-        pretty_name: 'Choices',
-        array: true,
-        default: [['3','5','7','9']],
-        description: ' Each entry in this array is the key that should be pressed for that corresponding location in the grid.'
-      },
-      grid_square_size: {
-        type: jsPsych.plugins.parameterType.INT,
-        pretty_name: 'Grid square size',
-        default: 100,
-        description: 'The width and height in pixels of each square in the grid.'
-      },
-      target_color: {
-        type: jsPsych.plugins.parameterType.STRING,
-        pretty_name: 'Target color',
-        default: "#999",
-        description: 'The color of the target square.'
-      },
-      response_ends_trial: {
-        type: jsPsych.plugins.parameterType.BOOL,
-        pretty_name: 'Response ends trial',
-        default: true,
-        description: 'If true, trial ends when user makes a response.'
-      },
-      pre_target_duration: {
-        type: jsPsych.plugins.parameterType.INT,
-        pretty_name: 'Pre-target duration',
-        default: 0,
-        description: 'The number of milliseconds to display the grid before the target changes color.'
-      },
-      trial_duration: {
-        type: jsPsych.plugins.parameterType.INT,
-        pretty_name: 'Trial duration',
-        default: null,
-        description: 'How long to show the trial.'
-      },
-      show_response_feedback: {
-        type: jsPsych.plugins.parameterType.BOOL,
-        pretty_name: 'Show response feedback',
-        default: false,
-        description: 'If true, show feedback indicating where the user responded and whether it was correct.'
-      },
-      feedback_duration: {
-        type: jsPsych.plugins.parameterType.INT,
-        pretty_name: 'Feedback duration',
-        default: 200,
-        description: 'The length of time in milliseconds to show the feedback.'
-      },
-      fade_duration: {
-        type: jsPsych.plugins.parameterType.INT,
-        pretty_name: 'Fade duration',
-        default: null,
-        description: 'If a positive number, the target will progressively change color at the start of the trial, with the transition lasting this many milliseconds.'
-      },
-      prompt: {
-        type: jsPsych.plugins.parameterType.STRING,
-        pretty_name: 'Prompt',
-        default: null,
-        no_function: false,
-        description: ' Any content here will be displayed below the stimulus.'
-      },
-    }
-  }
-
-  plugin.trial = function(display_element, trial) {
-
-    // create a flattened version of the choices array
-    var flat_choices = jsPsych.utils.flatten(trial.choices);
-    while(flat_choices.indexOf('') > -1){
-      flat_choices.splice(flat_choices.indexOf(''),1);
-    }
-
-    // display stimulus
-    var stimulus = this.stimulus(trial.grid, trial.grid_square_size);
-    display_element.innerHTML = stimulus;
-
-		if(trial.pre_target_duration <= 0){
-			showTarget();
-		} else {
-			jsPsych.pluginAPI.setTimeout(function(){
-				showTarget();
-			}, trial.pre_target_duration);
-		}
-
-		//show prompt if there is one
-    if (trial.prompt !== null) {
-      display_element.innerHTML += trial.prompt;
-    }
-
-		var keyboardListener = {};
-
-    var response = {
-      rt: null,
-      key: false,
-      correct: false
-    }
-
-		function showTarget(){
-      if(trial.fade_duration == null){
-        display_element.querySelector('#jspsych-serial-reaction-time-stimulus-cell-'+trial.target[0]+'-'+trial.target[1]).style.backgroundColor = trial.target_color;
-      } else {
-        display_element.querySelector('#jspsych-serial-reaction-time-stimulus-cell-'+trial.target[0]+'-'+trial.target[1]).style.transition = "background-color "+trial.fade_duration;
-        display_element.querySelector('#jspsych-serial-reaction-time-stimulus-cell-'+trial.target[0]+'-'+trial.target[1]).style.backgroundColor = trial.target_color;
-      }
-
-			keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({
-        callback_function: after_response,
-        valid_responses: flat_choices,
-        allow_held_key: false
-      });
-
-			if(trial.trial_duration > null){
-				jsPsych.pluginAPI.setTimeout(showFeedback, trial.trial_duration);
-			}
-
-		}
-
-    function showFeedback() {
-      if(response.rt == null || trial.show_response_feedback == false){
-        endTrial();
-      } else {
-        var color = response.correct ? '#0f0' : '#f00';
-        display_element.querySelector('#jspsych-serial-reaction-time-stimulus-cell-'+response.responseLoc[0]+'-'+response.responseLoc[1]).style.transition = "";
-        display_element.querySelector('#jspsych-serial-reaction-time-stimulus-cell-'+response.responseLoc[0]+'-'+response.responseLoc[1]).style.backgroundColor = color;
-        jsPsych.pluginAPI.setTimeout(endTrial, trial.feedback_duration);
-      }
-    }
-
-    function endTrial() {
-
-      // kill any remaining setTimeout handlers
-      jsPsych.pluginAPI.clearAllTimeouts();
-
-      // kill keyboard listeners
-      if (typeof keyboardListener !== 'undefined') {
-        jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
-      }
-
-      // gather the data to store for the trial
-      var trial_data = {
-        rt: response.rt,
-        response: response.key,
-				correct: response.correct,
-				grid: trial.grid,
-				target: trial.target
-      };
-
-      // clear the display
-      display_element.innerHTML = '';
-
-      // move on to the next trial
-      jsPsych.finishTrial(trial_data);
-
-    };
-
-    // function to handle responses by the subject
-    function after_response(info) {
-
-			// only record first response
-      response = response.rt == null ? info : response;
-
-			// check if the response is correct
-			var responseLoc = [];
-			for(var i=0; i<trial.choices.length; i++){
-				for(var j=0; j<trial.choices[i].length; j++){
-					var t = trial.choices[i][j];
-					if(jsPsych.pluginAPI.compareKeys(info.key, t)){
-						responseLoc = [i,j];
-						break;
-					}
-				}
-			}
-      response.responseLoc = responseLoc;
-			response.correct = (JSON.stringify(responseLoc) == JSON.stringify(trial.target));
-
-			if (trial.response_ends_trial) {
-        if (trial.show_response_feedback){
-  				showFeedback(response.correct);
-  			} else {
-          endTrial();
-        }
-      }
-    };
-
-  };
-
-  plugin.stimulus = function(grid, square_size, target, target_color, labels) {
-    var stimulus = "<div id='jspsych-serial-reaction-time-stimulus' style='margin:auto; display: table; table-layout: fixed; border-spacing:"+square_size/4+"px'>";
-    for(var i=0; i<grid.length; i++){
-      stimulus += "<div class='jspsych-serial-reaction-time-stimulus-row' style='display:table-row;'>";
-      for(var j=0; j<grid[i].length; j++){
-        stimulus += "<div class='jspsych-serial-reaction-time-stimulus-cell' id='jspsych-serial-reaction-time-stimulus-cell-"+i+"-"+j+"' "+
-         "style='width:"+square_size+"px; height:"+square_size+"px; display:table-cell; vertical-align:middle; text-align: center; font-size:"+square_size/2+"px;";
-        if(grid[i][j] == 1){
-          stimulus += "border: 2px solid black;"
-        }
-        if(typeof target !== 'undefined' && target[0] == i && target[1] == j){
-          stimulus += "background-color: "+target_color+";"
-        }
-        stimulus += "'>";
-        if(typeof labels !=='undefined' && labels[i][j] !== false){
-          stimulus += labels[i][j]
-        }
-        stimulus += "</div>";
-      }
-      stimulus += "</div>";
-    }
-    stimulus += "</div>";
-
-    return stimulus
-  }
-
-  return plugin;
-})();

package/plugins/jspsych-survey-html-form.js

@@ -1,171 +0,0 @@
-/**
- * jspsych-survey-html-form
- * a jspsych plugin for free html forms
- *
- * Jan Simson
- *
- * documentation: docs.jspsych.org
- *
- */
-
-jsPsych.plugins['survey-html-form'] = (function() {
-
-  var plugin = {};
-
-  plugin.info = {
-    name: 'survey-html-form',
-    description: '',
-    parameters: {
-      html: {
-        type: jsPsych.plugins.parameterType.HTML_STRING,
-        pretty_name: 'HTML',
-        default: null,
-        description: 'HTML formatted string containing all the input elements to display. Every element has to have its own distinctive name attribute. The <form> tag must not be included and is generated by the plugin.'
-      },
-      preamble: {
-        type: jsPsych.plugins.parameterType.STRING,
-        pretty_name: 'Preamble',
-        default: null,
-        description: 'HTML formatted string to display at the top of the page above all the questions.'
-      },
-      button_label: {
-        type: jsPsych.plugins.parameterType.STRING,
-        pretty_name: 'Button label',
-        default:  'Continue',
-        description: 'The text that appears on the button to finish the trial.'
-      },
-      autofocus: {
-        type: jsPsych.plugins.parameterType.STRING,
-        pretty_name: 'Element ID to focus',
-        default: '',
-        description: 'The HTML element ID of a form field to autofocus on.'
-      },
-      dataAsArray: {
-        type: jsPsych.plugins.parameterType.BOOLEAN,
-        pretty_name: 'Data As Array',
-        default:  false,
-        description: 'Retrieve the data as an array e.g. [{name: "INPUT_NAME", value: "INPUT_VALUE"}, ...] instead of an object e.g. {INPUT_NAME: INPUT_VALUE, ...}.'
-      },
-      autocomplete: {
-        type: jsPsych.plugins.parameterType.BOOL,
-        pretty_name: 'Allow autocomplete',
-        default: false,
-        description: "Setting this to true will enable browser auto-complete or auto-fill for the form."
-      }
-    }
-  }
-
-  plugin.trial = function(display_element, trial) {
-
-    var html = '';
-    // show preamble text
-    if(trial.preamble !== null){
-      html += '<div id="jspsych-survey-html-form-preamble" class="jspsych-survey-html-form-preamble">'+trial.preamble+'</div>';
-    }
-    // start form
-    if ( trial.autocomplete ) {
-      html += '<form id="jspsych-survey-html-form">'
-    } else {
-      html += '<form id="jspsych-survey-html-form" autocomplete="off">'
-    }
-
-    // add form HTML / input elements
-    html += trial.html;
-
-    // add submit button
-    html += '<input type="submit" id="jspsych-survey-html-form-next" class="jspsych-btn jspsych-survey-html-form" value="'+trial.button_label+'"></input>';
-
-    html += '</form>';
-    display_element.innerHTML = html;
-
-    if ( trial.autofocus !== '' ) {
-      var focus_elements = display_element.querySelectorAll('#'+trial.autofocus);
-      if ( focus_elements.length === 0 ) {
-	      console.warn('No element found with id: '+trial.autofocus);
-      } else if ( focus_elements.length > 1 ) {
-	      console.warn('The id "'+trial.autofocus+'" is not unique so autofocus will not work.');
-      } else {
-	      focus_elements[0].focus();
-      }
-    }
-
-    display_element.querySelector('#jspsych-survey-html-form').addEventListener('submit', function(event) {
-      // don't submit form
-      event.preventDefault();
-
-      // measure response time
-      var endTime = performance.now();
-      var response_time = endTime - startTime;
-
-      var question_data = serializeArray(this);
-
-      if (!trial.dataAsArray) {
-        question_data = objectifyForm(question_data);
-      }
-
-      // save data
-      var trialdata = {
-        rt: response_time,
-        response: question_data
-      };
-
-      display_element.innerHTML = '';
-
-      // next trial
-      jsPsych.finishTrial(trialdata);
-    });
-
-    var startTime = performance.now();
-  };
-
-  /*!
-   * Serialize all form data into an array
-   * (c) 2018 Chris Ferdinandi, MIT License, https://gomakethings.com
-   * @param  {Node}   form The form to serialize
-   * @return {String}      The serialized form data
-   */
-  var serializeArray = function (form) {
-    // Setup our serialized data
-    var serialized = [];
-
-    // Loop through each field in the form
-    for (var i = 0; i < form.elements.length; i++) {
-      var field = form.elements[i];
-
-      // Don't serialize fields without a name, submits, buttons, file and reset inputs, and disabled fields
-      if (!field.name || field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') continue;
-
-      // If a multi-select, get all selections
-      if (field.type === 'select-multiple') {
-        for (var n = 0; n < field.options.length; n++) {
-          if (!field.options[n].selected) continue;
-          serialized.push({
-            name: field.name,
-            value: field.options[n].value
-          });
-        }
-      }
-
-      // Convert field data to a query string
-      else if ((field.type !== 'checkbox' && field.type !== 'radio') || field.checked) {
-        serialized.push({
-          name: field.name,
-          value: field.value
-        });
-      }
-    }
-
-    return serialized;
-  };
-
-  // from https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery
-  function objectifyForm(formArray) {//serialize data function
-    var returnArray = {};
-    for (var i = 0; i < formArray.length; i++){
-      returnArray[formArray[i]['name']] = formArray[i]['value'];
-    }
-    return returnArray;
-  }
-
-  return plugin;
-})();