/* ============================================================
test.jsx — the test-taker experience
Phases: start → listening → interstitial_L → reading
→ (interstitial_S → speaking)? → results
Exports window.TestExperience
============================================================ */
(function () {
const { useState, useEffect, useRef, useMemo } = React;
const S = window.TestStore;
/* ---- TOEIC-style scaled scoring ---- */
function scaleSection(correct, total) {
if (!total) return 5;
return Math.min(495, Math.max(5, Math.round((correct / total * 495) / 5) * 5));
}
function proficiencyBand(total) {
if (total >= 860) return { label: "International Proficiency", color: "var(--correct)" };
if (total >= 730) return { label: "Working Proficiency Plus", color: "#2A7AB0" };
if (total >= 470) return { label: "Limited Working Proficiency", color: "var(--primary)" };
if (total >= 220) return { label: "Elementary Proficiency", color: "var(--warn)" };
return { label: "Basic Proficiency", color: "var(--ink-soft)" };
}
/* ============================================================
Start screen
============================================================ */
function StartScreen({ settings, onBegin, onExit }) {
const [name, setName] = useState("");
const hasSpeaking = S.allSpeakingItems().length > 0 && settings.speakingEnabled !== false;
const speakItems = S.allSpeakingItems();
const sections = ["listening", "reading"]
.filter((key) => key === "listening" ? settings.listeningEnabled !== false : settings.readingEnabled !== false)
.map((key) => {
const sec = S.SECTIONS[key];
return {
key, name: sec.name,
icon: key === "listening" ? "headphones" : "book",
duration: key === "listening" ? settings.durationListening : settings.durationReading,
parts: sec.parts.map((p) => ({ ...S.PARTS[p], count: S.questionCount(p) })),
total: sec.parts.reduce((s, p) => s + S.questionCount(p), 0),
};
});
const grandTotal = sections.reduce((s, x) => s + x.total, 0);
const canBegin = (grandTotal > 0 || hasSpeaking) && name.trim().length > 0;
const sectionLabels = [
...(settings.listeningEnabled !== false ? ["listening"] : []),
...(settings.readingEnabled !== false ? ["reading"] : []),
...(hasSpeaking ? ["speaking"] : []),
];
const sectionTitle = sectionLabels.map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(", ").replace(/, ([^,]*)$/, " & $1");
return (
{sectionTitle} Assessment
{settings.testTitle}
A timed proficiency test.
Work through each section before its timer ends.
{/* Notice — shown first so test-takers with mic see it before filling name */}
{hasSpeaking && (
Microphone required
This test includes a speaking section. Please ensure your microphone is connected and accessible before you begin.
)}
{/* section cards */}
{sections.map((sec) => (
{sec.name}
{sec.total} questions
{sec.parts.map((p) => (
P{p.n}
{p.short}
{p.count} Q
))}
))}
{/* Speaking card */}
{hasSpeaking && (
Speaking
{speakItems.length} prompt{speakItems.length !== 1 ? "s" : ""}
{speakItems.map((it, i) => (
Q{i + 1}
{it.topic || "Speaking"}
{it.prepTime}s prep · {it.responseTime}s speak
))}
)}
{/* Participant name */}
{/* General notice */}
Before you begin
Each section is timed independently — the test advances automatically when a timer runs out. You may revisit answers within a section using the navigator.
onBegin(name.trim())} disabled={!canBegin}>
Begin Test
{!grandTotal && !hasSpeaking &&
No questions yet — add some in the admin panel first.
}
{(grandTotal > 0 || hasSpeaking) && !name.trim() &&
Enter your name above to begin.
}
);
}
/* ============================================================
QuestionBlock
============================================================ */
function QuestionBlock({ entry, qNumber, answers, onAnswer, optionCount }) {
const q = entry.q;
const sel = answers[q.id];
return (
{q.text ? (
) : (
Question {qNumber}
— mark the letter of the best response.
)}
{q.options.slice(0, optionCount).map((opt, i) => {
const active = sel === i;
return (
onAnswer(q.id, i)} style={{
display: "flex", alignItems: "center", gap: 12, textAlign: "left",
padding: "11px 14px", borderRadius: 9, cursor: "pointer", width: "100%",
background: active ? "var(--primary-tint)" : "var(--surface)",
border: `1.5px solid ${active ? "var(--primary)" : "var(--line)"}`,
transition: "all .12s ease", fontFamily: "var(--font-ui)",
}}>
{opt}
: (spoken option {["A","B","C","D"][i]}) }
);
})}
{meta.hasImage && (
)}
{meta.hasAudio &&
}
{isReadingPass && (
{item.passageLabel &&
{item.passageLabel} }
{item.passage}
{item.passage2 && (
{item.passage2}
)}
)}
{entries.map((e) => (
);
const twoCol = isReadingPass || meta.hasImage;
return (
Part {item.part}
{meta.name}
— {meta.desc}
{twoCol
? <>{stimulus}
{questions}
:
{meta.hasAudio && stimulus}{questions}
}
);
}
/* ============================================================
SectionRunner
============================================================ */
function SectionRunner({ sectionKey, settings, answers, onAnswer, onComplete }) {
const sec = S.SECTIONS[sectionKey];
const flat = useMemo(() => S.buildExam(sectionKey), [sectionKey]);
const items = useMemo(() => {
const seen = new Set();
const result = [];
flat.forEach((e) => { if (!seen.has(e.item.id)) { seen.add(e.item.id); result.push(e.item); } });
return result;
}, [flat]);
const qMap = useMemo(() => { const m = {}; flat.forEach((e, i) => { m[e.q.id] = i + 1; }); return m; }, [flat]);
const [idx, setIdx] = useState(0);
const [showNav, setShowNav] = useState(false);
const [confirmSubmit, setConfirmSubmit] = useState(false);
const duration = sectionKey === "listening" ? settings.durationListening : settings.durationReading;
const scrollRef = useRef(null);
useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = 0; }, [idx]);
if (!items.length) {
useEffect(() => onComplete(), []);
return null;
}
const item = items[idx];
const itemEntries = flat.filter((e) => e.item.id === item.id);
const answeredCount = flat.filter((e) => answers[e.q.id] != null).length;
const isLast = idx === items.length - 1;
const numberOf = (qid) => qMap[qid];
function jumpToQuestion(qid) {
const target = flat.find((e) => e.q.id === qid); if (!target) return;
const i = items.findIndex((it) => it.id === target.item.id);
if (i >= 0) setIdx(i);
setShowNav(false);
}
return (
{/* top bar */}
{/* progress */}
{/* body */}
{/* footer */}
{/* Navigator modal */}
setShowNav(false)} title={`${sec.name} — Question Navigator`} width={560}>
{sec.parts.map((p) => {
const pe = flat.filter((e) => e.part === p);
if (!pe.length) return null;
return (
Part {p}
{S.PARTS[p].name}
{pe.map((e) => {
const done = answers[e.q.id] != null;
const onSc = e.item.id === item.id;
return (
jumpToQuestion(e.q.id)} style={{
height: 40, borderRadius: 8, fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600, cursor: "pointer",
background: done ? "var(--primary)" : "var(--surface)",
color: done ? "#fff" : "var(--ink-soft)",
border: `1.5px solid ${onSc ? "var(--accent)" : done ? "var(--primary)" : "var(--line-strong)"}`,
}}>{numberOf(e.q.id)}
);
})}
);
})}
{/* Submit confirm */}
setConfirmSubmit(false)} title="Finish this section?" width={420}>
You've answered {answeredCount} of {flat.length} questions in this section.
{answeredCount < flat.length && Unanswered questions will be marked incorrect.
}
setConfirmSubmit(false)}>Keep working
{sectionKey === "listening" ? "Continue to Reading" : "Proceed"}
Section complete
Listening finished
Next is the Reading section — {settings.durationReading} minutes. The timer starts when you continue.
Start Reading
);
}
/* ============================================================
Main orchestrator
============================================================ */
window.TestExperience = function TestExperience({ onExit }) {
const [settings] = useState(() => S.getSettings());
const [phase, setPhase] = useState("start");
const [answers, setAnswers] = useState({});
const [participantName, setParticipantName] = useState("");
const [speakingResults, setSpeakingResults] = useState([]);
const savedRef = useRef(false);
const answersRef = useRef({});
// Keep answersRef in sync so closures always see latest answers
useEffect(() => { answersRef.current = answers; }, [answers]);
const hasListening = settings.listeningEnabled !== false;
const hasReading = settings.readingEnabled !== false;
const hasSpeaking = S.getTestSpeakingItems().length > 0 && settings.speakingEnabled !== false;
const onAnswer = (qid, opt) => setAnswers((a) => ({ ...a, [qid]: opt }));
function beginTest(name) {
S.startExam();
setParticipantName(name);
setAnswers({});
answersRef.current = {};
savedRef.current = false;
setSpeakingResults([]);
if (hasListening) {
setPhase("listening");
} else if (hasReading) {
setPhase("reading");
} else if (hasSpeaking) {
setPhase("interstitial_speaking");
} else {
goToResults([]);
}
}
function completeListening() {
if (hasReading) {
setPhase("interstitial_listening");
} else if (hasSpeaking) {
setPhase("interstitial_speaking");
} else {
goToResults([]);
}
}
function completeReading() {
if (hasSpeaking) {
setPhase("interstitial_speaking");
} else {
goToResults([]);
}
}
function goToResults(spkResults) {
setSpeakingResults(spkResults);
if (!savedRef.current) {
savedRef.current = true;
const ans = answersRef.current;
const compute = (key) => {
const flat = S.buildExam(key);
const correct = flat.filter((e) => ans[e.q.id] === e.q.correct).length;
const total = flat.length;
return { correct, total, scaled: scaleSection(correct, total) };
};
const L = hasListening ? compute("listening") : { correct: 0, total: 0, scaled: 0 };
const R = hasReading ? compute("reading") : { correct: 0, total: 0, scaled: 0 };
const totalScaled = L.scaled + R.scaled;
const b = proficiencyBand(totalScaled);
const spkItems = S.getTestSpeakingItems();
S.saveResult({
participantName,
listening: L,
reading: R,
speaking: {
attempted: spkResults.filter((r) => r.attempted).length,
total: spkItems.length,
items: spkResults,
},
hasSpeaking,
totalScaled,
band: b.label,
answers: { ...ans },
});
}
setPhase("results");
}
if (phase === "start")
return
;
if (phase === "listening")
return setPhase("reading")} />;
if (phase === "reading")
return setPhase("speaking")} />;
if (phase === "speaking")
return { setAnswers({}); setSpeakingResults([]); savedRef.current = false; setPhase("start"); }}
/>;
};
})();