import InputError from '@/components/input-error'; import { Button, buttonVariants } from '@/components/ui/button'; import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'; import ImageUpload from '@/components/ui/imageUpload'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import AppLayout from '@/layouts/app-layout'; import { type BreadcrumbItem } from '@/types'; import { Head, Link, useForm } from '@inertiajs/react'; import { FormEventHandler, useRef } from 'react'; import ReactQuill from 'react-quill-new'; import 'react-quill-new/dist/quill.snow.css'; interface SubTopicItem { id: number; name: string; topic: { id: number; name: string; }; } type OptionInput = { option: string; is_correct: boolean; }; type CreateQuestionForm = { question: string; type: 'single_choice' | 'multiple_choice'; sub_topic_id: number | string; explanation: string; image: string; options: OptionInput[]; }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Questions', href: '/question' }, { title: 'Create', href: '/question/create' }, ]; export default function Create({ subTopics }: { subTopics: SubTopicItem[] }) { const questionInput = useRef(null); const { data, setData, errors, post, reset, processing } = useForm({ question: '', type: 'single_choice', sub_topic_id: '', explanation: '', image: '', options: [ { option: '', is_correct: false }, { option: '', is_correct: false }, { option: '', is_correct: false }, { option: '', is_correct: false }, { option: '', is_correct: false }, ], }); const handleOptionChange = (index: number, field: keyof OptionInput, val: string | boolean) => { const newOptions = [...data.options]; if (field === 'is_correct') { if (data.type === 'single_choice') { newOptions.forEach((o, i) => { o.is_correct = i === index; }); } else { newOptions[index].is_correct = val as boolean; } } else { newOptions[index].option = val as string; } setData('options', newOptions); }; const createQuestion: FormEventHandler = (e) => { e.preventDefault(); const correctCount = data.options.filter((opt) => opt.is_correct).length; if (correctCount < 1) { alert('Please select at least one correct option.'); return; } post(route('question.store'), { preserveScroll: true, onSuccess: () => reset(), onError: (errs) => { if (errs.question) { questionInput.current?.focus(); } }, }); }; return (
Question List
{/* Question Card */} Create Question
{/* Question */}
setData('question', e.target.value)} placeholder="Enter the question" disabled={processing} />
{/* Type */}
{/* Sub Topic */}
{/* Explanation */}
setData('explanation', content)} className="h-[200px]" readOnly={processing} />
{/* Image Upload */}
setData('image', file)} />
{/* Options */}

Options

{data.options.map((opt, index) => (
{index + 1}. handleOptionChange(index, 'option', e.target.value)} placeholder={`Option ${index + 1}`} disabled={processing} />
))}
Cancel
); }