dramaling-vocab-learning/frontend/hooks/review/useTestAnswering.ts

159 lines
4.6 KiB
TypeScript

import { useState } from 'react'
// 答題狀態接口
interface TestAnsweringState {
selectedAnswer: string | null
showResult: boolean
fillAnswer: string
showHint: boolean
isFlipped: boolean
quizOptions: string[]
sentenceOptions: string[]
shuffledWords: string[]
arrangedWords: string[]
reorderResult: boolean | null
}
// Hook返回接口
interface UseTestAnsweringReturn extends TestAnsweringState {
// 基本狀態控制
setSelectedAnswer: (answer: string | null) => void
setShowResult: (show: boolean) => void
setFillAnswer: (answer: string) => void
setShowHint: (show: boolean) => void
setIsFlipped: (flipped: boolean) => void
// 題型選項管理
setQuizOptions: (options: string[]) => void
setSentenceOptions: (options: string[]) => void
// 重組題狀態管理
setShuffledWords: (words: string[]) => void
setArrangedWords: (words: string[]) => void
setReorderResult: (result: boolean | null) => void
// 重組題操作
addWordToArranged: (word: string) => void
removeWordFromArranged: (word: string) => void
resetReorderTest: (originalSentence: string) => void
// 重置所有狀態
resetAllAnsweringStates: () => void
// 答題檢查
checkVocabChoice: (correctAnswer: string) => boolean
checkSentenceFill: (correctAnswer: string) => boolean
checkSentenceReorder: (correctSentence: string) => boolean
}
export const useTestAnswering = (): UseTestAnsweringReturn => {
// 基本答題狀態
const [selectedAnswer, setSelectedAnswer] = useState<string | null>(null)
const [showResult, setShowResult] = useState(false)
const [fillAnswer, setFillAnswer] = useState('')
const [showHint, setShowHint] = useState(false)
const [isFlipped, setIsFlipped] = useState(false)
// 題型選項狀態
const [quizOptions, setQuizOptions] = useState<string[]>([])
const [sentenceOptions, setSentenceOptions] = useState<string[]>([])
// 例句重組狀態
const [shuffledWords, setShuffledWords] = useState<string[]>([])
const [arrangedWords, setArrangedWords] = useState<string[]>([])
const [reorderResult, setReorderResult] = useState<boolean | null>(null)
// 重組題操作:添加詞到排列中
const addWordToArranged = (word: string): void => {
setShuffledWords(prev => prev.filter(w => w !== word))
setArrangedWords(prev => [...prev, word])
setReorderResult(null)
}
// 重組題操作:從排列中移除詞
const removeWordFromArranged = (word: string): void => {
setArrangedWords(prev => prev.filter(w => w !== word))
setShuffledWords(prev => [...prev, word])
setReorderResult(null)
}
// 重組題操作:重置測驗
const resetReorderTest = (originalSentence: string): void => {
const words = originalSentence.split(/\s+/).filter(word => word.length > 0)
const shuffled = [...words].sort(() => Math.random() - 0.5)
setShuffledWords(shuffled)
setArrangedWords([])
setReorderResult(null)
}
// 重置所有答題狀態
const resetAllAnsweringStates = (): void => {
setSelectedAnswer(null)
setShowResult(false)
setFillAnswer('')
setShowHint(false)
setIsFlipped(false)
setQuizOptions([])
setSentenceOptions([])
setShuffledWords([])
setArrangedWords([])
setReorderResult(null)
}
// 檢查詞彙選擇題答案
const checkVocabChoice = (correctAnswer: string): boolean => {
return selectedAnswer === correctAnswer
}
// 檢查例句填空題答案
const checkSentenceFill = (correctAnswer: string): boolean => {
return fillAnswer.toLowerCase().trim() === correctAnswer.toLowerCase()
}
// 檢查例句重組題答案
const checkSentenceReorder = (correctSentence: string): boolean => {
const userSentence = arrangedWords.join(' ')
return userSentence.toLowerCase().trim() === correctSentence.toLowerCase().trim()
}
return {
// 狀態
selectedAnswer,
showResult,
fillAnswer,
showHint,
isFlipped,
quizOptions,
sentenceOptions,
shuffledWords,
arrangedWords,
reorderResult,
// 基本狀態控制
setSelectedAnswer,
setShowResult,
setFillAnswer,
setShowHint,
setIsFlipped,
// 題型選項管理
setQuizOptions,
setSentenceOptions,
// 重組題狀態管理
setShuffledWords,
setArrangedWords,
setReorderResult,
// 重組題操作
addWordToArranged,
removeWordFromArranged,
resetReorderTest,
// 工具函數
resetAllAnsweringStates,
checkVocabChoice,
checkSentenceFill,
checkSentenceReorder
}
}