feat: 更新音频和引导对话,优化用户体验

- 在多个场景中添加音频资源,增强学习互动性。
- 更新引导对话文本,确保信息准确性和一致性。
- 调整组件结构,清理不必要的代码,提升可维护性。
- 引入结束窗口,鼓励用户深入了解历史背景。
This commit is contained in:
zhongyidian committed 2026-01-15 19:30:17 +08:00
1 parent d7ff7d3a45
commit 6e106032fd
141 files changed
+1375 -479

No files matched your search

+57 -60
View File
@@ -36,31 +36,31 @@ const starName = "huangyanpei";
// 锚点数据:根据视频时长调整 time
const QUIZ_ANCHORS: QuizAnchor[] = [
{
id: "quiz-1",
time: 96, // 1:36
title: "题目1",
prompt:
"当年黄炎培先生创办中华职业学校,开设的专业都是当时中国最需要的实业领域,分别是( )。",
type: "multiple",
options: [
{ value: "A", label: "铁工", isCorrect: true },
{
value: "B",
label: "自动控制",
},
{ value: "C", label: "木工", isCorrect: true },
{ value: "D", label: "纽扣科", isCorrect: true },
],
explanation:
"自动控制”这一工程理论框架成形于20世纪中叶,70年代实现集中控制,在民国时期,没有相关学科基础、设备与技术条件",
},
// {
// id: "quiz-1",
// time: 96, // 1:36
// title: "题目1",
// prompt:
// "当年黄炎培先生创办中华职业学校,开设的专业都是当时中国最需要的实业领域,分别是( )。",
// type: "multiple",
// options: [
// { value: "A", label: "铁工", isCorrect: true },
// {
// value: "B",
// label: "自动控制",
// },
// { value: "C", label: "木工", isCorrect: true },
// { value: "D", label: "纽扣科", isCorrect: true },
// ],
// explanation:
// "自动控制”这一工程理论框架成形于20世纪中叶,70年代实现集中控制,在民国时期,没有相关学科基础、设备与技术条件",
// },
{
id: "quiz-2",
time: 221, // 3:41
title: "题目2",
prompt:
"黄炎培先生主导设计的课程与现在中职学校强调的理实一体这一理念相通是( )。",
"黄炎培先生主导设计的课程与现在中职学校强调的理实一体这一理念相通是:",
type: "multiple",
options: [
{
@@ -96,9 +96,9 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
{ value: "特斯拉", label: "特斯拉" },
{ value: "比亚迪", label: "比亚迪" },
{ value: "华为", label: "华为" },
{ value: "上海电气", label: "上海电气" },
{ value: "江南造船", label: "江南造船" },
{ value: "光明食品", label: "光明食品" },
{ value: "拼多多", label: "拼多多" },
{ value: "C919飞机", label: "C919飞机" },
],
blanks: [
{ id: "blank-1", label: "国产企业1" },
@@ -108,29 +108,29 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
{ id: "blank-5", label: "国产企业5" },
],
},
{
id: "quiz-4",
time: 467, // 7:47
title: "题目4",
prompt:
'当年现在的中职教育一直在"因时求变",许多专业的新增和关联正确的是( )。',
type: "multiple",
options: [
{ value: "A", label: "汽修专业→学新能源汽车检测与维修", isCorrect: true },
{
value: "B",
label: "会计专业→要掌握大数据财务和智能记账",
isCorrect: true,
},
{ value: "C", label: "国货推销→跨境电商、直播带货", isCorrect: true },
{
value: "D",
label: "美术设计与制作→影像与影视技术",
},
],
explanation:
"美术设计与制作专业侧重于平面设计,而影像与影视技术专业侧重于影视特效后期,两者的专业核心课程涉及的软硬件也有差异",
},
// {
// id: "quiz-4",
// time: 467, // 7:47
// title: "题目4",
// prompt:
// '当年现在的中职教育一直在"因时求变",许多专业的新增和关联正确的是( )。',
// type: "multiple",
// options: [
// { value: "A", label: "汽修专业→学新能源汽车检测与维修", isCorrect: true },
// {
// value: "B",
// label: "会计专业→要掌握大数据财务和智能记账",
// isCorrect: true,
// },
// { value: "C", label: "国货推销→跨境电商、直播带货", isCorrect: true },
// {
// value: "D",
// label: "美术设计与制作→影像与影视技术",
// },
// ],
// explanation:
// "美术设计与制作专业侧重于平面设计,而影像与影视技术专业侧重于影视特效后期,两者的专业核心课程涉及的软硬件也有差异",
// },
];
const HuangyanpeiInternalization = () => {
@@ -203,7 +203,7 @@ const HuangyanpeiInternalization = () => {
if (hasInvalidOption) {
setDragQuizErrors((prev) => ({
...prev,
[item.id]: "特斯拉不是中国国产企业哦~",
[item.id]: "特斯拉为外资企业哦~",
}));
return;
}
@@ -214,9 +214,9 @@ const HuangyanpeiInternalization = () => {
const validAnswers = [
"比亚迪",
"华为",
"上海电气",
"江南造船",
"光明食品",
"拼多多",
"C919飞机",
];
const filledAnswers = val.map((v) => v.optionValue);
const isCorrect = filledAnswers.every((answer) =>
@@ -240,9 +240,9 @@ const HuangyanpeiInternalization = () => {
<DragQuizPanel
visible={activeSuccess !== item.id}
zIndex={10000}
title={`${item.title}(拖拽)`}
title={`【拖拽】`}
questionPrefix={item.prompt}
questionSuffix=""
questionSuffix="。"
options={item.options.map((opt) => ({
value: opt.value,
label: opt.label,
@@ -292,7 +292,7 @@ const HuangyanpeiInternalization = () => {
<MultipleChoiceQuizPanel
visible={activeSuccess !== item.id}
zIndex={10000}
title={`${item.title}(多选题):${item.prompt}`}
title={`【多选】${item.prompt}`}
options={item.options.map((opt) => ({
value: opt.value,
label: `${opt.value}. ${opt.label}`,
@@ -381,11 +381,9 @@ const HuangyanpeiInternalization = () => {
setPostGuideVisible(true);
if (audioRef.current) {
audioRef.current.currentTime = 0;
audioRef.current
.play()
.catch((error) => {
console.warn("背景音乐播放失败:", error);
});
audioRef.current.play().catch((error) => {
console.warn("背景音乐播放失败:", error);
});
}
}}
/>
@@ -404,13 +402,13 @@ const HuangyanpeiInternalization = () => {
showMask={false}
>
<GuideStepsItem speaker="student">
小沪,刚刚结束的"任之成长记"太有意思了!我变成百年前的川沙少年选课程、做手工、设计国货推销方案,好像真的走进了黄炎培先生的职教世界。
小沪,刚刚结束的"小职成长记"太有意思了!我变成百年前的川沙少年选课程、做手工、设计国货推销方案,好像真的走进了黄炎培先生的职教世界。
</GuideStepsItem>
<GuideStepsItem speaker="student">
但我还有一个疑问:先生当年倡导的"手脑并用、工学结合",放在我们现在的中职学习中,到底有什么样的意义呢?
</GuideStepsItem>
<GuideStepsItem speaker="guide">
这个问题问到点子上啦!黄炎培先生的职教思想,从来不是尘封的历史,而是活在当下的行动指南。今天我们特别邀请到中华职业教育社第十三届理事会常务理事、中华职业学校党总支书记、校长黄玉璟,让她带我们解码先生精神的时代密码!
这个问题问到点子上啦!黄炎培先生的职教思想,从来不是尘封的历史,而是活在当下的行动指南。今天我们特别邀请到中华职业教育社第十三届理事会常务理事、中华职业学校党总支副书记、校长黄玉璟,让她带我们解码先生精神的时代密码!
</GuideStepsItem>
</GuideSteps>
@@ -452,8 +450,7 @@ const HuangyanpeiInternalization = () => {
navigate(`/${moduleName}/${starName}/home`);
}}
>
恭喜你已经顺利完成了黄炎培故居的学习,至此,你已经完成了本课程所有故居的学习,
希望你能有所收获,学习八位名人的优秀品质和精神,在新时代为中华民族伟大复兴发光发热!
恭喜你已经顺利完成了黄炎培故居的学习,请继续前往下一个故居吧!
</StudyGuideModal>
</div>
);