diff --git a/src/components/Exercises/FillBlanks/index.tsx b/src/components/Exercises/FillBlanks/index.tsx index 7dc4ea65..927a1bbf 100644 --- a/src/components/Exercises/FillBlanks/index.tsx +++ b/src/components/Exercises/FillBlanks/index.tsx @@ -20,8 +20,9 @@ const FillBlanks: React.FC = ({ preview, onNext, onBack, + disableProgressButtons = false }) => { - + const examState = useExamStore((state) => state); const persistentExamState = usePersistentExamStore((state) => state); @@ -38,7 +39,7 @@ const FillBlanks: React.FC = ({ const [answers, setAnswers] = useState<{ id: string; solution: string }[]>(userSolutions); const shuffleMaps = shuffles.find((x) => x.exerciseID == id)?.shuffles; const dropdownRef = useRef(null); - + const excludeWordMCType = (x: any) => { return typeof x === "string" ? x : (x as { letter: string; word: string }); }; @@ -55,16 +56,16 @@ const FillBlanks: React.FC = ({ useEffect(() => { const handleClickOutside = (event: MouseEvent) => { - if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { - setOpenDropdownId(null); - } + if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { + setOpenDropdownId(null); + } }; - + document.addEventListener('mousedown', handleClickOutside); return () => { - document.removeEventListener('mousedown', handleClickOutside); + document.removeEventListener('mousedown', handleClickOutside); }; - }, []); + }, []); const calculateScore = () => { const total = text.match(/({{\d+}})/g)?.length || 0; @@ -105,18 +106,18 @@ const FillBlanks: React.FC = ({ const id = match.replaceAll(/[\{\}]/g, ""); const userSolution = answers.find((x) => x.id === id); const styles = clsx( - "rounded-full hover:text-white transition duration-300 ease-in-out my-1 px-5 py-2 text-center w-fit inline-block", + "rounded-full hover:text-white transition duration-300 ease-in-out my-1 px-5 py-2 text-center w-fit inline-block", !userSolution && "text-center text-mti-purple-light bg-mti-purple-ultralight", userSolution && "text-center text-mti-purple-dark bg-mti-purple-ultralight", ); - + const currentSelection = words.find((x) => { if (typeof x !== "string" && "id" in x) { return (x as FillBlanksMCOption).id.toString() == id.toString(); } return false; }) as FillBlanksMCOption; - + return variant === "mc" ? ( = ({ className="inline-block py-2 px-1 align-middle" width={220} isOpen={openDropdownId === id} - onToggle={()=> setOpenDropdownId(prevId => prevId === id ? null : id)} + onToggle={() => setOpenDropdownId(prevId => prevId === id ? null : id)} /> ) : ( = ({ }, [variant, words, answers, openDropdownId], ); - + const memoizedLines = useMemo(() => { return text.split("\\n").map((line, index) => (

@@ -163,29 +164,33 @@ const FillBlanks: React.FC = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [answers]); + const progressButtons = () => ( +

+ + + +
+ ) + return (
-
- + {!disableProgressButtons && progressButtons()} - -
- -
+
{variant !== "mc" && ( {prompt.split("\\n").map((line, index) => ( @@ -224,25 +229,8 @@ const FillBlanks: React.FC = ({
)}
-
- - -
+ {!disableProgressButtons && progressButtons()}
); }; diff --git a/src/components/Exercises/MatchSentences.tsx b/src/components/Exercises/MatchSentences.tsx index 755f0292..1235de66 100644 --- a/src/components/Exercises/MatchSentences.tsx +++ b/src/components/Exercises/MatchSentences.tsx @@ -1,18 +1,18 @@ -import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles"; -import {MatchSentenceExerciseOption, MatchSentenceExerciseSentence, MatchSentencesExercise} from "@/interfaces/exam"; -import {mdiArrowLeft, mdiArrowRight} from "@mdi/js"; +import { errorButtonStyle, infoButtonStyle } from "@/constants/buttonStyles"; +import { MatchSentenceExerciseOption, MatchSentenceExerciseSentence, MatchSentencesExercise } from "@/interfaces/exam"; +import { mdiArrowLeft, mdiArrowRight } from "@mdi/js"; import Icon from "@mdi/react"; import clsx from "clsx"; -import {Fragment, useEffect, useState} from "react"; +import { Fragment, useEffect, useState } from "react"; import LineTo from "react-lineto"; -import {CommonProps} from "."; +import { CommonProps } from "."; import Button from "../Low/Button"; import Xarrow from "react-xarrows"; import useExamStore from "@/stores/examStore"; -import {DndContext, DragEndEvent, useDraggable, useDroppable} from "@dnd-kit/core"; +import { DndContext, DragEndEvent, useDraggable, useDroppable } from "@dnd-kit/core"; -function DroppableQuestionArea({question, answer}: {question: MatchSentenceExerciseSentence; answer?: string}) { - const {isOver, setNodeRef} = useDroppable({id: `droppable_sentence_${question.id}`}); +function DroppableQuestionArea({ question, answer }: { question: MatchSentenceExerciseSentence; answer?: string }) { + const { isOver, setNodeRef } = useDroppable({ id: `droppable_sentence_${question.id}` }); return (
@@ -35,16 +35,16 @@ function DroppableQuestionArea({question, answer}: {question: MatchSentenceExerc ); } -function DraggableOptionArea({option}: {option: MatchSentenceExerciseOption}) { - const {attributes, listeners, setNodeRef, transform} = useDraggable({ +function DraggableOptionArea({ option }: { option: MatchSentenceExerciseOption }) { + const { attributes, listeners, setNodeRef, transform } = useDraggable({ id: `draggable_option_${option.id}`, }); const style = transform ? { - transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`, - zIndex: 99, - } + transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`, + zIndex: 99, + } : undefined; return ( @@ -63,15 +63,25 @@ function DraggableOptionArea({option}: {option: MatchSentenceExerciseOption}) { ); } -export default function MatchSentences({id, options, type, prompt, sentences, userSolutions, onNext, onBack}: MatchSentencesExercise & CommonProps) { - const [answers, setAnswers] = useState<{question: string; option: string}[]>(userSolutions); +export default function MatchSentences({ + id, + options, + type, + prompt, + sentences, + userSolutions, + onNext, + onBack, + disableProgressButtons = false +}: MatchSentencesExercise & CommonProps) { + const [answers, setAnswers] = useState<{ question: string; option: string }[]>(userSolutions); const hasExamEnded = useExamStore((state) => state.hasExamEnded); const setCurrentSolution = useExamStore((state) => state.setCurrentSolution); useEffect(() => { - setCurrentSolution({exercise: id, solutions: answers, score: calculateScore(), type}); + setCurrentSolution({ exercise: id, solutions: answers, score: calculateScore(), type }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [answers, setAnswers]); @@ -80,7 +90,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, us const optionID = event.active.id.toString().replace("draggable_option_", ""); const sentenceID = event.over.id.toString().replace("droppable_sentence_", ""); - setAnswers((prev) => [...prev.filter((x) => x.question.toString() !== sentenceID), {question: sentenceID, option: optionID}]); + setAnswers((prev) => [...prev.filter((x) => x.question.toString() !== sentenceID), { question: sentenceID, option: optionID }]); } }; @@ -91,34 +101,43 @@ export default function MatchSentences({id, options, type, prompt, sentences, us ).length; const missing = total - answers.filter((x) => sentences.find((y) => y.id.toString() === x.question.toString())).length; - return {total, correct, missing}; + return { total, correct, missing }; }; useEffect(() => { - if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type}); + if (disableProgressButtons) onNext({ exercise: id, solutions: answers, score: calculateScore(), type }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [answers, disableProgressButtons]) + + useEffect(() => { + if (hasExamEnded) onNext({ exercise: id, solutions: answers, score: calculateScore(), type }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [hasExamEnded]); + const progressButtons = () => ( +
+ + + +
+ ) + return (
-
- + {!disableProgressButtons && progressButtons()} - -
- -
+
{prompt.split("\\n").map((line, index) => ( @@ -151,22 +170,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
-
- - - -
+ {!disableProgressButtons && progressButtons()}
); } diff --git a/src/components/Exercises/MultipleChoice.tsx b/src/components/Exercises/MultipleChoice.tsx index 1f7bf6e0..849cf74c 100644 --- a/src/components/Exercises/MultipleChoice.tsx +++ b/src/components/Exercises/MultipleChoice.tsx @@ -1,12 +1,12 @@ /* eslint-disable @next/next/no-img-element */ -import {MultipleChoiceExercise, MultipleChoiceQuestion, ShuffleMap} from "@/interfaces/exam"; +import { MultipleChoiceExercise, MultipleChoiceQuestion, ShuffleMap } from "@/interfaces/exam"; import useExamStore from "@/stores/examStore"; import clsx from "clsx"; -import {useEffect, useState} from "react"; +import { useEffect, useState } from "react"; import reactStringReplace from "react-string-replace"; -import {CommonProps} from "."; +import { CommonProps } from "."; import Button from "../Low/Button"; -import {v4} from "uuid"; +import { v4 } from "uuid"; function Question({ id, @@ -72,10 +72,19 @@ function Question({ ); } -export default function MultipleChoice({id, prompt, type, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) { - const [answers, setAnswers] = useState<{question: string; option: string}[]>(userSolutions); +export default function MultipleChoice({ + id, + prompt, + type, + questions, + userSolutions, + onNext, + onBack, + disableProgressButtons = false +}: MultipleChoiceExercise & CommonProps) { + const [answers, setAnswers] = useState<{ question: string; option: string }[]>(userSolutions || []); - const {questionIndex, exerciseIndex, exam, shuffles, hasExamEnded, partIndex, setQuestionIndex, setCurrentSolution} = useExamStore( + const { questionIndex, exerciseIndex, exam, shuffles, hasExamEnded, partIndex, setQuestionIndex, setCurrentSolution } = useExamStore( (state) => state, ); @@ -84,16 +93,16 @@ export default function MultipleChoice({id, prompt, type, questions, userSolutio const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0)); useEffect(() => { - if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type}); + if (hasExamEnded) onNext({ exercise: id, solutions: answers, score: calculateScore(), type }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [hasExamEnded]); const onSelectOption = (option: string, question: MultipleChoiceQuestion) => { - setAnswers((prev) => [...prev.filter((x) => x.question !== question.id), {option, question: question.id}]); + setAnswers((prev) => [...prev.filter((x) => x.question !== question.id), { option, question: question.id }]); }; useEffect(() => { - setCurrentSolution({exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps}); + setCurrentSolution({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [answers, setAnswers]); @@ -127,12 +136,17 @@ export default function MultipleChoice({id, prompt, type, questions, userSolutio return isSolutionCorrect || false; }).length; const missing = total - answers!.filter((x) => questions.find((y) => x.question.toString() === y.id.toString())).length; - return {total, correct, missing}; + return { total, correct, missing }; }; + useEffect(() => { + if (disableProgressButtons) onNext({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [answers, disableProgressButtons]) + const next = () => { if (questionIndex + 1 >= questions.length - 1) { - onNext({exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps}); + onNext({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps }); } else { setQuestionIndex(questionIndex + 2); } @@ -141,7 +155,7 @@ export default function MultipleChoice({id, prompt, type, questions, userSolutio const back = () => { if (questionIndex === 0) { - onBack({exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps}); + onBack({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps }); } else { if (exam?.module === "level" && typeof exam.parts[0].intro !== "undefined" && questionIndex === 0) return; setQuestionIndex(questionIndex - 2); @@ -150,72 +164,74 @@ export default function MultipleChoice({id, prompt, type, questions, userSolutio scrollToTop(); }; - return ( -
-
- + const progressButtons = () => ( +
+ - + ? "Submit" + : "Next"} + +
+ ) + + const renderAllQuestions = () => + questions.map(question => ( +
+ question.id === x.question)?.option} + onSelectOption={(option) => onSelectOption(option, question)} + />
+ )) -
-
- {/*{"Select the appropriate option."}*/} - {questionIndex < questions.length && ( - questions[questionIndex].id === x.question)?.option} - onSelectOption={(option) => onSelectOption(option, questions[questionIndex])} - /> - )} -
- - {questionIndex + 1 < questions.length && ( -
- questions[questionIndex + 1].id === x.question)?.option} - onSelectOption={(option) => onSelectOption(option, questions[questionIndex + 1])} - /> -
+ const renderTwoQuestions = () => ( + <> +
+ {questionIndex < questions.length && ( + questions[questionIndex].id === x.question)?.option} + onSelectOption={(option) => onSelectOption(option, questions[questionIndex])} + /> )}
-
- + {questionIndex + 1 < questions.length && ( +
+ questions[questionIndex + 1].id === x.question)?.option} + onSelectOption={(option) => onSelectOption(option, questions[questionIndex + 1])} + /> +
+ )} + + ) - + return ( +
+ {!disableProgressButtons && progressButtons()} + +
+ {disableProgressButtons ? renderAllQuestions() : renderTwoQuestions()}
+ + {!disableProgressButtons && progressButtons()}
); } diff --git a/src/components/Exercises/TrueFalse.tsx b/src/components/Exercises/TrueFalse.tsx index 44e11070..21ad6314 100644 --- a/src/components/Exercises/TrueFalse.tsx +++ b/src/components/Exercises/TrueFalse.tsx @@ -1,17 +1,27 @@ -import {TrueFalseExercise} from "@/interfaces/exam"; +import { TrueFalseExercise } from "@/interfaces/exam"; import useExamStore from "@/stores/examStore"; -import {Fragment, useEffect, useState} from "react"; -import {CommonProps} from "."; +import clsx from "clsx"; +import { Fragment, useEffect, useState } from "react"; +import { CommonProps } from "."; import Button from "../Low/Button"; -export default function TrueFalse({id, type, prompt, questions, userSolutions, onNext, onBack}: TrueFalseExercise & CommonProps) { - const [answers, setAnswers] = useState<{id: string; solution: "true" | "false" | "not_given"}[]>(userSolutions); +export default function TrueFalse({ + id, + type, + prompt, + questions, + userSolutions, + onNext, + onBack, + disableProgressButtons = false +}: TrueFalseExercise & CommonProps) { + const [answers, setAnswers] = useState<{ id: string; solution: "true" | "false" | "not_given" }[]>(userSolutions); const hasExamEnded = useExamStore((state) => state.hasExamEnded); const setCurrentSolution = useExamStore((state) => state.setCurrentSolution); useEffect(() => { - if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type}); + if (hasExamEnded) onNext({ exercise: id, solutions: answers, score: calculateScore(), type }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [hasExamEnded]); @@ -26,11 +36,11 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o ).length; const missing = total - answers.filter((x) => questions.find((y) => x.id.toString() === y.id.toString())).length; - return {total, correct, missing}; + return { total, correct, missing }; }; useEffect(() => { - setCurrentSolution({exercise: id, solutions: answers, score: calculateScore(), type}); + setCurrentSolution({ exercise: id, solutions: answers, score: calculateScore(), type }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [answers, setAnswers]); @@ -41,29 +51,38 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o return; } - setAnswers((prev) => [...prev.filter((x) => x.id !== questionId), {id: questionId, solution}]); + setAnswers((prev) => [...prev.filter((x) => x.id !== questionId), { id: questionId, solution }]); }; + useEffect(() => { + if (disableProgressButtons) onNext({ exercise: id, solutions: answers, score: calculateScore(), type }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [answers, disableProgressButtons]) + + const progressButtons = () => ( +
+ + + +
+ ) + return (
-
- + {!disableProgressButtons && progressButtons()} - -
- -
+
{prompt.split("\\n").map((line, index) => ( @@ -123,22 +142,7 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
-
- - - -
+ {!disableProgressButtons && progressButtons()}
); } diff --git a/src/components/Exercises/WriteBlanks.tsx b/src/components/Exercises/WriteBlanks.tsx index 5e308fc4..a91b2455 100644 --- a/src/components/Exercises/WriteBlanks.tsx +++ b/src/components/Exercises/WriteBlanks.tsx @@ -1,12 +1,12 @@ -import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles"; -import {WriteBlanksExercise} from "@/interfaces/exam"; -import {mdiArrowLeft, mdiArrowRight} from "@mdi/js"; +import { errorButtonStyle, infoButtonStyle } from "@/constants/buttonStyles"; +import { WriteBlanksExercise } from "@/interfaces/exam"; +import { mdiArrowLeft, mdiArrowRight } from "@mdi/js"; import Icon from "@mdi/react"; import clsx from "clsx"; -import {Fragment, useEffect, useState} from "react"; +import { Fragment, useEffect, useState } from "react"; import reactStringReplace from "react-string-replace"; -import {CommonProps} from "."; -import {toast} from "react-toastify"; +import { CommonProps } from "."; +import { toast } from "react-toastify"; import Button from "../Low/Button"; import useExamStore from "@/stores/examStore"; @@ -29,7 +29,7 @@ function Blank({ useEffect(() => { const words = userInput.split(" "); if (words.length > maxWords) { - toast.warning(`You have reached your word limit of ${maxWords} words!`, {toastId: "word-limit"}); + toast.warning(`You have reached your word limit of ${maxWords} words!`, { toastId: "word-limit" }); setUserInput(words.join(" ").trim()); } }, [maxWords, userInput]); @@ -46,13 +46,24 @@ function Blank({ ); } -export default function WriteBlanks({id, prompt, type, maxWords, solutions, userSolutions, text, onNext, onBack}: WriteBlanksExercise & CommonProps) { - const [answers, setAnswers] = useState<{id: string; solution: string}[]>(userSolutions); +export default function WriteBlanks({ + id, + prompt, + type, + maxWords, + solutions, + userSolutions, + text, + onNext, + onBack, + disableProgressButtons = false +}: WriteBlanksExercise & CommonProps) { + const [answers, setAnswers] = useState<{ id: string; solution: string }[]>(userSolutions); - const {hasExamEnded, setCurrentSolution} = useExamStore((state) => state); + const { hasExamEnded, setCurrentSolution } = useExamStore((state) => state); useEffect(() => { - if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type}); + if (hasExamEnded) onNext({ exercise: id, solutions: answers, score: calculateScore(), type }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [hasExamEnded]); @@ -67,14 +78,19 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user ).length; const missing = total - answers.filter((x) => solutions.find((y) => x.id === y.id)).length; - return {total, correct, missing}; + return { total, correct, missing }; }; useEffect(() => { - setCurrentSolution({exercise: id, solutions: answers, score: calculateScore(), type}); + setCurrentSolution({ exercise: id, solutions: answers, score: calculateScore(), type }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [answers, setAnswers]); + useEffect(() => { + if (disableProgressButtons) onNext({ exercise: id, solutions: answers, score: calculateScore(), type }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [answers, disableProgressButtons]) + const renderLines = (line: string) => { return ( @@ -82,7 +98,7 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user const id = match.replaceAll(/[\{\}]/g, ""); const userSolution = answers.find((x) => x.id === id); const setUserSolution = (solution: string) => { - setAnswers((prev) => [...prev.filter((x) => x.id !== id), {id, solution}]); + setAnswers((prev) => [...prev.filter((x) => x.id !== id), { id, solution }]); }; return ; @@ -91,26 +107,30 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user ); }; + const progressButtons = () => ( +
+ + + +
+ ) + return (
-
- + {!disableProgressButtons && progressButtons()} - -
- -
+
{prompt.split("\\n").map((line, index) => ( @@ -129,22 +149,7 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
-
- - - -
+ {!disableProgressButtons && progressButtons()}
); } diff --git a/src/components/Exercises/index.tsx b/src/components/Exercises/index.tsx index 8d407983..1587d6f8 100644 --- a/src/components/Exercises/index.tsx +++ b/src/components/Exercises/index.tsx @@ -19,13 +19,14 @@ import Speaking from "./Speaking"; import TrueFalse from "./TrueFalse"; import InteractiveSpeaking from "./InteractiveSpeaking"; -const MatchSentences = dynamic(() => import("@/components/Exercises/MatchSentences"), {ssr: false}); +const MatchSentences = dynamic(() => import("@/components/Exercises/MatchSentences"), { ssr: false }); export interface CommonProps { examID?: string; onNext: (userSolutions: UserSolution) => void; onBack: (userSolutions: UserSolution) => void; enableNavigation?: boolean; + disableProgressButtons?: boolean preview?: boolean; } @@ -35,21 +36,22 @@ export const renderExercise = ( onNext: (userSolutions: UserSolution) => void, onBack: (userSolutions: UserSolution) => void, enableNavigation?: boolean, + disableProgressButtons?: boolean, preview?: boolean, ) => { switch (exercise.type) { case "fillBlanks": - return ; + return ; case "trueFalse": - return ; + return ; case "matchSentences": - return ; + return ; case "multipleChoice": - return ; + return ; case "writeBlanks": - return ; + return ; case "writing": - return ; + return ; case "speaking": return ; case "interactiveSpeaking": diff --git a/src/components/High/AssignmentCard.tsx b/src/components/High/AssignmentCard.tsx index 49812254..e53bb846 100644 --- a/src/components/High/AssignmentCard.tsx +++ b/src/components/High/AssignmentCard.tsx @@ -6,6 +6,7 @@ import { sortByModuleName } from "@/utils/moduleUtils"; import clsx from "clsx"; import moment from "moment"; import { useRouter } from "next/router"; +import { useMemo } from "react"; import Button from "../Low/Button"; import ModuleBadge from "../ModuleBadge"; @@ -20,6 +21,8 @@ interface Props { export default function AssignmentCard({ user, assignment, session, startAssignment, resumeAssignment }: Props) { const router = useRouter() + const hasBeenSubmitted = useMemo(() => assignment.results.map((r) => r.user).includes(user.id), [assignment.results, user.id]) + return (
))}
- {futureAssignmentFilter(assignment) && ( + {futureAssignmentFilter(assignment) && !hasBeenSubmitted && (
diff --git a/src/components/Solutions/FillBlanks.tsx b/src/components/Solutions/FillBlanks.tsx index baa7dc04..e39b4780 100644 --- a/src/components/Solutions/FillBlanks.tsx +++ b/src/components/Solutions/FillBlanks.tsx @@ -1,15 +1,15 @@ -import {FillBlanksExercise, FillBlanksMCOption, ShuffleMap} from "@/interfaces/exam"; +import { FillBlanksExercise, FillBlanksMCOption, ShuffleMap } from "@/interfaces/exam"; import clsx from "clsx"; import reactStringReplace from "react-string-replace"; -import {CommonProps} from "."; -import {Fragment} from "react"; +import { CommonProps } from "."; +import { Fragment } from "react"; import Button from "../Low/Button"; import useExamStore from "@/stores/examStore"; import { typeCheckWordsMC } from "@/utils/type.check"; -export default function FillBlanksSolutions({id, type, prompt, solutions, words, text, onNext, onBack}: FillBlanksExercise & CommonProps) { +export default function FillBlanksSolutions({ id, type, prompt, solutions, words, text, onNext, onBack, disableProgressButtons = false }: FillBlanksExercise & CommonProps) { const storeUserSolutions = useExamStore((state) => state.userSolutions); - const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state); + const { questionIndex, setQuestionIndex, partIndex, exam } = useExamStore((state) => state); const correctUserSolutions = storeUserSolutions.find((solution) => solution.exercise === id)?.solutions; @@ -42,7 +42,7 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, words, return false; }).length; const missing = total - correctUserSolutions!.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length; - return {total, correct, missing}; + return { total, correct, missing }; }; const renderLines = (line: string) => { @@ -81,20 +81,20 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, words, typeof w === "string" ? w.toLowerCase() === userSolution.solution.toLowerCase() : "letter" in w - ? w.letter.toLowerCase() === userSolution.solution.toLowerCase() - : "options" in w - ? w.id === userSolution.questionId - : false, + ? w.letter.toLowerCase() === userSolution.solution.toLowerCase() + : "options" in w + ? w.id === userSolution.questionId + : false, ); const userSolutionText = typeof userSolutionWord === "string" ? userSolutionWord : userSolutionWord && "letter" in userSolutionWord - ? userSolutionWord.word - : userSolutionWord && "options" in userSolutionWord - ? userSolution.solution - : userSolution.solution; + ? userSolutionWord.word + : userSolutionWord && "options" in userSolutionWord + ? userSolution.solution + : userSolution.solution; let correct; let solutionText; @@ -149,27 +149,31 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, words, ); }; + const progressButtons = () => ( +
+ + + +
+ ) + return (
-
- + {!disableProgressButtons && progressButtons()} - -
- -
+
{correctUserSolutions && text.split("\\n").map((line, index) => ( @@ -195,23 +199,7 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, words,
-
- - - -
+ {!disableProgressButtons && progressButtons()}
); } diff --git a/src/components/Solutions/MatchSentences.tsx b/src/components/Solutions/MatchSentences.tsx index 76c0f551..ec7e43b1 100644 --- a/src/components/Solutions/MatchSentences.tsx +++ b/src/components/Solutions/MatchSentences.tsx @@ -1,11 +1,11 @@ -import {MatchSentenceExerciseSentence, MatchSentencesExercise} from "@/interfaces/exam"; +import { MatchSentenceExerciseSentence, MatchSentencesExercise } from "@/interfaces/exam"; import clsx from "clsx"; import LineTo from "react-lineto"; -import {CommonProps} from "."; -import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles"; -import {mdiArrowLeft, mdiArrowRight} from "@mdi/js"; +import { CommonProps } from "."; +import { errorButtonStyle, infoButtonStyle } from "@/constants/buttonStyles"; +import { mdiArrowLeft, mdiArrowRight } from "@mdi/js"; import Icon from "@mdi/react"; -import {Fragment} from "react"; +import { Fragment } from "react"; import Button from "../Low/Button"; import Xarrow from "react-xarrows"; import useExamStore from "@/stores/examStore"; @@ -15,7 +15,7 @@ function QuestionSolutionArea({ userSolution, }: { question: MatchSentenceExerciseSentence; - userSolution?: {question: string; option: string}; + userSolution?: { question: string; option: string }; }) { return (
@@ -26,8 +26,8 @@ function QuestionSolutionArea({ !userSolution ? "bg-mti-gray-davy" : userSolution.option.toString() === question.solution.toString() - ? "bg-mti-purple" - : "bg-mti-rose", + ? "bg-mti-purple" + : "bg-mti-rose", "transition duration-300 ease-in-out", )}> {question.id} @@ -40,8 +40,8 @@ function QuestionSolutionArea({ !userSolution ? "border-mti-gray-davy" : userSolution.option.toString() === question.solution.toString() - ? "border-mti-purple" - : "border-mti-rose", + ? "border-mti-purple" + : "border-mti-rose", )}> {userSolution && userSolution?.option.toString() !== question.solution.toString() && `Paragraph ${userSolution.option}`} @@ -61,8 +61,9 @@ export default function MatchSentencesSolutions({ userSolutions, onNext, onBack, + disableProgressButtons = false }: MatchSentencesExercise & CommonProps) { - const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state); + const { questionIndex, setQuestionIndex, partIndex, exam } = useExamStore((state) => state); const calculateScore = () => { const total = sentences.length; @@ -71,30 +72,34 @@ export default function MatchSentencesSolutions({ ).length; const missing = total - userSolutions.filter((x) => sentences.find((y) => y.id.toString() === x.question.toString())).length; - return {total, correct, missing}; + return { total, correct, missing }; }; + const progressButtons = () => ( +
+ + + +
+ ) + return (
-
- + {!disableProgressButtons && progressButtons()} - -
- -
+
{prompt.split("\\n").map((line, index) => ( @@ -128,23 +133,7 @@ export default function MatchSentencesSolutions({
-
- - - -
+ {!disableProgressButtons && progressButtons()}
); } diff --git a/src/components/Solutions/MultipleChoice.tsx b/src/components/Solutions/MultipleChoice.tsx index ecec93b4..81fbed60 100644 --- a/src/components/Solutions/MultipleChoice.tsx +++ b/src/components/Solutions/MultipleChoice.tsx @@ -1,11 +1,11 @@ /* eslint-disable @next/next/no-img-element */ -import {MultipleChoiceExercise, MultipleChoiceQuestion, ShuffleMap} from "@/interfaces/exam"; +import { MultipleChoiceExercise, MultipleChoiceQuestion, ShuffleMap } from "@/interfaces/exam"; import useExamStore from "@/stores/examStore"; import clsx from "clsx"; import reactStringReplace from "react-string-replace"; -import {CommonProps} from "."; +import { CommonProps } from "."; import Button from "../Low/Button"; -import {v4} from "uuid"; +import { v4 } from "uuid"; function Question({ id, @@ -14,8 +14,8 @@ function Question({ solution, options, userSolution, -}: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) { - const {userSolutions} = useExamStore((state) => state); +}: MultipleChoiceQuestion & { userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean }) { + const { userSolutions } = useExamStore((state) => state); const questionShuffleMap = userSolutions.reduce((foundMap, userSolution) => { if (foundMap) return foundMap; @@ -89,8 +89,8 @@ function Question({ ); } -export default function MultipleChoice({id, type, prompt, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) { - const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state); +export default function MultipleChoice({ id, type, prompt, questions, userSolutions, onNext, onBack, disableProgressButtons = false }: MultipleChoiceExercise & CommonProps) { + const { questionIndex, setQuestionIndex, partIndex, exam } = useExamStore((state) => state); const stats = useExamStore((state) => state.userSolutions); @@ -107,12 +107,12 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio } }).length; const missing = total - userSolutions.filter((x) => questions.find((y) => y.id.toString() === x.question.toString())).length; - return {total, correct, missing}; + return { total, correct, missing }; }; const next = () => { if (questionIndex + 1 >= questions.length - 1) { - onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type}); + onNext({ exercise: id, solutions: userSolutions, score: calculateScore(), type }); } else { setQuestionIndex(questionIndex + 2); } @@ -120,50 +120,68 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio const back = () => { if (questionIndex === 0) { - onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type}); + onBack({ exercise: id, solutions: userSolutions, score: calculateScore(), type }); } else { setQuestionIndex(questionIndex - 2); } }; - return ( -
-
- + const progressButtons = () => ( +
+ - + +
+ ) + + const renderAllQuestions = () => + questions.map(question => ( +
+ question.id === x.question)?.option} + /> +
+ )) + + const renderTwoQuestions = () => ( + <> +
+ {questionIndex < questions.length && ( + questions[questionIndex].id === x.question)?.option} + /> + )}
-
-
-
- {/*{prompt}*/} - {userSolutions && questionIndex < questions.length && ( - questions[questionIndex].id === x.question)?.option} - /> - )} -
- - {userSolutions && questionIndex + 1 < questions.length && ( -
- questions[questionIndex + 1].id === x.question)?.option} - /> -
- )} + {questionIndex + 1 < questions.length && ( +
+ questions[questionIndex + 1].id === x.question)?.option} + />
+ )} + + ) + + return ( +
+ {!disableProgressButtons && progressButtons()} + +
+ {disableProgressButtons ? renderAllQuestions() : renderTwoQuestions()}
@@ -181,20 +199,7 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
-
- - - -
+ {!disableProgressButtons && progressButtons()}
); } diff --git a/src/components/Solutions/TrueFalse.tsx b/src/components/Solutions/TrueFalse.tsx index 31905dc6..54f3c307 100644 --- a/src/components/Solutions/TrueFalse.tsx +++ b/src/components/Solutions/TrueFalse.tsx @@ -1,15 +1,15 @@ -import {FillBlanksExercise, TrueFalseExercise} from "@/interfaces/exam"; +import { FillBlanksExercise, TrueFalseExercise } from "@/interfaces/exam"; import clsx from "clsx"; import reactStringReplace from "react-string-replace"; -import {CommonProps} from "."; -import {Fragment} from "react"; +import { CommonProps } from "."; +import { Fragment } from "react"; import Button from "../Low/Button"; import useExamStore from "@/stores/examStore"; type Solution = "true" | "false" | "not_given"; -export default function TrueFalseSolution({prompt, type, id, questions, userSolutions, onNext, onBack}: TrueFalseExercise & CommonProps) { - const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state); +export default function TrueFalseSolution({ prompt, type, id, questions, userSolutions, onNext, onBack, disableProgressButtons = false }: TrueFalseExercise & CommonProps) { + const { questionIndex, setQuestionIndex, partIndex, exam } = useExamStore((state) => state); const calculateScore = () => { const total = questions.length || 0; @@ -18,7 +18,7 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu ).length; const missing = total - userSolutions.filter((x) => questions.find((y) => x.id.toString() === y.id.toString())).length; - return {total, correct, missing}; + return { total, correct, missing }; }; const getButtonColor = (buttonSolution: Solution, solution: Solution, userSolution: Solution | undefined) => { @@ -39,27 +39,31 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu return "gray"; }; + const progressButtons = () => ( +
+ + + +
+ ) + return (
-
- + {!disableProgressButtons && progressButtons()} - -
- -
+
{prompt.split("\\n").map((line, index) => ( @@ -137,23 +141,7 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
-
- - - -
+ {!disableProgressButtons && progressButtons()}
); } diff --git a/src/components/Solutions/WriteBlanks.tsx b/src/components/Solutions/WriteBlanks.tsx index ff55f4f2..3cdc23db 100644 --- a/src/components/Solutions/WriteBlanks.tsx +++ b/src/components/Solutions/WriteBlanks.tsx @@ -1,12 +1,12 @@ -import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles"; -import {WriteBlanksExercise} from "@/interfaces/exam"; -import {mdiArrowLeft, mdiArrowRight} from "@mdi/js"; +import { errorButtonStyle, infoButtonStyle } from "@/constants/buttonStyles"; +import { WriteBlanksExercise } from "@/interfaces/exam"; +import { mdiArrowLeft, mdiArrowRight } from "@mdi/js"; import Icon from "@mdi/react"; import clsx from "clsx"; -import {Fragment, useEffect, useState} from "react"; +import { Fragment, useEffect, useState } from "react"; import reactStringReplace from "react-string-replace"; -import {CommonProps} from "."; -import {toast} from "react-toastify"; +import { CommonProps } from "."; +import { toast } from "react-toastify"; import Button from "../Low/Button"; import useExamStore from "@/stores/examStore"; @@ -71,8 +71,9 @@ export default function WriteBlanksSolutions({ text, onNext, onBack, + disableProgressButtons = false }: WriteBlanksExercise & CommonProps) { - const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state); + const { questionIndex, setQuestionIndex, partIndex, exam } = useExamStore((state) => state); const calculateScore = () => { const total = text.match(/({{\d+}})/g)?.length || 0; @@ -85,7 +86,7 @@ export default function WriteBlanksSolutions({ ).length; const missing = total - userSolutions.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length; - return {total, correct, missing}; + return { total, correct, missing }; }; const renderLines = (line: string) => { @@ -104,27 +105,31 @@ export default function WriteBlanksSolutions({ ); }; + const progressButtons = () => ( +
+ + + +
+ ) + return (
-
- + {!disableProgressButtons && progressButtons()} - -
- -
+
{prompt.split("\\n").map((line, index) => ( @@ -158,23 +163,7 @@ export default function WriteBlanksSolutions({
-
- - - -
+ {!disableProgressButtons && progressButtons()}
); } diff --git a/src/components/Solutions/index.tsx b/src/components/Solutions/index.tsx index 6e5c243d..db457290 100644 --- a/src/components/Solutions/index.tsx +++ b/src/components/Solutions/index.tsx @@ -19,25 +19,27 @@ import TrueFalseSolution from "./TrueFalse"; import WriteBlanks from "./WriteBlanks"; import Writing from "./Writing"; -const MatchSentences = dynamic(() => import("@/components/Solutions/MatchSentences"), {ssr: false}); +const MatchSentences = dynamic(() => import("@/components/Solutions/MatchSentences"), { ssr: false }); export interface CommonProps { onNext: (userSolutions: UserSolution) => void; onBack: (userSolutions: UserSolution) => void; + disableProgressButtons?: boolean, } -export const renderSolution = (exercise: Exercise, onNext: () => void, onBack: () => void, updateIndex?: (internalIndex: number) => void) => { +export const renderSolution = (exercise: Exercise, onNext: () => void, onBack: () => void, updateIndex?: (internalIndex: number) => void, + disableProgressButtons?: boolean) => { switch (exercise.type) { case "fillBlanks": - return ; + return ; case "trueFalse": - return ; + return ; case "matchSentences": - return ; + return ; case "multipleChoice": - return ; + return ; case "writeBlanks": - return ; + return ; case "writing": return ; case "speaking": diff --git a/src/exams/Finish.tsx b/src/exams/Finish.tsx index 8c3f9a3b..eb0c333b 100644 --- a/src/exams/Finish.tsx +++ b/src/exams/Finish.tsx @@ -326,11 +326,9 @@ export default function Finish({ user, scores, modules, information, solutions, )}
- - - +
)} diff --git a/src/exams/Listening.tsx b/src/exams/Listening.tsx index 3a006586..476ab0e9 100644 --- a/src/exams/Listening.tsx +++ b/src/exams/Listening.tsx @@ -1,5 +1,5 @@ -import { ListeningExam, MultipleChoiceExercise, UserSolution } from "@/interfaces/exam"; -import { useEffect, useState } from "react"; +import { ListeningExam, MultipleChoiceExercise, Script, UserSolution } from "@/interfaces/exam"; +import { Fragment, useEffect, useState } from "react"; import { renderExercise } from "@/components/Exercises"; import { renderSolution } from "@/components/Solutions"; import ModuleTitle from "@/components/Medium/ModuleTitle"; @@ -9,6 +9,9 @@ import BlankQuestionsModal from "@/components/QuestionsModal"; import useExamStore, { usePersistentExamStore } from "@/stores/examStore"; import { countExercises } from "@/utils/moduleUtils"; import PartDivider from "./Navigation/SectionDivider"; +import { Dialog, Transition } from "@headlessui/react"; +import { capitalize } from "lodash"; +import { mapBy } from "@/utils"; interface Props { exam: ListeningExam; @@ -17,17 +20,76 @@ interface Props { onFinish: (userSolutions: UserSolution[]) => void; } +function ScriptModal({ isOpen, script, onClose }: { isOpen: boolean; script: Script; onClose: () => void }) { + return ( + + + +
+ + +
+
+ + +
+

+ {typeof script === "string" && script.split("\\n").map((line, index) => ( + + {line} +
+
+ ))} + + {typeof script === "object" && script.map((line, index) => ( + + {line.name} ({capitalize(line.gender)}): {line.text} +
+
+
+ ))} +

+
+ +
+ +
+
+
+
+
+
+
+ ); +} + const INSTRUCTIONS_AUDIO_SRC = "https://firebasestorage.googleapis.com/v0/b/storied-phalanx-349916.appspot.com/o/generic_listening_intro_v2.mp3?alt=media&token=16769f5f-1e9b-4a72-86a9-45a6f0fa9f82"; export default function Listening({ exam, showSolutions = false, preview = false, onFinish }: Props) { const listeningBgColor = "bg-ielts-listening-light"; + const [showTextModal, setShowTextModal] = useState(false); const [timesListened, setTimesListened] = useState(0); const [showBlankModal, setShowBlankModal] = useState(false); const [multipleChoicesDone, setMultipleChoicesDone] = useState<{ id: string; amount: number }[]>([]); - const [seenParts, setSeenParts] = useState>(new Set(showSolutions ? exam.parts.map((_, index) => index) : [])); const [showPartDivider, setShowPartDivider] = useState(typeof exam.parts[0].intro === "string" && exam.parts[0].intro !== ""); @@ -99,74 +161,35 @@ export default function Listening({ exam, showSolutions = false, preview = false }; const nextExercise = (solution?: UserSolution) => { - scrollToTop(); - if (solution) { - setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), { ...solution, module: "listening", exam: exam.id }]); - } - if (storeQuestionIndex > 0) { - const exercise = getExercise(); - setMultipleChoicesDone((prev) => [...prev.filter((x) => x.id !== exercise.id), { id: exercise.id, amount: storeQuestionIndex }]); - } - setStoreQuestionIndex(0); + if (solution) + setUserSolutions([ + ...userSolutions.filter((x) => x.exercise !== solution.exercise), + { ...solution, module: "listening", exam: exam.id } + ]); + }; - if (exerciseIndex + 1 < exam.parts[partIndex].exercises.length && !hasExamEnded) { - setExerciseIndex(exerciseIndex + 1); - return; - } + const previousExercise = (solution?: UserSolution) => { }; + const nextPart = () => { if (partIndex + 1 < exam.parts.length && !hasExamEnded) { setPartIndex(partIndex + 1); - setTimesListened(0); - setExerciseIndex(showSolutions ? 0 : -1); + setExerciseIndex(0); return; } - if ( - solution && - ![...userSolutions.filter((x) => x.exercise !== solution?.exercise).map((x) => x.score.missing), solution?.score.missing].every( - (x) => x === 0, - ) && - !showSolutions && - !hasExamEnded - ) { - setShowBlankModal(true); - return; + if (!showSolutions && !hasExamEnded) { + const exercises = partIndex < exam.parts.length ? exam.parts[partIndex].exercises : [] + const exerciseIDs = mapBy(exercises, 'id') + + const hasMissing = userSolutions.filter(x => exerciseIDs.includes(x.exercise)).map(x => x.score.missing).some(x => x > 0) + + if (hasMissing) return setShowBlankModal(true); + } setHasExamEnded(false); - - if (solution) { - onFinish([...userSolutions.filter((x) => x.exercise !== solution.exercise), { ...solution, module: "listening", exam: exam.id }]); - } else { - onFinish(userSolutions); - } - }; - - const previousExercise = (solution?: UserSolution) => { - scrollToTop(); - if (solution) { - setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), { ...solution, module: "listening", exam: exam.id }]); - } - setStoreQuestionIndex(0); - - setExerciseIndex(exerciseIndex - 1); - }; - - const getExercise = () => { - const exercise = exam.parts[partIndex].exercises[exerciseIndex]; - return { - ...exercise, - userSolutions: userSolutions.find((x) => x.exercise === exercise.id)?.solutions || [], - }; - }; - - useEffect(() => { - if (partIndex > -1 && exerciseIndex > -1) { - const exercise = getExercise(); - setMultipleChoicesDone((prev) => prev.filter((x) => x.id !== exercise.id)); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [exerciseIndex, partIndex]); + onFinish(userSolutions); + } const calculateExerciseIndex = () => { if (partIndex === -1) return 0; @@ -185,6 +208,22 @@ export default function Listening({ exam, showSolutions = false, preview = false ); }; + const renderPartExercises = () => { + const exercises = partIndex > -1 ? exam.parts[partIndex].exercises : [] + const formattedExercises = exercises.map(exercise => ({ + ...exercise, + userSolutions: userSolutions.find((x) => x.exercise === exercise.id)?.solutions || [], + })) + + return ( +
+ {formattedExercises.map(e => showSolutions + ? renderSolution(e, nextExercise, previousExercise, undefined, true) + : renderExercise(e, exam.id, nextExercise, previousExercise, undefined, true))} +
+ ) + } + const renderAudioInstructionsPlayer = () => (
@@ -200,16 +239,28 @@ export default function Listening({ exam, showSolutions = false, preview = false
{exam?.parts[partIndex]?.audio?.source ? ( <> -
-

Please listen to the following audio attentively.

- - {(() => { - const audioRepeatTimes = exam?.parts[partIndex]?.audio?.repeatableTimes; - return audioRepeatTimes && audioRepeatTimes > 0 - ? `You will only be allowed to listen to the audio ${audioRepeatTimes - timesListened} time(s).` - : "You may listen to the audio as many times as you would like."; - })()} - +
+
+

Please listen to the following audio attentively.

+ + {(() => { + const audioRepeatTimes = exam?.parts[partIndex]?.audio?.repeatableTimes; + return audioRepeatTimes && audioRepeatTimes > 0 + ? `You will only be allowed to listen to the audio ${audioRepeatTimes - timesListened} time(s).` + : "You may listen to the audio as many times as you would like."; + })()} + +
+ {partIndex > -1 && !examState.assignment && !!exam.parts[partIndex].script && ( + + )}
); + const progressButtons = () => ( +
+ + + +
+ ) + return ( <> {showPartDivider ? @@ -243,14 +313,19 @@ export default function Listening({ exam, showSolutions = false, preview = false /> : ( <> + {partIndex > -1 && exam.parts[partIndex].script && + setShowTextModal(false)} /> + }
x.exercises))} + totalExercises={exam.parts.length} disableTimer={showSolutions} + indexLabel="Part" /> + {/* Audio Player for the Instructions */} {partIndex === -1 && renderAudioInstructionsPlayer()} @@ -258,18 +333,14 @@ export default function Listening({ exam, showSolutions = false, preview = false {partIndex > -1 && renderAudioPlayer()} {/* Exercise renderer */} - {exerciseIndex > -1 && - partIndex > -1 && - exerciseIndex < exam.parts[partIndex].exercises.length && - !showSolutions && - renderExercise(getExercise(), exam.id, nextExercise, previousExercise)} - {/* Solution renderer */} - {exerciseIndex > -1 && - partIndex > -1 && - exerciseIndex < exam.parts[partIndex].exercises.length && - showSolutions && - renderSolution(exam.parts[partIndex].exercises[exerciseIndex], nextExercise, previousExercise)} + {exerciseIndex > -1 && partIndex > -1 && ( + <> + {progressButtons()} + {renderPartExercises()} + {progressButtons()} + + )}
{exerciseIndex === -1 && partIndex > -1 && exam.variant !== "partial" && ( @@ -294,12 +365,12 @@ export default function Listening({ exam, showSolutions = false, preview = false )} {partIndex === -1 && exam.variant !== "partial" && ( - )} {exerciseIndex === -1 && partIndex === 0 && exam.variant === "partial" && ( - )}