diff --git a/src/components/exhibit/ExhibitDescriptionNarration.tsx b/src/components/exhibit/ExhibitDescriptionNarration.tsx index d5268f3..b4624d8 100644 --- a/src/components/exhibit/ExhibitDescriptionNarration.tsx +++ b/src/components/exhibit/ExhibitDescriptionNarration.tsx @@ -136,7 +136,7 @@ const ExhibitDescriptionNarration = ({ exit={{ opacity: 0, x: -20 }} transition={{ duration: 0.3 }} className={cn( - "max-w-[500px] px-12 py-14", + "max-w-[580px] px-12 py-14", "shadow-black/60", "relative overflow-hidden", className diff --git a/src/components/exhibit/ExhibitOverlay.tsx b/src/components/exhibit/ExhibitOverlay.tsx index c65fcd9..bf4fa2f 100644 --- a/src/components/exhibit/ExhibitOverlay.tsx +++ b/src/components/exhibit/ExhibitOverlay.tsx @@ -490,7 +490,7 @@ const ExhibitOverlay = ({ text={description} visible={visible} autoPlay={autoPlayDescription} - className="absolute left-30 top-1/2 -translate-y-1/2" + className="absolute left-20 top-1/2 -translate-y-1/2" /> )} diff --git a/src/components/layout/quiz/SingleChoiceQuizPanel.tsx b/src/components/layout/quiz/SingleChoiceQuizPanel.tsx index 160e33d..8b69f19 100644 --- a/src/components/layout/quiz/SingleChoiceQuizPanel.tsx +++ b/src/components/layout/quiz/SingleChoiceQuizPanel.tsx @@ -84,7 +84,7 @@ const SingleChoiceQuizPanel = ({ >
{/* 题干卡片 */} -
+
{title}
@@ -101,7 +101,7 @@ const SingleChoiceQuizPanel = ({ onClick={() => handleOptionClick(option.value)} >
{ // 监听光标3的引导对话关闭 const handleGuide3VisibleChange = (visible: boolean) => { setGuide3Visible(visible); - if (!visible) { - // 对话结束后显示题目 - setShowQuiz3(true); - } }; // 处理光标3题目提交 const handleQuiz3Submit = (value: string, isCorrect: boolean) => { if (isCorrect) { setShowQuiz3(false); + setVisited((prev) => prev.add(3)); } }; @@ -154,12 +151,16 @@ const HuangyanpeiPlace3 = () => { src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""} onClose={() => { if (activeExhibitId !== null) { + setActiveExhibitId(null); + if (activeExhibitId === 3) { + setShowQuiz3(true); + return; + } setVisited((prev) => { const next = new Set(prev); next.add(activeExhibitId); return next; }); - setActiveExhibitId(null); } else { setActiveExhibitId(null); } @@ -209,7 +210,6 @@ const HuangyanpeiPlace3 = () => { correctAnswer="B" errorMessage='1903年,黄炎培将"观澜书院"改制为"川沙小学堂",自任校长,率先打破传统经学模式,在课程表中首次列入算术、格致(近代自然科学)、体操和乡土调查四门新学科,并实行"半日授课、半日实习"的教学方式,开创了近代中国小学融入科学、体育与实践教育的新风,因此选项B正确。' onSubmit={handleQuiz3Submit} - zIndex={10001} /> {/* 光标1、2的引导对话 */} @@ -224,14 +224,13 @@ const HuangyanpeiPlace3 = () => { 原来当年还有专门的女子学校呀?在那个年代,女孩子能上学是不是特别不容易?后来的浦东中学也是黄炎培先生办的吗? - 你观察得特别仔细! - 川沙小学堂开学没多久,黄炎培就和堂兄黄洪培、堂嫂陆开群一起,策划创建了"开群女校"——这所学校专门面向社会招收女学生,还用全力支持办学、腾出自家住房的陆开群名字命名,直接开创了浦东地区女子教育的先河,让很多女孩子有了读书的机会。 + 你观察得特别仔细!川沙小学堂开学没多久,黄炎培就和堂兄黄洪培、堂嫂陆开群一起,策划创建了"开群女校"——这所学校专门面向社会招收女学生,还用全力支持办学、腾出自家住房的陆开群名字命名,直接开创了浦东地区女子教育的先河... - 到了1906年,上海营造业宗师杨斯盛捐资30万两白银,在浦东六里桥购地40多亩创办浦东中学,特意邀请黄炎培担任首任校长。校舍是黄炎培亲自设计的,杨斯盛先生亲自监工,建成后有能容纳千人的大礼堂和两座教学楼,是近代上海第一所完全中学呢! + 让很多女孩子有了读书的机会。到了1906年,上海营造业宗师杨斯盛捐资30万两白银,在浦东六里桥购地40多亩创办浦东中学,特意邀请黄炎培担任首任校长。校舍是黄炎培亲自设计的,杨斯盛先生亲自监工... - 1912年,黄炎培担任江苏省署教育司司长,任职期间一直倡导实用主义教育,强调教育要和生产劳动结合起来,这也为后来的职业教育打下了坚实基础。 + 建成后有能容纳千人的大礼堂和两座教学楼,是近代上海第一所完全中学呢!1912年,黄炎培担任江苏省署教育司司长,任职期间一直倡导实用主义教育,强调教育要和生产劳动结合起来,这也为后来的职业教育打下了坚实基础。 diff --git a/src/pages/huangyanpei/place/place4.tsx b/src/pages/huangyanpei/place/place4.tsx index 44f2c9f..d6ebae6 100644 --- a/src/pages/huangyanpei/place/place4.tsx +++ b/src/pages/huangyanpei/place/place4.tsx @@ -1,13 +1,18 @@ -import { useState } from "react"; +import { useState, useEffect, useRef } from "react"; import { ExhibitOverlay, Title, Image, Cursor, StudyGuideModal, + GuideSteps, + GuideStepsItem, + SingleChoiceQuizPanel, + Video, } from "@/components"; -import { getBackgroundImage, getStaticImage } from "@/lib/utils"; +import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils"; import { useNavigate, useParams } from "react-router-dom"; +import type { VideoRef } from "@/components/video"; const starName = "huangyanpei"; @@ -32,10 +37,34 @@ const HuangyanpeiPlace4 = () => { >(null); const [visited, setVisited] = useState>(new Set()); + // 光标3、4的引导对话状态（在两者都浏览后显示） + const [guide34Visible, setGuide34Visible] = useState(false); + const [guide34Shown, setGuide34Shown] = useState(false); + // 视频显示状态 + const [showVideo, setShowVideo] = useState(false); + // 题目显示状态 + const [showQuiz, setShowQuiz] = useState(false); + const videoRef = useRef(null); + const handleOpenExhibit = (index: 1 | 2 | 3 | 4 | 5) => { setActiveExhibitId(index); }; + // 监听visited变化，当光标3、4都浏览后显示引导对话 + useEffect(() => { + if (visited.has(3) && visited.has(5) && !guide34Shown) { + setGuide34Shown(true); + setGuide34Visible(true); + } + }, [visited, guide34Shown]); + + // 处理题目提交 + const handleQuizSubmit = (value: string, isCorrect: boolean) => { + if (isCorrect) { + setShowQuiz(false); + } + }; + const progressCount = visited.size; const total = 5; const completed = progressCount >= total; @@ -71,26 +100,31 @@ const HuangyanpeiPlace4 = () => { }} /> + {/* 光标1 */} handleOpenExhibit(1)} read={visited.has(1)} /> + {/* 光标2 */} handleOpenExhibit(2)} read={visited.has(2)} /> + {/* 光标3 */} handleOpenExhibit(3)} read={visited.has(3)} /> + {/* 光标4 */} handleOpenExhibit(4)} read={visited.has(4)} /> + {/* 光标5 */} handleOpenExhibit(5)} @@ -108,8 +142,16 @@ const HuangyanpeiPlace4 = () => { /> )} + {/* 展品1、2、4出现描述 */} { if (activeExhibitId !== null) { @@ -123,6 +165,66 @@ const HuangyanpeiPlace4 = () => { }} /> + {/* 光标3、4的引导对话 */} + { + setGuide34Visible(visible); + // 对话结束后播放视频 + if (!visible) { + setShowVideo(true); + } + }} + showMask={true} + highlightSelectors={[]} + zIndex={10000} + > + + 职业教育这个词是黄炎培先生创造的吗？ + + + 这个词不是他创造的，但体系是他建立的。1917年5月6日，黄炎培与蔡元培、张謇等48位有识之士在上海成立"中华职业教育社"，并发表《宣言》，直指当时教育的问题——"今之教育，为少数人升官发财，非为多数人衣食住行"。 + + + 1918年，他在上海陆家浜创办中华职业学校。最初开设三个科目：铁工、木工和纽扣制作。招生广告明确写着"免学费、包分配"。首批招收78人，还推出了响亮的口号"双手万能、手脑并用"。 + + + 这所学校特别厉害，教室和车间连在一起，学生可以一边学理论，一边练技能。学校铁工厂制作的台钳，后来还成了"国货精品"，甚至在巴拿马万国博览会上拿过金奖呢！ + + + + {/* 视频播放 */} + {showVideo && ( +
@@ -131,6 +139,11 @@ const HuangyanpeiPlace5 = () => { { if (activeExhibitId !== null) { @@ -144,6 +157,72 @@ const HuangyanpeiPlace5 = () => { }} /> + {/* 展品2视频后的引导对话 */} + { + setGuideVisible(visible); + // 对话结束后显示题目 + if (!visible) { + setShowQuiz(true); + } + }} + showMask={true} + highlightSelectors={[]} + zIndex={10000} + > + + 哇!这就是历史课上学的"窑洞对"!黄炎培先生和毛主席的这次谈话,是不是破解了"历史周期率"呀? + + + 完全正确!1945年7月1日,黄炎培以国民参政员的身份,带着考察团一行六人赴延安考察,中共中央领导人毛泽东、朱德、周恩来等都亲自到机场迎接。7月4日,他和毛泽东主席长谈了十几个小时,这场对话能和诸葛亮的"隆中对"相媲美。 + + + 谈话中,黄炎培提出了一个深刻的问题:"其兴也勃焉,其亡也忽焉",也就是历代王朝逃不开的"历史周期率"。毛泽东主席当场回答:"我们已经找到新路,这条新路就是民主。 + + + "后来,黄炎培把这段对话写进了《延安归来》这本书,一夜之间就畅销十万册,成为当时最热门的书籍,而"实行民主"也被大家称为破解历史周期率的"初版答案"。 + + + + {/* 题目 */} + { + if (isCorrect) { + setVideoVisible(false); + setShowQuiz(false); + setShowSuccessAlert(true); + } + }} + zIndex={10001} + /> + + {/* 成功提示 */} + { + setShowSuccessAlert(false); + setVisited((prev) => { + const next = new Set(prev); + next.add(2); + return next; + }); + }} + onClose={() => { + setShowSuccessAlert(false); + }} + /> + {/* 学习引导（进入场景即显示，与 place1 保持一致） */} { const [visited, setVisited] = useState>(new Set()); // 学习引导弹窗（进入场景即显示） const [showGuideModal, setShowGuideModal] = useState(true); + // 对话引导状态 + const [guideVisible, setGuideVisible] = useState(false); const handleOpenExhibit = (index: 1) => { + // 同时打开展品和对话 setActiveExhibitId(index); + setGuideVisible(true); }; const progressCount = visited.size; @@ -77,7 +83,7 @@ const HuangyanpeiPlace6 = () => { src={getStaticImage("components/place/继续前进")} button onClick={() => { - navigate(`/${moduleName}/${starName}/reflection`); + navigate(`/${moduleName}/${starName}/home`); }} /> )} @@ -97,6 +103,28 @@ const HuangyanpeiPlace6 = () => { }} /> + {/* 对话引导 */} + + + 新中国成立后,黄炎培先生还继续从事教育工作吗?我们现在的中职教育体系,是不是也有他当年的理念呀? + + + 当然啦!1949年10月19日,71岁的黄炎培出任政务院副总理兼轻工业部部长,依然没有放下他毕生追求的职业教育事业。他把中华职教社的骨干力量全部调到北京,亲自起草《关于改革学制的决定》,第一次把"中等专业学校"正式纳入国家学制,让职业教育有了明确的国家定位。 + + + 1952年,他又推动建立了上海机械学校、南京航空学校等五所中专,这些学校为国家"一五"计划输送了6.3万名技术工人,为工业发展提供了坚实的人才支撑。 + + + 黄炎培先生曾说过:"我要把最后一滴血,滴在职业教育的讲台上。"他用一生践行了这句话,而我们现在中职教育强调的"工学结合、德技并修",正是对他"手脑并用、注重实践"理念的传承和发展。 + + + {/* 学习引导（进入场景即显示，与 place1 保持一致） */}