-
Notifications
You must be signed in to change notification settings - Fork 5
/
example_basic.html
206 lines (167 loc) · 9.46 KB
/
example_basic.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TheFragebogen: basic example</title>
<link rel="stylesheet" type="text/css" href="example.css">
<style>
.questionnaireItem {
width: 40em;
margin-left: auto;
margin-right: auto;
border-style: inset;
background-color: Snow;
padding: 0.5em;
}
*[class*='Required'] {
outline: none;
border-color: red;
box-shadow: 0 0 1em red;
}
.screenPreview table {
width: 100%;
border-collapse: collapse;
word-break: break-all;
}
.screenPreview table td,
.screenPreview table th {
font-size: 1em;
border: 1px solid #98bf21;
padding: 3px 7px 2px 7px;
}
.screenPreview table th {
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #A7C942;
color: #ffffff;
}
.screenPreview table tr.alt td {
color: #000000;
background-color: #EAF2D3;
}
.iframe {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
</style>
<script src="../thefragebogen.js"></script>
<script>
//This array stores all screens that will be shown.
var screens = [];
//The welcome screen of this questionnaire with some text and a standard question.
var screen1 = new ScreenUIElements(
new UIElementHTML(undefined, "<h1>TheFragebogen</h1>"),
new UIElementHTML(undefined, "This demo gives an overview of the available features."),
new UIElementHTML(undefined, "When you are ready, please press 'Next'."),
new QuestionnaireItemDefinedOne("questionnaireItem", "Are you ready?", true, ["Yes"])
);
screens.push(screen1);
//This screen shows some questions.
var screen2 = new ScreenUIElements(
new UIElementHTML(undefined, "<h1>ScreenUIElements</h1>"),
new UIElementHTML(undefined, "<h2>Just some basic questions.</h2>"),
new QuestionnaireItemDefinedOne("questionnaireItem", "QuestionnaireItemDefinedOne:<br>Question with a defined set of options, where only one option can be selected.", false, ["Option 1", "Option 2", "Option 3"]),
new QuestionnaireItemDefinedMulti("questionnaireItem", "QuestionnaireItemDefinedMulti:<br>Question with a defined set of options, where multiple options can be selected.", true, ["Option 1", "Option 2", "Option 3"]),
);
screens.push(screen2);
var screen3 = new ScreenUIElements(
new UIElementHTML(undefined, "<h1>ScreenUIElements</h1>"),
new UIElementHTML(undefined, "<h2>Some fancy questions.</h2>"),
new QuestionnaireItemSVGVisualAnalogueScale("max-width", "The <a href='https://en.wikipedia.org/wiki/Visual_analogue_scale'>Visual analogue scale</a><br>Labels can be configured.", false, "Label left", "Label right"),
new QuestionnaireItemSVGNASATLX("max-width", "The <a href='https://en.wikipedia.org/wiki/NASA-TLX'>NASA-TLX scale</a><br>Labels can be configured.", false, "very low", "very high"),
new QuestionnaireItemSVGQuality7pt("max-width", "Continuous scale for subjective quality assessment (cf. <a href='https://www.itu.int/rec/T-REC-P.851-200311-I/en'>ITU-T P.851</a>)<br>Labels can be configured.", false),
);
screens.push(screen3);
var screen4 = new ScreenUIElements(
new UIElementHTML(undefined, "<h1>ScreenUIElements</h1>"),
new UIElementHTML(undefined, "<h2>Freehand input.</h2>"),
new QuestionnaireItemWrite("write-border", "Free hand input<br>Left mouse-button: draw<br>Right mouse-button: draw<br>The drawn image is exported as <a href='https://en.wikipedia.org/wiki/Portable_Network_Graphics'>PNG</a> in <a href='https://en.wikipedia.org/wiki/Base64'>Base64</a><br> It supports a background image.", false)
);
screens.push(screen4);
//This screen "shows" questions that are answered automatically (and are not visible to the user).
var screen5 = new ScreenUIElements(
new UIElementHTML(undefined, "<h1>ScreenUIElements</h1>"),
new UIElementHTML(undefined, "<h2>Measuring stuff and storing data.</h2>"),
new UIElementHTML(undefined, "This screen stores data such as the current date of execution, the duration the screen was shown and the URL."),
new QuestionnaireItemSystemFocus(),
new QuestionnaireItemSystemURL(),
new QuestionnaireItemSystemScreenDateTime(),
new QuestionnaireItemSystemScreenDuration(),
new QuestionnaireItemSystemViewportSize(),
new QuestionnaireItemSystemConst("Default text", "Some stuff")
);
screens.push(screen5);
var screen6 = new ScreenUIElementsSequential(
new UIElementHTML(undefined, "<h1>ScreenUIElementsSequential</h1>"),
new UIElementHTML(undefined, "Here, questions need to be answered from top to bottom."),
new UIElementHTML(undefined, "Answers cannot be changed afterwards."),
new QuestionnaireItemDate("questionnaireItem", "QuestionnaireItemDate: Question asking for a date.", false),
new QuestionnaireItemDefinedMulti("questionnaireItem", "QuestionnaireItemDefinedMulti:<br>Question with a defined set of options, where multiple options can be selected.", true, ["Option 1", "Option 2", "Option 3"])
);
screens.push(screen6);
var screen7 = new ScreenUIElementsAuto(
new UIElementHTML(undefined, "<h1>ScreenUIElementsAuto</h1>"),
new UIElementHTML(undefined, "On answering the following question, the questionnaire will automatically continue."),
new UIElementHTML(undefined, "NOTE: only questions that are marked as REQUIRED need to be answered."),
new QuestionnaireItemDefinedOne("questionnaireItem", "QuestionnaireItemDefinedOne:<br>Question with a defined set of options, where only one option can be selected.", true, ["Option 1", "Option 2", "Option 3"]),
);
screens.push(screen7);
var screen8 = new ScreenUIElements(
new UIElementHTML(undefined, "<h1>ScreenIFrame</h1>"),
new UIElementHTML(undefined, "On the following screen, it is shown how another web page could be embedded into a questionnaire."),
new UIElementHTML(undefined, "The web page of TheFragebogen (<i>www.TheFragebogen.de</i>) is presented in full screen."),
new UIElementHTML(undefined, "The questionnaire is configured to close when the URL is <i>first</i> changed (i.e., you click on a link)."),
new UIElementHTML(undefined, "When you are ready, please press 'Next'.")
);
screens.push(screen8);
//This screen another webpage using an iframe.
screens.push(new ScreenIFrame("iframe", "http://www.TheFragebogen.de", 1));
var screen9 = new ScreenUIElements(
new UIElementHTML(undefined, "<h1>TheFragebogen</h1>"),
new UIElementHTML(undefined, "Welcome back from the iFrame-demo — this is the questionnaire again.")
);
screens.push(screen9);
var screen10 = new ScreenUIElements(
new UIElementHTML(undefined, "<h1>Pagination</h1>"),
new UIElementHTML(undefined, "This screen shows how to configure pagination (i.e., moving to a different screen than the next one)."),
new UIElementHTML(undefined, "If you go back to a screen that was already answered, it's data is restored."),
);
screen10.setPaginateUI(new PaginateUIButton(undefined, -2, 1, "Back to iFrame", "Next"));
screens.push(screen10);
//This screen shows a preview of the collected data.
screens.push(new ScreenDataPreview("screenPreview", false));
//This screen triggers the download all collected data (CSV).
//This includes also the changelog of all QuestionnaireItems.
screens.push(new ScreenWaitDataDownload(undefined, "The End<br>All data should now be downloaded (incl. changes of questionnaireItems and their final answers).", "TheFragebogen-basic.csv", true));
//Most important: create the ScreenController
var screenController = new ScreenController(screens);
</script>
<script>
//Having the start()-function in an extra script-tag makes sure that it will be executed even if there are errors in the script-tag configuring TheFragebogen.
function start() {
document.body.innerHTML += "TheFragebogen loaded.";
if (typeof(screenController) === "undefined") {
document.body.innerHTML += "<br><i>Something went wrong:</i> Please check that thefragebogen.js was loaded and that the configuration is ok.";
return;
}
screenController.init(document.body);
screenController.start();
}
</script>
</head>
<body onload="start()">
<p>
TheFragebogen will be shown here.<br> If something fails while starting, an error message will be shown here.
</p>
</body>
</html>