feat: 更新音频和引导对话,优化用户体验
- 在多个场景中添加音频资源,增强学习互动性。 - 更新引导对话文本,确保信息准确性和一致性。 - 调整组件结构,清理不必要的代码,提升可维护性。 - 引入结束窗口,鼓励用户深入了解历史背景。
This commit is contained in:
1 parent
d7ff7d3a45
commit
6e106032fd
141 files changed
+1375
-479
No files matched your search
@@ -15,6 +15,7 @@ import { useState, useRef } from "react";
|
||||
import Cursor from "@/components/cursor";
|
||||
import { SuccessAlert, DragQuizPanel } from "@/components/layout";
|
||||
import { MultipleChoiceQuizPanel } from "@/components/layout/quiz";
|
||||
import { useCursorController } from "@/hooks/useCursorController";
|
||||
|
||||
// starName 固定为 sunzhongshan
|
||||
const starName = "sunzhongshan";
|
||||
@@ -48,6 +49,22 @@ const SunzhongshanPlace1 = () => {
|
||||
// 已浏览展品的 ID 集合
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
|
||||
// 展品2窗口关闭的对话状态
|
||||
const [guide2CloseVisible, setGuide2CloseVisible] = useState(false);
|
||||
const [guide2CloseStep, setGuide2CloseStep] = useState(0);
|
||||
|
||||
// Cursor 顺序控制:1 -> 2 -> 3 -> 4 -> 5
|
||||
const { isEnabled } = useCursorController({
|
||||
initialEnabled: [2],
|
||||
dependencies: {
|
||||
1: [3],
|
||||
3: [4],
|
||||
4: [5],
|
||||
5: [2],
|
||||
},
|
||||
visited,
|
||||
});
|
||||
|
||||
// 光标2的对话状态
|
||||
const [guide2Visible, setGuide2Visible] = useState(false);
|
||||
const [guide2Step, setGuide2Step] = useState(0);
|
||||
@@ -140,30 +157,35 @@ const SunzhongshanPlace1 = () => {
|
||||
className="absolute left-75 bottom-80"
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
read={visited.has(1)}
|
||||
disabled={!isEnabled(1)}
|
||||
/>
|
||||
{/* 光标2 */}
|
||||
<Cursor
|
||||
className="absolute left-108 bottom-118"
|
||||
onClick={() => handleOpenExhibit(2)}
|
||||
read={visited.has(2)}
|
||||
disabled={!isEnabled(2)}
|
||||
/>
|
||||
{/* 光标3 */}
|
||||
<Cursor
|
||||
className="absolute left-165 bottom-90"
|
||||
onClick={() => handleOpenExhibit(3)}
|
||||
read={visited.has(3)}
|
||||
disabled={!isEnabled(3)}
|
||||
/>
|
||||
{/* 光标4 */}
|
||||
<Cursor
|
||||
className="absolute right-192 bottom-118"
|
||||
onClick={() => handleOpenExhibit(4)}
|
||||
read={visited.has(4)}
|
||||
disabled={!isEnabled(4)}
|
||||
/>
|
||||
{/* 光标5 */}
|
||||
<Cursor
|
||||
className="absolute right-188 bottom-88"
|
||||
onClick={() => handleOpenExhibit(5)}
|
||||
read={visited.has(5)}
|
||||
disabled={!isEnabled(5)}
|
||||
/>
|
||||
|
||||
{/* 继续前进 - 仅在完成所有展品后显示 */}
|
||||
@@ -188,6 +210,9 @@ const SunzhongshanPlace1 = () => {
|
||||
if (currentId === 2) {
|
||||
setGuide2Step(0);
|
||||
setGuide2Visible(false);
|
||||
|
||||
setGuide2CloseStep(0);
|
||||
setGuide2CloseVisible(true);
|
||||
} else if (currentId === 5) {
|
||||
setGuide5Step(0);
|
||||
setGuide5Visible(false);
|
||||
@@ -201,6 +226,9 @@ const SunzhongshanPlace1 = () => {
|
||||
} else if (currentId === 3) {
|
||||
setGuide3Step(0);
|
||||
setGuide3Visible(false);
|
||||
setActiveExhibitId(null);
|
||||
setShowVideo4Second(true);
|
||||
return;
|
||||
} else if (currentId === 1) {
|
||||
setGuide1Step(0);
|
||||
setGuide1Visible(false);
|
||||
@@ -228,8 +256,8 @@ const SunzhongshanPlace1 = () => {
|
||||
setVisible(true);
|
||||
}}
|
||||
>
|
||||
{`同学你好,欢迎来到走进故居-对话学习模块!
|
||||
进入孙中山故居纪念馆后,我们一起来了解孙中山同志经历的7个阶段:"立志救国 推翻帝制"、"讨袁护法 捍卫共和"、"与时俱进探索新路"、"抱病北上鞠躬尽瘁"、"革命先驱 永垂不朽"、"思想传承 影响深远"、"精神财富 激励后人";`}
|
||||
{`同学你好,欢迎来到“走进故居·对话”学习模块!
|
||||
此刻你正置身于孙中山故居堂屋,接下来请随时光的脚步,一同走进他人生中四段激情燃烧的岁月:立志救国·推翻帝制、讨袁护法·捍卫共和、与时俱进·探索新路、抱病北上·鞠躬尽瘁。做好准备了吗?开始探索这段波澜壮阔的历史征程吧!`}
|
||||
</StudyGuideModal>
|
||||
|
||||
{/* 引导 */}
|
||||
@@ -242,7 +270,7 @@ const SunzhongshanPlace1 = () => {
|
||||
setShowAfterDialogGuide(true);
|
||||
}
|
||||
}}
|
||||
showMask={true}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
>
|
||||
<GuideStepsItem speaker="student">
|
||||
@@ -259,11 +287,11 @@ const SunzhongshanPlace1 = () => {
|
||||
onContinue={() => setShowAfterDialogGuide(false)}
|
||||
ailgn="left"
|
||||
>
|
||||
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,浏览展品后蓝色动态光点会变为已浏览状态;
|
||||
1.场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态。
|
||||
{"\n"}
|
||||
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点开查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
|
||||
2.在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习。
|
||||
{"\n"}
|
||||
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
|
||||
3.所有动态光点的展品全部学习后才能进入下一个场景学习。
|
||||
</StudyGuideModal>
|
||||
|
||||
{/* 光标2的对话 */}
|
||||
@@ -281,7 +309,7 @@ const SunzhongshanPlace1 = () => {
|
||||
});
|
||||
}
|
||||
}}
|
||||
showMask={true}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10000}
|
||||
>
|
||||
@@ -291,6 +319,25 @@ const SunzhongshanPlace1 = () => {
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 展品2窗口关闭的对话 */}
|
||||
<GuideSteps
|
||||
visible={guide2CloseVisible}
|
||||
currentStep={guide2CloseStep}
|
||||
onStepChange={setGuide2CloseStep}
|
||||
onVisibleChange={(nextVisible) => {
|
||||
setGuide2CloseVisible(nextVisible);
|
||||
}}
|
||||
showMask={false}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem speaker="student">
|
||||
原来孙先生早在青年时期就把国家前途命运放在了心上。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
不仅是关心,他还付诸了实际行动。看看这件展品。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 光标5的对话 */}
|
||||
<GuideSteps
|
||||
visible={guide5Visible}
|
||||
@@ -358,9 +405,9 @@ const SunzhongshanPlace1 = () => {
|
||||
<DragQuizPanel
|
||||
visible={dragQuiz4Visible}
|
||||
zIndex={10000}
|
||||
title="题目 1(拖拽题):"
|
||||
questionPrefix="三民主义是孙中山所倡导的民主革命纲领,是其民主思想的精髓和高度概括,具体包括("
|
||||
questionSuffix=")。"
|
||||
title="【拖拽】"
|
||||
questionPrefix="三民主义是孙中山所倡导的民主革命纲领,是其民主思想的精髓和高度概括,具体包括"
|
||||
questionSuffix="。"
|
||||
options={[
|
||||
{ value: "民族", label: "民族" },
|
||||
{ value: "民权", label: "民权" },
|
||||
@@ -402,11 +449,15 @@ const SunzhongshanPlace1 = () => {
|
||||
visible={successAlert4Visible}
|
||||
onContinue={() => {
|
||||
setSuccessAlert4Visible(false);
|
||||
setShowVideo4Second(true);
|
||||
// setShowVideo4Second(true);
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(4);
|
||||
return next;
|
||||
});
|
||||
}}
|
||||
onClose={() => {
|
||||
setSuccessAlert4Visible(false);
|
||||
setShowVideo4Second(true);
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -421,12 +472,8 @@ const SunzhongshanPlace1 = () => {
|
||||
showSkipButton
|
||||
onEnded={() => {
|
||||
setShowVideo4Second(false);
|
||||
// 修改cursor状态
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(4);
|
||||
return next;
|
||||
});
|
||||
|
||||
setVisited((prev) => new Set([...prev, 3]));
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
@@ -438,16 +485,8 @@ const SunzhongshanPlace1 = () => {
|
||||
onStepChange={setGuide3Step}
|
||||
onVisibleChange={(nextVisible) => {
|
||||
setGuide3Visible(nextVisible);
|
||||
if (!nextVisible) {
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(3);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
}}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem speaker="guide">
|
||||
@@ -460,10 +499,10 @@ const SunzhongshanPlace1 = () => {
|
||||
孙中山先生领导的辛亥革命推动了中国社会的变革,可是这张《民立报》让我有点不明白,孙先生刚当上临时大总统,为什么又很快宣布"解职"了呀?
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
中华民国的建立有个重要背景——"南北议和"。辛亥革命中宣告独立的省份大多集中在中国南方,负隅顽抗的清政府将最后希望寄托在主导北洋军阀势力的袁世凯身上。在列强支持下,袁世凯率军南下...
|
||||
中华民国的建立有个重要背景——"南北议和"。辛亥革命中宣告独立的省份大多集中在中国南方,负隅顽抗的清政府将最后希望寄托在主导北洋军阀势力的袁世凯身上。在列强支持下,袁世凯率军南下。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
一边以武力威胁革命势力,一边又迎合革命党人急于完成统一的愿望,诱使其开展和议。当时,革命党人力量还不够强。为避免国家陷入前途未卜的内战,孙中山先生发表声明:只要清帝退位,袁世凯赞成共和,就推举他做大总统。
|
||||
他一边以武力威胁革命势力,一边又迎合革命党人急于完成统一的愿望,诱使其开展和议。当时,革命党人力量还不够强。为避免国家陷入前途未卜的内战,孙中山先生发表声明:只要清帝退位,袁世凯赞成共和,就推举他做大总统。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
@@ -489,12 +528,12 @@ const SunzhongshanPlace1 = () => {
|
||||
<MultipleChoiceQuizPanel
|
||||
visible={quiz1Visible}
|
||||
zIndex={10000}
|
||||
title="题目 2(多选题):关于辛亥革命的意义,下列表述正确的有()"
|
||||
title="【多选】关于辛亥革命的意义,下列表述正确的有:"
|
||||
options={[
|
||||
{ value: "1", label: "结束了中国两千多年的君主专制制度" },
|
||||
{ value: "2", label: "传播了民主共和理念,推动了中华民族思想解放" },
|
||||
{ value: "3", label: "冲破了封建主义藩篱,打击了帝国主义在华势力" },
|
||||
{ value: "4", label: "完成了民族独立、人民解放的历史任务" },
|
||||
{ value: "1", label: "A.结束了中国两千多年的君主专制制度" },
|
||||
{ value: "2", label: "B.传播了民主共和理念,推动了中华民族思想解放" },
|
||||
{ value: "3", label: "C.冲破了封建主义藩篱,打击了帝国主义在华势力" },
|
||||
{ value: "4", label: "D.完成了民族独立、人民解放的历史任务" },
|
||||
]}
|
||||
correctAnswer={["1", "2", "3"]}
|
||||
errorMessage="辛亥革命未能改变旧中国半殖民地半封建的社会性质和中国人民的悲惨境遇,因此也未能完成实现民族独立、人民解放的历史任务。但它拉开了中国完全意义上的近代民族民主革命的序幕。"
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
Video,
|
||||
type VideoRef,
|
||||
} from "@/components";
|
||||
import { useCursorController } from "@/hooks/useCursorController";
|
||||
import { getBackgroundImage, getPublicPath, getStaticImage } from "@/lib/utils";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
@@ -32,6 +33,17 @@ const SunzhongshanPlace2 = () => {
|
||||
);
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
|
||||
// Cursor 顺序控制:1 -> 2 -> 3 -> 4
|
||||
const { isEnabled } = useCursorController({
|
||||
initialEnabled: [1],
|
||||
dependencies: {
|
||||
2: [1],
|
||||
3: [2],
|
||||
4: [3],
|
||||
},
|
||||
visited: visited,
|
||||
});
|
||||
|
||||
// 光标1的对话状态
|
||||
const [guide1Visible, setGuide1Visible] = useState(false);
|
||||
const [guide1Step, setGuide1Step] = useState(0);
|
||||
@@ -98,24 +110,28 @@ const SunzhongshanPlace2 = () => {
|
||||
className="absolute left-160 top-114"
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
read={visited.has(1)}
|
||||
disabled={!isEnabled(1)}
|
||||
/>
|
||||
{/* 光标2-陆军大元帅时佩带的指挥刀 */}
|
||||
<Cursor
|
||||
className="absolute left-235 bottom-95"
|
||||
onClick={() => handleOpenExhibit(2)}
|
||||
read={visited.has(2)}
|
||||
disabled={!isEnabled(2)}
|
||||
/>
|
||||
{/* 光标3-917.9.10孙中山就任中华民国军政府海陆军大元帅留影 */}
|
||||
<Cursor
|
||||
className="absolute left-241.5 top-119"
|
||||
onClick={() => handleOpenExhibit(3)}
|
||||
read={visited.has(3)}
|
||||
disabled={!isEnabled(3)}
|
||||
/>
|
||||
{/* 光标4-实业计划 */}
|
||||
<Cursor
|
||||
className="absolute right-120 bottom-78"
|
||||
onClick={() => handleOpenExhibit(4)}
|
||||
read={visited.has(4)}
|
||||
disabled={!isEnabled(4)}
|
||||
/>
|
||||
|
||||
{completed && (
|
||||
@@ -225,7 +241,7 @@ const SunzhongshanPlace2 = () => {
|
||||
真是一个宏伟的计划,可是在内忧外患的时局下,实现起来一定很艰难吧?
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
是的,1913年3月"宋教仁案"将国民党和袁世凯方面的矛盾推向高峰。不愿坐视袁世凯窃取辛亥革命果实后独揽大权,革命党人发动了"二次革命"。可惜革命失败,孙中山先生被迫流亡日本。
|
||||
是的,1913年3月"宋教仁案"将国民党和袁世凯方面的矛盾推向高峰。不愿坐视袁世凯窃取辛亥革命果实后独揽大权,革命党人发动了"二次革命"。可惜革命失败,孙中山先生被迫流亡海外。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
袁世凯趁机撤销了他"筹办全国铁路全权"的职务,把铁路公司的事权交给了北京政府交通部,公司就这样解散了。
|
||||
@@ -252,7 +268,6 @@ const SunzhongshanPlace2 = () => {
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
type VideoRef,
|
||||
type DragFillResult,
|
||||
} from "@/components";
|
||||
import { useCursorController } from "@/hooks/useCursorController";
|
||||
import { getBackgroundImage, getPublicPath, getStaticImage } from "@/lib/utils";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { SuccessAlert, DragQuizPanel } from "@/components/layout";
|
||||
@@ -34,6 +35,17 @@ const SunzhongshanPlace3 = () => {
|
||||
);
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
|
||||
// Cursor 顺序控制:1 -> 2 -> 3 -> 4
|
||||
const { isEnabled } = useCursorController({
|
||||
initialEnabled: [1],
|
||||
dependencies: {
|
||||
2: [1],
|
||||
3: [2],
|
||||
4: [3],
|
||||
},
|
||||
visited: visited,
|
||||
});
|
||||
|
||||
// 光标1的对话状态
|
||||
const [guide1Visible, setGuide1Visible] = useState(false);
|
||||
const [guide1Step, setGuide1Step] = useState(0);
|
||||
@@ -112,22 +124,26 @@ const SunzhongshanPlace3 = () => {
|
||||
className="absolute left-198 top-118"
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
read={visited.has(1)}
|
||||
disabled={!isEnabled(1)}
|
||||
/>
|
||||
<Cursor
|
||||
className="absolute left-210 top-140"
|
||||
onClick={() => handleOpenExhibit(2)}
|
||||
read={visited.has(2)}
|
||||
disabled={!isEnabled(2)}
|
||||
/>
|
||||
|
||||
<Cursor
|
||||
className="absolute right-182 bottom-95"
|
||||
onClick={() => handleOpenExhibit(3)}
|
||||
read={visited.has(3)}
|
||||
disabled={!isEnabled(3)}
|
||||
/>
|
||||
<Cursor
|
||||
className="absolute right-158 bottom-95"
|
||||
onClick={() => handleOpenExhibit(4)}
|
||||
read={visited.has(4)}
|
||||
disabled={!isEnabled(4)}
|
||||
/>
|
||||
|
||||
{completed && (
|
||||
@@ -246,9 +262,9 @@ const SunzhongshanPlace3 = () => {
|
||||
<DragQuizPanel
|
||||
visible={dragQuiz2Visible}
|
||||
zIndex={10000}
|
||||
title="题目1 (拖拽题):"
|
||||
questionPrefix="3. 中国国民党第一次全国代表大会事实上确立了("
|
||||
questionSuffix=")三大政策。"
|
||||
title="【拖拽】"
|
||||
questionPrefix="3. 中国国民党第一次全国代表大会事实上确立了"
|
||||
questionSuffix="三大政策。"
|
||||
options={[
|
||||
{ value: "联俄", label: "联俄" },
|
||||
{ value: "联共", label: "联共" },
|
||||
|
||||
@@ -4,12 +4,13 @@ import {
|
||||
Title,
|
||||
Image,
|
||||
Cursor,
|
||||
StudyGuideModal,
|
||||
GuideSteps,
|
||||
GuideStepsItem,
|
||||
Video,
|
||||
type VideoRef,
|
||||
EndingOverlay,
|
||||
} from "@/components";
|
||||
import { useCursorController } from "@/hooks/useCursorController";
|
||||
import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
@@ -21,8 +22,8 @@ const exhibitSrcMap: Record<1 | 2, string> = {
|
||||
};
|
||||
|
||||
// 光标1的展品描述内容(图2)
|
||||
const exhibit1Description =
|
||||
'1924年10月,冯玉祥将军发动"北京政变",推翻了曹锟政府,邀请孙中山先生北上共商国是,希望能实现国家和平统一。孙先生认为"这是一个好机会",于是11月13日从广州出发北上,途经上海、日本、天津等地,一路宣传反帝、反封建主张。孙先生抵达上海时,外滩码头上聚集了前来欢迎的各界代表、群众四千多人。大家关心国家前途命运,拥护孙先生,认同他在《北上宣言》中提出的"废除不平等条约""召开国民会议"等主张,真心希望结束军阀割据,国家实现统一,民族实现独立。';
|
||||
// const exhibit1Description =
|
||||
// '1924年10月,冯玉祥将军发动"北京政变",推翻了曹锟政府,邀请孙中山先生北上共商国是,希望能实现国家和平统一。孙先生认为"这是一个好机会",于是11月13日从广州出发北上,途经上海、日本、天津等地,一路宣传反帝、反封建主张。孙先生抵达上海时,外滩码头上聚集了前来欢迎的各界代表、群众四千多人。大家关心国家前途命运,拥护孙先生,认同他在《北上宣言》中提出的"废除不平等条约""召开国民会议"等主张,真心希望结束军阀割据,国家实现统一,民族实现独立。';
|
||||
|
||||
const SunzhongshanPlace4 = () => {
|
||||
const navigate = useNavigate();
|
||||
@@ -35,14 +36,32 @@ const SunzhongshanPlace4 = () => {
|
||||
const [initialDialogStep, setInitialDialogStep] = useState(0);
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
|
||||
// Cursor 顺序控制:1 -> 2
|
||||
const { isEnabled } = useCursorController({
|
||||
initialEnabled: [2],
|
||||
dependencies: {
|
||||
1: [2],
|
||||
},
|
||||
visited: visited,
|
||||
});
|
||||
// 光标1的视频状态
|
||||
const [showVideo1, setShowVideo1] = useState(false);
|
||||
const video1Ref = useRef<VideoRef>(null);
|
||||
// 光标1视频播放后的学习引导状态
|
||||
const [showVideo1Guide, setShowVideo1Guide] = useState(false);
|
||||
|
||||
// 光标2的对话状态
|
||||
const [guide2Visible, setGuide2Visible] = useState(false);
|
||||
const [guide2Step, setGuide2Step] = useState(0);
|
||||
|
||||
const handleOpenExhibit = (index: 1 | 2) => {
|
||||
setActiveExhibitId(index);
|
||||
if (index === 2) {
|
||||
console.log(index);
|
||||
setGuide2Step(0);
|
||||
setGuide2Visible(true);
|
||||
}
|
||||
};
|
||||
|
||||
const progressCount = visited.size;
|
||||
@@ -84,11 +103,13 @@ const SunzhongshanPlace4 = () => {
|
||||
className="absolute right-209 top-128"
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
read={visited.has(1)}
|
||||
disabled={!isEnabled(1)}
|
||||
/>
|
||||
<Cursor
|
||||
className="absolute right-150 top-88"
|
||||
onClick={() => handleOpenExhibit(2)}
|
||||
read={visited.has(2)}
|
||||
disabled={!isEnabled(2)}
|
||||
/>
|
||||
|
||||
{completed && (
|
||||
@@ -105,7 +126,7 @@ const SunzhongshanPlace4 = () => {
|
||||
<ExhibitOverlay
|
||||
visible={activeExhibitId !== null}
|
||||
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
|
||||
description={activeExhibitId === 2 ? exhibit1Description : undefined}
|
||||
// description={activeExhibitId === 2 ? exhibit1Description : undefined}
|
||||
onClose={() => {
|
||||
const currentId = activeExhibitId;
|
||||
|
||||
@@ -144,9 +165,10 @@ const SunzhongshanPlace4 = () => {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 光标1视频播放后的学习引导 */}
|
||||
<StudyGuideModal
|
||||
{/* 结束语 */}
|
||||
<EndingOverlay
|
||||
visible={showVideo1Guide}
|
||||
text="通过了解这些展品背后的故事,我们回顾了孙中山先生这位民主革命先驱伟大的一生,不仅看到了孙先生万难不辞、奔波海上的革命足迹,更感受到了他愈挫愈奋、攀登不已的革命精神。下面,让我们跨越时空回到黎明的前夜,与孙先生一起,探寻国家的出路。"
|
||||
onContinue={() => {
|
||||
setShowVideo1Guide(false);
|
||||
// 学习引导关闭后,修改cursor状态
|
||||
@@ -156,10 +178,7 @@ const SunzhongshanPlace4 = () => {
|
||||
return next;
|
||||
});
|
||||
}}
|
||||
ailgn="left"
|
||||
>
|
||||
通过了解这些展品背后的故事,我们回顾了孙中山先生这位民主革命先驱伟大的一生,不仅看到了孙先生万难不辞、奔波海上的革命足迹,更感受到了他愈挫愈奋、攀登不已的革命精神。下面,让我们跨越时空回到黎明的前夜,与孙先生一起,探寻国家的出路。
|
||||
</StudyGuideModal>
|
||||
/>
|
||||
|
||||
{/* 关闭学习引导后显示的对话(图1) */}
|
||||
<GuideSteps
|
||||
@@ -180,6 +199,29 @@ const SunzhongshanPlace4 = () => {
|
||||
是的。然而长期操劳国事使得孙中山先生身体抱恙。在生命最后的时间里,他仍在为国奔走,始终未曾停歇。看看这张拍摄于1924年11月17日的照片吧。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 光标2的对话 */}
|
||||
<GuideSteps
|
||||
visible={guide2Visible}
|
||||
currentStep={guide2Step}
|
||||
onStepChange={setGuide2Step}
|
||||
onVisibleChange={(nextVisible) => {
|
||||
setGuide2Visible(nextVisible);
|
||||
}}
|
||||
showMask={false}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem speaker="student">这是……外滩?</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
没错。1924年10月,冯玉祥将军发动“北京政变”,推翻了曹锟政府,邀请孙中山先生北上共商国是,希望能实现国家和平统一。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
孙先生认为“这是一个好机会”,于是11月13日从广州出发北上,途经上海、日本、天津等地,一路宣传反帝、反封建主张。孙先生抵达上海时,外滩码头上聚集了前来欢迎的各界代表、群众四千多人。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
大家关心国家前途命运,拥护孙先生,认同他在《北上宣言》中提出的“废除不平等条约”“召开国民会议”等主张,真心希望结束军阀割据,国家实现统一,民族实现独立。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -130,9 +130,10 @@ const SunzhongshanReflection = () => {
|
||||
|
||||
{/* 学习引导弹窗 */}
|
||||
<StudyGuideModal visible={showGuide} onContinue={handleGuideClose}>
|
||||
同学你好,欢迎来到跨越时空 - 体悟学习模块!
|
||||
{"\n\n"}
|
||||
本模块包含三个推理小游戏,场景学习顺序不分先后,三个场景全部学习完后方能完成本模块的学习,那么现在就请你开始体验吧。
|
||||
同学你好,欢迎来到“跨越时空·体悟”学习模块!{"\n"}
|
||||
请登陆“时空回溯・亲历时代”体验仓,下一站:二十世纪初,上海。{"\n"}
|
||||
辛亥革命之后,民主共和的观念深入人心。面对中外反动势力,社会各界更广泛地行动起来,以各自的方式争取着民主自由和国家尊严。
|
||||
请探索周围环境,拨开时局迷雾,与奋进求索的仁人志士们一同探寻中国革命的前路……本模块包含三个推理小游戏,完成三个场景的探索后,可进入到下一阶段的学习。时空门已开,请做好准备迎接考验吧!
|
||||
</StudyGuideModal>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -433,10 +433,10 @@ const SunzhongshanReflectionScene1 = () => {
|
||||
onContinue={handleGuideClose}
|
||||
zIndex={10000}
|
||||
>
|
||||
同学你好,欢迎来到二十世纪初的上海。辛亥革命之后,民主共和的观念深入人心。
|
||||
面对中外反动势力,社会各界更广泛地行动起来,以各自的方式争取着民主自由和国家尊严。
|
||||
同学你好,欢迎来到二十世纪初的上海。{"\n"}
|
||||
辛亥革命之后,民主共和的观念深入人心。面对中外反动势力,社会各界更广泛地行动起来,以各自的方式争取着民主自由和国家尊严。
|
||||
{"\n"}
|
||||
请探索周围环境,拨开时局迷雾,与奋进求索的仁人志士们一同探寻中国革命的前路。本游戏需要在场景中找出4条线索,并回答正确所有问题后才能完成本游戏探索。
|
||||
你需要在本场景中找出4条线索,并正确回答所有问题后,才能拨开时局迷雾,进入下一个场景。
|
||||
</StudyGuideModal>
|
||||
|
||||
{/* 题目1:今天的日期是? */}
|
||||
|
||||
@@ -474,12 +474,12 @@ const SunzhongshanReflectionScene2 = () => {
|
||||
{
|
||||
value: "A",
|
||||
label:
|
||||
"A: 回想一年多来,全国已经组织起了大小罢工上百次。虽然取得过一些胜利,但现在工人们的力量毕竟弱小,我们愈是坚定,便愈将面对敌人疯狂的反扑。若为工人们找到其他方面的朋友,或许方可与荷枪实弹的军阀势力相抗衡。",
|
||||
"A.回想一年多来,全国已经组织起了大小罢工上百次。虽然取得过一些胜利,但现在工人们的力量毕竟弱小,我们愈是坚定,便愈将面对敌人疯狂的反扑。若为工人们找到其他方面的朋友,或许方可与荷枪实弹的军阀势力相抗衡。",
|
||||
},
|
||||
{
|
||||
value: "B",
|
||||
label:
|
||||
"B: 回想一年多来,全国已经组织起了大小罢工上百次,多有捷报。此时虽面对一些挫折,但只要工人们始终坚定地团结在一起,敢于牺牲,就一定能战胜内外敌人!",
|
||||
"B.回想一年多来,全国已经组织起了大小罢工上百次,多有捷报。此时虽面对一些挫折,但只要工人们始终坚定地团结在一起,敢于牺牲,就一定能战胜内外敌人!",
|
||||
},
|
||||
]}
|
||||
correctAnswer="A"
|
||||
@@ -495,11 +495,11 @@ const SunzhongshanReflectionScene2 = () => {
|
||||
options={[
|
||||
{
|
||||
value: "A",
|
||||
label: "A: 青帮、洪门等颇有势力的会党",
|
||||
label: "A.青帮、洪门等颇有势力的会党",
|
||||
},
|
||||
{
|
||||
value: "B",
|
||||
label: "B: 孙中山先生领导的中国国民党",
|
||||
label: "B.孙中山先生领导的中国国民党",
|
||||
},
|
||||
]}
|
||||
correctAnswer="B"
|
||||
|
||||
Reference in new issue
Block a user