/* ============================================================ speaking.jsx — Speaking section runner Exports: window.SpeakingInterstitial, window.SpeakingSection ============================================================ */ (function () { const { useState, useEffect, useRef } = React; const S = window.TestStore; /* ============================================================ Single question UI — prep → speak → done ============================================================ */ function SpeakingQuestion({ item, index, total, onComplete }) { const [phase, setPhase] = useState("prep"); // prep | speak | done const [timeLeft, setTimeLeft] = useState(item.prepTime > 0 ? item.prepTime : 0); const phaseRef = useRef("prep"); const timerRef = useRef(null); const startRef = useRef(null); const mediaRef = useRef(null); const streamRef = useRef(null); const chunksRef = useRef([]); /* cleanup on unmount */ useEffect(() => () => { clearInterval(timerRef.current); stopMedia(); }, []); /* kick off prep on mount / item change */ useEffect(() => { phaseRef.current = "prep"; setPhase("prep"); if (item.prepTime > 0) { setTimeLeft(item.prepTime); runTimer(item.prepTime, beginSpeaking); } else { setTimeLeft(0); beginSpeaking(); } return () => { clearInterval(timerRef.current); stopMedia(); }; }, [item.id]); function runTimer(seconds, onDone) { clearInterval(timerRef.current); let t = seconds; timerRef.current = setInterval(() => { t -= 1; setTimeLeft(t); if (t <= 0) { clearInterval(timerRef.current); onDone(); } }, 1000); } function stopMedia() { try { if (mediaRef.current && mediaRef.current.state !== "inactive") mediaRef.current.stop(); if (streamRef.current) streamRef.current.getTracks().forEach((t) => t.stop()); } catch (e) {} mediaRef.current = null; streamRef.current = null; } function beginSpeaking() { if (phaseRef.current === "speak" || phaseRef.current === "done") return; clearInterval(timerRef.current); phaseRef.current = "speak"; setPhase("speak"); setTimeLeft(item.responseTime); startRef.current = Date.now(); /* Try to start microphone recording */ chunksRef.current = []; if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({ audio: true }) .then((stream) => { streamRef.current = stream; try { const mr = new MediaRecorder(stream, { audioBitsPerSecond: 16000 }); mediaRef.current = mr; mr.ondataavailable = (e) => { if (e.data.size > 0) chunksRef.current.push(e.data); }; mr.start(); } catch (_) {} }) .catch(() => {}); /* permission denied – UI still runs */ } runTimer(item.responseTime, finishSpeaking); } function finishSpeaking() { if (phaseRef.current === "done") return; clearInterval(timerRef.current); const duration = startRef.current ? Math.round((Date.now() - startRef.current) / 1000) : 0; phaseRef.current = "done"; setPhase("done"); const mr = mediaRef.current; const stream = streamRef.current; mediaRef.current = null; streamRef.current = null; if (stream) stream.getTracks().forEach((t) => t.stop()); let audioReady = false, timerFired = false, audioDataUrl = null; function tryComplete() { if (audioReady && timerFired) onComplete({ id: item.id, attempted: true, duration, ...(audioDataUrl ? { audioDataUrl } : {}) }); } setTimeout(() => { timerFired = true; tryComplete(); }, 900); if (mr && mr.state !== "inactive") { mr.onstop = () => { const chunks = chunksRef.current; if (chunks.length > 0) { const blob = new Blob(chunks, { type: mr.mimeType || "audio/webm" }); const reader = new FileReader(); reader.onload = () => { audioDataUrl = reader.result; audioReady = true; tryComplete(); }; reader.onerror = () => { audioReady = true; tryComplete(); }; reader.readAsDataURL(blob); } else { audioReady = true; tryComplete(); } }; mr.stop(); } else { audioReady = true; tryComplete(); } } function skipPrep() { clearInterval(timerRef.current); beginSpeaking(); } /* helpers */ const fmt = (s) => `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(s % 60).padStart(2, "0")}`; const R = 58, C = 2 * Math.PI * R; const prepPct = item.prepTime > 0 ? timeLeft / item.prepTime : 0; const speakPct = item.responseTime > 0 ? timeLeft / item.responseTime : 0; return (
{/* progress dots */}
{Array.from({ length: total }, (_, i) => (
))}
Speaking · Question {index + 1} of {total} {item.topic && ( {item.topic} )} {/* Prompt card */}

{item.prompt || No prompt has been set for this question.}

{/* ---- PREP phase ---- */} {phase === "prep" && (
{fmt(timeLeft)} Prep

Read the question and prepare your answer. You will be prompted to speak when preparation time ends.

)} {/* ---- SPEAK phase ---- */} {phase === "speak" && (
{fmt(timeLeft)} Speaking
Recording in progress

Speak clearly and answer the question. The recording stops automatically when time runs out.

)} {/* ---- DONE phase ---- */} {phase === "done" && (
Response recorded {index < total - 1 &&

Moving to next question…

} {index === total - 1 &&

All responses recorded. Calculating your results…

}
)}
); } /* ============================================================ Interstitial shown between Reading and Speaking ============================================================ */ window.SpeakingInterstitial = function SpeakingInterstitial({ onContinue }) { const items = S.getTestSpeakingItems(); return (
Next section

Speaking Section

You have completed the written sections. Now you will answer {items.length} spoken question{items.length !== 1 ? "s" : ""}.

Each question includes preparation time then a timed recording period. Speak clearly into your microphone.

{/* per-question preview */}
{items.map((it, i) => (
Q{i + 1} {it.topic || "Speaking"} {it.prepTime}s prep · {it.responseTime}s response
))}
); }; /* ============================================================ Speaking section orchestrator ============================================================ */ window.SpeakingSection = function SpeakingSection({ onComplete }) { const items = S.getTestSpeakingItems(); const [currentIdx, setCurrentIdx] = useState(0); const [collected, setCollected] = useState([]); const doneRef = useRef(false); useEffect(() => { if (!items.length && !doneRef.current) { doneRef.current = true; onComplete([]); } }, []); if (!items.length) return null; function handleDone(result) { const next = [...collected, result]; setCollected(next); if (currentIdx < items.length - 1) { setCurrentIdx((i) => i + 1); } else if (!doneRef.current) { doneRef.current = true; onComplete(next); } } const item = items[currentIdx]; return (
{/* header */}
Speaking Section Question {currentIdx + 1} of {items.length}
Recording
{/* progress bar */}
{/* body */}
); }; })();