feat: 添加黄炎培相关场景和引导对话
- 新增黄炎培故居的图像资源，丰富视觉内容。 - 更新多个场景中的引导对话，提升学习互动性和历史背景的准确性。 - 调整文本内容，确保信息的一致性和流畅性。 - 引入结束窗口，增强用户体验，鼓励用户深入了解黄炎培的教育理念。
This commit is contained in:
zhongyidian committed
1 parent
71f607f6a3
commit
a6570efa19
6 files changed
+193
-62
No files matched your search
@@ -35,9 +35,18 @@ const HuangyanpeiPlace4 = () => {
|
||||
>(null);
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
|
||||
// 光标1的引导对话状态
|
||||
const [guide1Visible, setGuide1Visible] = useState(false);
|
||||
const [guide1Step, setGuide1Step] = useState(0);
|
||||
|
||||
// 光标3、4的引导对话状态（在两者都浏览后显示）
|
||||
const [guide34Visible, setGuide34Visible] = useState(false);
|
||||
const [guide34Shown, setGuide34Shown] = useState(false);
|
||||
|
||||
// 光标5的引导对话状态
|
||||
const [guide5Visible, setGuide5Visible] = useState(false);
|
||||
const [guide5Step, setGuide5Step] = useState(0);
|
||||
|
||||
// 视频显示状态
|
||||
const [showVideo, setShowVideo] = useState(false);
|
||||
// 题目显示状态
|
||||
@@ -48,6 +57,15 @@ const HuangyanpeiPlace4 = () => {
|
||||
|
||||
const handleOpenExhibit = (index: 1 | 2 | 3 | 4 | 5) => {
|
||||
setActiveExhibitId(index);
|
||||
if (index === 1) {
|
||||
setGuide1Step(0);
|
||||
setGuide1Visible(true);
|
||||
}
|
||||
|
||||
if (index === 4) {
|
||||
setGuide5Step(0);
|
||||
setGuide5Visible(true);
|
||||
}
|
||||
};
|
||||
|
||||
// 监听visited变化，当光标3、4都浏览后显示引导对话
|
||||
@@ -67,7 +85,7 @@ const HuangyanpeiPlace4 = () => {
|
||||
};
|
||||
|
||||
const progressCount = visited.size;
|
||||
const total = 5;
|
||||
const total = 4;
|
||||
const completed = progressCount >= total;
|
||||
const subtitle = completed
|
||||
? "探索黄炎培创立职教(已完成)"
|
||||
@@ -103,16 +121,17 @@ const HuangyanpeiPlace4 = () => {
|
||||
|
||||
{/* 光标1 */}
|
||||
<Cursor
|
||||
className="absolute left-42 top-78"
|
||||
className="absolute left-42 top-102"
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
size={1}
|
||||
read={visited.has(1)}
|
||||
/>
|
||||
{/* 光标2 */}
|
||||
<Cursor
|
||||
{/* <Cursor
|
||||
className="absolute left-40 top-132"
|
||||
onClick={() => handleOpenExhibit(2)}
|
||||
read={visited.has(2)}
|
||||
/>
|
||||
/> */}
|
||||
{/* 光标3 */}
|
||||
<Cursor
|
||||
className="absolute left-125 top-100"
|
||||
@@ -146,13 +165,13 @@ const HuangyanpeiPlace4 = () => {
|
||||
{/* 展品1、2、4出现描述 */}
|
||||
<ExhibitOverlay
|
||||
visible={activeExhibitId !== null}
|
||||
description={
|
||||
activeExhibitId === 1 ||
|
||||
activeExhibitId === 2 ||
|
||||
activeExhibitId === 4
|
||||
? "黄炎培先生一直怀揣着“教育救国”的理想，职业教育从来都和国家命运紧紧连在一起。1932年“一・二八”事变爆发，黄炎培立刻组织了抗日救国研究会，一边支援前线输送军需，一边维持地方秩序、稳定金融市场，还创办了“一・二八”残废院，专门收容受伤战士和无家可归的难民。“八・一三”抗战爆发后，他担任上海抗战后援会主席，组织民众设难民所、医疗队和后方医院，还成立了青年战地服务团，冒着枪林弹雨为前线军队服务。他自己不顾日机轰炸的危险，九次往返南京与上海之间，协助政府募集救国公债。正是这样的全民抗敌，粉碎了日军“一个月灭亡中国”的狂妄企图。这期间，1935年中华职业教育社还与荣氏三兄弟合作，在申新三厂办理劳动工自治区，对工人进行文化教育。"
|
||||
: undefined
|
||||
}
|
||||
// description={
|
||||
// activeExhibitId === 1 ||
|
||||
// activeExhibitId === 2 ||
|
||||
// activeExhibitId === 4
|
||||
// ? "黄炎培先生一直怀揣着“教育救国”的理想，职业教育从来都和国家命运紧紧连在一起。1932年“一・二八”事变爆发，黄炎培立刻组织了抗日救国研究会，一边支援前线输送军需，一边维持地方秩序、稳定金融市场，还创办了“一・二八”残废院，专门收容受伤战士和无家可归的难民。“八・一三”抗战爆发后，他担任上海抗战后援会主席，组织民众设难民所、医疗队和后方医院，还成立了青年战地服务团，冒着枪林弹雨为前线军队服务。他自己不顾日机轰炸的危险，九次往返南京与上海之间，协助政府募集救国公债。正是这样的全民抗敌，粉碎了日军“一个月灭亡中国”的狂妄企图。这期间，1935年中华职业教育社还与荣氏三兄弟合作，在申新三厂办理劳动工自治区，对工人进行文化教育。"
|
||||
// : undefined
|
||||
// }
|
||||
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
|
||||
onClose={() => {
|
||||
if (activeExhibitId !== null) {
|
||||
@@ -166,7 +185,35 @@ const HuangyanpeiPlace4 = () => {
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 光标3、4的引导对话 */}
|
||||
{/* 光标1的对话 */}
|
||||
<GuideSteps
|
||||
visible={guide1Visible}
|
||||
currentStep={guide1Step}
|
||||
onStepChange={setGuide1Step}
|
||||
onVisibleChange={(visible) => {
|
||||
setGuide1Visible(visible);
|
||||
}}
|
||||
showMask={false}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem speaker="student">
|
||||
真没想到中华职校还组织过义勇军！我们现在也会参加国防教育、志愿服务，当年的职业教育不仅教技能，还这么注重爱国主义教育呀？
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
没错！黄炎培先生一直怀揣着“教育救国”的理想，职业教育从来都和国家命运紧紧连在一起。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
1932年“一・二八”事变爆发，黄炎培立刻组织了抗日救国研究会，一边支援前线输送军需，一边维持地方秩序、稳定金融市场，还创办了“一・二八”残废院，专门收容受伤战士和无家可归的难民。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
“八・一三”抗战爆发后，他担任上海抗战后援会主席，组织民众设难民所、医疗队和后方医院，还成立了青年战地服务团，冒着枪林弹雨为前线军队服务。他自己不顾日机轰炸的危险，九次往返南京与上海之间，协助政府募集救国公债。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
正是这样的全民抗敌，粉碎了日军“一个月灭亡中国”的狂妄企图。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 光标3、5的引导对话 */}
|
||||
<GuideSteps
|
||||
visible={guide34Visible}
|
||||
onVisibleChange={(visible) => {
|
||||
@@ -176,7 +223,7 @@ const HuangyanpeiPlace4 = () => {
|
||||
setShowVideo(true);
|
||||
}
|
||||
}}
|
||||
showMask={true}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10000}
|
||||
>
|
||||
@@ -184,16 +231,32 @@ const HuangyanpeiPlace4 = () => {
|
||||
职业教育这个词是黄炎培先生创造的吗？
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
这个词不是他创造的，但体系是他建立的。1917年5月6日，黄炎培与蔡元培、张謇等48位有识之士在上海成立"中华职业教育社"，并发表《宣言》，直指当时教育的问题——"今之教育，为少数人升官发财，非为多数人衣食住行"。
|
||||
这个词不是他创造的，但体系是他建立的。1917年5月6日，黄炎培联合蔡元培、张謇等48位有识之士，在上海成立了“中华职业教育社”，并发表了《中华职业教育社宣言》。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
1918年，他在上海陆家浜创办中华职业学校。最初开设三个科目：铁工、木工和纽扣制作。招生广告明确写着"免学费、包分配"。首批招收78人，还推出了响亮的口号"双手万能、手脑并用"。
|
||||
1918年，他在上海陆家浜创办中华职业学校，开设铁工、木工、珐琅、纽扣四科，招生广告明确写着“免学费、包分配”。首批招收78人，还推出了响亮的口号“双手万能、手脑并用”。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
这所学校特别厉害，教室和车间连在一起，学生可以一边学理论，一边练技能。学校铁工厂制作的台钳，后来还成了"国货精品"，甚至在巴拿马万国博览会上拿过金奖呢！
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 光标4的对话 */}
|
||||
<GuideSteps
|
||||
visible={guide5Visible}
|
||||
currentStep={guide5Step}
|
||||
onStepChange={setGuide5Step}
|
||||
onVisibleChange={(visible) => {
|
||||
setGuide5Visible(visible);
|
||||
}}
|
||||
showMask={false}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem speaker="guide">
|
||||
这期间，1935年中华职业教育社还与荣氏三兄弟合作，再申新三厂办理劳动工自治区，对工人进行文化教育。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 视频播放 */}
|
||||
{showVideo && (
|
||||
<Video
|
||||
@@ -213,7 +276,7 @@ const HuangyanpeiPlace4 = () => {
|
||||
{/* 题目 */}
|
||||
<SingleChoiceQuizPanel
|
||||
visible={showQuiz}
|
||||
title='中华职业学校首批招生78人,凭借( )口号和"免学费、包分配"的优待,开创了中国近代职业教育的先河。'
|
||||
title={`【单选】中华职业学校首批招生78人,凭借(\xa0\xa0\xa0\xa0)口号和"免学费、包分配"的优待,开创了中国近代职业教育的先河。`}
|
||||
options={[
|
||||
{ value: "A", label: "A. 学而优则仕" },
|
||||
{ value: "B", label: "B. 双手万能、手脑并用" },
|
||||
@@ -221,7 +284,7 @@ const HuangyanpeiPlace4 = () => {
|
||||
{ value: "D", label: "D. 民主科学、救国救民" },
|
||||
]}
|
||||
correctAnswer="B"
|
||||
errorMessage='1918年黄炎培在上海创办中华职业学校,首批招78人,以"免学费、包分配"的实惠和"双手万能、手脑并用"的响亮口号,打破"学而优则仕"的传统观念,首设铁工、木工、纽扣科,把课堂与车间合一,开创了中国近代职业教育的先河,因此选B。'
|
||||
errorMessage="1918年黄炎培在上海创办中华职业学校，首批招78人，以“免学费、包分配”的实惠和“双手万能、手脑并用”的响亮口号，打破“学而优则仕”的传统观念，设铁工、木工、珐琅、纽扣科，把课堂与车间合一，开创了中国近代职业教育的先河。"
|
||||
onSubmit={handleQuizSubmit}
|
||||
zIndex={10001}
|
||||
/>
|
||||
|
||||
Reference in new issue
Block a user