Skip to content

Commit 6d99a71

Browse files
becky-gilbertbecky-gilbert
authored
Survey plugin rewrite (fixes #2758) (#3204)
1 parent c765924 commit 6d99a71

35 files changed

+392079
-1537
lines changed

‎.changeset/bright-pillows-collect.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@jspsych/plugin-survey": major
3+
---
4+
5+
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.

‎docs/demos/jspsych-survey-demo1.html

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<script src="docs-demo-timeline.js"></script>
55
<script src="https://unpkg.com/[email protected]"></script>
66
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
7-
<script src="https://unpkg.com/@jspsych/plugin-survey@0.2.2"></script>
7+
<script src="../../packages/plugin-survey/dist/index.browser.js"></script>
88
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/jspsych.css" />
9-
<link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@0.2.2/css/survey.css">
9+
<link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css">
1010
<link rel="stylesheet" href="docs-demo.css" type="text/css">
1111
</head>
1212
<body></body>
@@ -16,28 +16,29 @@
1616

1717
const trial = {
1818
type: jsPsychSurvey,
19-
pages: [
20-
[
21-
{
22-
type: 'html',
23-
prompt: 'Please answer the following questions:',
24-
},
25-
{
26-
type: 'multi-choice',
27-
prompt: "Which of the following do you like the most?",
28-
name: 'VegetablesLike',
29-
options: ['Tomato', 'Cucumber', 'Eggplant', 'Corn', 'Peas'],
30-
required: true
31-
},
32-
{
33-
type: 'multi-select',
34-
prompt: "Which of the following do you like?",
35-
name: 'FruitLike',
36-
options: ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry'],
37-
required: false,
38-
}
19+
survey_json: {
20+
showQuestionNumbers: false,
21+
elements:
22+
[
23+
{
24+
type: 'radiogroup',
25+
title: "Which of the following do you like the most?",
26+
name: 'vegetablesLike',
27+
choices: ['Tomato', 'Cucumber', 'Eggplant', 'Corn', 'Peas', 'Broccoli']
28+
},
29+
{
30+
type: 'checkbox',
31+
title: "Which of the following do you like?",
32+
name: 'fruitLike',
33+
description: "You can select as many as you want.",
34+
choices: ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry', 'Kiwi', 'Mango'],
35+
showOtherItem: true,
36+
showSelectAllItem: true,
37+
showNoneItem: true,
38+
required: true,
39+
},
3940
]
40-
],
41+
},
4142
};
4243

4344
const timeline = [trial];

‎docs/demos/jspsych-survey-demo2.html

Lines changed: 52 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<script src="docs-demo-timeline.js"></script>
66
<script src="https://unpkg.com/[email protected]"></script>
77
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
8-
<script src="https://unpkg.com/@jspsych/plugin-survey@0.2.2"></script>
8+
<script src="../../packages/plugin-survey/dist/index.browser.js"></script>
99
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/jspsych.css" />
10-
<link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@0.2.2/css/survey.css">
10+
<link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css">
1111
<link rel="stylesheet" href="docs-demo.css" type="text/css">
1212
</head>
1313
<body></body>
@@ -17,45 +17,60 @@
1717

1818
const trial = {
1919
type: jsPsychSurvey,
20-
pages: [
21-
[
20+
survey_json: {
21+
showQuestionNumbers: false,
22+
title: 'My questionnaire',
23+
completeText: 'Done!',
24+
pageNextText: 'Continue',
25+
pagePrevText: 'Previous',
26+
pages: [
2227
{
23-
type: 'text',
24-
prompt: "Where were you born?",
25-
placeholder: 'City, State, Country',
26-
name: 'birthplace',
27-
required: true,
28-
},
28+
name: 'page1',
29+
elements: [
30+
{
31+
type: 'text',
32+
title: 'Where were you born?',
33+
placeholder: 'City, State/Region, Country',
34+
name: 'birthplace',
35+
size: 30,
36+
isRequired: true,
37+
},
38+
{
39+
type: 'text',
40+
title: 'How old are you?',
41+
name: 'age',
42+
isRequired: false,
43+
inputType: 'number',
44+
min: 0,
45+
max: 100,
46+
defaultValue: 0
47+
}
48+
]
49+
},
2950
{
30-
type: 'text',
31-
prompt: "How old are you?",
32-
name: 'age',
33-
textbox_columns: 5,
34-
required: false,
35-
}
36-
],
37-
[
38-
{
39-
type: 'multi-choice',
40-
prompt: "What's your favorite color?",
41-
options: ['blue','yellow','pink','teal','orange','lime green','other','none of these'],
42-
name: 'FavColor',
43-
},
44-
{
45-
type: 'multi-select',
46-
prompt: "Which of these animals do you like? Select all that apply.",
47-
options: ['lion','squirrel','badger','whale'],
48-
option_reorder: 'random',
49-
columns: 0,
50-
name: 'AnimalLike',
51+
name: 'page2',
52+
elements: [
53+
{
54+
type: 'radiogroup',
55+
title: "What's your favorite color?",
56+
choices: ['Blue','Yellow','Pink','Teal','Orange','Lime green'],
57+
showNoneItem: true,
58+
showOtherItem: true,
59+
colCount: 0,
60+
name: 'FavColor',
61+
},
62+
{
63+
type: 'checkbox',
64+
title: 'Which of these animals do you like? Select all that apply.',
65+
choices: ['Lion','Squirrel','Badger','Whale', 'Turtle'],
66+
choicesOrder: 'random',
67+
colCount: 0,
68+
name: 'FavAnimals',
69+
}
70+
]
5171
}
5272
]
53-
],
54-
title: 'My questionnaire',
55-
button_label_next: 'Continue',
56-
button_label_back: 'Previous',
57-
button_label_finish: 'Submit',
58-
show_question_numbers: 'onPage'
73+
}
5974
};
6075

6176
const timeline = [trial];

‎docs/demos/jspsych-survey-demo3.html

Lines changed: 70 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<script src="docs-demo-timeline.js"></script>
66
<script src="https://unpkg.com/[email protected]"></script>
77
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
8-
<script src="https://unpkg.com/@jspsych/plugin-survey@0.2.2"></script>
8+
<script src="../../packages/plugin-survey/dist/index.browser.js"></script>
99
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/jspsych.css" />
10-
<link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@0.2.2/css/survey.css">
10+
<link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css">
1111
<link rel="stylesheet" href="docs-demo.css" type="text/css">
1212
</head>
1313
<body></body>
@@ -17,62 +17,79 @@
1717

1818
const trial = {
1919
type: jsPsychSurvey,
20-
pages: [
21-
[
20+
survey_json: {
21+
showQuestionNumbers: false,
22+
title: 'Likert scale examples',
23+
pages: [
2224
{
23-
type: 'likert',
24-
prompt: 'I like to eat vegetables.',
25-
likert_scale_min_label: 'Strongly Disagree',
26-
likert_scale_max_label: 'Strongly Agree',
27-
likert_scale_values: [
28-
{value: 1},
29-
{value: 2},
30-
{value: 3},
31-
{value: 4},
32-
{value: 5}
25+
elements: [
26+
{
27+
type: 'rating',
28+
name: 'like-vegetables',
29+
title: 'I like to eat vegetables.',
30+
description: 'Button rating scale with min/max descriptions',
31+
minRateDescription: 'Strongly Disagree',
32+
maxRateDescription: 'Strongly Agree',
33+
displayMode: 'buttons',
34+
rateValues: [1,2,3,4,5]
35+
},
36+
{
37+
type: 'rating',
38+
name: 'like-cake',
39+
title: 'I like to eat cake.',
40+
description: 'Star rating scale with min/max descriptions',
41+
minRateDescription: 'Strongly Disagree',
42+
maxRateDescription: 'Strongly Agree',
43+
rateType: 'stars',
44+
rateCount: 10,
45+
rateMax: 10,
46+
},
47+
{
48+
type: 'rating',
49+
name: 'like-cooking',
50+
title: 'How much do you enjoy cooking?',
51+
description: 'Smiley rating scale without min/max descriptions',
52+
rateType: 'smileys',
53+
rateCount: 10,
54+
rateMax: 10,
55+
scaleColorMode: 'colored',
56+
}
3357
]
34-
},
35-
{
36-
type: 'likert',
37-
prompt: 'I like to eat fruit.',
38-
likert_scale_min_label: 'Strongly Disagree',
39-
likert_scale_max_label: 'Strongly Agree',
40-
likert_scale_values: [
41-
{value: 1},
42-
{value: 2},
43-
{value: 3},
44-
{value: 4},
45-
{value: 5}
46-
]
47-
},
48-
{
49-
type: 'likert',
50-
prompt: 'I like to eat meat.',
51-
likert_scale_min_label: 'Strongly Disagree',
52-
likert_scale_max_label: 'Strongly Agree',
53-
likert_scale_values: [
54-
{value: 1},
55-
{value: 2},
56-
{value: 3},
57-
{value: 4},
58-
{value: 5}
58+
}, {
59+
elements: [
60+
{
61+
type: 'matrix',
62+
name: 'like-food-matrix',
63+
title: 'Matrix question for rating mutliple statements on the same scale.',
64+
alternateRows: true,
65+
isAllRowRequired: true,
66+
rows: [
67+
{text: 'I like to eat vegetables.', value: 'VeggiesTable'},
68+
{text: 'I like to eat fruit.', value: 'FruitTable'},
69+
{text: 'I like to eat cake.', value: 'CakeTable'},
70+
{text: 'I like to cook.', value: 'CookTable'},
71+
],
72+
columns: [{
73+
"value": 5,
74+
"text": "Strongly agree"
75+
}, {
76+
"value": 4,
77+
"text": "Agree"
78+
}, {
79+
"value": 3,
80+
"text": "Neutral"
81+
}, {
82+
"value": 2,
83+
"text": "Disagree"
84+
}, {
85+
"value": 1,
86+
"text": "Strongly disagree"
87+
}]
88+
}
5989
]
60-
},
61-
62-
],
63-
[
64-
{
65-
type: 'likert-table',
66-
prompt: ' ',
67-
statements: [
68-
{prompt: 'I like to eat vegetables', name: 'VeggiesTable'},
69-
{prompt: 'I like to eat fruit', name: 'FruitTable'},
70-
{prompt: 'I like to eat meat', name: 'MeatTable'},
71-
],
72-
options: ['Strongly Disagree', 'Disagree', 'Neutral', 'Agree', 'Strongly Agree'],
7390
}
7491
]
75-
],
92+
}
7693
};
7794

7895
const timeline = [trial];

0 commit comments

Comments
 (0)