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)}
)} -- {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 && (