Found the bug

2024-08-24 00:54:55 +01:00
parent f0f38b335f
commit 2146ef1a92
6 changed files with 221 additions and 147 deletions
--- a/src/exams/Level/TextComponent.tsx
+++ b/src/exams/Level/TextComponent.tsx
@@ -7,7 +7,7 @@ interface Props {
    setContextWordLine: React.Dispatch<React.SetStateAction<number | undefined>>
 }

-const TextComponent: React.FC<Props> = ({part, contextWord, setContextWordLine}) => {
+const TextComponent: React.FC<Props> = ({ part, contextWord, setContextWordLine }) => {
    const textRef = useRef<HTMLDivElement>(null);

    const calculateLineNumbers = () => {
@@ -130,14 +130,11 @@ const TextComponent: React.FC<Props> = ({part, contextWord, setContextWordLine})
    }*/

    return (
-        <div className="flex flex-col gap-2 w-full">
-            <div className="border border-mti-gray-dim w-full rounded-full opacity-10" />
-            <div className="flex mt-2">
-                <div ref={textRef} className="h-fit ml-2 flex flex-col gap-4">
-                    {part.context!.split('\n\n').map((line, index) => {
-                        return <p key={`line-${index}`}><span className="mr-6">{index + 1}</span>{line}</p>
-                    })}
-                </div>
+        <div className="flex mt-2">
+            <div ref={textRef} className="h-fit ml-2 flex flex-col gap-4">
+                {part.context!.split('\n\n').map((line, index) => {
+                    return <p key={`line-${index}`}><span className="mr-6">{index + 1}</span>{line}</p>
+                })}
            </div>
        </div>
    );
--- a/src/exams/Level/index.tsx
+++ b/src/exams/Level/index.tsx
@@ -32,12 +32,32 @@ const typeCheckWordsMC = (words: any[]): words is FillBlanksMCOption[] => {

 export default function Level({ exam, showSolutions = false, onFinish, editing = false }: Props) {
    const levelBgColor = "bg-ielts-level-light";
+
+    const {
+        userSolutions,
+        hasExamEnded,
+        partIndex,
+        exerciseIndex,
+        questionIndex,
+        shuffles,
+        currentSolution,
+        setBgColor,
+        setUserSolutions,
+        setHasExamEnded,
+        setPartIndex,
+        setExerciseIndex,
+        setQuestionIndex,
+        setShuffles,
+        setCurrentSolution
+    } = useExamStore((state) => state);
+
+
    const [multipleChoicesDone, setMultipleChoicesDone] = useState<{ id: string; amount: number }[]>([]);
    const [showQuestionsModal, setShowQuestionsModal] = useState(false);
    const [continueAnyways, setContinueAnyways] = useState(false);
+    const [textRender, setTextRender] = useState(false);

    const [seenParts, setSeenParts] = useState<number[]>(showSolutions ? exam.parts.map((_, index) => index) : [0]);
-    const [lastSolution, setLastSolution] = useState<UserSolution | undefined>(undefined);

    const [questionModalKwargs, setQuestionModalKwargs] = useState<{
        type?: "module" | "blankQuestions" | "submit"; unanswered?: boolean | undefined; onClose: (next?: boolean) => void | undefined;
@@ -46,72 +66,70 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =
        onClose: function (x: boolean | undefined) { if (x) { setShowQuestionsModal(false); nextExercise(); } else { setShowQuestionsModal(false) } }
    });

-    const { setBgColor } = useExamStore((state) => state);
-    const { userSolutions, setUserSolutions } = useExamStore((state) => state);
-    const { hasExamEnded, setHasExamEnded } = useExamStore((state) => state);
-    const { partIndex, setPartIndex } = useExamStore((state) => state);
-    const { exerciseIndex, setExerciseIndex } = useExamStore((state) => state);
-    const [storeQuestionIndex, setStoreQuestionIndex] = useExamStore((state) => [state.questionIndex, state.setQuestionIndex]);
-    const [shuffles, setShuffles] = useExamStore((state) => [state.shuffles, state.setShuffles])
-    const [currentExercise, setCurrentExercise] = useState<Exercise>();
+
+
+    const [currentExercise, setCurrentExercise] = useState<Exercise>(exam.parts[0].exercises[0]);
    const [showPartDivider, setShowPartDivider] = useState<boolean>(typeof exam.parts[0].intro === "string" && !showSolutions);

    const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));

    const [contextWord, setContextWord] = useState<string | undefined>(undefined);
    const [contextWordLine, setContextWordLine] = useState<number | undefined>(undefined);
-    const [currentSolution, setCurrentSolution] = useExamStore((state) => [state.currentSolution, state.setCurrentSolution])

    const [showSolutionsSave, setShowSolutionsSave] = useState(showSolutions ? userSolutions.filter((x) => x.module === "level") : undefined)

    useEffect(() => {
        if (typeof currentSolution !== "undefined") {
            setUserSolutions([...userSolutions.filter((x) => x.exercise !== currentSolution.exercise), { ...currentSolution, module: "level" as Module, exam: exam.id, shuffleMaps: exam.shuffle ? [...shuffles.find((x) => x.exerciseID == currentExercise?.id)?.shuffles!] : [] }]);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentSolution, exam.id, exam.shuffle, shuffles, currentExercise])
+
+    useEffect(() => {
+        if (typeof currentSolution !== "undefined") {
            setCurrentSolution(undefined);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [currentSolution])
+    }, [currentSolution]);

-    useEffect(()=> {
+    useEffect(() => {
        if (showSolutions) {
            const solutionShuffles = userSolutions.map(solution => ({
                exerciseID: solution.exercise,
                shuffles: solution.shuffleMaps || []
-              }));
+            }));
            setShuffles(solutionShuffles);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
-    },[]);
+    }, []);

