Skip to content

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

update

上级 3dfd6d55
显示空白字符变更
内嵌 并排
正在显示 包含 203 行增加 和 96 行删除
src/components/exam/examCard.vue
浏览文件 @ 9c0aae9c
......@@ -10,8 +10,14 @@
</div>
<div class="exam-main">
<div class="left">
<question-list :data="currentQuestionGroup" :index="currentPage" :disabled="disabled" :hasResult="hasResult">
<template #index>{{ currentPage + 1 }}/{{ questionGroups.length }}</template>
<question-list
:data="currentQuestionGroup"
:page="currentGroupPage"
:index="currentQuestionIndex"
:disabled="disabled"
:hasResult="hasResult"
>
<template #index>{{ currentGroupPage }}/{{ currentGroupCount }}</template>
<template v-slot:default="data">
<slot name="question-item" v-bind="data"></slot>
</template>
......@@ -19,9 +25,9 @@
</div>
<div class="right">
<question-numbers
:index="currentPage"
:list="questionGroups"
:page="currentGroupPage"
:data="currentQuestionGroup"
:list="numberGroups.length ? numberGroups : questionGroups"
@page-change="handlePageChange"
>
<slot name="students" v-bind="{ data: currentQuestionGroup }"></slot>
......@@ -31,8 +37,8 @@
<div class="foot" id="foot-h">
<div class="exam-btn">
<div class="confirm" @click="showResult" v-if="hasShowResultBtn">确认答案</div>
<div @click="prev">上一题</div>
<div @click="next">下一题</div>
<div :class="prevClass" @click="prev">上一题</div>
<div :class="nextClass" @click="next">下一题</div>
</div>
<div class="rigth-btn">
<div class="sign" v-if="hasCollect" @click="toggleCollect">
......@@ -69,7 +75,11 @@ export default {
hasCountdown: { type: Boolean, default: true }, // 计时
submitButtonText: { type: String, default: '交卷' }, // 提交按钮显示的文字
data: { type: Object, default: () => {} }, // 模拟考试返回的数据，内部组装
groups: { type: Array, default: () => [] } // 收藏、错题组装好的数据
groups: { type: Array, default: () => [] }, // 收藏、错题组装好的数据
groupPage: { type: Number, default: 1 }, // 大题当前页
groupPageSize: { type: Number, default: 0 }, // 大题一页的数量
groupPageCount: { type: Number, default: 0 }, // 大题总页数
numberGroups: { type: Array, default: () => [] } // 答题卡
},
data() {
return {
......@@ -79,8 +89,9 @@ export default {
countdownTimer: null, // 倒计时计时器
countdownText: '', // 倒计时显示时间
questionGroups: this.groups, // 所有试题分组,一组一页
questionIndex: 0, // 题号
currentPage: 0 // 页码
questionCount: 0, // 小题数量
currentGroupPage: this.groupPage, // 大题页码
currentGroupCount: this.groupPageCount // 大题总页数
}
},
computed: {
......@@ -95,6 +106,27 @@ export default {
// 当前页面第一个试题
firstQuestion() {
return this.currentQuestionList[0] || {}
},
// 当前题号
currentQuestionIndex() {
return this.questionGroups.reduce((result, item, index) => {
if (index <= this.currentPage) {
result += item.question_list.length
}
return result
}, 0)
},
// 当前页码
currentPage() {
return (this.currentGroupPage - 1) % (this.groupPageSize || this.questionGroups.length)
},
// 上一题按钮的class
prevClass() {
return { active: this.currentGroupPage !== 1 }
},
// 下一题按钮的class
nextClass() {
return { active: this.currentGroupPage < this.currentGroupCount }
}
},
watch: {
......@@ -107,11 +139,20 @@ export default {
groups: {
handler(groups) {
this.questionGroups = groups
this.questionCount = groups.length
}
},
groupPage(value) {
this.currentGroupPage = value
},
groupPageCount(value) {
this.currentGroupCount = value
},
currentPage() {
if (this.hasShowResultBtn) {
this.hasResult = this.currentQuestionGroup.hasResult
}
}
},
beforeDestroy() {
clearInterval(this.countdownTimer) // 停止倒计时
......@@ -156,23 +197,22 @@ export default {
this.hasResult = true
this.questionGroups[this.currentPage].hasResult = true
},
// 上一题
// 上一大题
prev() {
if (this.currentPage <= 0) return
this.currentPage--
this.handlePageChange(this.currentPage)
if (this.currentGroupPage <= 1) return
this.currentGroupPage--
this.handlePageChange(this.currentGroupPage)
},
// 下一题
// 下一大题
next() {
const total = this.questionGroups.length
if (this.currentPage + 1 >= total) return
this.currentPage++
this.handlePageChange(this.currentPage)
if (this.currentGroupPage >= this.currentGroupCount) return
this.currentGroupPage++
this.handlePageChange(this.currentGroupPage)
},
// 翻页
handlePageChange(index) {
this.currentPage = index
this.$emit('page-change', this.currentQuestionGroup, this.questionGroups)
this.currentGroupPage = index
this.$emit('page-change', this.currentGroupPage, this.currentQuestionGroup, this.questionGroups)
},
// 收藏
toggleCollect() {
......@@ -199,10 +239,18 @@ export default {
},
// 数据初始化
dataInit(data) {
if (!data.questions) {
return
}
const isSubmited = ['1', '2'].includes(data.status)
this.disabled = isSubmited
this.hasResult = isSubmited
this.questionCount = data.questions.total_question_count
this.genQuestions(data)
this.currentGroupCount = this.questionGroups.length
if (this.$route.query.id) {
this.findGroupPageByQuestionId(this.$route.query.id)
}
},
// 组装试题数据
genQuestions(data) {
......@@ -230,12 +278,18 @@ export default {
return result
}, [])
},
genQuestionItem(data) {
return {}
},
// 重置
reset() {
this.currentPage = 0
this.currentGroupPage = 1
},
// 通过小题ID查找大题页码
findGroupPageByQuestionId(id) {
this.questionGroups.forEach((item, index) => {
const findIndex = item.question_list.findIndex(data => data.id === id)
if (findIndex !== -1) {
this.currentGroupPage = index + 1
}
})
}
}
}
......
src/components/exam/questionList.vue
浏览文件 @ 9c0aae9c
......@@ -5,12 +5,15 @@
<aside class="question-list-hd__aside"><slot name="index"></slot></aside>
</div>
<div class="question-list-bd">
<h2 class="question-list-title" v-if="conmonTitle">{{ conmonTitle }}</h2>
<h2 class="question-list-title" v-if="conmonTitle">
<!-- <span class="num">{{ page }}.</span> -->
{{ conmonTitle }}
</h2>
<question-list-item
v-for="(item, i) in data.question_list"
:data="item"
:question="data"
:index="data.question_list.length > 1 ? i : index"
:page="data.question_list.length > 1 ? i + 1 : page"
:key="item.id"
v-bind="$attrs"
v-on="$listeners"
......@@ -24,7 +27,10 @@
<script>
import QuestionListItem from './questionListItem.vue'
export default {
props: { data: { type: Object, default: () => ({}) }, index: { type: Number, default: 0 } },
props: {
data: { type: Object, default: () => ({}) },
page: { type: Number, default: 0 } // 页码
},
components: { QuestionListItem },
computed: {
// 试题类型
......@@ -66,5 +72,12 @@ export default {
margin: 20px 0 30px;
font-size: 18px;
color: #222;
.num {
font-size: 32px;
font-weight: bold;
color: #222;
line-height: 45px;
margin-top: 5px;
}
}
</style>
src/components/exam/questionListItem.vue
浏览文件 @ 9c0aae9c
<template>
<div class="question-list-item">
<div class="question-list-item-hd">
<div class="question-list-item-hd__num">{{ index + 1 }}.</div>
<div class="question-list-item-hd__num">{{ page }}.</div>
<div class="question-list-item-hd__title" v-html="data.question_content"></div>
</div>
<div class="question-list-item-bd">
......@@ -66,7 +66,7 @@
<script>
export default {
props: {
index: { type: Number, default: 0 },
page: { type: Number, default: 0 }, // 题号
data: { type: Object, default: () => ({}) }, // 小题
question: { type: Object, default: () => ({}) }, // 大题
disabled: { type: Boolean, default: false },
......@@ -79,7 +79,7 @@ export default {
questionType() {
// (1:单选题,2:多选题,3:问答题,5:案例题,6:判断题,7:实操题,8:情景题)
const questionType = parseInt(this.question.question_type)
const { answer_count: answerCount = [] } = this.data
const { answer_count: answerCount = 0 } = this.data
if ([5, 7, 8].includes(questionType)) {
return answerCount || 3
} else {
......
src/components/exam/questionNumbers.vue
浏览文件 @ 9c0aae9c
......@@ -54,9 +54,9 @@
<script>
export default {
props: {
index: { type: Number, default: 0 },
data: { type: Object, default: () => ({}) },
list: { type: Array, default: () => [] }
page: { type: Number, default: 0 }, // 当前大题的页码
data: { type: Object, default: () => ({}) }, // 当前大题
list: { type: Array, default: () => [] } // 所有大题
},
computed: {
dataList() {
......@@ -64,7 +64,7 @@ export default {
this.list.forEach((item, index) => {
const findIndex = results.findIndex(data => data.question_item_id === item.question_item_id)
const quesitonlist = item.question_list.map(item => {
return { ...item, index }
return { ...item, big_num: index + 1 }
})
if (findIndex === -1) {
results.push({
......@@ -82,14 +82,17 @@ export default {
},
methods: {
genClass(data) {
// answer(0:未做,1:正确,2:错误)
// 未做
const notDone = data.answer === 0 || (data.user_answer ? !data.user_answer.length : true)
return {
stu1: data.user_answer.length,
stu2: data.index === this.index,
stu1: !notDone, // 已做
stu2: data.big_num === this.page,
stu3: data.sign
}
},
handleClick(data) {
this.$emit('page-change', data.index, data)
this.$emit('page-change', data.big_num, data)
}
}
}
......
src/pages/exam/myExam/questionDetails.vue
浏览文件 @ 9c0aae9c
......@@ -2,32 +2,22 @@
<exam-card
:title="title"
:groups="questionGroups"
:numberGroups="numberGroups"
:hasMark="false"
:hasDeleteBtn="true"
:hasCountDown="false"
:hasShowResultBtn="true"
:groupPage="bigNum"
:groupPageSize="pageSize"
:groupPageCount="total"
submitButtonText="清空记录，重新答题"
@back="handleBack"
@submit="handleSubmit"
@page-change="handlePageChange"
@delete="deleteQuestion"
ref="exam"
v-if="Object.keys(data).length"
v-loading="loading"
>
<template v-slot:question-item="{ item, data }">
<div>
单个试题
</div>
{{ item }}
<div>
整页数据,也就是一组
</div>
{{ data }}
<div class="div">13123</div>
</template>
<template v-slot:students="{ data }">
{{ data }}
</template>
</exam-card>
</template>
<script>
......@@ -37,8 +27,13 @@ export default {
components: { ExamCard },
data() {
return {
data: {},
page: 0
loading: false,
bigNum: 0,
page: 0,
pageSize: 10,
list: [], // 试题组
total: 0,
allQuestionList: [] // 所有试题
}
},
computed: {
......@@ -46,17 +41,39 @@ export default {
return this.$route.query.type === '1' ? '错题集合' : '收藏试题'
},
questionGroups() {
return this.data.list.map(list => {
return this.list.map(list => {
const [first = {}] = list
return { question_item_id: '', question_type: first.question_type, question_list: list, hasResult: false }
})
},
numberGroups() {
return this.allQuestionList.map(list => {
const [first = {}] = list
return { question_item_id: '', question_type: first.question_type, question_list: list }
})
}
},
beforeMount() {
this.init()
},
methods: {
init() {
// 获取所有小题
this.getAllQuestion().then(() => {
const flatList = this.allQuestionList.reduce((result, list) => {
return result.concat(list)
}, [])
const index = parseInt(this.$route.query.index) || 0
// // 通过小题编号查找大题
const found = flatList.find(item => item.num === index)
if (found) {
this.bigNum = found.big_num
this.page = parseInt((found.big_num - 1) / this.pageSize)
}
// 获取考卷
this.getTopic()
})
},
methods: {
// 删除题目
deleteQuestion(data) {
const param = {
......@@ -64,6 +81,8 @@ export default {
type: this.$route.query.type
}
api.deleteQuestion(param).then(response => {
this.page = 0
this.getAllQuestion()
this.getTopic().then(() => {
// 重置
this.$refs.exam.reset()
......@@ -84,11 +103,24 @@ export default {
const param = {
type: query.type,
question_type: query.qType,
page: this.page,
page_size: 20
page: this.page + 1,
page_size: this.pageSize
}
this.loading = true
return api.getMyQuestion(param).then(response => {
this.data = response
this.list = response.list
this.total = response.collection_total || response.error_total
this.loading = false
})
},
getAllQuestion() {
const query = this.$route.query
const param = {
type: query.type,
question_type: query.qType
}
return api.getAllQuestion(param).then(response => {
this.allQuestionList = response.list
})
},
// 清空
......@@ -99,11 +131,21 @@ export default {
clear: 1
}
this.cacheQuestion(param, () => {
this.$router.go(0)
this.page = 0
this.getAllQuestion()
this.getTopic().then(() => {
// 重置
this.$refs.exam.reset()
})
})
},
// 缓存答案
handlePageChange(data, groups) {
// 翻页
handlePageChange(index, data, groups) {
const page = parseInt((index - 1) / this.pageSize)
if (this.page !== page) {
this.page = page
this.getTopic()
}
this.cacheQuestion(this.genSubmitData(groups))
},
cacheQuestion(param, callback) {
......
src/pages/exam/testExam/exam/index.vue
浏览文件 @ 9c0aae9c
......@@ -65,7 +65,6 @@ export default {
const refData = this.$refs.exam
const id = this.data.id
const answer = {}
console.log(refData.questionGroups)
refData.questionGroups.forEach(item => {
if (!answer[item.question_item_id]) answer[item.question_item_id] = {}
item.question_list.forEach(cItem => {
......@@ -83,9 +82,7 @@ export default {
}
api.setCache(param).then(response => {
if (isCache) {
this.$router.replace({
path: '/testExam/result'
})
this.$router.replace({ path: '/testExam/result', query: { exam_id: this.examId } })
}
})
}
......
src/pages/exam/testExam/exam/result.vue
浏览文件 @ 9c0aae9c
......@@ -23,7 +23,9 @@
</div>
<div class="icon"></div>
</div>
<div class="text" v-if="accuracText < 100">{{ accuracText < 80 ? '您离成功还有一段距离，继续努力！' : '成功近在眼前，再接再厉！' }}</div>
<div class="text" v-if="accuracText < 100">
{{ accuracText < 80 ? '您离成功还有一段距离，继续努力！' : '成功近在眼前，再接再厉！' }}
</div>
<!-- <div class="btn">全部考试服务</div> -->
</div>
</div>
......@@ -60,29 +62,27 @@ export default {
this.getExamPapers()
},
computed: {
examId() {
return this.$route.query.exam_id
},
setStyle() {
return `width: ${this.accuracText}%`
}
},
mounted() {
},
methods: {
goPage(param) {
this.$router.push({
path: '/testExam/exam',
query: {
id: param
}
query: { exam_id: this.examId, id: param }
})
},
getExamPapers() {
const param = {
type: 2,
paper_id: this.examId,
is_create: 0
}
api
.getExamQuestion(param)
.then(response => {
api.getExamQuestion(param).then(response => {
const data = JSON.parse(response.data)
let numCount = 0
for (const item in data.sheet.score_items) {
......@@ -93,21 +93,19 @@ export default {
}
}
this.accuracy = parseInt(data.sheet.score)
this.accuracText = parseInt(numCount / data.sheet.questions.total_question_count * 100)
this.accuracText = parseInt((numCount / data.sheet.questions.total_question_count) * 100)
this.data = data
this.accuracScore = parseInt(data.sheet.questions.total_score)
})
.finally(() => {
})
}
}
}
</script>
<style lang="scss" scoped>
.result-box{
.result-box {
width: 100%;
display: flex;
.card-left{
.card-left {
box-sizing: border-box;
padding: 10px 30px 20px;
flex: 1;
......@@ -115,80 +113,80 @@ export default {
margin-right: 10px;
height: 560px;
border-radius: 8px;
.title{
.title {
font-size: 18px;
color: #222222;
line-height: 45px;
border-bottom: 1px solid #ccc;
display: flex;
}
.time{
.time {
font-size: 14px;
color: #222222;
line-height: 45px;
margin-left: auto;
}
.chart-box{
.chart-box {
width: 148px;
margin: 26px auto 0;
}
.assess{
.assess {
font-size: 18px;
color: #222222;
line-height: 45px;
border-bottom: 1px solid #ccc;
}
.assess-box{
.assess-box {
padding-top: 27px;
.prog{
.prog {
width: 350px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
.line-box{
.line-box {
width: 300px;
width: 300px;
height: 10px;
background: #F9F9F9;
background: #f9f9f9;
border-radius: 5px;
.line{
.line {
width: 80%;
height: 10px;
background: linear-gradient(90deg, #F47C46 0%, #F22F48 100%);
background: linear-gradient(90deg, #f47c46 0%, #f22f48 100%);
border-radius: 5px;
}
}
.icon{
.icon {
width: 41px;
height: 38px;
background: url(@/assets/images/res-icon.png);
background-size: 100% 100%;
}
}
.text{
.text {
font-size: 14px;
color: #222222;
line-height: 20px;
text-align: center;
margin: 50px 0 68px 0;
}
.btn{
.btn {
cursor: pointer;
text-align: center;
line-height: 40px;
width: 144px;
height: 40px;
background: #C01540;
background: #c01540;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
color: #ffffff;
margin: 0 auto;
}
}
}
.card-right{
.card-right {
box-sizing: border-box;
flex: 1;
background: #fff;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论