diff --git a/Games/Master_Typing/index.html b/Games/Master_Typing/index.html
index cec518c504..deecb0a8ed 100644
--- a/Games/Master_Typing/index.html
+++ b/Games/Master_Typing/index.html
@@ -103,8 +103,10 @@
Hands on the keyboard 👀
-
+
+Only 10 seconds left!
+
diff --git a/Games/Master_Typing/script.js b/Games/Master_Typing/script.js
index 4849ec5e4b..96d106d0ba 100644
--- a/Games/Master_Typing/script.js
+++ b/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);
+}
diff --git a/Games/Master_Typing/style.css b/Games/Master_Typing/style.css
index 1b106a1018..c531b093a9 100644
--- a/Games/Master_Typing/style.css
+++ b/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;
}
\ No newline at end of file