zhongyidian
a8723ab4aa
- 在多个场景中引入音频文件，增强互动性和沉浸感。 - 更新引导对话文本，确保信息准确性和一致性。 - 调整组件结构，清理冗余代码，提升可维护性。 - 引入结束窗口，鼓励用户深入了解黄炎培的教育理念。
336 lines
12 KiB
TypeScript
336 lines
12 KiB
TypeScript
import { useState, useEffect, useRef } from "react";
|
|
import {
|
|
ExhibitOverlay,
|
|
Title,
|
|
Image,
|
|
Cursor,
|
|
GuideSteps,
|
|
GuideStepsItem,
|
|
SingleChoiceQuizPanel,
|
|
Video,
|
|
} from "@/components";
|
|
import { SuccessAlert } from "@/components/layout";
|
|
import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import type { VideoRef } from "@/components/video";
|
|
import { useCursorController } from "@/hooks/useCursorController";
|
|
|
|
const starName = "huangyanpei";
|
|
|
|
const exhibitSrcMap: Record<1 | 2 | 3 | 4 | 5, string> = {
|
|
1: "huangyanpei/place4/6_006",
|
|
2: "huangyanpei/place4/6_007",
|
|
3: "huangyanpei/place4/6_008",
|
|
4: "huangyanpei/place4/6_009",
|
|
5: "huangyanpei/place4/6_010",
|
|
};
|
|
|
|
const HuangyanpeiPlace4 = () => {
|
|
const navigate = useNavigate();
|
|
const { moduleName } = useParams<{
|
|
moduleName: string;
|
|
}>();
|
|
|
|
const [activeExhibitId, setActiveExhibitId] = useState<1 | 3 | 4 | 5 | null>(
|
|
null
|
|
);
|
|
const [visited, setVisited] = useState<Set<number>>(new Set());
|
|
const { isEnabled } = useCursorController({
|
|
initialEnabled: [3, 5],
|
|
dependencies: {
|
|
1: [3, 5],
|
|
4: [1],
|
|
// 2 已注释，不计入顺序
|
|
},
|
|
visited,
|
|
});
|
|
|
|
// 光标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);
|
|
// 题目显示状态
|
|
const [showQuiz, setShowQuiz] = useState(false);
|
|
// 成功提示状态
|
|
const [showSuccessAlert, setShowSuccessAlert] = useState(false);
|
|
const videoRef = useRef<VideoRef>(null);
|
|
|
|
const handleOpenExhibit = (index: 1 | 3 | 4 | 5) => {
|
|
setActiveExhibitId(index);
|
|
if (index === 1) {
|
|
setGuide1Step(0);
|
|
setGuide1Visible(true);
|
|
}
|
|
|
|
if (index === 4) {
|
|
setGuide5Step(0);
|
|
setGuide5Visible(true);
|
|
}
|
|
};
|
|
|
|
// 监听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);
|
|
setShowSuccessAlert(true);
|
|
}
|
|
};
|
|
|
|
const progressCount = visited.size;
|
|
const total = 4;
|
|
const completed = progressCount >= total;
|
|
const subtitle = completed
|
|
? "探索黄炎培创立职教(已完成)"
|
|
: `探索黄炎培创立职教(${progressCount}/${total})`;
|
|
const subtitleClassName = completed
|
|
? "text-[#fff998] [text-shadow:_0_8px_8px_rgba(0,0,0,0.35),_0_0_16px_rgba(0,0,0,0.25)]"
|
|
: undefined;
|
|
|
|
return (
|
|
<div
|
|
className="w-full h-full bg-cover bg-center bg-no-repeat"
|
|
style={{
|
|
backgroundImage: getBackgroundImage(`huangyanpei/place4/6_001`),
|
|
}}
|
|
>
|
|
<Title
|
|
title="创立职教"
|
|
subtitle={subtitle}
|
|
subtitleClassName={subtitleClassName}
|
|
className="absolute top-10 left-1/2 -translate-x-1/2"
|
|
/>
|
|
|
|
<Image
|
|
className="absolute right-5 top-5"
|
|
src={getStaticImage("components/离开")}
|
|
button
|
|
onClick={() => {
|
|
if (moduleName && starName) {
|
|
navigate(`/${moduleName}/${starName}/place3`);
|
|
}
|
|
}}
|
|
/>
|
|
|
|
{/* 光标1 */}
|
|
<Cursor
|
|
className="absolute left-42 top-102"
|
|
onClick={() => handleOpenExhibit(1)}
|
|
size={1}
|
|
read={visited.has(1)}
|
|
disabled={!isEnabled(1)}
|
|
/>
|
|
{/* 光标2 */}
|
|
{/* <Cursor
|
|
className="absolute left-40 top-132"
|
|
onClick={() => handleOpenExhibit(2)}
|
|
read={visited.has(2)}
|
|
/> */}
|
|
{/* 光标3 */}
|
|
<Cursor
|
|
className="absolute left-125 top-100"
|
|
onClick={() => handleOpenExhibit(3)}
|
|
read={visited.has(3)}
|
|
disabled={!isEnabled(3)}
|
|
/>
|
|
{/* 光标4 */}
|
|
<Cursor
|
|
className="absolute right-62 top-102"
|
|
onClick={() => handleOpenExhibit(4)}
|
|
read={visited.has(4)}
|
|
disabled={!isEnabled(4)}
|
|
/>
|
|
{/* 光标5 */}
|
|
<Cursor
|
|
className="absolute right-205 top-110"
|
|
onClick={() => handleOpenExhibit(5)}
|
|
read={visited.has(5)}
|
|
disabled={!isEnabled(5)}
|
|
/>
|
|
|
|
{completed && (
|
|
<Image
|
|
className="absolute bottom-0 right-4"
|
|
src={getStaticImage("components/place/继续前进")}
|
|
button
|
|
onClick={() => {
|
|
navigate(`/${moduleName}/${starName}/place5`);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* 展品1、2、4出现描述 */}
|
|
<ExhibitOverlay
|
|
visible={activeExhibitId !== null}
|
|
// description={
|
|
// activeExhibitId === 1 ||
|
|
// activeExhibitId === 2 ||
|
|
// activeExhibitId === 4
|
|
// ? "黄炎培先生一直怀揣着“教育救国”的理想，职业教育从来都和国家命运紧紧连在一起。1932年“一・二八”事变爆发，黄炎培立刻组织了抗日救国研究会，一边支援前线输送军需，一边维持地方秩序、稳定金融市场，还创办了“一・二八”残废院，专门收容受伤战士和无家可归的难民。“八・一三”抗战爆发后，他担任上海抗战后援会主席，组织民众设难民所、医疗队和后方医院，还成立了青年战地服务团，冒着枪林弹雨为前线军队服务。他自己不顾日机轰炸的危险，九次往返南京与上海之间，协助政府募集救国公债。正是这样的全民抗敌，粉碎了日军“一个月灭亡中国”的狂妄企图。这期间，1935年中华职业教育社还与荣氏三兄弟合作，在申新三厂办理劳动工自治区，对工人进行文化教育。"
|
|
// : undefined
|
|
// }
|
|
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
|
|
onClose={() => {
|
|
if (activeExhibitId !== null) {
|
|
setVisited((prev) => {
|
|
const next = new Set(prev);
|
|
next.add(activeExhibitId);
|
|
return next;
|
|
});
|
|
}
|
|
setActiveExhibitId(null);
|
|
}}
|
|
/>
|
|
|
|
{/* 光标1的对话 */}
|
|
<GuideSteps
|
|
visible={guide1Visible}
|
|
currentStep={guide1Step}
|
|
onStepChange={setGuide1Step}
|
|
onVisibleChange={(visible) => {
|
|
setGuide1Visible(visible);
|
|
}}
|
|
showMask={false}
|
|
zIndex={10000}
|
|
>
|
|
<GuideStepsItem
|
|
speaker="student"
|
|
audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_13.mp3")}
|
|
>
|
|
真没想到中华职校还组织过义勇军！我们现在也会参加国防教育、志愿服务，当年的职业教育不仅教技能，还这么注重爱国主义教育呀？
|
|
</GuideStepsItem>
|
|
<GuideStepsItem
|
|
speaker="guide"
|
|
audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_14.mp3")}
|
|
>
|
|
没错！黄炎培先生一直怀揣着“教育救国”的理想，职业教育从来都和国家命运紧紧连在一起。
|
|
</GuideStepsItem>
|
|
<GuideStepsItem speaker="guide">
|
|
1932年“一・二八”事变爆发，黄炎培立刻组织了抗日救国研究会，一边支援前线输送军需，一边维持地方秩序、稳定金融市场，还创办了“一・二八”残废院，专门收容受伤战士和无家可归的难民。
|
|
</GuideStepsItem>
|
|
<GuideStepsItem speaker="guide">
|
|
“八・一三”抗战爆发后，他担任上海抗战后援会主席，组织民众设难民所、医疗队和后方医院，还成立了青年战地服务团，冒着枪林弹雨为前线军队服务。他自己不顾日机轰炸的危险，九次往返南京与上海之间，协助政府募集救国公债。
|
|
</GuideStepsItem>
|
|
<GuideStepsItem speaker="guide">
|
|
正是这样的全民抗敌，粉碎了日军“一个月灭亡中国”的狂妄企图。
|
|
</GuideStepsItem>
|
|
</GuideSteps>
|
|
|
|
{/* 光标3、5的引导对话 */}
|
|
<GuideSteps
|
|
visible={guide34Visible}
|
|
onVisibleChange={(visible) => {
|
|
setGuide34Visible(visible);
|
|
// 对话结束后播放视频
|
|
if (!visible) {
|
|
setShowVideo(true);
|
|
}
|
|
}}
|
|
showMask={false}
|
|
highlightSelectors={[]}
|
|
zIndex={10000}
|
|
>
|
|
<GuideStepsItem
|
|
speaker="student"
|
|
audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_11.mp3")}
|
|
>
|
|
职业教育这个词是黄炎培先生创造的吗？
|
|
</GuideStepsItem>
|
|
<GuideStepsItem
|
|
speaker="guide"
|
|
audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_12.mp3")}
|
|
>
|
|
这个词不是他创造的，但体系是他建立的。1917年5月6日，黄炎培联合蔡元培、张謇等48位有识之士，在上海成立了“中华职业教育社”，并发表了《中华职业教育社宣言》。
|
|
</GuideStepsItem>
|
|
<GuideStepsItem speaker="guide">
|
|
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"
|
|
audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_15.mp3")}
|
|
>
|
|
这期间，1935年中华职业教育社还与荣氏三兄弟合作，再申新三厂办理劳动工自治区，对工人进行文化教育。
|
|
</GuideStepsItem>
|
|
</GuideSteps>
|
|
|
|
{/* 视频播放 */}
|
|
{showVideo && (
|
|
<Video
|
|
ref={videoRef}
|
|
src={getPublicPath("video/huangyanpei/huangyanpei_05.mp4")}
|
|
className="fixed inset-0 z-[20000]"
|
|
autoPlay
|
|
playsInline
|
|
showSkipButton
|
|
onEnded={() => {
|
|
setShowVideo(false);
|
|
setShowQuiz(true);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* 题目 */}
|
|
<SingleChoiceQuizPanel
|
|
visible={showQuiz}
|
|
title={`【单选】中华职业学校首批招生78人,凭借(\xa0\xa0\xa0\xa0)口号和"免学费、包分配"的优待,开创了中国近代职业教育的先河。`}
|
|
options={[
|
|
{ value: "A", label: "A. 学而优则仕" },
|
|
{ value: "B", label: "B. 双手万能、手脑并用" },
|
|
{ value: "C", label: "C. 实业救国、教育兴国" },
|
|
{ value: "D", label: "D. 民主科学、救国救民" },
|
|
]}
|
|
correctAnswer="B"
|
|
errorMessage="1918年黄炎培在上海创办中华职业学校，首批招78人，以“免学费、包分配”的实惠和“双手万能、手脑并用”的响亮口号，打破“学而优则仕”的传统观念，设铁工、木工、珐琅、纽扣科，把课堂与车间合一，开创了中国近代职业教育的先河。"
|
|
onSubmit={handleQuizSubmit}
|
|
zIndex={10001}
|
|
/>
|
|
|
|
{/* 成功提示 */}
|
|
<SuccessAlert
|
|
visible={showSuccessAlert}
|
|
onContinue={() => {
|
|
setShowSuccessAlert(false);
|
|
}}
|
|
onClose={() => {
|
|
setShowSuccessAlert(false);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HuangyanpeiPlace4;
|