767 lines
27 KiB
HTML
767 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Questionnaire Wizard</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
|
|
<script src="https://unpkg.com/feather-icons"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
|
<link rel="stylesheet" href="https://nigelotoole.github.io/progress-tracker/styles/progress-tracker.css">
|
|
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<div class="questionaire">
|
|
<p style="display: none;">Wir sind ein Verein, der sich um Wildtiere kümmert,
|
|
die gefunden werden - sogenannte Fundtiere.
|
|
Wir haben für die Versorgung von verletzten oder
|
|
verwaisten Wildtieren Kontakt zu Menschen oder
|
|
Vereinen oder Institutionen, die sich um diese Tiere kümmern. Wir arbeiten mit Tierärzten zusammen,
|
|
damit keine Tier unversorgt bleibt.</p>
|
|
|
|
<div class="stepTracker">
|
|
<ul class="progress-tracker progress-tracker-mobile progress-tracker--text">
|
|
<li class="progress-step is-complete">
|
|
<div class="progress-marker" data-text="1"></div>
|
|
<div class="progress-text">
|
|
<h4 class="progress-title">Wildtier gefunden</h4>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="progress-step">
|
|
<div class="progress-marker" data-text="2"></div>
|
|
<div class="progress-text">
|
|
<h4 class="progress-title">Klassifizieren</h4>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="progress-step">
|
|
<div class="progress-marker" data-text="3"></div>
|
|
<div class="progress-text">
|
|
<h4 class="progress-title">Hilfestellung erhalten</h4>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<ul class="progress-tracker progress-tracker-desktop progress-tracker--text progress-tracker--text-inline progress-tracker--spaced">
|
|
<li class="progress-step is-complete">
|
|
<div class="progress-marker" data-text="1">
|
|
<div class="progress-text">
|
|
<h4 class="progress-title">Wildtier gefunden</h4>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="progress-step">
|
|
<div class="progress-marker" data-text="2">
|
|
<div class="progress-text">
|
|
<h4 class="progress-title">Klassifizieren</h4>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="progress-step">
|
|
<div class="progress-marker" data-text="3">
|
|
<div class="progress-text">
|
|
<h4 class="progress-title">Hilfestellung erhalten</h4>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<main>
|
|
<!-- <div class="infoArea">Test 123</div> -->
|
|
<div id="questionContainer"></div>
|
|
</main>
|
|
</div>
|
|
|
|
<template id="cardTemplate" style="display: none;">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="media">
|
|
<img class="d-flex mr-3 rounded-circle img-thumbnail thumb-lg" src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Unknown_Member.jpg?20170805162126" alt="Generic placeholder image" />
|
|
<div class="media-body">
|
|
<h5 class="mt-0 font-18 mb-1"></h5>
|
|
<p class="text-muted font-14"></p>
|
|
</div>
|
|
</div>
|
|
<div class="contact">
|
|
<ul class="social-links mb-0">
|
|
<li class="entry-phone hide">
|
|
<i class="fa fa-phone"></i>
|
|
<a href="">
|
|
<span></span>
|
|
</a>
|
|
</li>
|
|
<li class="entry-envelope hide">
|
|
<i class="fa fa-envelope"></i>
|
|
<a href="">
|
|
<span></span>
|
|
</a>
|
|
</li>
|
|
<li class="entry-home hide">
|
|
<i class="fa fa-home"></i>
|
|
<a target=new href="">
|
|
<span></span>
|
|
</a>
|
|
</li>
|
|
<li class="entry-map hide">
|
|
<i class="fa fa-map"></i>
|
|
<a target=new href="">
|
|
<span></span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
</body>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html, body {
|
|
background-color: #f7fafa;
|
|
}
|
|
.questionaire {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
padding: 1rem;
|
|
}
|
|
.progress-tracker-desktop .progress-step:last-child {
|
|
display: inline-table !important;
|
|
flex-grow: unset !important;
|
|
}
|
|
.progress-tracker-desktop .progress-step:last-child .progress-text {
|
|
overflow: visible !important;
|
|
}
|
|
.stepTracker {
|
|
width: 100%;
|
|
max-width: 800px;
|
|
}
|
|
.progress-tracker {
|
|
padding: 0 0.25rem;
|
|
margin: 1rem auto !important;
|
|
}
|
|
.progress-tracker-mobile {
|
|
display: none;
|
|
}
|
|
.progress-marker:after {
|
|
z-index: 10 !important;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.progress-tracker-desktop {
|
|
display: none;
|
|
}
|
|
.progress-tracker-mobile {
|
|
display: flex;
|
|
margin: 1rem 0rem 0 0rem;
|
|
}
|
|
.progress-step:last-child .progress-marker {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
}
|
|
.progress-step:last-child .progress-title {
|
|
text-align: right;
|
|
}
|
|
.progress-step:last-child .progress-marker:after {
|
|
background-color: #b6b6b6;
|
|
height: 1px !important;
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
z-index: -10;
|
|
top: 10px;
|
|
right: 5px;
|
|
width: 100%;
|
|
height: 4px;
|
|
transition: background-color 0.3s, background-position 0.3s;
|
|
}
|
|
.progress-step:nth-child(2) .progress-marker {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.progress-step:nth-child(2) .progress-title {
|
|
text-align: center;
|
|
}
|
|
}
|
|
.progress-marker::after {
|
|
height: 1px !important;
|
|
}
|
|
.progress-marker::before {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
padding: 0.1rem;
|
|
}
|
|
.progress-title {
|
|
font-size: 1rem;
|
|
}
|
|
.progress-text {
|
|
background-color: #f7fafa !important;
|
|
}
|
|
.infoArea {
|
|
padding: 2rem;
|
|
border-right: 1px solid #d5d9d9
|
|
}
|
|
|
|
.progress-step.is-complete .progress-marker::before, .progress-step.is-progress .progress-marker::before {
|
|
background-color: #008296 !important;
|
|
}
|
|
|
|
h2 {
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
a.backLink {
|
|
text-decoration: none;
|
|
color: #0F1111;
|
|
}
|
|
main {
|
|
display: flex;
|
|
align-items: top;
|
|
max-width: 600px;
|
|
width: 100%;
|
|
padding: 40px;
|
|
background-color: #fff;
|
|
border-radius: 5px;
|
|
border: 1px solid #ddd;
|
|
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
|
font-size: 0.95rem;
|
|
gap: 2rem;
|
|
margin: 1rem !important
|
|
}
|
|
@media (max-width: 600px) {
|
|
main {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
button {
|
|
border: 1px solid #d5d9d9;
|
|
border-radius: 8px;
|
|
box-shadow: 0px 2px 5px rgba(213, 217, 217, 0.5);
|
|
background-color: white;
|
|
color: black;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
text-align: left;
|
|
gap: 10px;
|
|
padding: 0;
|
|
}
|
|
button span {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 9px 15px 9px 27px;
|
|
word-break: break-word;
|
|
}
|
|
button span.with-image {
|
|
padding: 0px 10px 0px 5px;
|
|
flex: 0 1 50%;
|
|
}
|
|
button img {
|
|
object-fit: cover;
|
|
height: 100%;
|
|
max-width: 130px;
|
|
width: 100%;
|
|
border-radius: 7px 0px 0px 7px;
|
|
flex: 0 1 50%;
|
|
}
|
|
@media (max-width: 600px) {
|
|
button {
|
|
flex-direction: column;
|
|
}
|
|
button img {
|
|
width: 100%;
|
|
border-radius: 7px 7px 0px 0px;
|
|
height: 200px;
|
|
max-width: unset;
|
|
flex: unset;
|
|
}
|
|
button span.with-image {
|
|
padding: 0px 15px 9px 25px;
|
|
flex: unset;
|
|
}
|
|
}
|
|
button svg {
|
|
height: 1rem;
|
|
stroke-width: 2;
|
|
min-width: 2rem;
|
|
}
|
|
|
|
#buttonContainer {
|
|
display: grid;
|
|
grid-template-columns: calc(50% - 6.5px) calc(50% - 6.5px);
|
|
gap: 13px 13px;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
#buttonContainer {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #f7fafa;
|
|
}
|
|
|
|
#questionContainer {
|
|
opacity: 0;
|
|
transition: opacity 0.25s ease-in-out;
|
|
width: 100%;
|
|
}
|
|
|
|
#questionContainer.show {
|
|
opacity: 1;
|
|
}
|
|
|
|
#questionContainer > svg {
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
</style>
|
|
<style>
|
|
.thumb-lg {
|
|
height: 70px;
|
|
width: 70px;
|
|
}
|
|
.card {
|
|
border: 1px solid #d5d9d9;
|
|
border-radius: 8px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.card-body {
|
|
padding: 0rem !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.m-b-30 {
|
|
margin-bottom: 30px;
|
|
}
|
|
.social-links {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem 0;
|
|
}
|
|
.social-links i {
|
|
padding-top: 0.3rem;
|
|
}
|
|
.social-links li {
|
|
color: rgba(33, 37, 41, 0.75);
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 0.5rem 1rem;
|
|
}
|
|
.social-links li a {
|
|
color: rgba(33, 37, 41, 0.75);
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
}
|
|
.media {
|
|
display: flex;
|
|
gap: 1.25rem;
|
|
align-items: center;
|
|
padding: 1.25rem;
|
|
}
|
|
.media-body p {
|
|
margin: 0;
|
|
}
|
|
.contact {
|
|
padding: 1.5rem;
|
|
background: #f0f5f9;
|
|
}
|
|
.hide {
|
|
display: none !important;
|
|
}
|
|
</style>
|
|
<script>
|
|
var questions = {
|
|
"1": {
|
|
"question": "Wildtier gefunden",
|
|
"explanation": "Für Felltiere, Vögel und Igel gibt es verschiedene Ansprechpartner.<br>Falls Sie einen verletzten Vogel gefunden haben, folgen Sie bitte der Anleitung „Vogel“.<br><br>Immer wenn ein Feld blau unterlegt ist, rufen Sie direkt die angegebene Nummer an.",
|
|
"options": {
|
|
"1": {
|
|
"title": "Fell",
|
|
"image": "https://peterlaustercommunity.de/l_f/uploads/gallery/album_45/tn_gallery_14_45_6090.jpg"
|
|
},
|
|
"2": {
|
|
"title": "Igel",
|
|
"image": "https://kamera-im-vogelhaus.de/wp-content/uploads/2020/02/igel-junge.jpg"
|
|
},
|
|
"3": {
|
|
"title": "Vogel (Keine Zwangsfütterung)",
|
|
"image": "https://dier-en-natuur.infonu.nl/artikel-foto-upload/vogels/109157-de-vink-een-oer-hollandse-vogel.jpg"
|
|
},
|
|
},
|
|
"nextQuestions": {
|
|
"1": "13",
|
|
"2": "14",
|
|
"3": "2"
|
|
}
|
|
},
|
|
"2": {
|
|
"question": "Vogel",
|
|
"explanation": "Um welche Vogelart handelt es sich?",
|
|
"options": {
|
|
"1": { "title": "Greifvogel (verletzt / unverletzt)" },
|
|
"2": { "title": "Taube" },
|
|
"3": { "title": "Rabenvögel" },
|
|
"4": { "title": "Gänsevögel / Wasservogel" },
|
|
"5": { "title": "Schreitvögel (Storch, Reiher, Kranich)" },
|
|
"6": { "title": "Kleinvogel" }
|
|
},
|
|
"nextQuestions": {
|
|
"1": "11",
|
|
"2": "10",
|
|
"3": "12",
|
|
"4": "12",
|
|
"5": "12",
|
|
"6": "3",
|
|
}
|
|
},
|
|
"3": {
|
|
"question": "Kleinvogel",
|
|
"explanation": "In welchem sichtbaren Zustand befindet sich der Vogel?<br><br>Verletzt: Fliegt nicht weg oder hat eindeutige Verletzungen, z.B. Flügelbruch, kann nicht laufen.",
|
|
"options": {
|
|
"1": { "title": "Verletzt" },
|
|
"2": { "title": "Unverletzt" }
|
|
},
|
|
"nextQuestions": {
|
|
"1": "10",
|
|
"2": "4"
|
|
}
|
|
},
|
|
"4": {
|
|
"question": "Unverletzter Kleinvogel",
|
|
"explanation": "Handelt es sich um einen ausgewachsenen Vogel oder ein Jungtier/Küken?",
|
|
"options": {
|
|
"1": { "title": "Ausgewachsen" },
|
|
"2": { "title": "Jungvogel / Küken" }
|
|
},
|
|
"nextQuestions": {
|
|
"1": "5",
|
|
"2": "9"
|
|
}
|
|
},
|
|
"5": {
|
|
"question": "Ausgewachsener, unverletzter Kleinvogel",
|
|
"explanation": "Wie verhält sich der Vogel bei einigen Minuten Beobachtung?",
|
|
"options": {
|
|
"1": { "title": "Agil, lebhaft, fliegt nicht weg" },
|
|
"2": { "title": "Apathisch, wirkt benommen, unbeweglich" }
|
|
},
|
|
"nextQuestions": {
|
|
"1": "6",
|
|
"2": "7"
|
|
}
|
|
},
|
|
"6": {
|
|
"question": "Ausgewachsener, unverletzter Kleinvogel",
|
|
"explanation": "Auffällige Verhaltensmuster",
|
|
"options": {
|
|
"1": { "title": "Hüpft herum" },
|
|
"2": { "title": "Kopf in Schieflage" },
|
|
"3": { "title": "Sitzt herum" }
|
|
},
|
|
"nextQuestions": {
|
|
"1": "8",
|
|
"2": "10",
|
|
"3": "7",
|
|
}
|
|
},
|
|
"7": {
|
|
"question": "Ausgewachsener, unverletzter Kleinvogel",
|
|
"explanation": "Setzen Sie den Vogel in einen Karton in eine schattige ruhige Ecke. Halten Sie Katzen fern und stellen Sie Wasser bereit.<br><br>Bei keiner eintretenden Verbesserung, kann die Entscheidung schwierig sein. Im Zweifel am besten beim Tierarzt anrufen; wenn das nicht geht, die Hotline von WiTAS nutzen.<br><br>Sofern es sich um einen Fensterflieger handelt, finden Sie <a target=new href=''>hier</a> <font color='red'><b>(INFO: Dieser Link muss auf eine WiTAS Seite verlinken mit Infos zu Fensterfliegern)</b></font> weitere Informationen.",
|
|
"options": {
|
|
"1": { "title": "Weiterhin schlechter Zustand" },
|
|
"2": { "title": "Besserer Zustand" }
|
|
},
|
|
"nextQuestions": {
|
|
"1": "10",
|
|
"2": "8",
|
|
}
|
|
},
|
|
"8": {
|
|
"question": "Ausgewachsener, unverletzter Kleinvogel",
|
|
"explanation": "<b>Starthilfe</b>: Bringen Sie den Vogel zu einer Rohezone im Freien (Erhöhte Ebene bei Mauerseglern). Stellen Sie Wasser bereit. Sie müssen dem Vogel zu nichts zwingen.<br><br>Sofern Schwierigkeiten bestehen, bitte melden Sie sich umgehend an unseren Witas-Kontakt. Wir melden uns umgehend bei ihnen zurück.",
|
|
"contacts": {
|
|
"1": {
|
|
"name": "WiTAS Kontakt",
|
|
"mail": "test@test.de",
|
|
},
|
|
},
|
|
},
|
|
"9": {
|
|
"question": "Junger, unverletzter Kleinvogel",
|
|
"explanation": "Weitere Charakterisierung",
|
|
"options": {
|
|
"1": { "title": "Mit Federn" },
|
|
"2": { "title": "Ohne Federn" }
|
|
},
|
|
"nextQuestions": {
|
|
"1": "20",
|
|
"2": "21",
|
|
}
|
|
},
|
|
"10": {
|
|
"question": "Taube / Verletzter Kleinvogel",
|
|
"explanation": "Bitte nehmen Sie in diesem Fall umgehend Kontakt mit einer der folgenden Tierarztpraxen auf:",
|
|
"contacts": {
|
|
"1": {
|
|
"name": "Dr. Gerd Britsch",
|
|
"title": "Vogel- und Reptilienpraxis",
|
|
"tel": "+49 (0)721 6184280",
|
|
"mail": "info@vogel-und-reptilien-tierarzt.de",
|
|
"web": "vogel-und-reptilien-tierarzt.de",
|
|
"address": "Am Storrenacker 1b, 76139 Karlsruhe",
|
|
},
|
|
"2": {
|
|
"name": "Dr. Kothe",
|
|
"title": "Vogel- und Reptilienpraxis",
|
|
"tel": "+49 (0)721 6184280",
|
|
"mail": "info@vogel-und-reptilien-tierarzt.de",
|
|
"web": "vogel-und-reptilien-tierarzt.de",
|
|
"address": "Am Storrenacker 1b, 76139 Karlsruhe",
|
|
},
|
|
},
|
|
},
|
|
"11": {
|
|
"question": "Greifvogel",
|
|
"explanation": "Z.B. Falke oder Habicht. Deutlich nach unten gebogener Schnabel.<br><br>Falknerei Mans<br>07251/4743<br>0151-23260704",
|
|
},
|
|
"12": {
|
|
"question": "Gänse, Raben-, Wasser- oder Schreitvögel",
|
|
"explanation": "Bitte nehmen Sie in diesem Fall umgehend Kontakt mit dem Veterinäramt bzw. Wildtierbeauftragten auf:",
|
|
"contacts": {
|
|
"1": {
|
|
"name": "Veterinäramt",
|
|
"title": "?",
|
|
"tel": "?",
|
|
"mail": "?",
|
|
"web": "?",
|
|
"address": "?",
|
|
},
|
|
"2": {
|
|
"name": "Wildtierbeauftragten",
|
|
"title": "?",
|
|
"tel": "?",
|
|
"mail": "?",
|
|
"web": "?",
|
|
"address": "?",
|
|
},
|
|
},
|
|
},
|
|
"13": {
|
|
"question": "Fell",
|
|
"explanation": "Wenn Sie ein Tier finden, ist es zuerst wichtig zu entscheiden, ob dieses Tier von WiTAS versorgt werden könnte. Noch besser wäre es, wenn Sie das Tier selbst versorgen könnten. Dafür haben wir diese <a href='#'>Handlungsanweisung</a> erstellt.",
|
|
},
|
|
"14": {
|
|
"question": "Igel",
|
|
"explanation": "Wenn Sie ein Tier finden, ist es zuerst wichtig zu entscheiden, ob dieses Tier von WiTAS versorgt werden könnte. Noch besser wäre es, wenn Sie das Tier selbst versorgen könnten. Dafür haben wir diese <a href='#'>Handlungsanweisung</a> erstellt.",
|
|
},
|
|
"15": {
|
|
"question": "WiTAS Kontakt",
|
|
"explanation": "Kontakt",
|
|
"contacts": {
|
|
"1": {
|
|
"name": "WiTAS Kontakt",
|
|
"mail": "test@test.de",
|
|
},
|
|
},
|
|
},
|
|
"20": {
|
|
"question": "Junger, unverletzter Kleinvogel",
|
|
"explanation": "Aus einiger Entfernung beobachten (min 30 Minuten), bei Bedarf aus der Gefahrenzone bringen.",
|
|
"options": {
|
|
"1": { "title": "Vogel wird von Eltern gefüttert" },
|
|
"2": { "title": "Vogel wird von Eltern NICHT gefüttert" }
|
|
},
|
|
"nextQuestions": {
|
|
"1": "23",
|
|
"2": "15",
|
|
}
|
|
},
|
|
"21": {
|
|
"question": "Junger, unverletzter Kleinvogel",
|
|
"explanation": "Befindet sich ein Vogelnest in sichtbarer und zugänglicher Nähe?",
|
|
"options": {
|
|
"1": { "title": "Nest sichtbar" },
|
|
"2": { "title": "Kein Nest" }
|
|
},
|
|
"nextQuestions": {
|
|
"1": "22",
|
|
"2": "15",
|
|
}
|
|
},
|
|
"22": {
|
|
"question": "Junger, unverletzter Kleinvogel",
|
|
"explanation": "Setzen Sie den Jungvogel wieder zurück in das Nest.",
|
|
},
|
|
"23": {
|
|
"question": "Junger, unverletzter Kleinvogel",
|
|
"explanation": "Sie können den Vogel soweit in Ruhe lassen.",
|
|
},
|
|
};
|
|
|
|
var currentQuestionId = "1";
|
|
var previousQuestionId = null;
|
|
|
|
window.onhashchange = function() {
|
|
var questionId = window.location.hash.substring(1);
|
|
if (questionId in questions) {
|
|
displayQuestion(questionId);
|
|
} else {
|
|
displayQuestion();
|
|
}
|
|
};
|
|
|
|
function renderContact(name, title, tel, mail, web, address) {
|
|
var template = document.getElementById('cardTemplate').content.cloneNode(true);
|
|
|
|
template.querySelector('.media-body h5').textContent = name;
|
|
template.querySelector('.media-body p').textContent = title;
|
|
template.querySelector('.fa-phone + a').textContent = tel;
|
|
template.querySelector('.fa-phone + a').href = 'tel:' + tel;
|
|
template.querySelector('.fa-envelope + a').textContent = mail;
|
|
template.querySelector('.fa-envelope + a').href = 'mailto:' + mail;
|
|
template.querySelector('.fa-home + a').textContent = web;
|
|
template.querySelector('.fa-home + a').href = 'https://' + web;
|
|
template.querySelector('.fa-map + a').textContent = address;
|
|
template.querySelector('.fa-map + a').href = 'https://www.google.de/maps/place/' + address;
|
|
|
|
if (tel) {
|
|
template.querySelector('.entry-phone').classList.remove('hide');
|
|
}
|
|
if (mail) {
|
|
template.querySelector('.entry-envelope').classList.remove('hide');
|
|
}
|
|
if (web) {
|
|
template.querySelector('.entry-home').classList.remove('hide');
|
|
}
|
|
if (address) {
|
|
template.querySelector('.entry-map').classList.remove('hide');
|
|
}
|
|
|
|
var questionContainer = document.getElementById('questionContainer');
|
|
questionContainer.appendChild(template);
|
|
}
|
|
|
|
function displayQuestion(questionId=1) {
|
|
|
|
currentQuestionId = questionId;
|
|
currentQuestionId = parseInt(currentQuestionId, 10);
|
|
var questionContainer = document.getElementById('questionContainer');
|
|
questionContainer.classList.remove('show');
|
|
|
|
var secondProgressSteps = document.querySelectorAll('.progress-tracker li:nth-child(2)');
|
|
secondProgressSteps.forEach(function(firstProgressStep) {
|
|
if (currentQuestionId === 1) {
|
|
firstProgressStep.classList.remove('is-complete');
|
|
}
|
|
if (currentQuestionId > 1) {
|
|
firstProgressStep.classList.add('is-complete');
|
|
}
|
|
});
|
|
var lastProgressSteps = document.querySelectorAll('.progress-tracker li:nth-child(3)');
|
|
lastProgressSteps.forEach(function(lastProgressStep) {
|
|
if ([10, 11, 12, 13, 14, 15, 22, 23].includes(currentQuestionId)) {
|
|
lastProgressStep.classList.add('is-complete');
|
|
} else {
|
|
lastProgressStep.classList.remove('is-complete');
|
|
}
|
|
});
|
|
|
|
setTimeout(function() {
|
|
questionContainer.innerHTML = '';
|
|
var question = questions[currentQuestionId];
|
|
|
|
if (currentQuestionId !== 1) {
|
|
questionContainer.innerHTML += '<i data-feather="chevron-left"></i>';
|
|
var backLink = document.createElement('a');
|
|
backLink.classList.add('backLink');
|
|
backLink.innerText = 'Zurück';
|
|
backLink.href = 'javascript:history.back()';
|
|
questionContainer.appendChild(backLink);
|
|
}
|
|
|
|
questionContainer.innerHTML += '<h2>' + question.question + '</h2>';
|
|
questionContainer.innerHTML += '<p>' + question.explanation + '</p>';
|
|
|
|
var buttonContainer = document.createElement('div');
|
|
buttonContainer.id = 'buttonContainer';
|
|
|
|
for (var optionId in question.options) {
|
|
var button = document.createElement('button');
|
|
button.innerText = question.options[optionId].title;
|
|
button.value = question.nextQuestions[optionId];
|
|
button.id = 'option' + optionId;
|
|
var imageLink = question.options[optionId].image;
|
|
|
|
var span = document.createElement('span');
|
|
while (button.firstChild) {
|
|
span.appendChild(button.firstChild);
|
|
}
|
|
var icon = document.createElement('i');
|
|
icon.setAttribute('data-feather', 'chevron-right');
|
|
span.appendChild(icon);
|
|
if (imageLink) {
|
|
span.setAttribute('class', 'with-image' );
|
|
}
|
|
|
|
button.appendChild(span);
|
|
|
|
if (imageLink) {
|
|
var image = document.createElement('img');
|
|
image.setAttribute('src', imageLink);
|
|
button.insertBefore(image, button.firstChild);
|
|
};
|
|
|
|
button.addEventListener('click', function() {
|
|
previousQuestionId = currentQuestionId;
|
|
currentQuestionId = this.value;
|
|
window.location.hash = currentQuestionId;
|
|
setTimeout(displayQuestion(currentQuestionId), 250);
|
|
});
|
|
|
|
buttonContainer.appendChild(button);
|
|
}
|
|
|
|
var mainContainer = document.querySelector('main');
|
|
mainContainer.classList.remove('show');
|
|
void mainContainer.offsetWidth;
|
|
mainContainer.classList.add('show');
|
|
|
|
questionContainer.appendChild(buttonContainer);
|
|
feather.replace();
|
|
|
|
questionContainer.classList.add('show');
|
|
|
|
if ('contacts' in question) {
|
|
Object.keys(question.contacts).forEach(function(key) {
|
|
var contact = question.contacts[key];
|
|
renderContact(contact.name, contact.title, contact.tel, contact.mail, contact.web, contact.address);
|
|
});
|
|
}
|
|
}, 500);
|
|
}
|
|
|
|
var initialQuestionId = window.location.hash.substring(1);
|
|
if (initialQuestionId in questions) {
|
|
displayQuestion(initialQuestionId);
|
|
} else {
|
|
displayQuestion();
|
|
}
|
|
|
|
feather.replace();
|
|
</script>
|
|
</body>
|
|
</html>
|