Beispiel-Umfrage-Template¶
Umfrage-Templates teilen sich in die HTML-Eingabe, CSS und Javascript auf.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="[CSS-HREF /] " /><!-- (1)! -->
<script src="[JS-SRC /]"></script><!-- (2)! -->
<title>[SURVEY-HEADLINE /]<!-- (3)! --></title>
</head>
<body>
<div class="container">
<img class="header-image" src="[SURVEY-IMAGE /]" /><!-- (4)! -->
<div class="pagination">Seite [PAGE-NB /]<!-- (5)! --> / [PAGE-COUNT /]<!-- (6)! --></div>
<h1>[SURVEY-HEADLINE /]</h1>
[MESSAGE type='incomplete']
<div class="error">Bitte füllen Sie alle Pflichtfelder aus.</div>
[/MESSAGE][MESSAGE type='more']
<div class="error">Es wurden nicht genügend Antworten angehakt.</div>
[/MESSAGE][MESSAGE type='less']
<div class="error">Es wurden zu viele Antworten angehakt.</div>
[/MESSAGE]
<form action="[ACTION-URL /]" method="post">
[QUESTIONS]
[TOP]
<div class="questions">[/TOP]
[BETWEEN]
<div class="spacer"></div>
[/BETWEEN]
[BOTTOM]
</div>
[/BOTTOM]
[/QUESTIONS]
[ACTIONS]
[TOP]
<div class="actions">
<div class="mandatory-hint">* Pflichtfragen</div>
[/TOP]
[BETWEEN]<br />[/BETWEEN]
[BOTTOM]
</div>
[/BOTTOM]
[ACTION type='back']
<input type="submit" name="btn_back" value="Zurück" class="back" />
[/ACTION]
[ACTION type='next']
<input type="submit" name="btn_submit" value="Weiter" class="more" />
[/ACTION]
[ACTION type='finish']
<input type="submit" name="btn_submit" value="Abschicken" class="finish" />
[/ACTION]
[/ACTIONS]
</form>
</div>
</body>
</html>
[CSS-HREF /]: Verlinkt die im Template, Tab "CSS" hinterlegte CSS-Datei.[JS-SRC /]: Verlinkt die im Template, Tab "Javascript" hinterlegte Datei.[SURVEY-HEADLINE /]: Der Wert des Platzhalters wird aus dem Eingabefeld "Überschrift" der Umfrage übernommen.[SURVEY-IMAGE /]: Der Wert des Platzhalters wird aus dem Eingabefeld "Headerbild" der Umfrage übernommen.[PAGE-NB /]: Aktuelle Umfragen-Seite[PAGE-COUNT /]: Gesamt-Seitenzahl der Umfrage
@import url([SYSTEM key='redirect-domain' /]-google-api-css2/Roboto:wght@300;400;700);
:root {
--primary: #3478F6;
}
* {
box-sizing: border-box; }
body {
font-family: 'Roboto', Arial, sans-serif; font-size 1rem; line-height: auto; font-weight: 300; color: #333; margin: 0; padding: 0; background-color: #fefefe }
img {
max-width: 100%; }
.header-image {
width: 100%; }
.container {
margin-left: auto;
margin-right: auto;
width: 1280px;
max-width: 100%;
padding: 15px; }
form {
background-color: #f1f1f1;
padding: 30px;
border-radius: 2px;
}
.question .head {
padding-bottom: 10px; }
.question .head label {
font-weight: 700; }
.question .head label + div {
margin-top: 5px; }
.question .body { }
.spacer {
height: 20px; }
input[type=text], textarea, select {
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
width: 100%;
padding: 10px; }
input[type=submit] {
font-size: inherit;
font-family: inherit;
line-height: inherit;
background-color: var(--primary);
color: #fff;
border: none;
padding: 10px 20px;
font-weight: 400; }
/* rating */
.question.rating .body .rating_label.left {
padding-left: 0px;
padding-right: 0px; }
.question.rating .body .rating_label.right {
padding-left: 0px;
padding-right: 0px; }
.question.rating .body .rating_unit input[type="radio"] {
display: none; }
.question.rating .rating_unit {
font-size: 30px;
cursor: pointer;
color: #f2f2f2;
font-weight: 700;
text-shadow: 0px 0px 1px rgb(0, 0, 0); }
.question.rating .rating_unit:before {
content: '\2605'; }
.question.rating .rating_unit.active:before {
content: '\2605';
color: var(--primary);
font-weight: 700; }
.question.rating table {
width:auto;
margin-bottom:30px; }
.question.rating table td {
padding: 5px 15px; }
/* rating:end */
.error {
margin-top: 20px;
margin-bottom: 20px;
border: solid 1px #ff0000;
padding: 15px;
color: #ff0000;
background-color: rgba(255,0,0,.05);
font-weight: 400;
border-radius: 3px; }
.mandatory-hint {
margin-top: 20px;
margin-bottom: 20px; }
.pagination {
padding-top: 10px;
padding.bottom: 10px;
}
Javascript für Bewertungs-Element
var RatingQuestion = function(questionContainer) {
this.questionId = parseInt(questionContainer.id.split('_').pop(), 10);
this.ratingOptions = Array.from(
questionContainer.querySelectorAll('input[type="radio"]')
).sort(function (a, b) {
return parseInt(a.value, 10) - parseInt(b.value, 10);
});
};
RatingQuestion.prototype.setActiveIndex = function(value) {
var optionsCount = this.ratingOptions.length;
var ratingValue = parseInt(this.ratingOptions[value].value, 10);
this.ratingOptions[value].checked = true;
for (var j = 0; j < optionsCount; ++j) {
var ratingParent = this.ratingOptions[j].parentElement;
if (!ratingParent) {
continue;
}
if (j < ratingValue) {
ratingParent.classList.add('active');
} else {
ratingParent.classList.remove('active');
}
}
};
RatingQuestion.prototype.init = function () {
this.ratingOptions.forEach(function (option, index) {
option.parentElement.addEventListener('click', function () {
this.setActiveIndex(index);
}.bind(this));
}.bind(this));
var currentValue = NaN;
var ratingRadioList = document.forms[0].elements['data[' + this.questionId + ']'];
if (ratingRadioList instanceof RadioNodeList) {
currentValue = parseInt(ratingRadioList.value, 10);
} else {
if (ratingRadioList.checked) {
currentValue = parseInt(ratingRadioList.value, 10);
}
}
if (!isNaN(currentValue)) {
this.setActiveIndex(currentValue - 1);
}
};
window.addEventListener('load', function () {
Array.from(document.querySelectorAll('.question.rating')).forEach(function (wrapper) {
var ratingQuestion = new RatingQuestion(wrapper);
window.setTimeout(function () {
ratingQuestion.init();
}.bind(this), 0);
});
});
Die Ansicht im Editor ist unabhängig vom Quellcode des Umfrage-Templates da die verwendbaren Elemente (HTML-Element und Fragen) vorgegeben sind. Das Beispiel soll lediglich den Aufbau der Umfrage illustrieren.
Darstellung der Umfrage mit den unter "Editor-Ansicht" definierten Fragen.
