Skip to content

Commit f3456bd

Browse files
jodeleeuwjodeleeuw
committed
Remove custom CSS, add min_width parameter to control survey container, add examples for testing
1 parent 437f002 commit f3456bd

File tree

5 files changed

+199
-40
lines changed

5 files changed

+199
-40
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/plugin-survey/examples/minimal-parameters.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<script src="../../jspsych/dist/index.browser.js"></script>
8+
<script src="../dist/index.browser.js"></script>
9+
<link rel="stylesheet" href="../../jspsych/css/jspsych.css" />
10+
<link rel="stylesheet" href="../css/survey.min.css" />
11+
</head>
12+
13+
<body></body>
14+
<script type="text/javascript">
15+
16+
const jsPsych = initJsPsych({
17+
on_finish: function() {
18+
jsPsych.data.displayData();
19+
}
20+
});
21+
22+
// This example is meant to test default styling without additional parameters
23+
const contact_info = {
24+
title: "jsPsych Survey Plugin example",
25+
pages: [{
26+
title: "Page 1 title: Personal Details",
27+
name: "PersonalDetails",
28+
elements: [{
29+
type: "text",
30+
name: "FirstName",
31+
title: "First name:",
32+
isRequired: true,
33+
autocomplete: 'given-name'
34+
},
35+
{
36+
type: "text",
37+
name: "LastName",
38+
title: "Last name:",
39+
isRequired: true,
40+
startWithNewLine: false,
41+
autocomplete: 'family-name'
42+
},
43+
{
44+
type: "panel",
45+
name: "Contacts",
46+
state: "collapsed",
47+
title: "Contact (optional)",
48+
elements: [{
49+
type: "text",
50+
inputType: 'tel',
51+
name: "Phone",
52+
title: "Phone number:",
53+
defaultValue: "(123) 456-7890",
54+
autocomplete: 'tel'
55+
}, {
56+
type: "text",
57+
name: "GitHub",
58+
title: "GitHub username:"
59+
},
60+
{
61+
type: "text",
62+
inputType: 'email',
63+
name: "email",
64+
title: "Email:",
65+
autocomplete: 'email'
66+
}]
67+
}]
68+
},
69+
{
70+
title: "Page 2 title: Location",
71+
name: "Location",
72+
description: "Here are some questions with the 'description' shown below the question. The titles are hidden by setting the 'title' string to a space character. (You can also set the survey's 'questionTitleLocation' to' 'hidden', but that applies to the whole survey.)",
73+
elements: [
74+
{
75+
type: "text",
76+
name: "State",
77+
title: " ",
78+
width: "20%",
79+
minWidth: "128px",
80+
startWithNewLine: false,
81+
description: "Enter a state or region",
82+
autocomplete: "off"
83+
},
84+
{
85+
type: "dropdown",
86+
name: "Country",
87+
title: " ",
88+
startWithNewLine: false,
89+
width: "60%",
90+
minWidth: "256px",
91+
description: "Select a country (start typing to search, press Enter to select)",
92+
choicesByUrl: {
93+
url: "https://surveyjs.io/api/CountriesExample"
94+
},
95+
placeholder: "",
96+
allowClear: false
97+
},
98+
{
99+
type: "tagbox",
100+
choicesByUrl: {
101+
url: "https://surveyjs.io/api/CountriesExample"
102+
},
103+
name: "all-countries",
104+
title: "Which countries have you been to?",
105+
description: "Multi-select dropdown - please select all that apply. Try selecting lots of countries to see how the input area grows."
106+
}]
107+
}],
108+
};
109+
110+
const contact_info_trial = {
111+
type: jsPsychSurvey,
112+
survey_json: contact_info
113+
};
114+
115+
jsPsych.run([contact_info_trial]);
116+
117+
</script>
118+
119+
</html>

‎packages/plugin-survey/examples/non-jspsych.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<html>
2+
<head>
3+
<meta charset="utf-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1" />
5+
<title>Survey Plugin Example (non-jsPsych)</title>
6+
<link
7+
href="https://unpkg.com/survey-core/survey-core.min.css"
8+
type="text/css"
9+
rel="stylesheet"
10+
/>
11+
<script type="text/javascript" src="https://unpkg.com/survey-core/survey.core.min.js"></script>
12+
<script
13+
type="text/javascript"
14+
src="https://unpkg.com/survey-js-ui/survey-js-ui.min.js"
15+
></script>
16+
</head>
17+
<body>
18+
<div id="surveyContainer"></div>
19+
<script type="text/javascript">
20+
const surveyJSON = {
21+
title: "jsPsych Survey Plugin example",
22+
pages: [{
23+
title: "Page 1 title: Personal Details",
24+
name: "PersonalDetails",
25+
elements: [
26+
{
27+
"type": "slider",
28+
"name": "default-configuration",
29+
"title": "Default configuration",
30+
"description": "Min = 0 | Max = 100 | Step = 1"
31+
},
32+
{
33+
"type": "slider",
34+
"name": "change-min-max-step",
35+
"title": "Change min, max, and step",
36+
"description": "Min = -1000 | Max = 1000 | Step = 100",
37+
"min": -1000,
38+
"max": 1000,
39+
"step": 100
40+
},
41+
{
42+
"type": "slider",
43+
"name": "set-default-value",
44+
"title": "Set a default value",
45+
"description": "Default value = 50",
46+
"defaultValue": 50
47+
}
48+
]
49+
}],
50+
questionDescriptionLocation: "underInput",
51+
completeText: "Continue",
52+
widthMode: "static",
53+
width: "900",
54+
fitToContainer: true
55+
};
56+
57+
const survey = new Survey.Model(surveyJSON);
58+
59+
document.addEventListener("DOMContentLoaded", function() {
60+
survey.render(document.getElementById("surveyContainer"));
61+
});
62+
</script>
63+
</body>
64+
</html>

