zhongyidian
6e106032fd
- 在多个场景中添加音频资源，增强学习互动性。 - 更新引导对话文本，确保信息准确性和一致性。 - 调整组件结构，清理不必要的代码，提升可维护性。 - 引入结束窗口，鼓励用户深入了解历史背景。
108 lines
3.6 KiB
TypeScript
108 lines
3.6 KiB
TypeScript
/**
|
|
* 银元之战题目组件
|
|
* 包含多选题1、多选题2、旁白2
|
|
*/
|
|
import { Narration, MultipleChoiceQuizPanel } from "@/components";
|
|
import SuccessAlert from "@/components/layout/alert/success-alert";
|
|
import { getPublicPath } from "@/lib/utils";
|
|
|
|
export interface YinyuanQuizzesProps {
|
|
/** 是否显示多选题1 */
|
|
showQuiz1: boolean;
|
|
/** 是否显示旁白2 */
|
|
showNarration2: boolean;
|
|
/** 旁白2文本 */
|
|
narration2Text: string;
|
|
/** 是否显示多选题2 */
|
|
showQuiz2: boolean;
|
|
/** 是否显示成功提示框 */
|
|
showSuccessAlert: boolean;
|
|
/** 多选题1提交回调 */
|
|
onQuiz1Submit: (values: string[], isCorrect: boolean) => void;
|
|
/** 旁白2关闭回调 */
|
|
onNarration2Close: () => void;
|
|
/** 多选题2提交回调 */
|
|
onQuiz2Submit: (values: string[], isCorrect: boolean) => void;
|
|
/** 成功提示框继续回调 */
|
|
onSuccessAlertContinue: () => void;
|
|
}
|
|
|
|
/**
|
|
* 银元之战题目组件
|
|
* 显示多选题1、多选题2、旁白2和成功提示框
|
|
*/
|
|
export const YinyuanQuizzes = ({
|
|
showQuiz1,
|
|
showNarration2,
|
|
narration2Text,
|
|
showQuiz2,
|
|
showSuccessAlert,
|
|
onQuiz1Submit,
|
|
onNarration2Close,
|
|
onQuiz2Submit,
|
|
onSuccessAlertContinue,
|
|
}: YinyuanQuizzesProps) => {
|
|
return (
|
|
<>
|
|
{/* 多选题1 - 点击引导图标后显示 */}
|
|
<MultipleChoiceQuizPanel
|
|
visible={showQuiz1}
|
|
title="【多选】面对银元投机狂潮,你认为首要突破口是? "
|
|
options={[
|
|
{ value: "A", label: "A. 政治攻势（警告、约谈）" },
|
|
{ value: "B", label: "B. 经济手段（抛售银元,以银元打银元）" },
|
|
{ value: "C", label: "C. 舆论动员（宣传人民币信用,发动群众）" },
|
|
]}
|
|
correctAnswer={["A", "B", "C"]}
|
|
errorMessage="单一措施效果有限,请尝试综合施策。"
|
|
minSelections={1}
|
|
maxSelections={3}
|
|
minSelectionsErrorMessage="单一措施效果有限,请尝试综合施策。"
|
|
submitText="提交"
|
|
onSubmit={onQuiz1Submit}
|
|
onError={(error) => {
|
|
console.log("错误信息:", error);
|
|
}}
|
|
/>
|
|
|
|
{/* 旁白文字2（图2）- 多选题1答对后显示 */}
|
|
<Narration
|
|
text={narration2Text}
|
|
visible={showNarration2}
|
|
onClose={onNarration2Close}
|
|
enableAnimation={false}
|
|
audioSrc={getPublicPath("audio/chenyun/mp3_chenyun_31.mp3")}
|
|
/>
|
|
|
|
{/* 多选题2（图3）- 关闭旁白后显示 */}
|
|
<MultipleChoiceQuizPanel
|
|
visible={showQuiz2}
|
|
title="【多选】面对投机商的猖狂反扑,下一步应采取哪些决定性措施?"
|
|
options={[
|
|
{ value: "A", label: "A. 加大银元抛售量,耗尽投机资本" },
|
|
{ value: "B", label: "B. 查封投机核心场所,逮捕首要分子" },
|
|
{ value: "C", label: "C. 颁布法令,严禁银元计价流通" },
|
|
]}
|
|
correctAnswer={["A", "B", "C"]}
|
|
errorMessage="单一措施效果有限,请尝试综合施策。"
|
|
minSelections={1}
|
|
maxSelections={3}
|
|
minSelectionsErrorMessage="单一措施效果有限,请尝试综合施策。"
|
|
submitText="提交"
|
|
onSubmit={onQuiz2Submit}
|
|
onError={(error) => {
|
|
console.log("错误信息:", error);
|
|
}}
|
|
/>
|
|
|
|
{/* 成功提示框 - 多选题2答对后显示 */}
|
|
<SuccessAlert
|
|
visible={showSuccessAlert}
|
|
title="恭喜你, 选择正确!"
|
|
content="陈云同志的意见是:三管齐下,但核心是查封投机核心场所,逮捕首要分子。擒贼先擒王,打掉指挥部。"
|
|
onContinue={onSuccessAlertContinue}
|
|
/>
|
|
</>
|
|
);
|
|
};
|