Quiz Card

'use client'

import { useState } from 'react'
import './quiz-card.css'

export interface QuizQuestion { q: string; options: string[]; answer: number; why?: string }
export interface QuizCardProps {
  questions: QuizQuestion[]
  checkOnPick?: boolean
  onComplete?: (score: number) => void
  fill?: 'dark' | 'light'
  className?: string
}

/** Multiple-choice quiz with reveal and explanation. */
export function QuizCard({ questions, checkOnPick = false, onComplete, fill = 'dark', className }: QuizCardProps) {
  const [i, setI] = useState(0)
  const [pick, setPick] = useState<number | null>(null)
  const [checked, setChecked] = useState(false)
  const [score, setScore] = useState(0)
  const [over, setOver] = useState(false)
  const q = questions[i]
  const check = (p = pick) => { if (p === null) return; setChecked(true); if (p === q.answer) setScore((s) => s + 1) }
  const next = () => {
    if (i + 1 >= questions.length) { setOver(true); onComplete?.(score); return }
    setI(i + 1); setPick(null); setChecked(false)
  }
  const cls = ['sd-qz', className].filter(Boolean).join(' ')
  if (over)
    return (
      <div className={cls} data-fill={fill}>
        <div className="sd-qz__prog"><i style={{ width: '100%' }} /></div>
        <div className="sd-qz__done" role="status"><b>{score}/{questions.length}</b><span>{score === questions.length ? 'Perfect score.' : 'Nice work. Review and try again?'}</span></div>
        <button type="button" className="sd-qz__btn" onClick={() => { setI(0); setPick(null); setChecked(false); setScore(0); setOver(false) }}>Retry</button>
      </div>
    )
  return (
    <div className={cls} data-fill={fill}>
      <div className="sd-qz__prog" role="progressbar" aria-valuemin={0} aria-valuemax={questions.length} aria-valuenow={i}><i style={{ width: `${(i / questions.length) * 100}%` }} /></div>
      <div className="sd-qz__n">Question {i + 1} of {questions.length}</div>
      <div key={i} className="sd-qz__q" id="qz-q">{q.q}</div>
      <div className="sd-qz__opts" role="radiogroup" aria-labelledby="qz-q">
        {q.options.map((o, j) => {
          const res = !checked ? undefined : j === q.answer ? 'right' : j === pick ? 'wrong' : 'dim'
          return (
            <button key={o} type="button" role="radio" aria-checked={pick === j} disabled={checked} className="sd-qz__o" data-res={res} onClick={() => { setPick(j); if (checkOnPick) check(j) }}>
              {o}
              {res === 'right' && <svg viewBox="0 0 16 16" aria-hidden><path d="m3.5 8.5 3 3 6-7" /></svg>}
              {res === 'wrong' && <svg viewBox="0 0 16 16" aria-hidden><path d="m4.5 4.5 7 7m0-7-7 7" /></svg>}
            </button>
          )
        })}
      </div>
      {checked && <div className="sd-qz__why" role="status"><b>{pick === q.answer ? 'Correct' : 'Incorrect'}</b>{q.why}</div>}
      {checked ? <button type="button" className="sd-qz__btn" onClick={next}>{i + 1 >= questions.length ? 'See score' : 'Next'}</button> : !checkOnPick && <button type="button" className="sd-qz__btn" disabled={pick === null} onClick={() => check()}>Check</button>}
    </div>
  )
}

.sd-qz { --bg: #1c1c1c; --fg: #f6f6f6; --mute: #8e8e8e; --line: rgb(255 255 255 / 0.1); --soft: rgb(255 255 255 / 0.07); --strong: #fafafa; --on: #111; 
  color: var(--fg); font-size: 14px; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
.sd-qz[data-fill='light'] { --bg: #fff; --fg: #121212; --mute: #6f6f6f; --line: rgb(0 0 0 / 0.09); --soft: rgb(0 0 0 / 0.05); --strong: #111; --on: #fff; }
.sd-qz button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-qz :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-qz .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sd-qz { width: min(100%, 320px); padding: 16px; border-radius: 22px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.sd-qz__prog { height: 4px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.sd-qz__prog i { display: block; height: 100%; background: var(--fg); transition: width 400ms cubic-bezier(0.3, 1, 0.4, 1); }
.sd-qz__n { margin: 12px 0 4px; font-size: 11.5px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.06em; }
.sd-qz__q { font-size: 16px; font-weight: 650; line-height: 1.35; animation: sd-qz-in 300ms ease; }
@keyframes sd-qz-in { from { opacity: 0; transform: translateX(12px); } }
.sd-qz__opts { display: grid; gap: 6px; margin-top: 14px; }
.sd-qz__o { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 12px; text-align: left; font-size: 13.5px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 160ms, background-color 160ms, opacity 200ms; }
.sd-qz__o:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--mute); }
.sd-qz__o[aria-checked='true'] { box-shadow: inset 0 0 0 1.5px var(--fg); }
.sd-qz__o:disabled { cursor: default; }
.sd-qz__o[data-res='right'] { background: var(--strong) !important; color: var(--on); box-shadow: none; }
.sd-qz__o[data-res='wrong'] { text-decoration: line-through; text-decoration-thickness: 1px; }
.sd-qz__o[data-res='dim'] { opacity: 0.45; }
.sd-qz__o svg { width: 16px; height: 16px; margin-left: auto; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: sd-qz-pop 320ms cubic-bezier(0.3, 1.7, 0.4, 1); }
@keyframes sd-qz-pop { from { transform: scale(0); } }
.sd-qz__why { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--soft); font-size: 12.5px; line-height: 1.45; animation: sd-qz-up 260ms ease; }
.sd-qz__why b { display: block; margin-bottom: 2px; }
@keyframes sd-qz-up { from { opacity: 0; transform: translateY(6px); } }
.sd-qz__btn { margin-top: 14px; width: 100%; height: 42px; border-radius: 12px; background: var(--strong) !important; color: var(--on) !important; font-weight: 600; font-size: 14px; }
.sd-qz__btn:disabled { opacity: 0.35; cursor: default; }
.sd-qz__done { text-align: center; padding: 16px 0 4px; }
.sd-qz__done b { display: block; font-size: 40px; font-weight: 650; letter-spacing: -0.03em; }
.sd-qz__done span { font-size: 13px; color: var(--mute); }
@media (prefers-reduced-motion: reduce) { .sd-qz *, .sd-qz *::before, .sd-qz *::after { animation: none !important; transition: none !important; } }