@jspsych/plugin-survey-likert 1.1.3 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.browser.js +196 -227
- package/dist/index.browser.js.map +1 -1
- package/dist/index.browser.min.js +2 -2
- package/dist/index.browser.min.js.map +1 -1
- package/dist/index.cjs +195 -226
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +39 -26
- package/dist/index.js +195 -226
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/src/index.spec.ts +1 -1
- package/src/index.ts +21 -16
package/dist/index.d.ts
CHANGED
|
@@ -1,36 +1,33 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { JsPsychPlugin, ParameterType, JsPsych, TrialType } from 'jspsych';
|
|
2
|
+
|
|
2
3
|
declare const info: {
|
|
3
4
|
readonly name: "survey-likert";
|
|
5
|
+
readonly version: string;
|
|
4
6
|
readonly parameters: {
|
|
5
7
|
/** Array containing one or more objects with parameters for the question(s) that should be shown on the page. */
|
|
6
8
|
readonly questions: {
|
|
7
9
|
readonly type: ParameterType.COMPLEX;
|
|
8
10
|
readonly array: true;
|
|
9
|
-
readonly pretty_name: "Questions";
|
|
10
11
|
readonly nested: {
|
|
11
12
|
/** Question prompt. */
|
|
12
13
|
readonly prompt: {
|
|
13
14
|
readonly type: ParameterType.HTML_STRING;
|
|
14
|
-
readonly pretty_name: "Prompt";
|
|
15
15
|
readonly default: any;
|
|
16
16
|
};
|
|
17
17
|
/** Array of likert labels to display for this question. */
|
|
18
18
|
readonly labels: {
|
|
19
19
|
readonly type: ParameterType.STRING;
|
|
20
20
|
readonly array: true;
|
|
21
|
-
readonly pretty_name: "Labels";
|
|
22
21
|
readonly default: any;
|
|
23
22
|
};
|
|
24
23
|
/** Whether or not a response to this question must be given in order to continue. */
|
|
25
24
|
readonly required: {
|
|
26
25
|
readonly type: ParameterType.BOOL;
|
|
27
|
-
readonly pretty_name: "Required";
|
|
28
26
|
readonly default: false;
|
|
29
27
|
};
|
|
30
28
|
/** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */
|
|
31
29
|
readonly name: {
|
|
32
30
|
readonly type: ParameterType.STRING;
|
|
33
|
-
readonly pretty_name: "Question Name";
|
|
34
31
|
readonly default: "";
|
|
35
32
|
};
|
|
36
33
|
};
|
|
@@ -38,78 +35,83 @@ declare const info: {
|
|
|
38
35
|
/** If true, the order of the questions in the 'questions' array will be randomized. */
|
|
39
36
|
readonly randomize_question_order: {
|
|
40
37
|
readonly type: ParameterType.BOOL;
|
|
41
|
-
readonly pretty_name: "Randomize Question Order";
|
|
42
38
|
readonly default: false;
|
|
43
39
|
};
|
|
44
40
|
/** HTML-formatted string to display at top of the page above all of the questions. */
|
|
45
41
|
readonly preamble: {
|
|
46
42
|
readonly type: ParameterType.HTML_STRING;
|
|
47
|
-
readonly pretty_name: "Preamble";
|
|
48
43
|
readonly default: any;
|
|
49
44
|
};
|
|
50
45
|
/** Width of the likert scales in pixels. */
|
|
51
46
|
readonly scale_width: {
|
|
52
47
|
readonly type: ParameterType.INT;
|
|
53
|
-
readonly pretty_name: "Scale width";
|
|
54
48
|
readonly default: any;
|
|
55
49
|
};
|
|
56
50
|
/** Label of the button to submit responses. */
|
|
57
51
|
readonly button_label: {
|
|
58
52
|
readonly type: ParameterType.STRING;
|
|
59
|
-
readonly pretty_name: "Button label";
|
|
60
53
|
readonly default: "Continue";
|
|
61
54
|
};
|
|
62
55
|
/** Setting this to true will enable browser auto-complete or auto-fill for the form. */
|
|
63
56
|
readonly autocomplete: {
|
|
64
57
|
readonly type: ParameterType.BOOL;
|
|
65
|
-
readonly pretty_name: "Allow autocomplete";
|
|
66
58
|
readonly default: false;
|
|
67
59
|
};
|
|
68
60
|
};
|
|
61
|
+
readonly data: {
|
|
62
|
+
/** An object containing the response for each question. The object will have a separate key (variable) for each question, with the first question in the trial being recorded in `Q0`, the second in `Q1`, and so on. The responses are recorded as integers, representing the position selected on the likert scale for that question. If the `name` parameter is defined for the question, then the response object will use the value of `name` as the key for each question. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */
|
|
63
|
+
readonly response: {
|
|
64
|
+
readonly type: ParameterType.OBJECT;
|
|
65
|
+
};
|
|
66
|
+
/** The response time in milliseconds for the participant to make a response. The time is measured from when the questions first appear on the screen until the participant's response(s) are submitted. */
|
|
67
|
+
readonly rt: {
|
|
68
|
+
readonly type: ParameterType.INT;
|
|
69
|
+
};
|
|
70
|
+
/** An array with the order of questions. For example `[2,0,1]` would indicate that the first question was `trial.questions[2]` (the third item in the `questions` parameter), the second question was `trial.questions[0]`, and the final question was `trial.questions[1]`. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */
|
|
71
|
+
readonly question_order: {
|
|
72
|
+
readonly type: ParameterType.INT;
|
|
73
|
+
readonly array: true;
|
|
74
|
+
};
|
|
75
|
+
};
|
|
69
76
|
};
|
|
70
77
|
type Info = typeof info;
|
|
71
78
|
/**
|
|
72
|
-
*
|
|
73
|
-
*
|
|
74
|
-
* jsPsych plugin for gathering responses to questions on a likert scale
|
|
79
|
+
* The survey-likert plugin displays a set of questions with Likert scale responses. The participant responds
|
|
80
|
+
* by selecting a radio button.
|
|
75
81
|
*
|
|
76
82
|
* @author Josh de Leeuw
|
|
77
|
-
* @see {@link https://www.jspsych.org/plugins/
|
|
83
|
+
* @see {@link https://www.jspsych.org/latest/plugins/survey-likert/ survey-likert plugin documentation on jspsych.org}
|
|
78
84
|
*/
|
|
79
85
|
declare class SurveyLikertPlugin implements JsPsychPlugin<Info> {
|
|
80
86
|
private jsPsych;
|
|
81
87
|
static info: {
|
|
82
88
|
readonly name: "survey-likert";
|
|
89
|
+
readonly version: string;
|
|
83
90
|
readonly parameters: {
|
|
84
91
|
/** Array containing one or more objects with parameters for the question(s) that should be shown on the page. */
|
|
85
92
|
readonly questions: {
|
|
86
93
|
readonly type: ParameterType.COMPLEX;
|
|
87
94
|
readonly array: true;
|
|
88
|
-
readonly pretty_name: "Questions";
|
|
89
95
|
readonly nested: {
|
|
90
96
|
/** Question prompt. */
|
|
91
97
|
readonly prompt: {
|
|
92
98
|
readonly type: ParameterType.HTML_STRING;
|
|
93
|
-
readonly pretty_name: "Prompt";
|
|
94
99
|
readonly default: any;
|
|
95
100
|
};
|
|
96
101
|
/** Array of likert labels to display for this question. */
|
|
97
102
|
readonly labels: {
|
|
98
103
|
readonly type: ParameterType.STRING;
|
|
99
104
|
readonly array: true;
|
|
100
|
-
readonly pretty_name: "Labels";
|
|
101
105
|
readonly default: any;
|
|
102
106
|
};
|
|
103
107
|
/** Whether or not a response to this question must be given in order to continue. */
|
|
104
108
|
readonly required: {
|
|
105
109
|
readonly type: ParameterType.BOOL;
|
|
106
|
-
readonly pretty_name: "Required";
|
|
107
110
|
readonly default: false;
|
|
108
111
|
};
|
|
109
112
|
/** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */
|
|
110
113
|
readonly name: {
|
|
111
114
|
readonly type: ParameterType.STRING;
|
|
112
|
-
readonly pretty_name: "Question Name";
|
|
113
115
|
readonly default: "";
|
|
114
116
|
};
|
|
115
117
|
};
|
|
@@ -117,34 +119,44 @@ declare class SurveyLikertPlugin implements JsPsychPlugin<Info> {
|
|
|
117
119
|
/** If true, the order of the questions in the 'questions' array will be randomized. */
|
|
118
120
|
readonly randomize_question_order: {
|
|
119
121
|
readonly type: ParameterType.BOOL;
|
|
120
|
-
readonly pretty_name: "Randomize Question Order";
|
|
121
122
|
readonly default: false;
|
|
122
123
|
};
|
|
123
124
|
/** HTML-formatted string to display at top of the page above all of the questions. */
|
|
124
125
|
readonly preamble: {
|
|
125
126
|
readonly type: ParameterType.HTML_STRING;
|
|
126
|
-
readonly pretty_name: "Preamble";
|
|
127
127
|
readonly default: any;
|
|
128
128
|
};
|
|
129
129
|
/** Width of the likert scales in pixels. */
|
|
130
130
|
readonly scale_width: {
|
|
131
131
|
readonly type: ParameterType.INT;
|
|
132
|
-
readonly pretty_name: "Scale width";
|
|
133
132
|
readonly default: any;
|
|
134
133
|
};
|
|
135
134
|
/** Label of the button to submit responses. */
|
|
136
135
|
readonly button_label: {
|
|
137
136
|
readonly type: ParameterType.STRING;
|
|
138
|
-
readonly pretty_name: "Button label";
|
|
139
137
|
readonly default: "Continue";
|
|
140
138
|
};
|
|
141
139
|
/** Setting this to true will enable browser auto-complete or auto-fill for the form. */
|
|
142
140
|
readonly autocomplete: {
|
|
143
141
|
readonly type: ParameterType.BOOL;
|
|
144
|
-
readonly pretty_name: "Allow autocomplete";
|
|
145
142
|
readonly default: false;
|
|
146
143
|
};
|
|
147
144
|
};
|
|
145
|
+
readonly data: {
|
|
146
|
+
/** An object containing the response for each question. The object will have a separate key (variable) for each question, with the first question in the trial being recorded in `Q0`, the second in `Q1`, and so on. The responses are recorded as integers, representing the position selected on the likert scale for that question. If the `name` parameter is defined for the question, then the response object will use the value of `name` as the key for each question. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */
|
|
147
|
+
readonly response: {
|
|
148
|
+
readonly type: ParameterType.OBJECT;
|
|
149
|
+
};
|
|
150
|
+
/** The response time in milliseconds for the participant to make a response. The time is measured from when the questions first appear on the screen until the participant's response(s) are submitted. */
|
|
151
|
+
readonly rt: {
|
|
152
|
+
readonly type: ParameterType.INT;
|
|
153
|
+
};
|
|
154
|
+
/** An array with the order of questions. For example `[2,0,1]` would indicate that the first question was `trial.questions[2]` (the third item in the `questions` parameter), the second question was `trial.questions[0]`, and the final question was `trial.questions[1]`. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */
|
|
155
|
+
readonly question_order: {
|
|
156
|
+
readonly type: ParameterType.INT;
|
|
157
|
+
readonly array: true;
|
|
158
|
+
};
|
|
159
|
+
};
|
|
148
160
|
};
|
|
149
161
|
constructor(jsPsych: JsPsych);
|
|
150
162
|
trial(display_element: HTMLElement, trial: TrialType<Info>): void;
|
|
@@ -153,4 +165,5 @@ declare class SurveyLikertPlugin implements JsPsychPlugin<Info> {
|
|
|
153
165
|
private simulate_data_only;
|
|
154
166
|
private simulate_visual;
|
|
155
167
|
}
|
|
156
|
-
|
|
168
|
+
|
|
169
|
+
export { SurveyLikertPlugin as default };
|
package/dist/index.js
CHANGED
|
@@ -1,248 +1,217 @@
|
|
|
1
1
|
import { ParameterType } from 'jspsych';
|
|
2
2
|
|
|
3
|
+
var version = "2.0.1";
|
|
4
|
+
|
|
3
5
|
const info = {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
default: undefined,
|
|
17
|
-
},
|
|
18
|
-
/** Array of likert labels to display for this question. */
|
|
19
|
-
labels: {
|
|
20
|
-
type: ParameterType.STRING,
|
|
21
|
-
array: true,
|
|
22
|
-
pretty_name: "Labels",
|
|
23
|
-
default: undefined,
|
|
24
|
-
},
|
|
25
|
-
/** Whether or not a response to this question must be given in order to continue. */
|
|
26
|
-
required: {
|
|
27
|
-
type: ParameterType.BOOL,
|
|
28
|
-
pretty_name: "Required",
|
|
29
|
-
default: false,
|
|
30
|
-
},
|
|
31
|
-
/** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */
|
|
32
|
-
name: {
|
|
33
|
-
type: ParameterType.STRING,
|
|
34
|
-
pretty_name: "Question Name",
|
|
35
|
-
default: "",
|
|
36
|
-
},
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
/** If true, the order of the questions in the 'questions' array will be randomized. */
|
|
40
|
-
randomize_question_order: {
|
|
41
|
-
type: ParameterType.BOOL,
|
|
42
|
-
pretty_name: "Randomize Question Order",
|
|
43
|
-
default: false,
|
|
44
|
-
},
|
|
45
|
-
/** HTML-formatted string to display at top of the page above all of the questions. */
|
|
46
|
-
preamble: {
|
|
47
|
-
type: ParameterType.HTML_STRING,
|
|
48
|
-
pretty_name: "Preamble",
|
|
49
|
-
default: null,
|
|
50
|
-
},
|
|
51
|
-
/** Width of the likert scales in pixels. */
|
|
52
|
-
scale_width: {
|
|
53
|
-
type: ParameterType.INT,
|
|
54
|
-
pretty_name: "Scale width",
|
|
55
|
-
default: null,
|
|
6
|
+
name: "survey-likert",
|
|
7
|
+
version,
|
|
8
|
+
parameters: {
|
|
9
|
+
/** Array containing one or more objects with parameters for the question(s) that should be shown on the page. */
|
|
10
|
+
questions: {
|
|
11
|
+
type: ParameterType.COMPLEX,
|
|
12
|
+
array: true,
|
|
13
|
+
nested: {
|
|
14
|
+
/** Question prompt. */
|
|
15
|
+
prompt: {
|
|
16
|
+
type: ParameterType.HTML_STRING,
|
|
17
|
+
default: void 0
|
|
56
18
|
},
|
|
57
|
-
/**
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
19
|
+
/** Array of likert labels to display for this question. */
|
|
20
|
+
labels: {
|
|
21
|
+
type: ParameterType.STRING,
|
|
22
|
+
array: true,
|
|
23
|
+
default: void 0
|
|
62
24
|
},
|
|
63
|
-
/**
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
default: false,
|
|
25
|
+
/** Whether or not a response to this question must be given in order to continue. */
|
|
26
|
+
required: {
|
|
27
|
+
type: ParameterType.BOOL,
|
|
28
|
+
default: false
|
|
68
29
|
},
|
|
30
|
+
/** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */
|
|
31
|
+
name: {
|
|
32
|
+
type: ParameterType.STRING,
|
|
33
|
+
default: ""
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
/** If true, the order of the questions in the 'questions' array will be randomized. */
|
|
38
|
+
randomize_question_order: {
|
|
39
|
+
type: ParameterType.BOOL,
|
|
40
|
+
default: false
|
|
41
|
+
},
|
|
42
|
+
/** HTML-formatted string to display at top of the page above all of the questions. */
|
|
43
|
+
preamble: {
|
|
44
|
+
type: ParameterType.HTML_STRING,
|
|
45
|
+
default: null
|
|
69
46
|
},
|
|
47
|
+
/** Width of the likert scales in pixels. */
|
|
48
|
+
scale_width: {
|
|
49
|
+
type: ParameterType.INT,
|
|
50
|
+
default: null
|
|
51
|
+
},
|
|
52
|
+
/** Label of the button to submit responses. */
|
|
53
|
+
button_label: {
|
|
54
|
+
type: ParameterType.STRING,
|
|
55
|
+
default: "Continue"
|
|
56
|
+
},
|
|
57
|
+
/** Setting this to true will enable browser auto-complete or auto-fill for the form. */
|
|
58
|
+
autocomplete: {
|
|
59
|
+
type: ParameterType.BOOL,
|
|
60
|
+
default: false
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
data: {
|
|
64
|
+
/** An object containing the response for each question. The object will have a separate key (variable) for each question, with the first question in the trial being recorded in `Q0`, the second in `Q1`, and so on. The responses are recorded as integers, representing the position selected on the likert scale for that question. If the `name` parameter is defined for the question, then the response object will use the value of `name` as the key for each question. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */
|
|
65
|
+
response: {
|
|
66
|
+
type: ParameterType.OBJECT
|
|
67
|
+
},
|
|
68
|
+
/** The response time in milliseconds for the participant to make a response. The time is measured from when the questions first appear on the screen until the participant's response(s) are submitted. */
|
|
69
|
+
rt: {
|
|
70
|
+
type: ParameterType.INT
|
|
71
|
+
},
|
|
72
|
+
/** An array with the order of questions. For example `[2,0,1]` would indicate that the first question was `trial.questions[2]` (the third item in the `questions` parameter), the second question was `trial.questions[0]`, and the final question was `trial.questions[1]`. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */
|
|
73
|
+
question_order: {
|
|
74
|
+
type: ParameterType.INT,
|
|
75
|
+
array: true
|
|
76
|
+
}
|
|
77
|
+
}
|
|
70
78
|
};
|
|
71
|
-
/**
|
|
72
|
-
* **survey-likert**
|
|
73
|
-
*
|
|
74
|
-
* jsPsych plugin for gathering responses to questions on a likert scale
|
|
75
|
-
*
|
|
76
|
-
* @author Josh de Leeuw
|
|
77
|
-
* @see {@link https://www.jspsych.org/plugins/jspsych-survey-likert/ survey-likert plugin documentation on jspsych.org}
|
|
78
|
-
*/
|
|
79
79
|
class SurveyLikertPlugin {
|
|
80
|
-
|
|
81
|
-
|
|
80
|
+
constructor(jsPsych) {
|
|
81
|
+
this.jsPsych = jsPsych;
|
|
82
|
+
}
|
|
83
|
+
static {
|
|
84
|
+
this.info = info;
|
|
85
|
+
}
|
|
86
|
+
trial(display_element, trial) {
|
|
87
|
+
if (trial.scale_width !== null) {
|
|
88
|
+
var w = trial.scale_width + "px";
|
|
89
|
+
} else {
|
|
90
|
+
var w = "100%";
|
|
82
91
|
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
if (trial.autocomplete) {
|
|
112
|
-
html += '<form id="jspsych-survey-likert-form">';
|
|
113
|
-
}
|
|
114
|
-
else {
|
|
115
|
-
html += '<form id="jspsych-survey-likert-form" autocomplete="off">';
|
|
116
|
-
}
|
|
117
|
-
// add likert scale questions ///
|
|
118
|
-
// generate question order. this is randomized here as opposed to randomizing the order of trial.questions
|
|
119
|
-
// so that the data are always associated with the same question regardless of order
|
|
120
|
-
var question_order = [];
|
|
121
|
-
for (var i = 0; i < trial.questions.length; i++) {
|
|
122
|
-
question_order.push(i);
|
|
123
|
-
}
|
|
124
|
-
if (trial.randomize_question_order) {
|
|
125
|
-
question_order = this.jsPsych.randomization.shuffle(question_order);
|
|
126
|
-
}
|
|
127
|
-
for (var i = 0; i < trial.questions.length; i++) {
|
|
128
|
-
var question = trial.questions[question_order[i]];
|
|
129
|
-
// add question
|
|
130
|
-
html += '<label class="jspsych-survey-likert-statement">' + question.prompt + "</label>";
|
|
131
|
-
// add options
|
|
132
|
-
var width = 100 / question.labels.length;
|
|
133
|
-
var options_string = '<ul class="jspsych-survey-likert-opts" data-name="' +
|
|
134
|
-
question.name +
|
|
135
|
-
'" data-radio-group="Q' +
|
|
136
|
-
question_order[i] +
|
|
137
|
-
'">';
|
|
138
|
-
for (var j = 0; j < question.labels.length; j++) {
|
|
139
|
-
options_string +=
|
|
140
|
-
'<li style="width:' +
|
|
141
|
-
width +
|
|
142
|
-
'%"><label class="jspsych-survey-likert-opt-label"><input type="radio" name="Q' +
|
|
143
|
-
question_order[i] +
|
|
144
|
-
'" value="' +
|
|
145
|
-
j +
|
|
146
|
-
'"';
|
|
147
|
-
if (question.required) {
|
|
148
|
-
options_string += " required";
|
|
149
|
-
}
|
|
150
|
-
options_string += ">" + question.labels[j] + "</label></li>";
|
|
151
|
-
}
|
|
152
|
-
options_string += "</ul>";
|
|
153
|
-
html += options_string;
|
|
92
|
+
var html = "";
|
|
93
|
+
html += '<style id="jspsych-survey-likert-css">';
|
|
94
|
+
html += ".jspsych-survey-likert-statement { display:block; font-size: 16px; padding-top: 40px; margin-bottom:10px; }.jspsych-survey-likert-opts { list-style:none; width:" + w + "; margin:auto; padding:0 0 35px; display:block; font-size: 14px; line-height:1.1em; }.jspsych-survey-likert-opt-label { line-height: 1.1em; color: #444; }.jspsych-survey-likert-opts:before { content: ''; position:relative; top:11px; /*left:9.5%;*/ display:block; background-color:#efefef; height:4px; width:100%; }.jspsych-survey-likert-opts:last-of-type { border-bottom: 0; }.jspsych-survey-likert-opts li { display:inline-block; /*width:19%;*/ text-align:center; vertical-align: top; }.jspsych-survey-likert-opts li input[type=radio] { display:block; position:relative; top:0; left:50%; margin-left:-6px; }";
|
|
95
|
+
html += "</style>";
|
|
96
|
+
if (trial.preamble !== null) {
|
|
97
|
+
html += '<div id="jspsych-survey-likert-preamble" class="jspsych-survey-likert-preamble">' + trial.preamble + "</div>";
|
|
98
|
+
}
|
|
99
|
+
if (trial.autocomplete) {
|
|
100
|
+
html += '<form id="jspsych-survey-likert-form">';
|
|
101
|
+
} else {
|
|
102
|
+
html += '<form id="jspsych-survey-likert-form" autocomplete="off">';
|
|
103
|
+
}
|
|
104
|
+
var question_order = [];
|
|
105
|
+
for (var i = 0; i < trial.questions.length; i++) {
|
|
106
|
+
question_order.push(i);
|
|
107
|
+
}
|
|
108
|
+
if (trial.randomize_question_order) {
|
|
109
|
+
question_order = this.jsPsych.randomization.shuffle(question_order);
|
|
110
|
+
}
|
|
111
|
+
for (var i = 0; i < trial.questions.length; i++) {
|
|
112
|
+
var question = trial.questions[question_order[i]];
|
|
113
|
+
html += '<label class="jspsych-survey-likert-statement">' + question.prompt + "</label>";
|
|
114
|
+
var width = 100 / question.labels.length;
|
|
115
|
+
var options_string = '<ul class="jspsych-survey-likert-opts" data-name="' + question.name + '" data-radio-group="Q' + question_order[i] + '">';
|
|
116
|
+
for (var j = 0; j < question.labels.length; j++) {
|
|
117
|
+
options_string += '<li style="width:' + width + '%"><label class="jspsych-survey-likert-opt-label"><input type="radio" name="Q' + question_order[i] + '" value="' + j + '"';
|
|
118
|
+
if (question.required) {
|
|
119
|
+
options_string += " required";
|
|
154
120
|
}
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
'"></input>';
|
|
160
|
-
html += "</form>";
|
|
161
|
-
display_element.innerHTML = html;
|
|
162
|
-
display_element.querySelector("#jspsych-survey-likert-form").addEventListener("submit", (e) => {
|
|
163
|
-
e.preventDefault();
|
|
164
|
-
// measure response time
|
|
165
|
-
var endTime = performance.now();
|
|
166
|
-
var response_time = Math.round(endTime - startTime);
|
|
167
|
-
// create object to hold responses
|
|
168
|
-
var question_data = {};
|
|
169
|
-
var matches = display_element.querySelectorAll("#jspsych-survey-likert-form .jspsych-survey-likert-opts");
|
|
170
|
-
for (var index = 0; index < matches.length; index++) {
|
|
171
|
-
var id = matches[index].dataset["radioGroup"];
|
|
172
|
-
var el = display_element.querySelector('input[name="' + id + '"]:checked');
|
|
173
|
-
if (el === null) {
|
|
174
|
-
var response = "";
|
|
175
|
-
}
|
|
176
|
-
else {
|
|
177
|
-
var response = parseInt(el.value);
|
|
178
|
-
}
|
|
179
|
-
var obje = {};
|
|
180
|
-
if (matches[index].attributes["data-name"].value !== "") {
|
|
181
|
-
var name = matches[index].attributes["data-name"].value;
|
|
182
|
-
}
|
|
183
|
-
else {
|
|
184
|
-
var name = id;
|
|
185
|
-
}
|
|
186
|
-
obje[name] = response;
|
|
187
|
-
Object.assign(question_data, obje);
|
|
188
|
-
}
|
|
189
|
-
// save data
|
|
190
|
-
var trial_data = {
|
|
191
|
-
rt: response_time,
|
|
192
|
-
response: question_data,
|
|
193
|
-
question_order: question_order,
|
|
194
|
-
};
|
|
195
|
-
display_element.innerHTML = "";
|
|
196
|
-
// next trial
|
|
197
|
-
this.jsPsych.finishTrial(trial_data);
|
|
198
|
-
});
|
|
199
|
-
var startTime = performance.now();
|
|
121
|
+
options_string += ">" + question.labels[j] + "</label></li>";
|
|
122
|
+
}
|
|
123
|
+
options_string += "</ul>";
|
|
124
|
+
html += options_string;
|
|
200
125
|
}
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
126
|
+
html += '<input type="submit" id="jspsych-survey-likert-next" class="jspsych-survey-likert jspsych-btn" value="' + trial.button_label + '"></input>';
|
|
127
|
+
html += "</form>";
|
|
128
|
+
display_element.innerHTML = html;
|
|
129
|
+
display_element.querySelector("#jspsych-survey-likert-form").addEventListener("submit", (e) => {
|
|
130
|
+
e.preventDefault();
|
|
131
|
+
var endTime = performance.now();
|
|
132
|
+
var response_time = Math.round(endTime - startTime);
|
|
133
|
+
var question_data = {};
|
|
134
|
+
var matches = display_element.querySelectorAll(
|
|
135
|
+
"#jspsych-survey-likert-form .jspsych-survey-likert-opts"
|
|
136
|
+
);
|
|
137
|
+
for (var index = 0; index < matches.length; index++) {
|
|
138
|
+
var id = matches[index].dataset["radioGroup"];
|
|
139
|
+
var el = display_element.querySelector(
|
|
140
|
+
'input[name="' + id + '"]:checked'
|
|
141
|
+
);
|
|
142
|
+
if (el === null) {
|
|
143
|
+
var response = "";
|
|
144
|
+
} else {
|
|
145
|
+
var response = parseInt(el.value);
|
|
205
146
|
}
|
|
206
|
-
|
|
207
|
-
|
|
147
|
+
var obje = {};
|
|
148
|
+
if (matches[index].attributes["data-name"].value !== "") {
|
|
149
|
+
var name = matches[index].attributes["data-name"].value;
|
|
150
|
+
} else {
|
|
151
|
+
var name = id;
|
|
208
152
|
}
|
|
153
|
+
obje[name] = response;
|
|
154
|
+
Object.assign(question_data, obje);
|
|
155
|
+
}
|
|
156
|
+
var trial_data = {
|
|
157
|
+
rt: response_time,
|
|
158
|
+
response: question_data,
|
|
159
|
+
question_order
|
|
160
|
+
};
|
|
161
|
+
this.jsPsych.finishTrial(trial_data);
|
|
162
|
+
});
|
|
163
|
+
var startTime = performance.now();
|
|
164
|
+
}
|
|
165
|
+
simulate(trial, simulation_mode, simulation_options, load_callback) {
|
|
166
|
+
if (simulation_mode == "data-only") {
|
|
167
|
+
load_callback();
|
|
168
|
+
this.simulate_data_only(trial, simulation_options);
|
|
209
169
|
}
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
let rt = 1000;
|
|
213
|
-
for (const q of trial.questions) {
|
|
214
|
-
const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;
|
|
215
|
-
question_data[name] = this.jsPsych.randomization.randomInt(0, q.labels.length - 1);
|
|
216
|
-
rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);
|
|
217
|
-
}
|
|
218
|
-
const default_data = {
|
|
219
|
-
response: question_data,
|
|
220
|
-
rt: rt,
|
|
221
|
-
question_order: trial.randomize_question_order
|
|
222
|
-
? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])
|
|
223
|
-
: [...Array(trial.questions.length).keys()],
|
|
224
|
-
};
|
|
225
|
-
const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
|
|
226
|
-
this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
|
|
227
|
-
return data;
|
|
170
|
+
if (simulation_mode == "visual") {
|
|
171
|
+
this.simulate_visual(trial, simulation_options, load_callback);
|
|
228
172
|
}
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
173
|
+
}
|
|
174
|
+
create_simulation_data(trial, simulation_options) {
|
|
175
|
+
const question_data = {};
|
|
176
|
+
let rt = 1e3;
|
|
177
|
+
for (const q of trial.questions) {
|
|
178
|
+
const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;
|
|
179
|
+
question_data[name] = this.jsPsych.randomization.randomInt(0, q.labels.length - 1);
|
|
180
|
+
rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);
|
|
232
181
|
}
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
182
|
+
const default_data = {
|
|
183
|
+
response: question_data,
|
|
184
|
+
rt,
|
|
185
|
+
question_order: trial.randomize_question_order ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()]) : [...Array(trial.questions.length).keys()]
|
|
186
|
+
};
|
|
187
|
+
const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
|
|
188
|
+
this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
|
|
189
|
+
return data;
|
|
190
|
+
}
|
|
191
|
+
simulate_data_only(trial, simulation_options) {
|
|
192
|
+
const data = this.create_simulation_data(trial, simulation_options);
|
|
193
|
+
this.jsPsych.finishTrial(data);
|
|
194
|
+
}
|
|
195
|
+
simulate_visual(trial, simulation_options, load_callback) {
|
|
196
|
+
const data = this.create_simulation_data(trial, simulation_options);
|
|
197
|
+
const display_element = this.jsPsych.getDisplayElement();
|
|
198
|
+
this.trial(display_element, trial);
|
|
199
|
+
load_callback();
|
|
200
|
+
const answers = Object.entries(data.response);
|
|
201
|
+
for (let i = 0; i < answers.length; i++) {
|
|
202
|
+
this.jsPsych.pluginAPI.clickTarget(
|
|
203
|
+
display_element.querySelector(
|
|
204
|
+
`input[type="radio"][name="${answers[i][0]}"][value="${answers[i][1]}"]`
|
|
205
|
+
),
|
|
206
|
+
(data.rt - 1e3) / answers.length * (i + 1)
|
|
207
|
+
);
|
|
243
208
|
}
|
|
209
|
+
this.jsPsych.pluginAPI.clickTarget(
|
|
210
|
+
display_element.querySelector("#jspsych-survey-likert-next"),
|
|
211
|
+
data.rt
|
|
212
|
+
);
|
|
213
|
+
}
|
|
244
214
|
}
|
|
245
|
-
SurveyLikertPlugin.info = info;
|
|
246
215
|
|
|
247
216
|
export { SurveyLikertPlugin as default };
|
|
248
217
|
//# sourceMappingURL=index.js.map
|