83 lines
2.8 KiB
TypeScript
83 lines
2.8 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { Label } from '@/components/ui/label';
|
|
|
|
interface Props {
|
|
question: ExamQuestion;
|
|
answer: any;
|
|
onAnswerChange: (answer: any) => void;
|
|
}
|
|
|
|
const MultipleSelectQuestion = ({ question, answer, onAnswerChange }: Props) => {
|
|
const selectedOptions = answer?.selected_option_ids || [];
|
|
|
|
const handleChange = (optionId: number, checked: boolean) => {
|
|
const newSelectedOptions = checked ? [...selectedOptions, optionId] : selectedOptions.filter((id: number) => id !== optionId);
|
|
|
|
onAnswerChange({
|
|
selected_option_ids: newSelectedOptions,
|
|
});
|
|
};
|
|
|
|
const handleSelectAll = () => {
|
|
const allOptionIds = question.question_options?.map((opt) => opt.id) || [];
|
|
onAnswerChange({
|
|
selected_option_ids: allOptionIds,
|
|
});
|
|
};
|
|
|
|
const handleClearAll = () => {
|
|
onAnswerChange({
|
|
selected_option_ids: [],
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm text-gray-600">Select all correct answers:</p>
|
|
<div className="flex gap-2">
|
|
<Button variant="ghost" size="sm" onClick={handleSelectAll}>
|
|
Select All
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={handleClearAll} disabled={selectedOptions.length === 0}>
|
|
Clear All
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{question.question_options?.map((option) => {
|
|
const isChecked = selectedOptions.includes(option.id);
|
|
return (
|
|
<div
|
|
key={option.id}
|
|
className={`flex items-start space-x-3 rounded-lg border-2 p-4 transition-colors ${
|
|
isChecked ? 'border-primary bg-primary/5' : 'border-gray-200 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
<Checkbox
|
|
id={`option-${option.id}`}
|
|
checked={isChecked}
|
|
onCheckedChange={(checked) => handleChange(option.id as number, checked as boolean)}
|
|
className="mt-0.5"
|
|
/>
|
|
<Label htmlFor={`option-${option.id}`} className="flex-1 cursor-pointer font-normal">
|
|
{option.option_text}
|
|
</Label>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{selectedOptions.length > 0 && (
|
|
<p className="text-sm text-gray-600">
|
|
Selected: <span className="font-semibold">{selectedOptions.length}</span> option(s)
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MultipleSelectQuestion;
|