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}
|
|
/>
|
|
</>
|
|
)
|
|
}
|