import { useForm } from '@inertiajs/react'; import { useState, useEffect } from 'react'; import { Timer, ChevronRight } from 'lucide-react'; import StudentLayout from '@/Layouts/StudentLayout'; import { Head } from '@inertiajs/react'; function OptionButton({ letter, text, selected, onClick }) { return ( ); } export default function QuizSession({ sessionId, question, progress, timer }) { const [selectedOption, setSelectedOption] = useState(null); const [elapsedSeconds, setElapsedSeconds] = useState(timer.elapsed); const { post, processing } = useForm({ selected_option: '', time_spent: 0, }); useEffect(() => { const interval = setInterval(() => { setElapsedSeconds((prev) => prev + 1); }, 1000); return () => clearInterval(interval); }, []); function formatTime(seconds) { const m = Math.floor(seconds / 60); const s = seconds % 60; return `${m}:${String(s).padStart(2, '0')}`; } function handleSubmit() { if (!selectedOption) return; post(route('student.quiz.answer', { session: sessionId, n: question.number }), { data: { selected_option: selectedOption, time_spent: elapsedSeconds, }, preserveScroll: true, }); } const dots = Array.from({ length: question.total }, (_, i) => { if (i + 1 < question.number) return 'answered'; if (i + 1 === question.number) return 'current'; return 'pending'; }); return (

Simulado Detran

{formatTime(elapsedSeconds)}

Taxa de Acerto

{progress.currentScore}% Progressão Ideal

{progress.correctCount}/{question.total} Questões

{question.theme}

{question.statement}

{question.imageUrl && (

)}

{['A', 'B', 'C', 'D'].map((letter) => ( setSelectedOption(letter)} /> ))}

{dots.map((status, i) => (

))}

); }