forked from wangziqi/gongxue-base
656 lines
29 KiB
TypeScript
656 lines
29 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
||
import Taro, { useRouter } from '@tarojs/taro';
|
||
import { Button, Text, Textarea, View } from '@tarojs/components';
|
||
import { loadCollectionQuestions, loadQuestions } from '@/services/catalog';
|
||
import {
|
||
createPracticeSession,
|
||
loadPracticeSessionDetail,
|
||
type SubAnswerInput,
|
||
type SubAnswerResult,
|
||
submitAnswer,
|
||
submitPracticeSession,
|
||
toggleQuestionFavorite,
|
||
type AnswerResult,
|
||
type PracticeReport,
|
||
type PracticeSession,
|
||
type QuestionItem,
|
||
} from '@/services/learning';
|
||
import { submitFeedback } from '@/services/profile';
|
||
import { getStorage, setStorage } from '@/services/storage';
|
||
import '../student.css';
|
||
|
||
type AnswerState = {
|
||
selectedOptions: string[];
|
||
answerText: string;
|
||
isCorrect: boolean | null;
|
||
answeredAt?: string;
|
||
selfJudged?: boolean;
|
||
subAnswers?: SubAnswerInput[];
|
||
subResults?: SubAnswerResult[];
|
||
};
|
||
|
||
type LocalSubAnswer = {
|
||
selectedOptions: string[];
|
||
answerText: string;
|
||
selfJudgedCorrect?: boolean;
|
||
};
|
||
|
||
function plainOption(option: unknown, index: number) {
|
||
if (typeof option === 'string') return option;
|
||
if (option && typeof option === 'object') {
|
||
const data = option as Record<string, unknown>;
|
||
return String(data.text || data.content || data.label || data.value || `选项 ${index + 1}`);
|
||
}
|
||
return `选项 ${index + 1}`;
|
||
}
|
||
|
||
function isObjectiveQuestion(question?: QuestionItem | null) {
|
||
if (!question) return false;
|
||
return Array.isArray(question.options) && question.options.length > 0;
|
||
}
|
||
|
||
function isMultiQuestion(question?: QuestionItem | null) {
|
||
if (!question) return false;
|
||
const type = String(question.type || '').toLowerCase();
|
||
return type.includes('multi') || (question.correctOptionIndices?.length || 0) > 1;
|
||
}
|
||
|
||
function subQuestionId(subQuestion: Record<string, unknown>, index: number) {
|
||
const raw = subQuestion.id || subQuestion.subQuestionId || subQuestion.key;
|
||
return typeof raw === 'string' && raw.trim() ? raw.trim() : `sub_${index + 1}`;
|
||
}
|
||
|
||
function subQuestionType(subQuestion: Record<string, unknown>) {
|
||
return String(subQuestion.type || 'choice').toLowerCase();
|
||
}
|
||
|
||
function subQuestionOptions(subQuestion: Record<string, unknown>) {
|
||
return Array.isArray(subQuestion.options) ? subQuestion.options : [];
|
||
}
|
||
|
||
function isObjectiveSubQuestion(subQuestion: Record<string, unknown>) {
|
||
const type = subQuestionType(subQuestion);
|
||
return ['choice', 'multi', 'judge', 'image'].includes(type) || subQuestionOptions(subQuestion).length > 0;
|
||
}
|
||
|
||
function isMultiSubQuestion(subQuestion: Record<string, unknown>) {
|
||
const type = subQuestionType(subQuestion);
|
||
const correct = subQuestion.correctOptionIndices;
|
||
return type.includes('multi') || (Array.isArray(correct) && correct.length > 1);
|
||
}
|
||
|
||
function answerStorageKey(sessionId: string) {
|
||
return `tiku:practice:${sessionId}:answers`;
|
||
}
|
||
|
||
function indexStorageKey(sessionId: string) {
|
||
return `tiku:practice:${sessionId}:index`;
|
||
}
|
||
|
||
function formatDuration(seconds: number) {
|
||
const safeSeconds = Math.max(0, Math.trunc(seconds));
|
||
const minutes = Math.floor(safeSeconds / 60);
|
||
const rest = safeSeconds % 60;
|
||
return `${String(minutes).padStart(2, '0')}:${String(rest).padStart(2, '0')}`;
|
||
}
|
||
|
||
function answerLabel(state?: AnswerState) {
|
||
if (!state) return '未答';
|
||
if (state.isCorrect === true) return '正确';
|
||
if (state.isCorrect === false) return '错误';
|
||
return state.selfJudged ? '已自评' : '已答';
|
||
}
|
||
|
||
function answersFromBackend(answers?: Record<string, AnswerResult>): Record<string, AnswerState> {
|
||
const result: Record<string, AnswerState> = {};
|
||
for (const [questionId, answer] of Object.entries(answers || {})) {
|
||
result[questionId] = {
|
||
selectedOptions: Array.isArray(answer.selectedOptions) ? answer.selectedOptions : [],
|
||
answerText: answer.answerText || '',
|
||
isCorrect: answer.isCorrect,
|
||
answeredAt: answer.answeredAt,
|
||
selfJudged: answer.selfJudged,
|
||
subAnswers: Array.isArray(answer.answerPayload?.subAnswers) ? answer.answerPayload.subAnswers : [],
|
||
subResults: Array.isArray(answer.answerPayload?.subResults) ? answer.answerPayload.subResults : answer.subResults || [],
|
||
};
|
||
}
|
||
return result;
|
||
}
|
||
|
||
function subAnswerStateFrom(answer?: AnswerState): Record<string, LocalSubAnswer> {
|
||
const result: Record<string, LocalSubAnswer> = {};
|
||
for (const item of answer?.subAnswers || []) {
|
||
result[item.subQuestionId] = {
|
||
selectedOptions: Array.isArray(item.selectedOptions) ? item.selectedOptions : [],
|
||
answerText: item.answerText || '',
|
||
selfJudgedCorrect: item.selfJudgedCorrect,
|
||
};
|
||
}
|
||
if (!Object.keys(result).length) {
|
||
for (const item of answer?.subResults || []) {
|
||
result[item.subQuestionId] = {
|
||
selectedOptions: Array.isArray(item.selectedOptions) ? item.selectedOptions : [],
|
||
answerText: item.answerText || '',
|
||
selfJudgedCorrect: item.selfJudged ? item.isCorrect === true : undefined,
|
||
};
|
||
}
|
||
}
|
||
return result;
|
||
}
|
||
|
||
function secondsUntil(value?: string | null) {
|
||
if (!value) return null;
|
||
const parsed = new Date(value).getTime();
|
||
if (!Number.isFinite(parsed)) return null;
|
||
return Math.max(0, Math.ceil((parsed - Date.now()) / 1000));
|
||
}
|
||
|
||
export default function StudentPracticePage() {
|
||
const router = useRouter();
|
||
const params = router.params || {};
|
||
const [session, setSession] = useState<PracticeSession | null>(null);
|
||
const [questions, setQuestions] = useState<QuestionItem[]>([]);
|
||
const [index, setIndex] = useState(0);
|
||
const [selected, setSelected] = useState<string[]>([]);
|
||
const [answerText, setAnswerText] = useState('');
|
||
const [subAnswerById, setSubAnswerById] = useState<Record<string, LocalSubAnswer>>({});
|
||
const [feedbackText, setFeedbackText] = useState('');
|
||
const [answerByQuestion, setAnswerByQuestion] = useState<Record<string, AnswerState>>({});
|
||
const [favoriteByQuestion, setFavoriteByQuestion] = useState<Record<string, boolean>>({});
|
||
const [showExplanation, setShowExplanation] = useState(false);
|
||
const [completed, setCompleted] = useState(false);
|
||
const [timeLeft, setTimeLeft] = useState<number | null>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [report, setReport] = useState<PracticeReport | null>(null);
|
||
const [error, setError] = useState('');
|
||
|
||
useEffect(() => {
|
||
const practiceSessionId = params.practiceSessionId || undefined;
|
||
const collectionId = params.collectionId || undefined;
|
||
const body = {
|
||
blueprintId: params.blueprintId || undefined,
|
||
collectionId,
|
||
entryId: params.entryId || undefined,
|
||
contentNodeId: params.contentNodeId || undefined,
|
||
mode: params.mode || 'sequential',
|
||
questionLimit: 50,
|
||
};
|
||
|
||
if (practiceSessionId) {
|
||
loadPracticeSessionDetail(practiceSessionId)
|
||
.then(payload => {
|
||
const nextSession = payload.item;
|
||
const backendAnswers = answersFromBackend(nextSession.answersByQuestion);
|
||
setSession(nextSession);
|
||
setQuestions(nextSession.questions || []);
|
||
setAnswerByQuestion(backendAnswers);
|
||
const savedIndex = getStorage<number>(indexStorageKey(nextSession.id));
|
||
const firstUnanswered = (nextSession.questionIds || []).findIndex(questionId => !backendAnswers[questionId]);
|
||
setIndex(typeof savedIndex === 'number' ? savedIndex : Math.max(0, firstUnanswered));
|
||
const remaining = secondsUntil(nextSession.expiresAt);
|
||
if (remaining !== null) setTimeLeft(remaining);
|
||
if (nextSession.status === 'finished') setCompleted(true);
|
||
})
|
||
.catch(nextError => setError(nextError instanceof Error ? nextError.message : '练习恢复失败'))
|
||
.finally(() => setLoading(false));
|
||
return;
|
||
}
|
||
|
||
createPracticeSession(body)
|
||
.then(async payload => {
|
||
const nextSession = payload.item;
|
||
setSession(nextSession);
|
||
if (nextSession.durationMinutes) setTimeLeft(nextSession.durationMinutes * 60);
|
||
const savedIndex = getStorage<number>(indexStorageKey(nextSession.id));
|
||
const savedAnswers = getStorage<Record<string, AnswerState>>(answerStorageKey(nextSession.id));
|
||
if (savedAnswers) setAnswerByQuestion(savedAnswers);
|
||
if (typeof savedIndex === 'number') setIndex(savedIndex);
|
||
const questionPayload = collectionId
|
||
? await loadCollectionQuestions(collectionId, 300)
|
||
: await loadQuestions({
|
||
entryId: body.entryId,
|
||
contentNodeId: body.contentNodeId,
|
||
questionIds: nextSession.questionIds,
|
||
limit: Math.max(nextSession.questionIds?.length || 0, 50),
|
||
});
|
||
const byId = new Map((questionPayload.items || []).map(item => [item.id, item]));
|
||
const ordered = (nextSession.questionIds || []).map(id => byId.get(id)).filter(Boolean) as QuestionItem[];
|
||
setQuestions(ordered.length ? ordered : questionPayload.items || []);
|
||
})
|
||
.catch(nextError => setError(nextError instanceof Error ? nextError.message : '练习创建失败'))
|
||
.finally(() => setLoading(false));
|
||
}, []);
|
||
|
||
const current = questions[index];
|
||
const options = useMemo(() => Array.isArray(current?.options) ? current.options : [], [current]);
|
||
const subQuestions = useMemo(
|
||
() => (Array.isArray(current?.subQuestions) ? current.subQuestions : []) as Record<string, unknown>[],
|
||
[current],
|
||
);
|
||
const hasCompositeSubQuestions = subQuestions.length > 0;
|
||
const answerState = current ? answerByQuestion[current.id] : undefined;
|
||
const isSubmitted = !!answerState;
|
||
const answeredCount = Object.keys(answerByQuestion).length;
|
||
const correctCount = Object.values(answerByQuestion).filter(item => item.isCorrect === true).length;
|
||
const wrongCount = Object.values(answerByQuestion).filter(item => item.isCorrect === false).length;
|
||
const progressPercent = questions.length ? Math.round((answeredCount / questions.length) * 100) : 0;
|
||
|
||
useEffect(() => {
|
||
if (!session) return;
|
||
setStorage(indexStorageKey(session.id), index);
|
||
}, [index, session?.id]);
|
||
|
||
useEffect(() => {
|
||
if (!session) return;
|
||
setStorage(answerStorageKey(session.id), answerByQuestion);
|
||
}, [answerByQuestion, session?.id]);
|
||
|
||
useEffect(() => {
|
||
if (!current) return;
|
||
const state = answerByQuestion[current.id];
|
||
setSelected(state?.selectedOptions || []);
|
||
setAnswerText(state?.answerText || '');
|
||
setSubAnswerById(subAnswerStateFrom(state));
|
||
setFeedbackText('');
|
||
setShowExplanation(!!state);
|
||
}, [current?.id]);
|
||
|
||
useEffect(() => {
|
||
if (timeLeft === null || report || completed) return;
|
||
if (timeLeft <= 0) {
|
||
void handleSubmitSession(true);
|
||
return;
|
||
}
|
||
const timer = setTimeout(() => setTimeLeft(prev => (prev === null ? null : Math.max(0, prev - 1))), 1000);
|
||
return () => clearTimeout(timer);
|
||
}, [timeLeft, report, completed]);
|
||
|
||
function rememberAnswer(
|
||
questionId: string,
|
||
result: AnswerResult | { isCorrect: boolean | null; answeredAt?: string; selfJudged?: boolean },
|
||
nextSelected = selected,
|
||
nextAnswerText = answerText,
|
||
) {
|
||
const nextState: AnswerState = {
|
||
selectedOptions: [...nextSelected],
|
||
answerText: nextAnswerText,
|
||
isCorrect: result.isCorrect,
|
||
answeredAt: 'answeredAt' in result ? result.answeredAt : undefined,
|
||
selfJudged: 'selfJudged' in result ? result.selfJudged : undefined,
|
||
subAnswers: 'answerPayload' in result && Array.isArray(result.answerPayload?.subAnswers) ? result.answerPayload.subAnswers : undefined,
|
||
subResults: 'subResults' in result && Array.isArray(result.subResults)
|
||
? result.subResults
|
||
: 'answerPayload' in result && Array.isArray(result.answerPayload?.subResults)
|
||
? result.answerPayload.subResults
|
||
: undefined,
|
||
};
|
||
setAnswerByQuestion(prev => ({ ...prev, [questionId]: nextState }));
|
||
setShowExplanation(true);
|
||
}
|
||
|
||
function toggleOption(optionIndex: number) {
|
||
if (isSubmitted) return;
|
||
const value = String(optionIndex);
|
||
const nextSelected = selected.includes(value) ? selected.filter(item => item !== value) : [...selected, value];
|
||
setSelected(nextSelected);
|
||
if (current && !isMultiQuestion(current) && nextSelected.length === 1) {
|
||
void handleSubmit(nextSelected);
|
||
}
|
||
}
|
||
|
||
function updateSubAnswer(subQuestionId: string, patch: Partial<LocalSubAnswer>) {
|
||
setSubAnswerById(prev => {
|
||
const currentState = prev[subQuestionId] || { selectedOptions: [], answerText: '' };
|
||
return {
|
||
...prev,
|
||
[subQuestionId]: {
|
||
...currentState,
|
||
...patch,
|
||
},
|
||
};
|
||
});
|
||
}
|
||
|
||
function toggleSubOption(subQuestion: Record<string, unknown>, subQuestionIndex: number, optionIndex: number) {
|
||
if (isSubmitted) return;
|
||
const id = subQuestionId(subQuestion, subQuestionIndex);
|
||
const value = String(optionIndex);
|
||
const currentState = subAnswerById[id] || { selectedOptions: [], answerText: '' };
|
||
const nextSelected = currentState.selectedOptions.includes(value)
|
||
? currentState.selectedOptions.filter(item => item !== value)
|
||
: isMultiSubQuestion(subQuestion)
|
||
? [...currentState.selectedOptions, value]
|
||
: [value];
|
||
updateSubAnswer(id, { selectedOptions: nextSelected });
|
||
}
|
||
|
||
function buildSubAnswers() {
|
||
return subQuestions
|
||
.map((subQuestion, subQuestionIndex) => {
|
||
const id = subQuestionId(subQuestion, subQuestionIndex);
|
||
const state = subAnswerById[id] || { selectedOptions: [], answerText: '' };
|
||
const objective = isObjectiveSubQuestion(subQuestion);
|
||
return {
|
||
subQuestionId: id,
|
||
selectedOptions: objective ? state.selectedOptions : [],
|
||
answerText: objective ? '' : state.answerText,
|
||
selfJudgedCorrect: objective ? undefined : state.selfJudgedCorrect,
|
||
};
|
||
})
|
||
.filter(item => item.selectedOptions.length || item.answerText.trim() || item.selfJudgedCorrect !== undefined);
|
||
}
|
||
|
||
async function handleSubmit(nextSelected = selected, selfCorrect?: boolean) {
|
||
if (!session || !current) return;
|
||
if (hasCompositeSubQuestions) {
|
||
try {
|
||
const subAnswers = buildSubAnswers();
|
||
if (!subAnswers.length) {
|
||
setError('请至少完成一个子题后再提交。');
|
||
return;
|
||
}
|
||
const payload = await submitAnswer({
|
||
practiceSessionId: session.id,
|
||
questionId: current.id,
|
||
subAnswers,
|
||
});
|
||
rememberAnswer(current.id, payload.item, [], '');
|
||
} catch (nextError) {
|
||
setError(nextError instanceof Error ? nextError.message : '提交失败');
|
||
}
|
||
return;
|
||
}
|
||
if (!isObjectiveQuestion(current) && selfCorrect !== undefined) {
|
||
try {
|
||
const payload = await submitAnswer({
|
||
practiceSessionId: session.id,
|
||
questionId: current.id,
|
||
selectedOptions: [],
|
||
answerText,
|
||
selfJudgedCorrect: selfCorrect,
|
||
});
|
||
rememberAnswer(current.id, payload.item);
|
||
} catch (nextError) {
|
||
setError(nextError instanceof Error ? nextError.message : '提交失败');
|
||
}
|
||
return;
|
||
}
|
||
try {
|
||
const payload = await submitAnswer({
|
||
practiceSessionId: session.id,
|
||
questionId: current.id,
|
||
selectedOptions: nextSelected,
|
||
answerText,
|
||
});
|
||
rememberAnswer(current.id, payload.item, nextSelected);
|
||
} catch (nextError) {
|
||
setError(nextError instanceof Error ? nextError.message : '提交失败');
|
||
}
|
||
}
|
||
|
||
function previousQuestion() {
|
||
setIndex(prev => Math.max(0, prev - 1));
|
||
setCompleted(false);
|
||
}
|
||
|
||
function nextQuestion() {
|
||
if (index >= questions.length - 1) {
|
||
setCompleted(true);
|
||
return;
|
||
}
|
||
setIndex(prev => Math.min(questions.length - 1, prev + 1));
|
||
setCompleted(false);
|
||
}
|
||
|
||
function jumpQuestion(nextIndex: number) {
|
||
setIndex(Math.max(0, Math.min(questions.length - 1, nextIndex)));
|
||
setCompleted(false);
|
||
}
|
||
|
||
async function handleFavorite() {
|
||
if (!current) return;
|
||
const nextFavorite = !favoriteByQuestion[current.id];
|
||
await toggleQuestionFavorite(current.id, nextFavorite)
|
||
.then(payload => {
|
||
setFavoriteByQuestion(prev => ({ ...prev, [current.id]: payload.favorite }));
|
||
Taro.showToast({ title: payload.favorite ? '已收藏' : '已取消', icon: 'success' });
|
||
})
|
||
.catch(nextError => setError(nextError instanceof Error ? nextError.message : '收藏失败'));
|
||
}
|
||
|
||
async function handleFeedback() {
|
||
if (!current || !feedbackText.trim()) {
|
||
setError('请先填写反馈内容。');
|
||
return;
|
||
}
|
||
try {
|
||
await submitFeedback({
|
||
questionId: current.id,
|
||
type: 'question_error',
|
||
title: '题目反馈',
|
||
description: feedbackText.trim(),
|
||
priority: 'normal',
|
||
});
|
||
setFeedbackText('');
|
||
Taro.showToast({ title: '已提交反馈', icon: 'success' });
|
||
} catch (nextError) {
|
||
setError(nextError instanceof Error ? nextError.message : '反馈提交失败');
|
||
}
|
||
}
|
||
|
||
async function handleSubmitSession(auto = false) {
|
||
if (!session) return;
|
||
if (!auto) {
|
||
const ok = await Taro.showModal({
|
||
title: '交卷',
|
||
content: `已答 ${answeredCount}/${questions.length}，确认交卷并生成练习报告？`,
|
||
confirmText: '交卷',
|
||
cancelText: '取消',
|
||
});
|
||
if (!ok.confirm) return;
|
||
}
|
||
try {
|
||
const payload = await submitPracticeSession(session.id);
|
||
setReport(payload.item || null);
|
||
setCompleted(true);
|
||
Taro.showToast({ title: '报告已生成', icon: 'success' });
|
||
} catch (nextError) {
|
||
setError(nextError instanceof Error ? nextError.message : '交卷失败');
|
||
}
|
||
}
|
||
|
||
function openReport() {
|
||
if (!session) return;
|
||
Taro.navigateTo({ url: `/pages/student/reports/index?practiceSessionId=${session.id}` });
|
||
}
|
||
|
||
function openVideo() {
|
||
if (!current) return;
|
||
Taro.navigateTo({ url: `/pages/student/video/index?questionId=${current.id}` });
|
||
}
|
||
|
||
function subResultFor(subQuestion: Record<string, unknown>, subQuestionIndex: number) {
|
||
const id = subQuestionId(subQuestion, subQuestionIndex);
|
||
return (answerState?.subResults || []).find(item => item.subQuestionId === id);
|
||
}
|
||
|
||
return (
|
||
<View className='student-page'>
|
||
<View className='student-topbar'>
|
||
<View className='student-title-block'>
|
||
<Text className='student-kicker'>{session ? `${index + 1}/${questions.length || session.questionCount}` : 'Practice'}</Text>
|
||
<Text className='student-title'>{session?.mode || '练习'}</Text>
|
||
<Text className='student-subtitle'>题目来自后端 session 快照，答题、交卷、错题和报告都以后端校验为准。</Text>
|
||
</View>
|
||
{timeLeft !== null ? <Text className='status-badge'>{formatDuration(timeLeft)}</Text> : null}
|
||
</View>
|
||
|
||
{session ? (
|
||
<View className='quiet-panel section-block'>
|
||
<View className='amount-row'>
|
||
<Text className='row-main'>进度 {answeredCount}/{questions.length}</Text>
|
||
<Text className='status-badge'>{progressPercent}%</Text>
|
||
</View>
|
||
<Text className='row-meta'>正确 {correctCount} · 错误 {wrongCount} · 未答 {Math.max(0, questions.length - answeredCount)} · {session.accessMode || 'access'}</Text>
|
||
{session.consumedFreeQuota ? <Text className='row-meta'>本次消耗免费题量 {session.consumedFreeQuota}</Text> : null}
|
||
</View>
|
||
) : null}
|
||
|
||
{report ? (
|
||
<View className='report-panel section-block'>
|
||
<Text className='metric-value'>{String(report.score)} / {String(report.totalScore)}</Text>
|
||
<Text className='metric-label'>正确率 {Math.round((report.accuracy || 0) * 100)}% · 已答 {report.answeredCount}/{report.totalQuestions}</Text>
|
||
<View className='toolbar'>
|
||
<Button className='primary-button' onClick={openReport}>查看报告</Button>
|
||
</View>
|
||
</View>
|
||
) : null}
|
||
|
||
{completed && !report ? (
|
||
<View className='report-panel section-block'>
|
||
<Text className='metric-value'>已完成本组练习</Text>
|
||
<Text className='metric-label'>已答 {answeredCount}/{questions.length} · 正确 {correctCount} · 错误 {wrongCount}</Text>
|
||
<View className='toolbar wrap'>
|
||
<Button className='primary-button' onClick={() => handleSubmitSession()}>生成报告</Button>
|
||
<Button className='secondary-button' onClick={() => jumpQuestion(0)}>重新查看</Button>
|
||
<Button className='secondary-button' onClick={() => Taro.navigateTo({ url: '/pages/student/review/index?type=wrong' })}>查看错题</Button>
|
||
</View>
|
||
</View>
|
||
) : null}
|
||
|
||
{loading ? <View className='empty-state'>练习加载中...</View> : null}
|
||
|
||
{current && !completed ? (
|
||
<View className='list-stack'>
|
||
<View className='quiet-panel'>
|
||
<View className='amount-row'>
|
||
<Text className='row-meta'>{current.typeLabel || current.type || '题目'}</Text>
|
||
<Text className='status-badge'>{answerLabel(answerState)}</Text>
|
||
</View>
|
||
<Text className='row-main'>{current.content || '未提供题干'}</Text>
|
||
{current.mediaUrl ? <Text className='row-meta break-text'>{current.mediaUrl}</Text> : null}
|
||
{hasCompositeSubQuestions ? <Text className='row-meta'>包含 {subQuestions.length} 个子题，请结合题干作答。</Text> : null}
|
||
</View>
|
||
{hasCompositeSubQuestions ? (
|
||
<View className='list-stack'>
|
||
{subQuestions.map((subQuestion, subQuestionIndex) => {
|
||
const id = subQuestionId(subQuestion, subQuestionIndex);
|
||
const localAnswer = subAnswerById[id] || { selectedOptions: [], answerText: '' };
|
||
const objective = isObjectiveSubQuestion(subQuestion);
|
||
const subOptions = subQuestionOptions(subQuestion);
|
||
const result = subResultFor(subQuestion, subQuestionIndex);
|
||
return (
|
||
<View className='quiet-panel composite-subquestion' key={id}>
|
||
<View className='amount-row'>
|
||
<Text className='row-meta'>第 {subQuestionIndex + 1} 小题 · {String(subQuestion.typeLabel || subQuestion.type || '子题')}</Text>
|
||
{result ? <Text className='status-badge'>{result.isCorrect === true ? '正确' : result.isCorrect === false ? '错误' : '已答'}</Text> : null}
|
||
</View>
|
||
<Text className='row-main'>{String(subQuestion.content || '未提供子题题干')}</Text>
|
||
{objective ? (
|
||
<View className='sub-option-list'>
|
||
{subOptions.map((option, optionIndex) => (
|
||
<View
|
||
className={`list-row ${localAnswer.selectedOptions.includes(String(optionIndex)) ? 'active' : ''}`}
|
||
key={`${id}-${optionIndex}`}
|
||
onClick={() => toggleSubOption(subQuestion, subQuestionIndex, optionIndex)}
|
||
>
|
||
<Text className='row-main'>{String.fromCharCode(65 + optionIndex)}. {plainOption(option, optionIndex)}</Text>
|
||
</View>
|
||
))}
|
||
</View>
|
||
) : (
|
||
<View>
|
||
<Textarea
|
||
className='textarea'
|
||
placeholder='请输入本小题答案，查看参考答案后可自评。'
|
||
value={localAnswer.answerText}
|
||
disabled={isSubmitted}
|
||
onInput={event => updateSubAnswer(id, { answerText: String(event.detail.value || '') })}
|
||
/>
|
||
{!isSubmitted ? (
|
||
<View className='toolbar wrap'>
|
||
<Button className={localAnswer.selfJudgedCorrect === true ? 'pill-button active' : 'pill-button'} onClick={() => updateSubAnswer(id, { selfJudgedCorrect: true })}>答对了</Button>
|
||
<Button className={localAnswer.selfJudgedCorrect === false ? 'pill-button warn' : 'pill-button'} onClick={() => updateSubAnswer(id, { selfJudgedCorrect: false })}>答错了</Button>
|
||
</View>
|
||
) : null}
|
||
</View>
|
||
)}
|
||
{showExplanation || isSubmitted ? (
|
||
<View className='sub-explanation'>
|
||
{result?.correctOptionIndices?.length ? <Text className='row-meta'>正确选项：{result.correctOptionIndices.map(item => String.fromCharCode(65 + item)).join('、')}</Text> : null}
|
||
{result?.correctOptionIndex !== null && result?.correctOptionIndex !== undefined ? <Text className='row-meta'>正确选项：{String.fromCharCode(65 + result.correctOptionIndex)}</Text> : null}
|
||
{result?.correctAnswerText ? <Text className='row-meta'>参考答案：{result.correctAnswerText}</Text> : null}
|
||
{result?.explanation ? <Text className='row-meta'>{result.explanation}</Text> : null}
|
||
</View>
|
||
) : null}
|
||
</View>
|
||
);
|
||
})}
|
||
</View>
|
||
) : options.length ? options.map((option, optionIndex) => (
|
||
<View
|
||
className={`list-row ${selected.includes(String(optionIndex)) ? 'active' : ''}`}
|
||
key={String(optionIndex)}
|
||
onClick={() => toggleOption(optionIndex)}
|
||
>
|
||
<Text className='row-main'>{String.fromCharCode(65 + optionIndex)}. {plainOption(option, optionIndex)}</Text>
|
||
</View>
|
||
)) : (
|
||
<View className='quiet-panel'>
|
||
<Textarea className='textarea' placeholder='请输入答案或先思考后查看参考答案' value={answerText} onInput={event => setAnswerText(String(event.detail.value || ''))} />
|
||
<View className='toolbar wrap'>
|
||
<Button className='secondary-button' onClick={() => setShowExplanation(true)}>查看答案</Button>
|
||
<Button className='primary-button' onClick={() => handleSubmit(selected, true)}>答对了</Button>
|
||
<Button className='danger-button' onClick={() => handleSubmit(selected, false)}>答错了</Button>
|
||
</View>
|
||
</View>
|
||
)}
|
||
{showExplanation || isSubmitted ? (
|
||
<View className='quiet-panel'>
|
||
{isSubmitted ? <Text className={answerState?.isCorrect ? 'success-text' : answerState?.isCorrect === false ? 'error-text' : 'row-meta'}>{answerLabel(answerState)}</Text> : null}
|
||
{answerState?.subResults?.length ? <Text className='row-meta'>子题正确 {answerState.subResults.filter(item => item.isCorrect === true).length}/{answerState.subResults.length}</Text> : null}
|
||
{current.answerText ? <Text className='row-main'>参考答案：{current.answerText}</Text> : null}
|
||
{current.correctOptionIndices?.length ? <Text className='row-meta'>正确选项：{current.correctOptionIndices.map(item => String.fromCharCode(65 + item)).join('、')}</Text> : null}
|
||
{current.correctOptionIndex !== null && current.correctOptionIndex !== undefined ? <Text className='row-meta'>正确选项：{String.fromCharCode(65 + current.correctOptionIndex)}</Text> : null}
|
||
{current.explanation ? <Text className='row-meta'>{current.explanation}</Text> : null}
|
||
</View>
|
||
) : null}
|
||
<View className='toolbar wrap'>
|
||
{isObjectiveQuestion(current) || hasCompositeSubQuestions ? <Button className='primary-button' onClick={() => handleSubmit()}>提交</Button> : null}
|
||
<Button className='secondary-button' onClick={previousQuestion}>上一题</Button>
|
||
<Button className='secondary-button' onClick={handleFavorite}>{favoriteByQuestion[current.id] ? '取消收藏' : '收藏'}</Button>
|
||
{current.hasVideoExplanation ? <Button className='secondary-button' onClick={openVideo}>视频</Button> : null}
|
||
<Button className='secondary-button' onClick={nextQuestion}>下一题</Button>
|
||
<Button className='secondary-button' onClick={() => handleSubmitSession()}>交卷</Button>
|
||
</View>
|
||
<View className='quiet-panel'>
|
||
<Text className='row-main'>题目反馈</Text>
|
||
<Textarea className='textarea' placeholder='题干、答案、解析或视频存在问题，可以在这里提交给后台处理。' value={feedbackText} onInput={event => setFeedbackText(String(event.detail.value || ''))} />
|
||
<View className='toolbar'>
|
||
<Button className='secondary-button' onClick={handleFeedback}>提交反馈</Button>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
) : !loading && !completed ? <View className='empty-state'>暂无题目。请确认后台已发布题目并配置集合或练习蓝图。</View> : null}
|
||
|
||
{questions.length ? (
|
||
<View className='section-block'>
|
||
<Text className='section-heading'>答题卡</Text>
|
||
<View className='answer-sheet'>
|
||
{questions.map((item, cardIndex) => (
|
||
<Button
|
||
key={item.id}
|
||
className={`answer-card ${cardIndex === index ? 'current' : ''} ${answerByQuestion[item.id] ? 'answered' : ''} ${answerByQuestion[item.id]?.isCorrect === false ? 'wrong' : ''}`}
|
||
onClick={() => jumpQuestion(cardIndex)}
|
||
>
|
||
{cardIndex + 1}
|
||
</Button>
|
||
))}
|
||
</View>
|
||
</View>
|
||
) : null}
|
||
{error ? <Text className='error-text'>{error}</Text> : null}
|
||
</View>
|
||
);
|
||
}
|