ENCOA-222 & ENCOA-223
ENCOA-222: Added an option for non-assignment exams to view the transcript of a Listening audio; ENCOA-223: Updated the Listening exam to show all of the exercises/questions of each part on a single page;
This commit is contained in:
Tiago Ribeiro
@@ -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 (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex justify-between w-full gap-8">
|
||||
<Button
|
||||
color="purple"
|
||||
variant="outline"
|
||||
onClick={back}
|
||||
className="max-w-[200px] w-full"
|
||||
disabled={exam && exam.module === "level" && partIndex === 0 && questionIndex === 0}>
|
||||
Back
|
||||
</Button>
|
||||
const progressButtons = () => (
|
||||
<div className="flex justify-between w-full gap-8">
|
||||
<Button
|
||||
color="purple"
|
||||
variant="outline"
|
||||
onClick={back}
|
||||
className="max-w-[200px] w-full"
|
||||
disabled={exam && exam.module === "level" && partIndex === 0 && questionIndex === 0}>
|
||||
Back
|
||||
</Button>
|
||||
|
||||
<Button color="purple" onClick={next} className="max-w-[200px] self-end w-full">
|
||||
{exam &&
|
||||
<Button color="purple" onClick={next} className="max-w-[200px] self-end w-full">
|
||||
{exam &&
|
||||
exam.module === "level" &&
|
||||
partIndex === exam.parts.length - 1 &&
|
||||
exerciseIndex === exam.parts[partIndex].exercises.length - 1 &&
|
||||
questionIndex + 1 >= questions.length - 1
|
||||
? "Submit"
|
||||
: "Next"}
|
||||
</Button>
|
||||
? "Submit"
|
||||
: "Next"}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
|
||||
const renderAllQuestions = () =>
|
||||
questions.map(question => (
|
||||
<div
|
||||
key={question.id} className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
|
||||
<Question
|
||||
{...question}
|
||||
userSolution={answers.find((x) => question.id === x.question)?.option}
|
||||
onSelectOption={(option) => onSelectOption(option, question)}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
|
||||
<div className="flex flex-col gap-4 mt-4 mb-20">
|
||||
<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
|
||||
{/*<span className="text-xl font-semibold mb-2">{"Select the appropriate option."}</span>*/}
|
||||
{questionIndex < questions.length && (
|
||||
<Question
|
||||
{...questions[questionIndex]}
|
||||
userSolution={answers.find((x) => questions[questionIndex].id === x.question)?.option}
|
||||
onSelectOption={(option) => onSelectOption(option, questions[questionIndex])}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{questionIndex + 1 < questions.length && (
|
||||
<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
|
||||
<Question
|
||||
{...questions[questionIndex + 1]}
|
||||
userSolution={answers.find((x) => questions[questionIndex + 1].id === x.question)?.option}
|
||||
onSelectOption={(option) => onSelectOption(option, questions[questionIndex + 1])}
|
||||
/>
|
||||
</div>
|
||||
const renderTwoQuestions = () => (
|
||||
<>
|
||||
<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
|
||||
{questionIndex < questions.length && (
|
||||
<Question
|
||||
{...questions[questionIndex]}
|
||||
userSolution={answers.find((x) => questions[questionIndex].id === x.question)?.option}
|
||||
onSelectOption={(option) => onSelectOption(option, questions[questionIndex])}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
|
||||
<Button
|
||||
color="purple"
|
||||
variant="outline"
|
||||
onClick={back}
|
||||
className="max-w-[200px] w-full"
|
||||
disabled={exam && exam.module === "level" && partIndex === 0 && questionIndex === 0}>
|
||||
Back
|
||||
</Button>
|
||||
{questionIndex + 1 < questions.length && (
|
||||
<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
|
||||
<Question
|
||||
{...questions[questionIndex + 1]}
|
||||
userSolution={answers.find((x) => questions[questionIndex + 1].id === x.question)?.option}
|
||||
onSelectOption={(option) => onSelectOption(option, questions[questionIndex + 1])}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
|
||||
<Button color="purple" onClick={next} className="max-w-[200px] self-end w-full">
|
||||
{exam &&
|
||||
exam.module === "level" &&
|
||||
partIndex === exam.parts.length - 1 &&
|
||||
exerciseIndex === exam.parts[partIndex].exercises.length - 1 &&
|
||||
questionIndex + 1 >= questions.length - 1
|
||||
? "Submit"
|
||||
: "Next"}
|
||||
</Button>
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
{!disableProgressButtons && progressButtons()}
|
||||
|
||||
<div className={clsx("flex flex-col gap-4 mt-4", !disableProgressButtons && "mb-20")}>
|
||||
{disableProgressButtons ? renderAllQuestions() : renderTwoQuestions()}
|
||||
</div>
|
||||
|
||||
{!disableProgressButtons && progressButtons()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user