adding of points distribution

css/game.css

@@ -79,3 +79,34 @@ body {
   background: rgb(11, 223, 36);
   width: 0%;
 }
+.green-score{
+  color: green;
+}
+.red-score{
+  color:red;
+}
+
+#addPoints{
+  display:none;
+  position: relative;
+  right:90px;
+  color:green;
+  font-size: 20px;
+  top: -100px;
+  animation: ripple-animation 0.6s linear;
+}
+#subPoints{
+  display:none;
+  position: relative;
+  right:90px;
+  color:red;
+  font-size: 20px;
+  top: -100px;
+  animation: ripple-animation 0.6s linear;
+}
+@keyframes ripple-animation {
+  to {
+    transform: scale(2);
+    opacity: 0;
+  }
+}

css/index.css

@@ -211,6 +211,7 @@ input::placeholder {
   font-size: 2.3rem;
   text-align: center;
   padding-bottom: 2.4rem;
+  cursor: pointer;
 }
 
 .back-btn {

css/topics.css

@@ -159,12 +159,6 @@ background-image: linear-gradient(
   );
 }
 
-#instrum-btn {
-background-color: #85FFBD;
-background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
-}
-
-
 #jaidenanimations-btn {
   background-color: #4158D0;
   background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

js/QuizClass.js

@@ -7,12 +7,14 @@ export class Quiz {
     this.QUESTION_VALUE = 100;
     this.QUESTIONS_AMOUNT = dataQA.length;
     this.barPercetage = 0;
+    this.streakPoints = 0;
+    this.timePoints = 0;
     this.score = 0;
     this.answer = "";
     this.canClick = true;
     this.noOfCorrect = 0;
     this.TOTAL_CORRECT = 0;
-
+    
     this.correctStreak = 0; // Tracks consecutive correct answers
     this.startTime = 0; // Stores the start time of each question
     // runs here because we want to load the first round of questions
@@ -92,9 +94,13 @@ export class Quiz {
       this._updateCorrectCount();
       this.calculateTimeBonus();
       this.updateStreak();
+      document.getElementById('score').classList.add('green-score');
+      document.getElementById('addPoints').style.display = 'block';
     } else {
       p.parentElement.classList.add("incorrect");
       this.score -= this.QUESTION_VALUE;
+      document.getElementById('score').classList.add('red-score');
+      document.getElementById('subPoints').style.display = 'block';
     }
 
     document.getElementById("score").textContent = this.score;
@@ -106,6 +112,10 @@ export class Quiz {
       this.canClick = true;
       p.parentElement.classList.remove("incorrect");
       p.parentElement.classList.remove("correct");
+      document.getElementById('score').classList.remove('green-score');
+      document.getElementById('score').classList.remove('red-score');
+      document.getElementById('subPoints').style.display = 'none';
+      document.getElementById('addPoints').style.display = 'none';
     }, 600);
   }
 
@@ -118,10 +128,13 @@ export class Quiz {
 
     if (elapsed <= 1000) {
       this.score += 1000;
-    } else if (elapsed <= 5000) {
+      this.timePoints = 1000;
+        } else if (elapsed <= 5000) {
       this.score += 500;
+      this.timePoints = 500;
     } else if (elapsed <= 10000) {
       this.score += 100;
+      this.timePoints = 100;
     }
   }
 
