HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 19:20:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add survey demo showing how to add trial data - fixes #2548

Browse Source
This commit is contained in:
Becky Gilbert 2022-10-06 16:32:08 -07:00
parent fc78351ac1
commit 468545c281
2 changed files with 133 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
docs/demos/jspsych-survey-demo5.html Normal file
View File

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey@0.2.1"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.0/css/jspsych.css" />
<link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@0.2.1/css/survey.css">
<link rel="stylesheet" href="docs-demo.css" type="text/css">
</head>
<body></body>
<script>
const jsPsych = initJsPsych();
const question_info = [
{
'fruit': 'apples',
'Q1_prompt': 'Do you like apples?',
'Q1_type': 'regular'
},
{
'fruit': 'bananas',
'Q1_prompt': 'Do you NOT like bananas?',
'Q1_type': 'reverse'
},
];
const survey = {
type: jsPsychSurvey,
pages:[
[
{
type: 'multi-choice',
prompt: jsPsych.timelineVariable('Q1_prompt'),
options: ['Yes', 'No'],
name: 'Q1'
},
{
type: 'text',
prompt: function() {
return `What's your favorite thing about ${jsPsych.timelineVariable('fruit')}?`;
},
name: 'Q2'
}
]
],
data: {
'Q1_prompt': jsPsych.timelineVariable('Q1_prompt'),
'Q1_type': jsPsych.timelineVariable('Q1_type'),
'fruit': jsPsych.timelineVariable('fruit')
},
button_label_finish: 'Continue'
};
const survey_procedure = {
timeline: [survey],
timeline_variables: question_info,
randomize_order: true
};
const timeline = [survey_procedure];
if (typeof jsPsych !== "undefined") {
jsPsych.run(generateDocsDemoTimeline(timeline));
} else {
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
}
</script>
</html>

62
docs/plugins/survey.md
View File

@ -408,4 +408,64 @@ import survey from '@jspsych/plugin-survey';
<iframe src="../../demos/jspsych-survey-demo4.html" width="90%;" height="500px;" frameBorder="0"></iframe> <iframe src="../../demos/jspsych-survey-demo4.html" width="90%;" height="500px;" frameBorder="0"></iframe>
</div> </div>
<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-survey-demo4.html">Open demo in new tab</a> <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-survey-demo4.html">Open demo in new tab</a>
???+ example "Adding data to trial"
When adding any data to a Survey trial, you should add it via the `data` parameter at the whole-trial level (not inside the question objects), even if it only relates to one question out of multiple questions/pages contained wihtin the trial.
=== "Code"
```javascript
const question_info = [
{
'fruit': 'apples',
'Q1_prompt': 'Do you like apples?',
'Q1_type': 'regular'
},
{
'fruit': 'bananas',
'Q1_prompt': 'Do you NOT like bananas?',
'Q1_type': 'reverse'
},
];
const survey = {
type: jsPsychSurvey,
pages: [
[
{
type: 'multi-choice',
prompt: jsPsych.timelineVariable('Q1_prompt'),
options: ['Yes', 'No'],
name: 'Q1'
},
{
type: 'text',
prompt: function() {
return `What's your favorite thing about ${jsPsych.timelineVariable('fruit')}?`;
},
name: 'Q2'
}
]
],
// Add data at the whole-trial level here
data: {
'Q1_prompt': jsPsych.timelineVariable('Q1_prompt'),
'Q1_type': jsPsych.timelineVariable('Q1_type'),
'fruit': jsPsych.timelineVariable('fruit')
},
button_label_finish: 'Continue'
};
const survey_procedure = {
timeline: [survey],
timeline_variables: question_info,
randomize_order: true
};
```
=== "Demo"
<div style="text-align:center;">
<iframe src="../../demos/jspsych-survey-demo5.html" width="90%;" height="500px;" frameBorder="0"></iframe>
</div>
<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-survey-demo5.html">Open demo in new tab</a>