72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import React, { useState, useCallback, memo } from 'react'
|
||
import VoiceRecorder from '@/components/VoiceRecorder'
|
||
import {
|
||
ErrorReportButton,
|
||
TestHeader
|
||
} from '@/components/review/shared'
|
||
import { BaseReviewProps } from '@/types/review'
|
||
|
||
interface SentenceSpeakingTestProps extends BaseReviewProps {
|
||
exampleImage?: string
|
||
onImageClick?: (image: string) => void
|
||
}
|
||
|
||
const SentenceSpeakingTestComponent: React.FC<SentenceSpeakingTestProps> = ({
|
||
cardData,
|
||
exampleImage,
|
||
onAnswer,
|
||
onReportError,
|
||
onImageClick,
|
||
disabled = false
|
||
}) => {
|
||
const [showResult, setShowResult] = useState(false)
|
||
|
||
const handleRecordingComplete = useCallback(() => {
|
||
if (disabled || showResult) return
|
||
setShowResult(true)
|
||
onAnswer(cardData.example) // 語音測驗通常都算正確
|
||
}, [disabled, showResult, cardData.example, onAnswer])
|
||
|
||
return (
|
||
<div className="relative">
|
||
{/* 錯誤回報按鈕 */}
|
||
<div className="flex justify-end mb-2">
|
||
<ErrorReportButton onClick={onReportError} />
|
||
</div>
|
||
|
||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||
{/* 標題區 */}
|
||
<TestHeader
|
||
title="例句口說"
|
||
difficultyLevel={cardData.difficultyLevel}
|
||
/>
|
||
|
||
{/* VoiceRecorder 組件區域 */}
|
||
<div className="w-full">
|
||
<VoiceRecorder
|
||
targetText={cardData.example}
|
||
targetTranslation={cardData.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>
|
||
)
|
||
}
|
||
|
||
export const SentenceSpeakingTest = memo(SentenceSpeakingTestComponent)
|
||
SentenceSpeakingTest.displayName = 'SentenceSpeakingTest' |