-
+
{option.label}
diff --git a/src/components/layout/quiz/DragQuizPanel.tsx b/src/components/layout/quiz/DragQuizPanel.tsx
index cfff795..4205abe 100644
--- a/src/components/layout/quiz/DragQuizPanel.tsx
+++ b/src/components/layout/quiz/DragQuizPanel.tsx
@@ -16,8 +16,15 @@ const DragQuizPanel = ({
blankSeparators,
value,
error,
+ feedbackType = 'error',
onChange,
+ onSubmit,
+ submitText = '提交',
+ disabled = false,
}: DragQuizPanelProps) => {
+ const isComplete = blanks.every((blank) =>
+ value.some((result) => result.blankId === blank.id && result.optionValue !== '')
+ )
// 跟踪之前的 visible 状态
const prevVisibleRef = useRef(visible)
@@ -62,7 +69,7 @@ const DragQuizPanel = ({
{filledValue ? (
{filledValue}
-
+ */}
) : (
____
@@ -87,48 +94,63 @@ const DragQuizPanel = ({
})}
{questionSuffix && {questionSuffix}}
{/* 答案反馈 */}
- {error && {error}
}
+ {error && (
+
+ {error}
+
+ )}
- {/* 使用 DragFill 组件 */}
-
+ {/* 选项区域 */}
+
(
+
+ {/* 提交按钮 */}
+
)
diff --git a/src/components/layout/quiz/ErrorCorrectionQuizPanel.tsx b/src/components/layout/quiz/ErrorCorrectionQuizPanel.tsx
new file mode 100644
index 0000000..dfefdf3
--- /dev/null
+++ b/src/components/layout/quiz/ErrorCorrectionQuizPanel.tsx
@@ -0,0 +1,208 @@
+import { useEffect, useRef, useState } from 'react'
+import { cn } from '@/lib/utils'
+import SuccessAlert from '@/components/layout/alert/success-alert'
+import type { ErrorCorrectionQuizPanelProps } from './types'
+
+/**
+ * ErrorCorrectionQuizPanel - 纠错题面板
+ * 横向展示多个文本区块，用户点击找出其中的错误
+ */
+const ErrorCorrectionQuizPanel = ({
+ visible,
+ zIndex = 10000,
+ title,
+ introText,
+ blocks,
+ errorCount,
+ onSubmit,
+ disabled = false,
+}: ErrorCorrectionQuizPanelProps) => {
+ // 记录用户点击过的区块
+ const [clickedBlocks, setClickedBlocks] = useState
- {!isUsed && (
-
- )}
-
- {option.label}
-
+ {option.label}
)}
renderBlank={(_blank) => {
- // 返回一个隐藏元素，实际的空白区域在题干中
- // 但需要通过 data-blank-id 让 DragFill 能找到它
return
}}
/>
+
+ )
+}
+
+export default ErrorCorrectionQuizPanel
diff --git a/src/components/layout/quiz/SortQuizPanel.tsx b/src/components/layout/quiz/SortQuizPanel.tsx
new file mode 100644
index 0000000..f3f02eb
--- /dev/null
+++ b/src/components/layout/quiz/SortQuizPanel.tsx
@@ -0,0 +1,276 @@
+import { useEffect, useState, useRef, useCallback } from 'react'
+import { cn } from '@/lib/utils'
+import type { SortQuizPanelProps } from './types'
+
+/**
+ * SortQuizPanel - 排序题面板
+ * 支持拖拽排序，用于让用户按正确顺序排列选项
+ */
+const SortQuizPanel = ({
+ visible,
+ zIndex = 10000,
+ title,
+ items,
+ correctOrder,
+ errorMessage,
+ successMessage,
+ onSubmit,
+ onError,
+ disabled = false,
+ submitText = '提交',
+}: SortQuizPanelProps) => {
+ // 当前排序状态
+ const [currentOrder, setCurrentOrder] = useState
+ {/* 题目区域 */}
+ onSubmit?.(true)}
+ />
+
+
+
+
+ {/* 文本区块（横向排列） */}
+
+ {/*
+
+ {feedbackBlock && (
+
+ 纠错
+
*/}
+
+
+
+ {title}
+
+ 已找到 {foundErrors} / {errorCount} 处错误
+
+
+ {introText && (
+
+ {introText}
+
+ )}
+
+ {/*
+ {feedbackStatus === 'found-error' ? '找到疑点：' : '不是疑点：'}
+ */}
+ {feedbackBlock.feedback}
+
+ )}
+
+ {blocks.map((block) => {
+ const status = getBlockStatus(block.id)
+ const isClicked = clickedBlocks.has(block.id)
+ const isWrongFlashing = wrongFlashBlockId === block.id
+
+ return (
+
+
+ {/* 完成提示 */}
+
+ {/* 区块本身 */}
+
+ )
+ })}
+ handleBlockClick(block.id)}
+ >
+ {isWrongFlashing && (
+
+
+ 再看看
+
+ )}
+ {status === 'found-error' && (
+
+ 已标记
+
+ )}
+ {status === 'wrong-selection' && (
+
+ 再看看
+
+ )}
+
+ {block.text}
+
+
+ )
+}
+
+export default SortQuizPanel
diff --git a/src/components/layout/quiz/index.ts b/src/components/layout/quiz/index.ts
index 6eb139f..5fd1e56 100644
--- a/src/components/layout/quiz/index.ts
+++ b/src/components/layout/quiz/index.ts
@@ -5,6 +5,8 @@ export { default as DragQuizPanel } from './DragQuizPanel'
export { default as BasketQuizPanel } from './BasketQuizPanel'
export { default as MatchQuizPanel } from './MatchQuizPanel'
export { default as SelectFillQuizPanel } from './SelectFillQuizPanel'
+export { default as SortQuizPanel } from './SortQuizPanel'
+export { default as ErrorCorrectionQuizPanel } from './ErrorCorrectionQuizPanel'
export type {
SingleChoiceQuizPanelProps,
MultipleChoiceQuizPanelProps,
@@ -15,6 +17,10 @@ export type {
SelectFillQuizPanelProps,
SelectFillBlank,
SelectFillResult,
+ SortQuizPanelProps,
+ SortQuizItem,
+ ErrorCorrectionQuizPanelProps,
+ ErrorCorrectionBlock,
} from './types'
// 保留旧组件以保持向后兼容
diff --git a/src/components/layout/quiz/types.ts b/src/components/layout/quiz/types.ts
index cad1433..4d1289b 100644
--- a/src/components/layout/quiz/types.ts
+++ b/src/components/layout/quiz/types.ts
@@ -37,6 +37,12 @@ export interface DragQuizPanelProps {
feedbackType?: 'success' | 'error'
/** 值变化回调 */
onChange: (value: DragFillResult[]) => void
+ /** 所有空白填满后点击提交的回调 */
+ onSubmit?: (value: DragFillResult[]) => void
+ /** 提交按钮文本 */
+ submitText?: string
+ /** 是否禁用拖拽和提交 */
+ disabled?: boolean
}
/** 单选题面板配置 */
@@ -192,6 +198,72 @@ export interface SelectFillQuizPanelProps {
submitText?: string
}
+/** 排序题项 */
+export interface SortQuizItem {
+ /** 唯一标识 */
+ id: string
+ /** 显示文本 */
+ label: string
+}
+
+/** 排序题面板配置 */
+export interface SortQuizPanelProps {
+ /** 是否可见 */
+ visible: boolean
+ /** z-index 层级 */
+ zIndex?: number
+ /** 题目 */
+ title: string
+ /** 待排序的选项列表（初始顺序） */
+ items: SortQuizItem[]
+ /** 正确的排序顺序（id数组） */
+ correctOrder: string[]
+ /** 错误提示信息 */
+ errorMessage?: string
+ /** 成功提示信息（可选） */
+ successMessage?: string
+ /** 提交回调，返回用户排序和是否正确 */
+ onSubmit?: (order: string[], isCorrect: boolean) => void
+ /** 错误回调（可选） */
+ onError?: (error: string) => void
+ /** 是否禁用 */
+ disabled?: boolean
+ /** 提交按钮文本 */
+ submitText?: string
+}
+
+/** 纠错题区块 */
+export interface ErrorCorrectionBlock {
+ /** 区块ID */
+ id: number
+ /** 区块文本内容 */
+ text: string
+ /** 是否是错误 */
+ isError: boolean
+ /** 点击后的反馈文本 */
+ feedback: string
+}
+
+/** 纠错题面板配置 */
+export interface ErrorCorrectionQuizPanelProps {
+ /** 是否可见 */
+ visible: boolean
+ /** z-index 层级 */
+ zIndex?: number
+ /** 题目 */
+ title: string
+ /** 情景介绍文本（可选） */
+ introText?: string
+ /** 文本区块列表 */
+ blocks: ErrorCorrectionBlock[]
+ /** 需要找出的错误数量 */
+ errorCount: number
+ /** 提交回调（找到所有错误时自动调用） */
+ onSubmit?: (isCorrect: boolean) => void
+ /** 是否禁用 */
+ disabled?: boolean
+}
+
/** @deprecated 使用 SingleChoiceQuizPanelProps 替代 */
export interface QuizPanelProps {
visible: boolean
diff --git a/src/components/letter/LetterTemplate.tsx b/src/components/letter/LetterTemplate.tsx
index 412a8d3..acb4717 100644
--- a/src/components/letter/LetterTemplate.tsx
+++ b/src/components/letter/LetterTemplate.tsx
@@ -237,7 +237,7 @@ const LetterTemplate = ({
} else if (/\d/.test(value)) {
showHint('不能包含数字')
} else if (/[\p{P}\p{S}]/u.test(value)) {
- showHint('不能包含标点符号')
+ showHint('不能包含特殊符号')
}
}
@@ -331,7 +331,7 @@ const LetterTemplate = ({
} else if (/\d/.test(value)) {
showHint('不能包含数字')
} else if (/[\p{P}\p{S}]/u.test(value)) {
- showHint('不能包含标点符号')
+ showHint('不能包含特殊符号')
}
}
@@ -549,14 +549,10 @@ const LetterTemplate = ({
/>
+ {/* 题目标题 */}
+
+
+
+
+ {/* 排序选项区域 */}
+ {title}
+ {error && {error}
}
+ {isSubmitted && successMessage && (
+ {successMessage}
+ )}
+
+ {currentOrder.map((itemId, index) => {
+ const item = items.find((i) => i.id === itemId)
+ if (!item) return null
+
+ const isDragging = draggingIndex === index
+ const isDragOver = dragOverIndex === index && dragOverIndex !== draggingIndex
+
+ return (
+
+
+ {/* 提交按钮 */}
+ {!isSubmitted && (
+
+ )}
+
+ {/* 拖拽预览 */}
+ {draggingIndex !== null && dragPosition && (
+ {
+ itemRefs.current[index] = el
+ }}
+ className={cn(
+ 'relative px-8 py-6 rounded-2xl border-3 transition-all duration-200 touch-none',
+ 'text-[28px] leading-relaxed select-none',
+ disabled || isSubmitted
+ ? 'cursor-not-allowed opacity-60'
+ : 'cursor-grab active:cursor-grabbing',
+ isDragging
+ ? 'opacity-50 scale-95'
+ : isDragOver
+ ? 'border-[#f0be75] bg-[#f0be75]/20 scale-105'
+ : 'border-[#d4c5a9] bg-[#d7b888] text-[#5c3e2e] hover:border-[#f0be75] hover:shadow-lg'
+ )}
+ onPointerDown={(e) => handlePointerDown(e, index)}
+ >
+
+ )
+ })}
+
+ {/* 拖拽手柄图标 */}
+
+
+
+
+
+
+ {item.label}
+
+
+ )}
+
+ {items.find((i) => i.id === currentOrder[draggingIndex])?.label}
+
+
- = {
3: {
type: 'input',
maxLength: 12,
- widthClassName: 'w-[180px]',
- placeholder: '结合所学专业',
+ widthClassName: 'w-[120px]',
readOnlyFallback: '专业',
},
4: {
type: 'input',
maxLength: 12,
- widthClassName: 'w-[120px]',
+ widthClassName: 'w-[180px]',
+ placeholder: '结合所学专业',
readOnlyFallback: '实干报国',
},
+ 5: {
+ type: 'input',
+ maxLength: 12,
+ widthClassName: 'w-[120px]',
+ },
}
const LetterToChenyun = ({
diff --git a/src/components/video/video.tsx b/src/components/video/video.tsx
index b6329a6..70351d8 100644
--- a/src/components/video/video.tsx
+++ b/src/components/video/video.tsx
@@ -575,8 +575,14 @@ const Video = forwardRef(
// 计算进度百分比
const progressPercent = duration > 0 ? (currentTime / duration) * 100 : 0
- const disableFirstWatchVideoGating =
+
+ // 视频首次观看限制：env 默认值可被调试面板运行时覆盖
+ const envDisableGating =
import.meta.env.VITE_DISABLE_FIRST_WATCH_VIDEO_GATING === 'true'
+ const sessionOverride = window.sessionStorage.getItem('debug:video-gating')
+ const disableFirstWatchVideoGating =
+ sessionOverride !== null ? sessionOverride === 'disabled' : envDisableGating
+
const canShowSkipButton = !skipKey || disableFirstWatchVideoGating || isVideoCompleted
const canShowControls = !controlsOnReplay || disableFirstWatchVideoGating || isVideoCompleted
const shouldShowReadonlyProgress =
@@ -642,6 +648,43 @@ const Video = forwardRef(
style={{ transform: `scaleX(${progressPercent / 100})` }}
/>
+ {/* 锚点标记：纵向竖标 + 圆点 */}
+ {visibleAnchors.map((anchor) => {
+ const anchorPercent = duration > 0 ? (anchor.time / duration) * 100 : 0
+ const isPassed = currentTime >= anchor.time
+ return (
+
- {title}
+
diff --git a/src/components/letter/LetterToChenyun.tsx b/src/components/letter/LetterToChenyun.tsx
index d7e9d83..845a1d2 100644
--- a/src/components/letter/LetterToChenyun.tsx
+++ b/src/components/letter/LetterToChenyun.tsx
@@ -47,16 +47,21 @@ const fields: Record
+ {Array.from(title).map((char, index) => (
+ {char}
+ ))}
+ {/* 竖线 */}
+
+ {/* 圆点 */}
+
+
+ )
+ })}
)}
{/* 跳过按钮 */}
diff --git a/src/config/puzzleData.ts b/src/config/puzzleData.ts
index af1860d..96d0550 100644
--- a/src/config/puzzleData.ts
+++ b/src/config/puzzleData.ts
@@ -357,7 +357,7 @@ export const puzzleDataConfig: Record
-
)}
diff --git a/src/pages/chenyun/place/place9.tsx b/src/pages/chenyun/place/place9.tsx
index f5d0f3c..46534a8 100644
--- a/src/pages/chenyun/place/place9.tsx
+++ b/src/pages/chenyun/place/place9.tsx
@@ -1,5 +1,8 @@
import { useState, useRef } from 'react'
import { Title, Image, Cursor, Video, GuideSteps, GuideStepsItem } from '@/components'
+import { SingleChoiceQuizPanel } from '@/components/layout/quiz'
+import SuccessAlert from '@/components/layout/alert/success-alert'
+import ScaledPortal from '@/components/layout/ScaledPortal'
import { getBackgroundImage, getStaticImage, getPublicPath } from '@/lib/utils'
import { useNavigate, useParams } from 'react-router-dom'
import type { VideoRef } from '@/components/video'
@@ -36,6 +39,10 @@ const ChenyunPlace9 = () => {
const [guideVisible, setGuideVisible] = useState(false)
const [guideStep, setGuideStep] = useState(0)
+ // 视频后的单选题
+ const [quizChenVisible, setQuizChenVisible] = useState(false)
+ const [successAlertChenVisible, setSuccessAlertChenVisible] = useState(false)
+
const handleOpenExhibit = (_index: 1) => {
// 展品1：播放视频
setVideoVisible(true)
@@ -128,15 +135,55 @@ const ChenyunPlace9 = () => {
onEnded={() => {
setVideoPlaying(false)
markExhibitVisited(place, 1)
- // 视频播放完成后，显示对话引导
- setGuideVisible(true)
- setGuideStep(0)
+ // 视频播放完成后，先弹出题目
+ setQuizChenVisible(true)
triggerPuzzleAnimation(12)
}}
/>
)}
+ {/* 视频后的单选题 */}
+
{/* 标题 */}
- (null)
const videoRef = useRef(null)
useEffect(() => {}, [])
+ // 引入视频加载完成后再播放，避免部分环境下 autoPlay 被拦截
+ const handleIntroVideoCanPlay = () => {
+ if (showIntroVideo && introVideoRef.current) {
+ introVideoRef.current.play().catch((error) => {
+ console.warn('引入视频播放失败:', error)
+ })
+ }
+ }
+
const handleVideoCanPlay = () => {
if (showMainVideo && videoRef.current) {
- videoRef.current.play().catch(() => {})
+ videoRef.current.play().catch((error) => {
+ console.warn('视频播放失败:', error)
+ })
}
}
@@ -218,52 +230,24 @@ const MaozedongInternalization = () => {
afterResume: 'remove',
render: ({ resume }) => {
const handleDragChange = (val: DragFillResult[]) => {
- // quiz-5：参考黄炎培 DragQuizPanel 的用法，不做“每次拖拽都提示”，仅在填满后校验并提示
+ // quiz-5 使用 DragQuizPanel（带“提交”按钮），校验交给 handleDragSubmit，
+ // 这里只更新填入的值并清除上一次的提示
if (q.id === 'quiz-5') {
- const valid = val.filter((v) => q.blanks.some((b) => b.id === v.blankId))
-
- if (valid.some((v) => v.optionValue === q.wrongValue)) {
- setDragQuizErrors((prevErr) => ({ ...prevErr, [q.id]: q.wrongHint }))
- // 错误项拖拽后回到原来的选项框位（从结果中移除）
- setDragQuizValues((prev) => ({
- ...prev,
- [q.id]: valid.filter((v) => v.optionValue !== q.wrongValue),
- }))
- return
- }
-
- setDragQuizErrors((prevErr) => ({ ...prevErr, [q.id]: '' }))
- setDragQuizValues((prev) => ({ ...prev, [q.id]: valid }))
-
- if (valid.length < q.blanks.length) return
-
- const filledSet = new Set(valid.map((v) => v.optionValue))
- const answerSet = new Set(q.correct)
- const isCorrect =
- filledSet.size >= answerSet.size && [...answerSet].every((a) => filledSet.has(a))
-
- if (isCorrect) {
- setActiveSuccess(q.id)
- triggerPuzzleAnimation(16)
- setResumeCallback(() => resume)
- }
+ setDragQuizValues((prev) => ({ ...prev, [q.id]: val }))
+ setDragQuizErrors((prev) => ({ ...prev, [q.id]: '' }))
return
}
- const prev = dragQuizValues[q.id] || []
+ // 篮子题（quiz-2/3/4）：BasketQuizPanel 没有提交按钮，每拖入一个选项即校验
const valid = val.filter((v) => q.blanks.some((b) => b.id === v.blankId))
- const prevOptionSet = new Set(prev.map((v) => v.optionValue))
- const newlyAdded = valid.find((v) => !prevOptionSet.has(v.optionValue))
- const newlyAddedValue = newlyAdded?.optionValue
- const isNewlyWrong = newlyAddedValue ? newlyAddedValue === q.wrongValue : false
- const isNewlyCorrect = newlyAddedValue ? newlyAddedValue !== q.wrongValue : false
+ // 拖入了错误选项：给出提示，并把错误项退回选项区
if (valid.some((v) => v.optionValue === q.wrongValue)) {
- const wrongMsg = newlyAdded?.optionValue
- ? q.optionHints[newlyAdded.optionValue] || q.wrongHint
- : q.wrongHint
- setDragQuizErrors((prevErr) => ({ ...prevErr, [q.id]: wrongMsg }))
- setDragQuizFeedbackTypes((prevType) => ({ ...prevType, [q.id]: 'error' }))
+ setDragQuizErrors((prev) => ({
+ ...prev,
+ [q.id]: q.optionHints[q.wrongValue] || q.wrongHint,
+ }))
+ setDragQuizFeedbackTypes((prev) => ({ ...prev, [q.id]: 'error' }))
setDragQuizValues((prev) => ({
...prev,
[q.id]: valid.filter((v) => v.optionValue !== q.wrongValue),
@@ -271,17 +255,21 @@ const MaozedongInternalization = () => {
return
}
- const defaultTip = isNewlyCorrect ? '恭喜你，选择正确！' : ''
- const tip = newlyAddedValue ? q.optionHints[newlyAddedValue] || defaultTip : ''
- setDragQuizErrors((prevErr) => ({ ...prevErr, [q.id]: tip }))
- if (newlyAddedValue) {
- setDragQuizFeedbackTypes((prevType) => ({
- ...prevType,
- [q.id]: isNewlyWrong ? 'error' : 'success',
- }))
- }
+ // 拖入了正确选项：展示对应的正确提示（绿色）
+ const prevOptionSet = new Set((dragQuizValues[q.id] || []).map((v) => v.optionValue))
+ const newlyAddedValue = valid.find((v) => !prevOptionSet.has(v.optionValue))?.optionValue
setDragQuizValues((prev) => ({ ...prev, [q.id]: valid }))
+ if (newlyAddedValue) {
+ setDragQuizErrors((prev) => ({
+ ...prev,
+ [q.id]: q.optionHints[newlyAddedValue] || '恭喜你，选择正确！',
+ }))
+ setDragQuizFeedbackTypes((prev) => ({ ...prev, [q.id]: 'success' }))
+ } else {
+ setDragQuizErrors((prev) => ({ ...prev, [q.id]: '' }))
+ }
+ // 所有正确选项都已拖入 → 触发成功
const filledSet = new Set(valid.map((v) => v.optionValue))
const answerSet = new Set(q.correct)
const isCorrect =
@@ -294,6 +282,29 @@ const MaozedongInternalization = () => {
}
}
+ const handleDragSubmit = (val: DragFillResult[]) => {
+ const filledSet = new Set(val.map((result) => result.optionValue))
+ const answerSet = new Set(q.correct)
+ const isCorrect =
+ filledSet.size === answerSet.size &&
+ [...answerSet].every((answer) => filledSet.has(answer))
+
+ if (isCorrect) {
+ setActiveSuccess(q.id)
+ if (q.id === 'quiz-5') triggerPuzzleAnimation(16)
+ if (q.id === 'quiz-2') triggerPuzzleAnimation(15)
+ setResumeCallback(() => resume)
+ return
+ }
+ const wrongValue = val.find((result) => result.optionValue === q.wrongValue)?.optionValue
+ setDragQuizErrors((prev) => ({
+ ...prev,
+ [q.id]: wrongValue ? q.optionHints[wrongValue] || q.wrongHint : q.wrongHint,
+ }))
+ setDragQuizFeedbackTypes((prev) => ({ ...prev, [q.id]: 'error' }))
+ setDragQuizValues((prev) => ({ ...prev, [q.id]: [] }))
+ }
+
return (
<>
{q.id === 'quiz-5' ? (
@@ -309,6 +320,7 @@ const MaozedongInternalization = () => {
value={dragQuizValues[q.id] || []}
error={dragQuizErrors[q.id]}
onChange={handleDragChange}
+ onSubmit={handleDragSubmit}
/>
) : (
{
{
setActiveSuccess(null)
setDragQuizValues((prev) => {
@@ -399,13 +409,14 @@ const MaozedongInternalization = () => {
{/* 引入视频：进入页面自动播放（暂用其他视频代替） */}
{showIntroVideo && (
)
}
diff --git a/src/pages/maozedong/reflection.tsx b/src/pages/maozedong/reflection.tsx
index c9e719e..13f1f55 100644
--- a/src/pages/maozedong/reflection.tsx
+++ b/src/pages/maozedong/reflection.tsx
@@ -231,7 +231,7 @@ const Home = () => {
firstLineIndent="2em"
>
{`同学你好，欢迎来到“跨越时空·体悟”学习模块！
-请登陆“时空回溯・亲历时代”体验仓，下一站：1924年，上海。
+请登陆“时空回溯·亲历时代”体验仓，下一站：1924年，上海。
1924年的上海，革命浪潮暗涌，中共四大筹备工作关乎革命前途。无产阶级领导权、工农联盟等核心议题亟待明确，毛泽东同志在会议筹备的关键节点面临诸多重要抉择。请你化身历史见证者，站在毛主席的视角做出选择，解锁中共四大筹备的关键密码，感受革命先辈的坚定与智慧！完成三次选择后，可进入下一阶段的学习。时空门已开，请做好准备迎接考验吧！`}
),
diff --git a/src/pages/nieer/place/place1.tsx b/src/pages/nieer/place/place1.tsx
index 471fad5..3df287d 100644
--- a/src/pages/nieer/place/place1.tsx
+++ b/src/pages/nieer/place/place1.tsx
@@ -258,7 +258,7 @@ const NieerPlace1 = () => {
小沪，聂耳是在九·一八事变爆发后来到的上海吗？他为什么来上海呢？
- {
setShowQuizSuccess(false)
}}
diff --git a/src/pages/luxun/internalization.tsx b/src/pages/luxun/internalization.tsx
index d5771f8..84d7017 100644
--- a/src/pages/luxun/internalization.tsx
+++ b/src/pages/luxun/internalization.tsx
@@ -141,14 +141,12 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
blankPrefixes: ['，如', '如'],
blankSeparators: [''],
options: [
- { value: '匕首', label: '匕首' },
- { value: '投枪', label: '投枪' },
+ { value: '匕首', label: '匕首', isCorrect: true },
+ { value: '投枪', label: '投枪', isCorrect: true },
{ value: '清泉', label: '清泉' },
],
- correctAnswersMap: {
- 'blank-1': '匕首',
- 'blank-2': '投枪',
- },
+ // 两个空是并列关系，匕首/投枪 不分先后（拖 AB 或 BA 均判对），故不设 correctAnswersMap，
+ // 走 handleDragSubmit 的集合校验分支。唯一的错误情形必然用到“清泉”，故沿用下面的提示。
explanation: '“清泉”不是鲁迅文章的意象。请你再想想吧！',
},
{
@@ -224,47 +222,33 @@ const LuxunInternalization = () => {
const handleDragChange = (val: DragFillResult[]) => {
setDragQuizValues((prev) => ({ ...prev, [item.id]: val }))
setDragQuizErrors((prev) => ({ ...prev, [item.id]: '' }))
+ }
- if (!item.blanks || val.length < item.blanks.length) return
-
- // 如果有位置特定的答案映射，使用它进行验证
- if (item.correctAnswersMap) {
- const isCorrect = item.blanks.every((blank) => {
- const filledResult = val.find((v) => v.blankId === blank.id)
- const correctAnswer = item.correctAnswersMap![blank.id]
- return filledResult?.optionValue === correctAnswer
- })
-
- if (isCorrect) {
- setActiveSuccess(item.id)
- setSuccessContent('')
- setResumeCallback(() => resume)
- } else {
- setDragQuizErrors((prev) => ({
- ...prev,
- [item.id]: item.explanation || '再想一想，选择正确答案～',
- }))
- }
- } else {
- // 如果没有位置特定的映射，使用原来的逻辑（检查是否包含了所有正确答案）
- const filledAnswers = val.map((v) => v.optionValue)
- const answerSet = new Set(correctAnswers)
- const filledSet = new Set(filledAnswers)
- const isCorrect =
- answerSet.size === filledSet.size &&
- [...answerSet].every((answer) => filledSet.has(answer))
-
- if (isCorrect) {
- setActiveSuccess(item.id)
- setSuccessContent('')
- setResumeCallback(() => resume)
- } else {
- setDragQuizErrors((prev) => ({
- ...prev,
- [item.id]: item.explanation || '再想一想，选择正确答案～',
- }))
- }
+ const handleDragSubmit = (val: DragFillResult[]) => {
+ const isCorrect = item.correctAnswersMap
+ ? item.blanks!.every((blank) => {
+ const filled = val.find((result) => result.blankId === blank.id)
+ return filled?.optionValue === item.correctAnswersMap![blank.id]
+ })
+ : (() => {
+ const filledSet = new Set(val.map((result) => result.optionValue))
+ const answerSet = new Set(correctAnswers)
+ return (
+ answerSet.size === filledSet.size &&
+ [...answerSet].every((answer) => filledSet.has(answer))
+ )
+ })()
+ if (isCorrect) {
+ setActiveSuccess(item.id)
+ setSuccessContent('')
+ setResumeCallback(() => resume)
+ return
}
+ setDragQuizErrors((prev) => ({
+ ...prev,
+ [item.id]: item.explanation || '再想一想，选择正确答案～',
+ }))
+ setDragQuizValues((prev) => ({ ...prev, [item.id]: [] }))
}
return (
@@ -285,6 +269,7 @@ const LuxunInternalization = () => {
value={dragQuizValues[item.id] || []}
error={dragQuizErrors[item.id]}
onChange={handleDragChange}
+ onSubmit={handleDragSubmit}
/>
{
}}
audioSrc={getPublicPath('audio/luxun/mp3_luxun_02.mp3')}
ailgn="left"
+ firstLineIndent="2em"
>
1.场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态。
{'\n'}
@@ -319,10 +320,10 @@ const LuxunPlace1 = () => {
visible={showExhibit2Quiz}
title="【多选】鲁迅先生居住在上海景云里的两年半，写下的作品包括："
options={[
- { value: 'A', label: 'A. 阿 Q 正传' },
- { value: 'B', label: 'B. 三闲集' },
- { value: 'C', label: 'C. 二心集' },
- { value: 'D', label: 'D. 朝花夕拾' },
+ { value: 'A', label: 'A.阿Q正传' },
+ { value: 'B', label: 'B.三闲集' },
+ { value: 'C', label: 'C.二心集' },
+ { value: 'D', label: 'D.朝花夕拾' },
]}
correctAnswer={['B', 'C']}
errorMessage={(selectedValues) => {
@@ -346,7 +347,6 @@ const LuxunPlace1 = () => {
/>
{
setShowExhibit2QuizSuccess(false)
diff --git a/src/pages/luxun/place/place2.tsx b/src/pages/luxun/place/place2.tsx
index 4b0cbc1..862516b 100644
--- a/src/pages/luxun/place/place2.tsx
+++ b/src/pages/luxun/place/place2.tsx
@@ -305,25 +305,27 @@ const LuxunPlace2 = () => {
onChange={(value) => {
setDragQuizValue(value)
setDragQuizError('')
-
- // 检查是否所有空白都已填充
- if (value.length < 4) return
-
- // 验证顺序：必须是 ABCD 顺序
- const correctOrder = ['埋头苦干的人', '拼命硬干的人', '为民请命的人', '舍身求法的人']
-
- const isCorrect = value.every((v, index) => {
- return v.optionValue === correctOrder[index]
+ }}
+ onSubmit={(value) => {
+ const correctAnswers = [
+ '埋头苦干的人',
+ '拼命硬干的人',
+ '为民请命的人',
+ '舍身求法的人',
+ ]
+ const isCorrect = correctAnswers.every((answer, index) => {
+ return (
+ value.find((result) => result.blankId === 'blank-' + (index + 1))?.optionValue ===
+ answer
+ )
})
-
if (isCorrect) {
- // 答题成功
setShowDragQuiz(false)
setShowDragQuizSuccess(true)
- } else {
- // 答题失败：顺序不对
- setDragQuizError('请你按照鲁迅先生《中国人失掉自信力了吗》的原文拖拽哦~')
+ return
}
+ setDragQuizError('请你按照鲁迅先生《中国人失掉自信力了吗》的原文拖拽哦~')
+ setDragQuizValue([])
}}
zIndex={10000}
/>
diff --git a/src/pages/luxun/place/place4.tsx b/src/pages/luxun/place/place4.tsx
index 89aa36d..3c03a0f 100644
--- a/src/pages/luxun/place/place4.tsx
+++ b/src/pages/luxun/place/place4.tsx
@@ -9,6 +9,7 @@ import {
Video,
type VideoAnchor,
} from '@/components'
+import { ErrorCorrectionQuizPanel } from '@/components/layout/quiz'
import type { VideoRef } from '@/components/video'
import { useNavigate, useParams } from 'react-router-dom'
import { getBackgroundImage, getPublicPath, getStaticImage } from '@/lib/utils'
@@ -114,9 +115,9 @@ const LuxunPlace5 = () => {
visible={!activeVideoSuccess}
title="【单选】毛泽东主席称赞鲁迅先生为“最伟大和最英勇的___”。"
options={[
- { value: 'A', label: 'A. 旗手' },
- { value: 'B', label: 'B. 作家' },
- { value: 'C', label: 'C. 战士' },
+ { value: 'A', label: 'A.旗手' },
+ { value: 'B', label: 'B.作家' },
+ { value: 'C', label: 'C.战士' },
]}
correctAnswer="A"
onWrongSelect={(value: string) => {
@@ -150,6 +151,60 @@ const LuxunPlace5 = () => {
),
},
+ {
+ id: 'error-correction-anchor',
+ time: 42,
+ once: true,
+ afterResume: 'remove',
+ render: ({ resume }) => (
+ {
+ if (isCorrect) {
+ resume()
+ }
+ }}
+ />
+ ),
+ },
],
[activeVideoSuccess, resumeVideoCallback]
)
@@ -367,6 +422,7 @@ const LuxunPlace5 = () => {
showReadonlyProgress
anchors={videoAnchors}
onEnded={() => {
+ setShowEndingVideo(false)
setEndingGuideVisible(true)
}}
/>
diff --git a/src/pages/luxun/reflection/scene1.tsx b/src/pages/luxun/reflection/scene1.tsx
index 43c7260..7d8a529 100644
--- a/src/pages/luxun/reflection/scene1.tsx
+++ b/src/pages/luxun/reflection/scene1.tsx
@@ -357,7 +357,7 @@ const LuxunReflectionScene1 = () => {
firstLineIndent="2em"
>
{`同学你好，欢迎来到“跨越时空·体悟”学习模块！
- 请登陆“时空回溯・亲历时代”体验仓，下一站：1892年，绍兴三味书屋。
+ 请登陆“时空回溯·亲历时代”体验仓，下一站：1892年，绍兴三味书屋。
请按照年代由远及近的顺序，依“手指提示”，点亮先生的创作足迹，解锁更多故事背景！时空门已开，请做好准备吧！`}
diff --git a/src/pages/luxun/reflection/scene2.tsx b/src/pages/luxun/reflection/scene2.tsx
index b4d916b..728d876 100644
--- a/src/pages/luxun/reflection/scene2.tsx
+++ b/src/pages/luxun/reflection/scene2.tsx
@@ -465,8 +465,22 @@ const LuxunReflectionScene2 = () => {
className="w-[150px] h-[150px] object-contain"
draggable={false}
/>
- +
+
diff --git a/src/pages/huangyanpei/reflection/scene1.tsx b/src/pages/huangyanpei/reflection/scene1.tsx
index 01736e4..9769668 100644
--- a/src/pages/huangyanpei/reflection/scene1.tsx
+++ b/src/pages/huangyanpei/reflection/scene1.tsx
@@ -112,7 +112,7 @@ const HuangyanpeiReflectionScene1 = () => {
firstLineIndent="2em"
>
同学你好，欢迎来到“跨越时空·体悟”学习模块！{'\n'}
- 请登陆“时空回溯・亲历时代”体验仓，下一站：1903年，川沙小学堂。{'\n'}
+ 请登陆“时空回溯·亲历时代”体验仓，下一站：1903年，川沙小学堂。{'\n'}
你将在“任之”校长所在的学校学习，根据所知和所学，努力完成校长给你的考验，完成全部任务后，可进入到下一阶段的学习。时空门已开，请做好准备迎接考验吧！
diff --git a/src/pages/huangyanpei/reflection/scene2.tsx b/src/pages/huangyanpei/reflection/scene2.tsx
index c2d9042..bbdaa88 100644
--- a/src/pages/huangyanpei/reflection/scene2.tsx
+++ b/src/pages/huangyanpei/reflection/scene2.tsx
@@ -233,8 +233,7 @@ const HuangyanpeiReflectionScene2 = () => {
{/* 题目成功提示 */}
为打破中国教育学与术分离之病，黄先生在川沙小学堂开始了他的教育实践。你看，这里有两套课程表，选一套开启学习吧。
- {item.name}
+
)
diff --git a/src/pages/maozedong/internalization.tsx b/src/pages/maozedong/internalization.tsx
index 21af67f..c8e15b4 100644
--- a/src/pages/maozedong/internalization.tsx
+++ b/src/pages/maozedong/internalization.tsx
@@ -47,13 +47,25 @@ const MaozedongInternalization = () => {
const [showCompleted, setShowCompleted] = useState(false)
const [showTransition, setShowTransition] = useState(false)
+ const introVideoRef = useRef
+ {item.id === 'baicaoyuan' ? (
+ <>
+ 《从百草园
+
+ 到三味书屋》 + + ) : ( + item.name + )}
+ 到三味书屋》 + + ) : ( + item.name + )}
- ) => {
const unlockVideoSrc = getUnlockVideoSrcForScene(sceneId, visitedReflectionCursors)
@@ -98,6 +93,7 @@ const NieerReflection = () => {
setPendingEndingVisible(false)
setEndingVisible(true)
}
+ saveNieerStore()
}
if (!moduleName) return null
@@ -337,8 +333,8 @@ const NieerReflection = () => {
firstLineIndent="2em"
>
{`同学你好，欢迎来到“跨越时空·体悟”学习模块！
- 请登陆“时空回溯・亲历时代”体验仓，下一站：1936年，上海。
- 请带上你的旅行包，穿越时空解锁6个国歌故事，集齐精神徽章，绘制属于你的国歌精神图谱吧～
+ 请登陆“时空回溯·亲历时代”体验仓，下一站：1936年，上海。
+ 请穿越时空解锁6个国歌故事，集齐精神徽章，绘制属于你的国歌精神图谱吧～
别忘了右下角的旅行箱哦，它会记录你每段旅行的成果！时空门已开，请出发吧！`}
@@ -349,7 +345,7 @@ const NieerReflection = () => {
text={`恭喜你完成所有时空旅行！成功绘制“国歌精神图谱”，解锁6个跨越时空的国歌故事～国歌的故事还在继续，它的精神藏在每一次唱响、每一次坚守中。愿你带着这份精神力量，做国歌的传承者、爱国的践行者！`}
onContinue={() => {
setEndingVisible(false)
- saveNieerStore()
+ // saveNieerStore()
setCourseTimeProgress(14)
navigate(`/${moduleName}/${starName}/home`)
}}
diff --git a/src/pages/rongdesheng/internalization.tsx b/src/pages/rongdesheng/internalization.tsx
index 1cc2fbc..354ca9f 100644
--- a/src/pages/rongdesheng/internalization.tsx
+++ b/src/pages/rongdesheng/internalization.tsx
@@ -66,10 +66,8 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
explanation: '荣德生的实业布局并未涉及采矿业。请你再想想吧！',
},
],
- correctAnswersMap: {
- 'blank-1': '面粉',
- 'blank-2': '纺织',
- },
+ // 两个空是并列关系，面粉/纺织 不分先后（拖 AB 或 BA 均判对），故不设 correctAnswersMap，
+ // 走 handleDragSubmit 的集合校验分支。唯一的错误情形必然用到“采矿”，故沿用下面的提示。
successContent: '',
explanation: '荣德生的实业布局并未涉及采矿业。请你再想想吧！',
},
@@ -203,37 +201,39 @@ const RongdeshengInternalization = () => {
const handleDragChange = (value: DragFillResult[]) => {
setDragQuizValues((prev) => ({ ...prev, [item.id]: value }))
setDragQuizErrors((prev) => ({ ...prev, [item.id]: '' }))
+ }
- if (value.length < item.blanks!.length) return
-
- const hasWrongOption = value.some((result) => {
- const option = item.options.find((current) => current.value === result.optionValue)
- return option && !option.isCorrect
- })
-
- if (hasWrongOption) {
- setDragQuizErrors((prev) => ({
- ...prev,
- [item.id]: item.explanation || '请你再想想吧！',
- }))
- return
- }
-
- const isCorrect = item.blanks!.every((blank) => {
- const filled = value.find((result) => result.blankId === blank.id)
- return filled?.optionValue === item.correctAnswersMap?.[blank.id]
- })
+ const handleDragSubmit = (value: DragFillResult[]) => {
+ // 有 correctAnswersMap → 按空位校验（顺序相关）；
+ // 无 map → 按 isCorrect 选项做集合校验（顺序无关，AB/BA 均判对）
+ const isCorrect = item.correctAnswersMap
+ ? item.blanks!.every((blank) => {
+ const filled = value.find((result) => result.blankId === blank.id)
+ return filled?.optionValue === item.correctAnswersMap![blank.id]
+ })
+ : (() => {
+ const correctAnswers = item.options
+ .filter((opt) => opt.isCorrect)
+ .map((opt) => opt.value)
+ const filledSet = new Set(value.map((result) => result.optionValue))
+ const answerSet = new Set(correctAnswers)
+ return (
+ answerSet.size === filledSet.size &&
+ [...answerSet].every((answer) => filledSet.has(answer))
+ )
+ })()
if (isCorrect) {
setActiveSuccess(item.id)
setSuccessContent(item.successContent || '')
setResumeCallback(() => resume)
- } else {
- setDragQuizErrors((prev) => ({
- ...prev,
- [item.id]: item.explanation || '请你再想想吧！',
- }))
+ return
}
+ setDragQuizErrors((prev) => ({
+ ...prev,
+ [item.id]: item.explanation || '请你再想想吧！',
+ }))
+ setDragQuizValues((prev) => ({ ...prev, [item.id]: [] }))
}
return (
@@ -252,6 +252,7 @@ const RongdeshengInternalization = () => {
value={dragQuizValues[item.id] || []}
error={dragQuizErrors[item.id]}
onChange={handleDragChange}
+ onSubmit={handleDragSubmit}
/>
{
setShowAfterDialogGuide(true)
}}
ailgn="left"
+ firstLineIndent="2em"
>
1.场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态。
{'\n'}
diff --git a/src/pages/rongdesheng/place/place2.tsx b/src/pages/rongdesheng/place/place2.tsx
index 888693f..a2f20dd 100644
--- a/src/pages/rongdesheng/place/place2.tsx
+++ b/src/pages/rongdesheng/place/place2.tsx
@@ -399,7 +399,11 @@ const RongdeshengPlace2 = () => {
{ value: 'D', label: 'D.一味依靠外资扶持发展产业' },
]}
correctAnswer={['A', 'B', 'C']}
- errorMessage="很遗憾选择有误，荣氏企业是民族工业自主发展的代表，未依靠外资扶持，其成功源于优质产品、人文管理和精准布局。请你再想想吧！"
+ errorMessage={(values) =>
+ values.includes('D')
+ ? '很遗憾选择有误，荣氏企业是民族工业自主发展的代表，未依靠外资扶持，其成功源于优质产品、人文管理和精准布局。请你再想想吧！'
+ : '你的选择还不够全面哦～请你再想想吧！'
+ }
minSelections={1}
onSubmit={(_values, isCorrect) => {
if (!isCorrect) return
diff --git a/src/pages/rongdesheng/place/place4.tsx b/src/pages/rongdesheng/place/place4.tsx
index fbe8893..99295d3 100644
--- a/src/pages/rongdesheng/place/place4.tsx
+++ b/src/pages/rongdesheng/place/place4.tsx
@@ -8,6 +8,8 @@ import {
Title,
Video,
} from '@/components'
+import SuccessAlert from '@/components/layout/alert/success-alert'
+import ScaledPortal from '@/components/layout/ScaledPortal'
import Cursor from '@/components/cursor'
import { useCursorController } from '@/hooks/useCursorController'
import { getBackgroundImage, getPublicPath, getStaticImage } from '@/lib/utils'
@@ -66,6 +68,10 @@ const RongdeshengPlace4 = () => {
const [guide4Step, setGuide4Step] = useState(0)
const [endingGuideVisible, setEndingGuideVisible] = useState(false)
+ // 结束视频后的单选题
+ const [quizRongVisible, setQuizRongVisible] = useState(false)
+ const [successAlertRongVisible, setSuccessAlertRongVisible] = useState(false)
+
if (!moduleName) return null
const exhibitSrcMap: Record<1 | 2 | 3 | 4, string> = {
@@ -103,7 +109,8 @@ const RongdeshengPlace4 = () => {
const handleEndingVideoEnded = () => {
setShowEndingVideo(false)
- setEndingGuideVisible(true)
+ // 视频结束后先弹出题目
+ setQuizRongVisible(true)
}
return (
@@ -349,7 +356,7 @@ const RongdeshengPlace4 = () => {
speaker="student"
audioSrc={getPublicPath('audio/rongdesheng/mp3_rongdesheng_27.mp3')}
>
- 新中国成立后，荣氏的企业很快就复工了吗？政府对他的贡献给了肯定吗？
+ 新中国成立后，荣氏的企业很快就复工了吗？政府对他的贡献给予了肯定吗？
{
+ {/* 结束视频后的单选题 */}
+
+ <>
+ {
+ switch (value) {
+ case 'A':
+ return '这个说法片面啦！荣德生办厂不是只为赚钱——他拒绝日商收购、坚持内迁保产、捐万包面粉慰劳将士……这些选择，常常不划算，却无比实在。请你再想想吧！'
+ case 'C':
+ return '技术与出口很重要，但荣德生的“实”，更在“为谁而做”：兵船牌面粉让百姓吃饱，人钟牌棉纱让国人穿暖，劳工自治区让工人有尊严……“实”是看得见、摸得着、暖人心的担当。请你再想想吧！'
+ default:
+ return '请你再想想吧！'
+ }
+ }}
+ onSubmit={(value: string, isCorrect: boolean) => {
+ if (isCorrect) {
+ setQuizRongVisible(false)
+ setSuccessAlertRongVisible(true)
+ }
+ }}
+ />
+
+ {
+ setSuccessAlertRongVisible(false)
+ // 答对后显示结束语对话
+ setEndingGuideVisible(true)
+ }}
+ />
+
+
+
{
>
小提示
-
+
diff --git a/src/pages/nieer/reflection/index.tsx b/src/pages/nieer/reflection/index.tsx
index 2cf2c77..0d8bc9f 100644
--- a/src/pages/nieer/reflection/index.tsx
+++ b/src/pages/nieer/reflection/index.tsx
@@ -15,7 +15,6 @@ import {
getUnlockVideoSrcForScene,
getUnlockedByIdMap,
} from './reflectionProgress'
-import { usePuzzleAnimation } from '@/contexts/PuzzleAnimationContext'
import { setCourseTimeProgress } from '@/lib/utils/api-common'
const starName = 'nieer'
@@ -38,9 +37,6 @@ const NieerReflection = () => {
const showGuideModal = !showOpeningVideo && !hasSeenReflectionGuide
const showBoxHint = !showOpeningVideo && !showGuideModal && !hasSeenBoxHint
- // 获取碎片动画触发方法
- const { triggerPuzzleAnimation } = usePuzzleAnimation()
-
const {
state: dialogState,
openScene,
@@ -75,7 +71,6 @@ const NieerReflection = () => {
}
if (allPlacesCompleted) {
- triggerPuzzleAnimation(14)
if (pendingBadgeVideoSrc) {
setPendingEndingVisible(true)
} else {
@@ -84,7 +79,7 @@ const NieerReflection = () => {
}
}
prevDialogModeRef.current = dialogState.mode
- }, [dialogState.mode, allPlacesCompleted, pendingBadgeVideoSrc, triggerPuzzleAnimation])
+ }, [dialogState.mode, allPlacesCompleted, pendingBadgeVideoSrc])
const handleResultShare = (sceneId: number, payload?: Record
{title}
{text}
+ {text}
)
diff --git a/src/pages/rongdesheng/reflection/index.tsx b/src/pages/rongdesheng/reflection/index.tsx
index ac8faae..442cc12 100644
--- a/src/pages/rongdesheng/reflection/index.tsx
+++ b/src/pages/rongdesheng/reflection/index.tsx
@@ -405,7 +405,7 @@ const RongdeshengReflection = () => {
firstLineIndent="2em"
>
同学你好，欢迎来到“跨越时空·体悟”学习模块！{'\n'}
- 请登陆“时空回溯・亲历时代”体验仓，下一站：1915年，上海。{'\n'}
+ 请登陆“时空回溯·亲历时代”体验仓，下一站：1915年，上海。{'\n'}
欢迎来到申新纺织厂！荣氏兄弟创办的申新纺织厂，从无到有、历经磨难，却始终坚守爱国初心。
接下来请你化身决策助手，和他们一起闯过重重难关，守护民族实业的未来！{'\n'}
温馨提示：每个难关的突破都需要叠加多重因素助力哦！
diff --git a/src/pages/sunzhongshan/internalization.tsx b/src/pages/sunzhongshan/internalization.tsx
index fe210fc..6da52c8 100644
--- a/src/pages/sunzhongshan/internalization.tsx
+++ b/src/pages/sunzhongshan/internalization.tsx
@@ -254,45 +254,29 @@ const SunzhongshanInternalization = () => {
const handleDragChange = (val: DragFillResult[]) => {
setDragQuizValues((prev) => ({ ...prev, [item.id]: val }))
setDragQuizErrors((prev) => ({ ...prev, [item.id]: '' }))
+ }
- if (!item.blanks || val.length < item.blanks.length) return
-
- // 如果有位置特定的答案映射，使用它进行验证
- if (item.correctAnswersMap) {
- const isCorrect = item.blanks.every((blank) => {
- const filledResult = val.find((v) => v.blankId === blank.id)
- const correctAnswer = item.correctAnswersMap![blank.id]
- return filledResult?.optionValue === correctAnswer
- })
-
- if (isCorrect) {
- setActiveSuccess(item.id)
- setResumeCallback(() => resume)
- } else {
- setDragQuizErrors((prev) => ({
- ...prev,
- [item.id]: '再想一想，选择正确答案～',
- }))
- }
- } else {
- // 如果没有位置特定的映射，使用原来的逻辑（检查是否包含了所有正确答案）
- const filledAnswers = val.map((v) => v.optionValue)
- const answerSet = new Set(correctAnswers)
- const filledSet = new Set(filledAnswers)
- const isCorrect =
- answerSet.size === filledSet.size &&
- [...answerSet].every((answer) => filledSet.has(answer))
-
- if (isCorrect) {
- setActiveSuccess(item.id)
- setResumeCallback(() => resume)
- } else {
- setDragQuizErrors((prev) => ({
- ...prev,
- [item.id]: '再想一想，选择正确答案～',
- }))
- }
+ const handleDragSubmit = (val: DragFillResult[]) => {
+ const isCorrect = item.correctAnswersMap
+ ? item.blanks!.every((blank) => {
+ const filled = val.find((result) => result.blankId === blank.id)
+ return filled?.optionValue === item.correctAnswersMap![blank.id]
+ })
+ : (() => {
+ const filledSet = new Set(val.map((result) => result.optionValue))
+ const answerSet = new Set(correctAnswers)
+ return (
+ answerSet.size === filledSet.size &&
+ [...answerSet].every((answer) => filledSet.has(answer))
+ )
+ })()
+ if (isCorrect) {
+ setActiveSuccess(item.id)
+ setResumeCallback(() => resume)
+ return
}
+ setDragQuizErrors((prev) => ({ ...prev, [item.id]: '再想一想，选择正确答案～' }))
+ setDragQuizValues((prev) => ({ ...prev, [item.id]: [] }))
}
return (
@@ -312,6 +296,7 @@ const SunzhongshanInternalization = () => {
value={dragQuizValues[item.id] || []}
error={dragQuizErrors[item.id]}
onChange={handleDragChange}
+ onSubmit={handleDragSubmit}
/>