diff --git a/src/components/PairWordCard.jsx b/src/components/PairWordCard.jsx index fb72510..b067725 100644 --- a/src/components/PairWordCard.jsx +++ b/src/components/PairWordCard.jsx @@ -84,9 +84,10 @@ function shuffle(arr) { } export default function PairWordCard({ card, onComplete }) { - const [selected, setSelected] = useState(null) // chosen but not yet confirmed - const [picked, setPicked] = useState(null) // confirmed answer - const [activeChip, setActiveChip] = useState(null) + const [selectedIds, setSelectedIds] = useState(new Set()) // toggled, not yet confirmed + const [confirmed, setConfirmed] = useState(false) // after Bestätigen + const [isCorrect, setIsCorrect] = useState(false) + const [activeChip, setActiveChip] = useState(null) const lang = card.lang || 'de' const native = lang === 'de' ? 'en' : 'de' @@ -113,17 +114,25 @@ export default function PairWordCard({ card, onComplete }) { } function handleSelect(opt) { - if (picked) return - setSelected(prev => prev?.id === opt.id ? null : opt) + if (confirmed) return + setSelectedIds(prev => { + const next = new Set(prev) + next.has(opt.id) ? next.delete(opt.id) : next.add(opt.id) + return next + }) } function handleConfirm() { - if (!selected || picked) return + if (selectedIds.size === 0 || confirmed) return setActiveChip(null) - setPicked(selected) - const r = selected.correct ? 'correct' : 'wrong' - if (selected.correct) triggerConfetti() - setTimeout(() => onComplete(r), 900) + const correctIds = new Set(options.filter(o => o.correct).map(o => o.id)) + const allCorrectSelected = [...correctIds].every(id => selectedIds.has(id)) + const noWrongSelected = [...selectedIds].every(id => correctIds.has(id)) + const ok = allCorrectSelected && noWrongSelected + setIsCorrect(ok) + setConfirmed(true) + if (ok) triggerConfetti() + setTimeout(() => onComplete(ok ? 'correct' : 'wrong'), 900) } return ( @@ -150,28 +159,27 @@ export default function PairWordCard({ card, onComplete }) {

{resolveSentence(sentence, card.placeholders, handleChipClick, activeChip?.id)}

- {hint && !picked && ( + {hint && !confirmed && (

{resolveSentence(hint, card.placeholders, null, null)}

)} -
{options.map((opt) => { const label = opt[lang] || opt.de || '…' const hint2 = opt[native] || null let cls = 'pair-option-btn' - if (picked) { - if (opt.id === picked.id) cls += opt.correct ? ' correct' : ' wrong' - else if (opt.correct) cls += ' correct' - } else if (selected?.id === opt.id) { + if (confirmed) { + if (selectedIds.has(opt.id)) cls += opt.correct ? ' correct' : ' wrong' + else if (opt.correct) cls += ' correct' + } else if (selectedIds.has(opt.id)) { cls += ' selected' } return ( -
- {picked && ( -

- {picked.correct + {confirmed && ( +

+ {isCorrect ? '✓ Richtig!' - : `✗ Richtig wäre: ${options.find(o => o.correct)?.[lang] || options.find(o => o.correct)?.de || '?'}` + : `✗ Richtig wären: ${options.filter(o => o.correct).map(o => o[lang] || o.de).join(', ')}` }

)} - {!picked && ( + {!confirmed && (