Add a 10 secs alert to Master Typing Game

Games/Master_Typing/index.html

@@ -103,8 +103,10 @@ <h1 class="title">Hands on the keyboard 👀</h1>
   </div>
 </div>
 
-<!-- Rest of your HTML code -->
+<!--countdown message-->
+<div id="countdownMessage">Only 10 seconds left!</div>
 
+<script src="path/to/your/javascript/file.js"></script>
 
     <script src="script.js"></script>
   </head>

Games/Master_Typing/script.js

@@ -89,6 +89,12 @@ function startTimer() {
   // Update the timer every second
   intervalId = setInterval(function () {
     secondsLeft--;
+
+    // Added code for alert message when 10 seconds are remaining
+    if (secondsLeft === 10) {
+      showCountdownMessage(); // Show custom alert message
+    }
+
     if (secondsLeft < 0) {
       //call assessment function for review result
       assessment();
@@ -143,3 +149,13 @@ function assessment() {
   timerElement.innerHTML = "00:00";
 }
 
+// Function to show the countdown message
+function showCountdownMessage() {
+  const countdownMessage = document.getElementById("countdownMessage");
+  countdownMessage.style.display = "block";
+
+  // Hide the message after 3 seconds
+  setTimeout(() => {
+    countdownMessage.style.display = "none";
+  }, 3000);
+}

Games/Master_Typing/style.css

@@ -303,4 +303,19 @@ transform: translateY(2px);
 
 .popup-overlay.hidden {
   display: none;
+}
+
+/* Custom countdown message styles */
+#countdownMessage {
+  display: none;
+  position: fixed;
+  top: 10%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(255, 0, 0, 0.8);
+  color: white;
+  padding: 10px 20px;
+  border-radius: 5px;
+  font-size: 20px;
+  z-index: 1000;
 }