feat: 添加连线题和选择题功能，增强互动性
- 在多个组件中引入 MatchQuizPanel 和 SingleChoiceQuizPanel，提升用户参与度。 - 更新 HuangyanpeiPlace1、HuangyanpeiPlace3、LuxunPlace1、LuxunPlace2 组件，增加新的选择题和连线题，丰富学习内容。 - 调整成功提示逻辑，确保用户体验流畅。 - 优化视频播放中的锚点逻辑，提升互动性和学习效果。
This commit is contained in:
zhongyidian committed
1 parent
02a3f00a9b
commit
966b47ede3
12 files changed
+1128
-42
No files matched your search
@@ -247,7 +247,7 @@ const HuangyanpeiInternalization = () => {
|
||||
} else {
|
||||
setDragQuizErrors((prev) => ({
|
||||
...prev,
|
||||
[item.id]: "再想一想，确保选择的都是中国国产企业/品牌～",
|
||||
[item.id]: "特斯拉是美国品牌。请你再想想吧！",
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
@@ -96,6 +96,14 @@ const HuangyanpeiPlace3 = () => {
|
||||
// 光标1、2的引导对话状态（在两者都浏览后显示）
|
||||
const [guide12Visible, setGuide12Visible] = useState(false);
|
||||
const [guide12Shown, setGuide12Shown] = useState(false);
|
||||
// 题目3（开群女学）显示状态
|
||||
const [showQuiz3_12, setShowQuiz3_12] = useState(false);
|
||||
// 题目3成功提示状态
|
||||
const [showQuiz3Success, setShowQuiz3Success] = useState(false);
|
||||
// 题目4（浦东中学）显示状态
|
||||
const [showQuiz4, setShowQuiz4] = useState(false);
|
||||
// 题目4成功提示状态
|
||||
const [showQuiz4Success, setShowQuiz4Success] = useState(false);
|
||||
|
||||
const handleOpenExhibit = (index: 1 | 2 | 3) => {
|
||||
if (index === 3) {
|
||||
@@ -187,6 +195,50 @@ const HuangyanpeiPlace3 = () => {
|
||||
}
|
||||
}, [visited, guide12Shown]);
|
||||
|
||||
// 处理guide12Visible变化，对话结束后显示题目3
|
||||
const handleGuide12VisibleChange = (visible: boolean) => {
|
||||
setGuide12Visible(visible);
|
||||
// 当对话关闭时，显示题目3
|
||||
if (!visible && guide12Shown) {
|
||||
setShowQuiz3_12(true);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理题目3提交
|
||||
const handleQuiz3_12Submit = (value: string, isCorrect: boolean) => {
|
||||
if (isCorrect) {
|
||||
setShowQuiz3_12(false);
|
||||
setShowQuiz3Success(true);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理题目3成功提示继续
|
||||
const handleQuiz3SuccessContinue = () => {
|
||||
setShowQuiz3Success(false);
|
||||
// 显示题目4
|
||||
setShowQuiz4(true);
|
||||
};
|
||||
|
||||
// 处理题目4提交
|
||||
const handleQuiz4Submit = (value: string, isCorrect: boolean) => {
|
||||
if (isCorrect) {
|
||||
setShowQuiz4(false);
|
||||
setShowQuiz4Success(true);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理题目4成功提示继续
|
||||
const handleQuiz4SuccessContinue = () => {
|
||||
setShowQuiz4Success(false);
|
||||
// 标记展品1和2为已访问，触发继续前进按钮显示
|
||||
if (!visited.has(1)) {
|
||||
markExhibitVisited(place, 1);
|
||||
}
|
||||
if (!visited.has(2)) {
|
||||
markExhibitVisited(place, 2);
|
||||
}
|
||||
};
|
||||
|
||||
const progressCount = visited.size;
|
||||
const total = 3;
|
||||
const completed = progressCount >= total;
|
||||
@@ -373,10 +425,70 @@ const HuangyanpeiPlace3 = () => {
|
||||
onClose={handleDragQuizSuccessContinue}
|
||||
/>
|
||||
|
||||
{/* 题目3（开群女学） */}
|
||||
<SingleChoiceQuizPanel
|
||||
visible={showQuiz3_12}
|
||||
title="【单选】黄炎培和堂兄黄洪培、堂嫂陆开群一起,策划创建的开创了浦东地区女子教育的先河的学校为:"
|
||||
options={[
|
||||
{ value: "A", label: "A. 开群女学" },
|
||||
{ value: "B", label: "B. 上海女子师范学校" },
|
||||
{ value: "C", label: "C. 浦东中学" },
|
||||
]}
|
||||
correctAnswer="A"
|
||||
onWrongSelect={(value) => {
|
||||
switch (value) {
|
||||
case "B":
|
||||
return "上海女子师范学校是上海市区的女子教育机构,并非由黄炎培等人在浦东地区创办。请你再想想吧!";
|
||||
case "C":
|
||||
return "浦东中学是一所面向男女学生的综合性中学,并非专门的女子学校。请你再想想吧!";
|
||||
default:
|
||||
return "请你再想想吧!";
|
||||
}
|
||||
}}
|
||||
onSubmit={handleQuiz3_12Submit}
|
||||
/>
|
||||
|
||||
{/* 题目3成功提示 */}
|
||||
<SuccessAlert
|
||||
visible={showQuiz3Success}
|
||||
onContinue={handleQuiz3SuccessContinue}
|
||||
onClose={handleQuiz3SuccessContinue}
|
||||
/>
|
||||
|
||||
{/* 题目4（浦东中学） */}
|
||||
<SingleChoiceQuizPanel
|
||||
visible={showQuiz4}
|
||||
title="【单选】由黄炎培担任首任校长的浦东中学是:"
|
||||
options={[
|
||||
{ value: "A", label: "A. 近代上海第一所女子中学" },
|
||||
{ value: "B", label: "B. 近代上海第一所职业技术学校" },
|
||||
{ value: "C", label: "C. 近代上海第一所完全中学" },
|
||||
]}
|
||||
correctAnswer="C"
|
||||
onWrongSelect={(value) => {
|
||||
switch (value) {
|
||||
case "A":
|
||||
return "浦东中学是一所男女同校的综合性中学,并非女子中学。请你再想想吧!";
|
||||
case "B":
|
||||
return "浦东中学以普通中学教育为主,其定位是培养全面发展的人才,并非职业技术学校。请你再想想吧!";
|
||||
default:
|
||||
return "请你再想想吧!";
|
||||
}
|
||||
}}
|
||||
onSubmit={handleQuiz4Submit}
|
||||
/>
|
||||
|
||||
{/* 题目4成功提示 */}
|
||||
<SuccessAlert
|
||||
visible={showQuiz4Success}
|
||||
onContinue={handleQuiz4SuccessContinue}
|
||||
onClose={handleQuiz4SuccessContinue}
|
||||
/>
|
||||
|
||||
{/* 光标1、2的引导对话 */}
|
||||
<GuideSteps
|
||||
visible={guide12Visible}
|
||||
onVisibleChange={setGuide12Visible}
|
||||
onVisibleChange={handleGuide12VisibleChange}
|
||||
showMask={false}
|
||||
zIndex={10000}
|
||||
>
|
||||
|
||||
@@ -41,7 +41,11 @@ const HuangyanpeiPlace5 = () => {
|
||||
// 展品2视频后的对话引导状态
|
||||
const [guideVisible, setGuideVisible] = useState(false);
|
||||
const [guideStep, setGuideStep] = useState(0);
|
||||
// 题目显示状态
|
||||
// 题目1（光标1对话后）显示状态
|
||||
const [showQuiz1, setShowQuiz1] = useState(false);
|
||||
// 题目1成功提示状态
|
||||
const [showQuiz1Success, setShowQuiz1Success] = useState(false);
|
||||
// 题目显示状态（展品2视频后）
|
||||
const [showQuiz, setShowQuiz] = useState(false);
|
||||
// 成功提示状态
|
||||
const [showSuccessAlert, setShowSuccessAlert] = useState(false);
|
||||
@@ -177,7 +181,15 @@ const HuangyanpeiPlace5 = () => {
|
||||
}}
|
||||
onClose={() => {
|
||||
if (activeExhibitId !== null) {
|
||||
markExhibitVisited(place, activeExhibitId);
|
||||
// 如果是展品1关闭，显示题目1
|
||||
if (activeExhibitId === 1) {
|
||||
setShowQuiz1(true);
|
||||
}
|
||||
// 注意：展品1的已访问标记在题目1成功后处理，这里不标记
|
||||
// 展品2正常标记
|
||||
if (activeExhibitId === 2) {
|
||||
markExhibitVisited(place, activeExhibitId);
|
||||
}
|
||||
}
|
||||
setActiveExhibitId(null);
|
||||
}}
|
||||
@@ -188,9 +200,7 @@ const HuangyanpeiPlace5 = () => {
|
||||
visible={guide1Visible}
|
||||
currentStep={guide1Step}
|
||||
onStepChange={setGuide1Step}
|
||||
onVisibleChange={(visible) => {
|
||||
setGuide1Visible(visible);
|
||||
}}
|
||||
onVisibleChange={setGuide1Visible}
|
||||
showMask={false}
|
||||
zIndex={10000}
|
||||
>
|
||||
@@ -217,6 +227,50 @@ const HuangyanpeiPlace5 = () => {
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 题目1（光标1对话后） */}
|
||||
<SingleChoiceQuizPanel
|
||||
visible={showQuiz1}
|
||||
title="【单选】黄炎培先生创建民主政团同盟等组织是为了:"
|
||||
options={[
|
||||
{ value: "A", label: "A. 为国家寻求一条和平发展的道路" },
|
||||
{ value: "B", label: 'B. 支持国民党"攘外必先安内"的政策' },
|
||||
{ value: "C", label: "C. 扩大个人政治影响力,争夺权力" },
|
||||
]}
|
||||
correctAnswer="A"
|
||||
onWrongSelect={(value) => {
|
||||
switch (value) {
|
||||
case "B":
|
||||
return '国民党政府坚持"攘外必先安内"的政策导致国共关系紧张,黄炎培正是因为反对这种政策、希望推动和平,才发起组建了民主政团同盟。请你再想想吧!';
|
||||
case "C":
|
||||
return "黄炎培创建民主政团同盟的出发点是民族大义与国家前途,并非为了个人政治利益。请你再想想吧!";
|
||||
default:
|
||||
return "请你再想想吧!";
|
||||
}
|
||||
}}
|
||||
onSubmit={(value, isCorrect) => {
|
||||
if (isCorrect) {
|
||||
setShowQuiz1(false);
|
||||
setShowQuiz1Success(true);
|
||||
}
|
||||
}}
|
||||
zIndex={10001}
|
||||
/>
|
||||
|
||||
{/* 题目1成功提示 */}
|
||||
<SuccessAlert
|
||||
visible={showQuiz1Success}
|
||||
onContinue={() => {
|
||||
setShowQuiz1Success(false);
|
||||
// 标记展品1为已访问，修改cursor状态
|
||||
markExhibitVisited(place, 1);
|
||||
}}
|
||||
onClose={() => {
|
||||
setShowQuiz1Success(false);
|
||||
// 标记展品1为已访问，修改cursor状态
|
||||
markExhibitVisited(place, 1);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 光标2的引导对话 */}
|
||||
<GuideSteps
|
||||
visible={guideVisible}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Title, Image, Cursor, StudyGuideModal } from "@/components";
|
||||
import { Title, Image, Cursor, StudyGuideModal, SingleChoiceQuizPanel } from "@/components";
|
||||
import { SuccessAlert } from "@/components/layout";
|
||||
import { getBackgroundImage, getPublicPath, getStaticImage } from "@/lib/utils";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import ChoiceDialog1 from "./scene2/ChoiceDialog1";
|
||||
@@ -20,6 +21,10 @@ const HuangyanpeiReflectionScene2 = () => {
|
||||
const [choice2, setChoice2] = useState<"铁工科" | "商科" | null>(null);
|
||||
const [showCompleteGuide, setShowCompleteGuide] = useState(false);
|
||||
const [completeGuideShown, setCompleteGuideShown] = useState(false);
|
||||
// 题目显示状态（ChoiceDialog1关闭后）
|
||||
const [showQuiz, setShowQuiz] = useState(false);
|
||||
// 题目成功提示状态
|
||||
const [showQuizSuccess, setShowQuizSuccess] = useState(false);
|
||||
|
||||
// 使用持久化的reflection cursor状态
|
||||
const scene = "scene2";
|
||||
@@ -129,7 +134,11 @@ const HuangyanpeiReflectionScene2 = () => {
|
||||
{/* 第一个选择弹窗 */}
|
||||
<ChoiceDialog1
|
||||
visible={showDialog1}
|
||||
onClose={() => setShowDialog1(false)}
|
||||
onClose={() => {
|
||||
setShowDialog1(false);
|
||||
// 关闭后显示题目
|
||||
setShowQuiz(true);
|
||||
}}
|
||||
onSelect={() => {
|
||||
markReflectionCursorVisited(scene, 1);
|
||||
}}
|
||||
@@ -145,6 +154,42 @@ const HuangyanpeiReflectionScene2 = () => {
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 题目（ChoiceDialog1关闭后） */}
|
||||
<SingleChoiceQuizPanel
|
||||
visible={showQuiz}
|
||||
title="【单选】杨斯盛先生近期监工浦东中学建设,有一份上月的工人工钱支出表需要核对,你来告诉我答案吧:"
|
||||
options={[
|
||||
{ value: "A", label: "A. 800 两白银" },
|
||||
{ value: "B", label: "B. 815 两白银" },
|
||||
{ value: "C", label: "C. 820 两白银" },
|
||||
{ value: "D", label: "D. 836 两白银" },
|
||||
]}
|
||||
correctAnswer="C"
|
||||
onWrongSelect={() => {
|
||||
return "是这个数目吗?你要不要再算一下!";
|
||||
}}
|
||||
onSubmit={(value, isCorrect) => {
|
||||
if (isCorrect) {
|
||||
setShowQuiz(false);
|
||||
setShowQuizSuccess(true);
|
||||
}
|
||||
}}
|
||||
zIndex={10001}
|
||||
/>
|
||||
|
||||
{/* 题目成功提示 */}
|
||||
<SuccessAlert
|
||||
visible={showQuizSuccess}
|
||||
title=""
|
||||
content="恭喜你!选择正确。不愧是从川沙小学堂走出来!"
|
||||
onContinue={() => {
|
||||
setShowQuizSuccess(false);
|
||||
}}
|
||||
onClose={() => {
|
||||
setShowQuizSuccess(false);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 完成提示 */}
|
||||
<StudyGuideModal
|
||||
visible={showCompleteGuide}
|
||||
|
||||
Reference in new issue
Block a user