jspsych 6.2.0 → 7.1.0

package/plugins/jspsych-survey-likert.js

@@ -1,195 +0,0 @@
-/**
- * jspsych-survey-likert
- * a jspsych plugin for measuring items on a likert scale
- *
- * Josh de Leeuw
- *
- * documentation: docs.jspsych.org
- *
- */
-
-jsPsych.plugins['survey-likert'] = (function() {
-
-  var plugin = {};
-
-  plugin.info = {
-    name: 'survey-likert',
-    description: '',
-    parameters: {
-      questions: {
-        type: jsPsych.plugins.parameterType.COMPLEX,
-        array: true,
-        pretty_name: 'Questions',
-        nested: {
-          prompt: {
-            type: jsPsych.plugins.parameterType.STRING,
-            pretty_name: 'Prompt',
-            default: undefined,
-            description: 'Questions that are associated with the slider.'
-          },
-          labels: {
-            type: jsPsych.plugins.parameterType.STRING,
-            array: true,
-            pretty_name: 'Labels',
-            default: undefined,
-            description: 'Labels to display for individual question.'
-          },
-          required: {
-            type: jsPsych.plugins.parameterType.BOOL,
-            pretty_name: 'Required',
-            default: false,
-            description: 'Makes answering the question required.'
-          },
-          name: {
-            type: jsPsych.plugins.parameterType.STRING,
-            pretty_name: 'Question Name',
-            default: '',
-            description: 'Controls the name of data values associated with this question'
-          }
-        }
-      },
-      randomize_question_order: {
-        type: jsPsych.plugins.parameterType.BOOL,
-        pretty_name: 'Randomize Question Order',
-        default: false,
-        description: 'If true, the order of the questions will be randomized'
-      },
-      preamble: {
-        type: jsPsych.plugins.parameterType.STRING,
-        pretty_name: 'Preamble',
-        default: null,
-        description: 'String to display at top of the page.'
-      },
-      scale_width: {
-        type: jsPsych.plugins.parameterType.INT,
-        pretty_name: 'Scale width',
-        default: null,
-        description: 'Width of the likert scales in pixels.'
-      },
-      button_label: {
-        type: jsPsych.plugins.parameterType.STRING,
-        pretty_name: 'Button label',
-        default:  'Continue',
-        description: 'Label of the button.'
-      },
-      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) {
-
-    if(trial.scale_width !== null){
-      var w = trial.scale_width + 'px';
-    } else {
-      var w = '100%';
-    }
-
-    var html = "";
-    // inject CSS for trial
-    html += '<style id="jspsych-survey-likert-css">';
-    html += ".jspsych-survey-likert-statement { display:block; font-size: 16px; padding-top: 40px; margin-bottom:10px; }"+
-      ".jspsych-survey-likert-opts { list-style:none; width:"+w+"; margin:auto; padding:0 0 35px; display:block; font-size: 14px; line-height:1.1em; }"+
-      ".jspsych-survey-likert-opt-label { line-height: 1.1em; color: #444; }"+
-      ".jspsych-survey-likert-opts:before { content: ''; position:relative; top:11px; /*left:9.5%;*/ display:block; background-color:#efefef; height:4px; width:100%; }"+
-      ".jspsych-survey-likert-opts:last-of-type { border-bottom: 0; }"+
-      ".jspsych-survey-likert-opts li { display:inline-block; /*width:19%;*/ text-align:center; vertical-align: top; }"+
-      ".jspsych-survey-likert-opts li input[type=radio] { display:block; position:relative; top:0; left:50%; margin-left:-6px; }"
-    html += '</style>';
-
-    // show preamble text
-    if(trial.preamble !== null){
-      html += '<div id="jspsych-survey-likert-preamble" class="jspsych-survey-likert-preamble">'+trial.preamble+'</div>';
-    }
-
-    if ( trial.autocomplete ) {
-      html += '<form id="jspsych-survey-likert-form">';
-    } else {
-      html += '<form id="jspsych-survey-likert-form" autocomplete="off">';
-    }
-
-    // add likert scale questions ///
-    // generate question order. this is randomized here as opposed to randomizing the order of trial.questions
-    // so that the data are always associated with the same question regardless of order
-    var question_order = [];
-    for(var i=0; i<trial.questions.length; i++){
-      question_order.push(i);
-    }
-    if(trial.randomize_question_order){
-      question_order = jsPsych.randomization.shuffle(question_order);
-    }
-    
-    for (var i = 0; i < trial.questions.length; i++) {
-      var question = trial.questions[question_order[i]];
-      // add question
-      html += '<label class="jspsych-survey-likert-statement">' + question.prompt + '</label>';
-      // add options
-      var width = 100 / question.labels.length;
-      var options_string = '<ul class="jspsych-survey-likert-opts" data-name="'+question.name+'" data-radio-group="Q' + question_order[i] + '">';
-      for (var j = 0; j < question.labels.length; j++) {
-        options_string += '<li style="width:' + width + '%"><label class="jspsych-survey-likert-opt-label"><input type="radio" name="Q' + question_order[i] + '" value="' + j + '"';
-        if(question.required){
-          options_string += ' required';
-        }
-        options_string += '>' + question.labels[j] + '</label></li>';
-      }
-      options_string += '</ul>';
-      html += options_string;
-    }
-
-    // add submit button
-    html += '<input type="submit" id="jspsych-survey-likert-next" class="jspsych-survey-likert jspsych-btn" value="'+trial.button_label+'"></input>';
-
-    html += '</form>'
-
-    display_element.innerHTML = html;
-
-    display_element.querySelector('#jspsych-survey-likert-form').addEventListener('submit', function(e){
-      e.preventDefault();
-      // measure response time
-      var endTime = performance.now();
-      var response_time = endTime - startTime;
-
-      // create object to hold responses
-      var question_data = {};
-      var matches = display_element.querySelectorAll('#jspsych-survey-likert-form .jspsych-survey-likert-opts');
-      for(var index = 0; index < matches.length; index++){
-        var id = matches[index].dataset['radioGroup'];
-        var el = display_element.querySelector('input[name="' + id + '"]:checked');
-        if (el === null) {
-          var response = "";
-        } else {
-          var response = parseInt(el.value);
-        }
-        var obje = {};
-        if(matches[index].attributes['data-name'].value !== ''){
-          var name = matches[index].attributes['data-name'].value;
-        } else {
-          var name = id;
-        }
-        obje[name] = response;
-        Object.assign(question_data, obje);
-      }
-
-      // save data
-      var trial_data = {
-        "rt": response_time,
-        "responses": JSON.stringify(question_data),
-        "question_order": JSON.stringify(question_order)
-      };
-
-      display_element.innerHTML = '';
-
-      // next trial
-      jsPsych.finishTrial(trial_data);
-    });
-
-    var startTime = performance.now();
-  };
-
-  return plugin;
-})();

package/plugins/jspsych-survey-multi-choice.js

@@ -1,208 +0,0 @@
-/**
- * jspsych-survey-multi-choice
- * a jspsych plugin for multiple choice survey questions
- *
- * Shane Martin
- *
- * documentation: docs.jspsych.org
- *
- */
-
-
-jsPsych.plugins['survey-multi-choice'] = (function() {
-  var plugin = {};
-
-  plugin.info = {
-    name: 'survey-multi-choice',
-    description: '',
-    parameters: {
-      questions: {
-        type: jsPsych.plugins.parameterType.COMPLEX,
-        array: true,
-        pretty_name: 'Questions',
-        nested: {
-          prompt: {
-            type: jsPsych.plugins.parameterType.STRING,
-            pretty_name: 'Prompt',
-            default: undefined,
-            description: 'The strings that will be associated with a group of options.'
-          },
-          options: {
-            type: jsPsych.plugins.parameterType.STRING,
-            pretty_name: 'Options',
-            array: true,
-            default: undefined,
-            description: 'Displays options for an individual question.'
-          },
-          required: {
-            type: jsPsych.plugins.parameterType.BOOL,
-            pretty_name: 'Required',
-            default: false,
-            description: 'Subject will be required to pick an option for each question.'
-          },
-          horizontal: {
-            type: jsPsych.plugins.parameterType.BOOL,
-            pretty_name: 'Horizontal',
-            default: false,
-            description: 'If true, then questions are centered and options are displayed horizontally.'
-          },
-          name: {
-            type: jsPsych.plugins.parameterType.STRING,
-            pretty_name: 'Question Name',
-            default: '',
-            description: 'Controls the name of data values associated with this question'
-          }
-        }
-      },
-      randomize_question_order: {
-        type: jsPsych.plugins.parameterType.BOOL,
-        pretty_name: 'Randomize Question Order',
-        default: false,
-        description: 'If true, the order of the questions will be randomized'
-      },
-      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: 'Label of the button.'
-      },
-      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 plugin_id_name = "jspsych-survey-multi-choice";
-
-    var html = "";
-
-    // inject CSS for trial
-    html += '<style id="jspsych-survey-multi-choice-css">';
-    html += ".jspsych-survey-multi-choice-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }"+
-      ".jspsych-survey-multi-choice-text span.required {color: darkred;}"+
-      ".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-text {  text-align: center;}"+
-      ".jspsych-survey-multi-choice-option { line-height: 2; }"+
-      ".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-option {  display: inline-block;  margin-left: 1em;  margin-right: 1em;  vertical-align: top;}"+
-      "label.jspsych-survey-multi-choice-text input[type='radio'] {margin-right: 1em;}";
-    html += '</style>';
-
-    // show preamble text
-    if(trial.preamble !== null){
-      html += '<div id="jspsych-survey-multi-choice-preamble" class="jspsych-survey-multi-choice-preamble">'+trial.preamble+'</div>';
-    }
-
-    // form element
-    if ( trial.autocomplete ) {
-    	html += '<form id="jspsych-survey-multi-choice-form">';
-    } else {
-    	html += '<form id="jspsych-survey-multi-choice-form" autocomplete="off">';
-    }
-    // generate question order. this is randomized here as opposed to randomizing the order of trial.questions
-    // so that the data are always associated with the same question regardless of order
-    var question_order = [];
-    for(var i=0; i<trial.questions.length; i++){
-      question_order.push(i);
-    }
-    if(trial.randomize_question_order){
-      question_order = jsPsych.randomization.shuffle(question_order);
-    }
-    
-    // add multiple-choice questions
-    for (var i = 0; i < trial.questions.length; i++) {
-      
-      // get question based on question_order
-      var question = trial.questions[question_order[i]];
-      var question_id = question_order[i];
-      
-      // create question container
-      var question_classes = ['jspsych-survey-multi-choice-question'];
-      if (question.horizontal) {
-        question_classes.push('jspsych-survey-multi-choice-horizontal');
-      }
-
-      html += '<div id="jspsych-survey-multi-choice-'+question_id+'" class="'+question_classes.join(' ')+'"  data-name="'+question.name+'">';
-
-      // add question text
-      html += '<p class="jspsych-survey-multi-choice-text survey-multi-choice">' + question.prompt 
-      if(question.required){
-        html += "<span class='required'>*</span>";
-      }
-      html += '</p>';
-
-      // create option radio buttons
-      for (var j = 0; j < question.options.length; j++) {
-        // add label and question text
-        var option_id_name = "jspsych-survey-multi-choice-option-"+question_id+"-"+j;
-        var input_name = 'jspsych-survey-multi-choice-response-'+question_id;
-        var input_id = 'jspsych-survey-multi-choice-response-'+question_id+'-'+j;
-
-        var required_attr = question.required ? 'required' : '';
-
-        // add radio button container
-        html += '<div id="'+option_id_name+'" class="jspsych-survey-multi-choice-option">';
-        html += '<label class="jspsych-survey-multi-choice-text" for="'+input_id+'">';
-        html += '<input type="radio" name="'+input_name+'" id="'+input_id+'" value="'+question.options[j]+'" '+required_attr+'></input>';
-        html += question.options[j]+'</label>';
-        html += '</div>';
-      }
-
-      html += '</div>';
-    }
-    
-    // add submit button
-    html += '<input type="submit" id="'+plugin_id_name+'-next" class="'+plugin_id_name+' jspsych-btn"' + (trial.button_label ? ' value="'+trial.button_label + '"': '') + '></input>';
-    html += '</form>';
-
-    // render
-    display_element.innerHTML = html;
-
-    document.querySelector('form').addEventListener('submit', function(event) {
-      event.preventDefault();
-      // measure response time
-      var endTime = performance.now();
-      var response_time = endTime - startTime;
-
-      // create object to hold responses
-      var question_data = {};
-      for(var i=0; i<trial.questions.length; i++){
-        var match = display_element.querySelector('#jspsych-survey-multi-choice-'+i);
-        var id = "Q" + i;
-        if(match.querySelector("input[type=radio]:checked") !== null){
-          var val = match.querySelector("input[type=radio]:checked").value;
-        } else {
-          var val = "";
-        }
-        var obje = {};
-        var name = id;
-        if(match.attributes['data-name'].value !== ''){
-          name = match.attributes['data-name'].value;
-        }
-        obje[name] = val;
-        Object.assign(question_data, obje);
-      }
-      // save data
-      var trial_data = {
-        "rt": response_time,
-        "responses": JSON.stringify(question_data),
-        "question_order": JSON.stringify(question_order)
-      };
-      display_element.innerHTML = '';
-
-      // next trial
-      jsPsych.finishTrial(trial_data);
-    });
-
-    var startTime = performance.now();
-  };
-
-  return plugin;
-})();

package/plugins/jspsych-survey-multi-select.js

@@ -1,232 +0,0 @@
-/**
- * jspsych-survey-multi-select
- * a jspsych plugin for multiple choice survey questions
- *
- * documentation: docs.jspsych.org
- *
- */
-
-
-jsPsych.plugins['survey-multi-select'] = (function() {
-  var plugin = {};
-
-  plugin.info = {
-    name: 'survey-multi-select',
-    description: '',
-    parameters: {
-      questions: {
-        type: jsPsych.plugins.parameterType.COMPLEX,
-        array: true,
-        pretty_name: 'Questions',
-        nested: {
-          prompt: {
-            type: jsPsych.plugins.parameterType.STRING,
-            pretty_name: 'Prompt',
-            default: undefined,
-            description: 'The strings that will be associated with a group of options.'
-          },
-          options: {
-            type: jsPsych.plugins.parameterType.STRING,
-            pretty_name: 'Options',
-            array: true,
-            default: undefined,
-            description: 'Displays options for an individual question.'
-          },
-          horizontal: {
-            type: jsPsych.plugins.parameterType.BOOL,
-            pretty_name: 'Horizontal',
-            default: false,
-            description: 'If true, then questions are centered and options are displayed horizontally.'
-          },
-          required: {
-            type: jsPsych.plugins.parameterType.BOOL,
-            pretty_name: 'Required',
-            default: false,
-            description: 'Subject will be required to pick at least one option for this question.'
-          },
-          name: {
-            type: jsPsych.plugins.parameterType.STRING,
-            pretty_name: 'Question Name',
-            default: '',
-            description: 'Controls the name of data values associated with this question'
-          }
-        }
-      },
-      randomize_question_order: {
-        type: jsPsych.plugins.parameterType.BOOL,
-        pretty_name: 'Randomize Question Order',
-        default: false,
-        description: 'If true, the order of the questions will be randomized'
-      },
-      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: 'Label of the button.'
-      },
-      required_message: {
-        type: jsPsych.plugins.parameterType.STRING,
-        pretty_name: 'Required message',
-        default: 'You must choose at least one response for this question',
-        description: 'Message that will be displayed if required question is not answered.'
-      },
-      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 plugin_id_name = "jspsych-survey-multi-select";
-    var plugin_id_selector = '#' + plugin_id_name;
-    var _join = function( /*args*/ ) {
-      var arr = Array.prototype.slice.call(arguments, _join.length);
-      return arr.join(separator = '-');
-    }
-
-    // inject CSS for trial
-    var cssstr = ".jspsych-survey-multi-select-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }"+
-      ".jspsych-survey-multi-select-text span.required {color: darkred;}"+
-      ".jspsych-survey-multi-select-horizontal .jspsych-survey-multi-select-text {  text-align: center;}"+
-      ".jspsych-survey-multi-select-option { line-height: 2; }"+
-      ".jspsych-survey-multi-select-horizontal .jspsych-survey-multi-select-option {  display: inline-block;  margin-left: 1em;  margin-right: 1em;  vertical-align: top;}"+
-      "label.jspsych-survey-multi-select-text input[type='checkbox'] {margin-right: 1em;}"
-    display_element.innerHTML = '<style id="jspsych-survey-multi-select-css">' + cssstr + '</style>';
-    
-    // form element
-    var trial_form_id = _join(plugin_id_name, "form");
-    display_element.innerHTML += '<form id="'+trial_form_id+'"></form>';
-    var trial_form = display_element.querySelector("#" + trial_form_id);
-    if ( !trial.autocomplete ) {
-        trial_form.setAttribute('autocomplete',"off");
-    }
-    // show preamble text
-    var preamble_id_name = _join(plugin_id_name, 'preamble');
-    if(trial.preamble !== null){
-      trial_form.innerHTML += '<div id="'+preamble_id_name+'" class="'+preamble_id_name+'">'+trial.preamble+'</div>';
-    }
-    // generate question order. this is randomized here as opposed to randomizing the order of trial.questions
-    // so that the data are always associated with the same question regardless of order
-    var question_order = [];
-    for(var i=0; i<trial.questions.length; i++){
-      question_order.push(i);
-    }
-    if(trial.randomize_question_order){
-      question_order = jsPsych.randomization.shuffle(question_order);
-    }
-    // add multiple-select questions
-    for (var i = 0; i < trial.questions.length; i++) {
-      var question = trial.questions[question_order[i]];
-      var question_id = question_order[i];
-      // create question container
-      var question_classes = [_join(plugin_id_name, 'question')];
-      if (question.horizontal) {
-        question_classes.push(_join(plugin_id_name, 'horizontal'));
-      }
-
-      trial_form.innerHTML += '<div id="'+_join(plugin_id_name, question_id)+'" data-name="'+question.name+'" class="'+question_classes.join(' ')+'"></div>';
-
-      var question_selector = _join(plugin_id_selector, question_id);
-
-      // add question text
-      display_element.querySelector(question_selector).innerHTML += '<p id="survey-question" class="' + plugin_id_name + '-text survey-multi-select">' + question.prompt + '</p>';
-
-      // create option check boxes
-      for (var j = 0; j < question.options.length; j++) {
-        var option_id_name = _join(plugin_id_name, "option", question_id, j);
-
-        // add check box container
-        display_element.querySelector(question_selector).innerHTML += '<div id="'+option_id_name+'" class="'+_join(plugin_id_name, 'option')+'"></div>';
-
-        // add label and question text
-        var form = document.getElementById(option_id_name)
-        var input_name = _join(plugin_id_name, 'response', question_id);
-        var input_id = _join(plugin_id_name, 'response', question_id, j);
-        var label = document.createElement('label');
-        label.setAttribute('class', plugin_id_name+'-text');
-        label.innerHTML = question.options[j];
-        label.setAttribute('for', input_id)
-
-        // create checkboxes
-        var input = document.createElement('input');
-        input.setAttribute('type', "checkbox");
-        input.setAttribute('name', input_name);
-        input.setAttribute('id', input_id);
-        input.setAttribute('value', question.options[j])
-        form.appendChild(label)
-        label.insertBefore(input, label.firstChild)
-      }
-    }
-    // add submit button
-    trial_form.innerHTML += '<div class="fail-message"></div>'
-    trial_form.innerHTML += '<button id="'+plugin_id_name+'-next" class="'+plugin_id_name+' jspsych-btn">'+trial.button_label+'</button>';
-
-    // validation check on the data first for custom validation handling
-    // then submit the form
-    display_element.querySelector('#jspsych-survey-multi-select-next').addEventListener('click', function(){
-      for(var i=0; i<trial.questions.length; i++){
-        if(trial.questions[i].required){
-          if(display_element.querySelector('#jspsych-survey-multi-select-'+i+' input:checked') == null){
-            display_element.querySelector('#jspsych-survey-multi-select-'+i+' input').setCustomValidity(trial.required_message);
-          } else {
-            display_element.querySelector('#jspsych-survey-multi-select-'+i+' input').setCustomValidity('');
-          }
-        }
-      }
-      trial_form.reportValidity();
-    })
-
-    trial_form.addEventListener('submit', function(event) {
-      event.preventDefault();
-      // measure response time
-      var endTime = performance.now();
-      var response_time = endTime - startTime;
-
-      // create object to hold responses
-      var question_data = {};
-      var has_response = [];
-      for(var index=0; index<trial.questions.length; index++){
-        var match = display_element.querySelector('#jspsych-survey-multi-select-'+index);
-        var val = [];
-        var inputboxes = match.querySelectorAll("input[type=checkbox]:checked")
-        for(var j=0; j<inputboxes.length; j++){
-          currentChecked = inputboxes[j];
-          val.push(currentChecked.value)
-        }
-        var id = 'Q' + index
-        var obje = {};
-        var name = id;
-        if(match.attributes['data-name'].value !== ''){
-          name = match.attributes['data-name'].value;
-        }
-        obje[name] = val;
-        Object.assign(question_data, obje);
-        if(val.length == 0){ has_response.push(false); } else { has_response.push(true); }
-      }
-
-      // save data
-      var trial_data = {
-        "rt": response_time,
-        "responses": JSON.stringify(question_data),
-        "question_order": JSON.stringify(question_order)
-      };
-      display_element.innerHTML = '';
-
-      // next trial
-      jsPsych.finishTrial(trial_data);
-      
-    });
-
-    var startTime = performance.now();
-  };
-
-  return plugin;
-})();