81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
import { useState } from 'react'
|
||
import VoiceRecorder from '@/components/VoiceRecorder'
|
||
|
||
interface SentenceSpeakingTestProps {
|
||
word: string
|
||
example: string
|
||
exampleTranslation: string
|
||
difficultyLevel: string
|
||
exampleImage?: string
|
||
onAnswer: (answer: string) => void
|
||
onReportError: () => void
|
||
onImageClick?: (image: string) => void
|
||
disabled?: boolean
|
||
}
|
||
|
||
export const SentenceSpeakingTest: React.FC<SentenceSpeakingTestProps> = ({
|
||
word,
|
||
example,
|
||
exampleTranslation,
|
||
difficultyLevel,
|
||
exampleImage,
|
||
onAnswer,
|
||
onReportError,
|
||
onImageClick,
|
||
disabled = false
|
||
}) => {
|
||
const [showResult, setShowResult] = useState(false)
|
||
|
||
const handleRecordingComplete = () => {
|
||
if (disabled || showResult) return
|
||
setShowResult(true)
|
||
onAnswer(example) // 語音測驗通常都算正確
|
||
}
|
||
|
||
return (
|
||
<div className="relative">
|
||
{/* 錯誤回報按鈕 */}
|
||
<div className="flex justify-end mb-2">
|
||
<button
|
||
onClick={onReportError}
|
||
className="px-3 py-2 rounded-md transition-colors text-gray-600 hover:text-gray-900"
|
||
>
|
||
🚩 回報錯誤
|
||
</button>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||
{/* 標題區 */}
|
||
<div className="flex justify-between items-start mb-6">
|
||
<h2 className="text-2xl font-bold text-gray-900">例句口說</h2>
|
||
<span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
|
||
{difficultyLevel}
|
||
</span>
|
||
</div>
|
||
|
||
{/* VoiceRecorder 組件區域 */}
|
||
<div className="w-full">
|
||
<VoiceRecorder
|
||
targetText={example}
|
||
targetTranslation={exampleTranslation}
|
||
exampleImage={exampleImage}
|
||
instructionText="請看例句圖片並大聲說出完整的例句："
|
||
onRecordingComplete={handleRecordingComplete}
|
||
/>
|
||
</div>
|
||
|
||
{/* 結果反饋區 */}
|
||
{showResult && (
|
||
<div className="mt-6 p-6 rounded-lg bg-blue-50 border border-blue-200 w-full">
|
||
<p className="text-blue-700 text-left text-xl font-semibold mb-2">
|
||
錄音完成！
|
||
</p>
|
||
<p className="text-gray-600 text-left">
|
||
系統正在評估你的發音...
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
} |