nghyane/vstep/mobile-exam-flow

Exam Detail → Device Check → Exam Active → Submit → Result

// app/(app)/session/[id].tsx
import { useExamSession } from "@/hooks/use-exam-session";
function ExamRoom({ sessionId }: { sessionId: string }) {
  const { session, dispatch, phase } = useExamSession(sessionId);
  if (phase === "device-check") return <DeviceCheckScreen />;
  if (phase === "active") return <ExamContent session={session} />;
  if (phase === "submitting") return <SubmittingOverlay />;
  return <ExamResult sessionId={sessionId} />;
}

// Components: microphone test, camera test, audio test
<DepthCard>
  <Text style={{ fontFamily: fontFamily.bold }}>Device Check</Text>
  <MicrophoneTest />
  <CameraTest />
  <AudioTest />
  <DepthButton onPress={() => dispatch({ type: "START_EXAM" })}>
    Start Exam
  </DepthButton>
</DepthCard>

// Countdown timer
const [timeLeft, setTimeLeft] = useState(session.durationMinutes * 60);
useEffect(() => {
  if (timeLeft <= 0) {
    handleSubmit();
    return;
  }
  const timer = setInterval(() => setTimeLeft((t) => t - 1), 1000);
  return () => clearInterval(timer);
}, [timeLeft]);

// Submit flow
const mutation = useMutation({
  mutationFn: () => api.post(`/api/v1/exam-sessions/${sessionId}/submit`),
  onSuccess: () => router.replace(`/exam-result/${sessionId}`),
});
// Confirmation modal
<Modal visible={showConfirm}>
  <Text>Confirm submission?</Text>
  <DepthButton variant="destructive" onPress={() => mutation.mutate()}>
    Submit
  </DepthButton>
</Modal>

// app/(app)/exam-result/[id].tsx
// Show: overall score, per-skill scores, correct/incorrect breakdown
<SpiderChart data={currentScores} target={targetScores} />
<DepthCard>
  <Text>Overall Score: {score}/10</Text>
  {skills.map((skill) => (
    <SkillScore key={skill} {...skill} />
  ))}
</DepthCard>