// QuizPlayer — runs the timed quiz: question → answer/timeout → reveal blink → next. // State machine: 'intro' | 'playing' | 'reveal' | 'done' // Light theme: white surfaces, Ibmec blue + yellow accents. // We never tell the user whether THEIR answer was right — only the correct option // blinks during the reveal interstitial, and points earned for the question pop in. const QuizPlayer = ({ quiz, onClose }) => { const existing = getResult(); const [step, setStep] = React.useState(existing ? 'done' : 'intro'); const [qIndex, setQIndex] = React.useState(0); const [perQuestion, setPerQuestion] = React.useState(existing?.perQuestion || []); const [picked, setPicked] = React.useState(null); const [questionStart, setQuestionStart] = React.useState(0); const [now, setNow] = React.useState(Date.now()); const submittedRef = React.useRef(false); React.useEffect(() => { if (step !== 'playing') return; const t = setInterval(() => setNow(Date.now()), 100); return () => clearInterval(t); }, [step]); const q = quiz.questions[qIndex]; const elapsed = step === 'playing' ? now - questionStart : 0; const remaining = Math.max(0, SECONDS_PER_QUESTION * 1000 - elapsed); const remainingSec = Math.ceil(remaining / 1000); const beginQuestion = (idx) => { submittedRef.current = false; setPicked(null); setQuestionStart(Date.now()); setNow(Date.now()); setQIndex(idx); setStep('playing'); }; const beginQuiz = () => { setPerQuestion([]); beginQuestion(0); }; const submitAnswer = (optId) => { if (submittedRef.current) return; submittedRef.current = true; const elapsedMs = Date.now() - questionStart; setPicked(optId); const correct = q.options.find(o => o.correct); const isCorrect = optId === correct.id; const pts = calcPoints(elapsedMs, isCorrect); setPerQuestion(p => [...p, { picked: optId, pts, elapsedMs, correctId: correct.id }]); setStep('reveal'); }; React.useEffect(() => { if (step === 'playing' && remaining <= 0 && !submittedRef.current) { submitAnswer(null); } }, [remaining, step]); // eslint-disable-line React.useEffect(() => { if (step !== 'reveal') return; const t = setTimeout(() => { if (qIndex + 1 < quiz.questions.length) { beginQuestion(qIndex + 1); } else { const total = perQuestion.reduce((a, e) => a + e.pts, 0); const r = { perQuestion, total, at: Date.now() }; saveResult(r); setStep('done'); } }, REVEAL_MS); return () => clearTimeout(t); }, [step]); // eslint-disable-line const totalSoFar = perQuestion.reduce((a, e) => a + e.pts, 0); const progress = step === 'intro' ? 0 : step === 'done' ? 1 : (qIndex + (step === 'reveal' ? 1 : (1 - remaining / (SECONDS_PER_QUESTION * 1000)))) / quiz.questions.length; return (
{step === 'intro' ? 'QUIZ DA SEMANA' : step === 'done' ? 'CONCLUÍDO' : `${String(qIndex + 1).padStart(2,'0')} / ${String(quiz.questions.length).padStart(2,'0')}`}
{step !== 'intro' && `${totalSoFar} pts`}
{step === 'intro' && } {step === 'playing' && } {step === 'reveal' && } {step === 'done' && }
); }; // ============================================================ // Intro — minimal: scoring rules, timer, single attempt // ============================================================ const QuizIntro = ({ quiz, onStart, onClose }) => (
★ PRONTO?

{quiz.title}

{quiz.tagline}

); const IntroStat = ({ big, label, accent }) => (
{big}
{label}
); const RuleLine = ({ n, t, s }) => (
{n}
{t}
{s}
); // ============================================================ // Question — 60s timer bar, multiple choice. Live "potential points" indicator. // ============================================================ const QuizQuestion = ({ question, index, total, remainingMs, remainingSec, onPick }) => { const pct = (remainingMs / (SECONDS_PER_QUESTION * 1000)) * 100; const elapsedMs = SECONDS_PER_QUESTION * 1000 - remainingMs; const potential = calcPoints(elapsedMs, true); const urgent = remainingSec <= 10; return (
PERGUNTA {String(index + 1).padStart(2, '0')} / {String(total).padStart(2, '0')}
{String(remainingSec).padStart(2, '0')}s
VALENDO
{potential}pts

{question.q}

{question.options.map((opt, i) => ( ))}
); }; // ============================================================ // Reveal — between questions: correct option blinks; points-gained pops in. // We don't tell the user whether THEIR answer was right — only what the right // answer was, and how many points they earned. // ============================================================ const QuizReveal = ({ question, entry }) => { const earned = entry.pts; const isTimeout = entry.picked == null; return (
RESPOSTA CORRETA
0 ? Q_BLUE : '#B6BAC6', }}> +{earned}
{isTimeout ? 'tempo esgotado' : earned === 0 ? 'sem pontos nesta' : 'pontos somados'}
{question.options.map((opt, i) => { const isCorrect = !!opt.correct; return (
{String.fromCharCode(65 + i)} {opt.label} {isCorrect && }
); })}
); }; Object.assign(window, { QuizPlayer, QuizIntro, QuizQuestion, QuizReveal, IntroStat, RuleLine });