feat:完善黄炎培对话引导
This commit is contained in:
zhongyidian committed
1 parent
6ab184b328
commit
e8dc5d4b95
7 files changed
+231
-23
No files matched your search
@@ -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<Set<number>>(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<VideoRef>(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 */}
|
||||
<Cursor
|
||||
className="absolute left-42 top-78"
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
read={visited.has(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)}
|
||||
/>
|
||||
{/* 光标4 */}
|
||||
<Cursor
|
||||
className="absolute right-62 top-102"
|
||||
onClick={() => handleOpenExhibit(4)}
|
||||
read={visited.has(4)}
|
||||
/>
|
||||
{/* 光标5 */}
|
||||
<Cursor
|
||||
className="absolute right-205 top-110"
|
||||
onClick={() => handleOpenExhibit(5)}
|
||||
@@ -108,8 +142,16 @@ const HuangyanpeiPlace4 = () => {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 展品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) {
|
||||
@@ -123,6 +165,66 @@ const HuangyanpeiPlace4 = () => {
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 光标3、4的引导对话 */}
|
||||
<GuideSteps
|
||||
visible={guide34Visible}
|
||||
onVisibleChange={(visible) => {
|
||||
setGuide34Visible(visible);
|
||||
// 对话结束后播放视频
|
||||
if (!visible) {
|
||||
setShowVideo(true);
|
||||
}
|
||||
}}
|
||||
showMask={true}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem speaker="student">
|
||||
职业教育这个词是黄炎培先生创造的吗？
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
这个词不是他创造的，但体系是他建立的。1917年5月6日，黄炎培与蔡元培、张謇等48位有识之士在上海成立"中华职业教育社"，并发表《宣言》，直指当时教育的问题——"今之教育，为少数人升官发财，非为多数人衣食住行"。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
1918年，他在上海陆家浜创办中华职业学校。最初开设三个科目：铁工、木工和纽扣制作。招生广告明确写着"免学费、包分配"。首批招收78人，还推出了响亮的口号"双手万能、手脑并用"。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
这所学校特别厉害，教室和车间连在一起，学生可以一边学理论，一边练技能。学校铁工厂制作的台钳，后来还成了"国货精品"，甚至在巴拿马万国博览会上拿过金奖呢！
|
||||
</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人,凭借( )口号和"免学费、包分配"的优待,开创了中国近代职业教育的先河。'
|
||||
options={[
|
||||
{ value: "A", label: "A. 学而优则仕" },
|
||||
{ value: "B", label: "B. 双手万能、手脑并用" },
|
||||
{ value: "C", label: "C. 实业救国、教育兴国" },
|
||||
{ value: "D", label: "D. 民主科学、救国救民" },
|
||||
]}
|
||||
correctAnswer="B"
|
||||
errorMessage='1918年黄炎培在上海创办中华职业学校,首批招78人,以"免学费、包分配"的实惠和"双手万能、手脑并用"的响亮口号,打破"学而优则仕"的传统观念,首设铁工、木工、纽扣科,把课堂与车间合一,开创了中国近代职业教育的先河,因此选B。'
|
||||
onSubmit={handleQuizSubmit}
|
||||
zIndex={10001}
|
||||
/>
|
||||
|
||||
{/* 学习引导（进入场景即显示，与 place1 保持一致） */}
|
||||
<StudyGuideModal
|
||||
visible={showGuideModal}
|
||||
|
||||
Reference in new issue
Block a user