Update pager.js

pager.js

@@ -0,0 +1,33 @@
+let c = 0;
+let delay = parseInt(document.getElementById("speedInput").value); // 200 milliseconds = 0.2 seconds
+let paused = false; // Flag to check if paused
+let timeoutId; // Store the timeout ID
+
+document.getElementById("pauseButton").addEventListener("click", function() {
+  paused = !paused; // Toggle pause state
+  this.textContent = paused ? "Resume" : "Pause"; // Change button text
+  if (!paused) {
+    displayWord(); // Resume word display if not paused
+  } else {
+    clearTimeout(timeoutId); // Clear the timeout if paused
+  }
+});
+
+document.getElementById("speedInput").addEventListener("change", function() {
+  delay = parseInt(this.value);
+});
+
+function displayWord() {
+  if (c < string.length && !paused) {
+    let word = string[c];
+    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
+    ctx.font = "24px Arial";
+    ctx.textAlign = "center"; // Center the text horizontally
+    ctx.textBaseline = "middle"; // Center the text vertically
+    ctx.fillText(word, canvas.width / 2, canvas.height / 2); // Display the word at the center
+    c++;
+    timeoutId = setTimeout(displayWord, delay); // Store the timeout ID
+  }
+}
+
+displayWord(); // Start the process