Found the bug
This commit is contained in:
Carlos Mesquita
@@ -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'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'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'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>
|
||||
|
||||
Reference in New Issue
Block a user