-    useEffect(() => {
-        if (hasExamEnded && exerciseIndex === -1) {
-            setExerciseIndex(exerciseIndex + 1);
-        }
-    }, [hasExamEnded, exerciseIndex, setExerciseIndex]);
-
-    const getExercise = () => {;
+    const getExercise = () => {
        let exercise = exam.parts[partIndex]?.exercises[exerciseIndex];
-        if (!exercise) return undefined;
        exercise = {
            ...exercise,
            userSolutions: userSolutions.find((x) => x.exercise === exercise.id)?.solutions || [],
        };
-
        exercise = shuffleExamExercise(exam.shuffle, exercise, showSolutions, userSolutions, shuffles, setShuffles);
-        
+
        return exercise;
    };

    useEffect(() => {
        setCurrentExercise(getExercise());
        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [partIndex, exerciseIndex, exam.parts[partIndex].context]);
+    }, [partIndex, exerciseIndex, questionIndex]);


    useEffect(() => {
        const regex = /.*?['"](.*?)['"] in line (\d+)\?$/;
-        if (exerciseIndex !== -1 && currentExercise && currentExercise.type === "multipleChoice" && currentExercise.questions[storeQuestionIndex].prompt) {
-            const match = currentExercise.questions[storeQuestionIndex].prompt.match(regex);
+        if (
+            exerciseIndex !== -1 && currentExercise &&
+            currentExercise.type === "multipleChoice" &&
+            currentExercise.questions[questionIndex] &&
+            currentExercise.questions[questionIndex].prompt &&
+            exam.parts[partIndex].context
+        ) {
+            const match = currentExercise.questions[questionIndex].prompt.match(regex);
            if (match) {
                const word = match[1];
                const originalLineNumber = match[2];
@@ -120,18 +138,18 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =
                    setContextWord(word);
                }

-                const updatedPrompt = currentExercise.questions[storeQuestionIndex].prompt.replace(
+                const updatedPrompt = currentExercise.questions[questionIndex].prompt.replace(
                    `in line ${originalLineNumber}`,
                    `in line ${contextWordLine || originalLineNumber}`
                );

-                currentExercise.questions[storeQuestionIndex].prompt = updatedPrompt;
+                currentExercise.questions[questionIndex].prompt = updatedPrompt;
            } else {
                setContextWord(undefined);
            }
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [currentExercise, storeQuestionIndex]);
+    }, [currentExercise, questionIndex]);

    const nextExercise = (solution?: UserSolution) => {
        scrollToTop();
@@ -142,28 +160,30 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =
        }

        if (partIndex + 1 === exam.parts.length && !hasExamEnded && !showQuestionsModal && !showSolutions && !continueAnyways) {
-            setLastSolution(solution);
            modalKwargs();
            setShowQuestionsModal(true);
            return;
        }

        if (partIndex + 1 < exam.parts.length && !hasExamEnded) {
-            if (!answeredEveryQuestion(partIndex) && !continueAnyways && !showSolutions) {
+            if (!answeredEveryQuestion(partIndex) && !continueAnyways && !showSolutions && !seenParts.includes(partIndex + 1)) {
                modalKwargs();
                setShowQuestionsModal(true);
                return;
            }

-            if (!showSolutions && exam.parts[0].intro) {
+            if (!showSolutions && exam.parts[0].intro && !seenParts.includes(partIndex + 1)) {
                setShowPartDivider(true);
                setBgColor(levelBgColor);
            }
            setSeenParts((prev) => [...prev, partIndex + 1])
+            if (partIndex < exam.parts.length - 1 && exam.parts[partIndex + 1].context) {
+                setTextRender(true);
+            }
            setPartIndex(partIndex + 1);
-            setExerciseIndex(!!exam.parts[partIndex + 1].context ? -1 : 0);
-            setStoreQuestionIndex(0);
-            setMultipleChoicesDone((prev) => [...prev.filter((x) => x.id !== currentExercise!.id), { id: currentExercise!.id, amount: currentExercise?.type == "fillBlanks" ? currentExercise.words.length - 1 : storeQuestionIndex }]);
+            setExerciseIndex(0);
+            setQuestionIndex(0);
+            setMultipleChoicesDone((prev) => [...prev.filter((x) => x.id !== currentExercise!.id), { id: currentExercise!.id, amount: currentExercise?.type == "fillBlanks" ? currentExercise.words.length - 1 : questionIndex }]);
            return;
        }

@@ -177,8 +197,24 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =

    const previousExercise = (solution?: UserSolution) => {
        scrollToTop();
-        if (solution) {
-            setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), { ...solution, module: "level" as Module, exam: exam.id, shuffleMaps: exam.shuffle ? [...shuffles.find((x) => x.exerciseID == currentExercise?.id)?.shuffles!] : [] }]);
+
+        if (exam.parts[partIndex].context && questionIndex === 0 && !textRender) {
+            setTextRender(true);
+            return;
+        }
+
+        if (questionIndex == 0) {
+            setPartIndex(partIndex - 1);
+            const lastExerciseIndex = exam.parts[partIndex - 1].exercises.length - 1;
+            const lastExercise = exam.parts[partIndex - 1].exercises[lastExerciseIndex];
+            setExerciseIndex(lastExerciseIndex);
+
+            if (lastExercise.type === "multipleChoice") {
+                setQuestionIndex(lastExercise.questions.length - 1)
+            } else {
+                setQuestionIndex(0)
+            }
+            return;
        }

        setExerciseIndex(exerciseIndex - 1);
@@ -187,7 +223,7 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =
            const lastPartExerciseIndex = exam.parts[partIndex - 1].exercises.length - 1;
            const previousExercise = exam.parts[partIndex - 1].exercises[lastPartExerciseIndex];
            if (previousExercise.type === "multipleChoice") {
-                setStoreQuestionIndex(previousExercise.questions.length - 1)
+                setQuestionIndex(previousExercise.questions.length - 1)
            }
            const multipleChoiceQuestionsDone = [];
            for (let i = 0; i < exam.parts.length; i++) {
@@ -207,13 +243,6 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =

    };

-    useEffect(() => {
-        if (exerciseIndex === -1) {
-            nextExercise()
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [exerciseIndex])
-
    const calculateExerciseIndex = () => {
        if (exam.parts[0].intro) {
            return exam.parts.reduce((acc, curr, index) => {
@@ -221,11 +250,11 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =
                    return acc + countExercises(curr.exercises)
                }
                return acc;
-            }, 0) + (storeQuestionIndex + 1);
+            }, 0) + (questionIndex + 1);
        } else {
            if (partIndex === 0) {
                return (
-                    (exerciseIndex === -1 ? 0 : exerciseIndex + 1) + storeQuestionIndex //+ multipleChoicesDone.reduce((acc, curr) => acc + curr.amount, 0)
+                    (exerciseIndex === -1 ? 0 : exerciseIndex + 1) + questionIndex //+ multipleChoicesDone.reduce((acc, curr) => acc + curr.amount, 0)
                );
            }
            const exercisesPerPart = exam.parts.map((x) => x.exercises.length);
@@ -233,28 +262,56 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =
            return (
                exercisesDone +
                (exerciseIndex === -1 ? 0 : exerciseIndex + 1) +
-                storeQuestionIndex
+                questionIndex
                + multipleChoicesDone.reduce((acc, curr) => { return acc + curr.amount }, 0)
            );
        }
    };

    const renderText = () => (
-        <div className={clsx("flex flex-col gap-6 w-full bg-mti-gray-seasalt rounded-xl mt-4 relative py-8 px-16")}>
-            <>
-                <div className="flex flex-col w-full gap-2">
-                    <h4 className="text-xl font-semibold">
-                        Please read the following excerpt attentively, you will then be asked questions about the text you&apos;ve read.
-                    </h4>
-                    <span className="text-base">You will be allowed to read the text while doing the exercises</span>
+        <>
+            <div className={clsx("flex flex-col gap-6 w-full bg-mti-gray-seasalt rounded-xl mt-4 relative py-8 px-16")}>
+                <>
+                    <div className="flex flex-col w-full gap-2">
+                        {textRender ? (
+                            <>
+                                <h4 className="text-xl font-semibold">
+                                    Please read the following excerpt attentively, you will then be asked questions about the text you&apos;ve read.
+                                </h4>
+                                <span className="text-base">You will be allowed to read the text while doing the exercises</span>
+                            </>
+                        ) : (
+                            <h4 className="text-xl font-semibold">
+                                Answer the questions on the right based on what you&apos;ve read.
+                            </h4>
+                        )}
+                        <div className="border border-mti-gray-dim w-full rounded-full opacity-10" />
+                        {exam.parts[partIndex].context &&
+                            <TextComponent
+                                part={exam.parts[partIndex]}
+                                contextWord={contextWord}
+                                setContextWordLine={setContextWordLine}
+                            />}
+                    </div>
+                </>
+            </div>
+            {textRender && (
+                <div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+                    <Button
+                        color="purple"
+                        variant="outline"
+                        className="max-w-[200px] w-full"
+                        onClick={() => { setTextRender(false); previousExercise(); }}
+                    >
+                        Back
+                    </Button>
+
+                    <Button color="purple" onClick={() => setTextRender(false)} className="max-w-[200px] self-end w-full">
+                        Next
+                    </Button>
                </div>
-                <TextComponent
-                    part={exam.parts[partIndex]}
-                    contextWord={contextWord}
-                    setContextWordLine={setContextWordLine}
-                />
-            </>
-        </div>
+            )}
+        </>
    );

    const partLabel = () => {
@@ -286,8 +343,8 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =

    useEffect(() => {
        if (continueAnyways) {
-            nextExercise(lastSolution);
            setContinueAnyways(false);
+            nextExercise();
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [continueAnyways]);
@@ -314,7 +371,7 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =
        showSolutions: showSolutions,
        "setExerciseIndex": setExerciseIndex,
        "setPartIndex": setPartIndex,
-        "runOnClick": setStoreQuestionIndex
+        "runOnClick": setQuestionIndex
    }


@@ -323,7 +380,7 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =
            <div className={clsx("flex flex-col h-full w-full gap-8 items-center", showPartDivider && "justify-center")}>
                <QuestionsModal isOpen={showQuestionsModal} {...questionModalKwargs} />
                {
-                    !(partIndex === 0 && storeQuestionIndex === 0 && showPartDivider) &&
+                    !(partIndex === 0 && questionIndex === 0 && showPartDivider) &&
                    <Timer minTimer={exam.minTimer} disableTimer={showSolutions} standalone={true} />
                }
                {exam.parts[0].intro && showPartDivider ? <PartDivider part={exam.parts[partIndex]} partIndex={partIndex} onNext={() => { setShowPartDivider(false); setBgColor("bg-white") }} /> : (
@@ -338,7 +395,7 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =
                                                    e.preventDefault();
                                                } else {
                                                    setExerciseIndex(0);
-                                                    setStoreQuestionIndex(0);
+                                                    setQuestionIndex(0);
                                                }
                                            }}
                                                className={({ selected }) =>
@@ -370,24 +427,20 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =
                        <div
                            className={clsx(
                                "mb-20 w-full",
-                                partIndex > -1 && exerciseIndex > -1 && !!exam.parts[partIndex].context && "grid grid-cols-2 gap-4",
+                                !!exam.parts[partIndex].context && !textRender && "grid grid-cols-2 gap-4",
                            )}>
-                            {partIndex > -1 && !!exam.parts[partIndex].context && renderText()}

-                            {exerciseIndex > -1 &&
-                                partIndex > -1 &&
-                                exerciseIndex < exam.parts[partIndex].exercises.length &&
-                                !showSolutions &&
-                                !editing &&
-                                currentExercise &&
-                                renderExercise(currentExercise, exam.id, nextExercise, previousExercise)}
-
-                            {exerciseIndex > -1 &&
-                                partIndex > -1 &&
-                                exerciseIndex < exam.parts[partIndex].exercises.length &&
-                                (showSolutions || editing) &&
-                                currentExercise &&
-                                renderSolution(currentExercise, nextExercise, previousExercise)}
+                            {textRender ?
+                                renderText() :
+                                <>
+                                    {exam.parts[partIndex].context && renderText()}
+                                    {(showSolutions || editing) ?
+                                        renderSolution(currentExercise, nextExercise, previousExercise)
+                                        :
+                                        renderExercise(currentExercise, exam.id, nextExercise, previousExercise)
+                                    }
+                                </>
+                            }
                        </div>
                        {/*exerciseIndex === -1 && partIndex > 0 && (
                            <div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
@@ -400,8 +453,8 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =
                                    }}
                                    className="max-w-[200px] w-full"
                                    disabled={
-                                        exam && typeof partIndex !== "undefined" && exam.module === "level" && 
-                                        typeof exam.parts[0].intro === "string" && storeQuestionIndex === 0}    
+                                        exam && typeof partIndex !== "undefined" && exam.module === "level" &&
+                                        typeof exam.parts[0].intro === "string" && questionIndex === 0}
                                >
                                    Back
                                </Button>