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

a jspsych plugin for free html forms

{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"survey-html-form\",\n  version: version,\n  parameters: {\n    /** 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. */\n    html: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** HTML formatted string to display at the top of the page above all the questions. */\n    preamble: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** The text that appears on the button to finish the trial. */\n    button_label: {\n      type: ParameterType.STRING,\n      default: \"Continue\",\n    },\n    /** The HTML element ID of a form field to autofocus on. */\n    autofocus: {\n      type: ParameterType.STRING,\n      default: \"\",\n    },\n    /** Retrieve the data as an array e.g. [{name: \"INPUT_NAME\", value: \"INPUT_VALUE\"}, ...] instead of an object e.g. {INPUT_NAME: INPUT_VALUE, ...}. */\n    dataAsArray: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n    /** Setting this to true will enable browser auto-complete or auto-fill for the form. */\n    autocomplete: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n  },\n  data: {\n    /**  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. */\n    response: {\n      type: ParameterType.COMPLEX,\n      nested: {\n        identifier: {\n          type: ParameterType.STRING,\n        },\n        response: {\n          type:\n            ParameterType.STRING |\n            ParameterType.INT |\n            ParameterType.FLOAT |\n            ParameterType.BOOL |\n            ParameterType.OBJECT,\n        },\n      },\n    },\n    /** The response time in milliseconds for the participant to make a response. */\n    rt: {\n      type: ParameterType.INT,\n    },\n  },\n};\n\ntype Info = typeof info;\n\n/**\n *\n * The survey-html-form plugin displays a set of `<inputs>` from a HTML string. The type of input can be freely\n * chosen, for a list of possible input types see the [MDN page on inputs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).\n * The participant provides answers to the input fields.\n * @author Jan Simson\n * @see {@link https://www.jspsych.org/latest/plugins/survey-html-form/ survey-html-form plugin documentation on jspsych.org}\n */\nclass SurveyHtmlFormPlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var html = \"\";\n    // show preamble text\n    if (trial.preamble !== null) {\n      html +=\n        '<div id=\"jspsych-survey-html-form-preamble\" class=\"jspsych-survey-html-form-preamble\">' +\n        trial.preamble +\n        \"</div>\";\n    }\n    // start form\n    if (trial.autocomplete) {\n      html += '<form id=\"jspsych-survey-html-form\">';\n    } else {\n      html += '<form id=\"jspsych-survey-html-form\" autocomplete=\"off\">';\n    }\n\n    // add form HTML / input elements\n    html += trial.html;\n\n    // add submit button\n    html +=\n      '<input type=\"submit\" id=\"jspsych-survey-html-form-next\" class=\"jspsych-btn jspsych-survey-html-form\" value=\"' +\n      trial.button_label +\n      '\"></input>';\n\n    html += \"</form>\";\n    display_element.innerHTML = html;\n\n    if (trial.autofocus !== \"\") {\n      var focus_elements = display_element.querySelectorAll<HTMLInputElement>(\n        \"#\" + trial.autofocus\n      );\n      if (focus_elements.length === 0) {\n        console.warn(\"No element found with id: \" + trial.autofocus);\n      } else if (focus_elements.length > 1) {\n        console.warn('The id \"' + trial.autofocus + '\" is not unique so autofocus will not work.');\n      } else {\n        focus_elements[0].focus();\n      }\n    }\n\n    display_element\n      .querySelector(\"#jspsych-survey-html-form\")\n      .addEventListener(\"submit\", (event) => {\n        // don't submit form\n        event.preventDefault();\n\n        // measure response time\n        var endTime = performance.now();\n        var response_time = Math.round(endTime - startTime);\n\n        var this_form = display_element.querySelector(\"#jspsych-survey-html-form\");\n        var question_data = serializeArray(this_form);\n\n        if (!trial.dataAsArray) {\n          question_data = objectifyForm(question_data);\n        }\n\n        // save data\n        var trialdata = {\n          rt: response_time,\n          response: question_data,\n        };\n\n        // next trial\n        this.jsPsych.finishTrial(trialdata);\n      });\n\n    var startTime = performance.now();\n\n    /**\n     * Serialize all form data into an array\n     * @copyright (c) 2018 Chris Ferdinandi, MIT License, https://gomakethings.com\n     * @param  {Node}   form The form to serialize\n     * @return {String}      The serialized form data\n     */\n    function serializeArray(form) {\n      // Setup our serialized data\n      var serialized = [];\n\n      // Loop through each field in the form\n      for (var i = 0; i < form.elements.length; i++) {\n        var field = form.elements[i];\n\n        // Don't serialize fields without a name, submits, buttons, file and reset inputs, and disabled fields\n        if (\n          !field.name ||\n          field.disabled ||\n          field.type === \"file\" ||\n          field.type === \"reset\" ||\n          field.type === \"submit\" ||\n          field.type === \"button\"\n        )\n          continue;\n\n        // If a multi-select, get all selections\n        if (field.type === \"select-multiple\") {\n          for (var n = 0; n < field.options.length; n++) {\n            if (!field.options[n].selected) continue;\n            serialized.push({\n              name: field.name,\n              value: field.options[n].value,\n            });\n          }\n        }\n\n        // Convert field data to a query string\n        else if ((field.type !== \"checkbox\" && field.type !== \"radio\") || field.checked) {\n          serialized.push({\n            name: field.name,\n            value: field.value,\n          });\n        }\n      }\n\n      return serialized;\n    }\n\n    // from https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery\n    function objectifyForm(formArray) {\n      //serialize data function\n      var returnArray = <any>{};\n      for (var i = 0; i < formArray.length; i++) {\n        returnArray[formArray[i][\"name\"]] = formArray[i][\"value\"];\n      }\n      return returnArray;\n    }\n  }\n}\n\nexport default SurveyHtmlFormPlugin;\n"],"names":["version","ParameterType"],"mappings":"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"}