feat: 添加连线题和选择题功能,增强互动性

- 在多个组件中引入 MatchQuizPanel 和 SingleChoiceQuizPanel,提升用户参与度。
- 更新 HuangyanpeiPlace1、HuangyanpeiPlace3、LuxunPlace1、LuxunPlace2 组件,增加新的选择题和连线题,丰富学习内容。
- 调整成功提示逻辑,确保用户体验流畅。
- 优化视频播放中的锚点逻辑,提升互动性和学习效果。
This commit is contained in:
zhongyidian committed 2026-02-02 15:41:49 +08:00
1 parent 02a3f00a9b
commit 966b47ede3
12 files changed
+1128 -42

No files matched your search

+59 -5
View File
@@ -41,7 +41,11 @@ const HuangyanpeiPlace5 = () => {
// 展品2视频后的对话引导状态
const [guideVisible, setGuideVisible] = useState(false);
const [guideStep, setGuideStep] = useState(0);
// 题目显示状态
// 题目1(光标1对话后)显示状态
const [showQuiz1, setShowQuiz1] = useState(false);
// 题目1成功提示状态
const [showQuiz1Success, setShowQuiz1Success] = useState(false);
// 题目显示状态(展品2视频后)
const [showQuiz, setShowQuiz] = useState(false);
// 成功提示状态
const [showSuccessAlert, setShowSuccessAlert] = useState(false);
@@ -177,7 +181,15 @@ const HuangyanpeiPlace5 = () => {
}}
onClose={() => {
if (activeExhibitId !== null) {
markExhibitVisited(place, activeExhibitId);
// 如果是展品1关闭,显示题目1
if (activeExhibitId === 1) {
setShowQuiz1(true);
}
// 注意:展品1的已访问标记在题目1成功后处理,这里不标记
// 展品2正常标记
if (activeExhibitId === 2) {
markExhibitVisited(place, activeExhibitId);
}
}
setActiveExhibitId(null);
}}
@@ -188,9 +200,7 @@ const HuangyanpeiPlace5 = () => {
visible={guide1Visible}
currentStep={guide1Step}
onStepChange={setGuide1Step}
onVisibleChange={(visible) => {
setGuide1Visible(visible);
}}
onVisibleChange={setGuide1Visible}
showMask={false}
zIndex={10000}
>
@@ -217,6 +227,50 @@ const HuangyanpeiPlace5 = () => {
</GuideStepsItem>
</GuideSteps>
{/* 题目1(光标1对话后) */}
<SingleChoiceQuizPanel
visible={showQuiz1}
title="【单选】黄炎培先生创建民主政团同盟等组织是为了:"
options={[
{ value: "A", label: "A. 为国家寻求一条和平发展的道路" },
{ value: "B", label: 'B. 支持国民党"攘外必先安内"的政策' },
{ value: "C", label: "C. 扩大个人政治影响力,争夺权力" },
]}
correctAnswer="A"
onWrongSelect={(value) => {
switch (value) {
case "B":
return '国民党政府坚持"攘外必先安内"的政策导致国共关系紧张,黄炎培正是因为反对这种政策、希望推动和平,才发起组建了民主政团同盟。请你再想想吧!';
case "C":
return "黄炎培创建民主政团同盟的出发点是民族大义与国家前途,并非为了个人政治利益。请你再想想吧!";
default:
return "请你再想想吧!";
}
}}
onSubmit={(value, isCorrect) => {
if (isCorrect) {
setShowQuiz1(false);
setShowQuiz1Success(true);
}
}}
zIndex={10001}
/>
{/* 题目1成功提示 */}
<SuccessAlert
visible={showQuiz1Success}
onContinue={() => {
setShowQuiz1Success(false);
// 标记展品1为已访问,修改cursor状态
markExhibitVisited(place, 1);
}}
onClose={() => {
setShowQuiz1Success(false);
// 标记展品1为已访问,修改cursor状态
markExhibitVisited(place, 1);
}}
/>
{/* 光标2的引导对话 */}
<GuideSteps
visible={guideVisible}