jspsych · jodeleeuw · Nov 30, 2021 · Oct 6, 2021 · Oct 6, 2021 · Oct 8, 2021
diff --git a/.changeset/blue-seahorses-add.md b/.changeset/blue-seahorses-add.md
@@ -0,0 +1,7 @@
+---
+"@jspsych/plugin-survey": major
+---
+
+A plugin for presenting one or more pages with survey-type questions, such as multiple choice, multiple selection, free text responses, drop-down selection, and likert scale matrices. 
+Provides options for response validation and question/option randomization. 
+Uses the SurveyJS library: https://surveyjs.io/.
diff --git a/docs/plugins/survey.md b/docs/plugins/survey.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/plugin-survey/css/plugin-survey.css b/packages/plugin-survey/css/plugin-survey.css
@@ -0,0 +1,36 @@
+/* navigation buttons */
+.jspsych-survey-btn {
+    margin-bottom: 20px;
+    margin-top: 10px;
+}
+
+/* question prompt text */
+.jspsych-survey-question-prompt {
+    font-family: "Open Sans", "Arial", sans-serif;
+    font-size: 18px;
+    line-height: 1em;
+}
+
+/* question spacing */
+.jspsych-display-element div.jspsych-survey-question {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-bottom: 0.5em;
+}
+
+/* html prompts */
+.jspsych-survey-html {
+    font-size: 18px;
+}
+
+/* textbox inputs, dropdown menu */
+.jspsych-display-element input[type="text"], .jspsych-display-element textarea, .jspsych-display-element select.jspsych-survey-dropdown {
+    font-family: "Open Sans", "Arial", sans-serif;
+    font-size: 14px;
+    padding: 4px;
+}
+
+/* required astrisk and error text */
+.jspsych-display-element .jspsych-survey-required {
+    color: red;
+}
diff --git a/packages/plugin-survey/example.html b/packages/plugin-survey/example.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="../jspsych/dist/index.browser.js"></script>
+    <script src="./dist/index.browser.js"></script>
+    <link rel="stylesheet" href="../jspsych/css/jspsych.css">
+    <link rel="stylesheet" href="css/plugin-survey.css">
+  </head>
+  <body></body>
+  <script type="text/javascript">
+
+    var jsPsych = initJsPsych({
+      on_finish: function() {
+        jsPsych.data.displayData();
+      }
+    });
+
+    var options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6'];
+
+    var survey_trial = {
+      type: jsPsychSurvey,
+      pages: [
+        [
+          {type: 'html', prompt: '<p>Here is some arbitrary text via an "html" question type.<br>Similar to preamble but can be inserted anywhere in the question set.</p><p>This trial uses automatic question numbering (continued across pages).</p>'},
+          {type: 'text', prompt: 'This is a single-line text question. The correct answer is "hello".', required: true, correct_response: "hello"},
+          {type: 'text', prompt: 'This is a multi-line text question.', placeholder: 'This is a placeholder.', textbox_rows: 10, textbox_columns: 40},
+        ],
+        // [
+        //   {
+        //     type: 'likert', 
+        //     prompt: 'Please indicate how much you agree with the following statements:', 
+        //     statements: [{prompt: 'I like cats.', name: 'cat'},{prompt: 'I like giraffes.', name: 'giraffe'},{prompt: 'I like antelopes.', name: 'antelope'},{prompt: 'I like lizards.', name: 'lizard'}],
+        //     options: ['A lot', 'Somewhat', 'Not very much'],
+        //     name: 'animals',
+        //     required: true, 
+        //     randomize_statement_order: true, 
+        //  }
+        // ],
+        [
+          {
+            type: 'drop-down', prompt: 'Which shape do you like the best?', options: ['Triangle','Circle','Square'], add_other_option: true, option_reorder: 'asc', dropdown_select_prompt: 'Select one:', required: true
+          },
+          {
+            type: 'ranking', prompt: 'Please order the shapes from your most to least favorite.', options: ['Triangle','Circle','Square'], option_reorder: 'random'
+          },
+        ],
+        [
+          {type: 'multi-choice', prompt: 'This is a multi-choice question with options in one column (the default).', options: options},
+          {type: 'multi-choice', prompt: 'This is a multi-choice question with options in one row. The correct response is option 5.', options: options, columns: 0, correct_response: "Option 5"},
+          {type: 'multi-choice', prompt: 'This is a multi-choice question with options in two columns, with an "other" option.', options: options, columns: 2, add_other_option: true},
+          {type: 'multi-select', prompt: 'This is a multi-select question.', options: options},
+          {type: 'multi-select', prompt: 'This is a multi-select question with three columns and random option ordering.', options: options, columns: 3, option_reorder: 'random'},
+        ]
+      ],
+      button_label_next: "Next >",
+      button_label_back: "< Back",
+      button_label_finish: "Finish!",
+      show_question_numbers: 'on',
+      required_question_label: "",
+      required_error_text: "You forgot to answer this question!"
+    };
+
+    var survey_trial_random = {
+      type: jsPsychSurvey,
+      pages: [[  
+        {type: 'text', prompt: 'Question 1.', textbox_rows: 2, textbox_columns: 20}, 
+        {type: 'text', prompt: 'Question 2.'},
+        {type: 'text', prompt: 'Question 3.', textbox_columns: 50}, 
+        {type: 'text', prompt: 'Question 4.', textbox_rows: 2}, 
+        {type: 'text', prompt: 'Question 5.'},
+        {type: 'text', prompt: 'Question 6.', textbox_rows: 10, textbox_columns: 20}, 
+      ]],
+      title: 'This is a separate survey trial. The order of questions should be randomized.',
+      randomize_question_order: true
+    };
+
+    jsPsych.run([survey_trial, survey_trial_random]);
+
+  </script>
+</html>
diff --git a/packages/plugin-survey/jest.config.cjs b/packages/plugin-survey/jest.config.cjs
@@ -0,0 +1 @@
+module.exports = require("@jspsych/config/jest").makePackageConfig(__dirname);
diff --git a/packages/plugin-survey/package.json b/packages/plugin-survey/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "@jspsych/plugin-survey",
+  "version": "0.1.0",
+  "description": "A jsPsych plugin for complex surveys",
+  "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"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/jspsych/jsPsych/issues"
+  },
+  "homepage": "https://www.jspsych.org/latest/plugins/survey",
+  "peerDependencies": {
+    "jspsych": ">=7.0.0"
+  },
+  "devDependencies": {
+    "@jspsych/config": "^1.0.0",
+    "@jspsych/test-utils": "^1.0.0"
+  },
+  "dependencies": {
+    "survey-knockout": "^1.8.70"
+  }
+}
diff --git a/packages/plugin-survey/rollup.config.mjs b/packages/plugin-survey/rollup.config.mjs
@@ -0,0 +1,3 @@
+import { makeRollupConfig } from "@jspsych/config/rollup";
+
+export default makeRollupConfig("jsPsychSurvey");