Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
<!DOCTYPE html>
<meta charset="utf-8">
<title>TheFragebogen: printable example</title>
<link rel="stylesheet" type="text/css" href="example.css">
<script src="../thefragebogen.js"></script>
@media print {
body {
counter-reset: page;
body>div::after {
counter-increment: page;
content: "Page "counter(page);
body>div:first-of-type {
page-break-before: avoid;
body>div {
page-break-before: always;
body>div>input[type="button"]:last-of-type {
/* Omit next button of ScreenUIElements */
display: none;
//This array stores all screens that will be shown.
var screens = [];
new ScreenUIElements(
new UIElementHTML(undefined, "<h1>TheFragebogen</h1>"),
new UIElementHTML(undefined, "This demo has CSS to be printed.<br>Just try to print this web page."),
new UIElementHTML(undefined, "Each screen will be printed on a separate page and the 'Next'-button will be hidden."),
new QuestionnaireItemDefinedOne(undefined, "Are you ready?", true, ["Yes"])
new ScreenUIElements(
new UIElementHTML(undefined, "Just some basic questions.<br>The 2nd must be answered."),
new QuestionnaireItemDefinedOne(undefined, "QuestionnaireItemDefinedOne: Question with a defined set of options, where only one option can be selected.", false, ["Option 1", "Option 2", "Option 3"]),
new QuestionnaireItemDefinedMulti(undefined, "QuestionnaireItemDefinedMulti: Question with a defined set of options, where multiple options can be selected.", true, ["Option 1", "Option 2", "Option 3"])
function start() {
document.body.innerHTML += "TheFragebogen loaded.";
if (typeof(screens) === "undefined") {
document.body.innerHTML += "<i>Something went wrong:</i> Please check the configuration.";
document.body.innerHTML = "";
for (var i = 0; i < screens.length; i++) {
<body onload="start()">
TheFragebogen will be shown here.<br> If something fails while starting, an error message will be shown here.