69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
interface SentenceReorderTestProps {
|
|
currentCard: any
|
|
shuffledWords: string[]
|
|
arrangedWords: string[]
|
|
reorderResult: boolean | null
|
|
onWordClick: (word: string) => void
|
|
onRemoveFromArranged: (word: string) => void
|
|
onCheckAnswer: () => void
|
|
onReset: () => void
|
|
onReportError: () => void
|
|
onNavigate: (direction: string) => void
|
|
currentCardIndex: number
|
|
totalCards: number
|
|
setModalImage: (image: string | null) => void
|
|
}
|
|
|
|
export const SentenceReorderTest: React.FC<SentenceReorderTestProps> = (props) => {
|
|
return (
|
|
<div className="text-center py-8">
|
|
<p>SentenceReorderTest 測驗組件</p>
|
|
<p>詞卡: {props.currentCard?.word}</p>
|
|
|
|
<div className="mb-4">
|
|
<p>可用詞語:</p>
|
|
<div className="flex flex-wrap gap-2 justify-center">
|
|
{props.shuffledWords.map((word, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => props.onWordClick(word)}
|
|
className="bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded"
|
|
>
|
|
{word}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<p>你的句子:</p>
|
|
<div className="flex flex-wrap gap-2 justify-center">
|
|
{props.arrangedWords.map((word, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => props.onRemoveFromArranged(word)}
|
|
className="bg-blue-200 hover:bg-blue-300 px-3 py-1 rounded"
|
|
>
|
|
{word}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-x-2">
|
|
<button
|
|
onClick={props.onCheckAnswer}
|
|
className="bg-green-500 text-white px-4 py-2 rounded"
|
|
>
|
|
檢查答案
|
|
</button>
|
|
<button
|
|
onClick={props.onReset}
|
|
className="bg-gray-500 text-white px-4 py-2 rounded"
|
|
>
|
|
重置
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |