@jspsych/plugin-survey-multi-choice 2.1.0 → 2.2.0

package/dist/index.browser.js

@@ -1,7 +1,7 @@
 var jsPsychSurveyMultiChoice = (function (jspsych) {
   'use strict';
 
-  var version = "2.1.0";
+  var version = "2.2.0";
 
   const info = {
     name: "survey-multi-choice",
@@ -83,6 +83,11 @@ var jsPsychSurveyMultiChoice = (function (jspsych) {
       response: {
         type: jspsych.ParameterType.OBJECT
       },
+      /** An array containing the index of the selected option for each question. Unanswered questions are recorded as -1. */
+      response_index: {
+        type: jspsych.ParameterType.INT,
+        array: true
+      },
       /** The response time in milliseconds for the participant to make a response. The time is measured from when the questions first appear on the screen until the participant's response(s) are submitted. */
       rt: {
         type: jspsych.ParameterType.INT
@@ -141,7 +146,9 @@ var jsPsychSurveyMultiChoice = (function (jspsych) {
         if (question.horizontal) {
           question_classes.push(`${plugin_id_name}-horizontal`);
         }
-        html += `<div id="${plugin_id_name}-${question_id}" class="${question_classes.join(" ")}" data-name="${question.name}">`;
+        html += `<div id="${plugin_id_name}-${question_id}" class="${question_classes.join(
+        " "
+      )}" data-name="${question.name}">`;
         html += `<p class="${plugin_id_name}-text survey-multi-choice">${question.prompt}`;
         if (question.required) {
           html += "<span class='required'>*</span>";
@@ -155,7 +162,7 @@ var jsPsychSurveyMultiChoice = (function (jspsych) {
           html += `
         <div id="${option_id_name}" class="${plugin_id_name}-option">
           <label class="${plugin_id_name}-text" for="${input_id}">
-            <input type="radio" name="${input_name}" id="${input_id}" value="${question.options[j]}" ${required_attr} />
+            <input type="radio" name="${input_name}" id="${input_id}" value="${question.options[j]}" data-option-index="${j}" ${required_attr} />
             ${question.options[j]}
             </label>
         </div>`;
@@ -171,12 +178,16 @@ var jsPsychSurveyMultiChoice = (function (jspsych) {
         var endTime = performance.now();
         var response_time = Math.round(endTime - startTime);
         var question_data = {};
+        var response_index = [];
         for (var i2 = 0; i2 < trial.questions.length; i2++) {
           var match = display_element.querySelector(`#${plugin_id_name}-${i2}`);
           var id = "Q" + i2;
-          var val;
-          if (match.querySelector("input[type=radio]:checked") !== null) {
-            val = match.querySelector("input[type=radio]:checked").value;
+          var val = "";
+          var selected_index = -1;
+          var checked = match.querySelector("input[type=radio]:checked");
+          if (checked !== null) {
+            val = checked.value;
+            selected_index = Number(checked.dataset.optionIndex);
           } else {
             val = "";
           }
@@ -187,10 +198,12 @@ var jsPsychSurveyMultiChoice = (function (jspsych) {
           }
           obje[name] = val;
           Object.assign(question_data, obje);
+          response_index.push(selected_index);
         }
         var trial_data = {
           rt: response_time,
           response: question_data,
+          response_index,
           question_order
         };
         this.jsPsych.finishTrial(trial_data);
@@ -208,14 +221,19 @@ var jsPsychSurveyMultiChoice = (function (jspsych) {
     }
     create_simulation_data(trial, simulation_options) {
       const question_data = {};
+      const response_index = [];
       let rt = 1e3;
-      for (const q of trial.questions) {
-        const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;
-        question_data[name] = this.jsPsych.randomization.sampleWithoutReplacement(q.options, 1)[0];
+      for (let i = 0; i < trial.questions.length; i++) {
+        const q = trial.questions[i];
+        const name = q.name ? q.name : `Q${i}`;
+        const option_index = this.jsPsych.randomization.randomInt(0, q.options.length - 1);
+        question_data[name] = q.options[option_index];
+        response_index.push(option_index);
         rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);
       }
       const default_data = {
         response: question_data,
+        response_index,
         rt,
         question_order: trial.randomize_question_order ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()]) : [...Array(trial.questions.length).keys()]
       };
@@ -233,13 +251,17 @@ var jsPsychSurveyMultiChoice = (function (jspsych) {
       this.trial(display_element, trial);
       load_callback();
       const answers = Object.entries(data.response);
+      const response_index = Array.isArray(data.response_index) ? data.response_index : [];
       for (let i = 0; i < answers.length; i++) {
+        let option_index = response_index[i];
+        if (typeof option_index !== "number" || option_index < 0) {
+          option_index = trial.questions[i].options.indexOf(answers[i][1]);
+        }
+        if (option_index < 0) {
+          continue;
+        }
         this.jsPsych.pluginAPI.clickTarget(
-          display_element.querySelector(
-            `#${plugin_id_name}-response-${i}-${trial.questions[i].options.indexOf(
-            answers[i][1]
-          )}`
-          ),
+          display_element.querySelector(`#${plugin_id_name}-response-${i}-${option_index}`),
           (data.rt - 1e3) / answers.length * (i + 1)
         );
       }
@@ -253,4 +275,4 @@ var jsPsychSurveyMultiChoice = (function (jspsych) {
   return SurveyMultiChoicePlugin;
 
 })(jsPsychModule);
-//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-survey-multi-choice@2.1.0/dist/index.browser.js.map
+//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-survey-multi-choice@2.2.0/dist/index.browser.js.map

package/dist/index.browser.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.browser.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-survey-multi-choice\",\n  \"version\": \"2.1.0\",\n  \"description\": \"a jspsych plugin for multiple choice survey questions\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-survey-multi-choice\"\n  },\n  \"author\": \"Shane Martin\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/survey-multi-choice\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"survey-multi-choice\",\n  version: version,\n  parameters: {\n    /**\n     * An array of objects, each object represents a question that appears on the screen. Each object contains a prompt,\n     * options, required, and horizontal parameter that will be applied to the question. See examples below for further\n     * clarification.`prompt`: Type string, default value is *undefined*. The string is prompt/question that will be\n     * associated with a group of options (radio buttons). All questions will get presented on the same page (trial).\n     * `options`: Type array, defualt value is *undefined*. An array of strings. The array contains a set of options to\n     * display for an individual question.`required`: Type boolean, default value is null. The boolean value indicates\n     * if a question is required('true') or not ('false'), using the HTML5 `required` attribute. If this parameter is\n     * undefined, the question will be optional. `horizontal`:Type boolean, default value is false. If true, then the\n     * question is centered and the options are displayed horizontally. `name`: Name of the question. Used for storing\n     * data. If left undefined then default names (`Q0`, `Q1`, `...`) will be used for the questions.\n     */\n    questions: {\n      type: ParameterType.COMPLEX,\n      array: true,\n      nested: {\n        /** Question prompt. */\n        prompt: {\n          type: ParameterType.HTML_STRING,\n          default: undefined,\n        },\n        /** Array of multiple choice options for this question. */\n        options: {\n          type: ParameterType.STRING,\n          array: true,\n          default: undefined,\n        },\n        /** Whether or not a response to this question must be given in order to continue. */\n        required: {\n          type: ParameterType.BOOL,\n          default: false,\n        },\n        /** If true, then the question will be centered and options will be displayed horizontally. */\n        horizontal: {\n          type: ParameterType.BOOL,\n          default: false,\n        },\n        /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */\n        name: {\n          type: ParameterType.STRING,\n          default: \"\",\n        },\n      },\n    },\n    /**\n     * If true, the display order of `questions` is randomly determined at the start of the trial. In the data object,\n     * `Q0` will still refer to the first question in the array, regardless of where it was presented visually.\n     */\n    randomize_question_order: {\n      type: ParameterType.BOOL,\n      default: false,\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    /** Label of the button. */\n    button_label: {\n      type: ParameterType.STRING,\n      default: \"Continue\",\n    },\n    /**\n     * This determines whether or not all of the input elements on the page should allow autocomplete. Setting\n     * this to true will enable autocomplete or auto-fill for the form.\n     */\n    autocomplete: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n  },\n  data: {\n    /** An object containing the response for each question. The object will have a separate key (variable) for each question, with the first question in the trial being recorded in `Q0`, the second in `Q1`, and so on. The responses are recorded as integers, representing the position selected on the likert scale for that question. If the `name` parameter is defined for the question, then the response object will use the value of `name` as the key for each question. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    response: {\n      type: ParameterType.OBJECT,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from when the questions first appear on the screen until the participant's response(s) are submitted. */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** An array with the order of questions. For example `[2,0,1]` would indicate that the first question was `trial.questions[2]` (the third item in the `questions` parameter), the second question was `trial.questions[0]`, and the final question was `trial.questions[1]`. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    question_order: {\n      type: ParameterType.INT,\n      array: true,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\nconst plugin_id_name = \"jspsych-survey-multi-choice\";\n\n/**\n * **survey-multi-choice**\n *\n * The survey-multi-choice plugin displays a set of questions with multiple choice response fields. The participant selects a single answer.\n *\n * @author Shane Martin\n * @see {@link https://www.jspsych.org/latest/plugins/survey-multi-choice/ survey-multi-choice plugin documentation on jspsych.org}\n */\nclass SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) { }\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n\n    const trial_form_id = `${plugin_id_name}_form`;\n\n    var html = \"\";\n\n    // inject CSS for trial\n    html += `\n    <style id=\"${plugin_id_name}-css\">\n      .${plugin_id_name}-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }\n      .${plugin_id_name}-text span.required {color: darkred;}\n      .${plugin_id_name}-horizontal .${plugin_id_name}-text {  text-align: center;}\n      .${plugin_id_name}-option { line-height: 2; }\n      .${plugin_id_name}-horizontal .${plugin_id_name}-option {  display: inline-block;  margin-left: 1em;  margin-right: 1em;  vertical-align: top;}\n      label.${plugin_id_name}-text input[type='radio'] {margin-right: 1em;}\n      </style>`;\n\n    // show preamble text\n    if (trial.preamble !== null) {\n      html += `<div id=\"${plugin_id_name}-preamble\" class=\"${plugin_id_name}-preamble\">${trial.preamble}</div>`;\n    }\n\n    // form element\n    if (trial.autocomplete) {\n      html += `<form id=\"${trial_form_id}\">`;\n    } else {\n      html += `<form id=\"${trial_form_id}\" autocomplete=\"off\">`;\n    }\n\n    // generate question order. this is randomized here as opposed to randomizing the order of trial.questions\n    // so that the data are always associated with the same question regardless of order\n    var question_order = [];\n    for (var i = 0; i < trial.questions.length; i++) {\n      question_order.push(i);\n    }\n    if (trial.randomize_question_order) {\n      question_order = this.jsPsych.randomization.shuffle(question_order);\n    }\n\n    // add multiple-choice questions\n    for (var i = 0; i < trial.questions.length; i++) {\n      // get question based on question_order\n      var question = trial.questions[question_order[i]];\n      var question_id = question_order[i];\n\n      // create question container\n      var question_classes = [`${plugin_id_name}-question`];\n      if (question.horizontal) {\n        question_classes.push(`${plugin_id_name}-horizontal`);\n      }\n\n      html += `<div id=\"${plugin_id_name}-${question_id}\" class=\"${question_classes.join(\" \")}\" data-name=\"${question.name}\">`;\n\n      // add question text\n      html += `<p class=\"${plugin_id_name}-text survey-multi-choice\">${question.prompt}`;\n      if (question.required) {\n        html += \"<span class='required'>*</span>\";\n      }\n      html += \"</p>\";\n\n      // create option radio buttons\n      for (var j = 0; j < question.options.length; j++) {\n        // add label and question text\n        var option_id_name = `${plugin_id_name}-option-${question_id}-${j}`;\n        var input_name = `${plugin_id_name}-response-${question_id}`;\n        var input_id = `${plugin_id_name}-response-${question_id}-${j}`;\n\n        var required_attr = question.required ? \"required\" : \"\";\n\n        // add radio button container\n        html += `\n        <div id=\"${option_id_name}\" class=\"${plugin_id_name}-option\">\n          <label class=\"${plugin_id_name}-text\" for=\"${input_id}\">\n            <input type=\"radio\" name=\"${input_name}\" id=\"${input_id}\" value=\"${question.options[j]}\" ${required_attr} />\n            ${question.options[j]}\n            </label>\n        </div>`;\n      }\n\n      html += \"</div>\";\n    }\n\n    // add submit button\n    html += `<input type=\"submit\" id=\"${plugin_id_name}-next\" class=\"${plugin_id_name} jspsych-btn\"${trial.button_label ? ' value=\"' + trial.button_label + '\"' : \"\"} />`;\n    html += \"</form>\";\n\n    // render\n    display_element.innerHTML = html;\n\n    const trial_form = display_element.querySelector<HTMLFormElement>(`#${trial_form_id}`);\n\n    trial_form.addEventListener(\"submit\", (event) => {\n      event.preventDefault();\n      // measure response time\n      var endTime = performance.now();\n      var response_time = Math.round(endTime - startTime);\n\n      // create object to hold responses\n      var question_data = {};\n      for (var i = 0; i < trial.questions.length; i++) {\n        var match = display_element.querySelector(`#${plugin_id_name}-${i}`);\n        var id = \"Q\" + i;\n        var val: String;\n        if (match.querySelector(\"input[type=radio]:checked\") !== null) {\n          val = match.querySelector<HTMLInputElement>(\"input[type=radio]:checked\").value;\n        } else {\n          val = \"\";\n        }\n        var obje = {};\n        var name = id;\n        if (match.attributes[\"data-name\"].value !== \"\") {\n          name = match.attributes[\"data-name\"].value;\n        }\n        obje[name] = val;\n        Object.assign(question_data, obje);\n      }\n      // save data\n      var trial_data = {\n        rt: response_time,\n        response: question_data,\n        question_order: question_order,\n      };\n\n      // next trial\n      this.jsPsych.finishTrial(trial_data);\n    });\n\n    var startTime = performance.now();\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const question_data = {};\n    let rt = 1000;\n\n    for (const q of trial.questions) {\n      const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;\n      question_data[name] = this.jsPsych.randomization.sampleWithoutReplacement(q.options, 1)[0];\n      rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);\n    }\n\n    const default_data = {\n      response: question_data,\n      rt: rt,\n      question_order: trial.randomize_question_order\n        ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])\n        : [...Array(trial.questions.length).keys()],\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    const answers = Object.entries(data.response);\n    for (let i = 0; i < answers.length; i++) {\n      this.jsPsych.pluginAPI.clickTarget(\n        display_element.querySelector(\n          `#${plugin_id_name}-response-${i}-${trial.questions[i].options.indexOf(\n            answers[i][1]\n          )}`\n        ),\n        ((data.rt - 1000) / answers.length) * (i + 1)\n      );\n    }\n\n    this.jsPsych.pluginAPI.clickTarget(\n      display_element.querySelector(`#${plugin_id_name}-next`),\n      data.rt\n    );\n  }\n}\n\nexport default SurveyMultiChoicePlugin;\n"],"names":[],"mappings":";;;EAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IC6FA,SAAA,EAAA;EAAA;;KAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.browser.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-survey-multi-choice\",\n  \"version\": \"2.2.0\",\n  \"description\": \"a jspsych plugin for multiple choice survey questions\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-survey-multi-choice\"\n  },\n  \"author\": \"Shane Martin\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/survey-multi-choice\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"survey-multi-choice\",\n  version: version,\n  parameters: {\n    /**\n     * An array of objects, each object represents a question that appears on the screen. Each object contains a prompt,\n     * options, required, and horizontal parameter that will be applied to the question. See examples below for further\n     * clarification.`prompt`: Type string, default value is *undefined*. The string is prompt/question that will be\n     * associated with a group of options (radio buttons). All questions will get presented on the same page (trial).\n     * `options`: Type array, defualt value is *undefined*. An array of strings. The array contains a set of options to\n     * display for an individual question.`required`: Type boolean, default value is null. The boolean value indicates\n     * if a question is required('true') or not ('false'), using the HTML5 `required` attribute. If this parameter is\n     * undefined, the question will be optional. `horizontal`:Type boolean, default value is false. If true, then the\n     * question is centered and the options are displayed horizontally. `name`: Name of the question. Used for storing\n     * data. If left undefined then default names (`Q0`, `Q1`, `...`) will be used for the questions.\n     */\n    questions: {\n      type: ParameterType.COMPLEX,\n      array: true,\n      nested: {\n        /** Question prompt. */\n        prompt: {\n          type: ParameterType.HTML_STRING,\n          default: undefined,\n        },\n        /** Array of multiple choice options for this question. */\n        options: {\n          type: ParameterType.STRING,\n          array: true,\n          default: undefined,\n        },\n        /** Whether or not a response to this question must be given in order to continue. */\n        required: {\n          type: ParameterType.BOOL,\n          default: false,\n        },\n        /** If true, then the question will be centered and options will be displayed horizontally. */\n        horizontal: {\n          type: ParameterType.BOOL,\n          default: false,\n        },\n        /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */\n        name: {\n          type: ParameterType.STRING,\n          default: \"\",\n        },\n      },\n    },\n    /**\n     * If true, the display order of `questions` is randomly determined at the start of the trial. In the data object,\n     * `Q0` will still refer to the first question in the array, regardless of where it was presented visually.\n     */\n    randomize_question_order: {\n      type: ParameterType.BOOL,\n      default: false,\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    /** Label of the button. */\n    button_label: {\n      type: ParameterType.STRING,\n      default: \"Continue\",\n    },\n    /**\n     * This determines whether or not all of the input elements on the page should allow autocomplete. Setting\n     * this to true will enable autocomplete or auto-fill for the form.\n     */\n    autocomplete: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n  },\n  data: {\n    /** An object containing the response for each question. The object will have a separate key (variable) for each question, with the first question in the trial being recorded in `Q0`, the second in `Q1`, and so on. The responses are recorded as integers, representing the position selected on the likert scale for that question. If the `name` parameter is defined for the question, then the response object will use the value of `name` as the key for each question. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    response: {\n      type: ParameterType.OBJECT,\n    },\n    /** An array containing the index of the selected option for each question. Unanswered questions are recorded as -1. */\n    response_index: {\n      type: ParameterType.INT,\n      array: true,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from when the questions first appear on the screen until the participant's response(s) are submitted. */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** An array with the order of questions. For example `[2,0,1]` would indicate that the first question was `trial.questions[2]` (the third item in the `questions` parameter), the second question was `trial.questions[0]`, and the final question was `trial.questions[1]`. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    question_order: {\n      type: ParameterType.INT,\n      array: true,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\nconst plugin_id_name = \"jspsych-survey-multi-choice\";\n\n/**\n * **survey-multi-choice**\n *\n * The survey-multi-choice plugin displays a set of questions with multiple choice response fields. The participant selects a single answer.\n *\n * @author Shane Martin\n * @see {@link https://www.jspsych.org/latest/plugins/survey-multi-choice/ survey-multi-choice plugin documentation on jspsych.org}\n */\nclass SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    const trial_form_id = `${plugin_id_name}_form`;\n\n    var html = \"\";\n\n    // inject CSS for trial\n    html += `\n    <style id=\"${plugin_id_name}-css\">\n      .${plugin_id_name}-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }\n      .${plugin_id_name}-text span.required {color: darkred;}\n      .${plugin_id_name}-horizontal .${plugin_id_name}-text {  text-align: center;}\n      .${plugin_id_name}-option { line-height: 2; }\n      .${plugin_id_name}-horizontal .${plugin_id_name}-option {  display: inline-block;  margin-left: 1em;  margin-right: 1em;  vertical-align: top;}\n      label.${plugin_id_name}-text input[type='radio'] {margin-right: 1em;}\n      </style>`;\n\n    // show preamble text\n    if (trial.preamble !== null) {\n      html += `<div id=\"${plugin_id_name}-preamble\" class=\"${plugin_id_name}-preamble\">${trial.preamble}</div>`;\n    }\n\n    // form element\n    if (trial.autocomplete) {\n      html += `<form id=\"${trial_form_id}\">`;\n    } else {\n      html += `<form id=\"${trial_form_id}\" autocomplete=\"off\">`;\n    }\n\n    // generate question order. this is randomized here as opposed to randomizing the order of trial.questions\n    // so that the data are always associated with the same question regardless of order\n    var question_order = [];\n    for (var i = 0; i < trial.questions.length; i++) {\n      question_order.push(i);\n    }\n    if (trial.randomize_question_order) {\n      question_order = this.jsPsych.randomization.shuffle(question_order);\n    }\n\n    // add multiple-choice questions\n    for (var i = 0; i < trial.questions.length; i++) {\n      // get question based on question_order\n      var question = trial.questions[question_order[i]];\n      var question_id = question_order[i];\n\n      // create question container\n      var question_classes = [`${plugin_id_name}-question`];\n      if (question.horizontal) {\n        question_classes.push(`${plugin_id_name}-horizontal`);\n      }\n\n      html += `<div id=\"${plugin_id_name}-${question_id}\" class=\"${question_classes.join(\n        \" \"\n      )}\" data-name=\"${question.name}\">`;\n\n      // add question text\n      html += `<p class=\"${plugin_id_name}-text survey-multi-choice\">${question.prompt}`;\n      if (question.required) {\n        html += \"<span class='required'>*</span>\";\n      }\n      html += \"</p>\";\n\n      // create option radio buttons\n      for (var j = 0; j < question.options.length; j++) {\n        // add label and question text\n        var option_id_name = `${plugin_id_name}-option-${question_id}-${j}`;\n        var input_name = `${plugin_id_name}-response-${question_id}`;\n        var input_id = `${plugin_id_name}-response-${question_id}-${j}`;\n\n        var required_attr = question.required ? \"required\" : \"\";\n\n        // add radio button container\n        html += `\n        <div id=\"${option_id_name}\" class=\"${plugin_id_name}-option\">\n          <label class=\"${plugin_id_name}-text\" for=\"${input_id}\">\n            <input type=\"radio\" name=\"${input_name}\" id=\"${input_id}\" value=\"${question.options[j]}\" data-option-index=\"${j}\" ${required_attr} />\n            ${question.options[j]}\n            </label>\n        </div>`;\n      }\n\n      html += \"</div>\";\n    }\n\n    // add submit button\n    html += `<input type=\"submit\" id=\"${plugin_id_name}-next\" class=\"${plugin_id_name} jspsych-btn\"${\n      trial.button_label ? ' value=\"' + trial.button_label + '\"' : \"\"\n    } />`;\n    html += \"</form>\";\n\n    // render\n    display_element.innerHTML = html;\n\n    const trial_form = display_element.querySelector<HTMLFormElement>(`#${trial_form_id}`);\n\n    trial_form.addEventListener(\"submit\", (event) => {\n      event.preventDefault();\n      // measure response time\n      var endTime = performance.now();\n      var response_time = Math.round(endTime - startTime);\n\n      // create object to hold responses\n      var question_data = {};\n      var response_index = [];\n      for (var i = 0; i < trial.questions.length; i++) {\n        var match = display_element.querySelector(`#${plugin_id_name}-${i}`);\n        var id = \"Q\" + i;\n        var val: String = \"\";\n        var selected_index = -1;\n        var checked = match.querySelector<HTMLInputElement>(\"input[type=radio]:checked\");\n        if (checked !== null) {\n          val = checked.value;\n          selected_index = Number(checked.dataset.optionIndex);\n        } else {\n          val = \"\";\n        }\n        var obje = {};\n        var name = id;\n        if (match.attributes[\"data-name\"].value !== \"\") {\n          name = match.attributes[\"data-name\"].value;\n        }\n        obje[name] = val;\n        Object.assign(question_data, obje);\n        response_index.push(selected_index);\n      }\n      // save data\n      var trial_data = {\n        rt: response_time,\n        response: question_data,\n        response_index: response_index,\n        question_order: question_order,\n      };\n\n      // next trial\n      this.jsPsych.finishTrial(trial_data);\n    });\n\n    var startTime = performance.now();\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const question_data = {};\n    const response_index = [];\n    let rt = 1000;\n\n    for (let i = 0; i < trial.questions.length; i++) {\n      const q = trial.questions[i];\n      const name = q.name ? q.name : `Q${i}`;\n      const option_index = this.jsPsych.randomization.randomInt(0, q.options.length - 1);\n      question_data[name] = q.options[option_index];\n      response_index.push(option_index);\n      rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);\n    }\n\n    const default_data = {\n      response: question_data,\n      response_index: response_index,\n      rt: rt,\n      question_order: trial.randomize_question_order\n        ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])\n        : [...Array(trial.questions.length).keys()],\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    const answers = Object.entries(data.response);\n    const response_index = Array.isArray(data.response_index) ? data.response_index : [];\n    for (let i = 0; i < answers.length; i++) {\n      let option_index = response_index[i];\n      if (typeof option_index !== \"number\" || option_index < 0) {\n        option_index = trial.questions[i].options.indexOf(answers[i][1]);\n      }\n      if (option_index < 0) {\n        continue;\n      }\n      this.jsPsych.pluginAPI.clickTarget(\n        display_element.querySelector(`#${plugin_id_name}-response-${i}-${option_index}`),\n        ((data.rt - 1000) / answers.length) * (i + 1)\n      );\n    }\n\n    this.jsPsych.pluginAPI.clickTarget(\n      display_element.querySelector(`#${plugin_id_name}-next`),\n      data.rt\n    );\n  }\n}\n\nexport default SurveyMultiChoicePlugin;\n"],"names":[],"mappings":";;;EAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ICkGA,SAAA,EAAA;EAAA;;KAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.browser.min.js

@@ -1,4 +1,4 @@
-var jsPsychSurveyMultiChoice=function(n){"use strict";var b="2.1.0";const g={name:"survey-multi-choice",version:b,parameters:{questions:{type:n.ParameterType.COMPLEX,array:!0,nested:{prompt:{type:n.ParameterType.HTML_STRING,default:void 0},options:{type:n.ParameterType.STRING,array:!0,default:void 0},required:{type:n.ParameterType.BOOL,default:!1},horizontal:{type:n.ParameterType.BOOL,default:!1},name:{type:n.ParameterType.STRING,default:""}}},randomize_question_order:{type:n.ParameterType.BOOL,default:!1},preamble:{type:n.ParameterType.HTML_STRING,default:null},button_label:{type:n.ParameterType.STRING,default:"Continue"},autocomplete:{type:n.ParameterType.BOOL,default:!1}},data:{response:{type:n.ParameterType.OBJECT},rt:{type:n.ParameterType.INT},question_order:{type:n.ParameterType.INT,array:!0}},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}, }  '}},e="jspsych-survey-multi-choice";class h{constructor(a){this.jsPsych=a}trial(a,o){const s=`${e}_form`;var t="";t+=`
+var jsPsychSurveyMultiChoice=function(i){"use strict";var T="2.2.0";const x={name:"survey-multi-choice",version:T,parameters:{questions:{type:i.ParameterType.COMPLEX,array:!0,nested:{prompt:{type:i.ParameterType.HTML_STRING,default:void 0},options:{type:i.ParameterType.STRING,array:!0,default:void 0},required:{type:i.ParameterType.BOOL,default:!1},horizontal:{type:i.ParameterType.BOOL,default:!1},name:{type:i.ParameterType.STRING,default:""}}},randomize_question_order:{type:i.ParameterType.BOOL,default:!1},preamble:{type:i.ParameterType.HTML_STRING,default:null},button_label:{type:i.ParameterType.STRING,default:"Continue"},autocomplete:{type:i.ParameterType.BOOL,default:!1}},data:{response:{type:i.ParameterType.OBJECT},response_index:{type:i.ParameterType.INT,array:!0},rt:{type:i.ParameterType.INT},question_order:{type:i.ParameterType.INT,array:!0}},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}, }  '}},e="jspsych-survey-multi-choice";class f{constructor(r){this.jsPsych=r}trial(r,a){const s=`${e}_form`;var t="";t+=`
     <style id="${e}-css">
       .${e}-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }
       .${e}-text span.required {color: darkred;}
@@ -6,11 +6,11 @@ var jsPsychSurveyMultiChoice=function(n){"use strict";var b="2.1.0";const g={nam
       .${e}-option { line-height: 2; }
       .${e}-horizontal .${e}-option {  display: inline-block;  margin-left: 1em;  margin-right: 1em;  vertical-align: top;}
       label.${e}-text input[type='radio'] {margin-right: 1em;}
-      </style>`,o.preamble!==null&&(t+=`<div id="${e}-preamble" class="${e}-preamble">${o.preamble}</div>`),o.autocomplete?t+=`<form id="${s}">`:t+=`<form id="${s}" autocomplete="off">`;for(var l=[],i=0;i<o.questions.length;i++)l.push(i);o.randomize_question_order&&(l=this.jsPsych.randomization.shuffle(l));for(var i=0;i<o.questions.length;i++){var r=o.questions[l[i]],u=l[i],y=[`${e}-question`];r.horizontal&&y.push(`${e}-horizontal`),t+=`<div id="${e}-${u}" class="${y.join(" ")}" data-name="${r.name}">`,t+=`<p class="${e}-text survey-multi-choice">${r.prompt}`,r.required&&(t+="<span class='required'>*</span>"),t+="</p>";for(var p=0;p<r.options.length;p++){var q=`${e}-option-${u}-${p}`,T=`${e}-response-${u}`,$=`${e}-response-${u}-${p}`,_=r.required?"required":"";t+=`
-        <div id="${q}" class="${e}-option">
-          <label class="${e}-text" for="${$}">
-            <input type="radio" name="${T}" id="${$}" value="${r.options[p]}" ${_} />
-            ${r.options[p]}
+      </style>`,a.preamble!==null&&(t+=`<div id="${e}-preamble" class="${e}-preamble">${a.preamble}</div>`),a.autocomplete?t+=`<form id="${s}">`:t+=`<form id="${s}" autocomplete="off">`;for(var l=[],n=0;n<a.questions.length;n++)l.push(n);a.randomize_question_order&&(l=this.jsPsych.randomization.shuffle(l));for(var n=0;n<a.questions.length;n++){var u=a.questions[l[n]],o=l[n],p=[`${e}-question`];u.horizontal&&p.push(`${e}-horizontal`),t+=`<div id="${e}-${o}" class="${p.join(" ")}" data-name="${u.name}">`,t+=`<p class="${e}-text survey-multi-choice">${u.prompt}`,u.required&&(t+="<span class='required'>*</span>"),t+="</p>";for(var m=0;m<u.options.length;m++){var d=`${e}-option-${o}-${m}`,S=`${e}-response-${o}`,v=`${e}-response-${o}-${m}`,O=u.required?"required":"";t+=`
+        <div id="${d}" class="${e}-option">
+          <label class="${e}-text" for="${v}">
+            <input type="radio" name="${S}" id="${v}" value="${u.options[m]}" data-option-index="${m}" ${O} />
+            ${u.options[m]}
             </label>
-        </div>`}t+="</div>"}t+=`<input type="submit" id="${e}-next" class="${e} jspsych-btn"${o.button_label?' value="'+o.button_label+'"':""} />`,t+="</form>",a.innerHTML=t,a.querySelector(`#${s}`).addEventListener("submit",S=>{S.preventDefault();for(var j=performance.now(),x=Math.round(j-O),f={},m=0;m<o.questions.length;m++){var c=a.querySelector(`#${e}-${m}`),L="Q"+m,d;c.querySelector("input[type=radio]:checked")!==null?d=c.querySelector("input[type=radio]:checked").value:d="";var v={},P=L;c.attributes["data-name"].value!==""&&(P=c.attributes["data-name"].value),v[P]=d,Object.assign(f,v)}var z={rt:x,response:f,question_order:l};this.jsPsych.finishTrial(z)});var O=performance.now()}simulate(a,o,s,t){o=="data-only"&&(t(),this.simulate_data_only(a,s)),o=="visual"&&this.simulate_visual(a,s,t)}create_simulation_data(a,o){const s={};let t=1e3;for(const r of a.questions){const u=r.name?r.name:`Q${a.questions.indexOf(r)}`;s[u]=this.jsPsych.randomization.sampleWithoutReplacement(r.options,1)[0],t+=this.jsPsych.randomization.sampleExGaussian(1500,400,.005,!0)}const l={response:s,rt:t,question_order:a.randomize_question_order?this.jsPsych.randomization.shuffle([...Array(a.questions.length).keys()]):[...Array(a.questions.length).keys()]},i=this.jsPsych.pluginAPI.mergeSimulationData(l,o);return this.jsPsych.pluginAPI.ensureSimulationDataConsistency(a,i),i}simulate_data_only(a,o){const s=this.create_simulation_data(a,o);this.jsPsych.finishTrial(s)}simulate_visual(a,o,s){const t=this.create_simulation_data(a,o),l=this.jsPsych.getDisplayElement();this.trial(l,a),s();const i=Object.entries(t.response);for(let r=0;r<i.length;r++)this.jsPsych.pluginAPI.clickTarget(l.querySelector(`#${e}-response-${r}-${a.questions[r].options.indexOf(i[r][1])}`),(t.rt-1e3)/i.length*(r+1));this.jsPsych.pluginAPI.clickTarget(l.querySelector(`#${e}-next`),t.rt)}}return h.info=g,h}(jsPsychModule);
-//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-survey-multi-choice@2.1.0/dist/index.browser.min.js.map
+        </div>`}t+="</div>"}t+=`<input type="submit" id="${e}-next" class="${e} jspsych-btn"${a.button_label?' value="'+a.button_label+'"':""} />`,t+="</form>",r.innerHTML=t,r.querySelector(`#${s}`).addEventListener("submit",I=>{I.preventDefault();for(var L=performance.now(),z=Math.round(L-j),P={},b=[],c=0;c<a.questions.length;c++){var y=r.querySelector(`#${e}-${c}`),E="Q"+c,h="",g=-1,$=y.querySelector("input[type=radio]:checked");$!==null?(h=$.value,g=Number($.dataset.optionIndex)):h="";var _={},q=E;y.attributes["data-name"].value!==""&&(q=y.attributes["data-name"].value),_[q]=h,Object.assign(P,_),b.push(g)}var A={rt:z,response:P,response_index:b,question_order:l};this.jsPsych.finishTrial(A)});var j=performance.now()}simulate(r,a,s,t){a=="data-only"&&(t(),this.simulate_data_only(r,s)),a=="visual"&&this.simulate_visual(r,s,t)}create_simulation_data(r,a){const s={},t=[];let l=1e3;for(let o=0;o<r.questions.length;o++){const p=r.questions[o],m=p.name?p.name:`Q${o}`,d=this.jsPsych.randomization.randomInt(0,p.options.length-1);s[m]=p.options[d],t.push(d),l+=this.jsPsych.randomization.sampleExGaussian(1500,400,.005,!0)}const n={response:s,response_index:t,rt:l,question_order:r.randomize_question_order?this.jsPsych.randomization.shuffle([...Array(r.questions.length).keys()]):[...Array(r.questions.length).keys()]},u=this.jsPsych.pluginAPI.mergeSimulationData(n,a);return this.jsPsych.pluginAPI.ensureSimulationDataConsistency(r,u),u}simulate_data_only(r,a){const s=this.create_simulation_data(r,a);this.jsPsych.finishTrial(s)}simulate_visual(r,a,s){const t=this.create_simulation_data(r,a),l=this.jsPsych.getDisplayElement();this.trial(l,r),s();const n=Object.entries(t.response),u=Array.isArray(t.response_index)?t.response_index:[];for(let o=0;o<n.length;o++){let p=u[o];(typeof p!="number"||p<0)&&(p=r.questions[o].options.indexOf(n[o][1])),!(p<0)&&this.jsPsych.pluginAPI.clickTarget(l.querySelector(`#${e}-response-${o}-${p}`),(t.rt-1e3)/n.length*(o+1))}this.jsPsych.pluginAPI.clickTarget(l.querySelector(`#${e}-next`),t.rt)}}return f.info=x,f}(jsPsychModule);
+//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-survey-multi-choice@2.2.0/dist/index.browser.min.js.map

package/dist/index.browser.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.browser.min.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-survey-multi-choice\",\n  \"version\": \"2.1.0\",\n  \"description\": \"a jspsych plugin for multiple choice survey questions\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-survey-multi-choice\"\n  },\n  \"author\": \"Shane Martin\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/survey-multi-choice\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"survey-multi-choice\",\n  version: version,\n  parameters: {\n    /**\n     * An array of objects, each object represents a question that appears on the screen. Each object contains a prompt,\n     * options, required, and horizontal parameter that will be applied to the question. See examples below for further\n     * clarification.`prompt`: Type string, default value is *undefined*. The string is prompt/question that will be\n     * associated with a group of options (radio buttons). All questions will get presented on the same page (trial).\n     * `options`: Type array, defualt value is *undefined*. An array of strings. The array contains a set of options to\n     * display for an individual question.`required`: Type boolean, default value is null. The boolean value indicates\n     * if a question is required('true') or not ('false'), using the HTML5 `required` attribute. If this parameter is\n     * undefined, the question will be optional. `horizontal`:Type boolean, default value is false. If true, then the\n     * question is centered and the options are displayed horizontally. `name`: Name of the question. Used for storing\n     * data. If left undefined then default names (`Q0`, `Q1`, `...`) will be used for the questions.\n     */\n    questions: {\n      type: ParameterType.COMPLEX,\n      array: true,\n      nested: {\n        /** Question prompt. */\n        prompt: {\n          type: ParameterType.HTML_STRING,\n          default: undefined,\n        },\n        /** Array of multiple choice options for this question. */\n        options: {\n          type: ParameterType.STRING,\n          array: true,\n          default: undefined,\n        },\n        /** Whether or not a response to this question must be given in order to continue. */\n        required: {\n          type: ParameterType.BOOL,\n          default: false,\n        },\n        /** If true, then the question will be centered and options will be displayed horizontally. */\n        horizontal: {\n          type: ParameterType.BOOL,\n          default: false,\n        },\n        /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */\n        name: {\n          type: ParameterType.STRING,\n          default: \"\",\n        },\n      },\n    },\n    /**\n     * If true, the display order of `questions` is randomly determined at the start of the trial. In the data object,\n     * `Q0` will still refer to the first question in the array, regardless of where it was presented visually.\n     */\n    randomize_question_order: {\n      type: ParameterType.BOOL,\n      default: false,\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    /** Label of the button. */\n    button_label: {\n      type: ParameterType.STRING,\n      default: \"Continue\",\n    },\n    /**\n     * This determines whether or not all of the input elements on the page should allow autocomplete. Setting\n     * this to true will enable autocomplete or auto-fill for the form.\n     */\n    autocomplete: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n  },\n  data: {\n    /** An object containing the response for each question. The object will have a separate key (variable) for each question, with the first question in the trial being recorded in `Q0`, the second in `Q1`, and so on. The responses are recorded as integers, representing the position selected on the likert scale for that question. If the `name` parameter is defined for the question, then the response object will use the value of `name` as the key for each question. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    response: {\n      type: ParameterType.OBJECT,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from when the questions first appear on the screen until the participant's response(s) are submitted. */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** An array with the order of questions. For example `[2,0,1]` would indicate that the first question was `trial.questions[2]` (the third item in the `questions` parameter), the second question was `trial.questions[0]`, and the final question was `trial.questions[1]`. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    question_order: {\n      type: ParameterType.INT,\n      array: true,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\nconst plugin_id_name = \"jspsych-survey-multi-choice\";\n\n/**\n * **survey-multi-choice**\n *\n * The survey-multi-choice plugin displays a set of questions with multiple choice response fields. The participant selects a single answer.\n *\n * @author Shane Martin\n * @see {@link https://www.jspsych.org/latest/plugins/survey-multi-choice/ survey-multi-choice plugin documentation on jspsych.org}\n */\nclass SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) { }\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n\n    const trial_form_id = `${plugin_id_name}_form`;\n\n    var html = \"\";\n\n    // inject CSS for trial\n    html += `\n    <style id=\"${plugin_id_name}-css\">\n      .${plugin_id_name}-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }\n      .${plugin_id_name}-text span.required {color: darkred;}\n      .${plugin_id_name}-horizontal .${plugin_id_name}-text {  text-align: center;}\n      .${plugin_id_name}-option { line-height: 2; }\n      .${plugin_id_name}-horizontal .${plugin_id_name}-option {  display: inline-block;  margin-left: 1em;  margin-right: 1em;  vertical-align: top;}\n      label.${plugin_id_name}-text input[type='radio'] {margin-right: 1em;}\n      </style>`;\n\n    // show preamble text\n    if (trial.preamble !== null) {\n      html += `<div id=\"${plugin_id_name}-preamble\" class=\"${plugin_id_name}-preamble\">${trial.preamble}</div>`;\n    }\n\n    // form element\n    if (trial.autocomplete) {\n      html += `<form id=\"${trial_form_id}\">`;\n    } else {\n      html += `<form id=\"${trial_form_id}\" autocomplete=\"off\">`;\n    }\n\n    // generate question order. this is randomized here as opposed to randomizing the order of trial.questions\n    // so that the data are always associated with the same question regardless of order\n    var question_order = [];\n    for (var i = 0; i < trial.questions.length; i++) {\n      question_order.push(i);\n    }\n    if (trial.randomize_question_order) {\n      question_order = this.jsPsych.randomization.shuffle(question_order);\n    }\n\n    // add multiple-choice questions\n    for (var i = 0; i < trial.questions.length; i++) {\n      // get question based on question_order\n      var question = trial.questions[question_order[i]];\n      var question_id = question_order[i];\n\n      // create question container\n      var question_classes = [`${plugin_id_name}-question`];\n      if (question.horizontal) {\n        question_classes.push(`${plugin_id_name}-horizontal`);\n      }\n\n      html += `<div id=\"${plugin_id_name}-${question_id}\" class=\"${question_classes.join(\" \")}\" data-name=\"${question.name}\">`;\n\n      // add question text\n      html += `<p class=\"${plugin_id_name}-text survey-multi-choice\">${question.prompt}`;\n      if (question.required) {\n        html += \"<span class='required'>*</span>\";\n      }\n      html += \"</p>\";\n\n      // create option radio buttons\n      for (var j = 0; j < question.options.length; j++) {\n        // add label and question text\n        var option_id_name = `${plugin_id_name}-option-${question_id}-${j}`;\n        var input_name = `${plugin_id_name}-response-${question_id}`;\n        var input_id = `${plugin_id_name}-response-${question_id}-${j}`;\n\n        var required_attr = question.required ? \"required\" : \"\";\n\n        // add radio button container\n        html += `\n        <div id=\"${option_id_name}\" class=\"${plugin_id_name}-option\">\n          <label class=\"${plugin_id_name}-text\" for=\"${input_id}\">\n            <input type=\"radio\" name=\"${input_name}\" id=\"${input_id}\" value=\"${question.options[j]}\" ${required_attr} />\n            ${question.options[j]}\n            </label>\n        </div>`;\n      }\n\n      html += \"</div>\";\n    }\n\n    // add submit button\n    html += `<input type=\"submit\" id=\"${plugin_id_name}-next\" class=\"${plugin_id_name} jspsych-btn\"${trial.button_label ? ' value=\"' + trial.button_label + '\"' : \"\"} />`;\n    html += \"</form>\";\n\n    // render\n    display_element.innerHTML = html;\n\n    const trial_form = display_element.querySelector<HTMLFormElement>(`#${trial_form_id}`);\n\n    trial_form.addEventListener(\"submit\", (event) => {\n      event.preventDefault();\n      // measure response time\n      var endTime = performance.now();\n      var response_time = Math.round(endTime - startTime);\n\n      // create object to hold responses\n      var question_data = {};\n      for (var i = 0; i < trial.questions.length; i++) {\n        var match = display_element.querySelector(`#${plugin_id_name}-${i}`);\n        var id = \"Q\" + i;\n        var val: String;\n        if (match.querySelector(\"input[type=radio]:checked\") !== null) {\n          val = match.querySelector<HTMLInputElement>(\"input[type=radio]:checked\").value;\n        } else {\n          val = \"\";\n        }\n        var obje = {};\n        var name = id;\n        if (match.attributes[\"data-name\"].value !== \"\") {\n          name = match.attributes[\"data-name\"].value;\n        }\n        obje[name] = val;\n        Object.assign(question_data, obje);\n      }\n      // save data\n      var trial_data = {\n        rt: response_time,\n        response: question_data,\n        question_order: question_order,\n      };\n\n      // next trial\n      this.jsPsych.finishTrial(trial_data);\n    });\n\n    var startTime = performance.now();\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const question_data = {};\n    let rt = 1000;\n\n    for (const q of trial.questions) {\n      const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;\n      question_data[name] = this.jsPsych.randomization.sampleWithoutReplacement(q.options, 1)[0];\n      rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);\n    }\n\n    const default_data = {\n      response: question_data,\n      rt: rt,\n      question_order: trial.randomize_question_order\n        ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])\n        : [...Array(trial.questions.length).keys()],\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    const answers = Object.entries(data.response);\n    for (let i = 0; i < answers.length; i++) {\n      this.jsPsych.pluginAPI.clickTarget(\n        display_element.querySelector(\n          `#${plugin_id_name}-response-${i}-${trial.questions[i].options.indexOf(\n            answers[i][1]\n          )}`\n        ),\n        ((data.rt - 1000) / answers.length) * (i + 1)\n      );\n    }\n\n    this.jsPsych.pluginAPI.clickTarget(\n      display_element.querySelector(`#${plugin_id_name}-next`),\n      data.rt\n    );\n  }\n}\n\nexport default SurveyMultiChoicePlugin;\n"],"names":["version"],"mappings":"sDAEEA,IAAAA,EAAW,+uBC6FA,UAAA,iuBAAe;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.browser.min.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-survey-multi-choice\",\n  \"version\": \"2.2.0\",\n  \"description\": \"a jspsych plugin for multiple choice survey questions\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-survey-multi-choice\"\n  },\n  \"author\": \"Shane Martin\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/survey-multi-choice\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"survey-multi-choice\",\n  version: version,\n  parameters: {\n    /**\n     * An array of objects, each object represents a question that appears on the screen. Each object contains a prompt,\n     * options, required, and horizontal parameter that will be applied to the question. See examples below for further\n     * clarification.`prompt`: Type string, default value is *undefined*. The string is prompt/question that will be\n     * associated with a group of options (radio buttons). All questions will get presented on the same page (trial).\n     * `options`: Type array, defualt value is *undefined*. An array of strings. The array contains a set of options to\n     * display for an individual question.`required`: Type boolean, default value is null. The boolean value indicates\n     * if a question is required('true') or not ('false'), using the HTML5 `required` attribute. If this parameter is\n     * undefined, the question will be optional. `horizontal`:Type boolean, default value is false. If true, then the\n     * question is centered and the options are displayed horizontally. `name`: Name of the question. Used for storing\n     * data. If left undefined then default names (`Q0`, `Q1`, `...`) will be used for the questions.\n     */\n    questions: {\n      type: ParameterType.COMPLEX,\n      array: true,\n      nested: {\n        /** Question prompt. */\n        prompt: {\n          type: ParameterType.HTML_STRING,\n          default: undefined,\n        },\n        /** Array of multiple choice options for this question. */\n        options: {\n          type: ParameterType.STRING,\n          array: true,\n          default: undefined,\n        },\n        /** Whether or not a response to this question must be given in order to continue. */\n        required: {\n          type: ParameterType.BOOL,\n          default: false,\n        },\n        /** If true, then the question will be centered and options will be displayed horizontally. */\n        horizontal: {\n          type: ParameterType.BOOL,\n          default: false,\n        },\n        /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */\n        name: {\n          type: ParameterType.STRING,\n          default: \"\",\n        },\n      },\n    },\n    /**\n     * If true, the display order of `questions` is randomly determined at the start of the trial. In the data object,\n     * `Q0` will still refer to the first question in the array, regardless of where it was presented visually.\n     */\n    randomize_question_order: {\n      type: ParameterType.BOOL,\n      default: false,\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    /** Label of the button. */\n    button_label: {\n      type: ParameterType.STRING,\n      default: \"Continue\",\n    },\n    /**\n     * This determines whether or not all of the input elements on the page should allow autocomplete. Setting\n     * this to true will enable autocomplete or auto-fill for the form.\n     */\n    autocomplete: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n  },\n  data: {\n    /** An object containing the response for each question. The object will have a separate key (variable) for each question, with the first question in the trial being recorded in `Q0`, the second in `Q1`, and so on. The responses are recorded as integers, representing the position selected on the likert scale for that question. If the `name` parameter is defined for the question, then the response object will use the value of `name` as the key for each question. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    response: {\n      type: ParameterType.OBJECT,\n    },\n    /** An array containing the index of the selected option for each question. Unanswered questions are recorded as -1. */\n    response_index: {\n      type: ParameterType.INT,\n      array: true,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from when the questions first appear on the screen until the participant's response(s) are submitted. */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** An array with the order of questions. For example `[2,0,1]` would indicate that the first question was `trial.questions[2]` (the third item in the `questions` parameter), the second question was `trial.questions[0]`, and the final question was `trial.questions[1]`. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    question_order: {\n      type: ParameterType.INT,\n      array: true,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\nconst plugin_id_name = \"jspsych-survey-multi-choice\";\n\n/**\n * **survey-multi-choice**\n *\n * The survey-multi-choice plugin displays a set of questions with multiple choice response fields. The participant selects a single answer.\n *\n * @author Shane Martin\n * @see {@link https://www.jspsych.org/latest/plugins/survey-multi-choice/ survey-multi-choice plugin documentation on jspsych.org}\n */\nclass SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    const trial_form_id = `${plugin_id_name}_form`;\n\n    var html = \"\";\n\n    // inject CSS for trial\n    html += `\n    <style id=\"${plugin_id_name}-css\">\n      .${plugin_id_name}-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }\n      .${plugin_id_name}-text span.required {color: darkred;}\n      .${plugin_id_name}-horizontal .${plugin_id_name}-text {  text-align: center;}\n      .${plugin_id_name}-option { line-height: 2; }\n      .${plugin_id_name}-horizontal .${plugin_id_name}-option {  display: inline-block;  margin-left: 1em;  margin-right: 1em;  vertical-align: top;}\n      label.${plugin_id_name}-text input[type='radio'] {margin-right: 1em;}\n      </style>`;\n\n    // show preamble text\n    if (trial.preamble !== null) {\n      html += `<div id=\"${plugin_id_name}-preamble\" class=\"${plugin_id_name}-preamble\">${trial.preamble}</div>`;\n    }\n\n    // form element\n    if (trial.autocomplete) {\n      html += `<form id=\"${trial_form_id}\">`;\n    } else {\n      html += `<form id=\"${trial_form_id}\" autocomplete=\"off\">`;\n    }\n\n    // generate question order. this is randomized here as opposed to randomizing the order of trial.questions\n    // so that the data are always associated with the same question regardless of order\n    var question_order = [];\n    for (var i = 0; i < trial.questions.length; i++) {\n      question_order.push(i);\n    }\n    if (trial.randomize_question_order) {\n      question_order = this.jsPsych.randomization.shuffle(question_order);\n    }\n\n    // add multiple-choice questions\n    for (var i = 0; i < trial.questions.length; i++) {\n      // get question based on question_order\n      var question = trial.questions[question_order[i]];\n      var question_id = question_order[i];\n\n      // create question container\n      var question_classes = [`${plugin_id_name}-question`];\n      if (question.horizontal) {\n        question_classes.push(`${plugin_id_name}-horizontal`);\n      }\n\n      html += `<div id=\"${plugin_id_name}-${question_id}\" class=\"${question_classes.join(\n        \" \"\n      )}\" data-name=\"${question.name}\">`;\n\n      // add question text\n      html += `<p class=\"${plugin_id_name}-text survey-multi-choice\">${question.prompt}`;\n      if (question.required) {\n        html += \"<span class='required'>*</span>\";\n      }\n      html += \"</p>\";\n\n      // create option radio buttons\n      for (var j = 0; j < question.options.length; j++) {\n        // add label and question text\n        var option_id_name = `${plugin_id_name}-option-${question_id}-${j}`;\n        var input_name = `${plugin_id_name}-response-${question_id}`;\n        var input_id = `${plugin_id_name}-response-${question_id}-${j}`;\n\n        var required_attr = question.required ? \"required\" : \"\";\n\n        // add radio button container\n        html += `\n        <div id=\"${option_id_name}\" class=\"${plugin_id_name}-option\">\n          <label class=\"${plugin_id_name}-text\" for=\"${input_id}\">\n            <input type=\"radio\" name=\"${input_name}\" id=\"${input_id}\" value=\"${question.options[j]}\" data-option-index=\"${j}\" ${required_attr} />\n            ${question.options[j]}\n            </label>\n        </div>`;\n      }\n\n      html += \"</div>\";\n    }\n\n    // add submit button\n    html += `<input type=\"submit\" id=\"${plugin_id_name}-next\" class=\"${plugin_id_name} jspsych-btn\"${\n      trial.button_label ? ' value=\"' + trial.button_label + '\"' : \"\"\n    } />`;\n    html += \"</form>\";\n\n    // render\n    display_element.innerHTML = html;\n\n    const trial_form = display_element.querySelector<HTMLFormElement>(`#${trial_form_id}`);\n\n    trial_form.addEventListener(\"submit\", (event) => {\n      event.preventDefault();\n      // measure response time\n      var endTime = performance.now();\n      var response_time = Math.round(endTime - startTime);\n\n      // create object to hold responses\n      var question_data = {};\n      var response_index = [];\n      for (var i = 0; i < trial.questions.length; i++) {\n        var match = display_element.querySelector(`#${plugin_id_name}-${i}`);\n        var id = \"Q\" + i;\n        var val: String = \"\";\n        var selected_index = -1;\n        var checked = match.querySelector<HTMLInputElement>(\"input[type=radio]:checked\");\n        if (checked !== null) {\n          val = checked.value;\n          selected_index = Number(checked.dataset.optionIndex);\n        } else {\n          val = \"\";\n        }\n        var obje = {};\n        var name = id;\n        if (match.attributes[\"data-name\"].value !== \"\") {\n          name = match.attributes[\"data-name\"].value;\n        }\n        obje[name] = val;\n        Object.assign(question_data, obje);\n        response_index.push(selected_index);\n      }\n      // save data\n      var trial_data = {\n        rt: response_time,\n        response: question_data,\n        response_index: response_index,\n        question_order: question_order,\n      };\n\n      // next trial\n      this.jsPsych.finishTrial(trial_data);\n    });\n\n    var startTime = performance.now();\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const question_data = {};\n    const response_index = [];\n    let rt = 1000;\n\n    for (let i = 0; i < trial.questions.length; i++) {\n      const q = trial.questions[i];\n      const name = q.name ? q.name : `Q${i}`;\n      const option_index = this.jsPsych.randomization.randomInt(0, q.options.length - 1);\n      question_data[name] = q.options[option_index];\n      response_index.push(option_index);\n      rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);\n    }\n\n    const default_data = {\n      response: question_data,\n      response_index: response_index,\n      rt: rt,\n      question_order: trial.randomize_question_order\n        ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])\n        : [...Array(trial.questions.length).keys()],\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    const answers = Object.entries(data.response);\n    const response_index = Array.isArray(data.response_index) ? data.response_index : [];\n    for (let i = 0; i < answers.length; i++) {\n      let option_index = response_index[i];\n      if (typeof option_index !== \"number\" || option_index < 0) {\n        option_index = trial.questions[i].options.indexOf(answers[i][1]);\n      }\n      if (option_index < 0) {\n        continue;\n      }\n      this.jsPsych.pluginAPI.clickTarget(\n        display_element.querySelector(`#${plugin_id_name}-response-${i}-${option_index}`),\n        ((data.rt - 1000) / answers.length) * (i + 1)\n      );\n    }\n\n    this.jsPsych.pluginAPI.clickTarget(\n      display_element.querySelector(`#${plugin_id_name}-next`),\n      data.rt\n    );\n  }\n}\n\nexport default SurveyMultiChoicePlugin;\n"],"names":["version"],"mappings":"sDAEEA,IAAAA,EAAW,kyBCkGA,UAAA,iuBAAe;;;;;;;;;;;;;;"}

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var jspsych = require('jspsych');
 
-var version = "2.1.0";
+var version = "2.2.0";
 
 const info = {
   name: "survey-multi-choice",
@@ -84,6 +84,11 @@ const info = {
     response: {
       type: jspsych.ParameterType.OBJECT
     },
+    /** An array containing the index of the selected option for each question. Unanswered questions are recorded as -1. */
+    response_index: {
+      type: jspsych.ParameterType.INT,
+      array: true
+    },
     /** The response time in milliseconds for the participant to make a response. The time is measured from when the questions first appear on the screen until the participant's response(s) are submitted. */
     rt: {
       type: jspsych.ParameterType.INT
@@ -142,7 +147,9 @@ class SurveyMultiChoicePlugin {
       if (question.horizontal) {
         question_classes.push(`${plugin_id_name}-horizontal`);
       }
-      html += `<div id="${plugin_id_name}-${question_id}" class="${question_classes.join(" ")}" data-name="${question.name}">`;
+      html += `<div id="${plugin_id_name}-${question_id}" class="${question_classes.join(
+        " "
+      )}" data-name="${question.name}">`;
       html += `<p class="${plugin_id_name}-text survey-multi-choice">${question.prompt}`;
       if (question.required) {
         html += "<span class='required'>*</span>";
@@ -156,7 +163,7 @@ class SurveyMultiChoicePlugin {
         html += `
         <div id="${option_id_name}" class="${plugin_id_name}-option">
           <label class="${plugin_id_name}-text" for="${input_id}">
-            <input type="radio" name="${input_name}" id="${input_id}" value="${question.options[j]}" ${required_attr} />
+            <input type="radio" name="${input_name}" id="${input_id}" value="${question.options[j]}" data-option-index="${j}" ${required_attr} />
             ${question.options[j]}
             </label>
         </div>`;
@@ -172,12 +179,16 @@ class SurveyMultiChoicePlugin {
       var endTime = performance.now();
       var response_time = Math.round(endTime - startTime);
       var question_data = {};
+      var response_index = [];
       for (var i2 = 0; i2 < trial.questions.length; i2++) {
         var match = display_element.querySelector(`#${plugin_id_name}-${i2}`);
         var id = "Q" + i2;
-        var val;
-        if (match.querySelector("input[type=radio]:checked") !== null) {
-          val = match.querySelector("input[type=radio]:checked").value;
+        var val = "";
+        var selected_index = -1;
+        var checked = match.querySelector("input[type=radio]:checked");
+        if (checked !== null) {
+          val = checked.value;
+          selected_index = Number(checked.dataset.optionIndex);
         } else {
           val = "";
         }
@@ -188,10 +199,12 @@ class SurveyMultiChoicePlugin {
         }
         obje[name] = val;
         Object.assign(question_data, obje);
+        response_index.push(selected_index);
       }
       var trial_data = {
         rt: response_time,
         response: question_data,
+        response_index,
         question_order
       };
       this.jsPsych.finishTrial(trial_data);
@@ -209,14 +222,19 @@ class SurveyMultiChoicePlugin {
   }
   create_simulation_data(trial, simulation_options) {
     const question_data = {};
+    const response_index = [];
     let rt = 1e3;
-    for (const q of trial.questions) {
-      const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;
-      question_data[name] = this.jsPsych.randomization.sampleWithoutReplacement(q.options, 1)[0];
+    for (let i = 0; i < trial.questions.length; i++) {
+      const q = trial.questions[i];
+      const name = q.name ? q.name : `Q${i}`;
+      const option_index = this.jsPsych.randomization.randomInt(0, q.options.length - 1);
+      question_data[name] = q.options[option_index];
+      response_index.push(option_index);
       rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);
     }
     const default_data = {
       response: question_data,
+      response_index,
       rt,
       question_order: trial.randomize_question_order ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()]) : [...Array(trial.questions.length).keys()]
     };
@@ -234,13 +252,17 @@ class SurveyMultiChoicePlugin {
     this.trial(display_element, trial);
     load_callback();
     const answers = Object.entries(data.response);
+    const response_index = Array.isArray(data.response_index) ? data.response_index : [];
     for (let i = 0; i < answers.length; i++) {
+      let option_index = response_index[i];
+      if (typeof option_index !== "number" || option_index < 0) {
+        option_index = trial.questions[i].options.indexOf(answers[i][1]);
+      }
+      if (option_index < 0) {
+        continue;
+      }
       this.jsPsych.pluginAPI.clickTarget(
-        display_element.querySelector(
-          `#${plugin_id_name}-response-${i}-${trial.questions[i].options.indexOf(
-            answers[i][1]
-          )}`
-        ),
+        display_element.querySelector(`#${plugin_id_name}-response-${i}-${option_index}`),
         (data.rt - 1e3) / answers.length * (i + 1)
       );
     }

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-survey-multi-choice\",\n  \"version\": \"2.1.0\",\n  \"description\": \"a jspsych plugin for multiple choice survey questions\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-survey-multi-choice\"\n  },\n  \"author\": \"Shane Martin\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/survey-multi-choice\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"survey-multi-choice\",\n  version: version,\n  parameters: {\n    /**\n     * An array of objects, each object represents a question that appears on the screen. Each object contains a prompt,\n     * options, required, and horizontal parameter that will be applied to the question. See examples below for further\n     * clarification.`prompt`: Type string, default value is *undefined*. The string is prompt/question that will be\n     * associated with a group of options (radio buttons). All questions will get presented on the same page (trial).\n     * `options`: Type array, defualt value is *undefined*. An array of strings. The array contains a set of options to\n     * display for an individual question.`required`: Type boolean, default value is null. The boolean value indicates\n     * if a question is required('true') or not ('false'), using the HTML5 `required` attribute. If this parameter is\n     * undefined, the question will be optional. `horizontal`:Type boolean, default value is false. If true, then the\n     * question is centered and the options are displayed horizontally. `name`: Name of the question. Used for storing\n     * data. If left undefined then default names (`Q0`, `Q1`, `...`) will be used for the questions.\n     */\n    questions: {\n      type: ParameterType.COMPLEX,\n      array: true,\n      nested: {\n        /** Question prompt. */\n        prompt: {\n          type: ParameterType.HTML_STRING,\n          default: undefined,\n        },\n        /** Array of multiple choice options for this question. */\n        options: {\n          type: ParameterType.STRING,\n          array: true,\n          default: undefined,\n        },\n        /** Whether or not a response to this question must be given in order to continue. */\n        required: {\n          type: ParameterType.BOOL,\n          default: false,\n        },\n        /** If true, then the question will be centered and options will be displayed horizontally. */\n        horizontal: {\n          type: ParameterType.BOOL,\n          default: false,\n        },\n        /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */\n        name: {\n          type: ParameterType.STRING,\n          default: \"\",\n        },\n      },\n    },\n    /**\n     * If true, the display order of `questions` is randomly determined at the start of the trial. In the data object,\n     * `Q0` will still refer to the first question in the array, regardless of where it was presented visually.\n     */\n    randomize_question_order: {\n      type: ParameterType.BOOL,\n      default: false,\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    /** Label of the button. */\n    button_label: {\n      type: ParameterType.STRING,\n      default: \"Continue\",\n    },\n    /**\n     * This determines whether or not all of the input elements on the page should allow autocomplete. Setting\n     * this to true will enable autocomplete or auto-fill for the form.\n     */\n    autocomplete: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n  },\n  data: {\n    /** An object containing the response for each question. The object will have a separate key (variable) for each question, with the first question in the trial being recorded in `Q0`, the second in `Q1`, and so on. The responses are recorded as integers, representing the position selected on the likert scale for that question. If the `name` parameter is defined for the question, then the response object will use the value of `name` as the key for each question. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    response: {\n      type: ParameterType.OBJECT,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from when the questions first appear on the screen until the participant's response(s) are submitted. */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** An array with the order of questions. For example `[2,0,1]` would indicate that the first question was `trial.questions[2]` (the third item in the `questions` parameter), the second question was `trial.questions[0]`, and the final question was `trial.questions[1]`. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    question_order: {\n      type: ParameterType.INT,\n      array: true,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\nconst plugin_id_name = \"jspsych-survey-multi-choice\";\n\n/**\n * **survey-multi-choice**\n *\n * The survey-multi-choice plugin displays a set of questions with multiple choice response fields. The participant selects a single answer.\n *\n * @author Shane Martin\n * @see {@link https://www.jspsych.org/latest/plugins/survey-multi-choice/ survey-multi-choice plugin documentation on jspsych.org}\n */\nclass SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) { }\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n\n    const trial_form_id = `${plugin_id_name}_form`;\n\n    var html = \"\";\n\n    // inject CSS for trial\n    html += `\n    <style id=\"${plugin_id_name}-css\">\n      .${plugin_id_name}-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }\n      .${plugin_id_name}-text span.required {color: darkred;}\n      .${plugin_id_name}-horizontal .${plugin_id_name}-text {  text-align: center;}\n      .${plugin_id_name}-option { line-height: 2; }\n      .${plugin_id_name}-horizontal .${plugin_id_name}-option {  display: inline-block;  margin-left: 1em;  margin-right: 1em;  vertical-align: top;}\n      label.${plugin_id_name}-text input[type='radio'] {margin-right: 1em;}\n      </style>`;\n\n    // show preamble text\n    if (trial.preamble !== null) {\n      html += `<div id=\"${plugin_id_name}-preamble\" class=\"${plugin_id_name}-preamble\">${trial.preamble}</div>`;\n    }\n\n    // form element\n    if (trial.autocomplete) {\n      html += `<form id=\"${trial_form_id}\">`;\n    } else {\n      html += `<form id=\"${trial_form_id}\" autocomplete=\"off\">`;\n    }\n\n    // generate question order. this is randomized here as opposed to randomizing the order of trial.questions\n    // so that the data are always associated with the same question regardless of order\n    var question_order = [];\n    for (var i = 0; i < trial.questions.length; i++) {\n      question_order.push(i);\n    }\n    if (trial.randomize_question_order) {\n      question_order = this.jsPsych.randomization.shuffle(question_order);\n    }\n\n    // add multiple-choice questions\n    for (var i = 0; i < trial.questions.length; i++) {\n      // get question based on question_order\n      var question = trial.questions[question_order[i]];\n      var question_id = question_order[i];\n\n      // create question container\n      var question_classes = [`${plugin_id_name}-question`];\n      if (question.horizontal) {\n        question_classes.push(`${plugin_id_name}-horizontal`);\n      }\n\n      html += `<div id=\"${plugin_id_name}-${question_id}\" class=\"${question_classes.join(\" \")}\" data-name=\"${question.name}\">`;\n\n      // add question text\n      html += `<p class=\"${plugin_id_name}-text survey-multi-choice\">${question.prompt}`;\n      if (question.required) {\n        html += \"<span class='required'>*</span>\";\n      }\n      html += \"</p>\";\n\n      // create option radio buttons\n      for (var j = 0; j < question.options.length; j++) {\n        // add label and question text\n        var option_id_name = `${plugin_id_name}-option-${question_id}-${j}`;\n        var input_name = `${plugin_id_name}-response-${question_id}`;\n        var input_id = `${plugin_id_name}-response-${question_id}-${j}`;\n\n        var required_attr = question.required ? \"required\" : \"\";\n\n        // add radio button container\n        html += `\n        <div id=\"${option_id_name}\" class=\"${plugin_id_name}-option\">\n          <label class=\"${plugin_id_name}-text\" for=\"${input_id}\">\n            <input type=\"radio\" name=\"${input_name}\" id=\"${input_id}\" value=\"${question.options[j]}\" ${required_attr} />\n            ${question.options[j]}\n            </label>\n        </div>`;\n      }\n\n      html += \"</div>\";\n    }\n\n    // add submit button\n    html += `<input type=\"submit\" id=\"${plugin_id_name}-next\" class=\"${plugin_id_name} jspsych-btn\"${trial.button_label ? ' value=\"' + trial.button_label + '\"' : \"\"} />`;\n    html += \"</form>\";\n\n    // render\n    display_element.innerHTML = html;\n\n    const trial_form = display_element.querySelector<HTMLFormElement>(`#${trial_form_id}`);\n\n    trial_form.addEventListener(\"submit\", (event) => {\n      event.preventDefault();\n      // measure response time\n      var endTime = performance.now();\n      var response_time = Math.round(endTime - startTime);\n\n      // create object to hold responses\n      var question_data = {};\n      for (var i = 0; i < trial.questions.length; i++) {\n        var match = display_element.querySelector(`#${plugin_id_name}-${i}`);\n        var id = \"Q\" + i;\n        var val: String;\n        if (match.querySelector(\"input[type=radio]:checked\") !== null) {\n          val = match.querySelector<HTMLInputElement>(\"input[type=radio]:checked\").value;\n        } else {\n          val = \"\";\n        }\n        var obje = {};\n        var name = id;\n        if (match.attributes[\"data-name\"].value !== \"\") {\n          name = match.attributes[\"data-name\"].value;\n        }\n        obje[name] = val;\n        Object.assign(question_data, obje);\n      }\n      // save data\n      var trial_data = {\n        rt: response_time,\n        response: question_data,\n        question_order: question_order,\n      };\n\n      // next trial\n      this.jsPsych.finishTrial(trial_data);\n    });\n\n    var startTime = performance.now();\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const question_data = {};\n    let rt = 1000;\n\n    for (const q of trial.questions) {\n      const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;\n      question_data[name] = this.jsPsych.randomization.sampleWithoutReplacement(q.options, 1)[0];\n      rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);\n    }\n\n    const default_data = {\n      response: question_data,\n      rt: rt,\n      question_order: trial.randomize_question_order\n        ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])\n        : [...Array(trial.questions.length).keys()],\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    const answers = Object.entries(data.response);\n    for (let i = 0; i < answers.length; i++) {\n      this.jsPsych.pluginAPI.clickTarget(\n        display_element.querySelector(\n          `#${plugin_id_name}-response-${i}-${trial.questions[i].options.indexOf(\n            answers[i][1]\n          )}`\n        ),\n        ((data.rt - 1000) / answers.length) * (i + 1)\n      );\n    }\n\n    this.jsPsych.pluginAPI.clickTarget(\n      display_element.querySelector(`#${plugin_id_name}-next`),\n      data.rt\n    );\n  }\n}\n\nexport default SurveyMultiChoicePlugin;\n"],"names":[],"mappings":";;;;AAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EC6FA,SAAA,EAAA;AAAA;;GAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-survey-multi-choice\",\n  \"version\": \"2.2.0\",\n  \"description\": \"a jspsych plugin for multiple choice survey questions\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-survey-multi-choice\"\n  },\n  \"author\": \"Shane Martin\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/survey-multi-choice\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"survey-multi-choice\",\n  version: version,\n  parameters: {\n    /**\n     * An array of objects, each object represents a question that appears on the screen. Each object contains a prompt,\n     * options, required, and horizontal parameter that will be applied to the question. See examples below for further\n     * clarification.`prompt`: Type string, default value is *undefined*. The string is prompt/question that will be\n     * associated with a group of options (radio buttons). All questions will get presented on the same page (trial).\n     * `options`: Type array, defualt value is *undefined*. An array of strings. The array contains a set of options to\n     * display for an individual question.`required`: Type boolean, default value is null. The boolean value indicates\n     * if a question is required('true') or not ('false'), using the HTML5 `required` attribute. If this parameter is\n     * undefined, the question will be optional. `horizontal`:Type boolean, default value is false. If true, then the\n     * question is centered and the options are displayed horizontally. `name`: Name of the question. Used for storing\n     * data. If left undefined then default names (`Q0`, `Q1`, `...`) will be used for the questions.\n     */\n    questions: {\n      type: ParameterType.COMPLEX,\n      array: true,\n      nested: {\n        /** Question prompt. */\n        prompt: {\n          type: ParameterType.HTML_STRING,\n          default: undefined,\n        },\n        /** Array of multiple choice options for this question. */\n        options: {\n          type: ParameterType.STRING,\n          array: true,\n          default: undefined,\n        },\n        /** Whether or not a response to this question must be given in order to continue. */\n        required: {\n          type: ParameterType.BOOL,\n          default: false,\n        },\n        /** If true, then the question will be centered and options will be displayed horizontally. */\n        horizontal: {\n          type: ParameterType.BOOL,\n          default: false,\n        },\n        /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */\n        name: {\n          type: ParameterType.STRING,\n          default: \"\",\n        },\n      },\n    },\n    /**\n     * If true, the display order of `questions` is randomly determined at the start of the trial. In the data object,\n     * `Q0` will still refer to the first question in the array, regardless of where it was presented visually.\n     */\n    randomize_question_order: {\n      type: ParameterType.BOOL,\n      default: false,\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    /** Label of the button. */\n    button_label: {\n      type: ParameterType.STRING,\n      default: \"Continue\",\n    },\n    /**\n     * This determines whether or not all of the input elements on the page should allow autocomplete. Setting\n     * this to true will enable autocomplete or auto-fill for the form.\n     */\n    autocomplete: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n  },\n  data: {\n    /** An object containing the response for each question. The object will have a separate key (variable) for each question, with the first question in the trial being recorded in `Q0`, the second in `Q1`, and so on. The responses are recorded as integers, representing the position selected on the likert scale for that question. If the `name` parameter is defined for the question, then the response object will use the value of `name` as the key for each question. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    response: {\n      type: ParameterType.OBJECT,\n    },\n    /** An array containing the index of the selected option for each question. Unanswered questions are recorded as -1. */\n    response_index: {\n      type: ParameterType.INT,\n      array: true,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from when the questions first appear on the screen until the participant's response(s) are submitted. */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** An array with the order of questions. For example `[2,0,1]` would indicate that the first question was `trial.questions[2]` (the third item in the `questions` parameter), the second question was `trial.questions[0]`, and the final question was `trial.questions[1]`. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    question_order: {\n      type: ParameterType.INT,\n      array: true,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\nconst plugin_id_name = \"jspsych-survey-multi-choice\";\n\n/**\n * **survey-multi-choice**\n *\n * The survey-multi-choice plugin displays a set of questions with multiple choice response fields. The participant selects a single answer.\n *\n * @author Shane Martin\n * @see {@link https://www.jspsych.org/latest/plugins/survey-multi-choice/ survey-multi-choice plugin documentation on jspsych.org}\n */\nclass SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    const trial_form_id = `${plugin_id_name}_form`;\n\n    var html = \"\";\n\n    // inject CSS for trial\n    html += `\n    <style id=\"${plugin_id_name}-css\">\n      .${plugin_id_name}-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }\n      .${plugin_id_name}-text span.required {color: darkred;}\n      .${plugin_id_name}-horizontal .${plugin_id_name}-text {  text-align: center;}\n      .${plugin_id_name}-option { line-height: 2; }\n      .${plugin_id_name}-horizontal .${plugin_id_name}-option {  display: inline-block;  margin-left: 1em;  margin-right: 1em;  vertical-align: top;}\n      label.${plugin_id_name}-text input[type='radio'] {margin-right: 1em;}\n      </style>`;\n\n    // show preamble text\n    if (trial.preamble !== null) {\n      html += `<div id=\"${plugin_id_name}-preamble\" class=\"${plugin_id_name}-preamble\">${trial.preamble}</div>`;\n    }\n\n    // form element\n    if (trial.autocomplete) {\n      html += `<form id=\"${trial_form_id}\">`;\n    } else {\n      html += `<form id=\"${trial_form_id}\" autocomplete=\"off\">`;\n    }\n\n    // generate question order. this is randomized here as opposed to randomizing the order of trial.questions\n    // so that the data are always associated with the same question regardless of order\n    var question_order = [];\n    for (var i = 0; i < trial.questions.length; i++) {\n      question_order.push(i);\n    }\n    if (trial.randomize_question_order) {\n      question_order = this.jsPsych.randomization.shuffle(question_order);\n    }\n\n    // add multiple-choice questions\n    for (var i = 0; i < trial.questions.length; i++) {\n      // get question based on question_order\n      var question = trial.questions[question_order[i]];\n      var question_id = question_order[i];\n\n      // create question container\n      var question_classes = [`${plugin_id_name}-question`];\n      if (question.horizontal) {\n        question_classes.push(`${plugin_id_name}-horizontal`);\n      }\n\n      html += `<div id=\"${plugin_id_name}-${question_id}\" class=\"${question_classes.join(\n        \" \"\n      )}\" data-name=\"${question.name}\">`;\n\n      // add question text\n      html += `<p class=\"${plugin_id_name}-text survey-multi-choice\">${question.prompt}`;\n      if (question.required) {\n        html += \"<span class='required'>*</span>\";\n      }\n      html += \"</p>\";\n\n      // create option radio buttons\n      for (var j = 0; j < question.options.length; j++) {\n        // add label and question text\n        var option_id_name = `${plugin_id_name}-option-${question_id}-${j}`;\n        var input_name = `${plugin_id_name}-response-${question_id}`;\n        var input_id = `${plugin_id_name}-response-${question_id}-${j}`;\n\n        var required_attr = question.required ? \"required\" : \"\";\n\n        // add radio button container\n        html += `\n        <div id=\"${option_id_name}\" class=\"${plugin_id_name}-option\">\n          <label class=\"${plugin_id_name}-text\" for=\"${input_id}\">\n            <input type=\"radio\" name=\"${input_name}\" id=\"${input_id}\" value=\"${question.options[j]}\" data-option-index=\"${j}\" ${required_attr} />\n            ${question.options[j]}\n            </label>\n        </div>`;\n      }\n\n      html += \"</div>\";\n    }\n\n    // add submit button\n    html += `<input type=\"submit\" id=\"${plugin_id_name}-next\" class=\"${plugin_id_name} jspsych-btn\"${\n      trial.button_label ? ' value=\"' + trial.button_label + '\"' : \"\"\n    } />`;\n    html += \"</form>\";\n\n    // render\n    display_element.innerHTML = html;\n\n    const trial_form = display_element.querySelector<HTMLFormElement>(`#${trial_form_id}`);\n\n    trial_form.addEventListener(\"submit\", (event) => {\n      event.preventDefault();\n      // measure response time\n      var endTime = performance.now();\n      var response_time = Math.round(endTime - startTime);\n\n      // create object to hold responses\n      var question_data = {};\n      var response_index = [];\n      for (var i = 0; i < trial.questions.length; i++) {\n        var match = display_element.querySelector(`#${plugin_id_name}-${i}`);\n        var id = \"Q\" + i;\n        var val: String = \"\";\n        var selected_index = -1;\n        var checked = match.querySelector<HTMLInputElement>(\"input[type=radio]:checked\");\n        if (checked !== null) {\n          val = checked.value;\n          selected_index = Number(checked.dataset.optionIndex);\n        } else {\n          val = \"\";\n        }\n        var obje = {};\n        var name = id;\n        if (match.attributes[\"data-name\"].value !== \"\") {\n          name = match.attributes[\"data-name\"].value;\n        }\n        obje[name] = val;\n        Object.assign(question_data, obje);\n        response_index.push(selected_index);\n      }\n      // save data\n      var trial_data = {\n        rt: response_time,\n        response: question_data,\n        response_index: response_index,\n        question_order: question_order,\n      };\n\n      // next trial\n      this.jsPsych.finishTrial(trial_data);\n    });\n\n    var startTime = performance.now();\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const question_data = {};\n    const response_index = [];\n    let rt = 1000;\n\n    for (let i = 0; i < trial.questions.length; i++) {\n      const q = trial.questions[i];\n      const name = q.name ? q.name : `Q${i}`;\n      const option_index = this.jsPsych.randomization.randomInt(0, q.options.length - 1);\n      question_data[name] = q.options[option_index];\n      response_index.push(option_index);\n      rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);\n    }\n\n    const default_data = {\n      response: question_data,\n      response_index: response_index,\n      rt: rt,\n      question_order: trial.randomize_question_order\n        ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])\n        : [...Array(trial.questions.length).keys()],\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    const answers = Object.entries(data.response);\n    const response_index = Array.isArray(data.response_index) ? data.response_index : [];\n    for (let i = 0; i < answers.length; i++) {\n      let option_index = response_index[i];\n      if (typeof option_index !== \"number\" || option_index < 0) {\n        option_index = trial.questions[i].options.indexOf(answers[i][1]);\n      }\n      if (option_index < 0) {\n        continue;\n      }\n      this.jsPsych.pluginAPI.clickTarget(\n        display_element.querySelector(`#${plugin_id_name}-response-${i}-${option_index}`),\n        ((data.rt - 1000) / answers.length) * (i + 1)\n      );\n    }\n\n    this.jsPsych.pluginAPI.clickTarget(\n      display_element.querySelector(`#${plugin_id_name}-next`),\n      data.rt\n    );\n  }\n}\n\nexport default SurveyMultiChoicePlugin;\n"],"names":[],"mappings":";;;;AAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECkGA,SAAA,EAAA;AAAA;;GAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -80,6 +80,11 @@ declare const info: {
         readonly response: {
             readonly type: ParameterType.OBJECT;
         };
+        /** An array containing the index of the selected option for each question. Unanswered questions are recorded as -1. */
+        readonly response_index: {
+            readonly type: ParameterType.INT;
+            readonly array: true;
+        };
         /** The response time in milliseconds for the participant to make a response. The time is measured from when the questions first appear on the screen until the participant's response(s) are submitted. */
         readonly rt: {
             readonly type: ParameterType.INT;
@@ -183,6 +188,11 @@ declare class SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {
             readonly response: {
                 readonly type: ParameterType.OBJECT;
             };
+            /** An array containing the index of the selected option for each question. Unanswered questions are recorded as -1. */
+            readonly response_index: {
+                readonly type: ParameterType.INT;
+                readonly array: true;
+            };
             /** The response time in milliseconds for the participant to make a response. The time is measured from when the questions first appear on the screen until the participant's response(s) are submitted. */
             readonly rt: {
                 readonly type: ParameterType.INT;

package/dist/index.js

@@ -1,6 +1,6 @@
 import { ParameterType } from 'jspsych';
 
-var version = "2.1.0";
+var version = "2.2.0";
 
 const info = {
   name: "survey-multi-choice",
@@ -82,6 +82,11 @@ const info = {
     response: {
       type: ParameterType.OBJECT
     },
+    /** An array containing the index of the selected option for each question. Unanswered questions are recorded as -1. */
+    response_index: {
+      type: ParameterType.INT,
+      array: true
+    },
     /** The response time in milliseconds for the participant to make a response. The time is measured from when the questions first appear on the screen until the participant's response(s) are submitted. */
     rt: {
       type: ParameterType.INT
@@ -140,7 +145,9 @@ class SurveyMultiChoicePlugin {
       if (question.horizontal) {
         question_classes.push(`${plugin_id_name}-horizontal`);
       }
-      html += `<div id="${plugin_id_name}-${question_id}" class="${question_classes.join(" ")}" data-name="${question.name}">`;
+      html += `<div id="${plugin_id_name}-${question_id}" class="${question_classes.join(
+        " "
+      )}" data-name="${question.name}">`;
       html += `<p class="${plugin_id_name}-text survey-multi-choice">${question.prompt}`;
       if (question.required) {
         html += "<span class='required'>*</span>";
@@ -154,7 +161,7 @@ class SurveyMultiChoicePlugin {
         html += `
         <div id="${option_id_name}" class="${plugin_id_name}-option">
           <label class="${plugin_id_name}-text" for="${input_id}">
-            <input type="radio" name="${input_name}" id="${input_id}" value="${question.options[j]}" ${required_attr} />
+            <input type="radio" name="${input_name}" id="${input_id}" value="${question.options[j]}" data-option-index="${j}" ${required_attr} />
             ${question.options[j]}
             </label>
         </div>`;
@@ -170,12 +177,16 @@ class SurveyMultiChoicePlugin {
       var endTime = performance.now();
       var response_time = Math.round(endTime - startTime);
       var question_data = {};
+      var response_index = [];
       for (var i2 = 0; i2 < trial.questions.length; i2++) {
         var match = display_element.querySelector(`#${plugin_id_name}-${i2}`);
         var id = "Q" + i2;
-        var val;
-        if (match.querySelector("input[type=radio]:checked") !== null) {
-          val = match.querySelector("input[type=radio]:checked").value;
+        var val = "";
+        var selected_index = -1;
+        var checked = match.querySelector("input[type=radio]:checked");
+        if (checked !== null) {
+          val = checked.value;
+          selected_index = Number(checked.dataset.optionIndex);
         } else {
           val = "";
         }
@@ -186,10 +197,12 @@ class SurveyMultiChoicePlugin {
         }
         obje[name] = val;
         Object.assign(question_data, obje);
+        response_index.push(selected_index);
       }
       var trial_data = {
         rt: response_time,
         response: question_data,
+        response_index,
         question_order
       };
       this.jsPsych.finishTrial(trial_data);
@@ -207,14 +220,19 @@ class SurveyMultiChoicePlugin {
   }
   create_simulation_data(trial, simulation_options) {
     const question_data = {};
+    const response_index = [];
     let rt = 1e3;
-    for (const q of trial.questions) {
-      const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;
-      question_data[name] = this.jsPsych.randomization.sampleWithoutReplacement(q.options, 1)[0];
+    for (let i = 0; i < trial.questions.length; i++) {
+      const q = trial.questions[i];
+      const name = q.name ? q.name : `Q${i}`;
+      const option_index = this.jsPsych.randomization.randomInt(0, q.options.length - 1);
+      question_data[name] = q.options[option_index];
+      response_index.push(option_index);
       rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);
     }
     const default_data = {
       response: question_data,
+      response_index,
       rt,
       question_order: trial.randomize_question_order ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()]) : [...Array(trial.questions.length).keys()]
     };
@@ -232,13 +250,17 @@ class SurveyMultiChoicePlugin {
     this.trial(display_element, trial);
     load_callback();
     const answers = Object.entries(data.response);
+    const response_index = Array.isArray(data.response_index) ? data.response_index : [];
     for (let i = 0; i < answers.length; i++) {
+      let option_index = response_index[i];
+      if (typeof option_index !== "number" || option_index < 0) {
+        option_index = trial.questions[i].options.indexOf(answers[i][1]);
+      }
+      if (option_index < 0) {
+        continue;
+      }
       this.jsPsych.pluginAPI.clickTarget(
-        display_element.querySelector(
-          `#${plugin_id_name}-response-${i}-${trial.questions[i].options.indexOf(
-            answers[i][1]
-          )}`
-        ),
+        display_element.querySelector(`#${plugin_id_name}-response-${i}-${option_index}`),
         (data.rt - 1e3) / answers.length * (i + 1)
       );
     }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-survey-multi-choice\",\n  \"version\": \"2.1.0\",\n  \"description\": \"a jspsych plugin for multiple choice survey questions\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-survey-multi-choice\"\n  },\n  \"author\": \"Shane Martin\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/survey-multi-choice\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"survey-multi-choice\",\n  version: version,\n  parameters: {\n    /**\n     * An array of objects, each object represents a question that appears on the screen. Each object contains a prompt,\n     * options, required, and horizontal parameter that will be applied to the question. See examples below for further\n     * clarification.`prompt`: Type string, default value is *undefined*. The string is prompt/question that will be\n     * associated with a group of options (radio buttons). All questions will get presented on the same page (trial).\n     * `options`: Type array, defualt value is *undefined*. An array of strings. The array contains a set of options to\n     * display for an individual question.`required`: Type boolean, default value is null. The boolean value indicates\n     * if a question is required('true') or not ('false'), using the HTML5 `required` attribute. If this parameter is\n     * undefined, the question will be optional. `horizontal`:Type boolean, default value is false. If true, then the\n     * question is centered and the options are displayed horizontally. `name`: Name of the question. Used for storing\n     * data. If left undefined then default names (`Q0`, `Q1`, `...`) will be used for the questions.\n     */\n    questions: {\n      type: ParameterType.COMPLEX,\n      array: true,\n      nested: {\n        /** Question prompt. */\n        prompt: {\n          type: ParameterType.HTML_STRING,\n          default: undefined,\n        },\n        /** Array of multiple choice options for this question. */\n        options: {\n          type: ParameterType.STRING,\n          array: true,\n          default: undefined,\n        },\n        /** Whether or not a response to this question must be given in order to continue. */\n        required: {\n          type: ParameterType.BOOL,\n          default: false,\n        },\n        /** If true, then the question will be centered and options will be displayed horizontally. */\n        horizontal: {\n          type: ParameterType.BOOL,\n          default: false,\n        },\n        /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */\n        name: {\n          type: ParameterType.STRING,\n          default: \"\",\n        },\n      },\n    },\n    /**\n     * If true, the display order of `questions` is randomly determined at the start of the trial. In the data object,\n     * `Q0` will still refer to the first question in the array, regardless of where it was presented visually.\n     */\n    randomize_question_order: {\n      type: ParameterType.BOOL,\n      default: false,\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    /** Label of the button. */\n    button_label: {\n      type: ParameterType.STRING,\n      default: \"Continue\",\n    },\n    /**\n     * This determines whether or not all of the input elements on the page should allow autocomplete. Setting\n     * this to true will enable autocomplete or auto-fill for the form.\n     */\n    autocomplete: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n  },\n  data: {\n    /** An object containing the response for each question. The object will have a separate key (variable) for each question, with the first question in the trial being recorded in `Q0`, the second in `Q1`, and so on. The responses are recorded as integers, representing the position selected on the likert scale for that question. If the `name` parameter is defined for the question, then the response object will use the value of `name` as the key for each question. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    response: {\n      type: ParameterType.OBJECT,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from when the questions first appear on the screen until the participant's response(s) are submitted. */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** An array with the order of questions. For example `[2,0,1]` would indicate that the first question was `trial.questions[2]` (the third item in the `questions` parameter), the second question was `trial.questions[0]`, and the final question was `trial.questions[1]`. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    question_order: {\n      type: ParameterType.INT,\n      array: true,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\nconst plugin_id_name = \"jspsych-survey-multi-choice\";\n\n/**\n * **survey-multi-choice**\n *\n * The survey-multi-choice plugin displays a set of questions with multiple choice response fields. The participant selects a single answer.\n *\n * @author Shane Martin\n * @see {@link https://www.jspsych.org/latest/plugins/survey-multi-choice/ survey-multi-choice plugin documentation on jspsych.org}\n */\nclass SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) { }\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n\n    const trial_form_id = `${plugin_id_name}_form`;\n\n    var html = \"\";\n\n    // inject CSS for trial\n    html += `\n    <style id=\"${plugin_id_name}-css\">\n      .${plugin_id_name}-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }\n      .${plugin_id_name}-text span.required {color: darkred;}\n      .${plugin_id_name}-horizontal .${plugin_id_name}-text {  text-align: center;}\n      .${plugin_id_name}-option { line-height: 2; }\n      .${plugin_id_name}-horizontal .${plugin_id_name}-option {  display: inline-block;  margin-left: 1em;  margin-right: 1em;  vertical-align: top;}\n      label.${plugin_id_name}-text input[type='radio'] {margin-right: 1em;}\n      </style>`;\n\n    // show preamble text\n    if (trial.preamble !== null) {\n      html += `<div id=\"${plugin_id_name}-preamble\" class=\"${plugin_id_name}-preamble\">${trial.preamble}</div>`;\n    }\n\n    // form element\n    if (trial.autocomplete) {\n      html += `<form id=\"${trial_form_id}\">`;\n    } else {\n      html += `<form id=\"${trial_form_id}\" autocomplete=\"off\">`;\n    }\n\n    // generate question order. this is randomized here as opposed to randomizing the order of trial.questions\n    // so that the data are always associated with the same question regardless of order\n    var question_order = [];\n    for (var i = 0; i < trial.questions.length; i++) {\n      question_order.push(i);\n    }\n    if (trial.randomize_question_order) {\n      question_order = this.jsPsych.randomization.shuffle(question_order);\n    }\n\n    // add multiple-choice questions\n    for (var i = 0; i < trial.questions.length; i++) {\n      // get question based on question_order\n      var question = trial.questions[question_order[i]];\n      var question_id = question_order[i];\n\n      // create question container\n      var question_classes = [`${plugin_id_name}-question`];\n      if (question.horizontal) {\n        question_classes.push(`${plugin_id_name}-horizontal`);\n      }\n\n      html += `<div id=\"${plugin_id_name}-${question_id}\" class=\"${question_classes.join(\" \")}\" data-name=\"${question.name}\">`;\n\n      // add question text\n      html += `<p class=\"${plugin_id_name}-text survey-multi-choice\">${question.prompt}`;\n      if (question.required) {\n        html += \"<span class='required'>*</span>\";\n      }\n      html += \"</p>\";\n\n      // create option radio buttons\n      for (var j = 0; j < question.options.length; j++) {\n        // add label and question text\n        var option_id_name = `${plugin_id_name}-option-${question_id}-${j}`;\n        var input_name = `${plugin_id_name}-response-${question_id}`;\n        var input_id = `${plugin_id_name}-response-${question_id}-${j}`;\n\n        var required_attr = question.required ? \"required\" : \"\";\n\n        // add radio button container\n        html += `\n        <div id=\"${option_id_name}\" class=\"${plugin_id_name}-option\">\n          <label class=\"${plugin_id_name}-text\" for=\"${input_id}\">\n            <input type=\"radio\" name=\"${input_name}\" id=\"${input_id}\" value=\"${question.options[j]}\" ${required_attr} />\n            ${question.options[j]}\n            </label>\n        </div>`;\n      }\n\n      html += \"</div>\";\n    }\n\n    // add submit button\n    html += `<input type=\"submit\" id=\"${plugin_id_name}-next\" class=\"${plugin_id_name} jspsych-btn\"${trial.button_label ? ' value=\"' + trial.button_label + '\"' : \"\"} />`;\n    html += \"</form>\";\n\n    // render\n    display_element.innerHTML = html;\n\n    const trial_form = display_element.querySelector<HTMLFormElement>(`#${trial_form_id}`);\n\n    trial_form.addEventListener(\"submit\", (event) => {\n      event.preventDefault();\n      // measure response time\n      var endTime = performance.now();\n      var response_time = Math.round(endTime - startTime);\n\n      // create object to hold responses\n      var question_data = {};\n      for (var i = 0; i < trial.questions.length; i++) {\n        var match = display_element.querySelector(`#${plugin_id_name}-${i}`);\n        var id = \"Q\" + i;\n        var val: String;\n        if (match.querySelector(\"input[type=radio]:checked\") !== null) {\n          val = match.querySelector<HTMLInputElement>(\"input[type=radio]:checked\").value;\n        } else {\n          val = \"\";\n        }\n        var obje = {};\n        var name = id;\n        if (match.attributes[\"data-name\"].value !== \"\") {\n          name = match.attributes[\"data-name\"].value;\n        }\n        obje[name] = val;\n        Object.assign(question_data, obje);\n      }\n      // save data\n      var trial_data = {\n        rt: response_time,\n        response: question_data,\n        question_order: question_order,\n      };\n\n      // next trial\n      this.jsPsych.finishTrial(trial_data);\n    });\n\n    var startTime = performance.now();\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const question_data = {};\n    let rt = 1000;\n\n    for (const q of trial.questions) {\n      const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;\n      question_data[name] = this.jsPsych.randomization.sampleWithoutReplacement(q.options, 1)[0];\n      rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);\n    }\n\n    const default_data = {\n      response: question_data,\n      rt: rt,\n      question_order: trial.randomize_question_order\n        ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])\n        : [...Array(trial.questions.length).keys()],\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    const answers = Object.entries(data.response);\n    for (let i = 0; i < answers.length; i++) {\n      this.jsPsych.pluginAPI.clickTarget(\n        display_element.querySelector(\n          `#${plugin_id_name}-response-${i}-${trial.questions[i].options.indexOf(\n            answers[i][1]\n          )}`\n        ),\n        ((data.rt - 1000) / answers.length) * (i + 1)\n      );\n    }\n\n    this.jsPsych.pluginAPI.clickTarget(\n      display_element.querySelector(`#${plugin_id_name}-next`),\n      data.rt\n    );\n  }\n}\n\nexport default SurveyMultiChoicePlugin;\n"],"names":[],"mappings":";;AAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EC6FA,SAAA,EAAA;AAAA;;GAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-survey-multi-choice\",\n  \"version\": \"2.2.0\",\n  \"description\": \"a jspsych plugin for multiple choice survey questions\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-survey-multi-choice\"\n  },\n  \"author\": \"Shane Martin\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/survey-multi-choice\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"survey-multi-choice\",\n  version: version,\n  parameters: {\n    /**\n     * An array of objects, each object represents a question that appears on the screen. Each object contains a prompt,\n     * options, required, and horizontal parameter that will be applied to the question. See examples below for further\n     * clarification.`prompt`: Type string, default value is *undefined*. The string is prompt/question that will be\n     * associated with a group of options (radio buttons). All questions will get presented on the same page (trial).\n     * `options`: Type array, defualt value is *undefined*. An array of strings. The array contains a set of options to\n     * display for an individual question.`required`: Type boolean, default value is null. The boolean value indicates\n     * if a question is required('true') or not ('false'), using the HTML5 `required` attribute. If this parameter is\n     * undefined, the question will be optional. `horizontal`:Type boolean, default value is false. If true, then the\n     * question is centered and the options are displayed horizontally. `name`: Name of the question. Used for storing\n     * data. If left undefined then default names (`Q0`, `Q1`, `...`) will be used for the questions.\n     */\n    questions: {\n      type: ParameterType.COMPLEX,\n      array: true,\n      nested: {\n        /** Question prompt. */\n        prompt: {\n          type: ParameterType.HTML_STRING,\n          default: undefined,\n        },\n        /** Array of multiple choice options for this question. */\n        options: {\n          type: ParameterType.STRING,\n          array: true,\n          default: undefined,\n        },\n        /** Whether or not a response to this question must be given in order to continue. */\n        required: {\n          type: ParameterType.BOOL,\n          default: false,\n        },\n        /** If true, then the question will be centered and options will be displayed horizontally. */\n        horizontal: {\n          type: ParameterType.BOOL,\n          default: false,\n        },\n        /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */\n        name: {\n          type: ParameterType.STRING,\n          default: \"\",\n        },\n      },\n    },\n    /**\n     * If true, the display order of `questions` is randomly determined at the start of the trial. In the data object,\n     * `Q0` will still refer to the first question in the array, regardless of where it was presented visually.\n     */\n    randomize_question_order: {\n      type: ParameterType.BOOL,\n      default: false,\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    /** Label of the button. */\n    button_label: {\n      type: ParameterType.STRING,\n      default: \"Continue\",\n    },\n    /**\n     * This determines whether or not all of the input elements on the page should allow autocomplete. Setting\n     * this to true will enable autocomplete or auto-fill for the form.\n     */\n    autocomplete: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n  },\n  data: {\n    /** An object containing the response for each question. The object will have a separate key (variable) for each question, with the first question in the trial being recorded in `Q0`, the second in `Q1`, and so on. The responses are recorded as integers, representing the position selected on the likert scale for that question. If the `name` parameter is defined for the question, then the response object will use the value of `name` as the key for each question. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    response: {\n      type: ParameterType.OBJECT,\n    },\n    /** An array containing the index of the selected option for each question. Unanswered questions are recorded as -1. */\n    response_index: {\n      type: ParameterType.INT,\n      array: true,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from when the questions first appear on the screen until the participant's response(s) are submitted. */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** An array with the order of questions. For example `[2,0,1]` would indicate that the first question was `trial.questions[2]` (the third item in the `questions` parameter), the second question was `trial.questions[0]`, and the final question was `trial.questions[1]`. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    question_order: {\n      type: ParameterType.INT,\n      array: true,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\nconst plugin_id_name = \"jspsych-survey-multi-choice\";\n\n/**\n * **survey-multi-choice**\n *\n * The survey-multi-choice plugin displays a set of questions with multiple choice response fields. The participant selects a single answer.\n *\n * @author Shane Martin\n * @see {@link https://www.jspsych.org/latest/plugins/survey-multi-choice/ survey-multi-choice plugin documentation on jspsych.org}\n */\nclass SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    const trial_form_id = `${plugin_id_name}_form`;\n\n    var html = \"\";\n\n    // inject CSS for trial\n    html += `\n    <style id=\"${plugin_id_name}-css\">\n      .${plugin_id_name}-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }\n      .${plugin_id_name}-text span.required {color: darkred;}\n      .${plugin_id_name}-horizontal .${plugin_id_name}-text {  text-align: center;}\n      .${plugin_id_name}-option { line-height: 2; }\n      .${plugin_id_name}-horizontal .${plugin_id_name}-option {  display: inline-block;  margin-left: 1em;  margin-right: 1em;  vertical-align: top;}\n      label.${plugin_id_name}-text input[type='radio'] {margin-right: 1em;}\n      </style>`;\n\n    // show preamble text\n    if (trial.preamble !== null) {\n      html += `<div id=\"${plugin_id_name}-preamble\" class=\"${plugin_id_name}-preamble\">${trial.preamble}</div>`;\n    }\n\n    // form element\n    if (trial.autocomplete) {\n      html += `<form id=\"${trial_form_id}\">`;\n    } else {\n      html += `<form id=\"${trial_form_id}\" autocomplete=\"off\">`;\n    }\n\n    // generate question order. this is randomized here as opposed to randomizing the order of trial.questions\n    // so that the data are always associated with the same question regardless of order\n    var question_order = [];\n    for (var i = 0; i < trial.questions.length; i++) {\n      question_order.push(i);\n    }\n    if (trial.randomize_question_order) {\n      question_order = this.jsPsych.randomization.shuffle(question_order);\n    }\n\n    // add multiple-choice questions\n    for (var i = 0; i < trial.questions.length; i++) {\n      // get question based on question_order\n      var question = trial.questions[question_order[i]];\n      var question_id = question_order[i];\n\n      // create question container\n      var question_classes = [`${plugin_id_name}-question`];\n      if (question.horizontal) {\n        question_classes.push(`${plugin_id_name}-horizontal`);\n      }\n\n      html += `<div id=\"${plugin_id_name}-${question_id}\" class=\"${question_classes.join(\n        \" \"\n      )}\" data-name=\"${question.name}\">`;\n\n      // add question text\n      html += `<p class=\"${plugin_id_name}-text survey-multi-choice\">${question.prompt}`;\n      if (question.required) {\n        html += \"<span class='required'>*</span>\";\n      }\n      html += \"</p>\";\n\n      // create option radio buttons\n      for (var j = 0; j < question.options.length; j++) {\n        // add label and question text\n        var option_id_name = `${plugin_id_name}-option-${question_id}-${j}`;\n        var input_name = `${plugin_id_name}-response-${question_id}`;\n        var input_id = `${plugin_id_name}-response-${question_id}-${j}`;\n\n        var required_attr = question.required ? \"required\" : \"\";\n\n        // add radio button container\n        html += `\n        <div id=\"${option_id_name}\" class=\"${plugin_id_name}-option\">\n          <label class=\"${plugin_id_name}-text\" for=\"${input_id}\">\n            <input type=\"radio\" name=\"${input_name}\" id=\"${input_id}\" value=\"${question.options[j]}\" data-option-index=\"${j}\" ${required_attr} />\n            ${question.options[j]}\n            </label>\n        </div>`;\n      }\n\n      html += \"</div>\";\n    }\n\n    // add submit button\n    html += `<input type=\"submit\" id=\"${plugin_id_name}-next\" class=\"${plugin_id_name} jspsych-btn\"${\n      trial.button_label ? ' value=\"' + trial.button_label + '\"' : \"\"\n    } />`;\n    html += \"</form>\";\n\n    // render\n    display_element.innerHTML = html;\n\n    const trial_form = display_element.querySelector<HTMLFormElement>(`#${trial_form_id}`);\n\n    trial_form.addEventListener(\"submit\", (event) => {\n      event.preventDefault();\n      // measure response time\n      var endTime = performance.now();\n      var response_time = Math.round(endTime - startTime);\n\n      // create object to hold responses\n      var question_data = {};\n      var response_index = [];\n      for (var i = 0; i < trial.questions.length; i++) {\n        var match = display_element.querySelector(`#${plugin_id_name}-${i}`);\n        var id = \"Q\" + i;\n        var val: String = \"\";\n        var selected_index = -1;\n        var checked = match.querySelector<HTMLInputElement>(\"input[type=radio]:checked\");\n        if (checked !== null) {\n          val = checked.value;\n          selected_index = Number(checked.dataset.optionIndex);\n        } else {\n          val = \"\";\n        }\n        var obje = {};\n        var name = id;\n        if (match.attributes[\"data-name\"].value !== \"\") {\n          name = match.attributes[\"data-name\"].value;\n        }\n        obje[name] = val;\n        Object.assign(question_data, obje);\n        response_index.push(selected_index);\n      }\n      // save data\n      var trial_data = {\n        rt: response_time,\n        response: question_data,\n        response_index: response_index,\n        question_order: question_order,\n      };\n\n      // next trial\n      this.jsPsych.finishTrial(trial_data);\n    });\n\n    var startTime = performance.now();\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const question_data = {};\n    const response_index = [];\n    let rt = 1000;\n\n    for (let i = 0; i < trial.questions.length; i++) {\n      const q = trial.questions[i];\n      const name = q.name ? q.name : `Q${i}`;\n      const option_index = this.jsPsych.randomization.randomInt(0, q.options.length - 1);\n      question_data[name] = q.options[option_index];\n      response_index.push(option_index);\n      rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);\n    }\n\n    const default_data = {\n      response: question_data,\n      response_index: response_index,\n      rt: rt,\n      question_order: trial.randomize_question_order\n        ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])\n        : [...Array(trial.questions.length).keys()],\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    const answers = Object.entries(data.response);\n    const response_index = Array.isArray(data.response_index) ? data.response_index : [];\n    for (let i = 0; i < answers.length; i++) {\n      let option_index = response_index[i];\n      if (typeof option_index !== \"number\" || option_index < 0) {\n        option_index = trial.questions[i].options.indexOf(answers[i][1]);\n      }\n      if (option_index < 0) {\n        continue;\n      }\n      this.jsPsych.pluginAPI.clickTarget(\n        display_element.querySelector(`#${plugin_id_name}-response-${i}-${option_index}`),\n        ((data.rt - 1000) / answers.length) * (i + 1)\n      );\n    }\n\n    this.jsPsych.pluginAPI.clickTarget(\n      display_element.querySelector(`#${plugin_id_name}-next`),\n      data.rt\n    );\n  }\n}\n\nexport default SurveyMultiChoicePlugin;\n"],"names":[],"mappings":";;AAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECkGA,SAAA,EAAA;AAAA;;GAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jspsych/plugin-survey-multi-choice",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "a jspsych plugin for multiple choice survey questions",
   "type": "module",
   "main": "dist/index.cjs",

package/src/index.spec.ts

@@ -1,49 +1,58 @@
 import { clickTarget, simulateTimeline, startTimeline } from "@jspsych/test-utils";
-
 import { initJsPsych } from "jspsych";
+
 import surveyMultiChoice from ".";
 
 jest.useFakeTimers();
 
-const getInputElement = (choiceId: number, value: string) =>
-  document.querySelector(
+const getInputElement = (choiceId: number, value: string, displayElement: HTMLElement) =>
+  displayElement.querySelector(
     `#jspsych-survey-multi-choice-${choiceId} input[value="${value}"]`
   ) as HTMLInputElement;
 
+const getInputElementByIndex = (
+  choiceId: number,
+  optionIndex: number,
+  displayElement: HTMLElement
+) =>
+  displayElement.querySelector(
+    `#jspsych-survey-multi-choice-response-${choiceId}-${optionIndex}`
+  ) as HTMLInputElement;
+
 describe("survey-multi-choice plugin", () => {
   test("properly ends when has sibling form", async () => {
-
-    const container = document.createElement('div')
-    const outerForm = document.createElement('form')
-    outerForm.id = 'outer_form'
-    container.appendChild(outerForm)
-    const innerDiv = document.createElement('div')
-    innerDiv.id = 'target_id';
+    const container = document.createElement("div");
+    const outerForm = document.createElement("form");
+    outerForm.id = "outer_form";
+    container.appendChild(outerForm);
+    const innerDiv = document.createElement("div");
+    innerDiv.id = "target_id";
     container.appendChild(innerDiv);
-    document.body.appendChild(container)
-    const jsPsychInst = initJsPsych({ display_element: innerDiv })
+    document.body.appendChild(container);
+    const jsPsychInst = initJsPsych({ display_element: innerDiv });
     const options = ["a", "b", "c"];
 
-    const { getData, expectFinished } = await startTimeline([
-      {
-        type: surveyMultiChoice,
-        questions: [
-          { prompt: "Q0", options },
-          { prompt: "Q1", options },
-        ]
-      },
-    ], jsPsychInst);
+    const { displayElement, expectFinished } = await startTimeline(
+      [
+        {
+          type: surveyMultiChoice,
+          questions: [
+            { prompt: "Q0", options },
+            { prompt: "Q1", options },
+          ],
+        },
+      ],
+      jsPsychInst
+    );
 
-    getInputElement(0, "a").checked = true;
-    await clickTarget(document.querySelector("#jspsych-survey-multi-choice-next"));
+    getInputElement(0, "a", displayElement).checked = true;
+    await clickTarget(displayElement.querySelector("#jspsych-survey-multi-choice-next"));
     await expectFinished();
-
-  })
-
+  });
 
   test("data are logged with the right question when randomize order is true", async () => {
     var scale = ["a", "b", "c", "d", "e"];
-    const { getData, expectFinished } = await startTimeline([
+    const { getData, expectFinished, displayElement } = await startTimeline([
       {
         type: surveyMultiChoice,
         questions: [
@@ -57,13 +66,13 @@ describe("survey-multi-choice plugin", () => {
       },
     ]);
 
-    getInputElement(0, "a").checked = true;
-    getInputElement(1, "b").checked = true;
-    getInputElement(2, "c").checked = true;
-    getInputElement(3, "d").checked = true;
-    getInputElement(4, "e").checked = true;
+    getInputElement(0, "a", displayElement).checked = true;
+    getInputElement(1, "b", displayElement).checked = true;
+    getInputElement(2, "c", displayElement).checked = true;
+    getInputElement(3, "d", displayElement).checked = true;
+    getInputElement(4, "e", displayElement).checked = true;
 
-    await clickTarget(document.querySelector("#jspsych-survey-multi-choice-next"));
+    await clickTarget(displayElement.querySelector("#jspsych-survey-multi-choice-next"));
 
     await expectFinished();
 
@@ -74,6 +83,42 @@ describe("survey-multi-choice plugin", () => {
     expect(surveyData.Q3).toBe("d");
     expect(surveyData.Q4).toBe("e");
   });
+
+  test("records response_index for duplicate options", async () => {
+    const options = ["Little", "", "", "Much"];
+    const { getData, expectFinished, displayElement } = await startTimeline([
+      {
+        type: surveyMultiChoice,
+        questions: [{ prompt: "How much", options, required: false }],
+      },
+    ]);
+
+    getInputElementByIndex(0, 2, displayElement).checked = true;
+
+    await clickTarget(displayElement.querySelector("#jspsych-survey-multi-choice-next"));
+    await expectFinished();
+
+    const surveyData = getData().values()[0];
+    expect(surveyData.response.Q0).toBe("");
+    expect(surveyData.response_index[0]).toBe(2);
+  });
+
+  test("records -1 in response_index for unanswered questions", async () => {
+    const options = ["Little", "", "", "Much"];
+    const { getData, expectFinished, displayElement } = await startTimeline([
+      {
+        type: surveyMultiChoice,
+        questions: [{ prompt: "How much", options, required: false }],
+      },
+    ]);
+
+    await clickTarget(displayElement.querySelector("#jspsych-survey-multi-choice-next"));
+    await expectFinished();
+
+    const surveyData = getData().values()[0];
+    expect(surveyData.response.Q0).toBe("");
+    expect(surveyData.response_index[0]).toBe(-1);
+  });
 });
 
 describe("survey-multi-choice plugin simulation", () => {
@@ -95,11 +140,16 @@ describe("survey-multi-choice plugin simulation", () => {
 
     await expectFinished();
 
-    const surveyData = getData().values()[0].response;
-    const all_valid = Object.entries(surveyData).every((x) => {
+    const surveyData = getData().values()[0];
+    const all_valid = Object.entries(surveyData.response).every((x) => {
       return scale.includes(x[1] as string);
     });
     expect(all_valid).toBe(true);
+    expect(surveyData.response_index).toHaveLength(scale.length);
+    const indices_valid = surveyData.response_index.every(
+      (index) => Number.isInteger(index) && index >= 0 && index < scale.length
+    );
+    expect(indices_valid).toBe(true);
   });
 
   test("visual mode works", async () => {
@@ -127,10 +177,15 @@ describe("survey-multi-choice plugin simulation", () => {
 
     await expectFinished();
 
-    const surveyData = getData().values()[0].response;
-    const all_valid = Object.entries(surveyData).every((x) => {
+    const surveyData = getData().values()[0];
+    const all_valid = Object.entries(surveyData.response).every((x) => {
       return scale.includes(x[1] as string);
     });
     expect(all_valid).toBe(true);
+    expect(surveyData.response_index).toHaveLength(scale.length);
+    const indices_valid = surveyData.response_index.every(
+      (index) => Number.isInteger(index) && index >= 0 && index < scale.length
+    );
+    expect(indices_valid).toBe(true);
   });
 });

package/src/index.ts

@@ -82,6 +82,11 @@ const info = <const>{
     response: {
       type: ParameterType.OBJECT,
     },
+    /** An array containing the index of the selected option for each question. Unanswered questions are recorded as -1. */
+    response_index: {
+      type: ParameterType.INT,
+      array: true,
+    },
     /** The response time in milliseconds for the participant to make a response. The time is measured from when the questions first appear on the screen until the participant's response(s) are submitted. */
     rt: {
       type: ParameterType.INT,
@@ -111,10 +116,9 @@ const plugin_id_name = "jspsych-survey-multi-choice";
 class SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {
   static info = info;
 
-  constructor(private jsPsych: JsPsych) { }
+  constructor(private jsPsych: JsPsych) {}
 
   trial(display_element: HTMLElement, trial: TrialType<Info>) {
-
     const trial_form_id = `${plugin_id_name}_form`;
 
     var html = "";
@@ -164,7 +168,9 @@ class SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {
         question_classes.push(`${plugin_id_name}-horizontal`);
       }
 
-      html += `<div id="${plugin_id_name}-${question_id}" class="${question_classes.join(" ")}" data-name="${question.name}">`;
+      html += `<div id="${plugin_id_name}-${question_id}" class="${question_classes.join(
+        " "
+      )}" data-name="${question.name}">`;
 
       // add question text
       html += `<p class="${plugin_id_name}-text survey-multi-choice">${question.prompt}`;
@@ -186,7 +192,7 @@ class SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {
         html += `
         <div id="${option_id_name}" class="${plugin_id_name}-option">
           <label class="${plugin_id_name}-text" for="${input_id}">
-            <input type="radio" name="${input_name}" id="${input_id}" value="${question.options[j]}" ${required_attr} />
+            <input type="radio" name="${input_name}" id="${input_id}" value="${question.options[j]}" data-option-index="${j}" ${required_attr} />
             ${question.options[j]}
             </label>
         </div>`;
@@ -196,7 +202,9 @@ class SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {
     }
 
     // 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 + '"' : ""} />`;
+    html += `<input type="submit" id="${plugin_id_name}-next" class="${plugin_id_name} jspsych-btn"${
+      trial.button_label ? ' value="' + trial.button_label + '"' : ""
+    } />`;
     html += "</form>";
 
     // render
@@ -212,12 +220,16 @@ class SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {
 
       // create object to hold responses
       var question_data = {};
+      var response_index = [];
       for (var i = 0; i < trial.questions.length; i++) {
         var match = display_element.querySelector(`#${plugin_id_name}-${i}`);
         var id = "Q" + i;
-        var val: String;
-        if (match.querySelector("input[type=radio]:checked") !== null) {
-          val = match.querySelector<HTMLInputElement>("input[type=radio]:checked").value;
+        var val: String = "";
+        var selected_index = -1;
+        var checked = match.querySelector<HTMLInputElement>("input[type=radio]:checked");
+        if (checked !== null) {
+          val = checked.value;
+          selected_index = Number(checked.dataset.optionIndex);
         } else {
           val = "";
         }
@@ -228,11 +240,13 @@ class SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {
         }
         obje[name] = val;
         Object.assign(question_data, obje);
+        response_index.push(selected_index);
       }
       // save data
       var trial_data = {
         rt: response_time,
         response: question_data,
+        response_index: response_index,
         question_order: question_order,
       };
 
@@ -260,16 +274,21 @@ class SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {
 
   private create_simulation_data(trial: TrialType<Info>, simulation_options) {
     const question_data = {};
+    const response_index = [];
     let rt = 1000;
 
-    for (const q of trial.questions) {
-      const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;
-      question_data[name] = this.jsPsych.randomization.sampleWithoutReplacement(q.options, 1)[0];
+    for (let i = 0; i < trial.questions.length; i++) {
+      const q = trial.questions[i];
+      const name = q.name ? q.name : `Q${i}`;
+      const option_index = this.jsPsych.randomization.randomInt(0, q.options.length - 1);
+      question_data[name] = q.options[option_index];
+      response_index.push(option_index);
       rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);
     }
 
     const default_data = {
       response: question_data,
+      response_index: response_index,
       rt: rt,
       question_order: trial.randomize_question_order
         ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])
@@ -298,13 +317,17 @@ class SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {
     load_callback();
 
     const answers = Object.entries(data.response);
+    const response_index = Array.isArray(data.response_index) ? data.response_index : [];
     for (let i = 0; i < answers.length; i++) {
+      let option_index = response_index[i];
+      if (typeof option_index !== "number" || option_index < 0) {
+        option_index = trial.questions[i].options.indexOf(answers[i][1]);
+      }
+      if (option_index < 0) {
+        continue;
+      }
       this.jsPsych.pluginAPI.clickTarget(
-        display_element.querySelector(
-          `#${plugin_id_name}-response-${i}-${trial.questions[i].options.indexOf(
-            answers[i][1]
-          )}`
-        ),
+        display_element.querySelector(`#${plugin_id_name}-response-${i}-${option_index}`),
         ((data.rt - 1000) / answers.length) * (i + 1)
       );
     }