@jspsych/plugin-survey-multi-choice 1.1.1 → 1.1.3

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

@@ -1 +1 @@
-{"version":3,"file":"index.browser.min.js","sources":["../src/index.ts"],"sourcesContent":["import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nconst info = <const>{\n  name: \"survey-multi-choice\",\n  parameters: {\n    /** Array containing one or more objects with parameters for the question(s) that should be shown on the page. */\n    questions: {\n      type: ParameterType.COMPLEX,\n      array: true,\n      pretty_name: \"Questions\",\n      nested: {\n        /** Question prompt. */\n        prompt: {\n          type: ParameterType.HTML_STRING,\n          pretty_name: \"Prompt\",\n          default: undefined,\n        },\n        /** Array of multiple choice options for this question. */\n        options: {\n          type: ParameterType.STRING,\n          pretty_name: \"Options\",\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          pretty_name: \"Required\",\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          pretty_name: \"Horizontal\",\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          pretty_name: \"Question Name\",\n          default: \"\",\n        },\n      },\n    },\n    /** If true, the order of the questions in the 'questions' array will be randomized. */\n    randomize_question_order: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Randomize Question Order\",\n      default: false,\n    },\n    /** HTML-formatted string to display at top of the page above all of the questions. */\n    preamble: {\n      type: ParameterType.HTML_STRING,\n      pretty_name: \"Preamble\",\n      default: null,\n    },\n    /** Label of the button to submit responses. */\n    button_label: {\n      type: ParameterType.STRING,\n      pretty_name: \"Button label\",\n      default: \"Continue\",\n    },\n    /** Setting this to true will enable browser auto-complete or auto-fill for the form. */\n    autocomplete: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Allow autocomplete\",\n      default: false,\n    },\n  },\n};\n\ntype Info = typeof info;\n\n/**\n * **survey-multi-choice**\n *\n * jsPsych plugin for presenting multiple choice survey questions\n *\n * @author Shane Martin\n * @see {@link https://www.jspsych.org/plugins/jspsych-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    var plugin_id_name = \"jspsych-survey-multi-choice\";\n\n    var html = \"\";\n\n    // inject CSS for trial\n    html += '<style id=\"jspsych-survey-multi-choice-css\">';\n    html +=\n      \".jspsych-survey-multi-choice-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }\" +\n      \".jspsych-survey-multi-choice-text span.required {color: darkred;}\" +\n      \".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-text {  text-align: center;}\" +\n      \".jspsych-survey-multi-choice-option { line-height: 2; }\" +\n      \".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-option {  display: inline-block;  margin-left: 1em;  margin-right: 1em;  vertical-align: top;}\" +\n      \"label.jspsych-survey-multi-choice-text input[type='radio'] {margin-right: 1em;}\";\n    html += \"</style>\";\n\n    // show preamble text\n    if (trial.preamble !== null) {\n      html +=\n        '<div id=\"jspsych-survey-multi-choice-preamble\" class=\"jspsych-survey-multi-choice-preamble\">' +\n        trial.preamble +\n        \"</div>\";\n    }\n\n    // form element\n    if (trial.autocomplete) {\n      html += '<form id=\"jspsych-survey-multi-choice-form\">';\n    } else {\n      html += '<form id=\"jspsych-survey-multi-choice-form\" autocomplete=\"off\">';\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 = [\"jspsych-survey-multi-choice-question\"];\n      if (question.horizontal) {\n        question_classes.push(\"jspsych-survey-multi-choice-horizontal\");\n      }\n\n      html +=\n        '<div id=\"jspsych-survey-multi-choice-' +\n        question_id +\n        '\" class=\"' +\n        question_classes.join(\" \") +\n        '\"  data-name=\"' +\n        question.name +\n        '\">';\n\n      // add question text\n      html += '<p class=\"jspsych-survey-multi-choice-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 = \"jspsych-survey-multi-choice-option-\" + question_id + \"-\" + j;\n        var input_name = \"jspsych-survey-multi-choice-response-\" + question_id;\n        var input_id = \"jspsych-survey-multi-choice-response-\" + question_id + \"-\" + j;\n\n        var required_attr = question.required ? \"required\" : \"\";\n\n        // add radio button container\n        html += '<div id=\"' + option_id_name + '\" class=\"jspsych-survey-multi-choice-option\">';\n        html += '<label class=\"jspsych-survey-multi-choice-text\" for=\"' + input_id + '\">';\n        html +=\n          '<input type=\"radio\" name=\"' +\n          input_name +\n          '\" id=\"' +\n          input_id +\n          '\" value=\"' +\n          question.options[j] +\n          '\" ' +\n          required_attr +\n          \"></input>\";\n        html += question.options[j] + \"</label>\";\n        html += \"</div>\";\n      }\n\n      html += \"</div>\";\n    }\n\n    // add submit button\n    html +=\n      '<input type=\"submit\" id=\"' +\n      plugin_id_name +\n      '-next\" class=\"' +\n      plugin_id_name +\n      ' jspsych-btn\"' +\n      (trial.button_label ? ' value=\"' + trial.button_label + '\"' : \"\") +\n      \"></input>\";\n    html += \"</form>\";\n\n    // render\n    display_element.innerHTML = html;\n\n    document.querySelector(\"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(\"#jspsych-survey-multi-choice-\" + 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      display_element.innerHTML = \"\";\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          `#jspsych-survey-multi-choice-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(\"#jspsych-survey-multi-choice-next\"),\n      data.rt\n    );\n  }\n}\n\nexport default SurveyMultiChoicePlugin;\n"],"names":["info","name","parameters","questions","type","ParameterType","COMPLEX","array","pretty_name","nested","prompt","HTML_STRING","default","undefined","options","STRING","required","BOOL","horizontal","randomize_question_order","preamble","button_label","autocomplete","SurveyMultiChoicePlugin","jsPsych","_classCallCheck","this","display_element","trial","_this","plugin_id_name","html","question_order","i","length","push","randomization","shuffle","question","question_id","question_classes","join","j","option_id_name","input_name","input_id","required_attr","innerHTML","document","querySelector","addEventListener","event","preventDefault","endTime","performance","now","response_time","Math","round","startTime","question_data","val","match","id","value","obje","attributes","Object","assign","trial_data","rt","response","finishTrial","simulation_mode","simulation_options","load_callback","simulate_data_only","simulate_visual","_step","_iterator","s","n","done","q","indexOf","sampleWithoutReplacement","sampleExGaussian","err","e","f","default_data","_toConsumableArray","Array","keys","data","pluginAPI","mergeSimulationData","ensureSimulationDataConsistency","create_simulation_data","getDisplayElement","answers","entries","clickTarget","concat"],"mappings":"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"}
+{"version":3,"file":"index.browser.min.js","sources":["../src/index.ts"],"sourcesContent":["import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nconst info = <const>{\n  name: \"survey-multi-choice\",\n  parameters: {\n    /** Array containing one or more objects with parameters for the question(s) that should be shown on the page. */\n    questions: {\n      type: ParameterType.COMPLEX,\n      array: true,\n      pretty_name: \"Questions\",\n      nested: {\n        /** Question prompt. */\n        prompt: {\n          type: ParameterType.HTML_STRING,\n          pretty_name: \"Prompt\",\n          default: undefined,\n        },\n        /** Array of multiple choice options for this question. */\n        options: {\n          type: ParameterType.STRING,\n          pretty_name: \"Options\",\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          pretty_name: \"Required\",\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          pretty_name: \"Horizontal\",\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          pretty_name: \"Question Name\",\n          default: \"\",\n        },\n      },\n    },\n    /** If true, the order of the questions in the 'questions' array will be randomized. */\n    randomize_question_order: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Randomize Question Order\",\n      default: false,\n    },\n    /** HTML-formatted string to display at top of the page above all of the questions. */\n    preamble: {\n      type: ParameterType.HTML_STRING,\n      pretty_name: \"Preamble\",\n      default: null,\n    },\n    /** Label of the button to submit responses. */\n    button_label: {\n      type: ParameterType.STRING,\n      pretty_name: \"Button label\",\n      default: \"Continue\",\n    },\n    /** Setting this to true will enable browser auto-complete or auto-fill for the form. */\n    autocomplete: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Allow autocomplete\",\n      default: false,\n    },\n  },\n};\n\ntype Info = typeof info;\n\n/**\n * **survey-multi-choice**\n *\n * jsPsych plugin for presenting multiple choice survey questions\n *\n * @author Shane Martin\n * @see {@link https://www.jspsych.org/plugins/jspsych-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    var plugin_id_name = \"jspsych-survey-multi-choice\";\n\n    var html = \"\";\n\n    // inject CSS for trial\n    html += '<style id=\"jspsych-survey-multi-choice-css\">';\n    html +=\n      \".jspsych-survey-multi-choice-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }\" +\n      \".jspsych-survey-multi-choice-text span.required {color: darkred;}\" +\n      \".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-text {  text-align: center;}\" +\n      \".jspsych-survey-multi-choice-option { line-height: 2; }\" +\n      \".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-option {  display: inline-block;  margin-left: 1em;  margin-right: 1em;  vertical-align: top;}\" +\n      \"label.jspsych-survey-multi-choice-text input[type='radio'] {margin-right: 1em;}\";\n    html += \"</style>\";\n\n    // show preamble text\n    if (trial.preamble !== null) {\n      html +=\n        '<div id=\"jspsych-survey-multi-choice-preamble\" class=\"jspsych-survey-multi-choice-preamble\">' +\n        trial.preamble +\n        \"</div>\";\n    }\n\n    // form element\n    if (trial.autocomplete) {\n      html += '<form id=\"jspsych-survey-multi-choice-form\">';\n    } else {\n      html += '<form id=\"jspsych-survey-multi-choice-form\" autocomplete=\"off\">';\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 = [\"jspsych-survey-multi-choice-question\"];\n      if (question.horizontal) {\n        question_classes.push(\"jspsych-survey-multi-choice-horizontal\");\n      }\n\n      html +=\n        '<div id=\"jspsych-survey-multi-choice-' +\n        question_id +\n        '\" class=\"' +\n        question_classes.join(\" \") +\n        '\"  data-name=\"' +\n        question.name +\n        '\">';\n\n      // add question text\n      html += '<p class=\"jspsych-survey-multi-choice-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 = \"jspsych-survey-multi-choice-option-\" + question_id + \"-\" + j;\n        var input_name = \"jspsych-survey-multi-choice-response-\" + question_id;\n        var input_id = \"jspsych-survey-multi-choice-response-\" + question_id + \"-\" + j;\n\n        var required_attr = question.required ? \"required\" : \"\";\n\n        // add radio button container\n        html += '<div id=\"' + option_id_name + '\" class=\"jspsych-survey-multi-choice-option\">';\n        html += '<label class=\"jspsych-survey-multi-choice-text\" for=\"' + input_id + '\">';\n        html +=\n          '<input type=\"radio\" name=\"' +\n          input_name +\n          '\" id=\"' +\n          input_id +\n          '\" value=\"' +\n          question.options[j] +\n          '\" ' +\n          required_attr +\n          \"></input>\";\n        html += question.options[j] + \"</label>\";\n        html += \"</div>\";\n      }\n\n      html += \"</div>\";\n    }\n\n    // add submit button\n    html +=\n      '<input type=\"submit\" id=\"' +\n      plugin_id_name +\n      '-next\" class=\"' +\n      plugin_id_name +\n      ' jspsych-btn\"' +\n      (trial.button_label ? ' value=\"' + trial.button_label + '\"' : \"\") +\n      \"></input>\";\n    html += \"</form>\";\n\n    // render\n    display_element.innerHTML = html;\n\n    document.querySelector(\"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(\"#jspsych-survey-multi-choice-\" + 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      display_element.innerHTML = \"\";\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          `#jspsych-survey-multi-choice-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(\"#jspsych-survey-multi-choice-next\"),\n      data.rt\n    );\n  }\n}\n\nexport default SurveyMultiChoicePlugin;\n"],"names":["info","name","parameters","questions","type","ParameterType","COMPLEX","array","pretty_name","nested","prompt","HTML_STRING","default","undefined","options","STRING","required","BOOL","horizontal","randomize_question_order","preamble","button_label","autocomplete","SurveyMultiChoicePlugin","jsPsych","_classCallCheck","this","key","value","display_element","trial","_this","plugin_id_name","html","question_order","i","length","push","randomization","shuffle","question","question_id","question_classes","join","j","option_id_name","input_name","input_id","required_attr","innerHTML","document","querySelector","addEventListener","event","preventDefault","endTime","performance","now","response_time","Math","round","startTime","question_data","val","match","id","obje","attributes","Object","assign","trial_data","rt","response","finishTrial","simulation_mode","simulation_options","load_callback","simulate_data_only","simulate_visual","_step","_iterator","_createForOfIteratorHelper","s","n","done","q","concat","indexOf","sampleWithoutReplacement","sampleExGaussian","err","e","f","default_data","_toConsumableArray","Array","keys","data","pluginAPI","mergeSimulationData","ensureSimulationDataConsistency","create_simulation_data","getDisplayElement","answers","entries","clickTarget"],"mappings":"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"}

