869 lines
32 KiB
HTML
869 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<title>Questionnaire Wizard</title>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||
<script src="assets/feather.min.js"></script>
|
||
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
|
||
<link rel="stylesheet" href="assets/styles/progress-tracker.css">
|
||
</head>
|
||
<body>
|
||
<div class="questionaire">
|
||
|
||
<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="fi-phone" data-feather="phone"></i>
|
||
<a href="">
|
||
<span></span>
|
||
</a>
|
||
</li>
|
||
<li class="entry-envelope hide">
|
||
<i class="fi-envelope" data-feather="mail"></i>
|
||
<a href="">
|
||
<span></span>
|
||
</a>
|
||
</li>
|
||
<li class="entry-home hide">
|
||
<i class="fi-home" data-feather="home"></i>
|
||
<a target=new href="">
|
||
<span></span>
|
||
</a>
|
||
</li>
|
||
<li class="entry-map hide">
|
||
<i class="fi-map" data-feather="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.9rem;
|
||
font-weight: 500;
|
||
padding: 1rem;
|
||
width: 34px;
|
||
height: 34px;
|
||
}
|
||
.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: .25rem 0 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;
|
||
hyphens: auto;
|
||
}
|
||
button span.with-image {
|
||
padding: 0px 10px 0px 5px;
|
||
flex: 0 1 50%;
|
||
}
|
||
button img {
|
||
object-fit: cover;
|
||
object-position: top;
|
||
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 > p {
|
||
padding: 1.5rem 0;
|
||
}
|
||
|
||
#questionContainer.show {
|
||
opacity: 1;
|
||
}
|
||
|
||
#questionContainer > svg {
|
||
margin-bottom: 3px;
|
||
height: 16px;
|
||
padding-top: 2px;
|
||
margin-left: -5px;
|
||
}
|
||
|
||
</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;
|
||
}
|
||
.card-body svg {
|
||
height: 1rem;
|
||
stroke-width: 2;
|
||
min-width: 2rem;
|
||
}
|
||
.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;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
.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": "<b>WiTAS-Anlaufstellen und Informationen</b><br><br>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“.",
|
||
"description": "<br><br><b>Grundsätzliches</b><br><br>Wenn Sie ein Wildtier finden, gilt es zunächst, Ruhe zu bewahren. Nicht jedes Wildtier benötigt tatsächlich unsere Hilfe – oft kommen die Tiere sehr gut ohne unser Eingreifen zurecht.<br><br><b>Beobachten aus sicherer Distanz</b><br><br>Bei allen Wildtieren sollte man zunächst Abstand halten, um sich selbst zu schützen und den Tieren unnötigen Stress zu ersparen. Und Jungtiere werden nicht von den Eltern versorgt, wenn Menschen in unmittelbarer Nähe sind.<br><br><b>Wildtier in Not einfangen</b><br><br>Oft kann ein Handtuch oder eine Decke beim Einfangen helfen, sich selbst und das Tier vor unnötigen Verletzungen zu schützen.<br><br><b>Transport</b><br><br><ul><li>Eine möglichst kleine Box minimiert das Verletzungsrisiko für das Tier. <li>Luftlöcher und eine Polsterung z.B. aus Lappen oder Küchenpapier</li><li>Keine Nahrung anbieten oder gar einflößen.</li><li>Für eine angemessene Temperatur sorgen: genügend Wärme im Winter, Kühle bei heißem Wetter.</li></ul><b>Die WiTAS</b><br><br><ul><li>kümmert sich um alle einheimischen Wildtiere</li><li>Ist nicht zuständig für Stadttauben, Heimtiere wie Hauskaninchen oder Hamster und Exoten.</li></ul>",
|
||
"options": {
|
||
"1": {
|
||
"title": "Fell",
|
||
"image": "/assets/images/squirrel.webp"
|
||
},
|
||
"2": {
|
||
"title": "Igel",
|
||
"image": "/assets/images/hedgehog.webp"
|
||
},
|
||
"3": {
|
||
"title": "Vogel",
|
||
"image": "/assets/images/trauerschnaepper.webp"
|
||
},
|
||
"4": {
|
||
"title": "Fleder­maus",
|
||
"image": "/assets/images/bat.webp"
|
||
},
|
||
},
|
||
"nextQuestions": {
|
||
"1": "https://www.witas-ka.de/unsere-sch%C3%BCtzlinge/wildtier-gefunden/eichh%C3%B6rnchen/",
|
||
"2": "https://www.witas-ka.de/unsere-sch%C3%BCtzlinge/wildtier-gefunden/igel/",
|
||
"3": "2",
|
||
"4": "https://www.witas-ka.de/unsere-sch%C3%BCtzlinge/wildtier-gefunden/fledermaus/"
|
||
}
|
||
},
|
||
"2": {
|
||
"question": "Vogel",
|
||
"explanation": "Um welche Vogelart handelt es sich?",
|
||
"options": {
|
||
"1": {
|
||
"title": "Greif­vogel",
|
||
"image": "/assets/images/bussard.webp"
|
||
},
|
||
"2": {
|
||
"title": "Taube",
|
||
"image": "/assets/images/pigeon.webp"
|
||
},
|
||
"3": {
|
||
"title": "Raben­vögel",
|
||
"image": "/assets/images/rabe.webp"
|
||
},
|
||
"4": {
|
||
"title": "Gänse­vögel / Wasservogel",
|
||
"image": "/assets/images/ente.webp"
|
||
},
|
||
"5": {
|
||
"title": "Schreitvögel (Storch, Reiher, Kranich)",
|
||
"image": "/assets/images/storch.webp"
|
||
},
|
||
"6": {
|
||
"title": "Klein­vogel",
|
||
"image": "/assets/images/trauerschnaepper.webp"
|
||
}
|
||
},
|
||
"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": "16",
|
||
"2": "4"
|
||
}
|
||
},
|
||
"4": {
|
||
"question": "Unverletzter Kleinvogel",
|
||
"explanation": "Handelt es sich um einen ausgewachsenen Vogel oder ein Jungtier/Küken?",
|
||
"options": {
|
||
"1": {
|
||
"title": "Ausgewachsen",
|
||
"image": "assets/images/ausgewachsen_kleinvogel.webp"
|
||
},
|
||
"2": {
|
||
"title": "Jung­vogel / Küken",
|
||
"image": "assets/images/kueken.webp"
|
||
}
|
||
},
|
||
"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": "16",
|
||
"3": "7",
|
||
}
|
||
},
|
||
"7": {
|
||
"question": "Ausgewachsener, unverletzter Kleinvogel",
|
||
"explanation": "Legen Sie den Vogel behutsam in einen mit Luftlöchern versehenen Papkarton, der mit Küchenpapier oder ähnlichen ausgepolstert ist. Schließen Sie den Decke, die Dunkelheit wirkt beruhigend auf den Vogel. <br><br><u>Wichtig</u>: Dem Vogel keine Nahrung oder Wasser einflößen. Das kann zum Ersticken führen. Geöffneter Schnabel und schnelles Atem sind ein Zeichen für Stress, nicht für Durst. <br><br>Halten Sie Katzen fern und stellen Sie Wasser bereit. <font color='red'><b>(?)</b></font><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": "16",
|
||
"2": "8",
|
||
}
|
||
},
|
||
"8": {
|
||
"question": "Ausgewachsener, unverletzter Kleinvogel",
|
||
"explanation": "Hat der Vogel sich nach 1 bis 2 Stunden erholt, bringen Siei hn in dem Karton ins Freie (kein geschlossener Raum!) und lassen ihn fliegen.<br><br> <b>Starthilfe</b>: Bringen Sie den Vogel zu einer Rohezone im Freien. Bei Mauerseglern ist eine höhere Startebene erforderlich. Werfen Sie den Mauersegler auf keinen Fall in die Luft, denn dann fällt er zu Boden und kann sich schwer verletzen. Halten Sie den Segler auf der flachen Hand. Wenn er nicht von allein startet, wird er den Abflug nicht schaffen. Versuchen Sie es später oder an einem anderen Ort noch einmal.<br><font color='red'><b>Link auf Witas Seite, Achtung Unterscheidung Mauersegler oder Schwalbe (mit Bildern)</b></font> Stellen Sie Wasser bereit.<br>Beste Tageszeit für die Starthilfe ist abends oder früh morgens, nicht bei Hitze. <br><br>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",
|
||
"image": "/assets/images/kleinvogel_mit_federn.webp"
|
||
},
|
||
"2": {
|
||
"title": "Ohne Federn",
|
||
"image": "/assets/images/kleinvogel_ohne_federn.webp"
|
||
}
|
||
},
|
||
"nextQuestions": {
|
||
"1": "20",
|
||
"2": "21",
|
||
}
|
||
},
|
||
"10": {
|
||
"question": "Taube / Verletzter Kleinvogel",
|
||
"explanation": "Handelt es sich bei der verletzten Taube um eine Stadt- oder Wildtaube? Unterscheidungskriterien finden Sie <a href=http://graumännchen.org/wildtauben/ target=new>hier</a>.",
|
||
"options": {
|
||
"1": {
|
||
"title": "Stadt­taube",
|
||
"image": "/assets/images/pigeon.webp"
|
||
},
|
||
"2": {
|
||
"title": "Wild­taube",
|
||
"image": "/assets/images/dovepigeon.webp"
|
||
}
|
||
},
|
||
"nextQuestions": {
|
||
"1": "http://stadttaubenkonzept-karlsruhe.de",
|
||
"2": "17"
|
||
}
|
||
},
|
||
"11": {
|
||
"question": "Greifvogel",
|
||
"explanation": "Z.B. Falke oder Habicht. Deutlich nach unten gebogener Schnabel.",
|
||
"contacts": {
|
||
"1": {
|
||
"name": "Falknerei Mans",
|
||
"title": "???",
|
||
"tel": "+49 (0)7251 4743",
|
||
"mail": "???",
|
||
"web": "???",
|
||
"address": "Am Storrenacker 1b, 76139 Karlsruhe",
|
||
},
|
||
}
|
||
},
|
||
"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",
|
||
},
|
||
},
|
||
},
|
||
"16": {
|
||
"question": "Verletzte Wildtaube / 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": "Frau Dr. Ruth 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",
|
||
},
|
||
},
|
||
},
|
||
"17": {
|
||
"question": "Wildtaube",
|
||
"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": "16",
|
||
"2": "NEUES KONTAKTFORMULAR"
|
||
}
|
||
},
|
||
"20": {
|
||
"question": "Junger, unverletzter Kleinvogel",
|
||
"explanation": "Aus einiger Entfernung beobachten (min 30 Minuten), bei Bedarf aus der Gefahrenzone bringen. Wird der Kleinvogel von seinen Eltern gefüttert?",
|
||
"options": {
|
||
"1": {
|
||
"title": "Wird gefüttert",
|
||
"image": "/assets/images/kleinvogel_gefuettert.webp"
|
||
},
|
||
"2": {
|
||
"title": "Wird NICHT gefüttert",
|
||
"image": "/assets/images/kleinvogel_mit_federn.webp"
|
||
}
|
||
},
|
||
"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('.fi-phone + a').textContent = tel;
|
||
template.querySelector('.fi-phone + a').href = 'tel:' + tel;
|
||
template.querySelector('.fi-envelope + a').textContent = mail;
|
||
template.querySelector('.fi-envelope + a').href = 'mailto:' + mail;
|
||
template.querySelector('.fi-home + a').textContent = web;
|
||
template.querySelector('.fi-home + a').href = 'https://' + web;
|
||
template.querySelector('.fi-map + a').textContent = address;
|
||
template.querySelector('.fi-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);
|
||
feather.replace();
|
||
}
|
||
|
||
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.innerHTML = 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() {
|
||
if ("http" === this.value.substring(0,4)) {
|
||
window.open(this.value,'_blank');
|
||
};
|
||
if ("https" === this.value.substring(0,5)) {
|
||
window.location = this.value;
|
||
};
|
||
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);
|
||
|
||
// if ("description" in question) {
|
||
// questionContainer.innerHTML += '<div>' + question.description + '</div>';
|
||
// };
|
||
|
||
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>
|