dramaling-vocab-learning/frontend/components/learn-backup/learn/tests/VocabChoiceTest.tsx

31 lines
891 B
TypeScript

interface VocabChoiceTestProps {
currentCard: any
quizOptions: string[]
selectedAnswer: string | null
showResult: boolean
onAnswer: (answer: string) => void
onReportError: () => void
onNavigate: (direction: string) => void
currentCardIndex: number
totalCards: number
}
export const VocabChoiceTest: React.FC<VocabChoiceTestProps> = (props) => {
return (
<div className="text-center py-8">
<p>VocabChoiceTest </p>
<p>: {props.currentCard?.word}</p>
<div className="space-y-2">
{props.quizOptions.map((option, index) => (
<button
key={index}
onClick={() => props.onAnswer(option)}
className="block w-full bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded"
>
{option}
</button>
))}
</div>
</div>
)
}