@jspsych/plugin-survey-multi-choice 1.1.2 → 2.0.0

package/README.md

@@ -27,9 +27,15 @@ See the [contributing to jsPsych](https://www.jspsych.org/latest/developers/cont
 
 ## Citation
 
-If you use this library in academic work, please cite the [paper that describes jsPsych](http://link.springer.com/article/10.3758%2Fs13428-014-0458-y):
+If you use this library in academic work, the preferred citation is:
 
-de Leeuw, J.R. (2015). jsPsych: A JavaScript library for creating behavioral experiments in a Web browser. _Behavior Research Methods_, _47_(1), 1-12. doi:10.3758/s13428-014-0458-y
+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://joss.theoj.org/papers/10.21105/joss.05351](https://joss.theoj.org/papers/10.21105/joss.05351).
+
+This paper is an updated description of jsPsych and includes all current core team members. It replaces the earlier paper that described jsPsych:
+
+de Leeuw, J.R. (2015). jsPsych: A JavaScript library for creating behavioral experiments in a Web browser. *Behavior Research Methods*, _47_(1), 1-12. doi:[10.3758/s13428-014-0458-y](http://link.springer.com/article/10.3758%2Fs13428-014-0458-y)
+
+Citations help us demonstrate that this library is used and valued, which allows us to continue working on it.
 
 ## Contributors
 

package/dist/index.browser.js

@@ -1,267 +1,259 @@
 var jsPsychSurveyMultiChoice = (function (jspsych) {
   'use strict';
 
-  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;
+  var _package = {
+    name: "@jspsych/plugin-survey-multi-choice",
+    version: "2.0.0",
+    description: "a jspsych plugin for multiple choice survey questions",
+    type: "module",
+    main: "dist/index.cjs",
+    exports: {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs"
+    },
+    typings: "dist/index.d.ts",
+    unpkg: "dist/index.browser.min.js",
+    files: [
+      "src",
+      "dist"
+    ],
+    source: "src/index.ts",
+    scripts: {
+      test: "jest",
+      "test:watch": "npm test -- --watch",
+      tsc: "tsc",
+      build: "rollup --config",
+      "build:watch": "npm run build -- --watch"
+    },
+    repository: {
+      type: "git",
+      url: "git+https://github.com/jspsych/jsPsych.git",
+      directory: "packages/plugin-survey-multi-choice"
+    },
+    author: "Shane Martin",
+    license: "MIT",
+    bugs: {
+      url: "https://github.com/jspsych/jsPsych/issues"
+    },
+    homepage: "https://www.jspsych.org/latest/plugins/survey-multi-choice",
+    peerDependencies: {
+      jspsych: ">=7.1.0"
+    },
+    devDependencies: {
+      "@jspsych/config": "^3.0.0",
+      "@jspsych/test-utils": "^1.2.0"
+    }
+  };
+
+  const info = {
+    name: "survey-multi-choice",
+    version: _package.version,
+    parameters: {
+      questions: {
+        type: jspsych.ParameterType.COMPLEX,
+        array: true,
+        nested: {
+          prompt: {
+            type: jspsych.ParameterType.HTML_STRING,
+            default: void 0
+          },
+          options: {
+            type: jspsych.ParameterType.STRING,
+            array: true,
+            default: void 0
+          },
+          required: {
+            type: jspsych.ParameterType.BOOL,
+            default: false
+          },
+          horizontal: {
+            type: jspsych.ParameterType.BOOL,
+            default: false
+          },
+          name: {
+            type: jspsych.ParameterType.STRING,
+            default: ""
+          }
+        }
+      },
+      randomize_question_order: {
+        type: jspsych.ParameterType.BOOL,
+        default: false
+      },
+      preamble: {
+        type: jspsych.ParameterType.HTML_STRING,
+        default: null
+      },
+      button_label: {
+        type: jspsych.ParameterType.STRING,
+        default: "Continue"
+      },
+      autocomplete: {
+        type: jspsych.ParameterType.BOOL,
+        default: false
+      }
+    },
+    data: {
+      response: {
+        type: jspsych.ParameterType.COMPLEX,
+        nested: {
+          identifier: {
+            type: jspsych.ParameterType.STRING
+          },
+          response: {
+            type: jspsych.ParameterType.STRING | jspsych.ParameterType.INT | jspsych.ParameterType.FLOAT | jspsych.ParameterType.BOOL | jspsych.ParameterType.OBJECT
+          }
+        }
+      },
+      rt: {
+        type: jspsych.ParameterType.INT
+      },
+      question_order: {
+        type: jspsych.ParameterType.INT,
+        array: true
+      }
+    }
+  };
+  class SurveyMultiChoicePlugin {
+    constructor(jsPsych) {
+      this.jsPsych = jsPsych;
+    }
+    static info = info;
+    trial(display_element, trial) {
+      var plugin_id_name = "jspsych-survey-multi-choice";
+      var html = "";
+      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>";
+      if (trial.preamble !== null) {
+        html += '<div id="jspsych-survey-multi-choice-preamble" class="jspsych-survey-multi-choice-preamble">' + trial.preamble + "</div>";
+      }
+      if (trial.autocomplete) {
+        html += '<form id="jspsych-survey-multi-choice-form">';
+      } else {
+        html += '<form id="jspsych-survey-multi-choice-form" autocomplete="off">';
+      }
+      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);
+      }
+      for (var i = 0; i < trial.questions.length; i++) {
+        var question = trial.questions[question_order[i]];
+        var question_id = question_order[i];
+        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 + '">';
+        html += '<p class="jspsych-survey-multi-choice-text survey-multi-choice">' + question.prompt;
+        if (question.required) {
+          html += "<span class='required'>*</span>";
+        }
+        html += "</p>";
+        for (var j = 0; j < question.options.length; j++) {
+          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" : "";
+          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>";
+      }
+      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>";
+      display_element.innerHTML = html;
+      document.querySelector("form").addEventListener("submit", (event) => {
+        event.preventDefault();
+        var endTime = performance.now();
+        var response_time = Math.round(endTime - startTime);
+        var question_data = {};
+        for (var i2 = 0; i2 < trial.questions.length; i2++) {
+          var match = display_element.querySelector("#jspsych-survey-multi-choice-" + i2);
+          var id = "Q" + i2;
+          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);
+        }
+        var trial_data = {
+          rt: response_time,
+          response: question_data,
+          question_order
+        };
+        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 = 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];
+        rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);
+      }
+      const default_data = {
+        response: question_data,
+        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 - 1e3) / answers.length * (i + 1)
+        );
+      }
+      this.jsPsych.pluginAPI.clickTarget(
+        display_element.querySelector("#jspsych-survey-multi-choice-next"),
+        data.rt
+      );
+    }
+  }
 
   return SurveyMultiChoicePlugin;
 
 })(jsPsychModule);
-//# sourceMappingURL=index.browser.js.map
+//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-survey-multi-choice@2.0.0/dist/index.browser.js.map