feat: 更新图像资源和引导对话，提升学习体验
- 替换多个场景中的图像资源，确保视觉内容的准确性和一致性。 - 更新信件组件中的输入校验功能，提升用户填写体验。 - 调整引导对话文本，增强互动性和信息传达的清晰度。 - 引入结束窗口，鼓励用户深入了解鲁迅和孙中山的历史背景。
This commit is contained in:
zhongyidian committed
1 parent
5bdfdadede
commit
ac7bb420fd
69 files changed
+1166
-442
No files matched your search
@@ -1,8 +1,9 @@
|
||||
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { Image, GuideSteps, GuideStepsItem } from "@/components";
|
||||
import { Image, GuideSteps, GuideStepsItem, EndingOverlay } from "@/components";
|
||||
import { SingleChoiceQuizPanel } from "@/components/layout/quiz";
|
||||
import SuccessAlert from "@/components/layout/alert/success-alert";
|
||||
|
||||
const starName = "luxun";
|
||||
|
||||
@@ -22,7 +23,15 @@ const LuxunReflectionScene3 = () => {
|
||||
const [completedQuiz2, setCompletedQuiz2] = useState(false); // 题目2是否完成
|
||||
const [showSummary, setShowSummary] = useState(false); // 是否显示总结
|
||||
const [completionGuideVisible, setCompletionGuideVisible] = useState(false); // 通关提示对话是否显示
|
||||
const [completionGuideFinished, setCompletionGuideFinished] = useState(false); // 通关提示对话是否已完成
|
||||
const [_completionGuideFinished, setCompletionGuideFinished] =
|
||||
useState(false); // 通关提示对话是否已完成
|
||||
// 成功提示相关状态
|
||||
const [showSuccessAlert, setShowSuccessAlert] = useState(false);
|
||||
const [successMessage, setSuccessMessage] = useState("");
|
||||
// 结束语覆盖层是否显示
|
||||
const [showEndingOverlay, setShowEndingOverlay] = useState(false);
|
||||
// 结束语覆盖层是否已关闭
|
||||
const [endingOverlayFinished, setEndingOverlayFinished] = useState(false);
|
||||
|
||||
const allCompleted = completedQuiz1 && completedQuiz2;
|
||||
const progress = (completedQuiz1 ? 1 : 0) + (completedQuiz2 ? 1 : 0);
|
||||
@@ -62,6 +71,9 @@ const LuxunReflectionScene3 = () => {
|
||||
setCompletedQuiz1(true);
|
||||
setShowQuiz1(false);
|
||||
setHintPosition("piping"); // 提示图标移动到"批判现实"旁边
|
||||
// 显示成功提示
|
||||
setSuccessMessage("鲁迅一生辗转，只为唤醒国人，守护家国。");
|
||||
setShowSuccessAlert(true);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -71,6 +83,9 @@ const LuxunReflectionScene3 = () => {
|
||||
setCompletedQuiz2(true);
|
||||
setShowQuiz2(false);
|
||||
setHintPosition("luxun2"); // 提示图标移动到"鲁迅2"旁边
|
||||
// 显示成功提示
|
||||
setSuccessMessage("鲁迅以文字批判旧时代的黑暗，唤醒国人的觉醒。");
|
||||
setShowSuccessAlert(true);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -245,30 +260,30 @@ const LuxunReflectionScene3 = () => {
|
||||
<div className="h-full px-8 overflow-y-auto custom-scrollbar">
|
||||
<div className="space-y-0">
|
||||
<div className="text-red-600 text-4xl font-bold leading-relaxed">
|
||||
1、批判现实 (他以犀利的文笔批判封建传统);
|
||||
1.关注底层：他笔下的主角多是社会底层
|
||||
</div>
|
||||
<div className="text-red-600 text-4xl font-bold leading-relaxed">
|
||||
2、关注底层 (他笔下的主角多是社会底层);
|
||||
2.批判现实：他以犀利的文笔批判封建传统
|
||||
</div>
|
||||
<div className="text-red-600 text-4xl font-bold leading-relaxed">
|
||||
3、家国情怀 (他投身新文化与左翼运动);
|
||||
3.家国情怀：他致力于唤醒国人、守护家国
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// 未完成时显示提示内容
|
||||
<div className="text-center text-black text-4xl font-bold">
|
||||
请跟随小手指点一点，完成操作和题目以查看总结
|
||||
请跟随小手指点一点，拼接鲁迅的精神脉络！
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 继续前进按钮 - 只在通关提示对话结束后显示 */}
|
||||
{completionGuideFinished && (
|
||||
{/* 继续前进按钮 - 只在结束语覆盖层关闭后显示 */}
|
||||
{endingOverlayFinished && (
|
||||
<Image
|
||||
className="absolute bottom-45 right-0"
|
||||
src={getStaticImage("components/place/继续前进")}
|
||||
src={getStaticImage("components/place/离开场景")}
|
||||
button
|
||||
onClick={() => {
|
||||
navigate(`/${moduleName}/${starName}/home`);
|
||||
@@ -279,29 +294,44 @@ const LuxunReflectionScene3 = () => {
|
||||
{/* 题目1：家国情怀 */}
|
||||
<SingleChoiceQuizPanel
|
||||
visible={showQuiz1}
|
||||
title="【单选题】先生的作品《狂人日记》、《阿Q正传》都在揭露的是()"
|
||||
title={"【单选】先生辗转多地创作,核心追求是(\xa0\xa0\xa0\xa0)"}
|
||||
options={[
|
||||
{ value: "A", label: "A. 旧时代的黑暗与愚昧" },
|
||||
{ value: "B", label: "B. 生活中的小美好" },
|
||||
{ value: "A", label: "A. 唤醒国人,改变社会" },
|
||||
{ value: "B", label: "B. 只为个人成名" },
|
||||
]}
|
||||
correctAnswer="A"
|
||||
errorMessage='不是哦,先生的小说核心是批判而非歌颂哦!"请结合阿Q的碎片回忆一下吧!"'
|
||||
errorMessage='不是哦,先生的创作从不是为了自己哦!请回忆先生"弃医从文"的初心。'
|
||||
onSubmit={handleQuiz1Submit}
|
||||
/>
|
||||
|
||||
{/* 题目2：批判现实 */}
|
||||
<SingleChoiceQuizPanel
|
||||
visible={showQuiz2}
|
||||
title="【单选题】先生辗转多地创作,核心追求是()"
|
||||
title="【单选】先生的作品《狂人日记》《阿Q正传》都在揭露的是:"
|
||||
options={[
|
||||
{ value: "A", label: "A. 唤醒国人,改变社会" },
|
||||
{ value: "B", label: "B. 只为个人成名" },
|
||||
{ value: "A", label: "A. 旧时代的黑暗与愚昧" },
|
||||
{ value: "B", label: "B. 生活中的小美好" },
|
||||
]}
|
||||
correctAnswer="A"
|
||||
errorMessage='不是哦,先生的创作从不是为了自己哦!"请回忆先生"弃医从文"的初心。"'
|
||||
errorMessage="不是哦,先生的小说核心是批判而非歌颂哦!请结合阿Q的碎片回忆一下吧!"
|
||||
onSubmit={handleQuiz2Submit}
|
||||
/>
|
||||
|
||||
{/* 成功提示弹窗 */}
|
||||
<SuccessAlert
|
||||
visible={showSuccessAlert}
|
||||
title="恭喜你，答对啦！"
|
||||
content={successMessage}
|
||||
onClose={() => {
|
||||
setShowSuccessAlert(false);
|
||||
setSuccessMessage("");
|
||||
}}
|
||||
onContinue={() => {
|
||||
setShowSuccessAlert(false);
|
||||
setSuccessMessage("");
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 通关提示对话 */}
|
||||
<GuideSteps
|
||||
visible={completionGuideVisible}
|
||||
@@ -309,6 +339,8 @@ const LuxunReflectionScene3 = () => {
|
||||
if (!visible) {
|
||||
setCompletionGuideVisible(false);
|
||||
setCompletionGuideFinished(true); // 对话关闭后标记为已完成
|
||||
// 显示结束语覆盖层
|
||||
setShowEndingOverlay(true);
|
||||
}
|
||||
}}
|
||||
showMask={false}
|
||||
@@ -316,9 +348,20 @@ const LuxunReflectionScene3 = () => {
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem speaker="guide">
|
||||
恭喜你读懂了鲁迅的文字与初心,愿这份精神能伴你前行
|
||||
恭喜你读懂了鲁迅的文字与初心,愿这份精神能伴你前行!
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 结束语覆盖层 */}
|
||||
<EndingOverlay
|
||||
visible={showEndingOverlay}
|
||||
text="愿你走过我的文学足迹，读懂文字的力量，心怀热望，直面生活！"
|
||||
animationSpeed={200}
|
||||
onContinue={() => {
|
||||
setShowEndingOverlay(false);
|
||||
setEndingOverlayFinished(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in new issue
Block a user