diff --git a/web/src/pages/Question.tsx b/web/src/pages/Question.tsx index 1b18a10..f212984 100644 --- a/web/src/pages/Question.tsx +++ b/web/src/pages/Question.tsx @@ -33,6 +33,10 @@ const QuestionPage: React.FC = () => { const [drawerVisible, setDrawerVisible] = useState(false); const [answeredStatus, setAnsweredStatus] = useState>(new Map()); + // 存储每道题的用户答案和答题结果 + const [userAnswers, setUserAnswers] = useState>(new Map()); + const [questionResults, setQuestionResults] = useState>(new Map()); + // 设置弹窗 const [settingsVisible, setSettingsVisible] = useState(false); @@ -87,6 +91,8 @@ const QuestionPage: React.FC = () => { const saveProgress = (index: number, correct: number, wrong: number, statusMap?: Map) => { const key = getStorageKey(); const answeredStatusObj: Record = {}; + const userAnswersObj: Record = {}; + const questionResultsObj: Record = {}; // 将 Map 转换为普通对象以便 JSON 序列化 const mapToSave = statusMap || answeredStatus; @@ -94,6 +100,14 @@ const QuestionPage: React.FC = () => { answeredStatusObj[key] = value; }); + userAnswers.forEach((value, key) => { + userAnswersObj[key] = value; + }); + + questionResults.forEach((value, key) => { + questionResultsObj[key] = value; + }); + localStorage.setItem( key, JSON.stringify({ @@ -101,6 +115,8 @@ const QuestionPage: React.FC = () => { correctCount: correct, wrongCount: wrong, answeredStatus: answeredStatusObj, + userAnswers: userAnswersObj, + questionResults: questionResultsObj, timestamp: Date.now(), }) ); @@ -126,6 +142,24 @@ const QuestionPage: React.FC = () => { setAnsweredStatus(statusMap); } + // 恢复用户答案 + if (progress.userAnswers) { + const answersMap = new Map(); + Object.entries(progress.userAnswers).forEach(([index, answer]) => { + answersMap.set(Number(index), answer as string | string[]); + }); + setUserAnswers(answersMap); + } + + // 恢复答题结果 + if (progress.questionResults) { + const resultsMap = new Map(); + Object.entries(progress.questionResults).forEach(([index, result]) => { + resultsMap.set(Number(index), result as AnswerResult); + }); + setQuestionResults(resultsMap); + } + return progress.currentIndex || 0; } catch (e) { console.error("恢复进度失败", e); @@ -252,6 +286,15 @@ const QuestionPage: React.FC = () => { setAnswerResult(res.data); setShowResult(true); + // 保存用户答案和结果到 Map + const newAnswersMap = new Map(userAnswers); + newAnswersMap.set(currentIndex, selectedAnswer); + setUserAnswers(newAnswersMap); + + const newResultsMap = new Map(questionResults); + newResultsMap.set(currentIndex, res.data); + setQuestionResults(newResultsMap); + // 更新答题状态 const newStatusMap = new Map(answeredStatus); newStatusMap.set(currentIndex, res.data.correct); @@ -356,11 +399,24 @@ const QuestionPage: React.FC = () => { if (index >= 0 && index < allQuestions.length) { setCurrentIndex(index); setCurrentQuestion(allQuestions[index]); - setSelectedAnswer( - allQuestions[index].type === "multiple-selection" ? [] : "" - ); - setShowResult(false); - setAnswerResult(null); + + // 检查是否有保存的答案和结果 + const savedAnswer = userAnswers.get(index); + const savedResult = questionResults.get(index); + + if (savedAnswer !== undefined && savedResult !== undefined) { + // 恢复之前的答案和结果 + setSelectedAnswer(savedAnswer); + setAnswerResult(savedResult); + setShowResult(true); + } else { + // 没有答案,重置状态 + setSelectedAnswer( + allQuestions[index].type === "multiple-selection" ? [] : "" + ); + setShowResult(false); + setAnswerResult(null); + } // 保存进度 saveProgress(index, correctCount, wrongCount);