97 lines
2.8 KiB
TypeScript
97 lines
2.8 KiB
TypeScript
import { MatchSentenceExerciseSentence, MatchSentencesExercise } from "@/interfaces/exam";
|
|
import clsx from "clsx";
|
|
import { CommonProps } from ".";
|
|
import { Fragment } from "react";
|
|
|
|
function QuestionSolutionArea({
|
|
question,
|
|
userSolution,
|
|
}: {
|
|
question: MatchSentenceExerciseSentence;
|
|
userSolution?: { question: string; option: string };
|
|
}) {
|
|
return (
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div className="flex items-center gap-3 cursor-pointer col-span-2">
|
|
<button
|
|
className={clsx(
|
|
"text-white p-2 rounded-full z-10",
|
|
!userSolution
|
|
? "bg-mti-gray-davy"
|
|
: userSolution.option.toString() === question.solution.toString()
|
|
? "bg-mti-purple"
|
|
: "bg-mti-rose",
|
|
"transition duration-300 ease-in-out",
|
|
)}>
|
|
{question.id}
|
|
</button>
|
|
<span>{question.sentence}</span>
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"w-56 h-10 border self-center rounded-xl items-center justify-center flex gap-3 px-2",
|
|
!userSolution
|
|
? "border-mti-gray-davy"
|
|
: userSolution.option.toString() === question.solution.toString()
|
|
? "border-mti-purple"
|
|
: "border-mti-rose",
|
|
)}>
|
|
<span className="line-through">
|
|
{userSolution && userSolution?.option.toString() !== question.solution.toString() && `Paragraph ${userSolution.option}`}
|
|
</span>
|
|
<span className="font-semibold">Paragraph {question.solution}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function MatchSentencesSolutions({
|
|
id,
|
|
type,
|
|
prompt,
|
|
sentences,
|
|
userSolutions,
|
|
headerButtons,
|
|
footerButtons,
|
|
}: MatchSentencesExercise & CommonProps) {
|
|
return (
|
|
<div className="flex flex-col gap-4 mt-4">
|
|
{headerButtons}
|
|
<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (headerButtons && footerButtons) && "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 flex-col 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((question) => (
|
|
<QuestionSolutionArea
|
|
question={question}
|
|
userSolution={userSolutions.find((x) => x.question.toString() === question.id.toString())}
|
|
key={`question_${question.id}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</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>
|
|
{footerButtons}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|