Public Access
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import Tex from '../Tex'
|
|
import type { Question } from '../../types'
|
|
|
|
interface Props {
|
|
q: Question
|
|
value: string | null | undefined
|
|
onChange: (val: string) => void
|
|
locked?: boolean
|
|
graded?: boolean
|
|
}
|
|
|
|
export default function MultipleChoice({ q, value, onChange, locked, graded }: Props) {
|
|
return (
|
|
<div className="choices" role="radiogroup">
|
|
{(q.choices ?? []).map((c, i) => {
|
|
const isSelected = value === c.id
|
|
let cls = 'choice'
|
|
if (isSelected) cls += ' selected'
|
|
if (graded) {
|
|
if (c.id === q.answer) cls += ' correct'
|
|
else if (isSelected) cls += ' wrong'
|
|
}
|
|
return (
|
|
<button
|
|
key={c.id}
|
|
className={cls}
|
|
onClick={() => !locked && onChange(c.id)}
|
|
disabled={locked}
|
|
role="radio"
|
|
aria-checked={isSelected}
|
|
>
|
|
<span className="choice-marker" />
|
|
<span className="choice-key">{String.fromCharCode(65 + i)}</span>
|
|
<Tex>{c.text}</Tex>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|