@@ -130,18 +143,100 @@ export class Quiz {
 
     if (this.correctStreak === 2) {
       this.score += 200;
+      this.streakPoints = 300;
+      this.bonusPoints = this.streakPoints + this.timePoints
+      this.displayText = "+" + this.bonusPoints;
+      document.getElementById("addPoints").textContent = this.displayText;
     } else if (this.correctStreak === 3) {
       this.score += 300;
-    } else if (this.correctStreak === 5) {
+      this.streakPoints = 400;
+      this.bonusPoints = this.streakPoints + this.timePoints
+      this.displayText = "+" + this.bonusPoints;
+      document.getElementById("addPoints").textContent = this.displayText;
+    } else if (this.correctStreak === 4) {
+      this.score += 300;
+      this.streakPoints = 400;
+      this.bonusPoints = this.streakPoints + this.timePoints
+      this.displayText = "+" + this.bonusPoints;
+      document.getElementById("addPoints").textContent = this.displayText;
+    }else if (this.correctStreak === 5) {
+      this.score += 800;
+      this.streakPoints = 900;
+      this.bonusPoints = this.streakPoints + this.timePoints
+      this.displayText = "+" + this.bonusPoints;
+      document.getElementById("addPoints").textContent = this.displayText;
+    } else if (this.correctStreak === 6) {
+      this.score += 800;
+      this.streakPoints = 900;
+      this.bonusPoints = this.streakPoints + this.timePoints
+      this.displayText = "+" + this.bonusPoints;
+      document.getElementById("addPoints").textContent = this.displayText;
+    }else if (this.correctStreak === 7) {
+      this.score += 800;
+      this.streakPoints = 900;
+      this.bonusPoints = this.streakPoints + this.timePoints
+      this.displayText = "+" + this.bonusPoints;
+      document.getElementById("addPoints").textContent = this.displayText;
+    }else if (this.correctStreak === 8) {
+      this.score += 800;
+      this.streakPoints = 900;
+      this.bonusPoints = this.streakPoints + this.timePoints
+      this.displayText = "+" + this.bonusPoints;
+      document.getElementById("addPoints").textContent = this.displayText;
+    }else if (this.correctStreak === 9) {
       this.score += 800;
-    } else if (this.correctStreak === 10) {
+      this.streakPoints = 900;
+      this.bonusPoints = this.streakPoints + this.timePoints
+      this.displayText = "+" + this.bonusPoints;
+      document.getElementById("addPoints").textContent = this.displayText;
+    }else if (this.correctStreak === 10) {
       this.score += 1200;
+      this.streakPoints = 1300;
+      this.bonusPoints = this.streakPoints + this.timePoints
+      this.displayText = "+" + this.bonusPoints;
+      document.getElementById("addPoints").textContent = this.displayText;
+    }else if (this.correctStreak === 11) {
+      this.score += 1200;
+      this.streakPoints = 1300;
+      this.bonusPoints = this.streakPoints + this.timePoints
+      this.displayText = "+" + this.bonusPoints;
+      document.getElementById("addPoints").textContent = this.displayText;
+    }else if (this.correctStreak === 12) {
+      this.score += 1200;
+      this.streakPoints = 1300;
+      this.bonusPoints = this.streakPoints + this.timePoints
+      this.displayText = "+" + this.bonusPoints;
+      document.getElementById("addPoints").textContent = this.displayText;
+    }else if (this.correctStreak === 13) {
+      this.score += 1200;
+      this.streakPoints = 1300;
+      this.bonusPoints = this.streakPoints + this.timePoints
+      this.displayText = "+" + this.bonusPoints;
+      document.getElementById("addPoints").textContent = this.displayText;
+    }else if (this.correctStreak === 14) {
+      this.score += 1200;
+      this.streakPoints = 1300;
+      this.bonusPoints = this.streakPoints + this.timePoints
+      this.displayText = "+" + this.bonusPoints;
+      document.getElementById("addPoints").textContent = this.displayText;
     } else if (this.correctStreak === 15) {
       this.score += 1500;
+      this.streakPoints = 1600;
+      this.bonusPoints = this.streakPoints + this.timePoints
+      this.displayText = "+" + this.bonusPoints;
+      document.getElementById("addPoints").textContent = this.displayText;
     } else if (this.correctStreak > 15) {
       this.score += 1500; // Add 1500 points for each additional correct answer beyond 15
-    } else {
-      this.correctStreak = 1; // Reset the streak if the answer is not consecutive
+      this.streakPoints = 1600;
+      this.bonusPoints = this.streakPoints + this.timePoints
+      this.displayText = "+" + this.bonusPoints;
+      document.getElementById("addPoints").textContent = this.displayText;
+    } else if (this.correctStreak = 1){
+      this.score += 100;// Reset the streak if the answer is not consecutive
+      this.streakPoints = 200;
+      this.bonusPoints = this.streakPoints + this.timePoints
+      this.displayText = "+" + this.bonusPoints;
+      document.getElementById("addPoints").textContent = this.displayText;
     }
   }
 }

