Beispiel-Umfrage-Template

Beispiel-Umfrage-Template

Umfrage-Templates teilen sich in die HTML-Eingabe, CSS und Javascript auf.
HTML-Eingabe
CSS
Javascript
Editor-Ansicht
Vorschau
HTML-Eingabe
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" type="text/css" href="[CSS-HREF /] " />
  6.     <script src="[JS-SRC /]"></script>
  7.     <title>[SURVEY-HEADLINE /]</title>
  8. </head>
  9. <body>
  10.   <div class="container">
  11.     <img class="header-image" src="[SURVEY-IMAGE /]" />
  12.     <div class="pagination">Seite [PAGE-NB /] / [PAGE-COUNT /]</div>
  13.     <h1>[SURVEY-HEADLINE /]</h1>
  14.     [MESSAGE type='incomplete']
  15.     <div class="error">Bitte füllen Sie alle Pflichtfelder aus.</div>
  16.     [/MESSAGE][MESSAGE type='more']
  17.     <div class="error">Es wurden nicht genügend Antworten angehakt.</div>
  18.     [/MESSAGE][MESSAGE type='less']
  19.     <div class="error">Es wurden zu viele Antworten angehakt.</div>
  20.     [/MESSAGE]
  21.     <form action="[ACTION-URL /]" method="post">
  22.         [QUESTIONS]
  23.         [TOP]
  24.         <div class="questions">[/TOP]
  25.             [BETWEEN]
  26.             <div class="spacer"></div>
  27.             [/BETWEEN]
  28.             [BOTTOM]
  29.         </div>
  30.         [/BOTTOM]
  31.         [/QUESTIONS]

  33.         [ACTIONS]
  34.         [TOP]
  35.         <div class="actions">
  36.             <div class="mandatory-hint">* Pflichtfragen</div>
  37.             [/TOP]
  38.             [BETWEEN]<br />[/BETWEEN]
  39.             [BOTTOM]
  40.         </div>
  41.         [/BOTTOM] 

  43.         [ACTION type='back']
  44.         <input type="submit" name="btn_back" value="Zurück" class="back" />
  45.         [/ACTION]
  46.         [ACTION type='next']
  47.         <input type="submit" name="btn_submit" value="Weiter" class="more" />
  48.         [/ACTION]
  49.         [ACTION type='finish']
  50.         <input type="submit" name="btn_submit" value="Abschicken" class="finish" />
  51.         [/ACTION]
  52.         [/ACTIONS]

  54.     </form>
  55.     </div>
  56. </body>
  57. </html>
