web
/
syzx
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

模拟测验逻辑

Browse Source
master
xialiang 3 years ago
parent d14173ddd8
commit 1eb4c156a9
1 changed files with 215 additions and 109 deletions
Show Stats Download Patch File Download Diff File

324
web/src/pages/mockExamination/paper/index.tsx
Unescape View File

@ -3,14 +3,15 @@ import { AlignLeftOutlined, PlusOutlined } from '@ant-design/icons';
import { Switch, Button, Card, Col, List, Menu, Progress, Row, Typography, Space, Divider, Radio, Checkbox, Form } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { useParams, useRequest } from 'umi';
import { useRef, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
const { Text, Link } = Typography;
import { getRulesPaper, getPaperQuestionList } from '../service';
import { getRulesPaper, getPaperQuestionList, finishExamination } from '../service';
import type { CardListItemDataType } from '../data';
import styles from './style.less';
import SubMenu from 'antd/lib/menu/SubMenu';
import cookie from 'react-cookies';
import ProCard from '@ant-design/pro-card';
import { getDirection } from '../../../.umi/plugin-locale/localeExports';
const CheckboxGroup = Checkbox.Group;
const { Paragraph } = Typography;
@ -24,12 +25,17 @@ const CardList = () => {
//答题卡列表
const [questionTypeList, setQuestionTypeList] = useState([])
// 当前答题id
const [questionNow, setQuestionNow] = useState([])
const [questionNow, setQuestionNow] = useState({})
// 解析可见
const [parsingShow, setParsingShow] = useState(false)
const [lastBtnShow, setLastBtnShow] = useState(true)
const [nextBtnShow, setNextBtnShow] = useState(false)
const [parsingShow, setParsingShow] = useState(false)
// 当前题号
const [questionNowNum, setQuestionNowNum] = useState(0)
const [questionNum, setQuestioNum] = useState(0)
@ -47,8 +53,7 @@ const CardList = () => {
},
onSuccess: (result) => {
if (result.success) {
setRulesPaperInfo(result.question_list || [])
console.log(result, 'result1')
setRulesPaperInfo(result.question_list[0] || [])
run({ paper_id: result.question_list[0].paper_id, question_type_count: result.question_list[0].question_type_count })
// setQuestionTypeList(result.question_list[0].question_type_count)
}
@ -78,6 +83,8 @@ const CardList = () => {
})
}
})
// 根据分类拆分试题 左侧答题卡 state:0 未答题 1 ： 已答题
paperList.map((e) => {
questionList.map((item, index) => {
@ -94,32 +101,56 @@ const CardList = () => {
questionInfo.push({ ...e, index: index })
})
}
const nowQ = setLabVal(questionInfo[0])
setPaperInfo(questionInfo || [])
setQuestionNow(nowQ || [])
setQuestionNow(questionInfo[0] || [])
setQuestionTypeList(questionList || [])
setQuestioNum(questionInfo.length)
}
}
});
const setLabVal = (value: []) => {
const nowQ = value
console.log(nowQ, "888888");
nowQ.answers.map((e, i) => {
console.log(e, 'eeeeee');
nowQ.answers[i].label = e.answer
nowQ.answers[i].value = e.id
const { run: runFinishExamination } = useRequest(finishExamination,
{
refreshDeps: [rulesPaperInfo],
manual: true,
formatResult: (result) => {
return result;
},
onSuccess: (result, params) => {
console.log(result, 'questionFinish server', params)
}
});
useEffect(() => {
// 已选择题目回显
formRef?.current?.setFieldsValue({ note: questionNow.answerId });
paperInfo.map((item, index) => {
if (item.id === questionNow.id) {
setQuestionNowNum(index + 1)
}
})
return nowQ
}
}, [questionNow]);
useEffect(() => {
console.log(questionNowNum, questionNum);
setLastBtnShow(questionNowNum == 1 ? true : false)
setNextBtnShow(questionNowNum == questionNum ? true : false)
}, [questionNowNum])
const content = (
<div className={styles.pageHeaderContent}>
<p>
试卷信息：{rulesPaperInfo[0]?.rules_name}
{/* 试卷信息：{rulesPaperInfo?.question_list[0].rules_name} */}
</p>
</div>
);
@ -173,16 +204,12 @@ const CardList = () => {
<PageContainer content={content} extraContent={false}>
<Row>
<Col span={6} style={{ paddingRight: 24 }}>
<Button onClick={() => {
formRef?.current.setFieldsValue({ note: '11' });
}}>111111</Button>
<ProCard
title="题号列表"
bordered
className='answerSheet'
headStyle={{ padding: 24, border: '#d9d9d9 solid 1px' }}
>
{console.log("当前题号：", questionNow, "试题顺序：", paperInfo, "二维数组:", questionTypeList)}
{
questionTypeList && (
@ -208,22 +235,15 @@ const CardList = () => {
// 查看解析关闭
setParsingShow(false)
paperInfo.map((e) => {
if (e.id === item.id) {
console.log(e.id, e.index, item)
const dQ = setLabVal(item)
setQuestionNow({ ...dQ, index: e.index })
// 重写单选的label、value，index：保存当前试题的index。
setQuestionNow({ ...item, index: e.index })
}
})
console.log(questionTypeList);
formRef?.current.setFieldsValue({ note: e.answerId });
}}
>{index}</Button> </List.Item>
>{index + 1}</Button> </List.Item>
}}
style={{ background: '#ffffff', margin: '-25px -24px 24px -24px' }}
/>
@ -232,19 +252,6 @@ const CardList = () => {
)}
<List
header={<div>二. 多选题</div>}
footer={false}
bordered
dataSource={numbers}
renderItem={item => (
<List.Item>
<Typography.Text mark={item.id === '3' ? false : true}><span className="number">{item.id}</span></Typography.Text>
</List.Item>
)}
style={{ background: '#ffffff', margin: '-1px -24px' }}
/>
</ProCard>
</Col>
<Col span={13} style={{ background: '#ffffff', padding: 0 }}>
@ -258,68 +265,30 @@ const CardList = () => {
headerBordered
>
<Space direction="vertical" style={{ width: '100%', padding: '24px 48px' }}>
{/*
<Space direction="vertical">
<Radio.Group
options={questionNow.answers}
onChange={(item) => {
const qArr = []
// 默认输出答案0，0，0，0
questionNow?.answers?.map((e, i) => {
console.log(e, i, "ei");
item.target.value === e.id ? qArr.push("1") : qArr.push("0")
})
console.log(qArr, 'Arr')
const questionList = questionTypeList
const questionAnswer = qArr.join(",")
// 修改答题卡状态 写入答案以及修改答题状态
const qX = questionNow?.question_type;
const qI = questionNow?.index;
questionList[qX].children[qI].answerSelect = questionAnswer;
// 答题状态
questionList[qX].children[qI].state = 1
questionList[qX].children[qI].answerId = item.target.value
console.log(questionList, 'questionList11', questionAnswer)
// 提交答题卡
setQuestionTypeList(questionList)
// console.log('0', questionList, questionNow, item, qX, qI, questionList[qX].children[qI].answerSelect, questionAnswer)
}} defaultValue={questionNow.answerId} />
</Space>
*/}
<Typography style={{ marginBottom: 16, fontSize: 18 }}>
{questionNow?.question_stem}
{console.log(questionNow.answerId, 'answerId', questionNow.answerId)}
{/* {console.log(questionNow.answerId, 'answerId', questionNow.answerId)} */}
</Typography>
<Space direction="vertical" style={{ fontSize: 16 }}>
{questionNow.question_type === 0 ?
<Form
ref={formRef} name="control-ref"
>
<Form.Item name="note" label="Note" rules={[{ required: true }]}>
{questionNow.question_type === 0 ?
(
<Form
ref={formRef} name="control-ref"
>
<Form.Item name="note" label="Note" rules={[{ required: true }]}>
<Radio.Group
(
defaultValue={questionNow.answerId}>
<Radio.Group>
<Space direction="vertical">{questionNow?.answers?.map((item, index) => {
console.log(item, 'item')
return <Radio key={item.id}
onChange={() => {
const qArr = []
// 默认输出答案0，0，0，0
questionNow?.answers?.map(() => {
qArr.push("0")
})
// 修改用户答案
qArr[index] = item.is_true
@ -336,20 +305,84 @@ const CardList = () => {
// 提交答题卡
setQuestionTypeList(questionList)
// console.log('0', questionList, questionNow, item, qX, qI, questionList[qX].children[qI].answerSelect, questionAnswer)
// console.log('0', questionList, questionNow, item, qX, qI)
}}
value={item.id}
style={{ padding: 5, fontSize: 16 }}
>{tiNum(index)}{item.answer}</Radio>
})}</Space></Radio.Group>
</Form.Item>
</Form>
) : questionNow.question_type === 1 ? questionNow?.answers?.map((item, index) => {
return <Checkbox key={item.id} value={1} style={{ padding: 5, fontSize: 16 }}>{tiNum(index)}{item.answer}</Checkbox>
}) : questionNow.question_type === 2 ? questionNow?.answers?.map((item, index) => {
return <Radio key={item.id} value={1} style={{ padding: 5, fontSize: 16 }}>{tiNum(index)}{item.answer}</Radio>
}) : ""}
) : questionNow.question_type === 1 ? <Checkbox.Group onChange={(e) => {
const qArr = []
// 默认输出答案0，0，0，0
questionNow?.answers?.map((item) => {
if (e.indexOf(item.id) > -1) {
qArr.push("1")
} else {
qArr.push("0")
}
})
const questionList = questionTypeList
const questionAnswer = qArr.join(",")
// 修改答题卡状态 写入答案以及修改答题状态
const qX = questionNow?.question_type;
const qI = questionNow?.index;
questionList[qX].children[qI].answerSelect = questionAnswer;
// 答题状态
questionList[qX].children[qI].state = 1
questionList[qX].children[qI].answerId = e
// 提交答题卡
setQuestionTypeList(questionList)
// console.log('0', questionList, questionNow, item, qX, qI)
}}>
{questionNow?.answers?.map((item, index) => {
return <Checkbox key={item.id}
value={item.id}
style={{ padding: 5, fontSize: 16 }}
>{tiNum(index)}{item.answer}</Checkbox>
})}
</Checkbox.Group> : questionNow.question_type === 2 ? (
<Radio.Group>
<Space direction="vertical">{questionNow?.answers?.map((item, index) => {
return <Radio key={item.id}
onChange={() => {
const qArr = []
// 默认输出答案0，0，0，0
questionNow?.answers?.map(() => {
qArr.push("0")
})
// 修改用户答案
qArr[index] = item.is_true
const questionList = questionTypeList
const questionAnswer = qArr.join(",")
// 修改答题卡状态 写入答案以及修改答题状态
const qX = questionNow?.question_type;
const qI = questionNow?.index;
questionList[qX].children[qI].answerSelect = questionAnswer;
// 答题状态
questionList[qX].children[qI].state = 1
questionList[qX].children[qI].answerId = item.id
// 提交答题卡
setQuestionTypeList(questionList)
// console.log('0', questionList, questionNow, item, qX, qI)
}}
value={item.id}
style={{ padding: 5, fontSize: 16 }}
>{tiNum(index)}{item.answer}</Radio>
})}</Space></Radio.Group>
) : ""
}
</Form.Item>
</Form>
</Space>
<Radio.Group onChange={() => { return true }} value={0} size="large">
@ -370,11 +403,84 @@ const CardList = () => {
<Typography>6分14秒</Typography>
<Divider style={{ margin: '6px 0', opacity: 0.5 }} />
<strong>答题序号</strong>
<Typography>14/80</Typography>
<Typography>{questionNowNum}/{questionNum}</Typography>
<Divider style={{ margin: '6px 0', opacity: 0.5 }} />
<Button size="large" block>上一题</Button>
<Button size="large" block>下一题</Button>
<Button size="large" type="primary" block>提交答卷</Button>
<Button
size="large"
disabled={lastBtnShow}
onClick={() => {
paperInfo.map((e, i) => {
if (e.id === questionNow.id) {
const nextTemp = paperInfo[i - 1]
const questionList = questionTypeList
let nextData = {}
questionList[nextTemp.question_type].children.map((item, index) => {
if (item.id === nextTemp.id) {
nextData = { ...item, index: index }
}
})
setQuestionNow(nextData)
}
})
// console.log(nextQuestionData, "下一题")
}}
block>上一题</Button>
<Button size="large"
disabled={nextBtnShow}
block onClick={() => {
paperInfo.map((e, i) => {
if (e.id === questionNow.id) {
const nextTemp = paperInfo[i + 1]
const questionList = questionTypeList
let nextData = {}
questionList[nextTemp.question_type].children.map((item, index) => {
if (item.id === nextTemp.id) {
nextData = { ...item, index: index }
}
})
setQuestionNow(nextData)
}
})
// console.log(nextQuestionData, "下一题")
}}>下一题</Button>
<Button size="large" type="primary"
onClick={() => {
console.log(questionTypeList, 'questionFinish')
const questionFinishId = []
questionTypeList.map((e, i) => {
questionTypeList[i].children.map((e, index) => {
const answerId = e.answerId
answerId !== "" ? questionFinishId.push({
answer_id: (answerId instanceof Array) ? answerId.join(',') : answerId,
question_id: e.id,
question_type: e.question_type
}) : ""
})
})
const questionFinish = {
answers: JSON.stringify(questionFinishId),
rules_id: rulesPaperInfo.rules_id,
person_id: cookie.load('person_id'),
paper_id: rulesPaperInfo.paper_id
}
console.log(questionFinish, 'questionFinish', rulesPaperInfo)
runFinishExamination(questionFinish)
}}
block>提交答卷</Button>
</Space>
</div>
</Col>

Write Preview
Loading…
Cancel
Save