523 lines
18 KiB
HTML
523 lines
18 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 rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Condensed:wght@100;200;300;400&display=swap" rel="stylesheet">
|
|
<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">
|
|
</head>
|
|
<body>
|
|
<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>
|
|
|
|
<style>
|
|
.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 {
|
|
margin: 30px auto;
|
|
padding: 0 0.25rem;
|
|
}
|
|
.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: 1000;
|
|
padding: 0.1rem;
|
|
}
|
|
.progress-title {
|
|
font-weight: 400;
|
|
}
|
|
.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;
|
|
}
|
|
html {
|
|
background: #f7fafa;
|
|
font-family: "Roboto Condensed";
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 0rem;
|
|
font-weight: 800;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
a.backLink {
|
|
text-decoration: none;
|
|
color: #0F1111;
|
|
}
|
|
main {
|
|
display: flex;
|
|
align-items: top;
|
|
max-width: 500px;
|
|
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: 0 auto;
|
|
box-sizing: border-box;
|
|
}
|
|
@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;
|
|
margin: 5px 0;
|
|
cursor: pointer;
|
|
padding: 9px 20px 9px 32px;
|
|
font-size: 0.8rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
text-align: left;
|
|
gap: 10px;
|
|
}
|
|
|
|
button svg {
|
|
height: 0.8rem;
|
|
stroke-width: 3;
|
|
}
|
|
|
|
#buttonContainer {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 7px 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;
|
|
}
|
|
|
|
#questionContainer.show {
|
|
opacity: 1;
|
|
}
|
|
|
|
#questionContainer > svg {
|
|
margin-bottom: -6px;
|
|
}
|
|
|
|
</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>
|