// WeWire applicant — Assessment stages (intro → timed session → result). const QUIT_MSG = 'Leave this session? Your answers won\'t be saved — you\'ll need to retake with a new set of questions.'; // ── Countdown timer (single session, no pause) ─────────────── function useSessionTimer(totalSeconds, onExpire, running) { const [left, setLeft] = React.useState(totalSeconds); const fired = React.useRef(false); const onExpireRef = React.useRef(onExpire); onExpireRef.current = onExpire; React.useEffect(() => { setLeft(totalSeconds); fired.current = false; }, [totalSeconds]); React.useEffect(() => { if (!running) return; const id = setInterval(() => { setLeft((s) => { if (s <= 1) { if (!fired.current) { fired.current = true; onExpireRef.current && onExpireRef.current(); } return 0; } return s - 1; }); }, 1000); return () => clearInterval(id); }, [running, totalSeconds]); const mm = String(Math.floor(left / 60)).padStart(2, '0'); const ss = String(left % 60).padStart(2, '0'); return { label: `${mm}:${ss}`, low: left <= 60, expired: left <= 0 }; } function QuitConfirm({ onStay, onLeave }) { return (

Leave session?

Timed sessions can't be paused. If you leave now, you'll retake this stage with a fresh set of questions.

Keep going Leave & retake later
); } // ── Intro ──────────────────────────────────────────────────── function AssessIntro({ stage, onStart, onBack, timed }) { const perSession = timed ? WWAssess.questionsPerSession() : null; const rows = []; if (timed) { rows.push(['clock', `${WWAssess.sessionMins(stage)} minutes`, 'One sitting — the timer starts when you begin.']); rows.push(['chart', `${perSession} questions`, 'Drawn from a broader question bank.']); rows.push(['lock', 'No pausing', 'Leaving mid-session voids progress; you\'ll retake with new questions.']); } else if (stage.mins) { rows.push(['clock', `${stage.mins} minutes`, 'Work at your own pace within the window.']); } if (stage.key === 'written') rows.push(['edit', '3 essays', '~150–300 words each.']); if (stage.key === 'case') rows.push(['brief', '48-hour window', 'A realistic WeWire problem to solve at home.']); if (stage.key === 'interview') rows.push(['pin', 'In person · Accra', 'Meet the team at WeWire HQ.']); return ( {stage.key === 'interview' ? 'Choose a time' : stage.key === 'case' ? 'View the brief' : timed ? 'Start timed session' : 'Start'} }>
Step {stage.n}

{stage.name}

{stage.blurb}

{rows.map(([ic, t, d]) => (
{t}
{d}
 ))}
{timed && (
Complete this independently. Copying or sharing answers is not permitted.
)} ); } // ── MCQ / SJT player (timed, no resume) ──────────────────── function McqPlayer({ stage, questions, sessionMins, onSubmit, onQuitRequest }) { const [i, setI] = React.useState(0); const [ans, setAns] = React.useState({}); const [confirmQuit, setConfirmQuit] = React.useState(false); const safeQuestions = questions?.length ? questions : []; const finish = React.useCallback(() => { if (!safeQuestions.length) return; let correct = 0; safeQuestions.forEach((qq, idx) => { if (ans[idx] === qq.answer) correct++; }); onSubmit(Math.round((correct / safeQuestions.length) * 100), correct, safeQuestions.length); }, [ans, safeQuestions, onSubmit]); const timer = useSessionTimer(sessionMins * 60, finish, safeQuestions.length > 0); if (!safeQuestions.length) { return (
Saving your results…
); } const q = safeQuestions[i]; const answered = Object.keys(ans).length; const tryQuit = () => setConfirmQuit(true); const leave = () => { setConfirmQuit(false); onQuitRequest(); }; return (
{confirmQuit && setConfirmQuit(false)} onLeave={leave} />} setI(Math.max(0, i - 1))} disabled={i === 0} style={{ width: 56, padding: 0 }}> {i < safeQuestions.length - 1 ? setI(i + 1)} icon="next">Next : Submit ({answered}/{safeQuestions.length})}
}> {timer.label} } />
{safeQuestions.map((_, idx) => { const active = idx === i, done = ans[idx] !== undefined; return ( ); })}
{i + 1} of {safeQuestions.length}
{stage.name}
{q.q}
{q.options.map((opt, oi) => { const sel = ans[i] === oi; return (
setAns({ ...ans, [i]: oi })} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '15px 16px', borderRadius: 15, cursor: 'pointer', background: sel ? WW.orangeSoft : WW.white, border: `1px solid ${sel ? 'transparent' : WW.line}`, boxShadow: sel ? `inset 0 0 0 1.5px ${WW.orange}` : 'none', transition: 'background 160ms' }}>
{String.fromCharCode(65 + oi)}
{opt}
); })}
); } // ── Written response (multi-essay) ─────────────────────────── function WrittenScreen({ data, onSubmit, onBack }) { const cfg = window.WWFunnel?.normalizeWrittenConfig ? window.WWFunnel.normalizeWrittenConfig(data) : { prompts: [{ id: 'main', title: 'Written response', prompt: data.prompt }], minWords: data.minWords || 30, maxWords: data.maxWords || 500 }; const perEssayMin = Math.max(30, Math.ceil((cfg.minWords || 150) / Math.max(cfg.prompts.length, 1))); const [answers, setAnswers] = React.useState(() => Object.fromEntries(cfg.prompts.map((p) => [p.id, '']))); const [activeIdx, setActiveIdx] = React.useState(0); const essays = cfg.prompts.map((p) => { const text = answers[p.id] || ''; const wordCount = text.trim() ? text.trim().split(/\s+/).length : 0; return { ...p, text: text.trim(), wordCount }; }); const allOk = essays.every((e) => e.wordCount >= perEssayMin && e.wordCount <= cfg.maxWords); const active = essays[activeIdx] || essays[0]; return ( onSubmit(essays)} disabled={!allOk} icon="check"> Submit all {cfg.prompts.length} responses }>
{essays.map((e, i) => { const over = e.wordCount > cfg.maxWords; const ok = e.wordCount >= perEssayMin && !over; return ( ); })}
Essay {activeIdx + 1} of {essays.length}
{active.prompt}
Your answer cfg.maxWords ? WW.red : active.wordCount >= perEssayMin ? WW.green : WW.subtle }}> {active.wordCount} / {cfg.maxWords} words {active.wordCount > cfg.maxWords ? '· over limit' : active.wordCount >= perEssayMin ? '✓' : `· min ${perEssayMin}`}