Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
209 lines (169 sloc) 9.5 KB
<!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;
}
.Required,
.questionnaireItemRequired {
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 &mdash; 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>
You can’t perform that action at this time.