package/dist/index.cjs

@@ -2,264 +2,264 @@
 
 var jspsych = require('jspsych');
 
-const info = {
-    name: "survey-multi-choice",
-    parameters: {
-        /** Array containing one or more objects with parameters for the question(s) that should be shown on the page. */
-        questions: {
-            type: jspsych.ParameterType.COMPLEX,
-            array: true,
-            pretty_name: "Questions",
-            nested: {
-                /** Question prompt. */
-                prompt: {
-                    type: jspsych.ParameterType.HTML_STRING,
-                    pretty_name: "Prompt",
-                    default: undefined,
-                },
-                /** Array of multiple choice options for this question. */
-                options: {
-                    type: jspsych.ParameterType.STRING,
-                    pretty_name: "Options",
-                    array: true,
-                    default: undefined,
-                },
-                /** Whether or not a response to this question must be given in order to continue. */
-                required: {
-                    type: jspsych.ParameterType.BOOL,
-                    pretty_name: "Required",
-                    default: false,
-                },
-                /** If true, then the question will be centered and options will be displayed horizontally. */
-                horizontal: {
-                    type: jspsych.ParameterType.BOOL,
-                    pretty_name: "Horizontal",
-                    default: false,
-                },
-                /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */
-                name: {
-                    type: jspsych.ParameterType.STRING,
-                    pretty_name: "Question Name",
-                    default: "",
-                },
-            },
-        },
-        /** If true, the order of the questions in the 'questions' array will be randomized. */
-        randomize_question_order: {
-            type: jspsych.ParameterType.BOOL,
-            pretty_name: "Randomize Question Order",
-            default: false,
-        },
-        /** HTML-formatted string to display at top of the page above all of the questions. */
-        preamble: {
-            type: jspsych.ParameterType.HTML_STRING,
-            pretty_name: "Preamble",
-            default: null,
-        },
-        /** Label of the button to submit responses. */
-        button_label: {
-            type: jspsych.ParameterType.STRING,
-            pretty_name: "Button label",
-            default: "Continue",
-        },
-        /** Setting this to true will enable browser auto-complete or auto-fill for the form. */
-        autocomplete: {
-            type: jspsych.ParameterType.BOOL,
-            pretty_name: "Allow autocomplete",
-            default: false,
-        },
-    },
-};
-/**
- * **survey-multi-choice**
- *
- * jsPsych plugin for presenting multiple choice survey questions
- *
- * @author Shane Martin
- * @see {@link https://www.jspsych.org/plugins/jspsych-survey-multi-choice/ survey-multi-choice plugin documentation on jspsych.org}
- */
-class SurveyMultiChoicePlugin {
-    constructor(jsPsych) {
-        this.jsPsych = jsPsych;
-    }
-    trial(display_element, trial) {
-        var plugin_id_name = "jspsych-survey-multi-choice";
-        var html = "";
-        // inject CSS for trial
-        html += '<style id="jspsych-survey-multi-choice-css">';
-        html +=
-            ".jspsych-survey-multi-choice-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }" +
-                ".jspsych-survey-multi-choice-text span.required {color: darkred;}" +
-                ".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-text {  text-align: center;}" +
-                ".jspsych-survey-multi-choice-option { line-height: 2; }" +
-                ".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-option {  display: inline-block;  margin-left: 1em;  margin-right: 1em;  vertical-align: top;}" +
-                "label.jspsych-survey-multi-choice-text input[type='radio'] {margin-right: 1em;}";
-        html += "</style>";
-        // show preamble text
-        if (trial.preamble !== null) {
-            html +=
-                '<div id="jspsych-survey-multi-choice-preamble" class="jspsych-survey-multi-choice-preamble">' +
-                    trial.preamble +
-                    "</div>";
-        }
-        // form element
-        if (trial.autocomplete) {
-            html += '<form id="jspsych-survey-multi-choice-form">';
-        }
-        else {
-            html += '<form id="jspsych-survey-multi-choice-form" autocomplete="off">';
-        }
-        // generate question order. this is randomized here as opposed to randomizing the order of trial.questions
-        // so that the data are always associated with the same question regardless of order
-        var question_order = [];
-        for (var i = 0; i < trial.questions.length; i++) {
-            question_order.push(i);
-        }
-        if (trial.randomize_question_order) {
-            question_order = this.jsPsych.randomization.shuffle(question_order);
-        }
-        // add multiple-choice questions
-        for (var i = 0; i < trial.questions.length; i++) {
-            // get question based on question_order
-            var question = trial.questions[question_order[i]];
-            var question_id = question_order[i];
-            // create question container
-            var question_classes = ["jspsych-survey-multi-choice-question"];
-            if (question.horizontal) {
-                question_classes.push("jspsych-survey-multi-choice-horizontal");
-            }
-            html +=
-                '<div id="jspsych-survey-multi-choice-' +
-                    question_id +
-                    '" class="' +
-                    question_classes.join(" ") +
-                    '"  data-name="' +
-                    question.name +
-                    '">';
-            // add question text
-            html += '<p class="jspsych-survey-multi-choice-text survey-multi-choice">' + question.prompt;
-            if (question.required) {
-                html += "<span class='required'>*</span>";
-            }
-            html += "</p>";
-            // create option radio buttons
-            for (var j = 0; j < question.options.length; j++) {
-                // add label and question text
-                var option_id_name = "jspsych-survey-multi-choice-option-" + question_id + "-" + j;
-                var input_name = "jspsych-survey-multi-choice-response-" + question_id;
-                var input_id = "jspsych-survey-multi-choice-response-" + question_id + "-" + j;
-                var required_attr = question.required ? "required" : "";
-                // add radio button container
-                html += '<div id="' + option_id_name + '" class="jspsych-survey-multi-choice-option">';
-                html += '<label class="jspsych-survey-multi-choice-text" for="' + input_id + '">';
-                html +=
-                    '<input type="radio" name="' +
-                        input_name +
-                        '" id="' +
-                        input_id +
-                        '" value="' +
-                        question.options[j] +
-                        '" ' +
-                        required_attr +
-                        "></input>";
-                html += question.options[j] + "</label>";
-                html += "</div>";
-            }
-            html += "</div>";
-        }
-        // add submit button
-        html +=
-            '<input type="submit" id="' +
-                plugin_id_name +
-                '-next" class="' +
-                plugin_id_name +
-                ' jspsych-btn"' +
-                (trial.button_label ? ' value="' + trial.button_label + '"' : "") +
-                "></input>";
-        html += "</form>";
-        // render
-        display_element.innerHTML = html;
-        document.querySelector("form").addEventListener("submit", (event) => {
-            event.preventDefault();
-            // measure response time
-            var endTime = performance.now();
-            var response_time = Math.round(endTime - startTime);
-            // create object to hold responses
-            var question_data = {};
-            for (var i = 0; i < trial.questions.length; i++) {
-                var match = display_element.querySelector("#jspsych-survey-multi-choice-" + i);
-                var id = "Q" + i;
-                var val;
-                if (match.querySelector("input[type=radio]:checked") !== null) {
-                    val = match.querySelector("input[type=radio]:checked").value;
-                }
-                else {
-                    val = "";
-                }
-                var obje = {};
-                var name = id;
-                if (match.attributes["data-name"].value !== "") {
-                    name = match.attributes["data-name"].value;
-                }
-                obje[name] = val;
-                Object.assign(question_data, obje);
-            }
-            // save data
-            var trial_data = {
-                rt: response_time,
-                response: question_data,
-                question_order: question_order,
-            };
-            display_element.innerHTML = "";
-            // next trial
-            this.jsPsych.finishTrial(trial_data);
-        });
-        var startTime = performance.now();
-    }
-    simulate(trial, simulation_mode, simulation_options, load_callback) {
-        if (simulation_mode == "data-only") {
-            load_callback();
-            this.simulate_data_only(trial, simulation_options);
-        }
-        if (simulation_mode == "visual") {
-            this.simulate_visual(trial, simulation_options, load_callback);
-        }
-    }
-    create_simulation_data(trial, simulation_options) {
-        const question_data = {};
-        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];
-            rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);
-        }
-        const default_data = {
-            response: question_data,
-            rt: rt,
-            question_order: trial.randomize_question_order
-                ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])
-                : [...Array(trial.questions.length).keys()],
-        };
-        const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
-        this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
-        return data;
-    }
-    simulate_data_only(trial, simulation_options) {
-        const data = this.create_simulation_data(trial, simulation_options);
-        this.jsPsych.finishTrial(data);
-    }
-    simulate_visual(trial, simulation_options, load_callback) {
-        const data = this.create_simulation_data(trial, simulation_options);
-        const display_element = this.jsPsych.getDisplayElement();
-        this.trial(display_element, trial);
-        load_callback();
-        const answers = Object.entries(data.response);
-        for (let i = 0; i < answers.length; i++) {
-            this.jsPsych.pluginAPI.clickTarget(display_element.querySelector(`#jspsych-survey-multi-choice-response-${i}-${trial.questions[i].options.indexOf(answers[i][1])}`), ((data.rt - 1000) / answers.length) * (i + 1));
-        }
-        this.jsPsych.pluginAPI.clickTarget(display_element.querySelector("#jspsych-survey-multi-choice-next"), data.rt);
-    }
-}
+const info = {
+    name: "survey-multi-choice",
+    parameters: {
+        /** Array containing one or more objects with parameters for the question(s) that should be shown on the page. */
+        questions: {
+            type: jspsych.ParameterType.COMPLEX,
+            array: true,
+            pretty_name: "Questions",
+            nested: {
+                /** Question prompt. */
+                prompt: {
+                    type: jspsych.ParameterType.HTML_STRING,
+                    pretty_name: "Prompt",
+                    default: undefined,
+                },
+                /** Array of multiple choice options for this question. */
+                options: {
+                    type: jspsych.ParameterType.STRING,
+                    pretty_name: "Options",
+                    array: true,
+                    default: undefined,
+                },
+                /** Whether or not a response to this question must be given in order to continue. */
+                required: {
+                    type: jspsych.ParameterType.BOOL,
+                    pretty_name: "Required",
+                    default: false,
+                },
+                /** If true, then the question will be centered and options will be displayed horizontally. */
+                horizontal: {
+                    type: jspsych.ParameterType.BOOL,
+                    pretty_name: "Horizontal",
+                    default: false,
+                },
+                /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */
+                name: {
+                    type: jspsych.ParameterType.STRING,
+                    pretty_name: "Question Name",
+                    default: "",
+                },
+            },
+        },
+        /** If true, the order of the questions in the 'questions' array will be randomized. */
+        randomize_question_order: {
+            type: jspsych.ParameterType.BOOL,
+            pretty_name: "Randomize Question Order",
+            default: false,
+        },
+        /** HTML-formatted string to display at top of the page above all of the questions. */
+        preamble: {
+            type: jspsych.ParameterType.HTML_STRING,
+            pretty_name: "Preamble",
+            default: null,
+        },
+        /** Label of the button to submit responses. */
+        button_label: {
+            type: jspsych.ParameterType.STRING,
+            pretty_name: "Button label",
+            default: "Continue",
+        },
+        /** Setting this to true will enable browser auto-complete or auto-fill for the form. */
+        autocomplete: {
+            type: jspsych.ParameterType.BOOL,
+            pretty_name: "Allow autocomplete",
+            default: false,
+        },
+    },
+};
+/**
+ * **survey-multi-choice**
+ *
+ * jsPsych plugin for presenting multiple choice survey questions
+ *
+ * @author Shane Martin
+ * @see {@link https://www.jspsych.org/plugins/jspsych-survey-multi-choice/ survey-multi-choice plugin documentation on jspsych.org}
+ */
+class SurveyMultiChoicePlugin {
+    constructor(jsPsych) {
+        this.jsPsych = jsPsych;
+    }
+    trial(display_element, trial) {
+        var plugin_id_name = "jspsych-survey-multi-choice";
+        var html = "";
+        // inject CSS for trial
+        html += '<style id="jspsych-survey-multi-choice-css">';
+        html +=
+            ".jspsych-survey-multi-choice-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }" +
+                ".jspsych-survey-multi-choice-text span.required {color: darkred;}" +
+                ".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-text {  text-align: center;}" +
+                ".jspsych-survey-multi-choice-option { line-height: 2; }" +
+                ".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-option {  display: inline-block;  margin-left: 1em;  margin-right: 1em;  vertical-align: top;}" +
+                "label.jspsych-survey-multi-choice-text input[type='radio'] {margin-right: 1em;}";
+        html += "</style>";
+        // show preamble text
+        if (trial.preamble !== null) {
+            html +=
+                '<div id="jspsych-survey-multi-choice-preamble" class="jspsych-survey-multi-choice-preamble">' +
+                    trial.preamble +
+                    "</div>";
+        }
+        // form element
+        if (trial.autocomplete) {
+            html += '<form id="jspsych-survey-multi-choice-form">';
+        }
+        else {
+            html += '<form id="jspsych-survey-multi-choice-form" autocomplete="off">';
+        }
+        // generate question order. this is randomized here as opposed to randomizing the order of trial.questions
+        // so that the data are always associated with the same question regardless of order
+        var question_order = [];
+        for (var i = 0; i < trial.questions.length; i++) {
+            question_order.push(i);
+        }
+        if (trial.randomize_question_order) {
+            question_order = this.jsPsych.randomization.shuffle(question_order);
+        }
+        // add multiple-choice questions
+        for (var i = 0; i < trial.questions.length; i++) {
+            // get question based on question_order
+            var question = trial.questions[question_order[i]];
+            var question_id = question_order[i];
+            // create question container
+            var question_classes = ["jspsych-survey-multi-choice-question"];
+            if (question.horizontal) {
+                question_classes.push("jspsych-survey-multi-choice-horizontal");
+            }
+            html +=
+                '<div id="jspsych-survey-multi-choice-' +
+                    question_id +
+                    '" class="' +
+                    question_classes.join(" ") +
+                    '"  data-name="' +
+                    question.name +
+                    '">';
+            // add question text
+            html += '<p class="jspsych-survey-multi-choice-text survey-multi-choice">' + question.prompt;
+            if (question.required) {
+                html += "<span class='required'>*</span>";
+            }
+            html += "</p>";
+            // create option radio buttons
+            for (var j = 0; j < question.options.length; j++) {
+                // add label and question text
+                var option_id_name = "jspsych-survey-multi-choice-option-" + question_id + "-" + j;
+                var input_name = "jspsych-survey-multi-choice-response-" + question_id;
+                var input_id = "jspsych-survey-multi-choice-response-" + question_id + "-" + j;
+                var required_attr = question.required ? "required" : "";
+                // add radio button container
+                html += '<div id="' + option_id_name + '" class="jspsych-survey-multi-choice-option">';
+                html += '<label class="jspsych-survey-multi-choice-text" for="' + input_id + '">';
+                html +=
+                    '<input type="radio" name="' +
+                        input_name +
+                        '" id="' +
+                        input_id +
+                        '" value="' +
+                        question.options[j] +
+                        '" ' +
+                        required_attr +
+                        "></input>";
+                html += question.options[j] + "</label>";
+                html += "</div>";
+            }
+            html += "</div>";
+        }
+        // add submit button
+        html +=
+            '<input type="submit" id="' +
+                plugin_id_name +
+                '-next" class="' +
+                plugin_id_name +
+                ' jspsych-btn"' +
+                (trial.button_label ? ' value="' + trial.button_label + '"' : "") +
+                "></input>";
+        html += "</form>";
+        // render
+        display_element.innerHTML = html;
+        document.querySelector("form").addEventListener("submit", (event) => {
+            event.preventDefault();
+            // measure response time
+            var endTime = performance.now();
+            var response_time = Math.round(endTime - startTime);
+            // create object to hold responses
+            var question_data = {};
+            for (var i = 0; i < trial.questions.length; i++) {
+                var match = display_element.querySelector("#jspsych-survey-multi-choice-" + i);
+                var id = "Q" + i;
+                var val;
+                if (match.querySelector("input[type=radio]:checked") !== null) {
+                    val = match.querySelector("input[type=radio]:checked").value;
+                }
+                else {
+                    val = "";
+                }
+                var obje = {};
+                var name = id;
+                if (match.attributes["data-name"].value !== "") {
+                    name = match.attributes["data-name"].value;
+                }
+                obje[name] = val;
+                Object.assign(question_data, obje);
+            }
+            // save data
+            var trial_data = {
+                rt: response_time,
+                response: question_data,
+                question_order: question_order,
+            };
+            display_element.innerHTML = "";
+            // next trial
+            this.jsPsych.finishTrial(trial_data);
+        });
+        var startTime = performance.now();
+    }
+    simulate(trial, simulation_mode, simulation_options, load_callback) {
+        if (simulation_mode == "data-only") {
+            load_callback();
+            this.simulate_data_only(trial, simulation_options);
+        }
+        if (simulation_mode == "visual") {
+            this.simulate_visual(trial, simulation_options, load_callback);
+        }
+    }
+    create_simulation_data(trial, simulation_options) {
+        const question_data = {};
+        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];
+            rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);
+        }
+        const default_data = {
+            response: question_data,
+            rt: rt,
+            question_order: trial.randomize_question_order
+                ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])
+                : [...Array(trial.questions.length).keys()],
+        };
+        const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
+        this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
+        return data;
+    }
+    simulate_data_only(trial, simulation_options) {
+        const data = this.create_simulation_data(trial, simulation_options);
+        this.jsPsych.finishTrial(data);
+    }
+    simulate_visual(trial, simulation_options, load_callback) {
+        const data = this.create_simulation_data(trial, simulation_options);
+        const display_element = this.jsPsych.getDisplayElement();
+        this.trial(display_element, trial);
+        load_callback();
+        const answers = Object.entries(data.response);
+        for (let i = 0; i < answers.length; i++) {
+            this.jsPsych.pluginAPI.clickTarget(display_element.querySelector(`#jspsych-survey-multi-choice-response-${i}-${trial.questions[i].options.indexOf(answers[i][1])}`), ((data.rt - 1000) / answers.length) * (i + 1));
+        }
+        this.jsPsych.pluginAPI.clickTarget(display_element.querySelector("#jspsych-survey-multi-choice-next"), data.rt);
+    }
+}
 SurveyMultiChoicePlugin.info = info;
 
 module.exports = SurveyMultiChoicePlugin;