614 lines
22 KiB
HTML
614 lines
22 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>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="card m-b-30">
|
|
<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">Dr. Gerd Britsch</h5>
|
|
<p class="text-muted font-14">Vogel- und Reptilienpraxis</p>
|
|
</div>
|
|
</div>
|
|
<div class="contact">
|
|
<ul class="social-links mb-0">
|
|
<li>
|
|
<i class="fa fa-phone"></i>
|
|
<a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="1234567890">
|
|
<span>+49 (0)721 6184280</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-envelope"></i>
|
|
<a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Facebook">
|
|
<span>info@vogel-und-reptilien-tierarzt.de</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-home"></i>
|
|
<a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Twitter">
|
|
<span>vogel-und-reptilien-tierarzt.de</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-map"></i>
|
|
<a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="@skypename">
|
|
<span>Am Storrenacker 1b, 76139 Karlsruhe</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</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;
|
|
}
|
|
@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;
|
|
padding: 9px 15px 9px 27px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
text-align: left;
|
|
gap: 10px;
|
|
}
|
|
|
|
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: none;
|
|
box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.card-body {
|
|
padding: 1.5rem 1.5rem 1rem 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
.m-b-30 {
|
|
margin-bottom: 30px;
|
|
}
|
|
.social-links {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
.social-links li {
|
|
color: rgba(33, 37, 41, 0.75);
|
|
}
|
|
.social-links li a {
|
|
color: rgba(33, 37, 41, 0.75);
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
height: 30px;
|
|
padding-left: 0.5rem;
|
|
}
|
|
.media {
|
|
display: flex;
|
|
gap: 1.25rem;
|
|
align-items: center;
|
|
}
|
|
.media-body p {
|
|
margin: 0;
|
|
}
|
|
</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": "Fell",
|
|
"2": "Igel",
|
|
"3": "Vogel (Keine Zwangsfütterung)"
|
|
},
|
|
"nextQuestions": {
|
|
"1": "13",
|
|
"2": "14",
|
|
"3": "2"
|
|
}
|
|
},
|
|
"2": {
|
|
"question": "Vogel",
|
|
"explanation": "Um welche Vogelart handelt es sich?",
|
|
"options": {
|
|
"1": "Greifvogel (verletzt / unverletzt)",
|
|
"2": "Taube",
|
|
"3": "Rabenvögel",
|
|
"4": "Gänsevögel / Wasservogel",
|
|
"5": "Schreitvögel (Storch, Reiher, Kranich)",
|
|
"6": "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": "Verletzt",
|
|
"2": "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": "Ausgewachsen",
|
|
"2": "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": "Agil, lebhaft, fliegt nicht weg",
|
|
"2": "Apathisch, wirkt benommen, unbeweglich",
|
|
},
|
|
"nextQuestions": {
|
|
"1": "6",
|
|
"2": "4"
|
|
}
|
|
},
|
|
"6": {
|
|
"question": "Ausgewachsener, unverletzter Kleinvogel",
|
|
"explanation": "Auffällige Verhaltensmuster",
|
|
"options": {
|
|
"1": "Hüpft herum",
|
|
"2": "Kopf in Schieflage",
|
|
"3": "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.",
|
|
"options": {
|
|
"1": "Weiterhin schlechter Zustand",
|
|
"2": "Besserer Zustand"
|
|
},
|
|
"nextQuestions": {
|
|
"1": "10",
|
|
"2": "8",
|
|
}
|
|
},
|
|
"8": {
|
|
"question": "Ausgewachsener, unverletzter Kleinvogel",
|
|
"explanation": "Starthilfe: 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>Bei Fragen oder Schwierigkeiten nehmen Sie mit der Hotline kontakt auf.",
|
|
"options": {
|
|
"1": "WiTAS Hotline",
|
|
},
|
|
"nextQuestions": {
|
|
"1": "15",
|
|
}
|
|
},
|
|
"9": {
|
|
"question": "Junger, unverletzter Kleinvogel",
|
|
"explanation": "Weitere Charakterisierung",
|
|
"options": {
|
|
"1": "Mit Federn",
|
|
"2": "Ohne Federn",
|
|
},
|
|
"nextQuestions": {
|
|
"1": "20",
|
|
"2": "21",
|
|
}
|
|
},
|
|
"10": {
|
|
"question": "Taube / Verletzter Kleinvogel",
|
|
"explanation": "Bitte nehmen Sie in diesem Fall Kontakt auf mit einem unseren Tierärzt*innen die in diesem Fall zuständig sind:<br><br><b>Vogel- und Reptilienpraxis | Dr. Britsch</b><br> Am Storrenacker 1b, 76139 Karlsruhe<br><br>Dr. Kothe, weitere",
|
|
},
|
|
"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 Kontakt auf mit einem unseren Tierärzt*innen die in diesem Fall zuständig sind:<br><br><b>Wildtierbeauftragte - Veterinäramt</b>",
|
|
},
|
|
"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",
|
|
},
|
|
"20": {
|
|
"question": "Junger, unverletzter Kleinvogel",
|
|
"explanation": "Aus einiger Entfernung beobachten (min 30 Minuten), bei Bedarf aus der Gefahrenzone bringen.",
|
|
"options": {
|
|
"1": "Vogel wird von Eltern gefüttert",
|
|
"2": "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": "Nest sichtbar",
|
|
"2": "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 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];
|
|
button.value = question.nextQuestions[optionId];
|
|
button.id = 'option' + optionId;
|
|
|
|
var icon = document.createElement('i');
|
|
icon.setAttribute('data-feather', 'chevron-right');
|
|
button.appendChild(icon);
|
|
|
|
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');
|
|
}, 500);
|
|
}
|
|
|
|
var initialQuestionId = window.location.hash.substring(1);
|
|
if (initialQuestionId in questions) {
|
|
displayQuestion(initialQuestionId);
|
|
} else {
|
|
displayQuestion();
|
|
}
|
|
|
|
feather.replace();
|
|
</script>
|
|
</body>
|
|
</html>
|