Example Survey Template

Example Survey Template

Survey templates are divided into HTML input, CSS and Javascript.
HTML-Input
CSS
Javascript
Editor-view
Preview
HTML-Input
  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 for evaluation 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-view
The view in the editor is independent of the source code of the survey template as the elements that can be used (HTML element and questions) are predefined. The example is only intended to illustrate the structure of the survey.

Umfrage - Editor Ansicht, Tab Inhalte
Preview
Umfrage - Vorschau