feat: display how many answers the users got correct on the end screen.

* added number of score in last page

* n

* Update pages/end.html

* small updates

* small updates

* updates

---------

Co-authored-by: Kendall <kendalldoescoding@gmail.com>

Author: sai140202

css/index.css

@@ -16,7 +16,7 @@
 h1 {
   font-size: 5.4rem;
   color: #fff;
-  margin-bottom: 5rem;
+  margin-bottom: 3rem;
   text-align: center;
 }
 

js/QuizClass.js

@@ -4,32 +4,30 @@
 export class Quiz {
   constructor(dataQA = []) {
     this.dataQA = dataQA;
-    // initial game values
     this.QUESTION_VALUE = 100;
     this.QUESTIONS_AMOUNT = dataQA.length;
     this.barPercetage = 0;
     this.score = 0;
     this.answer = "";
     this.canClick = true;
-    // runs here becasue we want to load the first round of questions
+    this.noOfCorrect = 0;
+    this.TOTAL_CORRECT = 0;
+
     this._renderNewQuestion();
   }
 
-  // if there's questions left, return the last one
   _newQuestion() {
     if (this.getQuestionsLen === 0) this._endGame();
     return this.dataQA.pop();
   }
 
-  // takes care of managing the percentage green bar on top
   _renderPercentage() {
     const leftQA = this.dataQA.length;
     const percentage = (1 - leftQA / this.QUESTIONS_AMOUNT) * 100;
 
     document.getElementById("progressBarFull").style.width = `${percentage}%`;
   }
 
-  // need to calculate it based on the total amount, and remaining amount
   _renderQuestionNumber() {
     const leftQA = this.dataQA.length;
     const currentQA = this.QUESTIONS_AMOUNT - leftQA;
@@ -38,7 +36,6 @@ export class Quiz {
     paragraph.textContent = `Question ${currentQA} of ${this.QUESTIONS_AMOUNT}`;
   }
 
-  // get's a new question from newQuestion & renders it to the page
   _renderNewQuestion() {
     const currentQA = this._newQuestion();
     if (!currentQA) {
@@ -54,43 +51,47 @@ export class Quiz {
 
     this.answer = currentQA["answer"];
 
-    // render question && all options
     document.getElementById("question").textContent = currentQA["question"];
 
     pArray.forEach((p, i) => {
       p.textContent = currentQA[`choice${i + 1}`];
     });
   }
 
-  // sends the user to the highscore.html and asks if they want to save their score
   _endGame() {
-    // console.log("GAME ENDED");
     window.localStorage.setItem("mostRecentScore", this.score);
+    window.localStorage.setItem("noofanswerscorrect", this.noOfCorrect);
+    window.localStorage.setItem("noofquestions", this.QUESTIONS_AMOUNT);
+  
     window.location.assign("/pages/end.html");
   }
+  
+  
+
+  _updateCorrectCount() {
+    this.TOTAL_CORRECT++;
+    console.log("Total Correct:", this.TOTAL_CORRECT);
+  }
 
   checkAnswer(selected = 0, correct = 0) {
     const p = document.querySelector(`[data-number="${selected}"]`);
 
     if (!this.canClick) {
-      // console.log("WAIT THERE BOI");
       return;
     }
 
     if (selected === correct) {
       p.parentElement.classList.add("correct");
       this.score += this.QUESTION_VALUE;
-      // console.log("NOICE: ", this.score);
+      this.noOfCorrect++;
+      this._updateCorrectCount();
     } else {
       p.parentElement.classList.add("incorrect");
       this.score -= this.QUESTION_VALUE;
-      // console.log("BAKA GA!: ", this.score);
     }
 
-    // render updated score
     document.getElementById("score").textContent = this.score;
 
-    // delay stuff
     this.canClick = false;
 
     setTimeout(() => {

js/end.js

@@ -1,13 +1,17 @@
 const username = document.querySelector("#username");
 const saveScoreBtn = document.querySelector("#saveScoreBtn");
 const finalScore = document.querySelector("#finalScore");
+const noScore = document.querySelector("#noScore");
 const mostRecentScore = localStorage.getItem("mostRecentScore");
+const noOfCorrect = localStorage.getItem("noofanswerscorrect");
+const totalQuestions = localStorage.getItem("noofquestions");
 
 const highScores = JSON.parse(localStorage.getItem("highScores")) || [];
 
 const MAX_HIGH_SCORES = 5;
 
 finalScore.innerText = mostRecentScore;
+noScore.innerText = `${noOfCorrect}/${totalQuestions}`;
 
 username.addEventListener("keyup", () => {
   saveScoreBtn.disabled = !username.value;
@@ -26,8 +30,12 @@ saveHighScore = (e) => {
   highScores.sort((a, b) => {
     return b.score - a.score;
   });
-  highScores.splice(5);
+  highScores.splice(MAX_HIGH_SCORES);
 
   localStorage.setItem("highScores", JSON.stringify(highScores));
   window.location.assign("/");
 };
+
+function goBack(n) {
+  history.go(n);
+}

pages/end.html

@@ -1,44 +1,52 @@
 <!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" />
-
-    <title>End Page</title>
-
-    <script src="../js/end.js" defer></script>
-    <link rel="stylesheet" href="../css/index.css" />
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
-      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
-  </head>
-
-  <body>
-    <div class="container">
-      <div id="end" class="flex-center flex-column">
-        <h1 id="finalScore">0</h1>
-        <form class="end-form-container">
-          <h2 id="end-text">Enter your name below to save your score!</h2>
-          <input type="text" name="name" id="username" placeholder="Enter your name" />
-          <button class="btn" id="saveScoreBtn" type="submit" onclick="saveHighScore(event)" disabled>
-            Save
-          </button>
-        </form>
-
-        <p class="btn" onclick="goBack(-1)">Play Again</p>
-
-        <p onclick="goBack(-2)" class="btn" target="_blank">Go back to Quiz Home Page Menu<i class="fas fa-home"></i>
-        </p>
-        <a href="/rating.html" class="btn" target="_blank">Please rate our quiz!<i class="far fa-star"></i></a>
+<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" />
+
+  <title>End Page</title>
+
+  <script src="../js/end.js" defer></script>
+  <link rel="stylesheet" href="../css/index.css" />
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+    integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
+</head>
+
+<body>
+  <div class="container">
+    <div id="end" class="flex-center flex-column">
+      <h1 id="finalScore">0</h1>
+      <div style="color: white; font-size: 30px; margin-bottom: 1rem;">
+        <p>You got <span id="noScore" style="font-size: 30px;">0</span> correct. </p>
+      
       </div>
+      <form class="end-form-container">
+        <h2 id="end-text">Enter your name below to save your score!</h2>
+        <input type="text" name="name" id="username" placeholder="Enter your name" />
+
+        <button class="btn" id="saveScoreBtn" type="submit" onclick="saveHighScore(event)" disabled>
+          Save
+        </button>
+      </form>
+
+      <p class="btn" onclick="goBack(-1)">Play Again</p>
+
+      <p onclick="goBack(-2)" class="btn" target="_blank">Go back to Quiz Home Page Menu<i class="fas fa-home"></i>
+      </p>
+      <a href="/rating.html" class="btn" target="_blank">Please rate our quiz!<i class="far fa-star"></i></a>
     </div>
-  </body>
+  </div>
+</body>
+
+<script>
+  const totalScore = localStorage.getItem("noofquestions");
+  document.getElementById("totalScore").textContent = totalScore;
 
-  <script>
-    function goBack(n) {
-      history.go(n);
-    }
-  </script>
+  function goBack(n) {
+    history.go(n);
+  }
+</script>
 
 </html>

pages/game.html

@@ -14,11 +14,14 @@
       import { gameQA } from "../js/data/index.js";
       import { Quiz } from "../js/QuizClass.js";
 
+      
+
       const QuizInstance = new Quiz(gameQA);
 
       document.addEventListener("click", (e) => {
         if (e.target.dataset.number) {
           QuizInstance.checkAnswer(+e.target.dataset.number, QuizInstance.answer);
+          
         }
       });
     </script>