-
Notifications
You must be signed in to change notification settings - Fork 5
/
example_uielements.html
66 lines (52 loc) · 3.92 KB
/
example_uielements.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TheFragebogen: questionnaire featuress</title>
<link rel="stylesheet" type="text/css" href="example.css">
<script src="../thefragebogen.js"></script>
<script>
var questionnaireItems = [];
questionnaireItems.push(new UIElementHTML(undefined, "<h1>TheFragebogen</h1>"));
questionnaireItems.push(new UIElementHTML(undefined, "<h2>Available QuestionnaireItems</h2>"));
questionnaireItems.push(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"));
questionnaireItems.push(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"));
questionnaireItems.push(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>)", false));
questionnaireItems.push(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));
questionnaireItems.push(new QuestionnaireItemDefinedOne(undefined, "A question with pre-defined answers, where <i>one</i> answer has to be selected.", false, ["a", "b"]));
questionnaireItems.push(new QuestionnaireItemDefinedSelector(undefined, "A question with pre-defined answer, where <i>one</i> answer has to be selected.", false, ["a", "b"]));
questionnaireItems.push(new QuestionnaireItemDefinedMulti(undefined, "A question with pre-defined answers, where <i>multiple</i> answers can be selected.", false, ["a", "b"]));
questionnaireItems.push(new QuestionnaireItemText(undefined, "Just a text field.", false));
questionnaireItems.push(new QuestionnaireItemTextArea(undefined, "A multi-line text field. A so-called text area.", false, null, null, "This is the default text."));
questionnaireItems.push(new QuestionnaireItemDate(undefined, "A date selector.", false));
questionnaireItems.push(new QuestionnaireItemDefinedRange(undefined, "Continuous input with a slider.<br>This one ranges from 0 to 100.", false, 0, 100));
questionnaireItems.push(new QuestionnaireItemDate(undefined, "Asking for a date.", false));
questionnaireItems.push(new UIElementHTML(undefined, "<h2>Available UIElements</h2>"));
questionnaireItems.push(new UIElementButton(undefined, "Action", function() {
alert("UIElementButton was pressed.");
}));
</script>
<script>
function start() {
if (typeof(questionnaireItems) === "undefined") {
document.body.innerHTML += "Demo could not start.";
document.body.innerHTML += "<br><i>Something went wrong:</i> Please check that thefragebogen.js was loaded and that the configuration is ok.";
return;
}
document.body.innerHTML = "";
var screen = document.createElement("div");
document.body.appendChild(screen);
for (var i = 0; i < questionnaireItems.length; i++) {
console.log(questionnaireItems[i]);
screen.appendChild(questionnaireItems[i].createUI());
questionnaireItems[i].setEnabled(true);
}
}
</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>