hot fix UI and function

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

common.css

@@ -68,8 +68,8 @@ h5 {
 .w-50vw {
   width: 50vw;
 }
-.w-25px {
+.w-40px {
-  width: 25px;
+  width: 40px;
 }
 
 .bg-green {

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;
+  }
+}

index.html

@@ -49,14 +49,15 @@
             <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
+                Im Spiel entspricht jede Frage der Farbe von der Mülltonne.
-                Auswahl ist richtig). Die Frage entspricht der Mülltonnefarbe
+                Wähl schnell wie möglich innerhalb von 3 Minuten
-                (Biomüll-, Altpapier-, Gelbe- und Restmülltone). Wähl schnell
+                die richtige Müllart aus, die du in den angegebenen Mülltonne
-                wie möglich innerhalb von 3 Minuten aus 4 Auswahlmöglichkeiten
+                werfen darf. 
-                die Müllart aus, die zum Werfen in den angegebenen Mülltonne
+                <br> 
-                geeignet ist. Für jede richtige Antwort erhältest du zusätzlich
+                Für jede richtige Antwort erhältest du zusätzlich
                 10 Punkte.
-                <br />
+                <br>
+
                 Viel Erfolg !!!
               </h5>
               <div class="text-center">
@@ -140,9 +141,9 @@
               <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 id="min" class="col-2 px-0 text-end">03</div>
-              <div class="col-2 px-0 w-25px">.</div>
+              <div class="col-2 px-0 w-40px">:</div>
-              <div id="milliseconds" class="col-2 px-0 text-start"></div>
+              <div id="seconds" class="col-2 px-0 text-start">00</div>
             </div>
 
             <!-- question -->

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 min = Math.floor(time/60);
-  let milliseconds = time % 1000;
+  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() {
       " </strong></h1></h2> ";
     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();
 }