@jspsych/plugin-survey-html-form/dist/index.cjs

a jspsych plugin for free html forms

'use strict';

var jspsych = require('jspsych');

var version = "2.1.0";

const info = {
  name: "survey-html-form",
  version,
  parameters: {
    /** 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. */
    html: {
      type: jspsych.ParameterType.HTML_STRING,
      default: null
    },
    /** HTML formatted string to display at the top of the page above all the questions. */
    preamble: {
      type: jspsych.ParameterType.HTML_STRING,
      default: null
    },
    /** The text that appears on the button to finish the trial. */
    button_label: {
      type: jspsych.ParameterType.STRING,
      default: "Continue"
    },
    /** The HTML element ID of a form field to autofocus on. */
    autofocus: {
      type: jspsych.ParameterType.STRING,
      default: ""
    },
    /** Retrieve the data as an array e.g. [{name: "INPUT_NAME", value: "INPUT_VALUE"}, ...] instead of an object e.g. {INPUT_NAME: INPUT_VALUE, ...}. */
    dataAsArray: {
      type: jspsych.ParameterType.BOOL,
      default: false
    },
    /** Setting this to true will enable browser auto-complete or auto-fill for the form. */
    autocomplete: {
      type: jspsych.ParameterType.BOOL,
      default: false
    }
  },
  data: {
    /**  An object containing the response for each input. The object will have a separate key (variable) for the response to each input, with each variable being named after its corresponding input element. Each response is a string containing whatever the participant answered for this particular input. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */
    response: {
      type: jspsych.ParameterType.OBJECT
    },
    /** The response time in milliseconds for the participant to make a response. */
    rt: {
      type: jspsych.ParameterType.INT
    }
  },
  // prettier-ignore
  citations: {
    "apa": "de Leeuw, J. R., Gilbert, R. A., & Luchterhandt, B. (2023). jsPsych: Enabling an Open-Source Collaborative Ecosystem of Behavioral Experiments. Journal of Open Source Software, 8(85), 5351. https://doi.org/10.21105/joss.05351 ",
    "bibtex": '@article{Leeuw2023jsPsych, 	author = {de Leeuw, Joshua R. and Gilbert, Rebecca A. and Luchterhandt, Bj{\\" o}rn}, 	journal = {Journal of Open Source Software}, 	doi = {10.21105/joss.05351}, 	issn = {2475-9066}, 	number = {85}, 	year = {2023}, 	month = {may 11}, 	pages = {5351}, 	publisher = {Open Journals}, 	title = {jsPsych: Enabling an {Open}-{Source} {Collaborative} {Ecosystem} of {Behavioral} {Experiments}}, 	url = {https://joss.theoj.org/papers/10.21105/joss.05351}, 	volume = {8}, }  '
  }
};
class SurveyHtmlFormPlugin {
  constructor(jsPsych) {
    this.jsPsych = jsPsych;
  }
  static {
    this.info = info;
  }
  trial(display_element, trial) {
    var html = "";
    if (trial.preamble !== null) {
      html += '<div id="jspsych-survey-html-form-preamble" class="jspsych-survey-html-form-preamble">' + trial.preamble + "</div>";
    }
    if (trial.autocomplete) {
      html += '<form id="jspsych-survey-html-form">';
    } else {
      html += '<form id="jspsych-survey-html-form" autocomplete="off">';
    }
    html += trial.html;
    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", (event) => {
      event.preventDefault();
      var endTime = performance.now();
      var response_time = Math.round(endTime - startTime);
      var this_form = display_element.querySelector("#jspsych-survey-html-form");
      var question_data = serializeArray(this_form);
      if (!trial.dataAsArray) {
        question_data = objectifyForm(question_data);
      }
      var trialdata = {
        rt: response_time,
        response: question_data
      };
      this.jsPsych.finishTrial(trialdata);
    });
    var startTime = performance.now();
    function serializeArray(form) {
      var serialized = [];
      for (var i = 0; i < form.elements.length; i++) {
        var field = form.elements[i];
        if (!field.name || field.disabled || field.type === "file" || field.type === "reset" || field.type === "submit" || field.type === "button")
          continue;
        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
            });
          }
        } else if (field.type !== "checkbox" && field.type !== "radio" || field.checked) {
          serialized.push({
            name: field.name,
            value: field.value
          });
        }
      }
      return serialized;
    }
    function objectifyForm(formArray) {
      var returnArray = {};
      for (var i = 0; i < formArray.length; i++) {
        returnArray[formArray[i]["name"]] = formArray[i]["value"];
      }
      return returnArray;
    }
  }
}

module.exports = SurveyHtmlFormPlugin;
//# sourceMappingURL=index.cjs.map