feat: 错题练习模式添加重新答题功能
- 在QuestionCard组件中添加重新答题按钮 - 仅在错题练习模式(mode=wrong)且答案错误时显示 - 点击后重置当前题目状态,清空答案,允许重新作答 - 添加ReloadOutlined图标提升用户体验 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
72d3ca0660
commit
42c54ec90a
@ -1,5 +1,6 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Space, Tag, Typography, Radio, Checkbox, Input, Button } from 'antd'
|
||||
import { ReloadOutlined } from '@ant-design/icons'
|
||||
import type { Question, AnswerResult as AnswerResultType } from '../types/question'
|
||||
import AnswerResult from './AnswerResult'
|
||||
import styles from '../pages/Question.module.less'
|
||||
@ -17,6 +18,8 @@ interface QuestionCardProps {
|
||||
onAnswerChange: (answer: string | string[]) => void
|
||||
onSubmit: () => void
|
||||
onNext: () => void
|
||||
onRetry?: () => void // 新增:重新答题回调
|
||||
mode?: string // 新增:答题模式(用于判断是否是错题练习)
|
||||
}
|
||||
|
||||
const QuestionCard: React.FC<QuestionCardProps> = ({
|
||||
@ -29,6 +32,8 @@ const QuestionCard: React.FC<QuestionCardProps> = ({
|
||||
onAnswerChange,
|
||||
onSubmit,
|
||||
onNext,
|
||||
onRetry,
|
||||
mode,
|
||||
}) => {
|
||||
const [fillAnswers, setFillAnswers] = useState<string[]>([])
|
||||
|
||||
@ -187,9 +192,23 @@ const QuestionCard: React.FC<QuestionCardProps> = ({
|
||||
提交答案
|
||||
</Button>
|
||||
) : (
|
||||
<Button type="primary" size="large" block onClick={onNext} loading={autoNextLoading}>
|
||||
{autoNextLoading ? '正在跳转到下一题...' : '下一题'}
|
||||
</Button>
|
||||
<Space direction="vertical" style={{ width: '100%' }} size="middle">
|
||||
{/* 如果是错题练习模式且答案错误,显示重新答题按钮 */}
|
||||
{mode === 'wrong' && !answerResult?.correct && onRetry && (
|
||||
<Button
|
||||
type="default"
|
||||
size="large"
|
||||
block
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={onRetry}
|
||||
>
|
||||
重新答题
|
||||
</Button>
|
||||
)}
|
||||
<Button type="primary" size="large" block onClick={onNext} loading={autoNextLoading}>
|
||||
{autoNextLoading ? '正在跳转到下一题...' : '下一题'}
|
||||
</Button>
|
||||
</Space>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -452,6 +452,23 @@ const QuestionPage: React.FC = () => {
|
||||
loadQuestions(typeParam || undefined);
|
||||
};
|
||||
|
||||
// 重新答题(错题练习模式)
|
||||
const handleRetryQuestion = () => {
|
||||
// 重置当前题目的答题状态
|
||||
setShowResult(false);
|
||||
setAnswerResult(null);
|
||||
|
||||
// 重置答案
|
||||
if (currentQuestion) {
|
||||
setSelectedAnswer(
|
||||
currentQuestion.type === "multiple-selection" ? [] : ""
|
||||
);
|
||||
}
|
||||
|
||||
// 滚动到页面顶部
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
{/* 固定顶栏:包含导航和进度 */}
|
||||
@ -503,6 +520,8 @@ const QuestionPage: React.FC = () => {
|
||||
onAnswerChange={setSelectedAnswer}
|
||||
onSubmit={handleSubmit}
|
||||
onNext={handleNext}
|
||||
onRetry={handleRetryQuestion}
|
||||
mode={searchParams.get("mode") || undefined}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user