@jspsych/plugin-survey-multi-choice 2.0.1 → 2.0.2
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 +36 -26
- package/dist/index.browser.js.map +1 -1
- package/dist/index.browser.min.js +16 -2
- package/dist/index.browser.min.js.map +1 -1
- package/dist/index.cjs +35 -25
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +35 -25
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/index.spec.ts +32 -1
- package/src/index.ts +39 -57
package/dist/index.browser.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var jsPsychSurveyMultiChoice = (function (jspsych) {
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
-
var version = "2.0.
|
|
4
|
+
var version = "2.0.2";
|
|
5
5
|
|
|
6
6
|
const info = {
|
|
7
7
|
name: "survey-multi-choice",
|
|
@@ -94,6 +94,7 @@ var jsPsychSurveyMultiChoice = (function (jspsych) {
|
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
};
|
|
97
|
+
const plugin_id_name = "jspsych-survey-multi-choice";
|
|
97
98
|
class SurveyMultiChoicePlugin {
|
|
98
99
|
constructor(jsPsych) {
|
|
99
100
|
this.jsPsych = jsPsych;
|
|
@@ -102,18 +103,24 @@ var jsPsychSurveyMultiChoice = (function (jspsych) {
|
|
|
102
103
|
this.info = info;
|
|
103
104
|
}
|
|
104
105
|
trial(display_element, trial) {
|
|
105
|
-
|
|
106
|
+
const trial_form_id = `${plugin_id_name}_form`;
|
|
106
107
|
var html = "";
|
|
107
|
-
html +=
|
|
108
|
-
|
|
109
|
-
|
|
108
|
+
html += `
|
|
109
|
+
<style id="${plugin_id_name}-css">
|
|
110
|
+
.${plugin_id_name}-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }
|
|
111
|
+
.${plugin_id_name}-text span.required {color: darkred;}
|
|
112
|
+
.${plugin_id_name}-horizontal .${plugin_id_name}-text { text-align: center;}
|
|
113
|
+
.${plugin_id_name}-option { line-height: 2; }
|
|
114
|
+
.${plugin_id_name}-horizontal .${plugin_id_name}-option { display: inline-block; margin-left: 1em; margin-right: 1em; vertical-align: top;}
|
|
115
|
+
label.${plugin_id_name}-text input[type='radio'] {margin-right: 1em;}
|
|
116
|
+
</style>`;
|
|
110
117
|
if (trial.preamble !== null) {
|
|
111
|
-
html +=
|
|
118
|
+
html += `<div id="${plugin_id_name}-preamble" class="${plugin_id_name}-preamble">${trial.preamble}</div>`;
|
|
112
119
|
}
|
|
113
120
|
if (trial.autocomplete) {
|
|
114
|
-
html +=
|
|
121
|
+
html += `<form id="${trial_form_id}">`;
|
|
115
122
|
} else {
|
|
116
|
-
html +=
|
|
123
|
+
html += `<form id="${trial_form_id}" autocomplete="off">`;
|
|
117
124
|
}
|
|
118
125
|
var question_order = [];
|
|
119
126
|
for (var i = 0; i < trial.questions.length; i++) {
|
|
@@ -125,39 +132,42 @@ var jsPsychSurveyMultiChoice = (function (jspsych) {
|
|
|
125
132
|
for (var i = 0; i < trial.questions.length; i++) {
|
|
126
133
|
var question = trial.questions[question_order[i]];
|
|
127
134
|
var question_id = question_order[i];
|
|
128
|
-
var question_classes = [
|
|
135
|
+
var question_classes = [`${plugin_id_name}-question`];
|
|
129
136
|
if (question.horizontal) {
|
|
130
|
-
question_classes.push(
|
|
137
|
+
question_classes.push(`${plugin_id_name}-horizontal`);
|
|
131
138
|
}
|
|
132
|
-
html +=
|
|
133
|
-
html +=
|
|
139
|
+
html += `<div id="${plugin_id_name}-${question_id}" class="${question_classes.join(" ")}" data-name="${question.name}">`;
|
|
140
|
+
html += `<p class="${plugin_id_name}-text survey-multi-choice">${question.prompt}`;
|
|
134
141
|
if (question.required) {
|
|
135
142
|
html += "<span class='required'>*</span>";
|
|
136
143
|
}
|
|
137
144
|
html += "</p>";
|
|
138
145
|
for (var j = 0; j < question.options.length; j++) {
|
|
139
|
-
var option_id_name =
|
|
140
|
-
var input_name =
|
|
141
|
-
var input_id =
|
|
146
|
+
var option_id_name = `${plugin_id_name}-option-${question_id}-${j}`;
|
|
147
|
+
var input_name = `${plugin_id_name}-response-${question_id}`;
|
|
148
|
+
var input_id = `${plugin_id_name}-response-${question_id}-${j}`;
|
|
142
149
|
var required_attr = question.required ? "required" : "";
|
|
143
|
-
html +=
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
150
|
+
html += `
|
|
151
|
+
<div id="${option_id_name}" class="${plugin_id_name}-option">
|
|
152
|
+
<label class="${plugin_id_name}-text" for="${input_id}">
|
|
153
|
+
<input type="radio" name="${input_name}" id="${input_id}" value="${question.options[j]}" ${required_attr} />
|
|
154
|
+
${question.options[j]}
|
|
155
|
+
</label>
|
|
156
|
+
</div>`;
|
|
148
157
|
}
|
|
149
158
|
html += "</div>";
|
|
150
159
|
}
|
|
151
|
-
html +=
|
|
160
|
+
html += `<input type="submit" id="${plugin_id_name}-next" class="${plugin_id_name} jspsych-btn"${trial.button_label ? ' value="' + trial.button_label + '"' : ""} />`;
|
|
152
161
|
html += "</form>";
|
|
153
162
|
display_element.innerHTML = html;
|
|
154
|
-
|
|
163
|
+
const trial_form = display_element.querySelector(`#${trial_form_id}`);
|
|
164
|
+
trial_form.addEventListener("submit", (event) => {
|
|
155
165
|
event.preventDefault();
|
|
156
166
|
var endTime = performance.now();
|
|
157
167
|
var response_time = Math.round(endTime - startTime);
|
|
158
168
|
var question_data = {};
|
|
159
169
|
for (var i2 = 0; i2 < trial.questions.length; i2++) {
|
|
160
|
-
var match = display_element.querySelector(
|
|
170
|
+
var match = display_element.querySelector(`#${plugin_id_name}-${i2}`);
|
|
161
171
|
var id = "Q" + i2;
|
|
162
172
|
var val;
|
|
163
173
|
if (match.querySelector("input[type=radio]:checked") !== null) {
|
|
@@ -221,7 +231,7 @@ var jsPsychSurveyMultiChoice = (function (jspsych) {
|
|
|
221
231
|
for (let i = 0; i < answers.length; i++) {
|
|
222
232
|
this.jsPsych.pluginAPI.clickTarget(
|
|
223
233
|
display_element.querySelector(
|
|
224
|
-
|
|
234
|
+
`#${plugin_id_name}-response-${i}-${trial.questions[i].options.indexOf(
|
|
225
235
|
answers[i][1]
|
|
226
236
|
)}`
|
|
227
237
|
),
|
|
@@ -229,7 +239,7 @@ var jsPsychSurveyMultiChoice = (function (jspsych) {
|
|
|
229
239
|
);
|
|
230
240
|
}
|
|
231
241
|
this.jsPsych.pluginAPI.clickTarget(
|
|
232
|
-
display_element.querySelector(
|
|
242
|
+
display_element.querySelector(`#${plugin_id_name}-next`),
|
|
233
243
|
data.rt
|
|
234
244
|
);
|
|
235
245
|
}
|
|
@@ -238,4 +248,4 @@ var jsPsychSurveyMultiChoice = (function (jspsych) {
|
|
|
238
248
|
return SurveyMultiChoicePlugin;
|
|
239
249
|
|
|
240
250
|
})(jsPsychModule);
|
|
241
|
-
//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-survey-multi-choice@2.0.
|
|
251
|
+
//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-survey-multi-choice@2.0.2/dist/index.browser.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.browser.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n \"name\": \"@jspsych/plugin-survey-multi-choice\",\n \"version\": \"2.0.1\",\n \"description\": \"a jspsych plugin for multiple choice survey questions\",\n \"type\": \"module\",\n \"main\": \"dist/index.cjs\",\n \"exports\": {\n \"import\": \"./dist/index.js\",\n \"require\": \"./dist/index.cjs\"\n },\n \"typings\": \"dist/index.d.ts\",\n \"unpkg\": \"dist/index.browser.min.js\",\n \"files\": [\n \"src\",\n \"dist\"\n ],\n \"source\": \"src/index.ts\",\n \"scripts\": {\n \"test\": \"jest\",\n \"test:watch\": \"npm test -- --watch\",\n \"tsc\": \"tsc\",\n \"build\": \"rollup --config\",\n \"build:watch\": \"npm run build -- --watch\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n \"directory\": \"packages/plugin-survey-multi-choice\"\n },\n \"author\": \"Shane Martin\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n },\n \"homepage\": \"https://www.jspsych.org/latest/plugins/survey-multi-choice\",\n \"peerDependencies\": {\n \"jspsych\": \">=7.1.0\"\n },\n \"devDependencies\": {\n \"@jspsych/config\": \"^3.1.1\",\n \"@jspsych/test-utils\": \"^1.2.0\"\n }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n name: \"survey-multi-choice\",\n version: version,\n parameters: {\n /**\n * An array of objects, each object represents a question that appears on the screen. Each object contains a prompt,\n * options, required, and horizontal parameter that will be applied to the question. See examples below for further\n * clarification.`prompt`: Type string, default value is *undefined*. The string is prompt/question that will be\n * associated with a group of options (radio buttons). All questions will get presented on the same page (trial).\n * `options`: Type array, defualt value is *undefined*. An array of strings. The array contains a set of options to\n * display for an individual question.`required`: Type boolean, default value is null. The boolean value indicates\n * if a question is required('true') or not ('false'), using the HTML5 `required` attribute. If this parameter is\n * undefined, the question will be optional. `horizontal`:Type boolean, default value is false. If true, then the\n * question is centered and the options are displayed horizontally. `name`: Name of the question. Used for storing\n * data. If left undefined then default names (`Q0`, `Q1`, `...`) will be used for the questions.\n */\n questions: {\n type: ParameterType.COMPLEX,\n array: true,\n nested: {\n /** Question prompt. */\n prompt: {\n type: ParameterType.HTML_STRING,\n default: undefined,\n },\n /** Array of multiple choice options for this question. */\n options: {\n type: ParameterType.STRING,\n array: true,\n default: undefined,\n },\n /** Whether or not a response to this question must be given in order to continue. */\n required: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** If true, then the question will be centered and options will be displayed horizontally. */\n horizontal: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */\n name: {\n type: ParameterType.STRING,\n default: \"\",\n },\n },\n },\n /**\n * If true, the display order of `questions` is randomly determined at the start of the trial. In the data object,\n * `Q0` will still refer to the first question in the array, regardless of where it was presented visually.\n */\n randomize_question_order: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** HTML formatted string to display at the top of the page above all the questions. */\n preamble: {\n type: ParameterType.HTML_STRING,\n default: null,\n },\n /** Label of the button. */\n button_label: {\n type: ParameterType.STRING,\n default: \"Continue\",\n },\n /**\n * This determines whether or not all of the input elements on the page should allow autocomplete. Setting\n * this to true will enable autocomplete or auto-fill for the form.\n */\n autocomplete: {\n type: ParameterType.BOOL,\n default: false,\n },\n },\n data: {\n /** 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. */\n response: {\n type: ParameterType.OBJECT,\n },\n /** 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. */\n rt: {\n type: ParameterType.INT,\n },\n /** 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. */\n question_order: {\n type: ParameterType.INT,\n array: true,\n },\n },\n};\n\ntype Info = typeof info;\n\n/**\n * **survey-multi-choice**\n *\n * The survey-multi-choice plugin displays a set of questions with multiple choice response fields. The participant selects a single answer.\n *\n * @author Shane Martin\n * @see {@link https://www.jspsych.org/latest/plugins/survey-multi-choice/ survey-multi-choice plugin documentation on jspsych.org}\n */\nclass SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {\n static info = info;\n\n constructor(private jsPsych: JsPsych) {}\n\n trial(display_element: HTMLElement, trial: TrialType<Info>) {\n var plugin_id_name = \"jspsych-survey-multi-choice\";\n\n var html = \"\";\n\n // inject CSS for trial\n html += '<style id=\"jspsych-survey-multi-choice-css\">';\n html +=\n \".jspsych-survey-multi-choice-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }\" +\n \".jspsych-survey-multi-choice-text span.required {color: darkred;}\" +\n \".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-text { text-align: center;}\" +\n \".jspsych-survey-multi-choice-option { line-height: 2; }\" +\n \".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-option { display: inline-block; margin-left: 1em; margin-right: 1em; vertical-align: top;}\" +\n \"label.jspsych-survey-multi-choice-text input[type='radio'] {margin-right: 1em;}\";\n html += \"</style>\";\n\n // show preamble text\n if (trial.preamble !== null) {\n html +=\n '<div id=\"jspsych-survey-multi-choice-preamble\" class=\"jspsych-survey-multi-choice-preamble\">' +\n trial.preamble +\n \"</div>\";\n }\n\n // form element\n if (trial.autocomplete) {\n html += '<form id=\"jspsych-survey-multi-choice-form\">';\n } else {\n html += '<form id=\"jspsych-survey-multi-choice-form\" autocomplete=\"off\">';\n }\n // generate question order. this is randomized here as opposed to randomizing the order of trial.questions\n // so that the data are always associated with the same question regardless of order\n var question_order = [];\n for (var i = 0; i < trial.questions.length; i++) {\n question_order.push(i);\n }\n if (trial.randomize_question_order) {\n question_order = this.jsPsych.randomization.shuffle(question_order);\n }\n\n // add multiple-choice questions\n for (var i = 0; i < trial.questions.length; i++) {\n // get question based on question_order\n var question = trial.questions[question_order[i]];\n var question_id = question_order[i];\n\n // create question container\n var question_classes = [\"jspsych-survey-multi-choice-question\"];\n if (question.horizontal) {\n question_classes.push(\"jspsych-survey-multi-choice-horizontal\");\n }\n\n html +=\n '<div id=\"jspsych-survey-multi-choice-' +\n question_id +\n '\" class=\"' +\n question_classes.join(\" \") +\n '\" data-name=\"' +\n question.name +\n '\">';\n\n // add question text\n html += '<p class=\"jspsych-survey-multi-choice-text survey-multi-choice\">' + question.prompt;\n if (question.required) {\n html += \"<span class='required'>*</span>\";\n }\n html += \"</p>\";\n\n // create option radio buttons\n for (var j = 0; j < question.options.length; j++) {\n // add label and question text\n var option_id_name = \"jspsych-survey-multi-choice-option-\" + question_id + \"-\" + j;\n var input_name = \"jspsych-survey-multi-choice-response-\" + question_id;\n var input_id = \"jspsych-survey-multi-choice-response-\" + question_id + \"-\" + j;\n\n var required_attr = question.required ? \"required\" : \"\";\n\n // add radio button container\n html += '<div id=\"' + option_id_name + '\" class=\"jspsych-survey-multi-choice-option\">';\n html += '<label class=\"jspsych-survey-multi-choice-text\" for=\"' + input_id + '\">';\n html +=\n '<input type=\"radio\" name=\"' +\n input_name +\n '\" id=\"' +\n input_id +\n '\" value=\"' +\n question.options[j] +\n '\" ' +\n required_attr +\n \"></input>\";\n html += question.options[j] + \"</label>\";\n html += \"</div>\";\n }\n\n html += \"</div>\";\n }\n\n // add submit button\n html +=\n '<input type=\"submit\" id=\"' +\n plugin_id_name +\n '-next\" class=\"' +\n plugin_id_name +\n ' jspsych-btn\"' +\n (trial.button_label ? ' value=\"' + trial.button_label + '\"' : \"\") +\n \"></input>\";\n html += \"</form>\";\n\n // render\n display_element.innerHTML = html;\n\n document.querySelector(\"form\").addEventListener(\"submit\", (event) => {\n event.preventDefault();\n // measure response time\n var endTime = performance.now();\n var response_time = Math.round(endTime - startTime);\n\n // create object to hold responses\n var question_data = {};\n for (var i = 0; i < trial.questions.length; i++) {\n var match = display_element.querySelector(\"#jspsych-survey-multi-choice-\" + i);\n var id = \"Q\" + i;\n var val: String;\n if (match.querySelector(\"input[type=radio]:checked\") !== null) {\n val = match.querySelector<HTMLInputElement>(\"input[type=radio]:checked\").value;\n } else {\n val = \"\";\n }\n var obje = {};\n var name = id;\n if (match.attributes[\"data-name\"].value !== \"\") {\n name = match.attributes[\"data-name\"].value;\n }\n obje[name] = val;\n Object.assign(question_data, obje);\n }\n // save data\n var trial_data = {\n rt: response_time,\n response: question_data,\n question_order: question_order,\n };\n\n // next trial\n this.jsPsych.finishTrial(trial_data);\n });\n\n var startTime = performance.now();\n }\n\n simulate(\n trial: TrialType<Info>,\n simulation_mode,\n simulation_options: any,\n load_callback: () => void\n ) {\n if (simulation_mode == \"data-only\") {\n load_callback();\n this.simulate_data_only(trial, simulation_options);\n }\n if (simulation_mode == \"visual\") {\n this.simulate_visual(trial, simulation_options, load_callback);\n }\n }\n\n private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n const question_data = {};\n let rt = 1000;\n\n for (const q of trial.questions) {\n const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;\n question_data[name] = this.jsPsych.randomization.sampleWithoutReplacement(q.options, 1)[0];\n rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);\n }\n\n const default_data = {\n response: question_data,\n rt: rt,\n question_order: trial.randomize_question_order\n ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])\n : [...Array(trial.questions.length).keys()],\n };\n\n const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n return data;\n }\n\n private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n this.jsPsych.finishTrial(data);\n }\n\n private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n const display_element = this.jsPsych.getDisplayElement();\n\n this.trial(display_element, trial);\n load_callback();\n\n const answers = Object.entries(data.response);\n for (let i = 0; i < answers.length; i++) {\n this.jsPsych.pluginAPI.clickTarget(\n display_element.querySelector(\n `#jspsych-survey-multi-choice-response-${i}-${trial.questions[i].options.indexOf(\n answers[i][1]\n )}`\n ),\n ((data.rt - 1000) / answers.length) * (i + 1)\n );\n }\n\n this.jsPsych.pluginAPI.clickTarget(\n display_element.querySelector(\"#jspsych-survey-multi-choice-next\"),\n data.rt\n );\n }\n}\n\nexport default SurveyMultiChoicePlugin;\n"],"names":["ParameterType","i"],"mappings":";;;EAEE,IAAW,OAAA,GAAA,OAAA;;ECEb,MAAM,IAAc,GAAA;EAAA,EAClB,IAAM,EAAA,qBAAA;EAAA,EACN,OAAA;EAAA,EACA,UAAY,EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA,IAaV,SAAW,EAAA;EAAA,MACT,MAAMA,qBAAc,CAAA,OAAA;EAAA,MACpB,KAAO,EAAA,IAAA;EAAA,MACP,MAAQ,EAAA;EAAA;EAAA,QAEN,MAAQ,EAAA;EAAA,UACN,MAAMA,qBAAc,CAAA,WAAA;EAAA,UACpB,OAAS,EAAA,KAAA,CAAA;EAAA,SACX;EAAA;EAAA,QAEA,OAAS,EAAA;EAAA,UACP,MAAMA,qBAAc,CAAA,MAAA;EAAA,UACpB,KAAO,EAAA,IAAA;EAAA,UACP,OAAS,EAAA,KAAA,CAAA;EAAA,SACX;EAAA;EAAA,QAEA,QAAU,EAAA;EAAA,UACR,MAAMA,qBAAc,CAAA,IAAA;EAAA,UACpB,OAAS,EAAA,KAAA;EAAA,SACX;EAAA;EAAA,QAEA,UAAY,EAAA;EAAA,UACV,MAAMA,qBAAc,CAAA,IAAA;EAAA,UACpB,OAAS,EAAA,KAAA;EAAA,SACX;EAAA;EAAA,QAEA,IAAM,EAAA;EAAA,UACJ,MAAMA,qBAAc,CAAA,MAAA;EAAA,UACpB,OAAS,EAAA,EAAA;EAAA,SACX;EAAA,OACF;EAAA,KACF;EAAA;EAAA;EAAA;EAAA;EAAA,IAKA,wBAA0B,EAAA;EAAA,MACxB,MAAMA,qBAAc,CAAA,IAAA;EAAA,MACpB,OAAS,EAAA,KAAA;EAAA,KACX;EAAA;EAAA,IAEA,QAAU,EAAA;EAAA,MACR,MAAMA,qBAAc,CAAA,WAAA;EAAA,MACpB,OAAS,EAAA,IAAA;EAAA,KACX;EAAA;EAAA,IAEA,YAAc,EAAA;EAAA,MACZ,MAAMA,qBAAc,CAAA,MAAA;EAAA,MACpB,OAAS,EAAA,UAAA;EAAA,KACX;EAAA;EAAA;EAAA;EAAA;EAAA,IAKA,YAAc,EAAA;EAAA,MACZ,MAAMA,qBAAc,CAAA,IAAA;EAAA,MACpB,OAAS,EAAA,KAAA;EAAA,KACX;EAAA,GACF;EAAA,EACA,IAAM,EAAA;EAAA;EAAA,IAEJ,QAAU,EAAA;EAAA,MACR,MAAMA,qBAAc,CAAA,MAAA;EAAA,KACtB;EAAA;EAAA,IAEA,EAAI,EAAA;EAAA,MACF,MAAMA,qBAAc,CAAA,GAAA;EAAA,KACtB;EAAA;EAAA,IAEA,cAAgB,EAAA;EAAA,MACd,MAAMA,qBAAc,CAAA,GAAA;EAAA,MACpB,KAAO,EAAA,IAAA;EAAA,KACT;EAAA,GACF;EACF,CAAA,CAAA;EAYA,MAAM,uBAAuD,CAAA;EAAA,EAG3D,YAAoB,OAAkB,EAAA;EAAlB,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA,CAAA;EAAA,GAAmB;EAAA,EAFvC;EAAA,IAAA,IAAA,CAAO,IAAO,GAAA,IAAA,CAAA;EAAA,GAAA;EAAA,EAId,KAAA,CAAM,iBAA8B,KAAwB,EAAA;EAC1D,IAAA,IAAI,cAAiB,GAAA,6BAAA,CAAA;EAErB,IAAA,IAAI,IAAO,GAAA,EAAA,CAAA;EAGX,IAAQ,IAAA,IAAA,8CAAA,CAAA;EACR,IACE,IAAA,IAAA,6iBAAA,CAAA;EAMF,IAAQ,IAAA,IAAA,UAAA,CAAA;EAGR,IAAI,IAAA,KAAA,CAAM,aAAa,IAAM,EAAA;EAC3B,MACE,IAAA,IAAA,8FAAA,GACA,MAAM,QACN,GAAA,QAAA,CAAA;EAAA,KACJ;EAGA,IAAA,IAAI,MAAM,YAAc,EAAA;EACtB,MAAQ,IAAA,IAAA,8CAAA,CAAA;EAAA,KACH,MAAA;EACL,MAAQ,IAAA,IAAA,iEAAA,CAAA;EAAA,KACV;EAGA,IAAA,IAAI,iBAAiB,EAAC,CAAA;EACtB,IAAA,KAAA,IAAS,IAAI,CAAG,EAAA,CAAA,GAAI,KAAM,CAAA,SAAA,CAAU,QAAQ,CAAK,EAAA,EAAA;EAC/C,MAAA,cAAA,CAAe,KAAK,CAAC,CAAA,CAAA;EAAA,KACvB;EACA,IAAA,IAAI,MAAM,wBAA0B,EAAA;EAClC,MAAA,cAAA,GAAiB,IAAK,CAAA,OAAA,CAAQ,aAAc,CAAA,OAAA,CAAQ,cAAc,CAAA,CAAA;EAAA,KACpE;EAGA,IAAA,KAAA,IAAS,IAAI,CAAG,EAAA,CAAA,GAAI,KAAM,CAAA,SAAA,CAAU,QAAQ,CAAK,EAAA,EAAA;EAE/C,MAAA,IAAI,QAAW,GAAA,KAAA,CAAM,SAAU,CAAA,cAAA,CAAe,CAAC,CAAC,CAAA,CAAA;EAChD,MAAI,IAAA,WAAA,GAAc,eAAe,CAAC,CAAA,CAAA;EAGlC,MAAI,IAAA,gBAAA,GAAmB,CAAC,sCAAsC,CAAA,CAAA;EAC9D,MAAA,IAAI,SAAS,UAAY,EAAA;EACvB,QAAA,gBAAA,CAAiB,KAAK,wCAAwC,CAAA,CAAA;EAAA,OAChE;EAEA,MACE,IAAA,IAAA,uCAAA,GACA,cACA,WACA,GAAA,gBAAA,CAAiB,KAAK,GAAG,CAAA,GACzB,gBACA,GAAA,QAAA,CAAS,IACT,GAAA,IAAA,CAAA;EAGF,MAAA,IAAA,IAAQ,qEAAqE,QAAS,CAAA,MAAA,CAAA;EACtF,MAAA,IAAI,SAAS,QAAU,EAAA;EACrB,QAAQ,IAAA,IAAA,iCAAA,CAAA;EAAA,OACV;EACA,MAAQ,IAAA,IAAA,MAAA,CAAA;EAGR,MAAA,KAAA,IAAS,IAAI,CAAG,EAAA,CAAA,GAAI,QAAS,CAAA,OAAA,CAAQ,QAAQ,CAAK,EAAA,EAAA;EAEhD,QAAI,IAAA,cAAA,GAAiB,qCAAwC,GAAA,WAAA,GAAc,GAAM,GAAA,CAAA,CAAA;EACjF,QAAA,IAAI,aAAa,uCAA0C,GAAA,WAAA,CAAA;EAC3D,QAAI,IAAA,QAAA,GAAW,uCAA0C,GAAA,WAAA,GAAc,GAAM,GAAA,CAAA,CAAA;EAE7E,QAAI,IAAA,aAAA,GAAgB,QAAS,CAAA,QAAA,GAAW,UAAa,GAAA,EAAA,CAAA;EAGrD,QAAA,IAAA,IAAQ,cAAc,cAAiB,GAAA,+CAAA,CAAA;EACvC,QAAA,IAAA,IAAQ,0DAA0D,QAAW,GAAA,IAAA,CAAA;EAC7E,QACE,IAAA,IAAA,4BAAA,GACA,UACA,GAAA,QAAA,GACA,QACA,GAAA,WAAA,GACA,SAAS,OAAQ,CAAA,CAAC,CAClB,GAAA,IAAA,GACA,aACA,GAAA,WAAA,CAAA;EACF,QAAQ,IAAA,IAAA,QAAA,CAAS,OAAQ,CAAA,CAAC,CAAI,GAAA,UAAA,CAAA;EAC9B,QAAQ,IAAA,IAAA,QAAA,CAAA;EAAA,OACV;EAEA,MAAQ,IAAA,IAAA,QAAA,CAAA;EAAA,KACV;EAGA,IACE,IAAA,IAAA,2BAAA,GACA,cACA,GAAA,gBAAA,GACA,cACA,GAAA,eAAA,IACC,KAAM,CAAA,YAAA,GAAe,UAAa,GAAA,KAAA,CAAM,YAAe,GAAA,GAAA,GAAM,EAC9D,CAAA,GAAA,WAAA,CAAA;EACF,IAAQ,IAAA,IAAA,SAAA,CAAA;EAGR,IAAA,eAAA,CAAgB,SAAY,GAAA,IAAA,CAAA;EAE5B,IAAA,QAAA,CAAS,cAAc,MAAM,CAAA,CAAE,gBAAiB,CAAA,QAAA,EAAU,CAAC,KAAU,KAAA;EACnE,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;EAErB,MAAI,IAAA,OAAA,GAAU,YAAY,GAAI,EAAA,CAAA;EAC9B,MAAA,IAAI,aAAgB,GAAA,IAAA,CAAK,KAAM,CAAA,OAAA,GAAU,SAAS,CAAA,CAAA;EAGlD,MAAA,IAAI,gBAAgB,EAAC,CAAA;EACrB,MAAA,KAAA,IAASC,KAAI,CAAGA,EAAAA,EAAAA,GAAI,KAAM,CAAA,SAAA,CAAU,QAAQA,EAAK,EAAA,EAAA;EAC/C,QAAA,IAAI,KAAQ,GAAA,eAAA,CAAgB,aAAc,CAAA,+BAAA,GAAkCA,EAAC,CAAA,CAAA;EAC7E,QAAA,IAAI,KAAK,GAAMA,GAAAA,EAAAA,CAAAA;EACf,QAAI,IAAA,GAAA,CAAA;EACJ,QAAA,IAAI,KAAM,CAAA,aAAA,CAAc,2BAA2B,CAAA,KAAM,IAAM,EAAA;EAC7D,UAAM,GAAA,GAAA,KAAA,CAAM,aAAgC,CAAA,2BAA2B,CAAE,CAAA,KAAA,CAAA;EAAA,SACpE,MAAA;EACL,UAAM,GAAA,GAAA,EAAA,CAAA;EAAA,SACR;EACA,QAAA,IAAI,OAAO,EAAC,CAAA;EACZ,QAAA,IAAI,IAAO,GAAA,EAAA,CAAA;EACX,QAAA,IAAI,KAAM,CAAA,UAAA,CAAW,WAAW,CAAA,CAAE,UAAU,EAAI,EAAA;EAC9C,UAAO,IAAA,GAAA,KAAA,CAAM,UAAW,CAAA,WAAW,CAAE,CAAA,KAAA,CAAA;EAAA,SACvC;EACA,QAAA,IAAA,CAAK,IAAI,CAAI,GAAA,GAAA,CAAA;EACb,QAAO,MAAA,CAAA,MAAA,CAAO,eAAe,IAAI,CAAA,CAAA;EAAA,OACnC;EAEA,MAAA,IAAI,UAAa,GAAA;EAAA,QACf,EAAI,EAAA,aAAA;EAAA,QACJ,QAAU,EAAA,aAAA;EAAA,QACV,cAAA;EAAA,OACF,CAAA;EAGA,MAAK,IAAA,CAAA,OAAA,CAAQ,YAAY,UAAU,CAAA,CAAA;EAAA,KACpC,CAAA,CAAA;EAED,IAAI,IAAA,SAAA,GAAY,YAAY,GAAI,EAAA,CAAA;EAAA,GAClC;EAAA,EAEA,QACE,CAAA,KAAA,EACA,eACA,EAAA,kBAAA,EACA,aACA,EAAA;EACA,IAAA,IAAI,mBAAmB,WAAa,EAAA;EAClC,MAAc,aAAA,EAAA,CAAA;EACd,MAAK,IAAA,CAAA,kBAAA,CAAmB,OAAO,kBAAkB,CAAA,CAAA;EAAA,KACnD;EACA,IAAA,IAAI,mBAAmB,QAAU,EAAA;EAC/B,MAAK,IAAA,CAAA,eAAA,CAAgB,KAAO,EAAA,kBAAA,EAAoB,aAAa,CAAA,CAAA;EAAA,KAC/D;EAAA,GACF;EAAA,EAEQ,sBAAA,CAAuB,OAAwB,kBAAoB,EAAA;EACzE,IAAA,MAAM,gBAAgB,EAAC,CAAA;EACvB,IAAA,IAAI,EAAK,GAAA,GAAA,CAAA;EAET,IAAW,KAAA,MAAA,CAAA,IAAK,MAAM,SAAW,EAAA;EAC/B,MAAM,MAAA,IAAA,GAAO,CAAE,CAAA,IAAA,GAAO,CAAE,CAAA,IAAA,GAAO,IAAI,KAAM,CAAA,SAAA,CAAU,OAAQ,CAAA,CAAC,CAAC,CAAA,CAAA,CAAA;EAC7D,MAAc,aAAA,CAAA,IAAI,CAAI,GAAA,IAAA,CAAK,OAAQ,CAAA,aAAA,CAAc,yBAAyB,CAAE,CAAA,OAAA,EAAS,CAAC,CAAA,CAAE,CAAC,CAAA,CAAA;EACzF,MAAM,EAAA,IAAA,IAAA,CAAK,QAAQ,aAAc,CAAA,gBAAA,CAAiB,MAAM,GAAK,EAAA,CAAA,GAAI,KAAK,IAAI,CAAA,CAAA;EAAA,KAC5E;EAEA,IAAA,MAAM,YAAe,GAAA;EAAA,MACnB,QAAU,EAAA,aAAA;EAAA,MACV,EAAA;EAAA,MACA,cAAA,EAAgB,KAAM,CAAA,wBAAA,GAClB,IAAK,CAAA,OAAA,CAAQ,aAAc,CAAA,OAAA,CAAQ,CAAC,GAAG,KAAM,CAAA,KAAA,CAAM,SAAU,CAAA,MAAM,EAAE,IAAK,EAAC,CAAC,CAAA,GAC5E,CAAC,GAAG,KAAM,CAAA,KAAA,CAAM,SAAU,CAAA,MAAM,CAAE,CAAA,IAAA,EAAM,CAAA;EAAA,KAC9C,CAAA;EAEA,IAAA,MAAM,OAAO,IAAK,CAAA,OAAA,CAAQ,SAAU,CAAA,mBAAA,CAAoB,cAAc,kBAAkB,CAAA,CAAA;EAExF,IAAA,IAAA,CAAK,OAAQ,CAAA,SAAA,CAAU,+BAAgC,CAAA,KAAA,EAAO,IAAI,CAAA,CAAA;EAElE,IAAO,OAAA,IAAA,CAAA;EAAA,GACT;EAAA,EAEQ,kBAAA,CAAmB,OAAwB,kBAAoB,EAAA;EACrE,IAAA,MAAM,IAAO,GAAA,IAAA,CAAK,sBAAuB,CAAA,KAAA,EAAO,kBAAkB,CAAA,CAAA;EAElE,IAAK,IAAA,CAAA,OAAA,CAAQ,YAAY,IAAI,CAAA,CAAA;EAAA,GAC/B;EAAA,EAEQ,eAAA,CAAgB,KAAwB,EAAA,kBAAA,EAAoB,aAA2B,EAAA;EAC7F,IAAA,MAAM,IAAO,GAAA,IAAA,CAAK,sBAAuB,CAAA,KAAA,EAAO,kBAAkB,CAAA,CAAA;EAElE,IAAM,MAAA,eAAA,GAAkB,IAAK,CAAA,OAAA,CAAQ,iBAAkB,EAAA,CAAA;EAEvD,IAAK,IAAA,CAAA,KAAA,CAAM,iBAAiB,KAAK,CAAA,CAAA;EACjC,IAAc,aAAA,EAAA,CAAA;EAEd,IAAA,MAAM,OAAU,GAAA,MAAA,CAAO,OAAQ,CAAA,IAAA,CAAK,QAAQ,CAAA,CAAA;EAC5C,IAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,OAAA,CAAQ,QAAQ,CAAK,EAAA,EAAA;EACvC,MAAA,IAAA,CAAK,QAAQ,SAAU,CAAA,WAAA;EAAA,QACrB,eAAgB,CAAA,aAAA;EAAA,UACd,yCAAyC,CAAC,CAAA,CAAA,EAAI,MAAM,SAAU,CAAA,CAAC,EAAE,OAAQ,CAAA,OAAA;AAAA,YACvE,OAAA,CAAQ,CAAC,CAAA,CAAE,CAAC,CAAA;AAAA,WACb,CAAA,CAAA;EAAA,SACH;EAAA,QAAA,CACE,IAAK,CAAA,EAAA,GAAK,GAAQ,IAAA,OAAA,CAAQ,UAAW,CAAI,GAAA,CAAA,CAAA;EAAA,OAC7C,CAAA;EAAA,KACF;EAEA,IAAA,IAAA,CAAK,QAAQ,SAAU,CAAA,WAAA;EAAA,MACrB,eAAA,CAAgB,cAAc,mCAAmC,CAAA;EAAA,MACjE,IAAK,CAAA,EAAA;EAAA,KACP,CAAA;EAAA,GACF;EACF;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"index.browser.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n \"name\": \"@jspsych/plugin-survey-multi-choice\",\n \"version\": \"2.0.2\",\n \"description\": \"a jspsych plugin for multiple choice survey questions\",\n \"type\": \"module\",\n \"main\": \"dist/index.cjs\",\n \"exports\": {\n \"import\": \"./dist/index.js\",\n \"require\": \"./dist/index.cjs\"\n },\n \"typings\": \"dist/index.d.ts\",\n \"unpkg\": \"dist/index.browser.min.js\",\n \"files\": [\n \"src\",\n \"dist\"\n ],\n \"source\": \"src/index.ts\",\n \"scripts\": {\n \"test\": \"jest\",\n \"test:watch\": \"npm test -- --watch\",\n \"tsc\": \"tsc\",\n \"build\": \"rollup --config\",\n \"build:watch\": \"npm run build -- --watch\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n \"directory\": \"packages/plugin-survey-multi-choice\"\n },\n \"author\": \"Shane Martin\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n },\n \"homepage\": \"https://www.jspsych.org/latest/plugins/survey-multi-choice\",\n \"peerDependencies\": {\n \"jspsych\": \">=7.1.0\"\n },\n \"devDependencies\": {\n \"@jspsych/config\": \"^3.1.1\",\n \"@jspsych/test-utils\": \"^1.2.0\"\n }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n name: \"survey-multi-choice\",\n version: version,\n parameters: {\n /**\n * An array of objects, each object represents a question that appears on the screen. Each object contains a prompt,\n * options, required, and horizontal parameter that will be applied to the question. See examples below for further\n * clarification.`prompt`: Type string, default value is *undefined*. The string is prompt/question that will be\n * associated with a group of options (radio buttons). All questions will get presented on the same page (trial).\n * `options`: Type array, defualt value is *undefined*. An array of strings. The array contains a set of options to\n * display for an individual question.`required`: Type boolean, default value is null. The boolean value indicates\n * if a question is required('true') or not ('false'), using the HTML5 `required` attribute. If this parameter is\n * undefined, the question will be optional. `horizontal`:Type boolean, default value is false. If true, then the\n * question is centered and the options are displayed horizontally. `name`: Name of the question. Used for storing\n * data. If left undefined then default names (`Q0`, `Q1`, `...`) will be used for the questions.\n */\n questions: {\n type: ParameterType.COMPLEX,\n array: true,\n nested: {\n /** Question prompt. */\n prompt: {\n type: ParameterType.HTML_STRING,\n default: undefined,\n },\n /** Array of multiple choice options for this question. */\n options: {\n type: ParameterType.STRING,\n array: true,\n default: undefined,\n },\n /** Whether or not a response to this question must be given in order to continue. */\n required: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** If true, then the question will be centered and options will be displayed horizontally. */\n horizontal: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */\n name: {\n type: ParameterType.STRING,\n default: \"\",\n },\n },\n },\n /**\n * If true, the display order of `questions` is randomly determined at the start of the trial. In the data object,\n * `Q0` will still refer to the first question in the array, regardless of where it was presented visually.\n */\n randomize_question_order: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** HTML formatted string to display at the top of the page above all the questions. */\n preamble: {\n type: ParameterType.HTML_STRING,\n default: null,\n },\n /** Label of the button. */\n button_label: {\n type: ParameterType.STRING,\n default: \"Continue\",\n },\n /**\n * This determines whether or not all of the input elements on the page should allow autocomplete. Setting\n * this to true will enable autocomplete or auto-fill for the form.\n */\n autocomplete: {\n type: ParameterType.BOOL,\n default: false,\n },\n },\n data: {\n /** 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. */\n response: {\n type: ParameterType.OBJECT,\n },\n /** 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. */\n rt: {\n type: ParameterType.INT,\n },\n /** 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. */\n question_order: {\n type: ParameterType.INT,\n array: true,\n },\n },\n};\n\ntype Info = typeof info;\n\nconst plugin_id_name = \"jspsych-survey-multi-choice\";\n\n/**\n * **survey-multi-choice**\n *\n * The survey-multi-choice plugin displays a set of questions with multiple choice response fields. The participant selects a single answer.\n *\n * @author Shane Martin\n * @see {@link https://www.jspsych.org/latest/plugins/survey-multi-choice/ survey-multi-choice plugin documentation on jspsych.org}\n */\nclass SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {\n static info = info;\n\n constructor(private jsPsych: JsPsych) { }\n\n trial(display_element: HTMLElement, trial: TrialType<Info>) {\n\n const trial_form_id = `${plugin_id_name}_form`;\n\n var html = \"\";\n\n // inject CSS for trial\n html += `\n <style id=\"${plugin_id_name}-css\">\n .${plugin_id_name}-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }\n .${plugin_id_name}-text span.required {color: darkred;}\n .${plugin_id_name}-horizontal .${plugin_id_name}-text { text-align: center;}\n .${plugin_id_name}-option { line-height: 2; }\n .${plugin_id_name}-horizontal .${plugin_id_name}-option { display: inline-block; margin-left: 1em; margin-right: 1em; vertical-align: top;}\n label.${plugin_id_name}-text input[type='radio'] {margin-right: 1em;}\n </style>`;\n\n // show preamble text\n if (trial.preamble !== null) {\n html += `<div id=\"${plugin_id_name}-preamble\" class=\"${plugin_id_name}-preamble\">${trial.preamble}</div>`;\n }\n\n // form element\n if (trial.autocomplete) {\n html += `<form id=\"${trial_form_id}\">`;\n } else {\n html += `<form id=\"${trial_form_id}\" autocomplete=\"off\">`;\n }\n\n // generate question order. this is randomized here as opposed to randomizing the order of trial.questions\n // so that the data are always associated with the same question regardless of order\n var question_order = [];\n for (var i = 0; i < trial.questions.length; i++) {\n question_order.push(i);\n }\n if (trial.randomize_question_order) {\n question_order = this.jsPsych.randomization.shuffle(question_order);\n }\n\n // add multiple-choice questions\n for (var i = 0; i < trial.questions.length; i++) {\n // get question based on question_order\n var question = trial.questions[question_order[i]];\n var question_id = question_order[i];\n\n // create question container\n var question_classes = [`${plugin_id_name}-question`];\n if (question.horizontal) {\n question_classes.push(`${plugin_id_name}-horizontal`);\n }\n\n html += `<div id=\"${plugin_id_name}-${question_id}\" class=\"${question_classes.join(\" \")}\" data-name=\"${question.name}\">`;\n\n // add question text\n html += `<p class=\"${plugin_id_name}-text survey-multi-choice\">${question.prompt}`;\n if (question.required) {\n html += \"<span class='required'>*</span>\";\n }\n html += \"</p>\";\n\n // create option radio buttons\n for (var j = 0; j < question.options.length; j++) {\n // add label and question text\n var option_id_name = `${plugin_id_name}-option-${question_id}-${j}`;\n var input_name = `${plugin_id_name}-response-${question_id}`;\n var input_id = `${plugin_id_name}-response-${question_id}-${j}`;\n\n var required_attr = question.required ? \"required\" : \"\";\n\n // add radio button container\n html += `\n <div id=\"${option_id_name}\" class=\"${plugin_id_name}-option\">\n <label class=\"${plugin_id_name}-text\" for=\"${input_id}\">\n <input type=\"radio\" name=\"${input_name}\" id=\"${input_id}\" value=\"${question.options[j]}\" ${required_attr} />\n ${question.options[j]}\n </label>\n </div>`;\n }\n\n html += \"</div>\";\n }\n\n // add submit button\n html += `<input type=\"submit\" id=\"${plugin_id_name}-next\" class=\"${plugin_id_name} jspsych-btn\"${trial.button_label ? ' value=\"' + trial.button_label + '\"' : \"\"} />`;\n html += \"</form>\";\n\n // render\n display_element.innerHTML = html;\n\n const trial_form = display_element.querySelector<HTMLFormElement>(`#${trial_form_id}`);\n\n trial_form.addEventListener(\"submit\", (event) => {\n event.preventDefault();\n // measure response time\n var endTime = performance.now();\n var response_time = Math.round(endTime - startTime);\n\n // create object to hold responses\n var question_data = {};\n for (var i = 0; i < trial.questions.length; i++) {\n var match = display_element.querySelector(`#${plugin_id_name}-${i}`);\n var id = \"Q\" + i;\n var val: String;\n if (match.querySelector(\"input[type=radio]:checked\") !== null) {\n val = match.querySelector<HTMLInputElement>(\"input[type=radio]:checked\").value;\n } else {\n val = \"\";\n }\n var obje = {};\n var name = id;\n if (match.attributes[\"data-name\"].value !== \"\") {\n name = match.attributes[\"data-name\"].value;\n }\n obje[name] = val;\n Object.assign(question_data, obje);\n }\n // save data\n var trial_data = {\n rt: response_time,\n response: question_data,\n question_order: question_order,\n };\n\n // next trial\n this.jsPsych.finishTrial(trial_data);\n });\n\n var startTime = performance.now();\n }\n\n simulate(\n trial: TrialType<Info>,\n simulation_mode,\n simulation_options: any,\n load_callback: () => void\n ) {\n if (simulation_mode == \"data-only\") {\n load_callback();\n this.simulate_data_only(trial, simulation_options);\n }\n if (simulation_mode == \"visual\") {\n this.simulate_visual(trial, simulation_options, load_callback);\n }\n }\n\n private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n const question_data = {};\n let rt = 1000;\n\n for (const q of trial.questions) {\n const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;\n question_data[name] = this.jsPsych.randomization.sampleWithoutReplacement(q.options, 1)[0];\n rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);\n }\n\n const default_data = {\n response: question_data,\n rt: rt,\n question_order: trial.randomize_question_order\n ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])\n : [...Array(trial.questions.length).keys()],\n };\n\n const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n return data;\n }\n\n private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n this.jsPsych.finishTrial(data);\n }\n\n private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n const display_element = this.jsPsych.getDisplayElement();\n\n this.trial(display_element, trial);\n load_callback();\n\n const answers = Object.entries(data.response);\n for (let i = 0; i < answers.length; i++) {\n this.jsPsych.pluginAPI.clickTarget(\n display_element.querySelector(\n `#${plugin_id_name}-response-${i}-${trial.questions[i].options.indexOf(\n answers[i][1]\n )}`\n ),\n ((data.rt - 1000) / answers.length) * (i + 1)\n );\n }\n\n this.jsPsych.pluginAPI.clickTarget(\n display_element.querySelector(`#${plugin_id_name}-next`),\n data.rt\n );\n }\n}\n\nexport default SurveyMultiChoicePlugin;\n"],"names":["ParameterType","i"],"mappings":";;;EAEE,IAAW,OAAA,GAAA,OAAA;;ECEb,MAAM,IAAc,GAAA;EAAA,EAClB,IAAM,EAAA,qBAAA;EAAA,EACN,OAAA;EAAA,EACA,UAAY,EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA,IAaV,SAAW,EAAA;EAAA,MACT,MAAMA,qBAAc,CAAA,OAAA;EAAA,MACpB,KAAO,EAAA,IAAA;EAAA,MACP,MAAQ,EAAA;EAAA;EAAA,QAEN,MAAQ,EAAA;EAAA,UACN,MAAMA,qBAAc,CAAA,WAAA;EAAA,UACpB,OAAS,EAAA,KAAA,CAAA;EAAA,SACX;EAAA;EAAA,QAEA,OAAS,EAAA;EAAA,UACP,MAAMA,qBAAc,CAAA,MAAA;EAAA,UACpB,KAAO,EAAA,IAAA;EAAA,UACP,OAAS,EAAA,KAAA,CAAA;EAAA,SACX;EAAA;EAAA,QAEA,QAAU,EAAA;EAAA,UACR,MAAMA,qBAAc,CAAA,IAAA;EAAA,UACpB,OAAS,EAAA,KAAA;EAAA,SACX;EAAA;EAAA,QAEA,UAAY,EAAA;EAAA,UACV,MAAMA,qBAAc,CAAA,IAAA;EAAA,UACpB,OAAS,EAAA,KAAA;EAAA,SACX;EAAA;EAAA,QAEA,IAAM,EAAA;EAAA,UACJ,MAAMA,qBAAc,CAAA,MAAA;EAAA,UACpB,OAAS,EAAA,EAAA;EAAA,SACX;EAAA,OACF;EAAA,KACF;EAAA;EAAA;EAAA;EAAA;EAAA,IAKA,wBAA0B,EAAA;EAAA,MACxB,MAAMA,qBAAc,CAAA,IAAA;EAAA,MACpB,OAAS,EAAA,KAAA;EAAA,KACX;EAAA;EAAA,IAEA,QAAU,EAAA;EAAA,MACR,MAAMA,qBAAc,CAAA,WAAA;EAAA,MACpB,OAAS,EAAA,IAAA;EAAA,KACX;EAAA;EAAA,IAEA,YAAc,EAAA;EAAA,MACZ,MAAMA,qBAAc,CAAA,MAAA;EAAA,MACpB,OAAS,EAAA,UAAA;EAAA,KACX;EAAA;EAAA;EAAA;EAAA;EAAA,IAKA,YAAc,EAAA;EAAA,MACZ,MAAMA,qBAAc,CAAA,IAAA;EAAA,MACpB,OAAS,EAAA,KAAA;EAAA,KACX;EAAA,GACF;EAAA,EACA,IAAM,EAAA;EAAA;EAAA,IAEJ,QAAU,EAAA;EAAA,MACR,MAAMA,qBAAc,CAAA,MAAA;EAAA,KACtB;EAAA;EAAA,IAEA,EAAI,EAAA;EAAA,MACF,MAAMA,qBAAc,CAAA,GAAA;EAAA,KACtB;EAAA;EAAA,IAEA,cAAgB,EAAA;EAAA,MACd,MAAMA,qBAAc,CAAA,GAAA;EAAA,MACpB,KAAO,EAAA,IAAA;EAAA,KACT;EAAA,GACF;EACF,CAAA,CAAA;EAIA,MAAM,cAAiB,GAAA,6BAAA,CAAA;EAUvB,MAAM,uBAAuD,CAAA;EAAA,EAG3D,YAAoB,OAAkB,EAAA;EAAlB,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA,CAAA;EAAA,GAAoB;EAAA,EAFxC;EAAA,IAAA,IAAA,CAAO,IAAO,GAAA,IAAA,CAAA;EAAA,GAAA;EAAA,EAId,KAAA,CAAM,iBAA8B,KAAwB,EAAA;EAE1D,IAAM,MAAA,aAAA,GAAgB,GAAG,cAAc,CAAA,KAAA,CAAA,CAAA;EAEvC,IAAA,IAAI,IAAO,GAAA,EAAA,CAAA;EAGX,IAAQ,IAAA,IAAA,CAAA;AAAA,eAAA,EACK,cAAc,CAAA;AAAA,OAAA,EACtB,cAAc,CAAA;AAAA,OAAA,EACd,cAAc,CAAA;AAAA,OACd,EAAA,cAAc,gBAAgB,cAAc,CAAA;AAAA,OAAA,EAC5C,cAAc,CAAA;AAAA,OACd,EAAA,cAAc,gBAAgB,cAAc,CAAA;AAAA,YAAA,EACvC,cAAc,CAAA;AAAA,cAAA,CAAA,CAAA;EAIxB,IAAI,IAAA,KAAA,CAAM,aAAa,IAAM,EAAA;EAC3B,MAAA,IAAA,IAAQ,YAAY,cAAc,CAAA,kBAAA,EAAqB,cAAc,CAAA,WAAA,EAAc,MAAM,QAAQ,CAAA,MAAA,CAAA,CAAA;EAAA,KACnG;EAGA,IAAA,IAAI,MAAM,YAAc,EAAA;EACtB,MAAA,IAAA,IAAQ,aAAa,aAAa,CAAA,EAAA,CAAA,CAAA;EAAA,KAC7B,MAAA;EACL,MAAA,IAAA,IAAQ,aAAa,aAAa,CAAA,qBAAA,CAAA,CAAA;EAAA,KACpC;EAIA,IAAA,IAAI,iBAAiB,EAAC,CAAA;EACtB,IAAA,KAAA,IAAS,IAAI,CAAG,EAAA,CAAA,GAAI,KAAM,CAAA,SAAA,CAAU,QAAQ,CAAK,EAAA,EAAA;EAC/C,MAAA,cAAA,CAAe,KAAK,CAAC,CAAA,CAAA;EAAA,KACvB;EACA,IAAA,IAAI,MAAM,wBAA0B,EAAA;EAClC,MAAA,cAAA,GAAiB,IAAK,CAAA,OAAA,CAAQ,aAAc,CAAA,OAAA,CAAQ,cAAc,CAAA,CAAA;EAAA,KACpE;EAGA,IAAA,KAAA,IAAS,IAAI,CAAG,EAAA,CAAA,GAAI,KAAM,CAAA,SAAA,CAAU,QAAQ,CAAK,EAAA,EAAA;EAE/C,MAAA,IAAI,QAAW,GAAA,KAAA,CAAM,SAAU,CAAA,cAAA,CAAe,CAAC,CAAC,CAAA,CAAA;EAChD,MAAI,IAAA,WAAA,GAAc,eAAe,CAAC,CAAA,CAAA;EAGlC,MAAA,IAAI,gBAAmB,GAAA,CAAC,CAAG,EAAA,cAAc,CAAW,SAAA,CAAA,CAAA,CAAA;EACpD,MAAA,IAAI,SAAS,UAAY,EAAA;EACvB,QAAiB,gBAAA,CAAA,IAAA,CAAK,CAAG,EAAA,cAAc,CAAa,WAAA,CAAA,CAAA,CAAA;EAAA,OACtD;EAEA,MAAQ,IAAA,IAAA,CAAA,SAAA,EAAY,cAAc,CAAA,CAAA,EAAI,WAAW,CAAA,SAAA,EAAY,gBAAiB,CAAA,IAAA,CAAK,GAAG,CAAC,CAAgB,aAAA,EAAA,QAAA,CAAS,IAAI,CAAA,EAAA,CAAA,CAAA;EAGpH,MAAA,IAAA,IAAQ,CAAa,UAAA,EAAA,cAAc,CAA8B,2BAAA,EAAA,QAAA,CAAS,MAAM,CAAA,CAAA,CAAA;EAChF,MAAA,IAAI,SAAS,QAAU,EAAA;EACrB,QAAQ,IAAA,IAAA,iCAAA,CAAA;EAAA,OACV;EACA,MAAQ,IAAA,IAAA,MAAA,CAAA;EAGR,MAAA,KAAA,IAAS,IAAI,CAAG,EAAA,CAAA,GAAI,QAAS,CAAA,OAAA,CAAQ,QAAQ,CAAK,EAAA,EAAA;EAEhD,QAAA,IAAI,iBAAiB,CAAG,EAAA,cAAc,CAAW,QAAA,EAAA,WAAW,IAAI,CAAC,CAAA,CAAA,CAAA;EACjE,QAAA,IAAI,UAAa,GAAA,CAAA,EAAG,cAAc,CAAA,UAAA,EAAa,WAAW,CAAA,CAAA,CAAA;EAC1D,QAAA,IAAI,WAAW,CAAG,EAAA,cAAc,CAAa,UAAA,EAAA,WAAW,IAAI,CAAC,CAAA,CAAA,CAAA;EAE7D,QAAI,IAAA,aAAA,GAAgB,QAAS,CAAA,QAAA,GAAW,UAAa,GAAA,EAAA,CAAA;EAGrD,QAAQ,IAAA,IAAA,CAAA;AAAA,iBACG,EAAA,cAAc,YAAY,cAAc,CAAA;AAAA,wBACjC,EAAA,cAAc,eAAe,QAAQ,CAAA;AAAA,sCACvB,EAAA,UAAU,SAAS,QAAQ,CAAA,SAAA,EAAY,SAAS,OAAQ,CAAA,CAAC,CAAC,CAAA,EAAA,EAAK,aAAa,CAAA;AAAA,YACtG,EAAA,QAAA,CAAS,OAAQ,CAAA,CAAC,CAAC,CAAA;AAAA;AAAA,cAAA,CAAA,CAAA;EAAA,OAG3B;EAEA,MAAQ,IAAA,IAAA,QAAA,CAAA;EAAA,KACV;EAGA,IAAQ,IAAA,IAAA,CAAA,yBAAA,EAA4B,cAAc,CAAA,cAAA,EAAiB,cAAc,CAAA,aAAA,EAAgB,KAAM,CAAA,YAAA,GAAe,UAAa,GAAA,KAAA,CAAM,YAAe,GAAA,GAAA,GAAM,EAAE,CAAA,GAAA,CAAA,CAAA;EAChK,IAAQ,IAAA,IAAA,SAAA,CAAA;EAGR,IAAA,eAAA,CAAgB,SAAY,GAAA,IAAA,CAAA;EAE5B,IAAA,MAAM,UAAa,GAAA,eAAA,CAAgB,aAA+B,CAAA,CAAA,CAAA,EAAI,aAAa,CAAE,CAAA,CAAA,CAAA;EAErF,IAAW,UAAA,CAAA,gBAAA,CAAiB,QAAU,EAAA,CAAC,KAAU,KAAA;EAC/C,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;EAErB,MAAI,IAAA,OAAA,GAAU,YAAY,GAAI,EAAA,CAAA;EAC9B,MAAA,IAAI,aAAgB,GAAA,IAAA,CAAK,KAAM,CAAA,OAAA,GAAU,SAAS,CAAA,CAAA;EAGlD,MAAA,IAAI,gBAAgB,EAAC,CAAA;EACrB,MAAA,KAAA,IAASC,KAAI,CAAGA,EAAAA,EAAAA,GAAI,KAAM,CAAA,SAAA,CAAU,QAAQA,EAAK,EAAA,EAAA;EAC/C,QAAA,IAAI,QAAQ,eAAgB,CAAA,aAAA,CAAc,IAAI,cAAc,CAAA,CAAA,EAAIA,EAAC,CAAE,CAAA,CAAA,CAAA;EACnE,QAAA,IAAI,KAAK,GAAMA,GAAAA,EAAAA,CAAAA;EACf,QAAI,IAAA,GAAA,CAAA;EACJ,QAAA,IAAI,KAAM,CAAA,aAAA,CAAc,2BAA2B,CAAA,KAAM,IAAM,EAAA;EAC7D,UAAM,GAAA,GAAA,KAAA,CAAM,aAAgC,CAAA,2BAA2B,CAAE,CAAA,KAAA,CAAA;EAAA,SACpE,MAAA;EACL,UAAM,GAAA,GAAA,EAAA,CAAA;EAAA,SACR;EACA,QAAA,IAAI,OAAO,EAAC,CAAA;EACZ,QAAA,IAAI,IAAO,GAAA,EAAA,CAAA;EACX,QAAA,IAAI,KAAM,CAAA,UAAA,CAAW,WAAW,CAAA,CAAE,UAAU,EAAI,EAAA;EAC9C,UAAO,IAAA,GAAA,KAAA,CAAM,UAAW,CAAA,WAAW,CAAE,CAAA,KAAA,CAAA;EAAA,SACvC;EACA,QAAA,IAAA,CAAK,IAAI,CAAI,GAAA,GAAA,CAAA;EACb,QAAO,MAAA,CAAA,MAAA,CAAO,eAAe,IAAI,CAAA,CAAA;EAAA,OACnC;EAEA,MAAA,IAAI,UAAa,GAAA;EAAA,QACf,EAAI,EAAA,aAAA;EAAA,QACJ,QAAU,EAAA,aAAA;EAAA,QACV,cAAA;EAAA,OACF,CAAA;EAGA,MAAK,IAAA,CAAA,OAAA,CAAQ,YAAY,UAAU,CAAA,CAAA;EAAA,KACpC,CAAA,CAAA;EAED,IAAI,IAAA,SAAA,GAAY,YAAY,GAAI,EAAA,CAAA;EAAA,GAClC;EAAA,EAEA,QACE,CAAA,KAAA,EACA,eACA,EAAA,kBAAA,EACA,aACA,EAAA;EACA,IAAA,IAAI,mBAAmB,WAAa,EAAA;EAClC,MAAc,aAAA,EAAA,CAAA;EACd,MAAK,IAAA,CAAA,kBAAA,CAAmB,OAAO,kBAAkB,CAAA,CAAA;EAAA,KACnD;EACA,IAAA,IAAI,mBAAmB,QAAU,EAAA;EAC/B,MAAK,IAAA,CAAA,eAAA,CAAgB,KAAO,EAAA,kBAAA,EAAoB,aAAa,CAAA,CAAA;EAAA,KAC/D;EAAA,GACF;EAAA,EAEQ,sBAAA,CAAuB,OAAwB,kBAAoB,EAAA;EACzE,IAAA,MAAM,gBAAgB,EAAC,CAAA;EACvB,IAAA,IAAI,EAAK,GAAA,GAAA,CAAA;EAET,IAAW,KAAA,MAAA,CAAA,IAAK,MAAM,SAAW,EAAA;EAC/B,MAAM,MAAA,IAAA,GAAO,CAAE,CAAA,IAAA,GAAO,CAAE,CAAA,IAAA,GAAO,IAAI,KAAM,CAAA,SAAA,CAAU,OAAQ,CAAA,CAAC,CAAC,CAAA,CAAA,CAAA;EAC7D,MAAc,aAAA,CAAA,IAAI,CAAI,GAAA,IAAA,CAAK,OAAQ,CAAA,aAAA,CAAc,yBAAyB,CAAE,CAAA,OAAA,EAAS,CAAC,CAAA,CAAE,CAAC,CAAA,CAAA;EACzF,MAAM,EAAA,IAAA,IAAA,CAAK,QAAQ,aAAc,CAAA,gBAAA,CAAiB,MAAM,GAAK,EAAA,CAAA,GAAI,KAAK,IAAI,CAAA,CAAA;EAAA,KAC5E;EAEA,IAAA,MAAM,YAAe,GAAA;EAAA,MACnB,QAAU,EAAA,aAAA;EAAA,MACV,EAAA;EAAA,MACA,cAAA,EAAgB,KAAM,CAAA,wBAAA,GAClB,IAAK,CAAA,OAAA,CAAQ,aAAc,CAAA,OAAA,CAAQ,CAAC,GAAG,KAAM,CAAA,KAAA,CAAM,SAAU,CAAA,MAAM,EAAE,IAAK,EAAC,CAAC,CAAA,GAC5E,CAAC,GAAG,KAAM,CAAA,KAAA,CAAM,SAAU,CAAA,MAAM,CAAE,CAAA,IAAA,EAAM,CAAA;EAAA,KAC9C,CAAA;EAEA,IAAA,MAAM,OAAO,IAAK,CAAA,OAAA,CAAQ,SAAU,CAAA,mBAAA,CAAoB,cAAc,kBAAkB,CAAA,CAAA;EAExF,IAAA,IAAA,CAAK,OAAQ,CAAA,SAAA,CAAU,+BAAgC,CAAA,KAAA,EAAO,IAAI,CAAA,CAAA;EAElE,IAAO,OAAA,IAAA,CAAA;EAAA,GACT;EAAA,EAEQ,kBAAA,CAAmB,OAAwB,kBAAoB,EAAA;EACrE,IAAA,MAAM,IAAO,GAAA,IAAA,CAAK,sBAAuB,CAAA,KAAA,EAAO,kBAAkB,CAAA,CAAA;EAElE,IAAK,IAAA,CAAA,OAAA,CAAQ,YAAY,IAAI,CAAA,CAAA;EAAA,GAC/B;EAAA,EAEQ,eAAA,CAAgB,KAAwB,EAAA,kBAAA,EAAoB,aAA2B,EAAA;EAC7F,IAAA,MAAM,IAAO,GAAA,IAAA,CAAK,sBAAuB,CAAA,KAAA,EAAO,kBAAkB,CAAA,CAAA;EAElE,IAAM,MAAA,eAAA,GAAkB,IAAK,CAAA,OAAA,CAAQ,iBAAkB,EAAA,CAAA;EAEvD,IAAK,IAAA,CAAA,KAAA,CAAM,iBAAiB,KAAK,CAAA,CAAA;EACjC,IAAc,aAAA,EAAA,CAAA;EAEd,IAAA,MAAM,OAAU,GAAA,MAAA,CAAO,OAAQ,CAAA,IAAA,CAAK,QAAQ,CAAA,CAAA;EAC5C,IAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,OAAA,CAAQ,QAAQ,CAAK,EAAA,EAAA;EACvC,MAAA,IAAA,CAAK,QAAQ,SAAU,CAAA,WAAA;EAAA,QACrB,eAAgB,CAAA,aAAA;EAAA,UACd,CAAA,CAAA,EAAI,cAAc,CAAa,UAAA,EAAA,CAAC,IAAI,KAAM,CAAA,SAAA,CAAU,CAAC,CAAA,CAAE,OAAQ,CAAA,OAAA;AAAA,YAC7D,OAAA,CAAQ,CAAC,CAAA,CAAE,CAAC,CAAA;AAAA,WACb,CAAA,CAAA;EAAA,SACH;EAAA,QAAA,CACE,IAAK,CAAA,EAAA,GAAK,GAAQ,IAAA,OAAA,CAAQ,UAAW,CAAI,GAAA,CAAA,CAAA;EAAA,OAC7C,CAAA;EAAA,KACF;EAEA,IAAA,IAAA,CAAK,QAAQ,SAAU,CAAA,WAAA;EAAA,MACrB,eAAgB,CAAA,aAAA,CAAc,CAAI,CAAA,EAAA,cAAc,CAAO,KAAA,CAAA,CAAA;EAAA,MACvD,IAAK,CAAA,EAAA;EAAA,KACP,CAAA;EAAA,GACF;EACF;;;;;;;;"}
|
|
@@ -1,2 +1,16 @@
|
|
|
1
|
-
var jsPsychSurveyMultiChoice=function(
|
|
2
|
-
|
|
1
|
+
var jsPsychSurveyMultiChoice=function(o){"use strict";var q="2.0.2";const T={name:"survey-multi-choice",version:q,parameters:{questions:{type:o.ParameterType.COMPLEX,array:!0,nested:{prompt:{type:o.ParameterType.HTML_STRING,default:void 0},options:{type:o.ParameterType.STRING,array:!0,default:void 0},required:{type:o.ParameterType.BOOL,default:!1},horizontal:{type:o.ParameterType.BOOL,default:!1},name:{type:o.ParameterType.STRING,default:""}}},randomize_question_order:{type:o.ParameterType.BOOL,default:!1},preamble:{type:o.ParameterType.HTML_STRING,default:null},button_label:{type:o.ParameterType.STRING,default:"Continue"},autocomplete:{type:o.ParameterType.BOOL,default:!1}},data:{response:{type:o.ParameterType.OBJECT},rt:{type:o.ParameterType.INT},question_order:{type:o.ParameterType.INT,array:!0}}},e="jspsych-survey-multi-choice";class y{constructor(a){this.jsPsych=a}trial(a,i){const s=`${e}_form`;var t="";t+=`
|
|
2
|
+
<style id="${e}-css">
|
|
3
|
+
.${e}-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }
|
|
4
|
+
.${e}-text span.required {color: darkred;}
|
|
5
|
+
.${e}-horizontal .${e}-text { text-align: center;}
|
|
6
|
+
.${e}-option { line-height: 2; }
|
|
7
|
+
.${e}-horizontal .${e}-option { display: inline-block; margin-left: 1em; margin-right: 1em; vertical-align: top;}
|
|
8
|
+
label.${e}-text input[type='radio'] {margin-right: 1em;}
|
|
9
|
+
</style>`,i.preamble!==null&&(t+=`<div id="${e}-preamble" class="${e}-preamble">${i.preamble}</div>`),i.autocomplete?t+=`<form id="${s}">`:t+=`<form id="${s}" autocomplete="off">`;for(var l=[],n=0;n<i.questions.length;n++)l.push(n);i.randomize_question_order&&(l=this.jsPsych.randomization.shuffle(l));for(var n=0;n<i.questions.length;n++){var r=i.questions[l[n]],u=l[n],h=[`${e}-question`];r.horizontal&&h.push(`${e}-horizontal`),t+=`<div id="${e}-${u}" class="${h.join(" ")}" data-name="${r.name}">`,t+=`<p class="${e}-text survey-multi-choice">${r.prompt}`,r.required&&(t+="<span class='required'>*</span>"),t+="</p>";for(var m=0;m<r.options.length;m++){var g=`${e}-option-${u}-${m}`,_=`${e}-response-${u}`,$=`${e}-response-${u}-${m}`,b=r.required?"required":"";t+=`
|
|
10
|
+
<div id="${g}" class="${e}-option">
|
|
11
|
+
<label class="${e}-text" for="${$}">
|
|
12
|
+
<input type="radio" name="${_}" id="${$}" value="${r.options[m]}" ${b} />
|
|
13
|
+
${r.options[m]}
|
|
14
|
+
</label>
|
|
15
|
+
</div>`}t+="</div>"}t+=`<input type="submit" id="${e}-next" class="${e} jspsych-btn"${i.button_label?' value="'+i.button_label+'"':""} />`,t+="</form>",a.innerHTML=t,a.querySelector(`#${s}`).addEventListener("submit",S=>{S.preventDefault();for(var x=performance.now(),z=Math.round(x-O),f={},p=0;p<i.questions.length;p++){var d=a.querySelector(`#${e}-${p}`),I="Q"+p,c;d.querySelector("input[type=radio]:checked")!==null?c=d.querySelector("input[type=radio]:checked").value:c="";var v={},P=I;d.attributes["data-name"].value!==""&&(P=d.attributes["data-name"].value),v[P]=c,Object.assign(f,v)}var L={rt:z,response:f,question_order:l};this.jsPsych.finishTrial(L)});var O=performance.now()}simulate(a,i,s,t){i=="data-only"&&(t(),this.simulate_data_only(a,s)),i=="visual"&&this.simulate_visual(a,s,t)}create_simulation_data(a,i){const s={};let t=1e3;for(const r of a.questions){const u=r.name?r.name:`Q${a.questions.indexOf(r)}`;s[u]=this.jsPsych.randomization.sampleWithoutReplacement(r.options,1)[0],t+=this.jsPsych.randomization.sampleExGaussian(1500,400,.005,!0)}const l={response:s,rt:t,question_order:a.randomize_question_order?this.jsPsych.randomization.shuffle([...Array(a.questions.length).keys()]):[...Array(a.questions.length).keys()]},n=this.jsPsych.pluginAPI.mergeSimulationData(l,i);return this.jsPsych.pluginAPI.ensureSimulationDataConsistency(a,n),n}simulate_data_only(a,i){const s=this.create_simulation_data(a,i);this.jsPsych.finishTrial(s)}simulate_visual(a,i,s){const t=this.create_simulation_data(a,i),l=this.jsPsych.getDisplayElement();this.trial(l,a),s();const n=Object.entries(t.response);for(let r=0;r<n.length;r++)this.jsPsych.pluginAPI.clickTarget(l.querySelector(`#${e}-response-${r}-${a.questions[r].options.indexOf(n[r][1])}`),(t.rt-1e3)/n.length*(r+1));this.jsPsych.pluginAPI.clickTarget(l.querySelector(`#${e}-next`),t.rt)}}return y.info=T,y}(jsPsychModule);
|
|
16
|
+
//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-survey-multi-choice@2.0.2/dist/index.browser.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.browser.min.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n \"name\": \"@jspsych/plugin-survey-multi-choice\",\n \"version\": \"2.0.1\",\n \"description\": \"a jspsych plugin for multiple choice survey questions\",\n \"type\": \"module\",\n \"main\": \"dist/index.cjs\",\n \"exports\": {\n \"import\": \"./dist/index.js\",\n \"require\": \"./dist/index.cjs\"\n },\n \"typings\": \"dist/index.d.ts\",\n \"unpkg\": \"dist/index.browser.min.js\",\n \"files\": [\n \"src\",\n \"dist\"\n ],\n \"source\": \"src/index.ts\",\n \"scripts\": {\n \"test\": \"jest\",\n \"test:watch\": \"npm test -- --watch\",\n \"tsc\": \"tsc\",\n \"build\": \"rollup --config\",\n \"build:watch\": \"npm run build -- --watch\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n \"directory\": \"packages/plugin-survey-multi-choice\"\n },\n \"author\": \"Shane Martin\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n },\n \"homepage\": \"https://www.jspsych.org/latest/plugins/survey-multi-choice\",\n \"peerDependencies\": {\n \"jspsych\": \">=7.1.0\"\n },\n \"devDependencies\": {\n \"@jspsych/config\": \"^3.1.1\",\n \"@jspsych/test-utils\": \"^1.2.0\"\n }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n name: \"survey-multi-choice\",\n version: version,\n parameters: {\n /**\n * An array of objects, each object represents a question that appears on the screen. Each object contains a prompt,\n * options, required, and horizontal parameter that will be applied to the question. See examples below for further\n * clarification.`prompt`: Type string, default value is *undefined*. The string is prompt/question that will be\n * associated with a group of options (radio buttons). All questions will get presented on the same page (trial).\n * `options`: Type array, defualt value is *undefined*. An array of strings. The array contains a set of options to\n * display for an individual question.`required`: Type boolean, default value is null. The boolean value indicates\n * if a question is required('true') or not ('false'), using the HTML5 `required` attribute. If this parameter is\n * undefined, the question will be optional. `horizontal`:Type boolean, default value is false. If true, then the\n * question is centered and the options are displayed horizontally. `name`: Name of the question. Used for storing\n * data. If left undefined then default names (`Q0`, `Q1`, `...`) will be used for the questions.\n */\n questions: {\n type: ParameterType.COMPLEX,\n array: true,\n nested: {\n /** Question prompt. */\n prompt: {\n type: ParameterType.HTML_STRING,\n default: undefined,\n },\n /** Array of multiple choice options for this question. */\n options: {\n type: ParameterType.STRING,\n array: true,\n default: undefined,\n },\n /** Whether or not a response to this question must be given in order to continue. */\n required: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** If true, then the question will be centered and options will be displayed horizontally. */\n horizontal: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */\n name: {\n type: ParameterType.STRING,\n default: \"\",\n },\n },\n },\n /**\n * If true, the display order of `questions` is randomly determined at the start of the trial. In the data object,\n * `Q0` will still refer to the first question in the array, regardless of where it was presented visually.\n */\n randomize_question_order: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** HTML formatted string to display at the top of the page above all the questions. */\n preamble: {\n type: ParameterType.HTML_STRING,\n default: null,\n },\n /** Label of the button. */\n button_label: {\n type: ParameterType.STRING,\n default: \"Continue\",\n },\n /**\n * This determines whether or not all of the input elements on the page should allow autocomplete. Setting\n * this to true will enable autocomplete or auto-fill for the form.\n */\n autocomplete: {\n type: ParameterType.BOOL,\n default: false,\n },\n },\n data: {\n /** 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. */\n response: {\n type: ParameterType.OBJECT,\n },\n /** 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. */\n rt: {\n type: ParameterType.INT,\n },\n /** 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. */\n question_order: {\n type: ParameterType.INT,\n array: true,\n },\n },\n};\n\ntype Info = typeof info;\n\n/**\n * **survey-multi-choice**\n *\n * The survey-multi-choice plugin displays a set of questions with multiple choice response fields. The participant selects a single answer.\n *\n * @author Shane Martin\n * @see {@link https://www.jspsych.org/latest/plugins/survey-multi-choice/ survey-multi-choice plugin documentation on jspsych.org}\n */\nclass SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {\n static info = info;\n\n constructor(private jsPsych: JsPsych) {}\n\n trial(display_element: HTMLElement, trial: TrialType<Info>) {\n var plugin_id_name = \"jspsych-survey-multi-choice\";\n\n var html = \"\";\n\n // inject CSS for trial\n html += '<style id=\"jspsych-survey-multi-choice-css\">';\n html +=\n \".jspsych-survey-multi-choice-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }\" +\n \".jspsych-survey-multi-choice-text span.required {color: darkred;}\" +\n \".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-text { text-align: center;}\" +\n \".jspsych-survey-multi-choice-option { line-height: 2; }\" +\n \".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-option { display: inline-block; margin-left: 1em; margin-right: 1em; vertical-align: top;}\" +\n \"label.jspsych-survey-multi-choice-text input[type='radio'] {margin-right: 1em;}\";\n html += \"</style>\";\n\n // show preamble text\n if (trial.preamble !== null) {\n html +=\n '<div id=\"jspsych-survey-multi-choice-preamble\" class=\"jspsych-survey-multi-choice-preamble\">' +\n trial.preamble +\n \"</div>\";\n }\n\n // form element\n if (trial.autocomplete) {\n html += '<form id=\"jspsych-survey-multi-choice-form\">';\n } else {\n html += '<form id=\"jspsych-survey-multi-choice-form\" autocomplete=\"off\">';\n }\n // generate question order. this is randomized here as opposed to randomizing the order of trial.questions\n // so that the data are always associated with the same question regardless of order\n var question_order = [];\n for (var i = 0; i < trial.questions.length; i++) {\n question_order.push(i);\n }\n if (trial.randomize_question_order) {\n question_order = this.jsPsych.randomization.shuffle(question_order);\n }\n\n // add multiple-choice questions\n for (var i = 0; i < trial.questions.length; i++) {\n // get question based on question_order\n var question = trial.questions[question_order[i]];\n var question_id = question_order[i];\n\n // create question container\n var question_classes = [\"jspsych-survey-multi-choice-question\"];\n if (question.horizontal) {\n question_classes.push(\"jspsych-survey-multi-choice-horizontal\");\n }\n\n html +=\n '<div id=\"jspsych-survey-multi-choice-' +\n question_id +\n '\" class=\"' +\n question_classes.join(\" \") +\n '\" data-name=\"' +\n question.name +\n '\">';\n\n // add question text\n html += '<p class=\"jspsych-survey-multi-choice-text survey-multi-choice\">' + question.prompt;\n if (question.required) {\n html += \"<span class='required'>*</span>\";\n }\n html += \"</p>\";\n\n // create option radio buttons\n for (var j = 0; j < question.options.length; j++) {\n // add label and question text\n var option_id_name = \"jspsych-survey-multi-choice-option-\" + question_id + \"-\" + j;\n var input_name = \"jspsych-survey-multi-choice-response-\" + question_id;\n var input_id = \"jspsych-survey-multi-choice-response-\" + question_id + \"-\" + j;\n\n var required_attr = question.required ? \"required\" : \"\";\n\n // add radio button container\n html += '<div id=\"' + option_id_name + '\" class=\"jspsych-survey-multi-choice-option\">';\n html += '<label class=\"jspsych-survey-multi-choice-text\" for=\"' + input_id + '\">';\n html +=\n '<input type=\"radio\" name=\"' +\n input_name +\n '\" id=\"' +\n input_id +\n '\" value=\"' +\n question.options[j] +\n '\" ' +\n required_attr +\n \"></input>\";\n html += question.options[j] + \"</label>\";\n html += \"</div>\";\n }\n\n html += \"</div>\";\n }\n\n // add submit button\n html +=\n '<input type=\"submit\" id=\"' +\n plugin_id_name +\n '-next\" class=\"' +\n plugin_id_name +\n ' jspsych-btn\"' +\n (trial.button_label ? ' value=\"' + trial.button_label + '\"' : \"\") +\n \"></input>\";\n html += \"</form>\";\n\n // render\n display_element.innerHTML = html;\n\n document.querySelector(\"form\").addEventListener(\"submit\", (event) => {\n event.preventDefault();\n // measure response time\n var endTime = performance.now();\n var response_time = Math.round(endTime - startTime);\n\n // create object to hold responses\n var question_data = {};\n for (var i = 0; i < trial.questions.length; i++) {\n var match = display_element.querySelector(\"#jspsych-survey-multi-choice-\" + i);\n var id = \"Q\" + i;\n var val: String;\n if (match.querySelector(\"input[type=radio]:checked\") !== null) {\n val = match.querySelector<HTMLInputElement>(\"input[type=radio]:checked\").value;\n } else {\n val = \"\";\n }\n var obje = {};\n var name = id;\n if (match.attributes[\"data-name\"].value !== \"\") {\n name = match.attributes[\"data-name\"].value;\n }\n obje[name] = val;\n Object.assign(question_data, obje);\n }\n // save data\n var trial_data = {\n rt: response_time,\n response: question_data,\n question_order: question_order,\n };\n\n // next trial\n this.jsPsych.finishTrial(trial_data);\n });\n\n var startTime = performance.now();\n }\n\n simulate(\n trial: TrialType<Info>,\n simulation_mode,\n simulation_options: any,\n load_callback: () => void\n ) {\n if (simulation_mode == \"data-only\") {\n load_callback();\n this.simulate_data_only(trial, simulation_options);\n }\n if (simulation_mode == \"visual\") {\n this.simulate_visual(trial, simulation_options, load_callback);\n }\n }\n\n private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n const question_data = {};\n let rt = 1000;\n\n for (const q of trial.questions) {\n const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;\n question_data[name] = this.jsPsych.randomization.sampleWithoutReplacement(q.options, 1)[0];\n rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);\n }\n\n const default_data = {\n response: question_data,\n rt: rt,\n question_order: trial.randomize_question_order\n ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])\n : [...Array(trial.questions.length).keys()],\n };\n\n const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n return data;\n }\n\n private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n this.jsPsych.finishTrial(data);\n }\n\n private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n const display_element = this.jsPsych.getDisplayElement();\n\n this.trial(display_element, trial);\n load_callback();\n\n const answers = Object.entries(data.response);\n for (let i = 0; i < answers.length; i++) {\n this.jsPsych.pluginAPI.clickTarget(\n display_element.querySelector(\n `#jspsych-survey-multi-choice-response-${i}-${trial.questions[i].options.indexOf(\n answers[i][1]\n )}`\n ),\n ((data.rt - 1000) / answers.length) * (i + 1)\n );\n }\n\n this.jsPsych.pluginAPI.clickTarget(\n display_element.querySelector(\"#jspsych-survey-multi-choice-next\"),\n data.rt\n );\n }\n}\n\nexport default SurveyMultiChoicePlugin;\n"],"names":["version","info","ParameterType","SurveyMultiChoicePlugin","jsPsych","display_element","trial","plugin_id_name","html","question_order","i","question","question_id","question_classes","j","option_id_name","input_name","input_id","required_attr","event","endTime","response_time","startTime","question_data","match","id","val","obje","name","trial_data","simulation_mode","simulation_options","load_callback","rt","q","default_data","data","answers"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.browser.min.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n \"name\": \"@jspsych/plugin-survey-multi-choice\",\n \"version\": \"2.0.2\",\n \"description\": \"a jspsych plugin for multiple choice survey questions\",\n \"type\": \"module\",\n \"main\": \"dist/index.cjs\",\n \"exports\": {\n \"import\": \"./dist/index.js\",\n \"require\": \"./dist/index.cjs\"\n },\n \"typings\": \"dist/index.d.ts\",\n \"unpkg\": \"dist/index.browser.min.js\",\n \"files\": [\n \"src\",\n \"dist\"\n ],\n \"source\": \"src/index.ts\",\n \"scripts\": {\n \"test\": \"jest\",\n \"test:watch\": \"npm test -- --watch\",\n \"tsc\": \"tsc\",\n \"build\": \"rollup --config\",\n \"build:watch\": \"npm run build -- --watch\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n \"directory\": \"packages/plugin-survey-multi-choice\"\n },\n \"author\": \"Shane Martin\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n },\n \"homepage\": \"https://www.jspsych.org/latest/plugins/survey-multi-choice\",\n \"peerDependencies\": {\n \"jspsych\": \">=7.1.0\"\n },\n \"devDependencies\": {\n \"@jspsych/config\": \"^3.1.1\",\n \"@jspsych/test-utils\": \"^1.2.0\"\n }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n name: \"survey-multi-choice\",\n version: version,\n parameters: {\n /**\n * An array of objects, each object represents a question that appears on the screen. Each object contains a prompt,\n * options, required, and horizontal parameter that will be applied to the question. See examples below for further\n * clarification.`prompt`: Type string, default value is *undefined*. The string is prompt/question that will be\n * associated with a group of options (radio buttons). All questions will get presented on the same page (trial).\n * `options`: Type array, defualt value is *undefined*. An array of strings. The array contains a set of options to\n * display for an individual question.`required`: Type boolean, default value is null. The boolean value indicates\n * if a question is required('true') or not ('false'), using the HTML5 `required` attribute. If this parameter is\n * undefined, the question will be optional. `horizontal`:Type boolean, default value is false. If true, then the\n * question is centered and the options are displayed horizontally. `name`: Name of the question. Used for storing\n * data. If left undefined then default names (`Q0`, `Q1`, `...`) will be used for the questions.\n */\n questions: {\n type: ParameterType.COMPLEX,\n array: true,\n nested: {\n /** Question prompt. */\n prompt: {\n type: ParameterType.HTML_STRING,\n default: undefined,\n },\n /** Array of multiple choice options for this question. */\n options: {\n type: ParameterType.STRING,\n array: true,\n default: undefined,\n },\n /** Whether or not a response to this question must be given in order to continue. */\n required: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** If true, then the question will be centered and options will be displayed horizontally. */\n horizontal: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */\n name: {\n type: ParameterType.STRING,\n default: \"\",\n },\n },\n },\n /**\n * If true, the display order of `questions` is randomly determined at the start of the trial. In the data object,\n * `Q0` will still refer to the first question in the array, regardless of where it was presented visually.\n */\n randomize_question_order: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** HTML formatted string to display at the top of the page above all the questions. */\n preamble: {\n type: ParameterType.HTML_STRING,\n default: null,\n },\n /** Label of the button. */\n button_label: {\n type: ParameterType.STRING,\n default: \"Continue\",\n },\n /**\n * This determines whether or not all of the input elements on the page should allow autocomplete. Setting\n * this to true will enable autocomplete or auto-fill for the form.\n */\n autocomplete: {\n type: ParameterType.BOOL,\n default: false,\n },\n },\n data: {\n /** 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. */\n response: {\n type: ParameterType.OBJECT,\n },\n /** 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. */\n rt: {\n type: ParameterType.INT,\n },\n /** 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. */\n question_order: {\n type: ParameterType.INT,\n array: true,\n },\n },\n};\n\ntype Info = typeof info;\n\nconst plugin_id_name = \"jspsych-survey-multi-choice\";\n\n/**\n * **survey-multi-choice**\n *\n * The survey-multi-choice plugin displays a set of questions with multiple choice response fields. The participant selects a single answer.\n *\n * @author Shane Martin\n * @see {@link https://www.jspsych.org/latest/plugins/survey-multi-choice/ survey-multi-choice plugin documentation on jspsych.org}\n */\nclass SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {\n static info = info;\n\n constructor(private jsPsych: JsPsych) { }\n\n trial(display_element: HTMLElement, trial: TrialType<Info>) {\n\n const trial_form_id = `${plugin_id_name}_form`;\n\n var html = \"\";\n\n // inject CSS for trial\n html += `\n <style id=\"${plugin_id_name}-css\">\n .${plugin_id_name}-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }\n .${plugin_id_name}-text span.required {color: darkred;}\n .${plugin_id_name}-horizontal .${plugin_id_name}-text { text-align: center;}\n .${plugin_id_name}-option { line-height: 2; }\n .${plugin_id_name}-horizontal .${plugin_id_name}-option { display: inline-block; margin-left: 1em; margin-right: 1em; vertical-align: top;}\n label.${plugin_id_name}-text input[type='radio'] {margin-right: 1em;}\n </style>`;\n\n // show preamble text\n if (trial.preamble !== null) {\n html += `<div id=\"${plugin_id_name}-preamble\" class=\"${plugin_id_name}-preamble\">${trial.preamble}</div>`;\n }\n\n // form element\n if (trial.autocomplete) {\n html += `<form id=\"${trial_form_id}\">`;\n } else {\n html += `<form id=\"${trial_form_id}\" autocomplete=\"off\">`;\n }\n\n // generate question order. this is randomized here as opposed to randomizing the order of trial.questions\n // so that the data are always associated with the same question regardless of order\n var question_order = [];\n for (var i = 0; i < trial.questions.length; i++) {\n question_order.push(i);\n }\n if (trial.randomize_question_order) {\n question_order = this.jsPsych.randomization.shuffle(question_order);\n }\n\n // add multiple-choice questions\n for (var i = 0; i < trial.questions.length; i++) {\n // get question based on question_order\n var question = trial.questions[question_order[i]];\n var question_id = question_order[i];\n\n // create question container\n var question_classes = [`${plugin_id_name}-question`];\n if (question.horizontal) {\n question_classes.push(`${plugin_id_name}-horizontal`);\n }\n\n html += `<div id=\"${plugin_id_name}-${question_id}\" class=\"${question_classes.join(\" \")}\" data-name=\"${question.name}\">`;\n\n // add question text\n html += `<p class=\"${plugin_id_name}-text survey-multi-choice\">${question.prompt}`;\n if (question.required) {\n html += \"<span class='required'>*</span>\";\n }\n html += \"</p>\";\n\n // create option radio buttons\n for (var j = 0; j < question.options.length; j++) {\n // add label and question text\n var option_id_name = `${plugin_id_name}-option-${question_id}-${j}`;\n var input_name = `${plugin_id_name}-response-${question_id}`;\n var input_id = `${plugin_id_name}-response-${question_id}-${j}`;\n\n var required_attr = question.required ? \"required\" : \"\";\n\n // add radio button container\n html += `\n <div id=\"${option_id_name}\" class=\"${plugin_id_name}-option\">\n <label class=\"${plugin_id_name}-text\" for=\"${input_id}\">\n <input type=\"radio\" name=\"${input_name}\" id=\"${input_id}\" value=\"${question.options[j]}\" ${required_attr} />\n ${question.options[j]}\n </label>\n </div>`;\n }\n\n html += \"</div>\";\n }\n\n // add submit button\n html += `<input type=\"submit\" id=\"${plugin_id_name}-next\" class=\"${plugin_id_name} jspsych-btn\"${trial.button_label ? ' value=\"' + trial.button_label + '\"' : \"\"} />`;\n html += \"</form>\";\n\n // render\n display_element.innerHTML = html;\n\n const trial_form = display_element.querySelector<HTMLFormElement>(`#${trial_form_id}`);\n\n trial_form.addEventListener(\"submit\", (event) => {\n event.preventDefault();\n // measure response time\n var endTime = performance.now();\n var response_time = Math.round(endTime - startTime);\n\n // create object to hold responses\n var question_data = {};\n for (var i = 0; i < trial.questions.length; i++) {\n var match = display_element.querySelector(`#${plugin_id_name}-${i}`);\n var id = \"Q\" + i;\n var val: String;\n if (match.querySelector(\"input[type=radio]:checked\") !== null) {\n val = match.querySelector<HTMLInputElement>(\"input[type=radio]:checked\").value;\n } else {\n val = \"\";\n }\n var obje = {};\n var name = id;\n if (match.attributes[\"data-name\"].value !== \"\") {\n name = match.attributes[\"data-name\"].value;\n }\n obje[name] = val;\n Object.assign(question_data, obje);\n }\n // save data\n var trial_data = {\n rt: response_time,\n response: question_data,\n question_order: question_order,\n };\n\n // next trial\n this.jsPsych.finishTrial(trial_data);\n });\n\n var startTime = performance.now();\n }\n\n simulate(\n trial: TrialType<Info>,\n simulation_mode,\n simulation_options: any,\n load_callback: () => void\n ) {\n if (simulation_mode == \"data-only\") {\n load_callback();\n this.simulate_data_only(trial, simulation_options);\n }\n if (simulation_mode == \"visual\") {\n this.simulate_visual(trial, simulation_options, load_callback);\n }\n }\n\n private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n const question_data = {};\n let rt = 1000;\n\n for (const q of trial.questions) {\n const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;\n question_data[name] = this.jsPsych.randomization.sampleWithoutReplacement(q.options, 1)[0];\n rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);\n }\n\n const default_data = {\n response: question_data,\n rt: rt,\n question_order: trial.randomize_question_order\n ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])\n : [...Array(trial.questions.length).keys()],\n };\n\n const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n return data;\n }\n\n private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n this.jsPsych.finishTrial(data);\n }\n\n private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n const display_element = this.jsPsych.getDisplayElement();\n\n this.trial(display_element, trial);\n load_callback();\n\n const answers = Object.entries(data.response);\n for (let i = 0; i < answers.length; i++) {\n this.jsPsych.pluginAPI.clickTarget(\n display_element.querySelector(\n `#${plugin_id_name}-response-${i}-${trial.questions[i].options.indexOf(\n answers[i][1]\n )}`\n ),\n ((data.rt - 1000) / answers.length) * (i + 1)\n );\n }\n\n this.jsPsych.pluginAPI.clickTarget(\n display_element.querySelector(`#${plugin_id_name}-next`),\n data.rt\n );\n }\n}\n\nexport default SurveyMultiChoicePlugin;\n"],"names":["version","info","ParameterType","plugin_id_name","SurveyMultiChoicePlugin","jsPsych","display_element","trial","trial_form_id","html","question_order","i","question","question_id","question_classes","j","option_id_name","input_name","input_id","required_attr","event","endTime","response_time","startTime","question_data","match","id","val","obje","name","trial_data","simulation_mode","simulation_options","load_callback","rt","q","default_data","data","answers"],"mappings":"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"}
|
package/dist/index.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var jspsych = require('jspsych');
|
|
4
4
|
|
|
5
|
-
var version = "2.0.
|
|
5
|
+
var version = "2.0.2";
|
|
6
6
|
|
|
7
7
|
const info = {
|
|
8
8
|
name: "survey-multi-choice",
|
|
@@ -95,6 +95,7 @@ const info = {
|
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
};
|
|
98
|
+
const plugin_id_name = "jspsych-survey-multi-choice";
|
|
98
99
|
class SurveyMultiChoicePlugin {
|
|
99
100
|
constructor(jsPsych) {
|
|
100
101
|
this.jsPsych = jsPsych;
|
|
@@ -103,18 +104,24 @@ class SurveyMultiChoicePlugin {
|
|
|
103
104
|
this.info = info;
|
|
104
105
|
}
|
|
105
106
|
trial(display_element, trial) {
|
|
106
|
-
|
|
107
|
+
const trial_form_id = `${plugin_id_name}_form`;
|
|
107
108
|
var html = "";
|
|
108
|
-
html +=
|
|
109
|
-
|
|
110
|
-
|
|
109
|
+
html += `
|
|
110
|
+
<style id="${plugin_id_name}-css">
|
|
111
|
+
.${plugin_id_name}-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }
|
|
112
|
+
.${plugin_id_name}-text span.required {color: darkred;}
|
|
113
|
+
.${plugin_id_name}-horizontal .${plugin_id_name}-text { text-align: center;}
|
|
114
|
+
.${plugin_id_name}-option { line-height: 2; }
|
|
115
|
+
.${plugin_id_name}-horizontal .${plugin_id_name}-option { display: inline-block; margin-left: 1em; margin-right: 1em; vertical-align: top;}
|
|
116
|
+
label.${plugin_id_name}-text input[type='radio'] {margin-right: 1em;}
|
|
117
|
+
</style>`;
|
|
111
118
|
if (trial.preamble !== null) {
|
|
112
|
-
html +=
|
|
119
|
+
html += `<div id="${plugin_id_name}-preamble" class="${plugin_id_name}-preamble">${trial.preamble}</div>`;
|
|
113
120
|
}
|
|
114
121
|
if (trial.autocomplete) {
|
|
115
|
-
html +=
|
|
122
|
+
html += `<form id="${trial_form_id}">`;
|
|
116
123
|
} else {
|
|
117
|
-
html +=
|
|
124
|
+
html += `<form id="${trial_form_id}" autocomplete="off">`;
|
|
118
125
|
}
|
|
119
126
|
var question_order = [];
|
|
120
127
|
for (var i = 0; i < trial.questions.length; i++) {
|
|
@@ -126,39 +133,42 @@ class SurveyMultiChoicePlugin {
|
|
|
126
133
|
for (var i = 0; i < trial.questions.length; i++) {
|
|
127
134
|
var question = trial.questions[question_order[i]];
|
|
128
135
|
var question_id = question_order[i];
|
|
129
|
-
var question_classes = [
|
|
136
|
+
var question_classes = [`${plugin_id_name}-question`];
|
|
130
137
|
if (question.horizontal) {
|
|
131
|
-
question_classes.push(
|
|
138
|
+
question_classes.push(`${plugin_id_name}-horizontal`);
|
|
132
139
|
}
|
|
133
|
-
html +=
|
|
134
|
-
html +=
|
|
140
|
+
html += `<div id="${plugin_id_name}-${question_id}" class="${question_classes.join(" ")}" data-name="${question.name}">`;
|
|
141
|
+
html += `<p class="${plugin_id_name}-text survey-multi-choice">${question.prompt}`;
|
|
135
142
|
if (question.required) {
|
|
136
143
|
html += "<span class='required'>*</span>";
|
|
137
144
|
}
|
|
138
145
|
html += "</p>";
|
|
139
146
|
for (var j = 0; j < question.options.length; j++) {
|
|
140
|
-
var option_id_name =
|
|
141
|
-
var input_name =
|
|
142
|
-
var input_id =
|
|
147
|
+
var option_id_name = `${plugin_id_name}-option-${question_id}-${j}`;
|
|
148
|
+
var input_name = `${plugin_id_name}-response-${question_id}`;
|
|
149
|
+
var input_id = `${plugin_id_name}-response-${question_id}-${j}`;
|
|
143
150
|
var required_attr = question.required ? "required" : "";
|
|
144
|
-
html +=
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
151
|
+
html += `
|
|
152
|
+
<div id="${option_id_name}" class="${plugin_id_name}-option">
|
|
153
|
+
<label class="${plugin_id_name}-text" for="${input_id}">
|
|
154
|
+
<input type="radio" name="${input_name}" id="${input_id}" value="${question.options[j]}" ${required_attr} />
|
|
155
|
+
${question.options[j]}
|
|
156
|
+
</label>
|
|
157
|
+
</div>`;
|
|
149
158
|
}
|
|
150
159
|
html += "</div>";
|
|
151
160
|
}
|
|
152
|
-
html +=
|
|
161
|
+
html += `<input type="submit" id="${plugin_id_name}-next" class="${plugin_id_name} jspsych-btn"${trial.button_label ? ' value="' + trial.button_label + '"' : ""} />`;
|
|
153
162
|
html += "</form>";
|
|
154
163
|
display_element.innerHTML = html;
|
|
155
|
-
|
|
164
|
+
const trial_form = display_element.querySelector(`#${trial_form_id}`);
|
|
165
|
+
trial_form.addEventListener("submit", (event) => {
|
|
156
166
|
event.preventDefault();
|
|
157
167
|
var endTime = performance.now();
|
|
158
168
|
var response_time = Math.round(endTime - startTime);
|
|
159
169
|
var question_data = {};
|
|
160
170
|
for (var i2 = 0; i2 < trial.questions.length; i2++) {
|
|
161
|
-
var match = display_element.querySelector(
|
|
171
|
+
var match = display_element.querySelector(`#${plugin_id_name}-${i2}`);
|
|
162
172
|
var id = "Q" + i2;
|
|
163
173
|
var val;
|
|
164
174
|
if (match.querySelector("input[type=radio]:checked") !== null) {
|
|
@@ -222,7 +232,7 @@ class SurveyMultiChoicePlugin {
|
|
|
222
232
|
for (let i = 0; i < answers.length; i++) {
|
|
223
233
|
this.jsPsych.pluginAPI.clickTarget(
|
|
224
234
|
display_element.querySelector(
|
|
225
|
-
|
|
235
|
+
`#${plugin_id_name}-response-${i}-${trial.questions[i].options.indexOf(
|
|
226
236
|
answers[i][1]
|
|
227
237
|
)}`
|
|
228
238
|
),
|
|
@@ -230,7 +240,7 @@ class SurveyMultiChoicePlugin {
|
|
|
230
240
|
);
|
|
231
241
|
}
|
|
232
242
|
this.jsPsych.pluginAPI.clickTarget(
|
|
233
|
-
display_element.querySelector(
|
|
243
|
+
display_element.querySelector(`#${plugin_id_name}-next`),
|
|
234
244
|
data.rt
|
|
235
245
|
);
|
|
236
246
|
}
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n \"name\": \"@jspsych/plugin-survey-multi-choice\",\n \"version\": \"2.0.1\",\n \"description\": \"a jspsych plugin for multiple choice survey questions\",\n \"type\": \"module\",\n \"main\": \"dist/index.cjs\",\n \"exports\": {\n \"import\": \"./dist/index.js\",\n \"require\": \"./dist/index.cjs\"\n },\n \"typings\": \"dist/index.d.ts\",\n \"unpkg\": \"dist/index.browser.min.js\",\n \"files\": [\n \"src\",\n \"dist\"\n ],\n \"source\": \"src/index.ts\",\n \"scripts\": {\n \"test\": \"jest\",\n \"test:watch\": \"npm test -- --watch\",\n \"tsc\": \"tsc\",\n \"build\": \"rollup --config\",\n \"build:watch\": \"npm run build -- --watch\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n \"directory\": \"packages/plugin-survey-multi-choice\"\n },\n \"author\": \"Shane Martin\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n },\n \"homepage\": \"https://www.jspsych.org/latest/plugins/survey-multi-choice\",\n \"peerDependencies\": {\n \"jspsych\": \">=7.1.0\"\n },\n \"devDependencies\": {\n \"@jspsych/config\": \"^3.1.1\",\n \"@jspsych/test-utils\": \"^1.2.0\"\n }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n name: \"survey-multi-choice\",\n version: version,\n parameters: {\n /**\n * An array of objects, each object represents a question that appears on the screen. Each object contains a prompt,\n * options, required, and horizontal parameter that will be applied to the question. See examples below for further\n * clarification.`prompt`: Type string, default value is *undefined*. The string is prompt/question that will be\n * associated with a group of options (radio buttons). All questions will get presented on the same page (trial).\n * `options`: Type array, defualt value is *undefined*. An array of strings. The array contains a set of options to\n * display for an individual question.`required`: Type boolean, default value is null. The boolean value indicates\n * if a question is required('true') or not ('false'), using the HTML5 `required` attribute. If this parameter is\n * undefined, the question will be optional. `horizontal`:Type boolean, default value is false. If true, then the\n * question is centered and the options are displayed horizontally. `name`: Name of the question. Used for storing\n * data. If left undefined then default names (`Q0`, `Q1`, `...`) will be used for the questions.\n */\n questions: {\n type: ParameterType.COMPLEX,\n array: true,\n nested: {\n /** Question prompt. */\n prompt: {\n type: ParameterType.HTML_STRING,\n default: undefined,\n },\n /** Array of multiple choice options for this question. */\n options: {\n type: ParameterType.STRING,\n array: true,\n default: undefined,\n },\n /** Whether or not a response to this question must be given in order to continue. */\n required: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** If true, then the question will be centered and options will be displayed horizontally. */\n horizontal: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */\n name: {\n type: ParameterType.STRING,\n default: \"\",\n },\n },\n },\n /**\n * If true, the display order of `questions` is randomly determined at the start of the trial. In the data object,\n * `Q0` will still refer to the first question in the array, regardless of where it was presented visually.\n */\n randomize_question_order: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** HTML formatted string to display at the top of the page above all the questions. */\n preamble: {\n type: ParameterType.HTML_STRING,\n default: null,\n },\n /** Label of the button. */\n button_label: {\n type: ParameterType.STRING,\n default: \"Continue\",\n },\n /**\n * This determines whether or not all of the input elements on the page should allow autocomplete. Setting\n * this to true will enable autocomplete or auto-fill for the form.\n */\n autocomplete: {\n type: ParameterType.BOOL,\n default: false,\n },\n },\n data: {\n /** 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. */\n response: {\n type: ParameterType.OBJECT,\n },\n /** 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. */\n rt: {\n type: ParameterType.INT,\n },\n /** 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. */\n question_order: {\n type: ParameterType.INT,\n array: true,\n },\n },\n};\n\ntype Info = typeof info;\n\n/**\n * **survey-multi-choice**\n *\n * The survey-multi-choice plugin displays a set of questions with multiple choice response fields. The participant selects a single answer.\n *\n * @author Shane Martin\n * @see {@link https://www.jspsych.org/latest/plugins/survey-multi-choice/ survey-multi-choice plugin documentation on jspsych.org}\n */\nclass SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {\n static info = info;\n\n constructor(private jsPsych: JsPsych) {}\n\n trial(display_element: HTMLElement, trial: TrialType<Info>) {\n var plugin_id_name = \"jspsych-survey-multi-choice\";\n\n var html = \"\";\n\n // inject CSS for trial\n html += '<style id=\"jspsych-survey-multi-choice-css\">';\n html +=\n \".jspsych-survey-multi-choice-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }\" +\n \".jspsych-survey-multi-choice-text span.required {color: darkred;}\" +\n \".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-text { text-align: center;}\" +\n \".jspsych-survey-multi-choice-option { line-height: 2; }\" +\n \".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-option { display: inline-block; margin-left: 1em; margin-right: 1em; vertical-align: top;}\" +\n \"label.jspsych-survey-multi-choice-text input[type='radio'] {margin-right: 1em;}\";\n html += \"</style>\";\n\n // show preamble text\n if (trial.preamble !== null) {\n html +=\n '<div id=\"jspsych-survey-multi-choice-preamble\" class=\"jspsych-survey-multi-choice-preamble\">' +\n trial.preamble +\n \"</div>\";\n }\n\n // form element\n if (trial.autocomplete) {\n html += '<form id=\"jspsych-survey-multi-choice-form\">';\n } else {\n html += '<form id=\"jspsych-survey-multi-choice-form\" autocomplete=\"off\">';\n }\n // generate question order. this is randomized here as opposed to randomizing the order of trial.questions\n // so that the data are always associated with the same question regardless of order\n var question_order = [];\n for (var i = 0; i < trial.questions.length; i++) {\n question_order.push(i);\n }\n if (trial.randomize_question_order) {\n question_order = this.jsPsych.randomization.shuffle(question_order);\n }\n\n // add multiple-choice questions\n for (var i = 0; i < trial.questions.length; i++) {\n // get question based on question_order\n var question = trial.questions[question_order[i]];\n var question_id = question_order[i];\n\n // create question container\n var question_classes = [\"jspsych-survey-multi-choice-question\"];\n if (question.horizontal) {\n question_classes.push(\"jspsych-survey-multi-choice-horizontal\");\n }\n\n html +=\n '<div id=\"jspsych-survey-multi-choice-' +\n question_id +\n '\" class=\"' +\n question_classes.join(\" \") +\n '\" data-name=\"' +\n question.name +\n '\">';\n\n // add question text\n html += '<p class=\"jspsych-survey-multi-choice-text survey-multi-choice\">' + question.prompt;\n if (question.required) {\n html += \"<span class='required'>*</span>\";\n }\n html += \"</p>\";\n\n // create option radio buttons\n for (var j = 0; j < question.options.length; j++) {\n // add label and question text\n var option_id_name = \"jspsych-survey-multi-choice-option-\" + question_id + \"-\" + j;\n var input_name = \"jspsych-survey-multi-choice-response-\" + question_id;\n var input_id = \"jspsych-survey-multi-choice-response-\" + question_id + \"-\" + j;\n\n var required_attr = question.required ? \"required\" : \"\";\n\n // add radio button container\n html += '<div id=\"' + option_id_name + '\" class=\"jspsych-survey-multi-choice-option\">';\n html += '<label class=\"jspsych-survey-multi-choice-text\" for=\"' + input_id + '\">';\n html +=\n '<input type=\"radio\" name=\"' +\n input_name +\n '\" id=\"' +\n input_id +\n '\" value=\"' +\n question.options[j] +\n '\" ' +\n required_attr +\n \"></input>\";\n html += question.options[j] + \"</label>\";\n html += \"</div>\";\n }\n\n html += \"</div>\";\n }\n\n // add submit button\n html +=\n '<input type=\"submit\" id=\"' +\n plugin_id_name +\n '-next\" class=\"' +\n plugin_id_name +\n ' jspsych-btn\"' +\n (trial.button_label ? ' value=\"' + trial.button_label + '\"' : \"\") +\n \"></input>\";\n html += \"</form>\";\n\n // render\n display_element.innerHTML = html;\n\n document.querySelector(\"form\").addEventListener(\"submit\", (event) => {\n event.preventDefault();\n // measure response time\n var endTime = performance.now();\n var response_time = Math.round(endTime - startTime);\n\n // create object to hold responses\n var question_data = {};\n for (var i = 0; i < trial.questions.length; i++) {\n var match = display_element.querySelector(\"#jspsych-survey-multi-choice-\" + i);\n var id = \"Q\" + i;\n var val: String;\n if (match.querySelector(\"input[type=radio]:checked\") !== null) {\n val = match.querySelector<HTMLInputElement>(\"input[type=radio]:checked\").value;\n } else {\n val = \"\";\n }\n var obje = {};\n var name = id;\n if (match.attributes[\"data-name\"].value !== \"\") {\n name = match.attributes[\"data-name\"].value;\n }\n obje[name] = val;\n Object.assign(question_data, obje);\n }\n // save data\n var trial_data = {\n rt: response_time,\n response: question_data,\n question_order: question_order,\n };\n\n // next trial\n this.jsPsych.finishTrial(trial_data);\n });\n\n var startTime = performance.now();\n }\n\n simulate(\n trial: TrialType<Info>,\n simulation_mode,\n simulation_options: any,\n load_callback: () => void\n ) {\n if (simulation_mode == \"data-only\") {\n load_callback();\n this.simulate_data_only(trial, simulation_options);\n }\n if (simulation_mode == \"visual\") {\n this.simulate_visual(trial, simulation_options, load_callback);\n }\n }\n\n private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n const question_data = {};\n let rt = 1000;\n\n for (const q of trial.questions) {\n const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;\n question_data[name] = this.jsPsych.randomization.sampleWithoutReplacement(q.options, 1)[0];\n rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);\n }\n\n const default_data = {\n response: question_data,\n rt: rt,\n question_order: trial.randomize_question_order\n ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])\n : [...Array(trial.questions.length).keys()],\n };\n\n const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n return data;\n }\n\n private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n this.jsPsych.finishTrial(data);\n }\n\n private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n const display_element = this.jsPsych.getDisplayElement();\n\n this.trial(display_element, trial);\n load_callback();\n\n const answers = Object.entries(data.response);\n for (let i = 0; i < answers.length; i++) {\n this.jsPsych.pluginAPI.clickTarget(\n display_element.querySelector(\n `#jspsych-survey-multi-choice-response-${i}-${trial.questions[i].options.indexOf(\n answers[i][1]\n )}`\n ),\n ((data.rt - 1000) / answers.length) * (i + 1)\n );\n }\n\n this.jsPsych.pluginAPI.clickTarget(\n display_element.querySelector(\"#jspsych-survey-multi-choice-next\"),\n data.rt\n );\n }\n}\n\nexport default SurveyMultiChoicePlugin;\n"],"names":["ParameterType","i"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n \"name\": \"@jspsych/plugin-survey-multi-choice\",\n \"version\": \"2.0.2\",\n \"description\": \"a jspsych plugin for multiple choice survey questions\",\n \"type\": \"module\",\n \"main\": \"dist/index.cjs\",\n \"exports\": {\n \"import\": \"./dist/index.js\",\n \"require\": \"./dist/index.cjs\"\n },\n \"typings\": \"dist/index.d.ts\",\n \"unpkg\": \"dist/index.browser.min.js\",\n \"files\": [\n \"src\",\n \"dist\"\n ],\n \"source\": \"src/index.ts\",\n \"scripts\": {\n \"test\": \"jest\",\n \"test:watch\": \"npm test -- --watch\",\n \"tsc\": \"tsc\",\n \"build\": \"rollup --config\",\n \"build:watch\": \"npm run build -- --watch\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n \"directory\": \"packages/plugin-survey-multi-choice\"\n },\n \"author\": \"Shane Martin\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n },\n \"homepage\": \"https://www.jspsych.org/latest/plugins/survey-multi-choice\",\n \"peerDependencies\": {\n \"jspsych\": \">=7.1.0\"\n },\n \"devDependencies\": {\n \"@jspsych/config\": \"^3.1.1\",\n \"@jspsych/test-utils\": \"^1.2.0\"\n }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n name: \"survey-multi-choice\",\n version: version,\n parameters: {\n /**\n * An array of objects, each object represents a question that appears on the screen. Each object contains a prompt,\n * options, required, and horizontal parameter that will be applied to the question. See examples below for further\n * clarification.`prompt`: Type string, default value is *undefined*. The string is prompt/question that will be\n * associated with a group of options (radio buttons). All questions will get presented on the same page (trial).\n * `options`: Type array, defualt value is *undefined*. An array of strings. The array contains a set of options to\n * display for an individual question.`required`: Type boolean, default value is null. The boolean value indicates\n * if a question is required('true') or not ('false'), using the HTML5 `required` attribute. If this parameter is\n * undefined, the question will be optional. `horizontal`:Type boolean, default value is false. If true, then the\n * question is centered and the options are displayed horizontally. `name`: Name of the question. Used for storing\n * data. If left undefined then default names (`Q0`, `Q1`, `...`) will be used for the questions.\n */\n questions: {\n type: ParameterType.COMPLEX,\n array: true,\n nested: {\n /** Question prompt. */\n prompt: {\n type: ParameterType.HTML_STRING,\n default: undefined,\n },\n /** Array of multiple choice options for this question. */\n options: {\n type: ParameterType.STRING,\n array: true,\n default: undefined,\n },\n /** Whether or not a response to this question must be given in order to continue. */\n required: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** If true, then the question will be centered and options will be displayed horizontally. */\n horizontal: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */\n name: {\n type: ParameterType.STRING,\n default: \"\",\n },\n },\n },\n /**\n * If true, the display order of `questions` is randomly determined at the start of the trial. In the data object,\n * `Q0` will still refer to the first question in the array, regardless of where it was presented visually.\n */\n randomize_question_order: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** HTML formatted string to display at the top of the page above all the questions. */\n preamble: {\n type: ParameterType.HTML_STRING,\n default: null,\n },\n /** Label of the button. */\n button_label: {\n type: ParameterType.STRING,\n default: \"Continue\",\n },\n /**\n * This determines whether or not all of the input elements on the page should allow autocomplete. Setting\n * this to true will enable autocomplete or auto-fill for the form.\n */\n autocomplete: {\n type: ParameterType.BOOL,\n default: false,\n },\n },\n data: {\n /** 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. */\n response: {\n type: ParameterType.OBJECT,\n },\n /** 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. */\n rt: {\n type: ParameterType.INT,\n },\n /** 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. */\n question_order: {\n type: ParameterType.INT,\n array: true,\n },\n },\n};\n\ntype Info = typeof info;\n\nconst plugin_id_name = \"jspsych-survey-multi-choice\";\n\n/**\n * **survey-multi-choice**\n *\n * The survey-multi-choice plugin displays a set of questions with multiple choice response fields. The participant selects a single answer.\n *\n * @author Shane Martin\n * @see {@link https://www.jspsych.org/latest/plugins/survey-multi-choice/ survey-multi-choice plugin documentation on jspsych.org}\n */\nclass SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {\n static info = info;\n\n constructor(private jsPsych: JsPsych) { }\n\n trial(display_element: HTMLElement, trial: TrialType<Info>) {\n\n const trial_form_id = `${plugin_id_name}_form`;\n\n var html = \"\";\n\n // inject CSS for trial\n html += `\n <style id=\"${plugin_id_name}-css\">\n .${plugin_id_name}-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }\n .${plugin_id_name}-text span.required {color: darkred;}\n .${plugin_id_name}-horizontal .${plugin_id_name}-text { text-align: center;}\n .${plugin_id_name}-option { line-height: 2; }\n .${plugin_id_name}-horizontal .${plugin_id_name}-option { display: inline-block; margin-left: 1em; margin-right: 1em; vertical-align: top;}\n label.${plugin_id_name}-text input[type='radio'] {margin-right: 1em;}\n </style>`;\n\n // show preamble text\n if (trial.preamble !== null) {\n html += `<div id=\"${plugin_id_name}-preamble\" class=\"${plugin_id_name}-preamble\">${trial.preamble}</div>`;\n }\n\n // form element\n if (trial.autocomplete) {\n html += `<form id=\"${trial_form_id}\">`;\n } else {\n html += `<form id=\"${trial_form_id}\" autocomplete=\"off\">`;\n }\n\n // generate question order. this is randomized here as opposed to randomizing the order of trial.questions\n // so that the data are always associated with the same question regardless of order\n var question_order = [];\n for (var i = 0; i < trial.questions.length; i++) {\n question_order.push(i);\n }\n if (trial.randomize_question_order) {\n question_order = this.jsPsych.randomization.shuffle(question_order);\n }\n\n // add multiple-choice questions\n for (var i = 0; i < trial.questions.length; i++) {\n // get question based on question_order\n var question = trial.questions[question_order[i]];\n var question_id = question_order[i];\n\n // create question container\n var question_classes = [`${plugin_id_name}-question`];\n if (question.horizontal) {\n question_classes.push(`${plugin_id_name}-horizontal`);\n }\n\n html += `<div id=\"${plugin_id_name}-${question_id}\" class=\"${question_classes.join(\" \")}\" data-name=\"${question.name}\">`;\n\n // add question text\n html += `<p class=\"${plugin_id_name}-text survey-multi-choice\">${question.prompt}`;\n if (question.required) {\n html += \"<span class='required'>*</span>\";\n }\n html += \"</p>\";\n\n // create option radio buttons\n for (var j = 0; j < question.options.length; j++) {\n // add label and question text\n var option_id_name = `${plugin_id_name}-option-${question_id}-${j}`;\n var input_name = `${plugin_id_name}-response-${question_id}`;\n var input_id = `${plugin_id_name}-response-${question_id}-${j}`;\n\n var required_attr = question.required ? \"required\" : \"\";\n\n // add radio button container\n html += `\n <div id=\"${option_id_name}\" class=\"${plugin_id_name}-option\">\n <label class=\"${plugin_id_name}-text\" for=\"${input_id}\">\n <input type=\"radio\" name=\"${input_name}\" id=\"${input_id}\" value=\"${question.options[j]}\" ${required_attr} />\n ${question.options[j]}\n </label>\n </div>`;\n }\n\n html += \"</div>\";\n }\n\n // add submit button\n html += `<input type=\"submit\" id=\"${plugin_id_name}-next\" class=\"${plugin_id_name} jspsych-btn\"${trial.button_label ? ' value=\"' + trial.button_label + '\"' : \"\"} />`;\n html += \"</form>\";\n\n // render\n display_element.innerHTML = html;\n\n const trial_form = display_element.querySelector<HTMLFormElement>(`#${trial_form_id}`);\n\n trial_form.addEventListener(\"submit\", (event) => {\n event.preventDefault();\n // measure response time\n var endTime = performance.now();\n var response_time = Math.round(endTime - startTime);\n\n // create object to hold responses\n var question_data = {};\n for (var i = 0; i < trial.questions.length; i++) {\n var match = display_element.querySelector(`#${plugin_id_name}-${i}`);\n var id = \"Q\" + i;\n var val: String;\n if (match.querySelector(\"input[type=radio]:checked\") !== null) {\n val = match.querySelector<HTMLInputElement>(\"input[type=radio]:checked\").value;\n } else {\n val = \"\";\n }\n var obje = {};\n var name = id;\n if (match.attributes[\"data-name\"].value !== \"\") {\n name = match.attributes[\"data-name\"].value;\n }\n obje[name] = val;\n Object.assign(question_data, obje);\n }\n // save data\n var trial_data = {\n rt: response_time,\n response: question_data,\n question_order: question_order,\n };\n\n // next trial\n this.jsPsych.finishTrial(trial_data);\n });\n\n var startTime = performance.now();\n }\n\n simulate(\n trial: TrialType<Info>,\n simulation_mode,\n simulation_options: any,\n load_callback: () => void\n ) {\n if (simulation_mode == \"data-only\") {\n load_callback();\n this.simulate_data_only(trial, simulation_options);\n }\n if (simulation_mode == \"visual\") {\n this.simulate_visual(trial, simulation_options, load_callback);\n }\n }\n\n private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n const question_data = {};\n let rt = 1000;\n\n for (const q of trial.questions) {\n const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;\n question_data[name] = this.jsPsych.randomization.sampleWithoutReplacement(q.options, 1)[0];\n rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);\n }\n\n const default_data = {\n response: question_data,\n rt: rt,\n question_order: trial.randomize_question_order\n ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])\n : [...Array(trial.questions.length).keys()],\n };\n\n const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n return data;\n }\n\n private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n this.jsPsych.finishTrial(data);\n }\n\n private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n const display_element = this.jsPsych.getDisplayElement();\n\n this.trial(display_element, trial);\n load_callback();\n\n const answers = Object.entries(data.response);\n for (let i = 0; i < answers.length; i++) {\n this.jsPsych.pluginAPI.clickTarget(\n display_element.querySelector(\n `#${plugin_id_name}-response-${i}-${trial.questions[i].options.indexOf(\n answers[i][1]\n )}`\n ),\n ((data.rt - 1000) / answers.length) * (i + 1)\n );\n }\n\n this.jsPsych.pluginAPI.clickTarget(\n display_element.querySelector(`#${plugin_id_name}-next`),\n data.rt\n );\n }\n}\n\nexport default SurveyMultiChoicePlugin;\n"],"names":["ParameterType","i"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ParameterType } from 'jspsych';
|
|
2
2
|
|
|
3
|
-
var version = "2.0.
|
|
3
|
+
var version = "2.0.2";
|
|
4
4
|
|
|
5
5
|
const info = {
|
|
6
6
|
name: "survey-multi-choice",
|
|
@@ -93,6 +93,7 @@ const info = {
|
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
95
|
};
|
|
96
|
+
const plugin_id_name = "jspsych-survey-multi-choice";
|
|
96
97
|
class SurveyMultiChoicePlugin {
|
|
97
98
|
constructor(jsPsych) {
|
|
98
99
|
this.jsPsych = jsPsych;
|
|
@@ -101,18 +102,24 @@ class SurveyMultiChoicePlugin {
|
|
|
101
102
|
this.info = info;
|
|
102
103
|
}
|
|
103
104
|
trial(display_element, trial) {
|
|
104
|
-
|
|
105
|
+
const trial_form_id = `${plugin_id_name}_form`;
|
|
105
106
|
var html = "";
|
|
106
|
-
html +=
|
|
107
|
-
|
|
108
|
-
|
|
107
|
+
html += `
|
|
108
|
+
<style id="${plugin_id_name}-css">
|
|
109
|
+
.${plugin_id_name}-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }
|
|
110
|
+
.${plugin_id_name}-text span.required {color: darkred;}
|
|
111
|
+
.${plugin_id_name}-horizontal .${plugin_id_name}-text { text-align: center;}
|
|
112
|
+
.${plugin_id_name}-option { line-height: 2; }
|
|
113
|
+
.${plugin_id_name}-horizontal .${plugin_id_name}-option { display: inline-block; margin-left: 1em; margin-right: 1em; vertical-align: top;}
|
|
114
|
+
label.${plugin_id_name}-text input[type='radio'] {margin-right: 1em;}
|
|
115
|
+
</style>`;
|
|
109
116
|
if (trial.preamble !== null) {
|
|
110
|
-
html +=
|
|
117
|
+
html += `<div id="${plugin_id_name}-preamble" class="${plugin_id_name}-preamble">${trial.preamble}</div>`;
|
|
111
118
|
}
|
|
112
119
|
if (trial.autocomplete) {
|
|
113
|
-
html +=
|
|
120
|
+
html += `<form id="${trial_form_id}">`;
|
|
114
121
|
} else {
|
|
115
|
-
html +=
|
|
122
|
+
html += `<form id="${trial_form_id}" autocomplete="off">`;
|
|
116
123
|
}
|
|
117
124
|
var question_order = [];
|
|
118
125
|
for (var i = 0; i < trial.questions.length; i++) {
|
|
@@ -124,39 +131,42 @@ class SurveyMultiChoicePlugin {
|
|
|
124
131
|
for (var i = 0; i < trial.questions.length; i++) {
|
|
125
132
|
var question = trial.questions[question_order[i]];
|
|
126
133
|
var question_id = question_order[i];
|
|
127
|
-
var question_classes = [
|
|
134
|
+
var question_classes = [`${plugin_id_name}-question`];
|
|
128
135
|
if (question.horizontal) {
|
|
129
|
-
question_classes.push(
|
|
136
|
+
question_classes.push(`${plugin_id_name}-horizontal`);
|
|
130
137
|
}
|
|
131
|
-
html +=
|
|
132
|
-
html +=
|
|
138
|
+
html += `<div id="${plugin_id_name}-${question_id}" class="${question_classes.join(" ")}" data-name="${question.name}">`;
|
|
139
|
+
html += `<p class="${plugin_id_name}-text survey-multi-choice">${question.prompt}`;
|
|
133
140
|
if (question.required) {
|
|
134
141
|
html += "<span class='required'>*</span>";
|
|
135
142
|
}
|
|
136
143
|
html += "</p>";
|
|
137
144
|
for (var j = 0; j < question.options.length; j++) {
|
|
138
|
-
var option_id_name =
|
|
139
|
-
var input_name =
|
|
140
|
-
var input_id =
|
|
145
|
+
var option_id_name = `${plugin_id_name}-option-${question_id}-${j}`;
|
|
146
|
+
var input_name = `${plugin_id_name}-response-${question_id}`;
|
|
147
|
+
var input_id = `${plugin_id_name}-response-${question_id}-${j}`;
|
|
141
148
|
var required_attr = question.required ? "required" : "";
|
|
142
|
-
html +=
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
149
|
+
html += `
|
|
150
|
+
<div id="${option_id_name}" class="${plugin_id_name}-option">
|
|
151
|
+
<label class="${plugin_id_name}-text" for="${input_id}">
|
|
152
|
+
<input type="radio" name="${input_name}" id="${input_id}" value="${question.options[j]}" ${required_attr} />
|
|
153
|
+
${question.options[j]}
|
|
154
|
+
</label>
|
|
155
|
+
</div>`;
|
|
147
156
|
}
|
|
148
157
|
html += "</div>";
|
|
149
158
|
}
|
|
150
|
-
html +=
|
|
159
|
+
html += `<input type="submit" id="${plugin_id_name}-next" class="${plugin_id_name} jspsych-btn"${trial.button_label ? ' value="' + trial.button_label + '"' : ""} />`;
|
|
151
160
|
html += "</form>";
|
|
152
161
|
display_element.innerHTML = html;
|
|
153
|
-
|
|
162
|
+
const trial_form = display_element.querySelector(`#${trial_form_id}`);
|
|
163
|
+
trial_form.addEventListener("submit", (event) => {
|
|
154
164
|
event.preventDefault();
|
|
155
165
|
var endTime = performance.now();
|
|
156
166
|
var response_time = Math.round(endTime - startTime);
|
|
157
167
|
var question_data = {};
|
|
158
168
|
for (var i2 = 0; i2 < trial.questions.length; i2++) {
|
|
159
|
-
var match = display_element.querySelector(
|
|
169
|
+
var match = display_element.querySelector(`#${plugin_id_name}-${i2}`);
|
|
160
170
|
var id = "Q" + i2;
|
|
161
171
|
var val;
|
|
162
172
|
if (match.querySelector("input[type=radio]:checked") !== null) {
|
|
@@ -220,7 +230,7 @@ class SurveyMultiChoicePlugin {
|
|
|
220
230
|
for (let i = 0; i < answers.length; i++) {
|
|
221
231
|
this.jsPsych.pluginAPI.clickTarget(
|
|
222
232
|
display_element.querySelector(
|
|
223
|
-
|
|
233
|
+
`#${plugin_id_name}-response-${i}-${trial.questions[i].options.indexOf(
|
|
224
234
|
answers[i][1]
|
|
225
235
|
)}`
|
|
226
236
|
),
|
|
@@ -228,7 +238,7 @@ class SurveyMultiChoicePlugin {
|
|
|
228
238
|
);
|
|
229
239
|
}
|
|
230
240
|
this.jsPsych.pluginAPI.clickTarget(
|
|
231
|
-
display_element.querySelector(
|
|
241
|
+
display_element.querySelector(`#${plugin_id_name}-next`),
|
|
232
242
|
data.rt
|
|
233
243
|
);
|
|
234
244
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n \"name\": \"@jspsych/plugin-survey-multi-choice\",\n \"version\": \"2.0.1\",\n \"description\": \"a jspsych plugin for multiple choice survey questions\",\n \"type\": \"module\",\n \"main\": \"dist/index.cjs\",\n \"exports\": {\n \"import\": \"./dist/index.js\",\n \"require\": \"./dist/index.cjs\"\n },\n \"typings\": \"dist/index.d.ts\",\n \"unpkg\": \"dist/index.browser.min.js\",\n \"files\": [\n \"src\",\n \"dist\"\n ],\n \"source\": \"src/index.ts\",\n \"scripts\": {\n \"test\": \"jest\",\n \"test:watch\": \"npm test -- --watch\",\n \"tsc\": \"tsc\",\n \"build\": \"rollup --config\",\n \"build:watch\": \"npm run build -- --watch\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n \"directory\": \"packages/plugin-survey-multi-choice\"\n },\n \"author\": \"Shane Martin\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n },\n \"homepage\": \"https://www.jspsych.org/latest/plugins/survey-multi-choice\",\n \"peerDependencies\": {\n \"jspsych\": \">=7.1.0\"\n },\n \"devDependencies\": {\n \"@jspsych/config\": \"^3.1.1\",\n \"@jspsych/test-utils\": \"^1.2.0\"\n }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n name: \"survey-multi-choice\",\n version: version,\n parameters: {\n /**\n * An array of objects, each object represents a question that appears on the screen. Each object contains a prompt,\n * options, required, and horizontal parameter that will be applied to the question. See examples below for further\n * clarification.`prompt`: Type string, default value is *undefined*. The string is prompt/question that will be\n * associated with a group of options (radio buttons). All questions will get presented on the same page (trial).\n * `options`: Type array, defualt value is *undefined*. An array of strings. The array contains a set of options to\n * display for an individual question.`required`: Type boolean, default value is null. The boolean value indicates\n * if a question is required('true') or not ('false'), using the HTML5 `required` attribute. If this parameter is\n * undefined, the question will be optional. `horizontal`:Type boolean, default value is false. If true, then the\n * question is centered and the options are displayed horizontally. `name`: Name of the question. Used for storing\n * data. If left undefined then default names (`Q0`, `Q1`, `...`) will be used for the questions.\n */\n questions: {\n type: ParameterType.COMPLEX,\n array: true,\n nested: {\n /** Question prompt. */\n prompt: {\n type: ParameterType.HTML_STRING,\n default: undefined,\n },\n /** Array of multiple choice options for this question. */\n options: {\n type: ParameterType.STRING,\n array: true,\n default: undefined,\n },\n /** Whether or not a response to this question must be given in order to continue. */\n required: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** If true, then the question will be centered and options will be displayed horizontally. */\n horizontal: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */\n name: {\n type: ParameterType.STRING,\n default: \"\",\n },\n },\n },\n /**\n * If true, the display order of `questions` is randomly determined at the start of the trial. In the data object,\n * `Q0` will still refer to the first question in the array, regardless of where it was presented visually.\n */\n randomize_question_order: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** HTML formatted string to display at the top of the page above all the questions. */\n preamble: {\n type: ParameterType.HTML_STRING,\n default: null,\n },\n /** Label of the button. */\n button_label: {\n type: ParameterType.STRING,\n default: \"Continue\",\n },\n /**\n * This determines whether or not all of the input elements on the page should allow autocomplete. Setting\n * this to true will enable autocomplete or auto-fill for the form.\n */\n autocomplete: {\n type: ParameterType.BOOL,\n default: false,\n },\n },\n data: {\n /** 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. */\n response: {\n type: ParameterType.OBJECT,\n },\n /** 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. */\n rt: {\n type: ParameterType.INT,\n },\n /** 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. */\n question_order: {\n type: ParameterType.INT,\n array: true,\n },\n },\n};\n\ntype Info = typeof info;\n\n/**\n * **survey-multi-choice**\n *\n * The survey-multi-choice plugin displays a set of questions with multiple choice response fields. The participant selects a single answer.\n *\n * @author Shane Martin\n * @see {@link https://www.jspsych.org/latest/plugins/survey-multi-choice/ survey-multi-choice plugin documentation on jspsych.org}\n */\nclass SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {\n static info = info;\n\n constructor(private jsPsych: JsPsych) {}\n\n trial(display_element: HTMLElement, trial: TrialType<Info>) {\n var plugin_id_name = \"jspsych-survey-multi-choice\";\n\n var html = \"\";\n\n // inject CSS for trial\n html += '<style id=\"jspsych-survey-multi-choice-css\">';\n html +=\n \".jspsych-survey-multi-choice-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }\" +\n \".jspsych-survey-multi-choice-text span.required {color: darkred;}\" +\n \".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-text { text-align: center;}\" +\n \".jspsych-survey-multi-choice-option { line-height: 2; }\" +\n \".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-option { display: inline-block; margin-left: 1em; margin-right: 1em; vertical-align: top;}\" +\n \"label.jspsych-survey-multi-choice-text input[type='radio'] {margin-right: 1em;}\";\n html += \"</style>\";\n\n // show preamble text\n if (trial.preamble !== null) {\n html +=\n '<div id=\"jspsych-survey-multi-choice-preamble\" class=\"jspsych-survey-multi-choice-preamble\">' +\n trial.preamble +\n \"</div>\";\n }\n\n // form element\n if (trial.autocomplete) {\n html += '<form id=\"jspsych-survey-multi-choice-form\">';\n } else {\n html += '<form id=\"jspsych-survey-multi-choice-form\" autocomplete=\"off\">';\n }\n // generate question order. this is randomized here as opposed to randomizing the order of trial.questions\n // so that the data are always associated with the same question regardless of order\n var question_order = [];\n for (var i = 0; i < trial.questions.length; i++) {\n question_order.push(i);\n }\n if (trial.randomize_question_order) {\n question_order = this.jsPsych.randomization.shuffle(question_order);\n }\n\n // add multiple-choice questions\n for (var i = 0; i < trial.questions.length; i++) {\n // get question based on question_order\n var question = trial.questions[question_order[i]];\n var question_id = question_order[i];\n\n // create question container\n var question_classes = [\"jspsych-survey-multi-choice-question\"];\n if (question.horizontal) {\n question_classes.push(\"jspsych-survey-multi-choice-horizontal\");\n }\n\n html +=\n '<div id=\"jspsych-survey-multi-choice-' +\n question_id +\n '\" class=\"' +\n question_classes.join(\" \") +\n '\" data-name=\"' +\n question.name +\n '\">';\n\n // add question text\n html += '<p class=\"jspsych-survey-multi-choice-text survey-multi-choice\">' + question.prompt;\n if (question.required) {\n html += \"<span class='required'>*</span>\";\n }\n html += \"</p>\";\n\n // create option radio buttons\n for (var j = 0; j < question.options.length; j++) {\n // add label and question text\n var option_id_name = \"jspsych-survey-multi-choice-option-\" + question_id + \"-\" + j;\n var input_name = \"jspsych-survey-multi-choice-response-\" + question_id;\n var input_id = \"jspsych-survey-multi-choice-response-\" + question_id + \"-\" + j;\n\n var required_attr = question.required ? \"required\" : \"\";\n\n // add radio button container\n html += '<div id=\"' + option_id_name + '\" class=\"jspsych-survey-multi-choice-option\">';\n html += '<label class=\"jspsych-survey-multi-choice-text\" for=\"' + input_id + '\">';\n html +=\n '<input type=\"radio\" name=\"' +\n input_name +\n '\" id=\"' +\n input_id +\n '\" value=\"' +\n question.options[j] +\n '\" ' +\n required_attr +\n \"></input>\";\n html += question.options[j] + \"</label>\";\n html += \"</div>\";\n }\n\n html += \"</div>\";\n }\n\n // add submit button\n html +=\n '<input type=\"submit\" id=\"' +\n plugin_id_name +\n '-next\" class=\"' +\n plugin_id_name +\n ' jspsych-btn\"' +\n (trial.button_label ? ' value=\"' + trial.button_label + '\"' : \"\") +\n \"></input>\";\n html += \"</form>\";\n\n // render\n display_element.innerHTML = html;\n\n document.querySelector(\"form\").addEventListener(\"submit\", (event) => {\n event.preventDefault();\n // measure response time\n var endTime = performance.now();\n var response_time = Math.round(endTime - startTime);\n\n // create object to hold responses\n var question_data = {};\n for (var i = 0; i < trial.questions.length; i++) {\n var match = display_element.querySelector(\"#jspsych-survey-multi-choice-\" + i);\n var id = \"Q\" + i;\n var val: String;\n if (match.querySelector(\"input[type=radio]:checked\") !== null) {\n val = match.querySelector<HTMLInputElement>(\"input[type=radio]:checked\").value;\n } else {\n val = \"\";\n }\n var obje = {};\n var name = id;\n if (match.attributes[\"data-name\"].value !== \"\") {\n name = match.attributes[\"data-name\"].value;\n }\n obje[name] = val;\n Object.assign(question_data, obje);\n }\n // save data\n var trial_data = {\n rt: response_time,\n response: question_data,\n question_order: question_order,\n };\n\n // next trial\n this.jsPsych.finishTrial(trial_data);\n });\n\n var startTime = performance.now();\n }\n\n simulate(\n trial: TrialType<Info>,\n simulation_mode,\n simulation_options: any,\n load_callback: () => void\n ) {\n if (simulation_mode == \"data-only\") {\n load_callback();\n this.simulate_data_only(trial, simulation_options);\n }\n if (simulation_mode == \"visual\") {\n this.simulate_visual(trial, simulation_options, load_callback);\n }\n }\n\n private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n const question_data = {};\n let rt = 1000;\n\n for (const q of trial.questions) {\n const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;\n question_data[name] = this.jsPsych.randomization.sampleWithoutReplacement(q.options, 1)[0];\n rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);\n }\n\n const default_data = {\n response: question_data,\n rt: rt,\n question_order: trial.randomize_question_order\n ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])\n : [...Array(trial.questions.length).keys()],\n };\n\n const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n return data;\n }\n\n private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n this.jsPsych.finishTrial(data);\n }\n\n private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n const display_element = this.jsPsych.getDisplayElement();\n\n this.trial(display_element, trial);\n load_callback();\n\n const answers = Object.entries(data.response);\n for (let i = 0; i < answers.length; i++) {\n this.jsPsych.pluginAPI.clickTarget(\n display_element.querySelector(\n `#jspsych-survey-multi-choice-response-${i}-${trial.questions[i].options.indexOf(\n answers[i][1]\n )}`\n ),\n ((data.rt - 1000) / answers.length) * (i + 1)\n );\n }\n\n this.jsPsych.pluginAPI.clickTarget(\n display_element.querySelector(\"#jspsych-survey-multi-choice-next\"),\n data.rt\n );\n }\n}\n\nexport default SurveyMultiChoicePlugin;\n"],"names":["i"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n \"name\": \"@jspsych/plugin-survey-multi-choice\",\n \"version\": \"2.0.2\",\n \"description\": \"a jspsych plugin for multiple choice survey questions\",\n \"type\": \"module\",\n \"main\": \"dist/index.cjs\",\n \"exports\": {\n \"import\": \"./dist/index.js\",\n \"require\": \"./dist/index.cjs\"\n },\n \"typings\": \"dist/index.d.ts\",\n \"unpkg\": \"dist/index.browser.min.js\",\n \"files\": [\n \"src\",\n \"dist\"\n ],\n \"source\": \"src/index.ts\",\n \"scripts\": {\n \"test\": \"jest\",\n \"test:watch\": \"npm test -- --watch\",\n \"tsc\": \"tsc\",\n \"build\": \"rollup --config\",\n \"build:watch\": \"npm run build -- --watch\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n \"directory\": \"packages/plugin-survey-multi-choice\"\n },\n \"author\": \"Shane Martin\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n },\n \"homepage\": \"https://www.jspsych.org/latest/plugins/survey-multi-choice\",\n \"peerDependencies\": {\n \"jspsych\": \">=7.1.0\"\n },\n \"devDependencies\": {\n \"@jspsych/config\": \"^3.1.1\",\n \"@jspsych/test-utils\": \"^1.2.0\"\n }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n name: \"survey-multi-choice\",\n version: version,\n parameters: {\n /**\n * An array of objects, each object represents a question that appears on the screen. Each object contains a prompt,\n * options, required, and horizontal parameter that will be applied to the question. See examples below for further\n * clarification.`prompt`: Type string, default value is *undefined*. The string is prompt/question that will be\n * associated with a group of options (radio buttons). All questions will get presented on the same page (trial).\n * `options`: Type array, defualt value is *undefined*. An array of strings. The array contains a set of options to\n * display for an individual question.`required`: Type boolean, default value is null. The boolean value indicates\n * if a question is required('true') or not ('false'), using the HTML5 `required` attribute. If this parameter is\n * undefined, the question will be optional. `horizontal`:Type boolean, default value is false. If true, then the\n * question is centered and the options are displayed horizontally. `name`: Name of the question. Used for storing\n * data. If left undefined then default names (`Q0`, `Q1`, `...`) will be used for the questions.\n */\n questions: {\n type: ParameterType.COMPLEX,\n array: true,\n nested: {\n /** Question prompt. */\n prompt: {\n type: ParameterType.HTML_STRING,\n default: undefined,\n },\n /** Array of multiple choice options for this question. */\n options: {\n type: ParameterType.STRING,\n array: true,\n default: undefined,\n },\n /** Whether or not a response to this question must be given in order to continue. */\n required: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** If true, then the question will be centered and options will be displayed horizontally. */\n horizontal: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */\n name: {\n type: ParameterType.STRING,\n default: \"\",\n },\n },\n },\n /**\n * If true, the display order of `questions` is randomly determined at the start of the trial. In the data object,\n * `Q0` will still refer to the first question in the array, regardless of where it was presented visually.\n */\n randomize_question_order: {\n type: ParameterType.BOOL,\n default: false,\n },\n /** HTML formatted string to display at the top of the page above all the questions. */\n preamble: {\n type: ParameterType.HTML_STRING,\n default: null,\n },\n /** Label of the button. */\n button_label: {\n type: ParameterType.STRING,\n default: \"Continue\",\n },\n /**\n * This determines whether or not all of the input elements on the page should allow autocomplete. Setting\n * this to true will enable autocomplete or auto-fill for the form.\n */\n autocomplete: {\n type: ParameterType.BOOL,\n default: false,\n },\n },\n data: {\n /** 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. */\n response: {\n type: ParameterType.OBJECT,\n },\n /** 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. */\n rt: {\n type: ParameterType.INT,\n },\n /** 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. */\n question_order: {\n type: ParameterType.INT,\n array: true,\n },\n },\n};\n\ntype Info = typeof info;\n\nconst plugin_id_name = \"jspsych-survey-multi-choice\";\n\n/**\n * **survey-multi-choice**\n *\n * The survey-multi-choice plugin displays a set of questions with multiple choice response fields. The participant selects a single answer.\n *\n * @author Shane Martin\n * @see {@link https://www.jspsych.org/latest/plugins/survey-multi-choice/ survey-multi-choice plugin documentation on jspsych.org}\n */\nclass SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {\n static info = info;\n\n constructor(private jsPsych: JsPsych) { }\n\n trial(display_element: HTMLElement, trial: TrialType<Info>) {\n\n const trial_form_id = `${plugin_id_name}_form`;\n\n var html = \"\";\n\n // inject CSS for trial\n html += `\n <style id=\"${plugin_id_name}-css\">\n .${plugin_id_name}-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }\n .${plugin_id_name}-text span.required {color: darkred;}\n .${plugin_id_name}-horizontal .${plugin_id_name}-text { text-align: center;}\n .${plugin_id_name}-option { line-height: 2; }\n .${plugin_id_name}-horizontal .${plugin_id_name}-option { display: inline-block; margin-left: 1em; margin-right: 1em; vertical-align: top;}\n label.${plugin_id_name}-text input[type='radio'] {margin-right: 1em;}\n </style>`;\n\n // show preamble text\n if (trial.preamble !== null) {\n html += `<div id=\"${plugin_id_name}-preamble\" class=\"${plugin_id_name}-preamble\">${trial.preamble}</div>`;\n }\n\n // form element\n if (trial.autocomplete) {\n html += `<form id=\"${trial_form_id}\">`;\n } else {\n html += `<form id=\"${trial_form_id}\" autocomplete=\"off\">`;\n }\n\n // generate question order. this is randomized here as opposed to randomizing the order of trial.questions\n // so that the data are always associated with the same question regardless of order\n var question_order = [];\n for (var i = 0; i < trial.questions.length; i++) {\n question_order.push(i);\n }\n if (trial.randomize_question_order) {\n question_order = this.jsPsych.randomization.shuffle(question_order);\n }\n\n // add multiple-choice questions\n for (var i = 0; i < trial.questions.length; i++) {\n // get question based on question_order\n var question = trial.questions[question_order[i]];\n var question_id = question_order[i];\n\n // create question container\n var question_classes = [`${plugin_id_name}-question`];\n if (question.horizontal) {\n question_classes.push(`${plugin_id_name}-horizontal`);\n }\n\n html += `<div id=\"${plugin_id_name}-${question_id}\" class=\"${question_classes.join(\" \")}\" data-name=\"${question.name}\">`;\n\n // add question text\n html += `<p class=\"${plugin_id_name}-text survey-multi-choice\">${question.prompt}`;\n if (question.required) {\n html += \"<span class='required'>*</span>\";\n }\n html += \"</p>\";\n\n // create option radio buttons\n for (var j = 0; j < question.options.length; j++) {\n // add label and question text\n var option_id_name = `${plugin_id_name}-option-${question_id}-${j}`;\n var input_name = `${plugin_id_name}-response-${question_id}`;\n var input_id = `${plugin_id_name}-response-${question_id}-${j}`;\n\n var required_attr = question.required ? \"required\" : \"\";\n\n // add radio button container\n html += `\n <div id=\"${option_id_name}\" class=\"${plugin_id_name}-option\">\n <label class=\"${plugin_id_name}-text\" for=\"${input_id}\">\n <input type=\"radio\" name=\"${input_name}\" id=\"${input_id}\" value=\"${question.options[j]}\" ${required_attr} />\n ${question.options[j]}\n </label>\n </div>`;\n }\n\n html += \"</div>\";\n }\n\n // add submit button\n html += `<input type=\"submit\" id=\"${plugin_id_name}-next\" class=\"${plugin_id_name} jspsych-btn\"${trial.button_label ? ' value=\"' + trial.button_label + '\"' : \"\"} />`;\n html += \"</form>\";\n\n // render\n display_element.innerHTML = html;\n\n const trial_form = display_element.querySelector<HTMLFormElement>(`#${trial_form_id}`);\n\n trial_form.addEventListener(\"submit\", (event) => {\n event.preventDefault();\n // measure response time\n var endTime = performance.now();\n var response_time = Math.round(endTime - startTime);\n\n // create object to hold responses\n var question_data = {};\n for (var i = 0; i < trial.questions.length; i++) {\n var match = display_element.querySelector(`#${plugin_id_name}-${i}`);\n var id = \"Q\" + i;\n var val: String;\n if (match.querySelector(\"input[type=radio]:checked\") !== null) {\n val = match.querySelector<HTMLInputElement>(\"input[type=radio]:checked\").value;\n } else {\n val = \"\";\n }\n var obje = {};\n var name = id;\n if (match.attributes[\"data-name\"].value !== \"\") {\n name = match.attributes[\"data-name\"].value;\n }\n obje[name] = val;\n Object.assign(question_data, obje);\n }\n // save data\n var trial_data = {\n rt: response_time,\n response: question_data,\n question_order: question_order,\n };\n\n // next trial\n this.jsPsych.finishTrial(trial_data);\n });\n\n var startTime = performance.now();\n }\n\n simulate(\n trial: TrialType<Info>,\n simulation_mode,\n simulation_options: any,\n load_callback: () => void\n ) {\n if (simulation_mode == \"data-only\") {\n load_callback();\n this.simulate_data_only(trial, simulation_options);\n }\n if (simulation_mode == \"visual\") {\n this.simulate_visual(trial, simulation_options, load_callback);\n }\n }\n\n private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n const question_data = {};\n let rt = 1000;\n\n for (const q of trial.questions) {\n const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;\n question_data[name] = this.jsPsych.randomization.sampleWithoutReplacement(q.options, 1)[0];\n rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);\n }\n\n const default_data = {\n response: question_data,\n rt: rt,\n question_order: trial.randomize_question_order\n ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()])\n : [...Array(trial.questions.length).keys()],\n };\n\n const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n return data;\n }\n\n private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n this.jsPsych.finishTrial(data);\n }\n\n private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n const display_element = this.jsPsych.getDisplayElement();\n\n this.trial(display_element, trial);\n load_callback();\n\n const answers = Object.entries(data.response);\n for (let i = 0; i < answers.length; i++) {\n this.jsPsych.pluginAPI.clickTarget(\n display_element.querySelector(\n `#${plugin_id_name}-response-${i}-${trial.questions[i].options.indexOf(\n answers[i][1]\n )}`\n ),\n ((data.rt - 1000) / answers.length) * (i + 1)\n );\n }\n\n this.jsPsych.pluginAPI.clickTarget(\n display_element.querySelector(`#${plugin_id_name}-next`),\n data.rt\n );\n }\n}\n\nexport default SurveyMultiChoicePlugin;\n"],"names":["i"],"mappings":"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"}
|
package/package.json
CHANGED
package/src/index.spec.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { clickTarget, simulateTimeline, startTimeline } from "@jspsych/test-utils";
|
|
2
2
|
|
|
3
|
+
import { initJsPsych } from "jspsych";
|
|
3
4
|
import surveyMultiChoice from ".";
|
|
4
5
|
|
|
5
6
|
jest.useFakeTimers();
|
|
@@ -10,6 +11,36 @@ const getInputElement = (choiceId: number, value: string) =>
|
|
|
10
11
|
) as HTMLInputElement;
|
|
11
12
|
|
|
12
13
|
describe("survey-multi-choice plugin", () => {
|
|
14
|
+
test("properly ends when has sibling form", async () => {
|
|
15
|
+
|
|
16
|
+
const container = document.createElement('div')
|
|
17
|
+
const outerForm = document.createElement('form')
|
|
18
|
+
outerForm.id = 'outer_form'
|
|
19
|
+
container.appendChild(outerForm)
|
|
20
|
+
const innerDiv = document.createElement('div')
|
|
21
|
+
innerDiv.id = 'target_id';
|
|
22
|
+
container.appendChild(innerDiv);
|
|
23
|
+
document.body.appendChild(container)
|
|
24
|
+
const jsPsychInst = initJsPsych({ display_element: innerDiv })
|
|
25
|
+
const options = ["a", "b", "c"];
|
|
26
|
+
|
|
27
|
+
const { getData, expectFinished } = await startTimeline([
|
|
28
|
+
{
|
|
29
|
+
type: surveyMultiChoice,
|
|
30
|
+
questions: [
|
|
31
|
+
{ prompt: "Q0", options },
|
|
32
|
+
{ prompt: "Q1", options },
|
|
33
|
+
]
|
|
34
|
+
},
|
|
35
|
+
], jsPsychInst);
|
|
36
|
+
|
|
37
|
+
getInputElement(0, "a").checked = true;
|
|
38
|
+
await clickTarget(document.querySelector("#jspsych-survey-multi-choice-next"));
|
|
39
|
+
await expectFinished();
|
|
40
|
+
|
|
41
|
+
})
|
|
42
|
+
|
|
43
|
+
|
|
13
44
|
test("data are logged with the right question when randomize order is true", async () => {
|
|
14
45
|
var scale = ["a", "b", "c", "d", "e"];
|
|
15
46
|
const { getData, expectFinished } = await startTimeline([
|
|
@@ -45,7 +76,7 @@ describe("survey-multi-choice plugin", () => {
|
|
|
45
76
|
});
|
|
46
77
|
});
|
|
47
78
|
|
|
48
|
-
describe("survey-
|
|
79
|
+
describe("survey-multi-choice plugin simulation", () => {
|
|
49
80
|
test("data-only mode works", async () => {
|
|
50
81
|
const scale = ["a", "b", "c", "d", "e"];
|
|
51
82
|
const { getData, expectFinished } = await simulateTimeline([
|
package/src/index.ts
CHANGED
|
@@ -96,6 +96,8 @@ const info = <const>{
|
|
|
96
96
|
|
|
97
97
|
type Info = typeof info;
|
|
98
98
|
|
|
99
|
+
const plugin_id_name = "jspsych-survey-multi-choice";
|
|
100
|
+
|
|
99
101
|
/**
|
|
100
102
|
* **survey-multi-choice**
|
|
101
103
|
*
|
|
@@ -107,38 +109,37 @@ type Info = typeof info;
|
|
|
107
109
|
class SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {
|
|
108
110
|
static info = info;
|
|
109
111
|
|
|
110
|
-
constructor(private jsPsych: JsPsych) {}
|
|
112
|
+
constructor(private jsPsych: JsPsych) { }
|
|
111
113
|
|
|
112
114
|
trial(display_element: HTMLElement, trial: TrialType<Info>) {
|
|
113
|
-
|
|
115
|
+
|
|
116
|
+
const trial_form_id = `${plugin_id_name}_form`;
|
|
114
117
|
|
|
115
118
|
var html = "";
|
|
116
119
|
|
|
117
120
|
// inject CSS for trial
|
|
118
|
-
html +=
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
121
|
+
html += `
|
|
122
|
+
<style id="${plugin_id_name}-css">
|
|
123
|
+
.${plugin_id_name}-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }
|
|
124
|
+
.${plugin_id_name}-text span.required {color: darkred;}
|
|
125
|
+
.${plugin_id_name}-horizontal .${plugin_id_name}-text { text-align: center;}
|
|
126
|
+
.${plugin_id_name}-option { line-height: 2; }
|
|
127
|
+
.${plugin_id_name}-horizontal .${plugin_id_name}-option { display: inline-block; margin-left: 1em; margin-right: 1em; vertical-align: top;}
|
|
128
|
+
label.${plugin_id_name}-text input[type='radio'] {margin-right: 1em;}
|
|
129
|
+
</style>`;
|
|
127
130
|
|
|
128
131
|
// show preamble text
|
|
129
132
|
if (trial.preamble !== null) {
|
|
130
|
-
html +=
|
|
131
|
-
'<div id="jspsych-survey-multi-choice-preamble" class="jspsych-survey-multi-choice-preamble">' +
|
|
132
|
-
trial.preamble +
|
|
133
|
-
"</div>";
|
|
133
|
+
html += `<div id="${plugin_id_name}-preamble" class="${plugin_id_name}-preamble">${trial.preamble}</div>`;
|
|
134
134
|
}
|
|
135
135
|
|
|
136
136
|
// form element
|
|
137
137
|
if (trial.autocomplete) {
|
|
138
|
-
html +=
|
|
138
|
+
html += `<form id="${trial_form_id}">`;
|
|
139
139
|
} else {
|
|
140
|
-
html +=
|
|
140
|
+
html += `<form id="${trial_form_id}" autocomplete="off">`;
|
|
141
141
|
}
|
|
142
|
+
|
|
142
143
|
// generate question order. this is randomized here as opposed to randomizing the order of trial.questions
|
|
143
144
|
// so that the data are always associated with the same question regardless of order
|
|
144
145
|
var question_order = [];
|
|
@@ -156,22 +157,15 @@ class SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {
|
|
|
156
157
|
var question_id = question_order[i];
|
|
157
158
|
|
|
158
159
|
// create question container
|
|
159
|
-
var question_classes = [
|
|
160
|
+
var question_classes = [`${plugin_id_name}-question`];
|
|
160
161
|
if (question.horizontal) {
|
|
161
|
-
question_classes.push(
|
|
162
|
+
question_classes.push(`${plugin_id_name}-horizontal`);
|
|
162
163
|
}
|
|
163
164
|
|
|
164
|
-
html +=
|
|
165
|
-
'<div id="jspsych-survey-multi-choice-' +
|
|
166
|
-
question_id +
|
|
167
|
-
'" class="' +
|
|
168
|
-
question_classes.join(" ") +
|
|
169
|
-
'" data-name="' +
|
|
170
|
-
question.name +
|
|
171
|
-
'">';
|
|
165
|
+
html += `<div id="${plugin_id_name}-${question_id}" class="${question_classes.join(" ")}" data-name="${question.name}">`;
|
|
172
166
|
|
|
173
167
|
// add question text
|
|
174
|
-
html +=
|
|
168
|
+
html += `<p class="${plugin_id_name}-text survey-multi-choice">${question.prompt}`;
|
|
175
169
|
if (question.required) {
|
|
176
170
|
html += "<span class='required'>*</span>";
|
|
177
171
|
}
|
|
@@ -180,47 +174,35 @@ class SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {
|
|
|
180
174
|
// create option radio buttons
|
|
181
175
|
for (var j = 0; j < question.options.length; j++) {
|
|
182
176
|
// add label and question text
|
|
183
|
-
var option_id_name =
|
|
184
|
-
var input_name =
|
|
185
|
-
var input_id =
|
|
177
|
+
var option_id_name = `${plugin_id_name}-option-${question_id}-${j}`;
|
|
178
|
+
var input_name = `${plugin_id_name}-response-${question_id}`;
|
|
179
|
+
var input_id = `${plugin_id_name}-response-${question_id}-${j}`;
|
|
186
180
|
|
|
187
181
|
var required_attr = question.required ? "required" : "";
|
|
188
182
|
|
|
189
183
|
// add radio button container
|
|
190
|
-
html +=
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
'" value="' +
|
|
198
|
-
question.options[j] +
|
|
199
|
-
'" ' +
|
|
200
|
-
required_attr +
|
|
201
|
-
"></input>";
|
|
202
|
-
html += question.options[j] + "</label>";
|
|
203
|
-
html += "</div>";
|
|
184
|
+
html += `
|
|
185
|
+
<div id="${option_id_name}" class="${plugin_id_name}-option">
|
|
186
|
+
<label class="${plugin_id_name}-text" for="${input_id}">
|
|
187
|
+
<input type="radio" name="${input_name}" id="${input_id}" value="${question.options[j]}" ${required_attr} />
|
|
188
|
+
${question.options[j]}
|
|
189
|
+
</label>
|
|
190
|
+
</div>`;
|
|
204
191
|
}
|
|
205
192
|
|
|
206
193
|
html += "</div>";
|
|
207
194
|
}
|
|
208
195
|
|
|
209
196
|
// add submit button
|
|
210
|
-
html +=
|
|
211
|
-
'<input type="submit" id="' +
|
|
212
|
-
plugin_id_name +
|
|
213
|
-
'-next" class="' +
|
|
214
|
-
plugin_id_name +
|
|
215
|
-
' jspsych-btn"' +
|
|
216
|
-
(trial.button_label ? ' value="' + trial.button_label + '"' : "") +
|
|
217
|
-
"></input>";
|
|
197
|
+
html += `<input type="submit" id="${plugin_id_name}-next" class="${plugin_id_name} jspsych-btn"${trial.button_label ? ' value="' + trial.button_label + '"' : ""} />`;
|
|
218
198
|
html += "</form>";
|
|
219
199
|
|
|
220
200
|
// render
|
|
221
201
|
display_element.innerHTML = html;
|
|
222
202
|
|
|
223
|
-
|
|
203
|
+
const trial_form = display_element.querySelector<HTMLFormElement>(`#${trial_form_id}`);
|
|
204
|
+
|
|
205
|
+
trial_form.addEventListener("submit", (event) => {
|
|
224
206
|
event.preventDefault();
|
|
225
207
|
// measure response time
|
|
226
208
|
var endTime = performance.now();
|
|
@@ -229,7 +211,7 @@ class SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {
|
|
|
229
211
|
// create object to hold responses
|
|
230
212
|
var question_data = {};
|
|
231
213
|
for (var i = 0; i < trial.questions.length; i++) {
|
|
232
|
-
var match = display_element.querySelector(
|
|
214
|
+
var match = display_element.querySelector(`#${plugin_id_name}-${i}`);
|
|
233
215
|
var id = "Q" + i;
|
|
234
216
|
var val: String;
|
|
235
217
|
if (match.querySelector("input[type=radio]:checked") !== null) {
|
|
@@ -317,7 +299,7 @@ class SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {
|
|
|
317
299
|
for (let i = 0; i < answers.length; i++) {
|
|
318
300
|
this.jsPsych.pluginAPI.clickTarget(
|
|
319
301
|
display_element.querySelector(
|
|
320
|
-
|
|
302
|
+
`#${plugin_id_name}-response-${i}-${trial.questions[i].options.indexOf(
|
|
321
303
|
answers[i][1]
|
|
322
304
|
)}`
|
|
323
305
|
),
|
|
@@ -326,7 +308,7 @@ class SurveyMultiChoicePlugin implements JsPsychPlugin<Info> {
|
|
|
326
308
|
}
|
|
327
309
|
|
|
328
310
|
this.jsPsych.pluginAPI.clickTarget(
|
|
329
|
-
display_element.querySelector(
|
|
311
|
+
display_element.querySelector(`#${plugin_id_name}-next`),
|
|
330
312
|
data.rt
|
|
331
313
|
);
|
|
332
314
|
}
|