‎packages/plugin-survey/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
"sass": "^1.43.5"
5454
},
5555
"dependencies": {
56-
"survey-core": "^2.2.0",
57-
"survey-js-ui": "^2.2.0"
56+
"survey-core": "^2.3.11",
57+
"survey-js-ui": "^2.3.11"
5858
}
5959
}

‎packages/plugin-survey/src/index.ts‎

Lines changed: 12 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,14 @@ const info = <const>{
4444
type: ParameterType.FUNCTION,
4545
default: null,
4646
},
47+
/**
48+
* The minimum width of the survey container. This is applied as a CSS `min-width` property to the survey container element.
49+
* Note that the width of the survey can also be controlled using SurveyJS parameters within the `survey_json` object (e.g., `widthMode`, `width`, `fitToContainer`).
50+
*/
51+
min_width: {
52+
type: ParameterType.STRING,
53+
default: "min(100vw, 800px)",
54+
},
4755
},
4856
data: {
4957
/** An object containing the response to each question. The object will have a separate key (identifier) for each question. If the `name` parameter is defined for the question (recommended), then the response object will use the value of `name` as the key for each question. If any questions do not have a name parameter, their keys will named automatically, with the first unnamed question recorded as `question1`, the second as `question2`, and so on. The response type will depend on the question type. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */
@@ -61,31 +69,6 @@ const info = <const>{
6169

6270
type Info = typeof info;
6371

64-
// Define the mapping between custom jsPsych class names (jspsych-*) and class names provided by SurveyJS.
65-
// See here for full list: https://github.com/surveyjs/survey-library/blob/master/src/defaultCss/defaultV2Css.ts.
66-
// To modify the survey plugin CSS:
67-
// (1) search for the CSS selector that you want to modify,
68-
// (2) look it up and get the associated ID (note that some of these are nested)
69-
// (3) if the ID isn't already listed as a key here, add it and use a new jspsych class name as the value
70-
// (4) in survey.scss, use the jspsych class name as the selector and add/modify the rule
71-
72-
const jsPsychSurveyCssClassMap = {
73-
body: "jspsych-body",
74-
bodyContainer: "jspsych-body-container",
75-
question: {
76-
content: "jspsych-question-content",
77-
mainRoot: "jspsych-question-root",
78-
},
79-
page: {
80-
root: "jspsych-page",
81-
},
82-
footer: "jspsych-footer",
83-
navigation: {
84-
complete: "jspsych-nav-complete",
85-
},
86-
rowMultiple: "jspsych-row-multiple",
87-
};
88-
8972
/**
9073
* SurveyJS version: 2.2.0
9174
*
@@ -151,9 +134,11 @@ class SurveyPlugin implements JsPsychPlugin<Info> {
151134
});
152135
}
153136

154-
private createSurveyContainer(parent: HTMLElement): HTMLElement {
137+
private createSurveyContainer(parent: HTMLElement, minWidth: string): HTMLElement {
155138
const container = document.createElement("div");
156139
container.classList.add("jspsych-survey-container");
140+
container.style.textAlign = "initial"; // this undoes jspsych's text centering
141+
container.style.minWidth = minWidth;
157142
parent.appendChild(container);
158143
return container;
159144
}
@@ -174,9 +159,6 @@ class SurveyPlugin implements JsPsychPlugin<Info> {
174159
// apply our custom theme
175160
this.applyStyles(this.survey);
176161

177-
// apply our custom CSS class names
178-
this.survey.css = jsPsychSurveyCssClassMap;
179-
180162
if (trial.validation_function) {
181163
this.survey.onValidateQuestion.add(trial.validation_function);
182164
}
@@ -191,22 +173,16 @@ class SurveyPlugin implements JsPsychPlugin<Info> {
191173
}
192174
}
193175

194-
// clear display and reset flex on jspsych-content-wrapper
195-
document.querySelector<HTMLElement>(".jspsych-content-wrapper").style.display = "flex";
196-
197176
// finish trial and save data
198177
this.jsPsych.finishTrial({
199178
rt: Math.round(performance.now() - this.start_time),
200179
response: sender.data,
201180
});
202181
});
203182

204-
// remove flex display from jspsych-content-wrapper to get formatting to work
205-
document.querySelector<HTMLElement>(".jspsych-content-wrapper").style.display = "block";
206-
207183
// As of the SurveyJS v2.2 update, we need to create a new container for the survey to render in.
208184
// Otherwise the rendering fails silently with repeated similar survey trials.
209-
const survey_container = this.createSurveyContainer(display_element);
185+
const survey_container = this.createSurveyContainer(display_element, trial.min_width);
210186
this.survey.render(survey_container);
211187

212188
this.start_time = performance.now();

0 commit comments

Comments
 (0)