Skip to content

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

updates

上级 ed6d5f10
隐藏空白字符变更
内嵌 并排
正在显示 包含 113 行增加 和 41 行删除
src/components/exam/examCard.vue
浏览文件 @ 7497a30b
......@@ -10,7 +10,7 @@
</div>
<div class="exam-main">
<div class="left">
<question-list :data="currentExam">
<question-list :data="currentExam" :index="index" :disabled="disabled" :hasResult="hasResult">
<template #index>{{ index + 1 }}/100</template>
</question-list>
</div>
......@@ -57,6 +57,8 @@ export default {
data() {
return {
index: 0,
disabled: false,
hasResult: false,
questionList: [] // 所有试题
}
},
......@@ -79,9 +81,6 @@ export default {
}
}
},
mounted() {
console.log(this.questionList)
},
methods: {
// 下一题
nextQuestion() {
......@@ -140,13 +139,22 @@ export default {
},
// 组装试题数据
genQuestions(data) {
const { questions = [], answers } = data
console.log(answers)
const { questions = [], answers = {} } = data
if (!questions) return []
this.questionList = questions.question_items.reduce((result, question) => {
question.question_list.forEach(list => {
list = list.map(item => {
return { ...item, user_answer: [] }
let userAnswers = []
if (answers) {
// 大题答案包含所有小题答案
const bigQuestionAnswer = answers[question.question_item_id]
if (bigQuestionAnswer) {
// 小题答案
const questionAnswer = bigQuestionAnswer[item.id]
userAnswers = questionAnswer ? questionAnswer.answer : []
}
}
return { ...item, user_answer: userAnswers }
})
result.push(Object.assign({}, question, { question_list: list }))
})
......@@ -163,6 +171,7 @@ export default {
flex-direction: column;
width: 100%;
height: 100vh;
overflow: hidden;
// background: #f9f9f9;
.head {
border-bottom: 1px solid #ccc;
......@@ -210,6 +219,7 @@ export default {
.exam-main {
flex: 1;
display: flex;
overflow: hidden;
.left {
background: #fff;
flex: 1;
......@@ -235,10 +245,6 @@ export default {
}
.foot {
border-top: 1px solid #ccc;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: #ffffff;
display: flex;
......
src/components/exam/questionList.vue
浏览文件 @ 7497a30b
......@@ -7,11 +7,12 @@
<div class="question-list-bd">
<h2 class="question-list-title" v-if="conmonTitle">{{ conmonTitle }}</h2>
<question-list-item
v-for="(item, index) in data.question_list"
v-for="(item, i) in data.question_list"
:data="item"
:question="data"
:index="index"
:key="index"
:index="data.question_list.length > 1 ? i : index"
:key="item.id"
v-bind="$attrs"
v-on="$listeners"
/>
</div>
......@@ -21,7 +22,7 @@
<script>
import QuestionListItem from './questionListItem.vue'
export default {
props: { data: { type: Object, default: () => ({}) } },
props: { data: { type: Object, default: () => ({}) }, index: { type: Number, default: 0 } },
components: { QuestionListItem },
computed: {
// 试题类型
......@@ -39,10 +40,16 @@ export default {
</script>
<style lang="scss" scoped>
.question-list {
position: relative;
}
.question-list-hd {
position: sticky;
top: 0;
display: flex;
align-items: center;
height: 45px;
background-color: #fff;
}
.question-list-hd__title {
flex: 1;
......
src/components/exam/questionListItem.vue
浏览文件 @ 7497a30b
......@@ -7,7 +7,7 @@
<div class="question-list-item-bd">
<!-- 单选 -->
<template v-if="questionType === 1">
<el-radio-group v-model="data.user_answer[0]">
<el-radio-group v-model="data.user_answer[0]" :disabled="disabled">
<div class="question-option-item" v-for="item in currentOptions" :key="item.id">
<el-radio :label="item.id">
<div class="question-option-item__text" v-html="item.abc_option"></div>
......@@ -17,7 +17,7 @@
</template>
<!-- 多选 -->
<template v-if="[2, 6].includes(questionType)">
<el-checkbox-group v-model="data.user_answer">
<el-checkbox-group v-model="data.user_answer" :disabled="disabled">
<div class="question-option-item" v-for="item in currentOptions" :key="item.id">
<el-checkbox :label="item.id">
<div class="question-option-item__text" v-html="item.abc_option"></div>
......@@ -27,14 +27,37 @@
</template>
<!-- 简答题 -->
<template v-if="questionType === 3">
<el-input type="textarea" v-model="data.user_answer[0]"></el-input>
<el-input
type="textarea"
v-model="data.user_answer[0]"
placeholder="请输入答案内容"
:autosize="{ minRows: 4, maxRows: 6 }"
:disabled="disabled"
></el-input>
</template>
</div>
<div class="question-list-item-ft">
<h3>答案解析</h3>
<!-- <p>正确答案：{{ correctAnswerText }}</p>
<p>您的答案：{{ submitAnswerText }}</p> -->
<p>解析：{{ data.question_analysis }}</p>
<div class="question-list-item-ft" v-if="hasResult">
<h3 class="question-list-item-ft__title">答案解析</h3>
<template v-if="questionType !== 3">
<div class="answer-item">
<div class="answer-item-label">正确答案：</div>
<div class="answer-item-content">{{ correctAnswerText }}</div>
</div>
<div class="answer-item">
<div class="answer-item-label">您的答案：</div>
<div class="answer-item-content">{{ correctAnswerText }}</div>
</div>
</template>
<template v-else>
<div class="answer-item">
<div class="answer-item-label">老师点评：</div>
<div class="answer-item-content">{{ correctAnswerText }}</div>
</div>
</template>
<div class="answer-item" v-if="data.question_analysis">
<div class="answer-item-label">解析：</div>
<div class="answer-item-content">{{ data.question_analysis }}</div>
</div>
</div>
</div>
</template>
......@@ -44,7 +67,9 @@ export default {
props: {
index: { type: Number, default: 0 },
data: { type: Object, default: () => ({}) }, // 小题
question: { type: Object, default: () => ({}) } // 大题
question: { type: Object, default: () => ({}) }, // 大题
disabled: { type: Boolean, default: false },
hasResult: { type: Boolean, default: false }
},
data() {
return {}
......@@ -77,30 +102,41 @@ export default {
// 英文字母 + 名称
item.abc = this.A_Z[index]
item.abc_option = `${this.A_Z[index]}. ${item.option}`
// 提交时的选中状态
item.checked = this.data.user_answer.includes(item.id)
// 处理正确的选中状态
const hasChecked = Object.prototype.hasOwnProperty.call(item, 'isRight')
const rightAnswer = this.data.question_answer || []
if (!hasChecked && rightAnswer) {
item.isRight = Array.isArray(rightAnswer) ? rightAnswer.includes(item.id) : rightAnswer === item.id
}
return item
})
}
},
// 正确答案显示的英文字母
// correctAnswerText() {
// const result = this.currentOptions.reduce((result, item) => {
// item.checked && result.push(item.abc)
// return result
// }, [])
// return result.join('、')
// },
correctAnswerText() {
const result = this.currentOptions.reduce((result, item) => {
item.isRight && result.push(item.abc)
return result
}, [])
return result.join('、')
},
// // 提交答案显示的英文字母
// submitAnswerText() {
// const result = this.currentOptions.reduce((result, item) => {
// item.selected && result.push(item.abc)
// return result
// }, [])
// return result.join('、')
// }
submitAnswerText() {
const result = this.currentOptions.reduce((result, item) => {
item.checked && result.push(item.abc)
return result
}, [])
return result.join('、')
}
}
}
</script>
<style lang="scss" scoped>
.question-list-item {
margin-bottom: 40px;
}
.question-list-item-hd {
display: flex;
}
......@@ -119,6 +155,9 @@ export default {
color: #222;
line-height: 25px;
}
.question-list-item-bd {
margin-left: 30px;
}
.question-option-item {
margin-top: 20px;
}
......@@ -128,12 +167,32 @@ export default {
color: #222;
}
::v-deep .el-radio__inner {
::v-deep .el-radio__inner,
::v-deep .el-checkbox__inner {
width: 18px;
height: 18px;
}
::v-deep .el-checkbox__inner::after {
width: 4px;
height: 9px;
left: 6px;
}
.question-list-item-ft {
margin-top: 20px;
margin-left: 30px;
}
.question-list-item-ft__title {
font-size: 18px;
font-weight: bold;
color: #222;
line-height: 25px;
}
.answer-item {
margin-top: 10px;
margin-left: 28px;
display: flex;
font-size: 18px;
color: #222;
line-height: 25px;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论