896 lines
33 KiB
HTML
896 lines
33 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">
|
||
<a href="#1"><h4 class="progress-title">Wildtier gefunden</h4></a>
|
||
</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">
|
||
<a href="#1"><h4 class="progress-title">Wildtier gefunden</h4></a>
|
||
</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="assets/images/unknown_member.jpg" 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 a {
|
||
text-decoration: none;
|
||
color: unset;
|
||
}
|
||
.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;
|
||
}
|
||
.descriptionContainer {
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.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;
|
||
margin-top: 0.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: top;
|
||
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. Falls Sie zum Beispiel einen verletzten Vogel gefunden haben, folgen Sie bitte der Anleitung „Vogel“.",
|
||
"description": "<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 einheimische 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": "link+https://www.witas-ka.de/unsere-sch%C3%BCtzlinge/wildtier-gefunden/eichh%C3%B6rnchen/",
|
||
"2": "link+https://www.witas-ka.de/unsere-sch%C3%BCtzlinge/wildtier-gefunden/igel/",
|
||
"3": "2",
|
||
"4": "30",
|
||
}
|
||
},
|
||
"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 Vogel",
|
||
"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>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 Vogel, der gegen eine Fensterscheibe geflogen ist (Fensterflieger) handelt, finden Sie <a target=new href='https://www.witas-ka.de/app/download/7711366364/Wi005_Vogelschlag.pdf?t=1715948541'>hier</a> 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": "vogelfund@witas-ka.de",
|
||
},
|
||
},
|
||
"isComplete": true,
|
||
},
|
||
"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": "linknew+http://stadttaubenkonzept-karlsruhe.de",
|
||
"2": "17"
|
||
}
|
||
},
|
||
"11": {
|
||
"question": "Greifvogel",
|
||
"explanation": "Z.B. Falke oder Habicht. Deutlich nach unten gebogener Schnabel.",
|
||
"contacts": {
|
||
"1": {
|
||
"name": "Falknerei Karlsruhe",
|
||
"tel": "0163 5845626",
|
||
"mail": "info@falknerei-karlsruhe.de",
|
||
"web": "https://www.falknerei-karlsruhe.de",
|
||
"address": "Rintheimer Hauptstraße 79, 76131 Karlsruhe",
|
||
},
|
||
},
|
||
"isComplete": true,
|
||
},
|
||
"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 Karlsruhe",
|
||
"tel": "0721 1337101",
|
||
"address": "Helmhotzstraße 9/11, 76133 Karlsruhe",
|
||
},
|
||
"2": {
|
||
"name": "Wildtierbeauftragte Karlsruhe",
|
||
"address": "Forstamt Karlsruhe, Waldzentrum, Linkenheimer Allee 10, 76131 Karlsruhe",
|
||
},
|
||
},
|
||
"isComplete": true,
|
||
},
|
||
"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.",
|
||
"isComplete": true,
|
||
},
|
||
"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.",
|
||
"isComplete": true,
|
||
},
|
||
"15": {
|
||
"question": "WiTAS Kontakt",
|
||
"explanation": "Kontakt",
|
||
"contacts": {
|
||
"1": {
|
||
"name": "WiTAS Kontakt",
|
||
"mail": "vogelfund@witas-ka.de",
|
||
},
|
||
},
|
||
"isComplete": true,
|
||
},
|
||
"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": "www.vogel-und-reptilien-tierarzt.de",
|
||
"address": "Am Storrenacker 1b, 76139 Karlsruhe",
|
||
},
|
||
"2": {
|
||
"name": "Frau Dr. Ruth Kothe",
|
||
"title": "Tierärztliche Praxis für Kleintiere und Vögel",
|
||
"tel": "07249 955 5851",
|
||
"mail": "info@tierarzt-stutensee.de",
|
||
"web": "tierarzt-stutensee.de",
|
||
"address": "Friedrich-Weinbrenner-Str. 1, 76297 Stutensee-Friedrichstal",
|
||
},
|
||
},
|
||
"description": "Verletzte Vögel müssen nach der tierärztlichen Behandlung unter Umständen gesund gepflegt bzw. bis zur Auswilderung versorgt werden. Die Kosten für den Tierarzt und Sachmittel übernimmt ggf. WiTAS. Allerdings sind Spenden sehr willkommen. Bitte hierzu eine Info an <a href='mailto:vogelfund@witas-ka.de'>vogelfund@witas-ka.de</a>.",
|
||
"isComplete": true,
|
||
},
|
||
"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": "4"
|
||
}
|
||
},
|
||
"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",
|
||
},
|
||
"description": "Weitere Informationen dazu finden Sie <a href='FIXME'>hier</a>.",
|
||
},
|
||
"22": {
|
||
"question": "Junger, unverletzter Kleinvogel",
|
||
"explanation": "Setzen Sie den Jungvogel wieder zurück in das Nest.",
|
||
"isComplete": true,
|
||
},
|
||
"23": {
|
||
"question": "Junger, unverletzter Kleinvogel",
|
||
"explanation": "Sie können den Vogel soweit in Ruhe lassen.",
|
||
"isComplete": true,
|
||
},
|
||
"30": {
|
||
"question": "Fledermaus",
|
||
"explanation": "Bitte wenden Sie sich an folgenden Kontakt.",
|
||
"contacts": {
|
||
"1": {
|
||
"name": "Fledermaus Nottelefon",
|
||
"tel": "0179 4972 995",
|
||
},
|
||
},
|
||
"isComplete": true,
|
||
},
|
||
};
|
||
|
||
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 question = questions[currentQuestionId];
|
||
|
||
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 (question.isComplete) {
|
||
lastProgressStep.classList.add('is-complete');
|
||
} else {
|
||
lastProgressStep.classList.remove('is-complete');
|
||
}
|
||
});
|
||
|
||
setTimeout(function() {
|
||
questionContainer.innerHTML = '';
|
||
|
||
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 ("linknew+" === this.value.substring(0,8)) {
|
||
window.open(this.value.substring(8),'_blank');
|
||
return 0;
|
||
};
|
||
if ("link+" === this.value.substring(0,5)) {
|
||
window.location = this.value.substring(5);
|
||
return 0;
|
||
};
|
||
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 ('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);
|
||
});
|
||
}
|
||
|
||
if ("description" in question) {
|
||
var descriptionDiv = document.createElement('div');
|
||
descriptionDiv.classList.add('descriptionContainer');
|
||
descriptionDiv.innerHTML = question.description;
|
||
questionContainer.appendChild(descriptionDiv);
|
||
};
|
||
|
||
feather.replace();
|
||
questionContainer.classList.add('show');
|
||
|
||
}, 500);
|
||
}
|
||
|
||
var initialQuestionId = window.location.hash.substring(1);
|
||
if (initialQuestionId in questions) {
|
||
displayQuestion(initialQuestionId);
|
||
} else {
|
||
displayQuestion();
|
||
}
|
||
|
||
feather.replace();
|
||
</script>
|
||
</body>
|
||
</html>
|