CSS
  1. @import url([SYSTEM key='redirect-domain' /]-google-api-css2/Roboto:wght@300;400;700);

  3. :root {
  4.   --primary: #3478F6;
  5. }

  7. * {
  8.   box-sizing: border-box; }

  10. body {
  11.   font-family: 'Roboto', Arial, sans-serif; font-size 1rem; line-height: auto; font-weight: 300; color: #333; margin: 0; padding: 0; background-color: #fefefe }

  13. img {
  14.   max-width: 100%; }

  16. .header-image {
  17.   width: 100%; }

  19. .container {
  20.   margin-left: auto;
  21.   margin-right: auto;
  22.   width: 1280px;
  23.   max-width: 100%;
  24.   padding: 15px; }

  26. form {
  27.   background-color: #f1f1f1;
  28.   padding: 30px;
  29.   border-radius: 2px;
  30. }

  32. .question .head {
  33.   padding-bottom: 10px; }

  35. .question .head label {
  36.   font-weight: 700; }

  38. .question .head label + div {
  39.   margin-top: 5px; }

  41. .question .body { }

  43. .spacer {
  44.   height: 20px; }

  46. input[type=text], textarea, select {
  47.   font-size: inherit;
  48.   font-family: inherit;
  49.   font-weight: inherit;
  50.   line-height: inherit;
  51.   width: 100%;
  52.   padding: 10px; }

  54. input[type=submit] {
  55.   font-size: inherit;
  56.   font-family: inherit;
  57.   line-height: inherit;
  58.   background-color: var(--primary);
  59.   color: #fff;
  60.   border: none; 
  61.   padding: 10px 20px;
  62.   font-weight: 400; }

  64.   /* rating */
  65.   .question.rating .body .rating_label.left {
  66.     padding-left: 0px;
  67.     padding-right: 0px; }

  69.   .question.rating .body .rating_label.right {
  70.     padding-left: 0px;
  71.     padding-right: 0px; }

  73.   .question.rating .body .rating_unit input[type="radio"] {
  74.       display: none; }

  76.   .question.rating .rating_unit {
  77.       font-size: 30px;
  78.       cursor: pointer;
  79.       color: #f2f2f2;
  80.       font-weight: 700;
  81.       text-shadow: 0px 0px 1px rgb(0, 0, 0); }

  83.   .question.rating .rating_unit:before {

  85.       content: '\2605'; }

  87.   .question.rating .rating_unit.active:before {
  88.       content: '\2605';
  89.       color: var(--primary);
  90.       font-weight: 700; }

  92.   .question.rating table {
  93.       width:auto;
  94.       margin-bottom:30px; }

  96.   .question.rating table td {
  97.     padding: 5px 15px; }
  98.   /* rating:end */

  100.   .error {
  101.     margin-top: 20px;
  102.     margin-bottom: 20px;
  103.     border: solid 1px #ff0000;
  104.     padding: 15px;
  105.     color: #ff0000;
  106.     background-color: rgba(255,0,0,.05);
  107.     font-weight: 400;
  108.     border-radius: 3px; }

  110.   .mandatory-hint {
  111.     margin-top: 20px;
  112.     margin-bottom: 20px; }

  114.   .pagination {
  115.     padding-top: 10px;
  116.     padding.bottom: 10px;
  117.   }
Javascript
Javascript für Bewertungs-Element
  1. var RatingQuestion = function(questionContainer) {
  2.   this.questionId = parseInt(questionContainer.id.split('_').pop(), 10);

  4.   this.ratingOptions = Array.from(
  5.     questionContainer.querySelectorAll('input[type="radio"]')
  6.   ).sort(function (a, b) {
  7.     return parseInt(a.value, 10) - parseInt(b.value, 10);
  8.   });
  9. };

  11. RatingQuestion.prototype.setActiveIndex = function(value) {
  12.   var optionsCount = this.ratingOptions.length;
  13.   var ratingValue = parseInt(this.ratingOptions[value].value, 10);

  15.   this.ratingOptions[value].checked = true;

  17.   for (var j = 0; j < optionsCount; ++j) {
  18.     var ratingParent = this.ratingOptions[j].parentElement;

  20.     if (!ratingParent) {
  21.       continue;
  22.     }

  24.     if (j < ratingValue) {
  25.       ratingParent.classList.add('active');
  26.     } else {
  27.       ratingParent.classList.remove('active');
  28.     }
  29.   }
  30. };

  32. RatingQuestion.prototype.init = function () {
  33.   this.ratingOptions.forEach(function (option, index) {
  34.     option.parentElement.addEventListener('click', function () {
  35.       this.setActiveIndex(index);
  36.     }.bind(this));
  37.   }.bind(this));

  39.   var currentValue = NaN;
  40.   var ratingRadioList = document.forms[0].elements['data[' + this.questionId + ']'];

  42.   if (ratingRadioList instanceof RadioNodeList) {
  43.     currentValue = parseInt(ratingRadioList.value, 10);
  44.   } else {
  45.     if (ratingRadioList.checked) {
  46.       currentValue = parseInt(ratingRadioList.value, 10);
  47.     }
  48.   }

  50.   if (!isNaN(currentValue)) {
  51.     this.setActiveIndex(currentValue - 1);
  52.   }
  53. };

  55. window.addEventListener('load', function () {
  56.   Array.from(document.querySelectorAll('.question.rating')).forEach(function (wrapper) {
  57.     var ratingQuestion = new RatingQuestion(wrapper);

  59.     window.setTimeout(function () {
  60.       ratingQuestion.init();
  61.     }.bind(this), 0);
  62.   });
  63. });
Editor-Ansicht
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.

Umfrage - Editor Ansicht, Tab Inhalte
Vorschau
Darstellung der Umfrage mit den unter "Editor-Ansicht" definierten Fragen.

Umfrage - Vorschau