diff --git a/src/App.tsx b/src/App.tsx index 4605c9f..f367ef2 100644 --- a/src/App.tsx +++ b/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(null); const [sessionId, setSessionId] = useState(null); const saveTimerRef = useRef(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(() => { diff --git a/src/components/shared/pages/multiPage.tsx b/src/components/shared/pages/multiPage.tsx index bdbf982..81c5221 100644 --- a/src/components/shared/pages/multiPage.tsx +++ b/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(null); + const [showCountdownVisible, setShowCountdownVisible] = useState(false); const autoRedirectTimeoutRef = useRef(null); const timerRef = useRef(null); + const countdownRef = useRef(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 (

{title}

- +
+ + +
+ {isTimeUp && countdown !== null && ( +

+ Your next step starts in {formatTime(countdown)} +

+ )} +
+
{ + window.history.pushState(null, "", window.location.pathname); + + const handlePopState = () => { + alert(message); + }; + + window.addEventListener("popstate", handlePopState); + + return () => { + window.removeEventListener("popstate", handlePopState); + }; + }, [message]); +} diff --git a/src/pages/artist/instructions/Instructions.tsx b/src/pages/artist/instructions/Instructions.tsx index 0f58332..17b0a61 100644 --- a/src/pages/artist/instructions/Instructions.tsx +++ b/src/pages/artist/instructions/Instructions.tsx @@ -35,7 +35,9 @@ const ArtistInstructions = () => {
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.
@@ -101,7 +103,9 @@ const ArtistInstructions = () => {

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.