66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import { MatchSentenceExerciseOption, MatchSentenceExerciseSentence } from "@/interfaces/exam";
|
|
import { useDraggable, useDroppable } from "@dnd-kit/core";
|
|
import clsx from "clsx";
|
|
|
|
interface DroppableQuestionAreaProps {
|
|
question: MatchSentenceExerciseSentence;
|
|
answer?: string
|
|
}
|
|
|
|
const DroppableQuestionArea: React.FC<DroppableQuestionAreaProps> = ({ question, answer }) => {
|
|
const { isOver, setNodeRef } = useDroppable({ id: `droppable_sentence_${question.id}` });
|
|
|
|
return (
|
|
<div className="grid grid-cols-3 gap-4" ref={setNodeRef}>
|
|
<div className="flex items-center gap-3 cursor-pointer col-span-2">
|
|
<button
|
|
className={clsx(
|
|
"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple p-2 rounded-full z-10",
|
|
"transition duration-300 ease-in-out",
|
|
)}>
|
|
{question.id}
|
|
</button>
|
|
<span>{question.sentence}</span>
|
|
</div>
|
|
<div
|
|
key={`answer_${question.id}_${answer}`}
|
|
className={clsx("w-48 h-10 border-2 border-mti-purple-light self-center rounded-xl flex items-center justify-center", isOver && "border-mti-purple-dark")}>
|
|
{answer && `Paragraph ${answer}`}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const DraggableOptionArea: React.FC<{ option: MatchSentenceExerciseOption }> = ({ option }) => {
|
|
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,
|
|
}
|
|
: undefined;
|
|
|
|
return (
|
|
<div className={clsx("flex items-center justify-start gap-6 cursor-pointer")} ref={setNodeRef} style={style} {...listeners} {...attributes}>
|
|
<button
|
|
id={`option_${option.id}`}
|
|
// onClick={() => selectOption(id)}
|
|
className={clsx(
|
|
"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple px-3 py-2 rounded-full z-10",
|
|
"transition duration-300 ease-in-out",
|
|
option.id,
|
|
)}>
|
|
Paragraph {option.id}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export {
|
|
DroppableQuestionArea,
|
|
DraggableOptionArea,
|
|
}
|