From 1f6540922ada7234389d9608517a77e6d8a952b7 Mon Sep 17 00:00:00 2001 From: Dang Hai Yen <> Date: Sat, 27 May 2023 21:52:30 +0200 Subject: [PATCH] hot fix UI and function --- .vscode/settings.json | 3 +++ common.css | 4 +-- index.css | 21 ++++++++++++++++ index.html | 21 ++++++++-------- index.js | 57 +++++++++++++++++++++++++++---------------- 5 files changed, 73 insertions(+), 33 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/common.css b/common.css index cc89403..8a320e7 100644 --- a/common.css +++ b/common.css @@ -68,8 +68,8 @@ h5 { .w-50vw { width: 50vw; } -.w-25px { - width: 25px; +.w-40px { + width: 40px; } .bg-green { diff --git a/index.css b/index.css index 71b52a1..fb5c698 100644 --- a/index.css +++ b/index.css @@ -65,6 +65,20 @@ body { /* display: none; */ } +.hint{ + animation: blinker 1s linear infinite; +} + +@keyframes blinker { + 20% { + opacity: 0; + } + 21%{ + opacity: 1; + } + +} + /* .backgroundImg{ background-image: url("/public/images/background2.jpeg"); background-repeat: no-repeat; @@ -169,6 +183,7 @@ body { top: 15%; left: 7%; } + .choice:hover { width: 70%; } @@ -247,3 +262,9 @@ body { width: 65%; } } + +@media screen and (min-width: 1440px){ + #iframe-container iframe{ + height: 90vh !important; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 86c9c1b..e0830d5 100644 --- a/index.html +++ b/index.html @@ -49,14 +49,15 @@

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 + Im Spiel entspricht jede Frage der Farbe von der Mülltonne. + Wähl schnell wie möglich innerhalb von 3 Minuten + die richtige Müllart aus, die du in den angegebenen Mülltonne + werfen darf. +
+ Für jede richtige Antwort erhältest du zusätzlich 10 Punkte. -
+
+ Viel Erfolg !!!
@@ -140,9 +141,9 @@
-
-
.
-
+
03
+
:
+
00
diff --git a/index.js b/index.js index 76e6243..cc216c3 100644 --- a/index.js +++ b/index.js @@ -1,10 +1,12 @@ //Countdown-timer +const minEl= document.getElementById("min"); const secondsEl = document.getElementById("seconds"); -const millisecondsEl = document.getElementById("milliseconds"); -var defaultTime = 180000; + +var defaultTime = 180; var time = defaultTime; var intervID; var score = 0; +var allowClick = true; if (screen.width < 576 || screen.height < 599) { document.getElementById("error-page").style.display = "block"; @@ -17,18 +19,15 @@ const scoreText = document.getElementById("score"); const hintContainer = document.getElementById("hint-container"); function updateCountdown() { - let seconds = Math.floor(time / 1000); - let milliseconds = time % 1000; - + let min = Math.floor(time/60); + let seconds = time % 60; + min = min < 10 ? "0" + min : min; seconds = seconds < 10 ? "0" + seconds : seconds; - milliseconds = - milliseconds < 10 - ? "0" + milliseconds - : milliseconds.toString().slice(0, 2); - secondsEl.innerHTML = `${seconds}`; - millisecondsEl.innerHTML = `${milliseconds}`; - - time -= 10; + + minEl.innerHTML = `${min}` + secondsEl.innerHTML = `${seconds}` + + time -= 1; if (time < 0) { clearInterval(intervID); removeQuestion(); @@ -40,6 +39,15 @@ function updateCountdown() { " "; completed.play(); } + + if(time<10){ + secondsEl.style.display = "none" + minEl.style.display = "none" + setTimeout(function() { + secondsEl.style.display = "block" + minEl.style.display = "block" + }, 100); + } } async function getJson() { @@ -66,7 +74,6 @@ function removeHint() { 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 @@ -110,26 +117,30 @@ function handleClick(qIndex, allHints) { choices.forEach((choice) => { choice.addEventListener("click", async (e) => { + if(!allowClick) return; + allowClick = false; //other method for hint with getAttribute // console.log(choice.getAttribute("hint")) - //my method + //1.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"; + + //hint appear + document.getElementById(allHints.indexOf(result.hint)).style.display = "block"; // if ( == answer) - // if (questionChoice != 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(() => { + allowClick = true removeQuestion(); removeHint(); getNewQuestion(); @@ -137,18 +148,21 @@ function handleClick(qIndex, allHints) { }); } else { choice.children[0].src = "/public/images/X.png"; + //wait for hint's appearance fail.play().then(() => { setTimeout(() => { + allowClick = true; removeQuestion(); removeHint(); getNewQuestion(); - }, 1000); + }, 2500); }); } }); }); } + async function startGame() { scoreText.innerText = score; allData = await getJson(); @@ -157,11 +171,12 @@ async function startGame() { function playGame() { removeQuestion(); + intervID = setInterval(updateCountdown, 1000); 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); + // intervID = setInterval(updateCountdown, 1000); score = 0; startGame(); } @@ -173,7 +188,7 @@ function playAgain() { document.getElementById("end-container").style.display = "none"; document.getElementById("introduction-page").style.display = "none"; time = defaultTime; - intervID = setInterval(updateCountdown, 10); + intervID = setInterval(updateCountdown, 1000); score = 0; startGame(); }