Survey plugin rewrite (fixes #2758) (#3204)

jspsych · Apr 30, 2024 · 6d99a71 · 6d99a71
1 parent c765924
commit 6d99a71
Show file tree

Hide file tree

Showing 35 changed files with 392,079 additions and 1,537 deletions.
diff --git a/.changeset/bright-pillows-collect.md b/.changeset/bright-pillows-collect.md
@@ -0,0 +1,5 @@
+---
+"@jspsych/plugin-survey": major
+---
+
+To take advantage of all of the SurveyJS features, we have re-written the survey plugin so that it now takes a SurveyJS-compatible JSON string ('survey_json') and/or a SurveyJS-compatible function ('survey_function') that manipulates a SurveyJS model. This is a breaking change. See the jsPsych Survey Plugin page for documentation and examples: https://www.jspsych.org/latest/plugins/survey/. More details about creating the SurveyJS JSON strings and functions can be found on their website: https://surveyjs.io/form-library/documentation/design-survey/create-a-simple-survey#create-a-survey-model.
diff --git a/docs/demos/jspsych-survey-demo1.html b/docs/demos/jspsych-survey-demo1.html
@@ -4,9 +4,9 @@
     <script src="docs-demo-timeline.js"></script>
     <script src="https://unpkg.com/[email protected]"></script>
     <script src="https://unpkg.com/@jspsych/[email protected]"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey@0.2.2"></script>
+    <script src="../../packages/plugin-survey/dist/index.browser.js"></script>
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/jspsych.css" />
-    <link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@0.2.2/css/survey.css">
+    <link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css">
     <link rel="stylesheet" href="docs-demo.css" type="text/css">
   </head>
   <body></body>
@@ -16,28 +16,29 @@
 
     const trial = {
       type: jsPsychSurvey,
-      pages: [
-        [
-          {
-            type: 'html',
-            prompt: 'Please answer the following questions:',
-          },
-          {
-            type: 'multi-choice',
-            prompt: "Which of the following do you like the most?", 
-            name: 'VegetablesLike', 
-            options: ['Tomato', 'Cucumber', 'Eggplant', 'Corn', 'Peas'], 
-            required: true
-          }, 
-          {
-            type: 'multi-select',
-            prompt: "Which of the following do you like?", 
-            name: 'FruitLike', 
-            options: ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry'], 
-            required: false,
-          }
+      survey_json: {
+        showQuestionNumbers: false,
+        elements:
+          [
+            {
+              type: 'radiogroup',
+              title: "Which of the following do you like the most?", 
+              name: 'vegetablesLike', 
+              choices: ['Tomato', 'Cucumber', 'Eggplant', 'Corn', 'Peas', 'Broccoli']
+            }, 
+            {
+              type: 'checkbox',
+              title: "Which of the following do you like?", 
+              name: 'fruitLike', 
+              description: "You can select as many as you want.",
+              choices: ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry', 'Kiwi', 'Mango'], 
+              showOtherItem: true,
+              showSelectAllItem: true,
+              showNoneItem: true,
+              required: true,
+            },
         ]
-      ],
+      },
     };
 
     const timeline = [trial];

diff --git a/docs/demos/jspsych-survey-demo2.html b/docs/demos/jspsych-survey-demo2.html
@@ -5,9 +5,9 @@
     <script src="docs-demo-timeline.js"></script>
     <script src="https://unpkg.com/[email protected]"></script>
     <script src="https://unpkg.com/@jspsych/[email protected]"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey@0.2.2"></script>
+    <script src="../../packages/plugin-survey/dist/index.browser.js"></script>
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/jspsych.css" />
-    <link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@0.2.2/css/survey.css">
+    <link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css">
     <link rel="stylesheet" href="docs-demo.css" type="text/css">
   </head>
   <body></body>
@@ -17,45 +17,60 @@
 
     const trial = {
       type: jsPsychSurvey,
-      pages: [
-        [
+      survey_json: {
+        showQuestionNumbers: false,
+        title: 'My questionnaire',
+        completeText: 'Done!',
+        pageNextText: 'Continue',
+        pagePrevText: 'Previous',
+        pages: [
           {
-            type: 'text',
-            prompt: "Where were you born?", 
-            placeholder: 'City, State, Country',
-            name: 'birthplace', 
-            required: true,
-          }, 
+            name: 'page1',
+            elements: [
+                {
+                  type: 'text',
+                  title: 'Where were you born?', 
+                  placeholder: 'City, State/Region, Country',
+                  name: 'birthplace', 
+                  size: 30,
+                  isRequired: true,
+                }, 
+                {
+                  type: 'text',
+                  title: 'How old are you?', 
+                  name: 'age', 
+                  isRequired: false,
+                  inputType: 'number',
+                  min: 0,
+                  max: 100,
+                  defaultValue: 0
+                }
+              ]
+          },
           {
-            type: 'text',
-            prompt: "How old are you?", 
-            name: 'age', 
-            textbox_columns: 5,
-            required: false,
-          }
-        ],
-        [
-          {
-            type: 'multi-choice',
-            prompt: "What's your favorite color?", 
-            options: ['blue','yellow','pink','teal','orange','lime green','other','none of these'],
-            name: 'FavColor', 
-          }, 
-          {
-            type: 'multi-select',
-            prompt: "Which of these animals do you like? Select all that apply.", 
-            options: ['lion','squirrel','badger','whale'],
-            option_reorder: 'random',
-            columns: 0,
-            name: 'AnimalLike', 
+            name: 'page2',
+            elements: [
+              {
+                type: 'radiogroup',
+                title: "What's your favorite color?", 
+                choices: ['Blue','Yellow','Pink','Teal','Orange','Lime green'],
+                showNoneItem: true,
+                showOtherItem: true,
+                colCount: 0,
+                name: 'FavColor',
+              }, 
+              {
+                type: 'checkbox',
+                title: 'Which of these animals do you like? Select all that apply.', 
+                choices: ['Lion','Squirrel','Badger','Whale', 'Turtle'],
+                choicesOrder: 'random',
+                colCount: 0,
+                name: 'FavAnimals', 
+              }
+            ]
           }
         ]
-      ],
-      title: 'My questionnaire',
-      button_label_next: 'Continue',
-      button_label_back: 'Previous',
-      button_label_finish: 'Submit',
-      show_question_numbers: 'onPage'
+      }
     };
 
     const timeline = [trial];

diff --git a/docs/demos/jspsych-survey-demo3.html b/docs/demos/jspsych-survey-demo3.html
@@ -5,9 +5,9 @@
     <script src="docs-demo-timeline.js"></script>
     <script src="https://unpkg.com/[email protected]"></script>
     <script src="https://unpkg.com/@jspsych/[email protected]"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey@0.2.2"></script>
+    <script src="../../packages/plugin-survey/dist/index.browser.js"></script>
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/jspsych.css" />
-    <link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@0.2.2/css/survey.css">
+    <link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css">
     <link rel="stylesheet" href="docs-demo.css" type="text/css">
   </head>
   <body></body>
@@ -17,62 +17,79 @@
 
     const trial = {
       type: jsPsychSurvey,
-      pages: [
-        [
+      survey_json: {
+        showQuestionNumbers: false,
+        title: 'Likert scale examples',
+        pages: [
           {
-            type: 'likert',
-            prompt: 'I like to eat vegetables.',
-            likert_scale_min_label: 'Strongly Disagree',
-            likert_scale_max_label: 'Strongly Agree',
-            likert_scale_values: [
-              {value: 1},
-              {value: 2},
-              {value: 3},
-              {value: 4},
-              {value: 5}
+            elements: [
+              {
+                type: 'rating',
+                name: 'like-vegetables',
+                title: 'I like to eat vegetables.',
+                description: 'Button rating scale with min/max descriptions',
+                minRateDescription: 'Strongly Disagree',
+                maxRateDescription: 'Strongly Agree',
+                displayMode: 'buttons',
+                rateValues: [1,2,3,4,5]
+              }, 
+              {
+                type: 'rating',
+                name: 'like-cake',
+                title: 'I like to eat cake.',
+                description: 'Star rating scale with min/max descriptions',
+                minRateDescription: 'Strongly Disagree',
+                maxRateDescription: 'Strongly Agree',
+                rateType: 'stars',
+                rateCount: 10,
+                rateMax: 10,
+              },
+              {
+                type: 'rating',
+                name: 'like-cooking',
+                title: 'How much do you enjoy cooking?',
+                description: 'Smiley rating scale without min/max descriptions',
+                rateType: 'smileys',
+                rateCount: 10,
+                rateMax: 10,
+                scaleColorMode: 'colored',
+              }
             ]
-          }, 
-          {
-            type: 'likert',
-            prompt: 'I like to eat fruit.',
-            likert_scale_min_label: 'Strongly Disagree',
-            likert_scale_max_label: 'Strongly Agree',
-            likert_scale_values: [
-              {value: 1},
-              {value: 2},
-              {value: 3},
-              {value: 4},
-              {value: 5}
-            ]
-          },
-          {
-            type: 'likert',
-            prompt: 'I like to eat meat.',
-            likert_scale_min_label: 'Strongly Disagree',
-            likert_scale_max_label: 'Strongly Agree',
-            likert_scale_values: [
-              {value: 1},
-              {value: 2},
-              {value: 3},
-              {value: 4},
-              {value: 5}
+          }, {
+            elements: [
+              {
+                type: 'matrix',
+                name: 'like-food-matrix',
+                title: 'Matrix question for rating mutliple statements on the same scale.',
+                alternateRows: true,
+                isAllRowRequired: true,
+                rows: [
+                  {text: 'I like to eat vegetables.', value: 'VeggiesTable'},
+                  {text: 'I like to eat fruit.', value: 'FruitTable'},
+                  {text: 'I like to eat cake.', value: 'CakeTable'},
+                  {text: 'I like to cook.', value: 'CookTable'},
+                ],
+                columns: [{
+                  "value": 5,
+                  "text": "Strongly agree"
+                }, {
+                  "value": 4,
+                  "text": "Agree"
+                }, {
+                  "value": 3,
+                  "text": "Neutral"
+                }, {
+                  "value": 2,
+                  "text": "Disagree"
+                }, {
+                  "value": 1,
+                  "text": "Strongly disagree"
+                }]
+              }
             ]
-          },  
-
-        ],
-        [
-          {
-            type: 'likert-table',
-            prompt: ' ',
-            statements: [
-              {prompt: 'I like to eat vegetables', name: 'VeggiesTable'},
-              {prompt: 'I like to eat fruit', name: 'FruitTable'},
-              {prompt: 'I like to eat meat', name: 'MeatTable'},
-            ],
-            options: ['Strongly Disagree', 'Disagree', 'Neutral', 'Agree', 'Strongly Agree'],
           }
         ]
-      ],
+      }
     };
 
     const timeline = [trial];