76 lines
3.2 KiB
TypeScript
76 lines
3.2 KiB
TypeScript
import { Card } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { StudentExamProps } from '@/types/page';
|
|
import { usePage } from '@inertiajs/react';
|
|
import { FileQuestion, CheckCircle2, XCircle } from 'lucide-react';
|
|
|
|
const ExamQuestions = () => {
|
|
const { props } = usePage<StudentExamProps>();
|
|
const { questions } = props;
|
|
|
|
const getQuestionTypeBadge = (type: string) => {
|
|
const colors: Record<string, string> = {
|
|
multiple_choice: 'bg-blue-600',
|
|
multiple_select: 'bg-purple-600',
|
|
matching: 'bg-green-600',
|
|
fill_blank: 'bg-yellow-600',
|
|
ordering: 'bg-orange-600',
|
|
short_answer: 'bg-red-600',
|
|
listening: 'bg-pink-600',
|
|
};
|
|
|
|
return (
|
|
<Badge className={colors[type] || 'bg-gray-600'} variant="default">
|
|
{type.replace('_', ' ').replace(/\b\w/g, (l) => l.toUpperCase())}
|
|
</Badge>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{questions && questions.length > 0 ? (
|
|
questions.map((question, index) => (
|
|
<Card key={question.id} className="p-4">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex-1">
|
|
<div className="mb-2 flex items-center gap-2">
|
|
<FileQuestion className="h-4 w-4 text-muted-foreground" />
|
|
<span className="text-sm font-semibold">Question {index + 1}</span>
|
|
{getQuestionTypeBadge(question.question_type)}
|
|
<Badge variant="outline">{question.marks} marks</Badge>
|
|
</div>
|
|
<p className="text-base font-medium">{question.title}</p>
|
|
{question.description && (
|
|
<p className="text-muted-foreground mt-2 text-sm">{question.description}</p>
|
|
)}
|
|
{question.question_options && question.question_options.length > 0 && (
|
|
<div className="mt-3 space-y-1">
|
|
<p className="text-muted-foreground text-xs font-medium">Options:</p>
|
|
<ul className="text-muted-foreground ml-4 list-disc space-y-1 text-sm">
|
|
{question.question_options.map((option: any, optIndex: number) => (
|
|
<li key={option.id || optIndex}>
|
|
{option.option_text || option.text || 'Option'}
|
|
{option.is_correct && (
|
|
<CheckCircle2 className="text-green-600 ml-1 inline h-3 w-3" />
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))
|
|
) : (
|
|
<Card className="p-6 text-center">
|
|
<p className="text-muted-foreground">No questions available for this exam yet.</p>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ExamQuestions;
|
|
|