commit 36a3bad83ca7939ab15f8375a84d46c492d10dbe Author: Dang Hai Yen <> Date: Thu May 25 00:35:19 2023 +0200 Complete Game for Children diff --git a/common.css b/common.css new file mode 100644 index 0000000..cc89403 --- /dev/null +++ b/common.css @@ -0,0 +1,133 @@ +@font-face { + font-family: "Prompt"; + src: local("PromptRegular"), + url("/public/fonts/Prompt-Regular.ttf") format("truetype"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: "Prompt"; + src: local("PromptBold"), + url("/public/fonts/Prompt-Bold.ttf") format("truetype"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: "Prompt"; + src: local("PromptLight"), + url("/public/fonts/Prompt-Light.ttf") format("truetype"); + font-weight: 300; + font-style: normal; +} +@font-face { + font-family: "Prompt"; + src: local("PromptMedium"), + url("/public/fonts/Prompt-Mediumr.ttf") format("truetype"); + font-weight: 500; + font-style: bold; +} +@font-face { + font-family: "Prompt"; + src: local("PromptSemiBold"), + url("/public/fonts/Prompt-SemiBold.ttf") format("truetype"); + font-weight: 600; + font-style: bold; +} +h1 { + font-size: 50px; +} + +h4 { + font-size: 30px; + font-weight: 600; + margin-bottom: 30px; +} + +h5 { + font-weight: 100; + line-height: 32px; + margin-bottom: 30px; +} + +.h-100vh { + height: 100vh; +} + +.h-90vh { + height: 90vh; +} +.h-7vh { + height: 7vh; +} +.h-3vh { + height: 3vh; +} + +.w-50vw { + width: 50vw; +} +.w-25px { + width: 25px; +} + +.bg-green { + background-color: #5b9b4f; +} + +.bg-green1{ + background-color: #70C4C1; +} + +.bg-green2{ + background-color: #ADDBD9; +} + +.text-blue-vibentec{ + color: #295a85; +} + +.cursor-pointer { + cursor: pointer; +} + +.mt-40 { + margin-top: 40px; +} +.ms-6 { + margin-left: 5rem !important; +} +#play-icon { + display: none; +} + +.cursor-pointer { + cursor: pointer; +} + +p { + font-size: 14px; +} + +tr{ + border-style: hidden; +} + +.bg-pink1{ + background-color: #EC4F97 ; +} + +.bg-pink2{ + background-color: #EA7DB2; +} + +.bg-pink3{ + background-color: #F3B4D2; +} + +@media screen and (min-width: 768px) and (max-width: 1180px) and (orientation: landscape) { + h5 { + font-size: 16px; + } +} diff --git a/index.css b/index.css new file mode 100644 index 0000000..71b52a1 --- /dev/null +++ b/index.css @@ -0,0 +1,249 @@ +@import url("./common.css"); + +body { + font-family: "Prompt"; + color: #295a85; +} + +#game-page { + width: 100%; +} + +#error-page { + display: none; + background-color: white; +} + +#introduction-page { + background-image: url("/public/images/background1.png"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +#introduction { + display: flex; +} + +/* Game-container */ +#game-container { + display: none; + color: white; + position: relative; + background-image: url("/public/images/background2.jpeg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +#game-container { + color: white; + position: relative; +} +#countdown-timer { + font-size: 70px; +} + +#choices-container { + height: 200px; +} + +.choice:hover { + width: 85%; +} + +.choice { + width: 150px; +} + +#hint-container { + position: absolute; + top: 20%; + left: 15%; + width: 200px; + z-index: 9999; + /* display: none; */ +} + +/* .backgroundImg{ + background-image: url("/public/images/background2.jpeg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} */ + +/* Save-score */ +#modal-save-score { + display: none; + background-image: url("/public/images/background2.jpeg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} +#modal-save-score-backdrop { + background: rgba(255, 255, 255, 0.29); + backdrop-filter: blur(3px); +} +.modal-save-score-content { + background-color: #104f75; + opacity: 0.7; + border-radius: 20px; +} + +#player-name { + border-radius: 3px; + border: #104f75 solid 2px; + color: #295a85; +} + +#player-name:focus { + border: #4642f1 solid 2px; +} + +#end-container { + display: none; + background-image: url("/public/images/background1.png"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +#end-score { + font-weight: 400; +} + +#play-btn, +#hint-btn, +#quit-btn, +#play-again-btn, +#save-btn { + border: 3px solid transparent !important; + border-radius: 30px; + font-weight: 100; +} +#play-btn:hover, +#hint-btn:hover, +#quit-btn:hover, +#play-again-btn:hover { + border: 3px solid #5b9b4f !important; + color: #5b9b4f !important; +} + +#play-btn, +#hint-btn { + width: 20%; +} + +#save-btn { + width: 35%; +} +#save-btn:hover { + background-color: #5b9b4f; + scale: 1.2; +} + +#quit-btn, +#play-again-btn { + width: 85%; +} + +@media screen and (max-width: 1024px) and (orientation: portrait) { + #content { + margin: auto; + } + .introduction-container { + flex-direction: column; + } + #title { + width: 75%; + margin: auto; + } + #iframe-container { + width: 100%; + } + iframe { + height: 52vh !important; + } + + #hint-container { + top: 15%; + left: 7%; + } + .choice:hover { + width: 70%; + } + #choices-container { + height: 450px; + } + #quit-btn, + #play-again-btn { + width: 90%; + } +} + +@media screen and (min-width: 1024px) and (orientation: landscape) { + #play-btn, + #hint-btn { + width: 30%; + } + iframe { + height: 65vh !important; + } + + #quit-btn, + #play-again-btn { + width: 65%; + } +} + +@media screen and (width: 1024px) and (orientation: portrait) { + #quit-btn, + #play-again-btn { + width: 65%; + } + .choice:hover { + width: 100%; + } +} + +@media screen and (max-height: 600px) { + #countdown-timer { + line-height: 60px; + } + .introduction-container { + flex-direction: row; + } + iframe { + height: 80vh !important; + } + #end-content { + scale: 0.8; + } +} + +@media screen and (min-width: 1180px) { + #title { + margin-left: 30px; + } + #question img { + width: 50%; + } + .choice:hover { + width: 85%; + } + #choices-container { + height: 300px; + } + .choice { + width: 70%; + } + #play-btn, + #hint-btn { + width: 30%; + } + + #quit-btn, + #play-again-btn { + width: 65%; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..86c9c1b --- /dev/null +++ b/index.html @@ -0,0 +1,269 @@ + + + + + + + + + + Müll-check + + + +
+
+ Um eure Sehkraft zu gewährleisten wird das Spiel auf Mobilgeräte nicht + unterstützt. Verwendet bitte das iPad oder den Desktop für ein besseres + Spielerlebnis. +
+
+ +
+ +
+
+
+ Vibentec IT Logo +
+
+
+
+
+
+

Bist du bereit mit Müll-Check?

+
+ Das Spiel besteht aus 1 Frage und 4 Auswahlmöglichkeiten (nur 1 + Auswahl ist richtig). Die Frage entspricht der Mülltonnefarbe + (Biomüll-, Altpapier-, Gelbe- und Restmülltone). Wähl schnell + wie möglich innerhalb von 3 Minuten aus 4 Auswahlmöglichkeiten + die Müllart aus, die zum Werfen in den angegebenen Mülltonne + geeignet ist. Für jede richtige Antwort erhältest du zusätzlich + 10 Punkte. +
+ Viel Erfolg !!! +
+
+ + + + + + +
+
+
+ +
+
+
+
+

+ Müll-check ist ein kleines Geschenk von Vibentec IT für Kinder zum + Kindertag 01.06 +

+
+
+ + +
+
+ + +
+
+
+
+
Score:
+
+
+
+
+
.
+
+
+ + +
+
+ Question Image +
+
+ + +
+
+
+
+
+
+ + +
+ +
+ + +
+
+
+
+

+
+ +
+ + +
+
+
+
+ +
+
+ +
+
+
+
+
+
+ + + + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..76e6243 --- /dev/null +++ b/index.js @@ -0,0 +1,264 @@ +//Countdown-timer +const secondsEl = document.getElementById("seconds"); +const millisecondsEl = document.getElementById("milliseconds"); +var defaultTime = 180000; +var time = defaultTime; +var intervID; +var score = 0; + +if (screen.width < 576 || screen.height < 599) { + document.getElementById("error-page").style.display = "block"; + document.getElementById("game-page").style.display = "none"; +} +//list question with options +const question = document.getElementById("question"); +const options = document.getElementById("choices"); +const scoreText = document.getElementById("score"); +const hintContainer = document.getElementById("hint-container"); + +function updateCountdown() { + let seconds = Math.floor(time / 1000); + let milliseconds = time % 1000; + + seconds = seconds < 10 ? "0" + seconds : seconds; + milliseconds = + milliseconds < 10 + ? "0" + milliseconds + : milliseconds.toString().slice(0, 2); + secondsEl.innerHTML = `${seconds}`; + millisecondsEl.innerHTML = `${milliseconds}`; + + time -= 10; + if (time < 0) { + clearInterval(intervID); + removeQuestion(); + document.getElementById("game-container").style.display = "none"; + document.getElementById("modal-save-score").style.display = "block"; + document.getElementById("last-score").innerHTML = + "

Dein Ergebnis:

" + + score * 10 + + "

"; + completed.play(); + } +} + +async function getJson() { + const game = await fetch("/public/game.json"); + const gameJson = await game.json(); + return gameJson; +} + +function removeQuestion() { + const elements = document.querySelectorAll(".choice-content"); + question.removeAttribute("src"); + elements.forEach((e) => { + e.remove(); + }); +} + +function removeHint() { + const hintElements = document.querySelectorAll(".hint"); + hintElements.forEach((e) => { + e.remove(); + }); +} + +function getNewQuestion() { + //radom question + const qIndex = Math.floor(Math.random() * allData.length); + // const qIndex = 3; + question.querySelector("img").setAttribute("src", allData[qIndex].question); + + //random options of question with no order + //never change input Data => copy an Input Data for usage + const allOptions = Object.assign([], allData[qIndex].choices); + var optionsLength = allOptions.length; + const allHints = []; + while (optionsLength--) { + const optionRandom = Math.floor(Math.random() * (optionsLength + 1)); + const choiceSrc = `src='` + allOptions[optionRandom].img + `'`; + //add hintAttribute for later usage (2.method) + options.innerHTML += + `
Choice Image
`; + + allHints.push(allOptions[optionRandom].hint); + const hintAttribute = + `src='` + + allOptions[optionRandom].hint + + `' id='` + + allHints.indexOf(allOptions[optionRandom].hint) + + `' class='hint'`; + hintContainer.innerHTML += ``; + const hints = document.querySelectorAll(".hint"); + hints.forEach((e) => { + e.style.display = "none"; + }); + + allOptions.splice(optionRandom, 1); + } + handleClick(qIndex, allHints); +} + +function handleClick(qIndex, allHints) { + // const questionIndex = getNewQuestion(); + const choices = document.querySelectorAll(".choice-content"); + + choices.forEach((choice) => { + choice.addEventListener("click", async (e) => { + //other method for hint with getAttribute + // console.log(choice.getAttribute("hint")) + + //my method + // console.log( choice.getAttribute("src")) + //find src of choice in json choices + const src = choice.children[0].getAttribute("src"); + // console.log(choice.children[0]); + const result = allData[qIndex].choices.find((e) => e.img === src); + document.getElementById(allHints.indexOf(result.hint)).style.display = + "block"; + + // if ( == answer) + // if (questionChoice != answer) + if (src.localeCompare(allData[qIndex].answer) == 0) { + score++; + scoreText.innerText = score * 10; + choice.children[0].src = "/public/images/Check.png"; + correct.play().then(() => { + setTimeout(() => { + removeQuestion(); + removeHint(); + getNewQuestion(); + }, 1000); + }); + } else { + choice.children[0].src = "/public/images/X.png"; + fail.play().then(() => { + setTimeout(() => { + removeQuestion(); + removeHint(); + getNewQuestion(); + }, 1000); + }); + } + }); + }); +} + +async function startGame() { + scoreText.innerText = score; + allData = await getJson(); + getNewQuestion(); +} + +function playGame() { + removeQuestion(); + document.getElementById("game-container").style.display = "block"; + document.getElementById("end-container").style.display = "none"; + document.getElementById("introduction-page").style.display = "none"; + time = defaultTime; + intervID = setInterval(updateCountdown, 10); + score = 0; + startGame(); +} + +function playAgain() { + removeQuestion(); + document.getElementById("ranking-row").innerHTML= ""; + document.getElementById("game-container").style.display = "block"; + document.getElementById("end-container").style.display = "none"; + document.getElementById("introduction-page").style.display = "none"; + time = defaultTime; + intervID = setInterval(updateCountdown, 10); + score = 0; + startGame(); +} + + +var correct = new Audio("/public/audio/correct-notification.wav"); +var fail = new Audio("/public/audio/failure-notification.wav"); +var completed = new Audio("/public/audio/game-completed.wav"); + +// Backend +async function saveScore() { + const playerName = document.getElementById("player-name").value; + const validationName = document.getElementById("validation-player-name"); + if (playerName == "") { + validationName.style.display = "block"; + document.getElementById("player-name").classList.add("border-warning"); + return false; + } else { + document.getElementById("player-name").classList.add("border-0"); + validationName.style.display = "none"; + document.getElementById("end-container").style.display = "block"; + document.getElementById("modal-save-score").style.display = "none"; + + const data = { + name: playerName, + score: Number(document.getElementById("score").innerText), + }; + // console.log(data); + const appwriteData = { data: JSON.stringify(data) }; + const response = await fetch( + "https://baas.vibentec-it.io/v1/functions/6466b6d587ca2a959fb9/executions", + { + method: "POST", + headers: { + "X-Appwrite-Project": "6466b683b00bf586977c", + "Content-Type": "application/json", + // 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: JSON.stringify(appwriteData), + } + ); + const appwriteRes = await response.json(); + console.log(appwriteRes.response); + const rankData = JSON.parse(appwriteRes.response); + console.log(rankData); + + if (rankData.currentRank > 5) { + document.getElementById("end-score").innerHTML = + "

Du bist am " + rankData.currentRank + ". Platz

Übung macht den Meister. Toi Toi Toi
"; + } else { + document.getElementById("end-score").innerHTML = "

Du bist am " + rankData.currentRank + ". Platz

Prima !!!

"; + } + + const rankingRow = document.getElementById("ranking-row"); + + const bgColor = [ + "bg-pink1", + "bg-pink2", + "bg-pink3", + "bg-green1", + "bg-green2", + ]; + + rankData.higherRank.forEach((i, index) => { + console.log(i); + console.log(index) + const j = bgColor[index]; + // console.log(i.name, j) + rankingRow.innerHTML += + " " + + (index + 1) + + " " + + i.name + + "" + + i.score + + ""; + }); + } +} + +function goToIntroductionPage() { + document.getElementById("ranking-row").innerHTML= ""; + document.getElementById("introduction-page").style.display = "block"; + document.getElementById("modal-save-score").style.display = "none"; + document.getElementById("end-container").style.display = "none"; +} diff --git a/kids.svg b/kids.svg new file mode 100644 index 0000000..d48591e --- /dev/null +++ b/kids.svg @@ -0,0 +1,842 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/audio/correct-notification.wav b/public/audio/correct-notification.wav new file mode 100644 index 0000000..9dfcb70 Binary files /dev/null and b/public/audio/correct-notification.wav differ diff --git a/public/audio/failure-notification.wav b/public/audio/failure-notification.wav new file mode 100644 index 0000000..9a28349 Binary files /dev/null and b/public/audio/failure-notification.wav differ diff --git a/public/audio/game-completed.wav b/public/audio/game-completed.wav new file mode 100644 index 0000000..b62f38c Binary files /dev/null and b/public/audio/game-completed.wav differ diff --git a/public/fonts/Prompt-Bold.ttf b/public/fonts/Prompt-Bold.ttf new file mode 100644 index 0000000..6174e9d Binary files /dev/null and b/public/fonts/Prompt-Bold.ttf differ diff --git a/public/fonts/Prompt-Light.ttf b/public/fonts/Prompt-Light.ttf new file mode 100644 index 0000000..7174abd Binary files /dev/null and b/public/fonts/Prompt-Light.ttf differ diff --git a/public/fonts/Prompt-Medium.ttf b/public/fonts/Prompt-Medium.ttf new file mode 100644 index 0000000..1ffbda1 Binary files /dev/null and b/public/fonts/Prompt-Medium.ttf differ diff --git a/public/fonts/Prompt-Regular.ttf b/public/fonts/Prompt-Regular.ttf new file mode 100644 index 0000000..cf22154 Binary files /dev/null and b/public/fonts/Prompt-Regular.ttf differ diff --git a/public/fonts/Prompt-SemiBold.ttf b/public/fonts/Prompt-SemiBold.ttf new file mode 100644 index 0000000..6bd5b17 Binary files /dev/null and b/public/fonts/Prompt-SemiBold.ttf differ diff --git a/public/game.json b/public/game.json new file mode 100644 index 0000000..93aa170 --- /dev/null +++ b/public/game.json @@ -0,0 +1,661 @@ +[ + { + "question": "/public/images/gelbeTonne.png", + "choices": [ + { + "img": "/public/images/question1/can.png", + "hint": "" + }, + { + "img": "/public/images/question1/cigarette.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question1/mask.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question1/newspaper2.png", + "hint": "/public/images/pHint.png" + } + ], + "answer" : "/public/images/question1/can.png" + }, + { + "question": "/public/images/restmüllTonne.png", + "choices": [ + { + "img": "/public/images/question2/biomüll.png", + "hint": "/public/images/boHint.png" + }, + { + "img": "/public/images/question2/brokenItems.png", + "hint" : "" + }, + { + "img": "/public/images/question2/newspaper.png", + "hint" : "/public/images/pHint.png" + }, + { + "img": "/public/images/question2/plastic-waste.png", + "hint" : "/public/images/gHint.png" + } + ], + "answer" : "/public/images/question2/brokenItems.png" + }, + { + "question": "/public/images/papierTonne.png", + "choices": [ + { + "img": "/public/images/question3/can4.png", + "hint": "/public/images/gHint.png" + }, + { + "img": "/public/images/question3/defektItems.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question3/paper.png", + "hint": "" + }, + { + "img": "/public/images/question3/plastic-waste.png", + "hint": "/public/images/gHint.png" + } + ], + "answer" : "/public/images/question3/paper.png" + }, + { + "question": "/public/images/bioTonne.png", + "choices": [ + { + "img": "/public/images/question4/hair.png", + "hint": "" + }, + { + "img": "/public/images/question4/can3.png", + "hint": "/public/images/gHint.png" + }, + { + "img": "/public/images/question4/backpapier.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question4/paper.png", + "hint": "/public/images/pHint.png" + } + ], + "answer" : "/public/images/question4/hair.png" + }, + { + "question": "/public/images/gelbeTonne.png", + "choices": [ + { + "img": "/public/images/question5/straw.png", + "hint": "" + }, + { + "img": "/public/images/question5/glühbirne.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question5/mask.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question5/newspaper2.png", + "hint": "/public/images/pHint.png" + } + ], + "answer" : "/public/images/question5/straw.png" + }, + { + "question": "/public/images/gelbeTonne.png", + "choices": [ + { + "img": "/public/images/question6/biomüll.png", + "hint": "/public/images/boHint.png" + }, + { + "img": "/public/images/question6/brokenItems.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question6/can2.png", + "hint": "" + }, + { + "img": "/public/images/question6/cigarette.png", + "hint": "/public/images/rmHint.png" + } + ], + "answer" : "/public/images/question6/can2.png" + }, + { + "question": "/public/images/bioTonne.png", + "choices": [ + { + "img": "/public/images/question7/can1.png", + "hint": "/public/images/gHint.png" + }, + { + "img": "/public/images/question7/eierschalen.png", + "hint": "" + }, + { + "img": "/public/images/question7/cigarette.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question7/plastic-waste.png", + "hint": "/public/images/gHint.png" + } + ], + "answer" : "/public/images/question7/eierschalen.png" + }, + { + "question": "/public/images/bioTonne.png", + "choices": [ + { + "img": "/public/images/question8/blumen.png", + "hint": "" + }, + { + "img": "/public/images/question8/kabel.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question8/keramik.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question8/straw.png", + "hint": "/public/images/gHint.png" + } + ], + "answer" : "/public/images/question8/blumen.png" + }, + { + "question": "/public/images/bioTonne.png", + "choices": [ + { + "img": "/public/images/question9/biomüll.png", + "hint": "" + }, + { + "img": "/public/images/question9/defektItems.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question9/cigarette.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question9/windeln.png", + "hint": "/public/images/rmHint.png" + } + ], + "answer" : "/public/images/question9/biomüll.png" + }, + { + "question": "/public/images/gelbeTonne.png", + "choices": [ + { + "img": "/public/images/question10/can1.png", + "hint": "" + }, + { + "img": "/public/images/question10/electric.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question10/paper.png", + "hint": "/public/images/pHint.png" + }, + { + "img": "/public/images/question10/windeln.png", + "hint": "/public/images/rmHint.png" + } + ], + "answer" : "/public/images/question10/can1.png" + }, + { + "question": "/public/images/papierTonne.png", + "choices": [ { + "img": "/public/images/question11/newspaper.png", + "hint": "" + }, + { + "img": "/public/images/question11/packung.png", + "hint": "/public/images/gHint.png" + }, + { + "img": "/public/images/question11/pizzaPackung.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question11/tüte.png", + "hint": "/public/images/gHint.png" + } + ], + "answer" : "/public/images/question11/newspaper.png" + }, + { + "question": "/public/images/restmüllTonne.png", + "choices": [ + { + "img": "/public/images/question12/bananaschale.png", + "hint": "/public/images/boHint.png" + }, + { + "img": "/public/images/question12/can4.png", + "hint": "/public/images/gHint.png" + }, + { + "img": "/public/images/question12/paper.png", + "hint": "/public/images/pHint.png" + }, + { + "img": "/public/images/question12/wachspapier.png", + "hint": "" + } + ], + "answer" : "/public/images/question12/wachspapier.png" + }, + { + "question": "/public/images/gelbeTonne.png", + "choices": [ + { + "img": "/public/images/question13/holzwolle.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question13/kabel.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question13/keramik.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question13/plastic-waste.png", + "hint": "" + } + ], + "answer" : "/public/images/question13/plastic-waste.png" + }, + { + "question": "/public/images/restmüllTonne.png", + "choices": [ + { + "img": "/public/images/question14/straw.png", + "hint": "/public/images/gHint.png" + }, + { + "img": "/public/images/question14/can.png", + "hint": "/public/images/gHint.png" + }, + { + "img": "/public/images/question14/tablet.png", + "hint": "/public/images/gHint.png" + }, + { + "img": "/public/images/question14/toothbrush.png", + "hint": "" + } + ], + "answer" : "/public/images/question14/toothbrush.png" + }, + { + "question": "/public/images/gelbeTonne.png", + "choices": [ + { + "img": "/public/images/question15/blumen.png", + "hint": "/public/images/boHint.png" + }, + { + "img": "/public/images/question15/carton.png", + "hint": "/public/images/pHint.png" + }, + { + "img": "/public/images/question15/tablet.png", + "hint": "" + }, + { + "img": "/public/images/question15/teefilter.png", + "hint": "/public/images/boHint.png" + } + ], + "answer" : "/public/images/question15/tablet.png" + }, + { + "question": "/public/images/bioTonne.png", + "choices": [ + { + "img": "/public/images/question16/backpapier.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question16/mask.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question16/windeln.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question16/teefilter.png", + "hint": "" + } + ], + "answer" : "/public/images/question16/teefilter.png" + }, + { + "question": "/public/images/gelbeTonne.png", + "choices": [ + { + "img": "/public/images/question17/can2.png", + "hint": "" + }, + { + "img": "/public/images/question17/defektItems.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question17/fischreste.png", + "hint": "/public/images/boHint.png" + }, + { + "img": "/public/images/question17/windeln.png", + "hint": "/public/images/rmHint.png" + } + ], + "answer" : "/public/images/question17/can2.png" + }, + { + "question": "/public/images/papierTonne.png", + "choices": [ + { + "img": "/public/images/question18/backpapier.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question18/eierbox.png", + "hint": "/public/images/gHint.png" + }, + { + "img": "/public/images/question18/newspaper2.png", + "hint": "" + }, + { + "img": "/public/images/question18/teefilter.png", + "hint": "/public/images/boHint.png" + } + ], + "answer" : "/public/images/question18/newspaper2.png" + }, + { + "question": "/public/images/restmüllTonne.png", + "choices": [ + { + "img": "/public/images/question19/mask.png", + "hint": "" + }, + { + "img": "/public/images/question19/can3.png", + "hint": "/public/images/gHint.png" + }, + { + "img": "/public/images/question19/newspaper.png", + "hint": "/public/images/pHint.png" + }, + { + "img": "/public/images/question19/packung.png", + "hint": "/public/images/gHint.png" + } + ], + "answer" : "/public/images/question19/mask.png" + }, + { + "question": "/public/images/gelbeTonne.png", + "choices": [ + { + "img": "/public/images/question20/bananaschale.png", + "hint": "/public/images/boHint.png" + }, + { + "img": "/public/images/question20/cutpaper.png", + "hint": "/public/images/pHint.png" + }, + { + "img": "/public/images/question20/newspaper.png", + "hint": "/public/images/pHint.png" + }, + { + "img": "/public/images/question20/packung.png", + "hint": "" + } + ], + "answer" : "/public/images/question20/packung.png" + }, + { + "question": "/public/images/bioTonne.png", + "choices": [ + { + "img": "/public/images/question21/biomüll1.png", + "hint": "" + }, + { + "img": "/public/images/question21/cigarette.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question21/newspaper.png", + "hint": "/public/images/pHint.png" + }, + { + "img": "/public/images/question21/toothbrush.png", + "hint": "/public/images/rmHint.png" + } + ], + "answer" : "/public/images/question21/biomüll1.png" + }, + { + "question": "/public/images/papierTonne.png", + "choices": [ + { + "img": "/public/images/question22/cutpaper.png", + "hint": "" + }, + { + "img": "/public/images/question22/kassenzettel.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question22/pizzaPackung.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question22/wachspapier.png", + "hint": "/public/images/rmHint.png" + } + ], + "answer" : "/public/images/question22/cutpaper.png" + }, + { + "question": "/public/images/restmüllTonne.png", + "choices": [ + { + "img": "/public/images/question23/biomüll1.png", + "hint": "/public/images/boHint.png" + }, + { + "img": "/public/images/question23/cigarette.png", + "hint": "" + }, + { + "img": "/public/images/question23/eier.png", + "hint": "/public/images/boHint.png" + }, + { + "img": "/public/images/question23/eierbox.png", + "hint": "/public/images/gHint.png" + } + ], + "answer" : "/public/images/question23/cigarette.png" + }, + { + "question": "/public/images/restmüllTonne.png", + "choices": [ + { + "img": "/public/images/question24/carton.png", + "hint": "/public/images/pHint.png" + }, + { + "img": "/public/images/question24/can1.png", + "hint": "/public/images/gHint.png" + }, + { + "img": "/public/images/question24/windeln.png", + "hint": "" + }, + { + "img": "/public/images/question24/packung.png", + "hint": "/public/images/gHint.png" + } + ], + "answer" : "/public/images/question24/windeln.png" + }, + { + "question": "/public/images/gelbeTonne.png", + "choices": [ + { + "img": "/public/images/question25/biomüll1.png", + "hint": "/public/images/boHint.png" + }, + { + "img": "/public/images/question25/eier.png", + "hint": "/public/images/boHint.png" + }, + { + "img": "/public/images/question25/hair.png", + "hint": "/public/images/boHint.png" + }, + { + "img": "/public/images/question25/tüte.png", + "hint": "" + } + ], + "answer" : "/public/images/question25/tüte.png" + }, + { + "question": "/public/images/gelbeTonne.png", + "choices": [ + { + "img": "/public/images/question26/cigarette.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question26/eierbox.png", + "hint": "" + }, + { + "img": "/public/images/question26/fischreste.png", + "hint": "/public/images/boHint.png" + }, + { + "img": "/public/images/question26/holzwolle.png", + "hint": "/public/images/rmHint.png" + } + ], + "answer" : "/public/images/question26/eierbox.png" + }, + { + "question": "/public/images/gelbeTonne.png", + "choices": [ + { + "img": "/public/images/question27/can3.png", + "hint": "" + }, + { + "img": "/public/images/question27/chickenBone.png", + "hint": "/public/images/boHint.png" + }, + { + "img": "/public/images/question27/fotos.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question27/newspaper2.png", + "hint": "/public/images/pHint.png" + } + ], + "answer" : "/public/images/question27/can3.png" + }, + { + "question": "/public/images/papierTonne.png", + "choices": [ + { + "img": "/public/images/question28/carton.png", + "hint": "" + }, + { + "img": "/public/images/question28/fotos.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question28/glitterGeschenkPapier.png", + "hint": "/public/images/rmHint.png" + }, + { + "img": "/public/images/question28/holzwolle.png", + "hint": "/public/images/rmHint.png" + } + ], + "answer" : "/public/images/question28/carton.png" + }, + { + "question": "/public/images/restmüllTonne.png", + "choices": [ + { + "img": "/public/images/question29/chickenBone.png", + "hint": "/public/images/boHint.png" + }, + { + "img": "/public/images/question29/keramik.png", + "hint": "" + }, + { + "img": "/public/images/question29/newspaper.png", + "hint": "/public/images/pHint.png" + }, + { + "img": "/public/images/question29/newspaper2.png", + "hint": "/public/images/pHint.png" + } + ], + "answer" : "/public/images/question29/keramik.png" + }, + { + "question": "/public/images/restmüllTonne.png", + "choices": [ + { + "img": "/public/images/question30/electric.png", + "hint": "" + }, + { + "img": "/public/images/question30/fischreste.png", + "hint": "/public/images/boHint.png" + }, + { + "img": "/public/images/question30/plastic-waste.png", + "hint": "/public/images/gHint.png" + }, + { + "img": "/public/images/question30/teefilter.png", + "hint": "/public/images/boHint.png" + } + ], + "answer" : "/public/images/question30/electric.png" + } +] \ No newline at end of file diff --git a/public/images/Check.png b/public/images/Check.png new file mode 100644 index 0000000..1f0c2ff Binary files /dev/null and b/public/images/Check.png differ diff --git a/public/images/X.png b/public/images/X.png new file mode 100644 index 0000000..897357d Binary files /dev/null and b/public/images/X.png differ diff --git a/public/images/background1.png b/public/images/background1.png new file mode 100644 index 0000000..4766905 Binary files /dev/null and b/public/images/background1.png differ diff --git a/public/images/background2.jpeg b/public/images/background2.jpeg new file mode 100644 index 0000000..905f344 Binary files /dev/null and b/public/images/background2.jpeg differ diff --git a/public/images/bioTonne.png b/public/images/bioTonne.png new file mode 100644 index 0000000..21259ee Binary files /dev/null and b/public/images/bioTonne.png differ diff --git a/public/images/boHint.png b/public/images/boHint.png new file mode 100644 index 0000000..abd76e4 Binary files /dev/null and b/public/images/boHint.png differ diff --git a/public/images/gHint.png b/public/images/gHint.png new file mode 100644 index 0000000..87eb8de Binary files /dev/null and b/public/images/gHint.png differ diff --git a/public/images/gelbeTonne.png b/public/images/gelbeTonne.png new file mode 100644 index 0000000..47b6f9d Binary files /dev/null and b/public/images/gelbeTonne.png differ diff --git a/public/images/hinweis.png b/public/images/hinweis.png new file mode 100644 index 0000000..ee72613 Binary files /dev/null and b/public/images/hinweis.png differ diff --git a/public/images/logo.png b/public/images/logo.png new file mode 100644 index 0000000..ea91b13 Binary files /dev/null and b/public/images/logo.png differ diff --git a/public/images/pHint.png b/public/images/pHint.png new file mode 100644 index 0000000..9ce4392 Binary files /dev/null and b/public/images/pHint.png differ diff --git a/public/images/papierTonne.png b/public/images/papierTonne.png new file mode 100644 index 0000000..1921398 Binary files /dev/null and b/public/images/papierTonne.png differ diff --git a/public/images/question1/can.png b/public/images/question1/can.png new file mode 100644 index 0000000..a16017c Binary files /dev/null and b/public/images/question1/can.png differ diff --git a/public/images/question1/cigarette.png b/public/images/question1/cigarette.png new file mode 100644 index 0000000..fd3b91d Binary files /dev/null and b/public/images/question1/cigarette.png differ diff --git a/public/images/question1/mask.png b/public/images/question1/mask.png new file mode 100644 index 0000000..4016097 Binary files /dev/null and b/public/images/question1/mask.png differ diff --git a/public/images/question1/newspaper2.png b/public/images/question1/newspaper2.png new file mode 100644 index 0000000..c01de1d Binary files /dev/null and b/public/images/question1/newspaper2.png differ diff --git a/public/images/question10/can1.png b/public/images/question10/can1.png new file mode 100644 index 0000000..a7d23ae Binary files /dev/null and b/public/images/question10/can1.png differ diff --git a/public/images/question10/electric.png b/public/images/question10/electric.png new file mode 100644 index 0000000..e96e900 Binary files /dev/null and b/public/images/question10/electric.png differ diff --git a/public/images/question10/paper.png b/public/images/question10/paper.png new file mode 100644 index 0000000..8b506fa Binary files /dev/null and b/public/images/question10/paper.png differ diff --git a/public/images/question10/windeln.png b/public/images/question10/windeln.png new file mode 100644 index 0000000..d55d68b Binary files /dev/null and b/public/images/question10/windeln.png differ diff --git a/public/images/question11/newspaper.png b/public/images/question11/newspaper.png new file mode 100644 index 0000000..d0f6d3b Binary files /dev/null and b/public/images/question11/newspaper.png differ diff --git a/public/images/question11/packung.png b/public/images/question11/packung.png new file mode 100644 index 0000000..dc14eeb Binary files /dev/null and b/public/images/question11/packung.png differ diff --git a/public/images/question11/pizzaPackung.png b/public/images/question11/pizzaPackung.png new file mode 100644 index 0000000..5cc6ec1 Binary files /dev/null and b/public/images/question11/pizzaPackung.png differ diff --git a/public/images/question11/tüte.png b/public/images/question11/tüte.png new file mode 100644 index 0000000..9b2b7b4 Binary files /dev/null and b/public/images/question11/tüte.png differ diff --git a/public/images/question12/bananaschale.png b/public/images/question12/bananaschale.png new file mode 100644 index 0000000..3adf621 Binary files /dev/null and b/public/images/question12/bananaschale.png differ diff --git a/public/images/question12/can4.png b/public/images/question12/can4.png new file mode 100644 index 0000000..70bba70 Binary files /dev/null and b/public/images/question12/can4.png differ diff --git a/public/images/question12/paper.png b/public/images/question12/paper.png new file mode 100644 index 0000000..8b506fa Binary files /dev/null and b/public/images/question12/paper.png differ diff --git a/public/images/question12/wachspapier.png b/public/images/question12/wachspapier.png new file mode 100644 index 0000000..466f5cd Binary files /dev/null and b/public/images/question12/wachspapier.png differ diff --git a/public/images/question13/holzwolle.png b/public/images/question13/holzwolle.png new file mode 100644 index 0000000..76a18e4 Binary files /dev/null and b/public/images/question13/holzwolle.png differ diff --git a/public/images/question13/kabel.png b/public/images/question13/kabel.png new file mode 100644 index 0000000..f6925ec Binary files /dev/null and b/public/images/question13/kabel.png differ diff --git a/public/images/question13/keramik.png b/public/images/question13/keramik.png new file mode 100644 index 0000000..fb74e96 Binary files /dev/null and b/public/images/question13/keramik.png differ diff --git a/public/images/question13/plastic-waste.png b/public/images/question13/plastic-waste.png new file mode 100644 index 0000000..2a7aae4 Binary files /dev/null and b/public/images/question13/plastic-waste.png differ diff --git a/public/images/question14/can.png b/public/images/question14/can.png new file mode 100644 index 0000000..a16017c Binary files /dev/null and b/public/images/question14/can.png differ diff --git a/public/images/question14/straw.png b/public/images/question14/straw.png new file mode 100644 index 0000000..439190e Binary files /dev/null and b/public/images/question14/straw.png differ diff --git a/public/images/question14/tablet.png b/public/images/question14/tablet.png new file mode 100644 index 0000000..8d866e4 Binary files /dev/null and b/public/images/question14/tablet.png differ diff --git a/public/images/question14/toothbrush.png b/public/images/question14/toothbrush.png new file mode 100644 index 0000000..43d2597 Binary files /dev/null and b/public/images/question14/toothbrush.png differ diff --git a/public/images/question15/blumen.png b/public/images/question15/blumen.png new file mode 100644 index 0000000..95653a2 Binary files /dev/null and b/public/images/question15/blumen.png differ diff --git a/public/images/question15/carton.png b/public/images/question15/carton.png new file mode 100644 index 0000000..f1c8df7 Binary files /dev/null and b/public/images/question15/carton.png differ diff --git a/public/images/question15/tablet.png b/public/images/question15/tablet.png new file mode 100644 index 0000000..8d866e4 Binary files /dev/null and b/public/images/question15/tablet.png differ diff --git a/public/images/question15/teefilter.png b/public/images/question15/teefilter.png new file mode 100644 index 0000000..f57b977 Binary files /dev/null and b/public/images/question15/teefilter.png differ diff --git a/public/images/question16/backpapier.png b/public/images/question16/backpapier.png new file mode 100644 index 0000000..f2b922a Binary files /dev/null and b/public/images/question16/backpapier.png differ diff --git a/public/images/question16/mask.png b/public/images/question16/mask.png new file mode 100644 index 0000000..4016097 Binary files /dev/null and b/public/images/question16/mask.png differ diff --git a/public/images/question16/teefilter.png b/public/images/question16/teefilter.png new file mode 100644 index 0000000..f57b977 Binary files /dev/null and b/public/images/question16/teefilter.png differ diff --git a/public/images/question16/windeln.png b/public/images/question16/windeln.png new file mode 100644 index 0000000..d55d68b Binary files /dev/null and b/public/images/question16/windeln.png differ diff --git a/public/images/question17/can2.png b/public/images/question17/can2.png new file mode 100644 index 0000000..4eb2ca8 Binary files /dev/null and b/public/images/question17/can2.png differ diff --git a/public/images/question17/defektItems.png b/public/images/question17/defektItems.png new file mode 100644 index 0000000..9cc49f9 Binary files /dev/null and b/public/images/question17/defektItems.png differ diff --git a/public/images/question17/fischreste.png b/public/images/question17/fischreste.png new file mode 100644 index 0000000..3025338 Binary files /dev/null and b/public/images/question17/fischreste.png differ diff --git a/public/images/question17/windeln.png b/public/images/question17/windeln.png new file mode 100644 index 0000000..d55d68b Binary files /dev/null and b/public/images/question17/windeln.png differ diff --git a/public/images/question18/backpapier.png b/public/images/question18/backpapier.png new file mode 100644 index 0000000..f2b922a Binary files /dev/null and b/public/images/question18/backpapier.png differ diff --git a/public/images/question18/eierbox.png b/public/images/question18/eierbox.png new file mode 100644 index 0000000..75ba96e Binary files /dev/null and b/public/images/question18/eierbox.png differ diff --git a/public/images/question18/newspaper2.png b/public/images/question18/newspaper2.png new file mode 100644 index 0000000..c01de1d Binary files /dev/null and b/public/images/question18/newspaper2.png differ diff --git a/public/images/question18/teefilter.png b/public/images/question18/teefilter.png new file mode 100644 index 0000000..f57b977 Binary files /dev/null and b/public/images/question18/teefilter.png differ diff --git a/public/images/question19/can3.png b/public/images/question19/can3.png new file mode 100644 index 0000000..848aef7 Binary files /dev/null and b/public/images/question19/can3.png differ diff --git a/public/images/question19/mask.png b/public/images/question19/mask.png new file mode 100644 index 0000000..4016097 Binary files /dev/null and b/public/images/question19/mask.png differ diff --git a/public/images/question19/newspaper.png b/public/images/question19/newspaper.png new file mode 100644 index 0000000..d0f6d3b Binary files /dev/null and b/public/images/question19/newspaper.png differ diff --git a/public/images/question19/packung.png b/public/images/question19/packung.png new file mode 100644 index 0000000..dc14eeb Binary files /dev/null and b/public/images/question19/packung.png differ diff --git a/public/images/question2/biomüll.png b/public/images/question2/biomüll.png new file mode 100644 index 0000000..4adc9db Binary files /dev/null and b/public/images/question2/biomüll.png differ diff --git a/public/images/question2/brokenItems.png b/public/images/question2/brokenItems.png new file mode 100644 index 0000000..06fd167 Binary files /dev/null and b/public/images/question2/brokenItems.png differ diff --git a/public/images/question2/newspaper.png b/public/images/question2/newspaper.png new file mode 100644 index 0000000..d0f6d3b Binary files /dev/null and b/public/images/question2/newspaper.png differ diff --git a/public/images/question2/plastic-waste.png b/public/images/question2/plastic-waste.png new file mode 100644 index 0000000..8595622 Binary files /dev/null and b/public/images/question2/plastic-waste.png differ diff --git a/public/images/question20/bananaschale.png b/public/images/question20/bananaschale.png new file mode 100644 index 0000000..3adf621 Binary files /dev/null and b/public/images/question20/bananaschale.png differ diff --git a/public/images/question20/cutpaper.png b/public/images/question20/cutpaper.png new file mode 100644 index 0000000..db4f2ef Binary files /dev/null and b/public/images/question20/cutpaper.png differ diff --git a/public/images/question20/newspaper.png b/public/images/question20/newspaper.png new file mode 100644 index 0000000..d0f6d3b Binary files /dev/null and b/public/images/question20/newspaper.png differ diff --git a/public/images/question20/packung.png b/public/images/question20/packung.png new file mode 100644 index 0000000..dc14eeb Binary files /dev/null and b/public/images/question20/packung.png differ diff --git a/public/images/question21/biomüll1.png b/public/images/question21/biomüll1.png new file mode 100644 index 0000000..bba6d7f Binary files /dev/null and b/public/images/question21/biomüll1.png differ diff --git a/public/images/question21/cigarette.png b/public/images/question21/cigarette.png new file mode 100644 index 0000000..fd3b91d Binary files /dev/null and b/public/images/question21/cigarette.png differ diff --git a/public/images/question21/newspaper.png b/public/images/question21/newspaper.png new file mode 100644 index 0000000..d0f6d3b Binary files /dev/null and b/public/images/question21/newspaper.png differ diff --git a/public/images/question21/toothbrush.png b/public/images/question21/toothbrush.png new file mode 100644 index 0000000..43d2597 Binary files /dev/null and b/public/images/question21/toothbrush.png differ diff --git a/public/images/question22/cutpaper.png b/public/images/question22/cutpaper.png new file mode 100644 index 0000000..db4f2ef Binary files /dev/null and b/public/images/question22/cutpaper.png differ diff --git a/public/images/question22/kassenzettel.png b/public/images/question22/kassenzettel.png new file mode 100644 index 0000000..6f506b6 Binary files /dev/null and b/public/images/question22/kassenzettel.png differ diff --git a/public/images/question22/pizzaPackung.png b/public/images/question22/pizzaPackung.png new file mode 100644 index 0000000..5cc6ec1 Binary files /dev/null and b/public/images/question22/pizzaPackung.png differ diff --git a/public/images/question22/wachspapier.png b/public/images/question22/wachspapier.png new file mode 100644 index 0000000..466f5cd Binary files /dev/null and b/public/images/question22/wachspapier.png differ diff --git a/public/images/question23/biomüll1.png b/public/images/question23/biomüll1.png new file mode 100644 index 0000000..bba6d7f Binary files /dev/null and b/public/images/question23/biomüll1.png differ diff --git a/public/images/question23/cigarette.png b/public/images/question23/cigarette.png new file mode 100644 index 0000000..fd3b91d Binary files /dev/null and b/public/images/question23/cigarette.png differ diff --git a/public/images/question23/eier.png b/public/images/question23/eier.png new file mode 100644 index 0000000..610029e Binary files /dev/null and b/public/images/question23/eier.png differ diff --git a/public/images/question23/eierbox.png b/public/images/question23/eierbox.png new file mode 100644 index 0000000..75ba96e Binary files /dev/null and b/public/images/question23/eierbox.png differ diff --git a/public/images/question23/restmüllTonne.png b/public/images/question23/restmüllTonne.png new file mode 100644 index 0000000..447e8d4 Binary files /dev/null and b/public/images/question23/restmüllTonne.png differ diff --git a/public/images/question24/can1.png b/public/images/question24/can1.png new file mode 100644 index 0000000..a7d23ae Binary files /dev/null and b/public/images/question24/can1.png differ diff --git a/public/images/question24/carton.png b/public/images/question24/carton.png new file mode 100644 index 0000000..f1c8df7 Binary files /dev/null and b/public/images/question24/carton.png differ diff --git a/public/images/question24/packung.png b/public/images/question24/packung.png new file mode 100644 index 0000000..dc14eeb Binary files /dev/null and b/public/images/question24/packung.png differ diff --git a/public/images/question24/windeln.png b/public/images/question24/windeln.png new file mode 100644 index 0000000..d55d68b Binary files /dev/null and b/public/images/question24/windeln.png differ diff --git a/public/images/question25/biomüll1.png b/public/images/question25/biomüll1.png new file mode 100644 index 0000000..bba6d7f Binary files /dev/null and b/public/images/question25/biomüll1.png differ diff --git a/public/images/question25/eier.png b/public/images/question25/eier.png new file mode 100644 index 0000000..610029e Binary files /dev/null and b/public/images/question25/eier.png differ diff --git a/public/images/question25/hair.png b/public/images/question25/hair.png new file mode 100644 index 0000000..9a784bb Binary files /dev/null and b/public/images/question25/hair.png differ diff --git a/public/images/question25/tüte.png b/public/images/question25/tüte.png new file mode 100644 index 0000000..5e091d5 Binary files /dev/null and b/public/images/question25/tüte.png differ diff --git a/public/images/question26/cigarette.png b/public/images/question26/cigarette.png new file mode 100644 index 0000000..fd3b91d Binary files /dev/null and b/public/images/question26/cigarette.png differ diff --git a/public/images/question26/eierbox.png b/public/images/question26/eierbox.png new file mode 100644 index 0000000..75ba96e Binary files /dev/null and b/public/images/question26/eierbox.png differ diff --git a/public/images/question26/fischreste.png b/public/images/question26/fischreste.png new file mode 100644 index 0000000..3025338 Binary files /dev/null and b/public/images/question26/fischreste.png differ diff --git a/public/images/question26/holzwolle.png b/public/images/question26/holzwolle.png new file mode 100644 index 0000000..76a18e4 Binary files /dev/null and b/public/images/question26/holzwolle.png differ diff --git a/public/images/question27/can3.png b/public/images/question27/can3.png new file mode 100644 index 0000000..848aef7 Binary files /dev/null and b/public/images/question27/can3.png differ diff --git a/public/images/question27/chickenBone.png b/public/images/question27/chickenBone.png new file mode 100644 index 0000000..1993af6 Binary files /dev/null and b/public/images/question27/chickenBone.png differ diff --git a/public/images/question27/fotos.png b/public/images/question27/fotos.png new file mode 100644 index 0000000..5429742 Binary files /dev/null and b/public/images/question27/fotos.png differ diff --git a/public/images/question27/newspaper2.png b/public/images/question27/newspaper2.png new file mode 100644 index 0000000..c01de1d Binary files /dev/null and b/public/images/question27/newspaper2.png differ diff --git a/public/images/question28/carton.png b/public/images/question28/carton.png new file mode 100644 index 0000000..f1c8df7 Binary files /dev/null and b/public/images/question28/carton.png differ diff --git a/public/images/question28/fotos.png b/public/images/question28/fotos.png new file mode 100644 index 0000000..5429742 Binary files /dev/null and b/public/images/question28/fotos.png differ diff --git a/public/images/question28/glitterGeschenkPapier.png b/public/images/question28/glitterGeschenkPapier.png new file mode 100644 index 0000000..268bfad Binary files /dev/null and b/public/images/question28/glitterGeschenkPapier.png differ diff --git a/public/images/question28/holzwolle.png b/public/images/question28/holzwolle.png new file mode 100644 index 0000000..76a18e4 Binary files /dev/null and b/public/images/question28/holzwolle.png differ diff --git a/public/images/question29/chickenBone.png b/public/images/question29/chickenBone.png new file mode 100644 index 0000000..1993af6 Binary files /dev/null and b/public/images/question29/chickenBone.png differ diff --git a/public/images/question29/keramik.png b/public/images/question29/keramik.png new file mode 100644 index 0000000..fb74e96 Binary files /dev/null and b/public/images/question29/keramik.png differ diff --git a/public/images/question29/newspaper.png b/public/images/question29/newspaper.png new file mode 100644 index 0000000..d0f6d3b Binary files /dev/null and b/public/images/question29/newspaper.png differ diff --git a/public/images/question29/newspaper2.png b/public/images/question29/newspaper2.png new file mode 100644 index 0000000..c01de1d Binary files /dev/null and b/public/images/question29/newspaper2.png differ diff --git a/public/images/question3/can4.png b/public/images/question3/can4.png new file mode 100644 index 0000000..70bba70 Binary files /dev/null and b/public/images/question3/can4.png differ diff --git a/public/images/question3/defektItems.png b/public/images/question3/defektItems.png new file mode 100644 index 0000000..9cc49f9 Binary files /dev/null and b/public/images/question3/defektItems.png differ diff --git a/public/images/question3/paper.png b/public/images/question3/paper.png new file mode 100644 index 0000000..8b506fa Binary files /dev/null and b/public/images/question3/paper.png differ diff --git a/public/images/question3/plastic-waste.png b/public/images/question3/plastic-waste.png new file mode 100644 index 0000000..8595622 Binary files /dev/null and b/public/images/question3/plastic-waste.png differ diff --git a/public/images/question30/electric.png b/public/images/question30/electric.png new file mode 100644 index 0000000..e96e900 Binary files /dev/null and b/public/images/question30/electric.png differ diff --git a/public/images/question30/fischreste.png b/public/images/question30/fischreste.png new file mode 100644 index 0000000..3025338 Binary files /dev/null and b/public/images/question30/fischreste.png differ diff --git a/public/images/question30/plastic-waste.png b/public/images/question30/plastic-waste.png new file mode 100644 index 0000000..2a7aae4 Binary files /dev/null and b/public/images/question30/plastic-waste.png differ diff --git a/public/images/question30/teefilter.png b/public/images/question30/teefilter.png new file mode 100644 index 0000000..f57b977 Binary files /dev/null and b/public/images/question30/teefilter.png differ diff --git a/public/images/question4/backpapier.png b/public/images/question4/backpapier.png new file mode 100644 index 0000000..f2b922a Binary files /dev/null and b/public/images/question4/backpapier.png differ diff --git a/public/images/question4/can3.png b/public/images/question4/can3.png new file mode 100644 index 0000000..848aef7 Binary files /dev/null and b/public/images/question4/can3.png differ diff --git a/public/images/question4/hair.png b/public/images/question4/hair.png new file mode 100644 index 0000000..9a784bb Binary files /dev/null and b/public/images/question4/hair.png differ diff --git a/public/images/question4/paper.png b/public/images/question4/paper.png new file mode 100644 index 0000000..8b506fa Binary files /dev/null and b/public/images/question4/paper.png differ diff --git a/public/images/question5/glühbirne.png b/public/images/question5/glühbirne.png new file mode 100644 index 0000000..8e7e8cf Binary files /dev/null and b/public/images/question5/glühbirne.png differ diff --git a/public/images/question5/mask.png b/public/images/question5/mask.png new file mode 100644 index 0000000..4016097 Binary files /dev/null and b/public/images/question5/mask.png differ diff --git a/public/images/question5/newspaper2.png b/public/images/question5/newspaper2.png new file mode 100644 index 0000000..c01de1d Binary files /dev/null and b/public/images/question5/newspaper2.png differ diff --git a/public/images/question5/straw.png b/public/images/question5/straw.png new file mode 100644 index 0000000..439190e Binary files /dev/null and b/public/images/question5/straw.png differ diff --git a/public/images/question6/biomüll.png b/public/images/question6/biomüll.png new file mode 100644 index 0000000..4adc9db Binary files /dev/null and b/public/images/question6/biomüll.png differ diff --git a/public/images/question6/brokenItems.png b/public/images/question6/brokenItems.png new file mode 100644 index 0000000..06fd167 Binary files /dev/null and b/public/images/question6/brokenItems.png differ diff --git a/public/images/question6/can2.png b/public/images/question6/can2.png new file mode 100644 index 0000000..4eb2ca8 Binary files /dev/null and b/public/images/question6/can2.png differ diff --git a/public/images/question6/cigarette.png b/public/images/question6/cigarette.png new file mode 100644 index 0000000..fd3b91d Binary files /dev/null and b/public/images/question6/cigarette.png differ diff --git a/public/images/question7/can1.png b/public/images/question7/can1.png new file mode 100644 index 0000000..a7d23ae Binary files /dev/null and b/public/images/question7/can1.png differ diff --git a/public/images/question7/cigarette.png b/public/images/question7/cigarette.png new file mode 100644 index 0000000..fd3b91d Binary files /dev/null and b/public/images/question7/cigarette.png differ diff --git a/public/images/question7/eierschalen.png b/public/images/question7/eierschalen.png new file mode 100644 index 0000000..610029e Binary files /dev/null and b/public/images/question7/eierschalen.png differ diff --git a/public/images/question7/plastic-waste.png b/public/images/question7/plastic-waste.png new file mode 100644 index 0000000..8595622 Binary files /dev/null and b/public/images/question7/plastic-waste.png differ diff --git a/public/images/question8/blumen.png b/public/images/question8/blumen.png new file mode 100644 index 0000000..95653a2 Binary files /dev/null and b/public/images/question8/blumen.png differ diff --git a/public/images/question8/kabel.png b/public/images/question8/kabel.png new file mode 100644 index 0000000..f6925ec Binary files /dev/null and b/public/images/question8/kabel.png differ diff --git a/public/images/question8/keramik.png b/public/images/question8/keramik.png new file mode 100644 index 0000000..fb74e96 Binary files /dev/null and b/public/images/question8/keramik.png differ diff --git a/public/images/question8/straw.png b/public/images/question8/straw.png new file mode 100644 index 0000000..439190e Binary files /dev/null and b/public/images/question8/straw.png differ diff --git a/public/images/question9/biomüll.png b/public/images/question9/biomüll.png new file mode 100644 index 0000000..4adc9db Binary files /dev/null and b/public/images/question9/biomüll.png differ diff --git a/public/images/question9/cigarette.png b/public/images/question9/cigarette.png new file mode 100644 index 0000000..fd3b91d Binary files /dev/null and b/public/images/question9/cigarette.png differ diff --git a/public/images/question9/defektItems.png b/public/images/question9/defektItems.png new file mode 100644 index 0000000..9cc49f9 Binary files /dev/null and b/public/images/question9/defektItems.png differ diff --git a/public/images/question9/windeln.png b/public/images/question9/windeln.png new file mode 100644 index 0000000..d55d68b Binary files /dev/null and b/public/images/question9/windeln.png differ diff --git a/public/images/recycle.png b/public/images/recycle.png new file mode 100644 index 0000000..cb788c2 Binary files /dev/null and b/public/images/recycle.png differ diff --git a/public/images/restmüllTonne.png b/public/images/restmüllTonne.png new file mode 100644 index 0000000..447e8d4 Binary files /dev/null and b/public/images/restmüllTonne.png differ diff --git a/public/images/rmHint.png b/public/images/rmHint.png new file mode 100644 index 0000000..bcf993a Binary files /dev/null and b/public/images/rmHint.png differ diff --git a/svg.css b/svg.css new file mode 100644 index 0000000..04ee84f --- /dev/null +++ b/svg.css @@ -0,0 +1,187 @@ +.biggest-cloud { + animation: move 40s linear infinite; +} +.pink-cloud-2 { + animation: move 40s 3s linear infinite; + opacity: 0; +} +.pink-center-cloud { + animation: move 40s 20s linear infinite; + opacity: 0; +} + +@keyframes move { + 0% { + opacity: 0; + } + 25% { + transform: translate(30%); + opacity: 0.9; + } + + 50% { + transform: translate(60%); + opacity: 1; + } + 100% { + transform: translate(100%); + opacity: 0.5; + } +} +.pink-cloud-1 { + animation: move1 40s 20s linear infinite; + opacity: 0; +} +.sun-cloud { + animation: move1 40s 15s linear infinite; + opacity: 0; +} +.cloud-right { + animation: move1 45s 10s linear infinite; + opacity: 0; +} +.cloud-center { + animation: move1 50s 20s linear infinite; + opacity: 0; +} +.blue-cloud { + animation: move1 50s 20s linear infinite; + opacity: 0; +} + +@keyframes move1 { + 0% { + transform: translate(-30%); + opacity: 0; + } + 25% { + transform: translate(0%); + opacity: 0.3; + } + 50% { + transform: translate(30%); + opacity: 0.5; + } + 100% { + transform: translate(60%); + opacity: 1; + } +} + +.sun { + animation: sunshine 10s ease-in infinite; + /* opacity: 0; */ +} + +@keyframes sunshine { + from { + filter: drop-shadow(0px 0px 1px #ffd249); + } + to { + filter: drop-shadow(0px 0px 10px #ffd249); + } +} + +.leaf-on-earth-left-1 { + transform-origin: 120px 100px; + animation: wave1 4.5s 1s ease-in infinite; +} + +.leaf-on-earth-left-2 { + transform-origin: 120px 100px; + animation: wave1 5s 1s ease-in infinite; +} + +.leaf-on-earth-left-3 { + transform-origin: 120px 100px; + animation: wave1 5.5s 0.5s ease-in infinite; +} + +.leaf-on-earth-right-1 { + transform-origin: 160px 100px; + animation: wave2 5s ease-in infinite; +} +.leaf-on-earth-right-2 { + transform-origin: 160px 100px; + animation: wave2 5.5s 0.5s ease-in infinite; +} +.leaf-on-earth-right-3 { + transform-origin: 160px 100px; + animation: wave2 4.5s 1s ease-in infinite; +} + +.tree { + transform-origin: 160px 100px; + animation: wave 4.5s 1s ease-in infinite; +} + +@keyframes wave1 { + 0%, + 100% { + transform: rotateX(20deg); + transform-origin: 120px 95px; + } + 50% { + transform: rotateY(25deg); + transform-origin: 119px 90px; + } +} + +@keyframes wave2 { + 0%, + 100% { + transform: rotateX(15deg); + transform-origin: 155px 95px; + } + 50% { + transform: rotateY(20deg); + transform-origin: 150px 90px; + } + } + +.sun-line { + transform-origin: 165px 53px; + filter: drop-shadow(0px 0px 1px #ffd249); + animation: shine 4s ease-in infinite; +} + +@keyframes shine { + /* 0%{ + opacity: 0; + } + 100%{ + opacity: 1; + } */ + 0%, + 100% { + transform: scale(0); + filter: drop-shadow(0px 0px 1px #ffd249); + } + 50%, + 80%, + 90% { + transform: scale(1.1); + filter: drop-shadow(0px 0px 10px #ffd249); + } +} + +/* +0%, 100% { transform: rotateX(10deg) }, +50% { transform: rotateY(5deg) } */ + +.mouth { + /* opacity: 1; */ + + animation: smile 5s linear infinite; + transform-origin: 80px 80px; +} + +@keyframes smile { + 0%, + 100% { + transform: scale(0.7); + } + 50% { + transform: scale(1.3); + } +}