Skip to content

Commit

Permalink
Survey plugin rewrite (fixes #2758) (#3204)
Browse files Browse the repository at this point in the history
  • Loading branch information
@becky-gilbert
becky-gilbert committed Apr 30, 2024
1 parent c765924 commit 6d99a71
Show file tree
Hide file tree
Showing 35 changed files with 392,079 additions and 1,537 deletions.
5 changes: 5 additions & 0 deletions .changeset/bright-pillows-collect.md
View file
@@ -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.
47 changes: 24 additions & 23 deletions docs/demos/jspsych-survey-demo1.html
View file
Expand Up @@ -4,9 +4,9 @@
<script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.4"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.3"></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/jspsych@7.3.4/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>
Expand All @@ -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];
Expand Down
89 changes: 52 additions & 37 deletions docs/demos/jspsych-survey-demo2.html
View file
Expand Up @@ -5,9 +5,9 @@
<script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.4"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.3"></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/jspsych@7.3.4/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>
Expand All @@ -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];
Expand Down
123 changes: 70 additions & 53 deletions docs/demos/jspsych-survey-demo3.html
View file
Expand Up @@ -5,9 +5,9 @@
<script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.4"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.3"></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/jspsych@7.3.4/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>
Expand All @@ -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];
Expand Down

0 comments on commit 6d99a71

Please sign in to comment.