Skip to content

X
x-learn
提交 941a7249 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

fix: 修改考试组件

上级 94c168ff
隐藏空白字符变更
内嵌 并排
正在显示 包含 1178 行增加 和 552 行删除
src/components/exam/examCard.vue
浏览文件 @ 941a7249
<template>
<div></div>
<div>
<div class="answer-box">
<div class="head" id="head-h">
<el-button icon="el-icon-arrow-left" circle @click="$router.back()"></el-button>
<div class="title">{{ params.title }}</div>
<div class="right">
<div class="count">12:00</div>
</div>
</div>
<div class="exam-main" :style="{ height: this.contentHeight + 'px' }">
<div class="left"></div>
<div class="right">
<answer-card> </answer-card>
</div>
</div>
<div class="foot" id="foot-h">
<div class="exam-btn">
<div>上一题</div>
<div>下一题</div>
</div>
<div class="rigth-btn">
<div class="sign" v-if="params.collect">
<div class="icon"></div>
<div class="txt">收藏</div>
</div>
<div class="sign2" v-if="params.sign">
<div class="icon"></div>
<div class="txt">标记</div>
</div>
<div class="end-exam-btn">
<div class="btn" v-if="params.submitBtn">交卷</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import answerCard from '@/components/exam/examNumbers'
export default {
components: { answerCard },
props: {
title: { type: String },
hasMark: { type: Boolean, default: true },
hasCollect: { type: Boolean, default: true },
hasSubmitBtn: { type: Boolean, default: true },
data: { type: Object, default: () => {} }
},
data() {
return {
list: [], // 所有题
currentExam: {} // 当前页面的大题数据
currentExam: {}, // 当前页面的大题数据
contentHeight: 0 // 页面高度
}
},
computed: {
questionList() {
if (!this.data.questions) {
return []
}
return this.data.questions.question_items.reduce((result, question) => {
question.question_list = question.question_list.forEach(item => {
result.push(Object.assign(question, { list: item }))
})
return result
}, [])
}
},
mounted() {
// 赋值页面高度
this.contentHeight = parseInt(
document.documentElement.clientHeight - (this.getDom('head-h').offsetHeight + this.getDom('foot-h').offsetHeight)
)
},
methods: {
// 获取dom高
getDom(id) {
return document.getElementById(id)
}
}
}
</script>
<style></style>
<style lang="scss" scoped>
.answer-box {
width: 100%;
height: 100%;
// background: #f9f9f9;
.head {
border-bottom: 1px solid #ccc;
height: 80px;
background: #ffffff;
display: flex;
align-items: center;
padding-left: 40px;
.title {
padding-left: 20px;
font-size: 24px;
font-weight: bold;
color: #222222;
line-height: 80px;
}
.right {
width: 260px;
margin-left: auto;
display: flex;
justify-content: space-around;
align-items: center;
.count {
font-size: 18px;
font-weight: bold;
color: #222222;
}
.time {
display: flex;
.icon {
width: 23px;
height: 23px;
// background: url(../../assets/images/tick.png);
background-size: 100% 100%;
}
.mun {
font-size: 18px;
font-weight: bold;
color: #222222;
line-height: 25px;
margin-left: 10px;
}
}
}
}
.exam-main {
display: flex;
.left {
background: #fff;
flex: 1;
padding: 10px 20px 0 53px;
overflow-y: scroll;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.right {
border-left: 1px solid #ccc;
position: relative;
width: 220px;
background: #fff;
padding: 0 20px;
overflow-y: scroll;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
}
.foot {
border-top: 1px solid #ccc;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: #ffffff;
display: flex;
align-items: center;
.exam-btn {
display: flex;
padding-left: 40px;
cursor: pointer;
div {
width: 100px;
height: 40px;
border-radius: 4px;
border: 1px solid #cccccc;
font-size: 14px;
font-weight: bold;
color: #999999;
line-height: 40px;
text-align: center;
margin-right: 20px;
&.active {
background: #c01540;
border-radius: 4px;
color: #fff;
}
}
}
.rigth-btn {
display: flex;
margin-left: auto;
.end-exam-btn {
background: #fff;
height: 62px;
margin-top: -2px;
border-left: 1px solid #ccc;
width: 260px;
display: flex;
justify-content: center;
align-items: center;
.btn {
cursor: pointer;
width: 200px;
height: 40px;
background: #c01540;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
color: #cccccc;
line-height: 40px;
text-align: center;
}
}
.sign {
margin-right: 20px;
margin-top: 8px;
.icon {
margin: 0 auto;
width: 24px;
height: 24px;
background: url(@/assets/images/collection.png);
background-size: 100% 100%;
&.active {
background: url(@/assets/images/collection2.png);
background-size: 100% 100%;
}
}
.txt {
font-size: 14px;
color: #cccccc;
line-height: 20px;
margin-top: 2px;
}
}
.sign2 {
margin-right: 20px;
margin-top: 8px;
.icon {
margin: 0 auto;
width: 24px;
height: 24px;
background: url(@/assets/images/sign.png);
background-size: 100% 100%;
&.active {
background: url(@/assets/images/sign2.png);
background-size: 100% 100%;
}
}
.txt {
font-size: 14px;
color: #cccccc;
line-height: 20px;
margin-top: 2px;
}
}
}
}
}
</style>
src/components/exam/examNumbers.vue
浏览文件 @ 941a7249
<template>
<div></div>
<div>
<div class="order-num">
<div>
<div class="tit">判断题</div>
<ul>
<!-- stu1已答 stu2当前 stu3标记 -->
<li class="stu1">1</li>
<li class="stu2">2</li>
<li class="stu3">3</li>
</ul>
</div>
</div>
<ul class="flag-tips" v-if="true">
<li>
<div class="circle1"></div>
<div class="txt">已答</div>
</li>
<li>
<div class="circle2"></div>
<div class="txt">未答</div>
</li>
<li>
<div class="circle3"></div>
<div class="txt">当前</div>
</li>
<li>
<div class="circle4"></div>
<div class="txt">标记</div>
</li>
</ul>
<ul class="tips-box" v-else>
<li>
<div class="circle1"></div>
<div class="txt">答对</div>
</li>
<li>
<div class="circle2"></div>
<div class="txt">答错</div>
</li>
<li>
<div class="circle3"></div>
<div class="txt">未答</div>
</li>
</ul>
</div>
</template>
<script>
export default {
props: { list: { type: Array, default: () => [] } }
props: {},
mounted() {},
computed: {},
methods: {},
watch: {}
}
</script>
<style></style>
<style lang="scss" scoped>
.info{
display: flex;
align-items: center;
height: 100px;
.shape{
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
}
img{
width: 75px;
// transform: scale(1);
display: block;
}
.right{
margin-left: 22px;
.name{
font-size: 18px;
color: #222222;
line-height: 25px;
}
.code{
font-size: 14px;
color: #222222;
line-height: 20px;
margin-top: 5px;
}
}
}
.order-num{
padding-top: 20px;
padding-bottom: 90px;
.tit{
font-size: 12px;
color: #999999;
line-height: 17px;
margin-bottom: 10px;
}
ul{
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
li{
cursor: pointer;
position: relative;
border-radius: 50px;
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
font-size: 14px;
color: #666666;
line-height: 24px;
margin-right: 20px;
margin-bottom: 10px;
text-align: center;
&:nth-child(5n+5){
margin-right: 0;
}
&.analy{
&.stu1{
border: 2px solid #0FC118;
line-height: 22px;
background: #fff;
color: #999;
}
&.stu2{
border: 2px solid #C01540;
line-height: 22px;
background: #fff;
color: #999;
}
&.stu3{
color: #fff;
background: #999999;
&::after{
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: none;
border-radius: 50%;
}
}
}
&.stu1{
background: #999;
border: 1px solid #999;
color: #fff;
}
&.stu2{
width: 22px;
height: 22px;
line-height: 22px;
border: 2px solid #0FC118;
}
&.stu3{
&::after{
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: #C01540;
border-radius: 50%;
}
}
}
}
}
.flag-tips{
width: 260px;
position: fixed;
bottom: 60px;
right:0;
display: flex;
justify-content: space-around;
padding: 15px 0 10px;
background: #fff;
margin: 0;
list-style: none;
li{
.circle1{
width: 24px;
height: 24px;
background: #EEEEEE;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.circle1{
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.circle2{
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.circle3{
width: 24px;
height: 24px;
border: 2px solid #0FC118;
border-radius: 50%;
}
.circle4{
position: relative;
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border-radius: 50%;
&::after{
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: #C01540;
border-radius: 50%;
}
}
.txt{
margin-top: 5px;
font-size: 12px;
color: #CCCCCC;
line-height: 17px;
}
}
}
.flag-tips{
width: 260px;
position: fixed;
bottom: 60px;
right:0;
display: flex;
justify-content: space-around;
padding: 15px 0 10px;
background: #fff;
margin: 0;
list-style: none;
li{
.circle1{
width: 24px;
height: 24px;
background: #999;
border: 1px solid #999;
border-radius: 50%;
}
.circle2{
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.circle3{
width: 24px;
height: 24px;
border: 2px solid #0FC118;
background: rgba(15, 193, 24, 0.1);
border-radius: 50%;
}
.circle4{
position: relative;
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border-radius: 50%;
&::after{
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: #C01540;
border-radius: 50%;
}
}
.txt{
margin-top: 5px;
font-size: 12px;
color: #CCCCCC;
line-height: 17px;
}
}
}
.tips-box{
width: 260px;
position: fixed;
bottom: 60px;
right:0;
display: flex;
justify-content: space-around;
padding: 15px 0 10px;
background: #fff;
margin: 0;
list-style: none;
li{
&:nth-child(2){
// margin: 0 50px;
}
.circle1{
width: 24px;
height: 24px;
background: #fff;
border: 2px solid #0FC118;
border-radius: 50%;
box-sizing: border-box;
}
.circle2{
width: 24px;
height: 24px;
border: 2px solid #C01540;
border-radius: 50%;
box-sizing: border-box;
}
.circle3{
width: 24px;
height: 24px;
background: #999999;
border-radius: 50%;
}
.circle4{
position: relative;
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border-radius: 50%;
&::after{
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: #C01540;
border-radius: 50%;
}
}
.txt{
margin-top: 5px;
font-size: 12px;
color: #CCCCCC;
line-height: 17px;
}
}
}
</style>
src/pages/exam/testExam/exam/index copy.vue 0 → 100644
浏览文件 @ 941a7249
<template>
<div>
<div class="answer-box">
<div class="head" id="head-h">
<el-button icon="el-icon-arrow-left" circle @click="$router.back()"></el-button>
<div class="title">模拟考试</div>
<div class="right">
<div class="count">{{ time.examTimeText }}</div>
</div>
</div>
<div class="exam-main" :style="{ height: this.contentHeight + 'px' }">
<div class="left">
<question
v-if="Object.keys(questionParams.question).length"
:contentHeight="contentHeight"
:questionParams="questionParams"
></question>
</div>
<div class="right">
<answer-card :questionParams="questionParams" ref="signHandle"></answer-card>
</div>
</div>
<div class="foot" id="foot-h">
<div class="exam-btn">
<div @click="changeIndex('prev')" :class="this.questionParams.questionIndex !== 0 ? 'active' : ''">
上一题
</div>
<div
:class="questionParams.questionIndex + 1 !== questionParams.question.total_question_count ? 'active' : ''"
@click="changeIndex('next')"
>
下一题
</div>
</div>
<div class="rigth-btn">
<div class="sign" @click="collectQuestion">
<div :class="questionParams.question.isCollection ? 'icon active' : 'icon'"></div>
<div class="txt">{{ questionParams.question.isCollection ? '已收藏' : '收藏' }}</div>
</div>
<div class="sign2" @click="setSign" v-if="!$route.query.id">
<div :class="isSignText() ? 'icon active' : 'icon'"></div>
<div class="txt">{{ isSignText() ? '已标记' : '标记' }}</div>
</div>
<div class="end-exam-btn">
<div class="btn" @click="endExam" v-if="!$route.query.id">交卷</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as api from '@/api/exam.js'
import answerCard from '../../components/answerCard.vue'
import question from '../../components/question.vue'
export default {
components: { question, answerCard },
data() {
return {
time: {
// 考试持续时间
duration: 0,
examTimeText: '',
clearTime: null
},
// isExamTimeDate: true,
// 标记
itemSign: false,
// 设置页面高
contentHeight: 0,
// 原数据
beforeChangeData: {},
// 过滤后的数据
afterChangeData: {},
// 题的数据所需的参数
changeTime: 0,
questionParams: {
// 用户选择的选项 --- 提交后台的数据
answerRecord: {},
// 当前题的下标
questionIndex: 0,
// 所有题 和题的信息
question: {},
card: {},
beforeData: {}
},
handleTime: null
}
},
computed: {
examId() {
return this.$route.query.exam_id
},
changeQuestionIndex() {
return this.questionParams.questionIndex
}
},
watch: {
// 监听题的变化
changeQuestionIndex(newV, oldV) {
this.changeData()
}
},
beforeDestroy() {
// this.handlePapers()
clearInterval(this.handleTime)
clearInterval(this.time.clearTime)
},
mounted() {
this.handleTime = setInterval(() => {
this.handlePapers()
}, 3000)
// 赋值页面高度
this.contentHeight = parseInt(
document.documentElement.clientHeight - (this.getDom('head-h').offsetHeight + this.getDom('foot-h').offsetHeight)
)
this.getTopic()
},
methods: {
isSignText() {
let flag = false
const ansRecord = this.questionParams.answerRecord
const qData = this.questionParams.question
if (Object.values(ansRecord).length) {
ansRecord[qData.question_item_id]
? ansRecord[qData.question_item_id][qData.id]
? ansRecord[qData.question_item_id][qData.id].sign
? (flag = true)
: (flag = false)
: (flag = false)
: (flag = false)
}
return flag
},
// 标记
setSign() {
const data = this.questionParams.question
data.sign ? (data.sign = false) : (data.sign = true)
this.$refs.signHandle.onSignHandle(data.sign)
},
// 收藏试题
collectQuestion() {
const data = this.questionParams.question
if (data.isCollection) {
this.removeCall(data.id, () => {
data.isCollection = false
})
} else {
this.addCall(data.id, () => {
data.isCollection = true
})
}
},
addCall(id, call) {
api.addCollection({ question_id: id }).then(response => {
call(response.list)
})
},
removeCall(id, call) {
api.deleteCollection({ type: 2, question_id: id }).then(response => {
call(response.list)
})
},
// 提交考试
endExam() {
this.handlePapers(1)
},
setClock(time) {
let sec = parseInt(time)
clearInterval(this.time.clearTime)
this.time.clearTime = setInterval(() => {
if (this.$route.query.id) {
this.time.examTimeText = ''
return false
}
sec--
if (sec === 0) {
clearInterval(this.time.clearTime)
this.time.examTimeText = '00:00:00'
this.$alert('考试时间结束，自动提交试卷', '', {
confirmButtonText: '确定',
callback: action => {
this.endExam()
}
})
return false
}
this.time.examTimeText = this.secondToDate(sec)
this.time.duration++
}, 1000)
},
secondToDate(result) {
const h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600)
const m =
Math.floor((result / 60) % 60) < 10 ? '0' + Math.floor((result / 60) % 60) : Math.floor((result / 60) % 60)
const s = Math.floor(result % 60) < 10 ? '0' + Math.floor(result % 60) : Math.floor(result % 60)
if (h === 0) {
result = m + ':' + s
} else {
result = h + ':' + m + ':' + s
}
return result
},
addZero(i) {
return i < 10 ? '0' + i : i + ''
},
getDom(id) {
return document.getElementById(id)
},
// 改变题序
changeIndex(type) {
if (type === 'prev') {
this.questionParams.questionIndex > 0 && this.questionParams.questionIndex--
} else {
this.questionParams.questionIndex + 1 !== this.questionParams.question.total_question_count &&
this.questionParams.questionIndex++
}
this.changeData()
},
// 获取考卷
getTopic() {
const param = {
type: 2,
paper_id: this.examId,
is_create: this.$route.query.id || this.$route.query.is_create === undefined ? 0 : this.$route.query.is_create
}
api.getExamQuestion(param).then(response => {
const data = JSON.parse(response.data)
this.beforeChangeData = data.sheet
this.questionParams.beforeData = data.sheet
let countData = this.filterData(data)
if (this.$route.query.id === 'err') {
const Num = this.countErrNum(countData)
this.questionParams.question.total_question_count = Num
countData = countData.filter(item => {
return item.map(cItem => {
cItem.total_question_count = Num
})
})
}
this.afterChangeData = countData
this.questionParams.card = countData
data.sheet.answers !== null && (this.questionParams.answerRecord = data.sheet.answers)
this.$route.query.id && this.$route.query.id.length > 5 ? this.analysisInit() : this.changeData()
this.setClock(data.sheet.remaining_times)
this.time.duration = data.sheet.duration
})
},
// 计算错题总数
countErrNum(data) {
let countNum = 0
data.map(item => {
item.map(cItem => {
countNum++
})
})
return countNum
},
// 重组数据
setData(data) {
let countNum = 0
const type = {
1: '单选题',
2: '多选题',
5: '案例题',
6: '判断题'
}
return data.map(item => {
return item.question_list.map(cItem => {
countNum++
const data = {
q_order: countNum,
question_item_id: item.question_item_id,
question_item_type: item.question_type,
content: cItem.question_content,
id: cItem.id,
options: cItem.question_options,
question_item_title: type[item.question_type],
total_question_count: this.beforeChangeData.questions.total_question_count,
isCollection: cItem.is_collection
}
// 解析
if (this.$route.query.id) {
if (this.$route.query.id.length > 5 || this.$route.query.id === 'all' || this.$route.query.id === 'err') {
const qAnswer = Array.isArray(cItem.question_answer)
? cItem.question_answer
: (cItem.question_answer = [cItem.question_answer])
let optGroup = ''
const findAB = qAnswer.map(qOpt => {
const findIndex = cItem.question_options.findIndex(i => {
return i.id === qOpt
})
return this.A_Z()[findIndex]
})
data.question_analysis = cItem.question_analysis
optGroup = findAB
.sort()
.toString()
.replace(new RegExp(',', 'g'), '')
data.question_answer = optGroup
}
}
// 案例题
if (parseInt(item.question_type) === 5) {
data.common_content = cItem.common_content
data.group_id = cItem.group_id
data.list = this.mergeData(item.question_list, 'group_id')
data.answer_count = cItem.answer_count
}
// 错题
if (this.$route.query.id === 'err') {
const isRight = this.beforeChangeData.score_items[data.question_item_id][data.id].is_right
if (!isRight) {
return data
} else {
countNum--
}
} else {
return data
}
})
})
},
// ABC
A_Z() {
const result = []
for (let i = 0; i < 26; i++) {
result.push(String.fromCharCode(65 + i))
}
return result
},
// 合并案例题
mergeData(arr, str) {
const _arr = []
let _t = []
let _tmp = null
arr.length && (_tmp = arr[0][str])
for (const i in arr) {
if (arr[i][str] === _tmp) {
_t.push(arr[i])
} else {
_tmp = arr[i][str]
_arr.push(_t)
_t = [arr[i]]
}
}
_arr.push(_t)
return _arr
},
// 点击上一题下一题 答题卡序号
changeData() {
this.afterChangeData.map(item => {
item.map(cItem => {
cItem.q_order === this.questionParams.questionIndex + 1 && (this.questionParams.question = cItem)
})
})
},
// 结果页进入设置默认点击的题
analysisInit() {
this.afterChangeData.map(item => {
const findData = item.find(datas => {
return datas.id === this.$route.query.id
})
if (findData) {
this.questionParams.questionIndex = findData.q_order - 1
this.questionParams.questions = findData
findData.q_order === 1 && this.changeData()
}
})
},
// 缓存 提交
handlePapers(n) {
if (!this.$route.query.id) {
const param = {
sheet_id: this.beforeChangeData.id,
status: n || 0,
answers: JSON.stringify(this.questionParams.answerRecord),
duration: this.time.duration
}
api.setCache(param).then(response => {
if (n) {
this.$router.replace({
path: '/testExam/result'
})
}
})
}
},
filterData(data) {
return this.setData(data.sheet.questions.question_items).map(item => {
return item.filter(is => is)
})
}
}
}
</script>
<style lang="scss" scoped>
.answer-box {
width: 100%;
height: 100%;
// background: #f9f9f9;
.head {
border-bottom: 1px solid #ccc;
height: 80px;
background: #ffffff;
display: flex;
align-items: center;
padding-left: 40px;
.title {
padding-left: 20px;
font-size: 24px;
font-weight: bold;
color: #222222;
line-height: 80px;
}
.right {
width: 260px;
margin-left: auto;
display: flex;
justify-content: space-around;
align-items: center;
.count {
font-size: 18px;
font-weight: bold;
color: #222222;
}
.time {
display: flex;
.icon {
width: 23px;
height: 23px;
// background: url(../../assets/images/tick.png);
background-size: 100% 100%;
}
.mun {
font-size: 18px;
font-weight: bold;
color: #222222;
line-height: 25px;
margin-left: 10px;
}
}
}
}
.exam-main {
display: flex;
.left {
background: #fff;
flex: 1;
padding: 10px 20px 0 53px;
overflow-y: scroll;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.right {
border-left: 1px solid #ccc;
position: relative;
width: 220px;
background: #fff;
padding: 0 20px;
overflow-y: scroll;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
}
.foot {
border-top: 1px solid #ccc;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: #ffffff;
display: flex;
align-items: center;
.exam-btn {
display: flex;
padding-left: 40px;
cursor: pointer;
div {
width: 100px;
height: 40px;
border-radius: 4px;
border: 1px solid #cccccc;
font-size: 14px;
font-weight: bold;
color: #999999;
line-height: 40px;
text-align: center;
margin-right: 20px;
&.active {
background: #c01540;
border-radius: 4px;
color: #fff;
}
}
}
.rigth-btn {
display: flex;
margin-left: auto;
.end-exam-btn {
background: #fff;
height: 62px;
margin-top: -2px;
border-left: 1px solid #ccc;
width: 260px;
display: flex;
justify-content: center;
align-items: center;
.btn {
cursor: pointer;
width: 200px;
height: 40px;
background: #c01540;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
color: #cccccc;
line-height: 40px;
text-align: center;
}
}
.sign {
margin-right: 20px;
margin-top: 8px;
.icon {
margin: 0 auto;
width: 24px;
height: 24px;
background: url(@/assets/images/collection.png);
background-size: 100% 100%;
&.active {
background: url(@/assets/images/collection2.png);
background-size: 100% 100%;
}
}
.txt {
font-size: 14px;
color: #cccccc;
line-height: 20px;
margin-top: 2px;
}
}
.sign2 {
margin-right: 20px;
margin-top: 8px;
.icon {
margin: 0 auto;
width: 24px;
height: 24px;
background: url(@/assets/images/sign.png);
background-size: 100% 100%;
&.active {
background: url(@/assets/images/sign2.png);
background-size: 100% 100%;
}
}
.txt {
font-size: 14px;
color: #cccccc;
line-height: 20px;
margin-top: 2px;
}
}
}
}
}
</style>
src/pages/exam/testExam/exam/index.vue
浏览文件 @ 941a7249
<template>
<div>
<div class="answer-box">
<div class="head" id="head-h">
<el-button icon="el-icon-arrow-left" circle @click="$router.back()"></el-button>
<div class="title">模拟考试</div>
<div class="right">
<div class="count">{{ time.examTimeText }}</div>
</div>
</div>
<div class="exam-main" :style="{ height: this.contentHeight + 'px' }">
<div class="left">
<question
v-if="Object.keys(questionParams.question).length"
:contentHeight="contentHeight"
:questionParams="questionParams"
></question>
</div>
<div class="right">
<answer-card :questionParams="questionParams" ref="signHandle"></answer-card>
</div>
</div>
<div class="foot" id="foot-h">
<div class="exam-btn">
<div @click="changeIndex('prev')" :class="this.questionParams.questionIndex !== 0 ? 'active' : ''">
上一题
</div>
<div
:class="questionParams.questionIndex + 1 !== questionParams.question.total_question_count ? 'active' : ''"
@click="changeIndex('next')"
>
下一题
</div>
</div>
<div class="rigth-btn">
<div class="sign" @click="collectQuestion">
<div :class="questionParams.question.isCollection ? 'icon active' : 'icon'"></div>
<div class="txt">{{ questionParams.question.isCollection ? '已收藏' : '收藏' }}</div>
</div>
<div class="sign2" @click="setSign" v-if="!$route.query.id">
<div :class="isSignText() ? 'icon active' : 'icon'"></div>
<div class="txt">{{ isSignText() ? '已标记' : '标记' }}</div>
</div>
<div class="end-exam-btn">
<div class="btn" @click="endExam" v-if="!$route.query.id">交卷</div>
</div>
</div>
</div>
</div>
</div>
<exam-card title="模拟考试" :data="data" v-if="Object.keys(data).length"></exam-card>
</template>
<script>
import * as api from '@/api/exam.js'
import answerCard from '../../components/answerCard.vue'
import question from '../../components/question.vue'
import ExamCard from '@/components/exam/examCard.vue'
export default {
components: { question, answerCard },
components: { ExamCard },
data() {
return {
time: {
// 考试持续时间
duration: 0,
examTimeText: '',
clearTime: null
},
// isExamTimeDate: true,
// 标记
itemSign: false,
// 设置页面高
contentHeight: 0,
// 原数据
beforeChangeData: {},
// 过滤后的数据
afterChangeData: {},
// 题的数据所需的参数
changeTime: 0,
questionParams: {
// 用户选择的选项 --- 提交后台的数据
answerRecord: {},
// 当前题的下标
questionIndex: 0,
// 所有题 和题的信息
question: {},
card: {},
beforeData: {}
},
handleTime: null
data: {}
}
},
computed: {
examId() {
return this.$route.query.exam_id
},
changeQuestionIndex() {
return this.questionParams.questionIndex
}
},
watch: {
// 监听题的变化
changeQuestionIndex(newV, oldV) {
this.changeData()
}
},
beforeDestroy() {
// this.handlePapers()
clearInterval(this.handleTime)
clearInterval(this.time.clearTime)
},
mounted() {
this.handleTime = setInterval(() => {
this.handlePapers()
}, 3000)
// 赋值页面高度
this.contentHeight = parseInt(
document.documentElement.clientHeight - (this.getDom('head-h').offsetHeight + this.getDom('foot-h').offsetHeight)
)
created() {
// 获取考卷
this.getTopic()
},
methods: {
isSignText() {
let flag = false
const ansRecord = this.questionParams.answerRecord
const qData = this.questionParams.question
if (Object.values(ansRecord).length) {
ansRecord[qData.question_item_id]
? ansRecord[qData.question_item_id][qData.id]
? ansRecord[qData.question_item_id][qData.id].sign
? (flag = true)
: (flag = false)
: (flag = false)
: (flag = false)
}
return flag
},
// 标记
setSign() {
const data = this.questionParams.question
data.sign ? (data.sign = false) : (data.sign = true)
this.$refs.signHandle.onSignHandle(data.sign)
},
// 收藏试题
collectQuestion() {
const data = this.questionParams.question
if (data.isCollection) {
this.removeCall(data.id, () => {
data.isCollection = false
})
} else {
this.addCall(data.id, () => {
data.isCollection = true
})
}
},
addCall(id, call) {
api.addCollection({ question_id: id }).then(response => {
call(response.list)
})
},
removeCall(id, call) {
api.deleteCollection({ type: 2, question_id: id }).then(response => {
call(response.list)
})
},
// 提交考试
endExam() {
this.handlePapers(1)
},
setClock(time) {
let sec = parseInt(time)
clearInterval(this.time.clearTime)
this.time.clearTime = setInterval(() => {
if (this.$route.query.id) {
this.time.examTimeText = ''
return false
}
sec--
if (sec === 0) {
clearInterval(this.time.clearTime)
this.time.examTimeText = '00:00:00'
this.$alert('考试时间结束，自动提交试卷', '', {
confirmButtonText: '确定',
callback: action => {
this.endExam()
}
})
return false
}
this.time.examTimeText = this.secondToDate(sec)
this.time.duration++
}, 1000)
},
secondToDate(result) {
const h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600)
const m =
Math.floor((result / 60) % 60) < 10 ? '0' + Math.floor((result / 60) % 60) : Math.floor((result / 60) % 60)
const s = Math.floor(result % 60) < 10 ? '0' + Math.floor(result % 60) : Math.floor(result % 60)
if (h === 0) {
result = m + ':' + s
} else {
result = h + ':' + m + ':' + s
}
return result
},
addZero(i) {
return i < 10 ? '0' + i : i + ''
},
getDom(id) {
return document.getElementById(id)
},
// 改变题序
changeIndex(type) {
if (type === 'prev') {
this.questionParams.questionIndex > 0 && this.questionParams.questionIndex--
} else {
this.questionParams.questionIndex + 1 !== this.questionParams.question.total_question_count &&
this.questionParams.questionIndex++
}
this.changeData()
},
// 获取考卷
getTopic() {
const isCreate =
this.$route.query.id || this.$route.query.is_create === undefined ? 0 : this.$route.query.is_create
const param = {
type: 2,
type: 2, // 1:能力自测, 2:模拟考试
paper_id: this.examId,
is_create: this.$route.query.id || this.$route.query.is_create === undefined ? 0 : this.$route.query.is_create
is_create: isCreate // 是否重新测试: 1:是,否则不是
}
api.getExamQuestion(param).then(response => {
const data = JSON.parse(response.data)
this.beforeChangeData = data.sheet
this.questionParams.beforeData = data.sheet
let countData = this.filterData(data)
if (this.$route.query.id === 'err') {
const Num = this.countErrNum(countData)
this.questionParams.question.total_question_count = Num
countData = countData.filter(item => {
return item.map(cItem => {
cItem.total_question_count = Num
})
})
}
this.afterChangeData = countData
this.questionParams.card = countData
data.sheet.answers !== null && (this.questionParams.answerRecord = data.sheet.answers)
this.$route.query.id && this.$route.query.id.length > 5 ? this.analysisInit() : this.changeData()
this.setClock(data.sheet.remaining_times)
this.time.duration = data.sheet.duration
})
},
// 计算错题总数
countErrNum(data) {
let countNum = 0
data.map(item => {
item.map(cItem => {
countNum++
})
})
return countNum
},
// 重组数据
setData(data) {
let countNum = 0
const type = {
1: '单选题',
2: '多选题',
5: '案例题',
6: '判断题'
}
return data.map(item => {
return item.question_list.map(cItem => {
countNum++
const data = {
q_order: countNum,
question_item_id: item.question_item_id,
question_item_type: item.question_type,
content: cItem.question_content,
id: cItem.id,
options: cItem.question_options,
question_item_title: type[item.question_type],
total_question_count: this.beforeChangeData.questions.total_question_count,
isCollection: cItem.is_collection
}
// 解析
if (this.$route.query.id) {
if (this.$route.query.id.length > 5 || this.$route.query.id === 'all' || this.$route.query.id === 'err') {
const qAnswer = Array.isArray(cItem.question_answer)
? cItem.question_answer
: (cItem.question_answer = [cItem.question_answer])
let optGroup = ''
const findAB = qAnswer.map(qOpt => {
const findIndex = cItem.question_options.findIndex(i => {
return i.id === qOpt
})
return this.A_Z()[findIndex]
})
data.question_analysis = cItem.question_analysis
optGroup = findAB
.sort()
.toString()
.replace(new RegExp(',', 'g'), '')
data.question_answer = optGroup
}
}
// 案例题
if (parseInt(item.question_type) === 5) {
data.common_content = cItem.common_content
data.group_id = cItem.group_id
data.list = this.mergeData(item.question_list, 'group_id')
data.answer_count = cItem.answer_count
}
// 错题
if (this.$route.query.id === 'err') {
const isRight = this.beforeChangeData.score_items[data.question_item_id][data.id].is_right
if (!isRight) {
return data
} else {
countNum--
}
} else {
return data
}
})
})
},
// ABC
A_Z() {
const result = []
for (let i = 0; i < 26; i++) {
result.push(String.fromCharCode(65 + i))
}
return result
},
// 合并案例题
mergeData(arr, str) {
const _arr = []
let _t = []
let _tmp = null
arr.length && (_tmp = arr[0][str])
for (const i in arr) {
if (arr[i][str] === _tmp) {
_t.push(arr[i])
} else {
_tmp = arr[i][str]
_arr.push(_t)
_t = [arr[i]]
}
}
_arr.push(_t)
return _arr
},
// 点击上一题下一题 答题卡序号
changeData() {
this.afterChangeData.map(item => {
item.map(cItem => {
cItem.q_order === this.questionParams.questionIndex + 1 && (this.questionParams.question = cItem)
})
})
},
// 结果页进入设置默认点击的题
analysisInit() {
this.afterChangeData.map(item => {
const findData = item.find(datas => {
return datas.id === this.$route.query.id
})
if (findData) {
this.questionParams.questionIndex = findData.q_order - 1
this.questionParams.questions = findData
findData.q_order === 1 && this.changeData()
}
})
},
// 缓存 提交
handlePapers(n) {
if (!this.$route.query.id) {
const param = {
sheet_id: this.beforeChangeData.id,
status: n || 0,
answers: JSON.stringify(this.questionParams.answerRecord),
duration: this.time.duration
}
api.setCache(param).then(response => {
if (n) {
this.$router.replace({
path: '/testExam/result'
})
}
})
}
},
filterData(data) {
return this.setData(data.sheet.questions.question_items).map(item => {
return item.filter(is => is)
this.data = JSON.parse(response.data).sheet
})
}
}
}
</script>
<style lang="scss" scoped>
.answer-box {
width: 100%;
height: 100%;
// background: #f9f9f9;
.head {
border-bottom: 1px solid #ccc;
height: 80px;
background: #ffffff;
display: flex;
align-items: center;
padding-left: 40px;
.title {
padding-left: 20px;
font-size: 24px;
font-weight: bold;
color: #222222;
line-height: 80px;
}
.right {
width: 260px;
margin-left: auto;
display: flex;
justify-content: space-around;
align-items: center;
.count {
font-size: 18px;
font-weight: bold;
color: #222222;
}
.time {
display: flex;
.icon {
width: 23px;
height: 23px;
// background: url(../../assets/images/tick.png);
background-size: 100% 100%;
}
.mun {
font-size: 18px;
font-weight: bold;
color: #222222;
line-height: 25px;
margin-left: 10px;
}
}
}
}
.exam-main {
display: flex;
.left {
background: #fff;
flex: 1;
padding: 10px 20px 0 53px;
overflow-y: scroll;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.right {
border-left: 1px solid #ccc;
position: relative;
width: 220px;
background: #fff;
padding: 0 20px;
overflow-y: scroll;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
}
.foot {
border-top: 1px solid #ccc;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: #ffffff;
display: flex;
align-items: center;
.exam-btn {
display: flex;
padding-left: 40px;
cursor: pointer;
div {
width: 100px;
height: 40px;
border-radius: 4px;
border: 1px solid #cccccc;
font-size: 14px;
font-weight: bold;
color: #999999;
line-height: 40px;
text-align: center;
margin-right: 20px;
&.active {
background: #c01540;
border-radius: 4px;
color: #fff;
}
}
}
.rigth-btn {
display: flex;
margin-left: auto;
.end-exam-btn {
background: #fff;
height: 62px;
margin-top: -2px;
border-left: 1px solid #ccc;
width: 260px;
display: flex;
justify-content: center;
align-items: center;
.btn {
cursor: pointer;
width: 200px;
height: 40px;
background: #c01540;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
color: #cccccc;
line-height: 40px;
text-align: center;
}
}
.sign {
margin-right: 20px;
margin-top: 8px;
.icon {
margin: 0 auto;
width: 24px;
height: 24px;
background: url(@/assets/images/collection.png);
background-size: 100% 100%;
&.active {
background: url(@/assets/images/collection2.png);
background-size: 100% 100%;
}
}
.txt {
font-size: 14px;
color: #cccccc;
line-height: 20px;
margin-top: 2px;
}
}
.sign2 {
margin-right: 20px;
margin-top: 8px;
.icon {
margin: 0 auto;
width: 24px;
height: 24px;
background: url(@/assets/images/sign.png);
background-size: 100% 100%;
&.active {
background: url(@/assets/images/sign2.png);
background-size: 100% 100%;
}
}
.txt {
font-size: 14px;
color: #cccccc;
line-height: 20px;
margin-top: 2px;
}
}
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论