Skip to content

X
x-learn
提交 86e3e6c3 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

updates

上级 cf194517
显示空白字符变更
内嵌 并排
正在显示 包含 164 行增加 和 144 行删除
src/components/exam/examCard.vue
浏览文件 @ 86e3e6c3
......@@ -2,45 +2,45 @@
<div>
<div class="answer-box">
<div class="head" id="head-h">
<el-button icon="el-icon-arrow-left" circle @click="$router.back()"></el-button>
<el-button icon="el-icon-arrow-left" circle @click="$emit('back')"></el-button>
<div class="title">{{ title }}</div>
<div class="right">
<div class="count" v-if="hasCountDown">{{ examTimeText }}</div>
<div class="count" v-if="hasCountdown">{{ countdownText }}</div>
</div>
</div>
<div class="exam-main">
<div class="left">
<question-list :data="currentExam" :index="index" :disabled="disabled" :hasResult="hasResult">
<template #index>{{ index + 1 }}/{{ questionList.length }}</template>
<question-list :data="currentQuestionGroup" :index="currentPage" :disabled="disabled" :hasResult="hasResult">
<template #index>{{ currentPage + 1 }}/{{ questionGroups.length }}</template>
</question-list>
</div>
<div class="right">
<question-numbers
:index="index"
:list="questionList"
:data="currentExam"
:index="currentPage"
:list="questionGroups"
:data="currentQuestionGroup"
@page-change="handlePageChange"
></question-numbers>
</div>
</div>
<div class="foot" id="foot-h">
<div class="exam-btn">
<div class="confirm" @click="showResult">确认答案</div>
<div @click="prevQuestion">上一题</div>
<div @click="nextQuestion">下一题</div>
<div class="confirm" @click="showResult" v-if="hasShowResultBtn">确认答案</div>
<div @click="prev">上一题</div>
<div @click="next">下一题</div>
</div>
<div class="rigth-btn">
<div class="sign" v-if="hasCollect" @click="collectQuestion">
<div :class="currentItem.is_collection ? 'icon active' : 'icon'"></div>
<div class="txt">{{ currentItem.is_collection ? '已收藏' : '收藏' }}</div>
<div class="sign" v-if="hasCollect" @click="toggleCollect">
<div :class="firstQuestion.is_collection ? 'icon active' : 'icon'"></div>
<div class="txt">{{ firstQuestion.is_collection ? '已收藏' : '收藏' }}</div>
</div>
<div class="sign2" v-if="hasMark" @click="markQuestion">
<div :class="currentItem.sign ? 'icon active' : 'icon'"></div>
<div class="txt">{{ currentItem.sign ? '已标记' : '标记' }}</div>
<div class="sign2" v-if="hasMark" @click="toggleMark">
<div :class="firstQuestion.sign ? 'icon active' : 'icon'"></div>
<div class="txt">{{ firstQuestion.sign ? '已标记' : '标记' }}</div>
</div>
<div class="del-btn" v-if="hasDeleteBtn">删除</div>
<div class="del-btn" v-if="hasDeleteBtn" @click="$emit('delete', currentQuestionGroup)">删除</div>
<div class="end-exam-btn">
<div class="btn" v-if="hasSubmitBtn && !disabled" @click="submitExam">{{ submitButtonText }}</div>
<div class="btn" v-if="hasSubmitBtn && !disabled" @click="submit">{{ submitButtonText }}</div>
</div>
</div>
</div>
......@@ -60,80 +60,78 @@ export default {
hasCollect: { type: Boolean, default: true }, // 收藏
hasSubmitBtn: { type: Boolean, default: true }, // 提交按钮
hasDeleteBtn: { type: Boolean, default: false }, // 删除按钮
hasCountDown: { type: Boolean, default: true }, // 计时
data: { type: Object, default: () => {} },
questionItems: { type: Array, default: () => [] },
submitButtonText: { type: String, default: '交卷' } // 提交按钮显示的文字
hasShowResultBtn: { type: Boolean, default: false }, // 显示答案按钮
hasCountdown: { type: Boolean, default: true }, // 计时
submitButtonText: { type: String, default: '交卷' }, // 提交按钮显示的文字
data: { type: Object, default: () => {} }, // 模拟考试返回的数据，内部组装
groups: { type: Array, default: () => [] } // 收藏、错题组装好的数据
},
data() {
return {
disabled: false,
hasResult: false,
index: 0, // 当前题的下标
countDownTime: null, // 倒计时计时器
disabled: false, // 是否禁用输入框
hasResult: false, // 是否显示解析
duration: 0, // 答题所用时间
examTimeText: '',
questionList: [] // 所有试题
countdownTimer: null, // 倒计时计时器
countdownText: '', // 倒计时显示时间
questionGroups: this.groups, // 所有试题分组,一组一页
questionIndex: 0, // 题号
currentPage: 0 // 页码
}
},
computed: {
// 当前页面的大题数据
currentExam() {
return this.questionList[this.index] || {}
// 当前页面试题组
currentQuestionGroup() {
return this.questionGroups[this.currentPage] || {}
},
// 当前题第一个小题
currentItem() {
const [first = {}] = this.currentExam.question_list || []
return first
// 当前页面的试题列表
currentQuestionList() {
return this.currentQuestionGroup.question_list || []
},
// 当前页面第一个试题
firstQuestion() {
return this.currentQuestionList[0] || {}
}
},
watch: {
data: {
deep: true,
immediate: true,
handler(value) {
if (this.questionItems.length) {
this.questionList = this.questionItems
return
}
if (value) {
const { status } = value
this.disabled = ['1', '2'].includes(status)
this.hasResult = ['1', '2'].includes(status)
this.genQuestions(value)
handler(data) {
data && this.dataInit(data)
}
},
groups: {
handler(groups) {
this.questionGroups = groups
}
},
index(value) {
this.hasResult = this.currentExam.hasResult
currentPage() {
this.hasResult = this.currentQuestionGroup.hasResult
}
},
beforeDestroy() {
clearInterval(this.countDownTime) // 停止倒计时
},
mounted() {
clearInterval(this.countdownTimer) // 停止倒计时
},
methods: {
// 倒计时
countDown(time) {
console.log(time, 'time')
let sec = parseInt(time)
clearInterval(this.countDownTime)
this.countDownTime = setInterval(() => {
clearInterval(this.countdownTimer)
this.countdownTimer = setInterval(() => {
sec--
if (sec === 0) {
clearInterval(this.time.clearTime)
this.$alert('考试时间结束，自动提交试卷', '', {
confirmButtonText: '确定',
callback: action => {
this.submitExam()
this.submit()
}
})
}) // 是否显示解析
return false
}
this.examTimeText = this.secondToDate(sec)
this.countdownText = this.secondToDate(sec) // 倒计时显示时间
this.duration++
this.$emit('timeupdate', this.duration, this.questionList)
this.$emit('timeupdate', this.duration, this.questionGroups)
}, 1000)
},
secondToDate(result) {
......@@ -148,53 +146,63 @@ export default {
}
return result
},
// 确认答案
// 显示答案
showResult() {
this.hasResult = true
this.questionList[this.index].hasResult = true
},
// 下一题
nextQuestion() {
const totalNumber = this.questionList.length
if (this.index + 1 < totalNumber) this.index++
this.$emit('page-change', this.currentExam)
this.questionGroups[this.currentPage].hasResult = true
},
// 上一题
prevQuestion() {
if (this.index !== 0) this.index--
this.$emit('page-change', this.currentExam)
prev() {
if (this.currentPage <= 0) return
this.currentPage--
this.$emit('page-change', this.currentQuestionGroup, this.questionGroups)
},
// 下一题
next() {
const total = this.questionGroups.length
if (this.currentPage + 1 >= total) return
this.currentPage++
this.$emit('page-change', this.currentQuestionGroup, this.questionGroups)
},
handlePageChange(index) {
this.index = index
this.currentPage = index
this.$emit('page-change', this.currentQuestionGroup, this.questionGroups)
},
// 收藏试题
collectQuestion() {
const item = this.currentItem
if (item.is_collection) {
api.deleteCollection({ type: 2, question_id: item.id }).then(response => {
item.is_collection = false
})
return false
}
api.addCollection({ question_id: item.id }).then(response => {
item.is_collection = true
// 收藏
toggleCollect() {
const ids = []
// 第一题的收藏状态
const isCollection = this.firstQuestion.is_collection
this.currentQuestionList.forEach(item => {
item.is_collection = !isCollection
ids.push(item.id || item.question_id)
})
isCollection
? api.deleteCollection({ type: 2, question_id: ids.join() })
: api.addCollection({ question_id: ids.join() })
},
// 标记
markQuestion() {
const item = this.questionList[this.index].question_list[0]
item.sign ? (item.sign = false) : (item.sign = true)
this.$forceUpdate()
toggleMark() {
this.currentQuestionList.forEach(item => {
item.sign = !item.sign
})
},
// 提交考试
submitExam() {
this.$emit('submitExam', this.questionList)
// 提交
submit() {
this.$emit('submit', this.questionGroups)
},
// 数据初始化
dataInit(data) {
const isSubmited = ['1', '2'].includes(data.status)
this.disabled = isSubmited
this.hasResult = isSubmited
this.genQuestions(data)
},
// 组装试题数据
genQuestions(data) {
const { questions, answers = {} } = data
if (!questions) return []
this.questionList = questions.question_items.reduce((result, question) => {
this.questionGroups = questions.question_items.reduce((result, question) => {
question.question_list.forEach(list => {
list = list.map(item => {
let userAnswers = []
......@@ -215,11 +223,13 @@ export default {
})
return result
}, [])
// 答题倒计时
if (this.hasCountDown) {
this.countDown(this.data.remaining_times)
this.duration = this.data.duration || 0
}
},
genQuestionItem(data) {
return {}
},
// 重置
reset() {
this.currentPage = 0
}
}
}
......
src/pages/exam/courseExam/chapter/index.vue
浏览文件 @ 86e3e6c3
......@@ -2,8 +2,9 @@
<exam-card
title="课后练习"
:data="data"
@submitExam="handleSubmit"
:hasCountDown="false"
:hasCountdown="false"
@submit="handleSubmit"
@back="handleBack"
v-if="Object.keys(data).length"
></exam-card>
</template>
......@@ -36,10 +37,9 @@ export default {
this.data = JSON.parse(response.data).sheet
})
},
// 缓存答案
handleCache(data) {
const params = this.genSubmitData(data)
api.setCourseCache(Object.assign(params, { status: 0 }))
// 返回
handleBack() {
this.$router.push(`/course/learn/${this.$route.query.course_id}`)
},
// 提交答案
handleSubmit(data) {
......@@ -52,26 +52,20 @@ export default {
})
},
// 组装提交数据
genSubmitData(questionList) {
genSubmitData(questionGroups) {
const answers = {}
questionList.forEach(item => {
if (!answers[item.question_item_id]) {
answers[item.question_item_id] = {}
questionGroups.forEach(group => {
if (!answers[group.question_item_id]) {
answers[group.question_item_id] = {}
}
item.question_list.forEach(cItem => {
answers[item.question_item_id][cItem.id] = {
sign: cItem.sign ? cItem.sign : false,
answers: cItem.user_answer
group.question_list.forEach(item => {
answers[item.question_item_id][item.id] = {
sign: item.sign ? item.sign : false,
answers: item.user_answer
}
})
})
return {
type: 1,
sheet_id: this.data.id,
status: 0,
answers: JSON.stringify(answers),
duration: 0
}
return { type: 1, sheet_id: this.data.id, status: 0, answers: JSON.stringify(answers), duration: 0 }
}
}
}
......
src/pages/exam/myExam/questionDetails.vue
浏览文件 @ 86e3e6c3
<template>
<exam-card
:title="title"
:questionItems="questionItems"
:groups="questionGroups"
:hasMark="false"
:hasDeleteBtn="true"
:hasCountDown="false"
:hasShowResultBtn="true"
submitButtonText="清空记录，重新答题"
@submitExam="handleSubmit"
@back="handleBack"
@submit="handleSubmit"
@page-change="handlePageChange"
@deleteQuestion="deleteQuestion"
@delete="deleteQuestion"
ref="exam"
v-if="Object.keys(data).length"
></exam-card>
......@@ -28,10 +30,10 @@ export default {
title() {
return this.$route.query.type === '1' ? '错题集合' : '收藏试题'
},
questionItems() {
return this.data.list.map(groups => {
const [first = {}] = groups
return { question_item_id: '', question_type: first.question_type, question_list: groups, hasResult: false }
questionGroups() {
return this.data.list.map(list => {
const [first = {}] = list
return { question_item_id: '', question_type: first.question_type, question_list: list, hasResult: false }
})
}
},
......@@ -46,15 +48,20 @@ export default {
question_id: data.question_list[0].question_id,
type: this.$route.query.type
}
api
.deleteQuestion(param)
.then(response => {
// this.getTopic()
this.$router.go(0)
api.deleteQuestion(param).then(response => {
this.getTopic().then(() => {
// 重置
this.$refs.exam.reset()
})
.finally(() => {
})
console.log(data)
},
// 返回
handleBack() {
if (this.$route.query.type === '1') {
this.$router.push('/my/questions/wrong')
} else {
this.$router.push('/my/questions/collection')
}
},
// 获取考卷
getTopic() {
......@@ -65,7 +72,7 @@ export default {
page: this.page,
page_size: 20
}
api.getMyQuestion(param).then(response => {
return api.getMyQuestion(param).then(response => {
this.data = response
})
},
......@@ -81,25 +88,21 @@ export default {
})
},
// 缓存答案
handlePageChange(data) {
this.cacheQuestion(this.genSubmitData(this.$refs.exam.questionItems))
handlePageChange(data, groups) {
this.cacheQuestion(this.genSubmitData(groups))
},
cacheQuestion(param, call) {
api
.setMyCache(param)
.then(response => {
call()
})
.finally(() => {
cacheQuestion(param, callback) {
api.setMyCache(param).then(response => {
callback && callback()
})
},
// 组装提交数据
genSubmitData(questionList) {
genSubmitData(questionGroups) {
const answers = {}
questionList.forEach(item => {
item.question_list.forEach(cItem => {
if (cItem.user_answer.length) {
answers[cItem.question_id] = cItem.user_answer
questionGroups.forEach(group => {
group.question_list.forEach(item => {
if (item.user_answer.length) {
answers[item.question_id] = item.user_answer
}
})
})
......
src/pages/exam/testExam/exam/index.vue
浏览文件 @ 86e3e6c3
<template>
<div>
<exam-card :hasSubmitBtn="!!(!this.$route.query.id)" :hasCountDown="!!(!this.$route.query.id)" v-if="Object.keys(data).length" @submitExam="submitExam" ref="exam" title="模拟考试" :data="data"></exam-card>
<exam-card
title="模拟考试"
:hasSubmitBtn="!!!this.$route.query.id"
:hasCountdown="!!!this.$route.query.id"
:data="data"
@submit="submitExam"
@back="handleBack"
ref="exam"
v-if="Object.keys(data).length"
></exam-card>
</div>
</template>
<script>
......@@ -47,6 +56,10 @@ export default {
this.data = JSON.parse(response.data).sheet
})
},
// 返回
handleBack() {
this.$router.push('/testExam')
},
// 提交考卷 isCache：0缓存，1提交
submitExam(isCache) {
const refData = this.$refs.exam
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论