Complete Game for Children
Dang Hai Yen
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,269 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="/index.css" />
|
||||
<title>Müll-check</title>
|
||||
<link rel="icon" type="image/x-icon" href="/public/images/recycle.png" />
|
||||
</head>
|
||||
<body id="wrapper">
|
||||
<div id="error-page" class="error">
|
||||
<div class="container text-center h-100vh d-flex align-items-center">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="game-page">
|
||||
<!-- Introduction -->
|
||||
<div id="introduction-page">
|
||||
<div class="text-end h-7vh">
|
||||
<div class="pt-2 pe-3">
|
||||
<a href="https://vibentec-it.io/de" target="_blank"
|
||||
><img
|
||||
src="/public/images/logo.png"
|
||||
width="15%"
|
||||
alt="Vibentec IT Logo"
|
||||
/></a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="introduction"
|
||||
class="text-start justify-content-center align-items-center h-90vh"
|
||||
>
|
||||
<div class="align-items-baseline introduction-container d-flex px-0">
|
||||
<div class="col"></div>
|
||||
<div class="col-4 m-auto" id="title">
|
||||
<h4>Bist du bereit mit Müll-Check?</h4>
|
||||
<h5>
|
||||
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.
|
||||
<br />
|
||||
Viel Erfolg !!!
|
||||
</h5>
|
||||
<div class="text-center">
|
||||
<button
|
||||
type="button"
|
||||
id="play-btn"
|
||||
class="btn bg-green text-white"
|
||||
onclick="playGame()"
|
||||
>
|
||||
Spielen
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
id="hint-btn"
|
||||
class="btn bg-green ms-1 text-white"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#hinweiseModal"
|
||||
>
|
||||
Hinweise
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="hinweiseModal"
|
||||
tabindex="-1"
|
||||
aria-labelledby="hinweiseModalLabel"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div
|
||||
class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable"
|
||||
>
|
||||
<div class="modal-content text-black">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5 fw-lighter" id="modalLabel">
|
||||
Hinweise
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<img
|
||||
src="/public/images/hinweis.png"
|
||||
alt="Müllsortieren Hinweis"
|
||||
class="w-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7" id="iframe-container">
|
||||
<iframe title="kidImg" src="kids.svg" class="w-100"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end h-3vh">
|
||||
<p class="m-0 fw-lighter pe-3">
|
||||
Müll-check ist ein kleines Geschenk von Vibentec IT für Kinder zum
|
||||
Kindertag 01.06
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- hint -->
|
||||
<div id="hint-container">
|
||||
</div>
|
||||
|
||||
<!-- Game Container -->
|
||||
<div id="game-container" class="h-100vh">
|
||||
<div class="text-center h-100 d-flex justify-content-center">
|
||||
<div id="content" class="w-75 m-auto">
|
||||
<div class="row justify-content-end pt-5 fs-3">
|
||||
<div class="col-2 px-0 text-end">Score:</div>
|
||||
<div class="col-1 px-0" id="score"></div>
|
||||
</div>
|
||||
<div id="countdown-timer" class="row justify-content-center mb-5">
|
||||
<div id="seconds" class="col-2 px-0 text-end"></div>
|
||||
<div class="col-2 px-0 w-25px">.</div>
|
||||
<div id="milliseconds" class="col-2 px-0 text-start"></div>
|
||||
</div>
|
||||
|
||||
<!-- question -->
|
||||
<div class="row mb-5 justify-content-center">
|
||||
<div class="col-5" id="question">
|
||||
<img alt="Question Image" width="200px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- choices -->
|
||||
<div id="choices-container" class="row">
|
||||
<div
|
||||
class="row justify-content-center h-100 align-items-center"
|
||||
id="choices"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Save Score -->
|
||||
<div id="modal-save-score" class="text-white">
|
||||
<div id="modal-save-score-backdrop">
|
||||
<div
|
||||
class="container d-flex text-center justify-content-center align-items-center h-100vh"
|
||||
>
|
||||
<div class="h-50 w-50 modal-save-score-content">
|
||||
<div class="text-end mt-3 me-3 cursor-pointer">
|
||||
<i
|
||||
class="bi bi-x-circle-fill fs-1"
|
||||
onclick="goToIntroductionPage()"
|
||||
></i>
|
||||
</div>
|
||||
<div
|
||||
class="container h-75 d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<div>
|
||||
<div id="last-score"></div>
|
||||
<div>
|
||||
<h5>Schreib deinen Name ein !</h5>
|
||||
<input
|
||||
type="text"
|
||||
name="input-name"
|
||||
id="player-name"
|
||||
class="text-center"
|
||||
required
|
||||
/>
|
||||
<div
|
||||
style="display: none"
|
||||
id="validation-player-name"
|
||||
class="fw-lighter text-warning fs-6"
|
||||
>
|
||||
Das ist ein Pflichtfeld.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<button
|
||||
type="button"
|
||||
id="save-btn"
|
||||
class="btn bg-green ms-1 text-white"
|
||||
onclick="saveScore()"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Erfolg -->
|
||||
<div id="end-container">
|
||||
<div
|
||||
id="end-content"
|
||||
class="container text-center d-flex justify-content-center align-items-center h-100vh"
|
||||
>
|
||||
<div class="row w-100 align-items-baseline">
|
||||
<div id="end-score" class="col-12 pb-5">
|
||||
<h1></h1>
|
||||
</div>
|
||||
|
||||
<div class="m-auto w-50">
|
||||
<table class="w-100 table">
|
||||
<tbody id="ranking-row"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
<div class="col-5 pt-5">
|
||||
<button
|
||||
type="button"
|
||||
id="play-again-btn"
|
||||
class="btn bg-green py-3 px-5 border-0 text-white"
|
||||
onclick="playAgain()"
|
||||
>
|
||||
Nochmal spielen
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-5 pt-5">
|
||||
<button
|
||||
type="button"
|
||||
id="quit-btn"
|
||||
class="btn bg-green py-3 px-5 border-0 text-white"
|
||||
onclick="goToIntroductionPage()"
|
||||
>
|
||||
Aufhören
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 =
|
||||
" <h2 class='fw-lighter'> Dein Ergebnis: <h1><strong> " +
|
||||
score * 10 +
|
||||
" </strong></h1></h2> ";
|
||||
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 +=
|
||||
`<div class="col-md-6 col-lg-3 justify-content-center mb-lg-0 p-0 choice-content"> <img class='choice
|
||||
cursor-pointer' alt='Choice Image' hint='` +
|
||||
allOptions[optionRandom].hint +
|
||||
`'` +
|
||||
choiceSrc +
|
||||
`></img> </div>`;
|
||||
|
||||
allHints.push(allOptions[optionRandom].hint);
|
||||
const hintAttribute =
|
||||
`src='` +
|
||||
allOptions[optionRandom].hint +
|
||||
`' id='` +
|
||||
allHints.indexOf(allOptions[optionRandom].hint) +
|
||||
`' class='hint'`;
|
||||
hintContainer.innerHTML += `<img ` + hintAttribute + `></img>`;
|
||||
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 =
|
||||
"<h1 class='fw-bold'> Du bist am " + rankData.currentRank + ". Platz </h1> <h5>Übung macht den Meister. Toi Toi Toi <i class='bi bi-emoji-smile-fill'></i></h5>";
|
||||
} else {
|
||||
document.getElementById("end-score").innerHTML = "<h1 class='fw-bold'> Du bist am " + rankData.currentRank + ". Platz <i class='bi bi-trophy-fill'></i> </h1> <h4> Prima !!! </h4>";
|
||||
}
|
||||
|
||||
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 +=
|
||||
" <tr class='" +
|
||||
j +
|
||||
"'> <th scope='row'>" +
|
||||
(index + 1) +
|
||||
"</th> <td>" +
|
||||
i.name +
|
||||
"</td><td>" +
|
||||
i.score +
|
||||
"</td></tr>";
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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";
|
||||
}
|
||||
|
After Width: | Height: | Size: 197 KiB |
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 77 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 198 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 52 KiB |