Thou shall not go back

src/App.tsx

@@ -14,6 +14,7 @@ import ThankYou from "./pages/ThankYou";
 import UserError from "./pages/Error";
 import PoemViewer from "./pages/PoemViewer";
 import usePreventRefresh from "./components/shared/preventRefresh";
+import usePreventBack from "./components/shared/preventBackBttn";
 import { nanoid } from "nanoid";
 
 // import AudienceInstructions from "./pages/audience/instructions/Instructions";
@@ -58,9 +59,13 @@ function App() {
   const [userData, setUserData] = useState<UserData | null>(null);
   const [sessionId, setSessionId] = useState<string | null>(null);
   const saveTimerRef = useRef<number | null>(null);
+
   usePreventRefresh(
     "To make sure your session counts, please avoid refreshing the page. Do you still want to refresh?"
   );
+  usePreventBack(
+    "To make sure your session counts, please avoid pressing the back button."
+  );
 
   // clear session storage and set the session ID on first render
   useEffect(() => {

src/components/shared/pages/multiPage.tsx

@@ -52,9 +52,12 @@ function MultiPageTemplate({
   const [isTimeUp, setIsTimeUp] = useState(false);
   const [progress, setProgress] = useState(0);
   const [isVisible, setIsVisible] = useState(false);
+  const [countdown, setCountdown] = useState<number | null>(null);
+  const [showCountdownVisible, setShowCountdownVisible] = useState(false);
 
   const autoRedirectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const countdownRef = useRef<NodeJS.Timeout | null>(null);
 
   const isDraggingX = useRef(false);
   const isDraggingY = useRef(false);
@@ -136,6 +139,17 @@ function MultiPageTemplate({
           setIsTimeUp(true);
           clearInterval(timerRef.current!);
 
+          setCountdown(autoRedirectDuration);
+          countdownRef.current = setInterval(() => {
+            setCountdown((prev) => {
+              if (prev && prev > 1) return prev - 1;
+              clearInterval(countdownRef.current!);
+              return 0;
+            });
+          }, 1000);
+
+          setTimeout(() => setShowCountdownVisible(true), 30);
+
           autoRedirectTimeoutRef.current = setTimeout(() => {
             startFadeOut();
           }, autoRedirectDuration * 1000);
@@ -164,6 +178,16 @@ function MultiPageTemplate({
     startFadeOut();
   };
 
+  const formatTime = (seconds: number) => {
+    const m = Math.floor(seconds / 60)
+      .toString()
+      .padStart(2, "0");
+    const s = Math.floor(seconds % 60)
+      .toString()
+      .padStart(2, "0");
+    return `${m}:${s}`;
+  };
+
   return (
     <div className="w-full h-full min-w-96 overflow-hidden">
       <div
@@ -188,18 +212,31 @@ function MultiPageTemplate({
                 className={`w-full h-max flex text-h1 justify-between items-center flex-row text-h1`}
               >
                 <p>{title}</p>
-                <Button
-                  className={`btn-small px-4 ${
-                    !isTimeUp ? "pointer-events-none opacity-50" : ""
-                  } font-sans`}
-                  onClick={handleContinueClick}
-                  disabled={!isTimeUp}
-                  style={{
-                    background: `linear-gradient(to right, #2F2F2F ${progress}%, #B3B3B3 ${progress}%)`,
-                  }}
-                >
-                  {buttonText}
-                </Button>
+                <div className="flex flex-col items-center justify-center min-w-[10rem]">
+                  <Button
+                    className={`btn-small px-4 text-center ${
+                      !isTimeUp ? "pointer-events-none opacity-50" : ""
+                    } font-sans`}
+                    onClick={handleContinueClick}
+                    disabled={!isTimeUp}
+                    style={{
+                      background: `linear-gradient(to right, #2F2F2F ${progress}%, #B3B3B3 ${progress}%)`,
+                    }}
+                  >
+                    {buttonText}
+                  </Button>
+
+                  <div className="h-4 mt-2 flex items-center justify-center">
+                    {isTimeUp && countdown !== null && (
+                      <p
+                        className={`text-xs text-gray-500 text-center transition-opacity duration-700 ease-out
+                        ${showCountdownVisible ? "opacity-100" : "opacity-0"}`}
+                      >
+                        Your next step starts in {formatTime(countdown)}
+                      </p>
+                    )}
+                  </div>
+                </div>
               </div>
 
               <div

src/components/shared/preventBackBttn.tsx

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+
+export default function usePreventBack(message: string) {
+  useEffect(() => {
+    window.history.pushState(null, "", window.location.pathname);
+
+    const handlePopState = () => {
+      alert(message);
+    };
+
+    window.addEventListener("popstate", handlePopState);
+
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+    };
+  }, [message]);
+}

src/pages/artist/instructions/Instructions.tsx

@@ -35,7 +35,9 @@ const ArtistInstructions = () => {
       <div className="w-full h-full flex-col space-y-6">
         <div className="text-main mb-2">
           In this study, you will be introduced to blackout poetry and write
-          your own poem!
+          your own blackout poem! We will walk you through the whole process,
+          and know that blackout poetry is easier than writing a poem because
+          you are provided with the source material.
           <Collapsible.Root unmountOnExit>
             <Collapsible.Trigger className="text-main underline italic text-light-grey-1 pt-2">
               <div className="flex flex-row items-center space-x-2">
@@ -101,7 +103,9 @@ const ArtistInstructions = () => {
             <p className="text-main mb-0">
               Important: please do not take screenshots, copy text, or consult
               external tools such as ChatGPT. We're interested in your best
-              effort and what you learn.
+              effort and what you learn! In addition, do not refresh or use the
+              browser's back/forward buttons as you will not be able to continue
+              the task.
             </p>
           </div>
         </div>