feat: 添加连线题和选择题功能,增强互动性
- 在多个组件中引入 MatchQuizPanel 和 SingleChoiceQuizPanel,提升用户参与度。 - 更新 HuangyanpeiPlace1、HuangyanpeiPlace3、LuxunPlace1、LuxunPlace2 组件,增加新的选择题和连线题,丰富学习内容。 - 调整成功提示逻辑,确保用户体验流畅。 - 优化视频播放中的锚点逻辑,提升互动性和学习效果。
This commit is contained in:
1 parent
02a3f00a9b
commit
966b47ede3
12 files changed
+1128
-42
No files matched your search
@@ -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}
|
||||
|
||||
Reference in new issue
Block a user