js/christmas-songs.js

@@ -1,67 +1,46 @@
-// Song URL
-const songs = [
-  "/music/christmas/AVeryMogulChristmas.mp3",
-  "/music/christmas/FelizNavidad.mp3",
-  "/music/christmas/DeckTheHalls.mp3",
-  "/music/christmas/It'sThatTimeOfTheYear.mp3",
-];
-
-// Initialize DOM variables
-let audioElement = document.getElementById("my_audio");
-let musicOnButton = document.getElementById("musicOnButton");
-let musicOffButton = document.getElementById("musicOffButton");
-
-// Define the playMusic function, handling the music
-const playMusic = () => {
-  // Define the song and its URL
-  let randomIndex = Math.floor(Math.random() * songs.length);
-  let audioSource = document.getElementById("audio_source");
-
-  // Load the song info into the audioElement
-  audioSource.src = songs[randomIndex];
-  audioElement.load();
-
-  // Update the AudioElement to handle playing the song
-  audioElement.addEventListener(
-    "canplaythrough",
-    () => {
-      try {
-        audioElement.play();
-        musicOnButton.style.display = "none";
-        musicOffButton.style.display = "block";
-      } catch (err) {
+var songs = [
+    "/music/christmas/AVeryMogulChristmas.mp3",
+    "/music/christmas/FelizNavidad.mp3",
+    "/music/christmas/DeckTheHalls.mp3",
+    "/music/christmas/It'sThatTimeOfTheYear.mp3",
+  ];
+
+  var audioElement = document.getElementById('my_audio');
+  var musicOnButton = document.getElementById('musicOnButton');
+
+  function playMusic() {
+    var randomIndex = Math.floor(Math.random() * songs.length);
+    var audioSource = document.getElementById('audio_source');
+    audioSource.src = songs[randomIndex];
+    audioElement.load();
+
+    audioElement.addEventListener('canplaythrough', function() {
+      audioElement.play().catch(function(error) {
+        console.log('Error playing audio:', error);
         pauseMusic();
-        throw err;
-      }
-    },
-    { once: true }
-  );
+      });
+      musicOnButton.style.display = 'none';
+    }, { once: true });
 
-  // Update the AudioElement to handle pausing the song
-  audioElement.addEventListener("pause", function () {
-    musicOnButton.style.display = "block";
-    musicOffButton.style.display = "none";
-  });
-};
+    audioElement.addEventListener('pause', function() {
+      musicOnButton.style.display = 'block';
+    });
+  }
 
-// Define the pauseMusic function, handling the commands to stop the music
-const pauseMusic = () => {
-  audioElement.pause();
-  musicOnButton.style.display = "block";
-  musicOffButton.style.display = "none";
-};
+  function pauseMusic() {
+    audioElement.pause();
+    musicOnButton.style.display = 'block';
+  }
 
-// Define the toggleMusic function, handling the commands to toggle
-// the buttons "musicOnButton" and "musicOffButton"
-const toggleMusic = () => {
-  if (audioElement.paused) {
-    playMusic();
-  } else {
-    pauseMusic();
+  function toggleMusic() {
+    if (audioElement.paused) {
+      playMusic();
+    } else {
+      pauseMusic();
+    }
   }
-};
 
-// Play music on page load
-window.addEventListener("load", () => {
-  playMusic();
-});
+  // Play music on page load
+  window.addEventListener('load', function() {
+    playMusic();
+  });

js/data/index.js

@@ -20,7 +20,6 @@ import footballQA from "./football.js";
 
 import fruitQA from "./fruit.js";
 import generalQA from "./general.js";
-import instrumentsQA from "./instruments.js";
 import kendallQA from "./kendall_quiz.js";
 
 import minecraftQA from "./minecraft.js";
@@ -46,7 +45,6 @@ export {
   footballQA,
   fruitQA,
   generalQA,
-  instrumentsQA,
   kendallQA,
   minecraftQA,
   presidentsQA,
@@ -57,4 +55,4 @@ export {
   youtubeQA,
   TheOdd1sOutQA,
   JaidenAnimationsQA,
-};
+};