126 lines
4.1 KiB
TypeScript
126 lines
4.1 KiB
TypeScript
import {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 Icon from "@mdi/react";
|
|
import {Fragment} from "react";
|
|
import Button from "../Low/Button";
|
|
import Xarrow from "react-xarrows";
|
|
|
|
export default function MatchSentencesSolutions({
|
|
id,
|
|
type,
|
|
options,
|
|
prompt,
|
|
sentences,
|
|
userSolutions,
|
|
onNext,
|
|
onBack,
|
|
}: MatchSentencesExercise & CommonProps) {
|
|
const calculateScore = () => {
|
|
const total = sentences.length;
|
|
const correct = userSolutions.filter(
|
|
(x) => sentences.find((y) => y.id.toString() === x.question.toString())?.solution === x.option || false,
|
|
).length;
|
|
const missing = total - userSolutions.filter((x) => sentences.find((y) => y.id.toString() === x.question.toString())).length;
|
|
|
|
return {total, correct, missing};
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-col gap-4 mt-4 h-full mb-20">
|
|
<span className="text-sm w-full leading-6">
|
|
{prompt.split("\\n").map((line, index) => (
|
|
<Fragment key={index}>
|
|
{line}
|
|
<br />
|
|
</Fragment>
|
|
))}
|
|
</span>
|
|
<div className="flex gap-8 w-full items-center justify-between bg-mti-gray-smoke rounded-xl px-24 py-6">
|
|
<div className="flex flex-col gap-4">
|
|
{sentences.map(({sentence, id, solution}) => (
|
|
<div key={`question_${id}`} className="flex items-center justify-end gap-2 cursor-pointer">
|
|
<span>{sentence} </span>
|
|
<button
|
|
id={id}
|
|
className={clsx(
|
|
"w-8 h-8 rounded-full z-10 text-white",
|
|
"transition duration-300 ease-in-out",
|
|
!userSolutions.find((x) => x.question.toString() === id.toString()) && "!bg-mti-gray-davy",
|
|
userSolutions.find((x) => x.question.toString() === id.toString())?.option === solution && "bg-mti-purple",
|
|
userSolutions.find((x) => x.question.toString() === id.toString())?.option !== solution && "bg-mti-rose",
|
|
)}>
|
|
{id}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
{options.map(({sentence, id}) => (
|
|
<div key={`answer_${id}`} className={clsx("flex items-center justify-start gap-2 cursor-pointer")}>
|
|
<button
|
|
id={id}
|
|
className={clsx(
|
|
"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple w-8 h-8 rounded-full z-10",
|
|
"transition duration-300 ease-in-out",
|
|
)}>
|
|
{id}
|
|
</button>
|
|
<span>{sentence}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{userSolutions &&
|
|
sentences.map((sentence, index) => (
|
|
<Xarrow
|
|
key={index}
|
|
start={sentence.id}
|
|
end={sentence.solution}
|
|
lineColor={
|
|
!userSolutions.find((x) => x.question === sentence.id)
|
|
? "#CC5454"
|
|
: userSolutions.find((x) => x.question === sentence.id)?.option === sentence.solution
|
|
? "#7872BF"
|
|
: "#CC5454"
|
|
}
|
|
showHead={false}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="flex gap-4 items-center">
|
|
<div className="flex gap-2 items-center">
|
|
<div className="w-4 h-4 rounded-full bg-mti-purple" /> Correct
|
|
</div>
|
|
<div className="flex gap-2 items-center">
|
|
<div className="w-4 h-4 rounded-full bg-mti-gray-davy" /> Unanswered
|
|
</div>
|
|
<div className="flex gap-2 items-center">
|
|
<div className="w-4 h-4 rounded-full bg-mti-rose" /> Wrong
|
|
</div>
|
|
</div>
|
|
</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={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
|
|
className="max-w-[200px] w-full">
|
|
Back
|
|
</Button>
|
|
|
|
<Button
|
|
color="purple"
|
|
onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
|
|
className="max-w-[200px] self-end w-full">
|
|
Next
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|