|
|
@@ -2,106 +2,134 @@
|
|
|
<el-container>
|
|
|
<el-header height="220">
|
|
|
<el-row style="margin-top: 10px">
|
|
|
- <el-button type="primary" icon="el-icon-upload" style="float: right; padding: 3px 0" plain @click="onSubmitPaper">
|
|
|
- 提交试卷
|
|
|
- </el-button>
|
|
|
+ <h1 style="color: blue; text-align: center">{{ paperInfo.name }}</h1>
|
|
|
+ <h1 style="color: blue; text-align: center">
|
|
|
+ {{ paperInfo.duration }} 分钟 | {{ paperInfo.totalScore }} 分
|
|
|
+ </h1>
|
|
|
</el-row>
|
|
|
</el-header>
|
|
|
- <el-main v-if="questionMap !== null">
|
|
|
- <!-- 回答试题区域 -->
|
|
|
- <div v-for="(values, key) in questionMap" :key="key">
|
|
|
- <div v-if="key === '1'">
|
|
|
- <h1>单项选择题</h1>
|
|
|
- <div v-for="(item1, index1) in values" :key="index1">
|
|
|
- <span v-html="item1.questionContent" />
|
|
|
- <el-radio-group
|
|
|
- v-model="selectRadioArr[index1]"
|
|
|
- @change="(val) => {
|
|
|
- onRadioChange(val, item1)
|
|
|
- }"
|
|
|
- >
|
|
|
- <el-radio :label="1">A</el-radio>
|
|
|
- <el-radio :label="2">B</el-radio>
|
|
|
- <el-radio :label="3">C</el-radio>
|
|
|
- <el-radio :label="4">D</el-radio>
|
|
|
- </el-radio-group>
|
|
|
+ <el-main v-if="userAnswerMap !== null">
|
|
|
+ <el-col :md="12">
|
|
|
+ <!-- 回答试题区域 -->
|
|
|
+ <div v-for="(values, key) in questionMap" :key="key">
|
|
|
+ <div v-if="key === '1'">
|
|
|
+ <h1>单项选择题</h1>
|
|
|
+ <div v-for="(item1, index1) in values" :key="index1" class="movie-list">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div class="text item">
|
|
|
+ <span v-html="item1.questionContent" />
|
|
|
+ <el-divider />
|
|
|
+ <el-radio-group
|
|
|
+ v-model="userAnswerMap[item1.questionId][0]"
|
|
|
+ @change="(val) => {
|
|
|
+ onRadioChange(val, item1)
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-radio :label="1">A</el-radio>
|
|
|
+ <el-radio :label="2">B</el-radio>
|
|
|
+ <el-radio :label="3">C</el-radio>
|
|
|
+ <el-radio :label="4">D</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <el-divider />
|
|
|
</div>
|
|
|
- <el-divider />
|
|
|
- </div>
|
|
|
- <div v-else-if="key === '2' || key === '3'">
|
|
|
- <h1>多项选择题/不定项选择题</h1>
|
|
|
- <div v-for="(item1, index1) in values" :key="index1">
|
|
|
- <span v-html="item1.questionContent" />
|
|
|
- <el-checkbox-group
|
|
|
- v-model="checkList"
|
|
|
- @change="(val) => {
|
|
|
- onCheckboxChange(val, item1)
|
|
|
- }"
|
|
|
- >
|
|
|
- <el-checkbox label="1">A</el-checkbox>
|
|
|
- <el-checkbox label="2">B</el-checkbox>
|
|
|
- <el-checkbox label="3">C</el-checkbox>
|
|
|
- <el-checkbox label="4">D</el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
+ <div v-else-if="key === '2' || key === '3'">
|
|
|
+ <h1>多项选择题/不定项选择题</h1>
|
|
|
+ <div v-for="(item1, index1) in values" :key="index1">
|
|
|
+ <span v-html="item1.questionContent" />
|
|
|
+ <el-checkbox-group
|
|
|
+ v-model="userAnswerMap[item1.questionId]"
|
|
|
+ @change="(val) => {
|
|
|
+ onCheckboxChange(val, item1)
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-checkbox label="1">A</el-checkbox>
|
|
|
+ <el-checkbox label="2">B</el-checkbox>
|
|
|
+ <el-checkbox label="3">C</el-checkbox>
|
|
|
+ <el-checkbox label="4">D</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <el-divider />
|
|
|
</div>
|
|
|
- <el-divider />
|
|
|
- </div>
|
|
|
- <div v-else-if="key === '4'">
|
|
|
- <h1>判断题</h1>
|
|
|
- <div v-for="(item1, index1) in values" :key="index1">
|
|
|
- <span v-html="item1.questionContent" />
|
|
|
- <el-radio-group
|
|
|
- v-model="judgeRadioArr[item1.pos]"
|
|
|
- @change="(val) => {
|
|
|
- onRadioChange(val, item1)
|
|
|
- }"
|
|
|
- >
|
|
|
- <el-radio :label="1">正确</el-radio>
|
|
|
- <el-radio :label="2">错误</el-radio>
|
|
|
- </el-radio-group>
|
|
|
+ <div v-else-if="key === '4'">
|
|
|
+ <h1>判断题</h1>
|
|
|
+ <div v-for="(item1, index1) in values" :key="index1">
|
|
|
+ <span v-html="item1.questionContent" />
|
|
|
+ <el-radio-group
|
|
|
+ v-model="userAnswerMap[item1.questionId][0]"
|
|
|
+ @change="(val) => {
|
|
|
+ onRadioChange(val, item1)
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-radio :label="1">正确</el-radio>
|
|
|
+ <el-radio :label="2">错误</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <el-divider />
|
|
|
</div>
|
|
|
- <el-divider />
|
|
|
- </div>
|
|
|
- <div v-else-if="key === '5'">
|
|
|
- <h1>填空题</h1>
|
|
|
- <div v-for="(item1, index1) in values" :key="index1">
|
|
|
- <span v-html="item1.questionContent" />
|
|
|
- <el-input
|
|
|
- v-model="inputContent"
|
|
|
- type="text"
|
|
|
- placeholder="请输入答案"
|
|
|
- style="width: 20%; padding-right: 2px"
|
|
|
- @blur="(val) => {
|
|
|
- onInputBlur(val, item1)
|
|
|
- }"
|
|
|
- />
|
|
|
+ <div v-else-if="key === '5'">
|
|
|
+ <h1>填空题</h1>
|
|
|
+ <div v-for="(item1, index1) in values" :key="index1">
|
|
|
+ <span v-html="item1.questionContent" />
|
|
|
+ <div v-for="(item2, index2) in userAnswerMap[item1.questionId]" :key="index2">
|
|
|
+ <span style="left: 0;margin-right: 1px;color: black;">第 {{ index2 + 1 }} 题</span>
|
|
|
+ <el-input
|
|
|
+ v-model="userAnswerMap[item1.questionId][index2]"
|
|
|
+ type="text"
|
|
|
+ placeholder="请输入答案"
|
|
|
+ style="width: 20%; padding-right: 2px"
|
|
|
+ @blur="(val) => {
|
|
|
+ onInputBlur(val, item1)
|
|
|
+ }"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-divider />
|
|
|
</div>
|
|
|
- <el-divider />
|
|
|
- </div>
|
|
|
- <div v-else-if="key === '6'">
|
|
|
- <h1>问答题</h1>
|
|
|
- <div v-for="(item1, index1) in values" :key="index1">
|
|
|
- <span v-html="item1.questionContent" />
|
|
|
- <editor id="tinymce" v-model="editorContent" :init="init" style="width: 50%" />
|
|
|
+ <div v-else-if="key === '6'">
|
|
|
+ <h1>问答题</h1>
|
|
|
+ <div v-for="(item1, index1) in values" :key="index1" class="movie-list">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div class="text item">
|
|
|
+ <span v-html="item1.questionContent" />
|
|
|
+ <el-divider />
|
|
|
+ <editor
|
|
|
+ :id="item1.questionId+''"
|
|
|
+ v-model="userAnswerMap[item1.questionId][0]"
|
|
|
+ :init="init"
|
|
|
+ style="width: 50%"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <el-divider />
|
|
|
</div>
|
|
|
- <el-divider />
|
|
|
- </div>
|
|
|
- <div v-else-if="key === '8'">
|
|
|
- <h1>组合题</h1>
|
|
|
- <div v-for="(item1, index1) in values" :key="index1">
|
|
|
- <span v-html="item1.questionContent" />
|
|
|
+ <div v-else-if="key === '8'">
|
|
|
+ <h1>组合题</h1>
|
|
|
+ <div v-for="(item1, index1) in values" :key="index1">
|
|
|
+ <span v-html="item1.questionContent" />
|
|
|
+ </div>
|
|
|
+ <el-divider />
|
|
|
</div>
|
|
|
- <el-divider />
|
|
|
- </div>
|
|
|
- <div v-else>
|
|
|
- <h1>未知试题类型</h1>
|
|
|
- <div v-for="(item1, index1) in values" :key="index1">
|
|
|
- <span v-html="item1.questionContent" />
|
|
|
+ <div v-else>
|
|
|
+ <h1>未知试题类型</h1>
|
|
|
+ <div v-for="(item1, index1) in values" :key="index1">
|
|
|
+ <span v-html="item1.questionContent" />
|
|
|
+ </div>
|
|
|
+ <el-divider />
|
|
|
</div>
|
|
|
- <el-divider />
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </el-col>
|
|
|
</el-main>
|
|
|
+ <el-footer height="220">
|
|
|
+ <el-row style="margin-top: 10px">
|
|
|
+ <el-button type="primary" icon="el-icon-upload" style="float: right; padding: 3px 0" plain @click="onSubmitPaper">
|
|
|
+ 提交试卷
|
|
|
+ </el-button>
|
|
|
+ </el-row>
|
|
|
+ </el-footer>
|
|
|
</el-container>
|
|
|
</template>
|
|
|
|
|
|
@@ -115,21 +143,16 @@ import 'tinymce/themes/silver/theme.min.js'
|
|
|
import 'tinymce/icons/default/icons'
|
|
|
import Editor from '@tinymce/tinymce-vue'
|
|
|
|
|
|
-import { getPaper } from '@/api/exam'
|
|
|
+import { cacheUserAnswer, getPaper, submitExam } from '@/api/exam'
|
|
|
|
|
|
export default {
|
|
|
name: 'ExamQuestionCard',
|
|
|
components: { Editor },
|
|
|
data() {
|
|
|
return {
|
|
|
- radioMap: new Map(),
|
|
|
- // 单选题
|
|
|
- selectRadioArr: [],
|
|
|
- // 判断题
|
|
|
- judgeRadioArr: [],
|
|
|
- radio: '',
|
|
|
- radio1: '',
|
|
|
- checkList: [],
|
|
|
+ radio: '3',
|
|
|
+ checkList: ['2', '3'],
|
|
|
+ checkList1: [2, 3],
|
|
|
inputContent: '',
|
|
|
editorContent: '',
|
|
|
// 屏幕宽度, 为了控制分页条的大小
|
|
|
@@ -151,7 +174,7 @@ export default {
|
|
|
branding: false,
|
|
|
init_instance_callback: (editor) => {
|
|
|
editor.on('focus', (e) => {
|
|
|
- this.$message.info('editor focus')
|
|
|
+ // this.$message.info('editor focus')
|
|
|
})
|
|
|
editor.on('blur', (e) => {
|
|
|
var content = editor.getContent()
|
|
|
@@ -180,14 +203,23 @@ export default {
|
|
|
answer: []
|
|
|
}
|
|
|
],
|
|
|
- answerMap: new Map()
|
|
|
+ userAnswerMap: null,
|
|
|
+ paperId: 0,
|
|
|
+ paperInfo: {
|
|
|
+ name: '',
|
|
|
+ duration: 0,
|
|
|
+ totalScore: 0
|
|
|
+ },
|
|
|
+ paperViewType: [
|
|
|
+ '预览', '答卷', '阅卷', '结果'
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
document.title = '试卷详情'
|
|
|
|
|
|
- const paperId = 3
|
|
|
- this.getPaperDetail(paperId)
|
|
|
+ this.paperId = this.$route.params.paperId
|
|
|
+ this.getPaperDetail(this.paperId)
|
|
|
},
|
|
|
methods: {
|
|
|
renderByMathjax() {
|
|
|
@@ -204,26 +236,12 @@ export default {
|
|
|
getPaper(paperId).then((resp) => {
|
|
|
if (resp.code === 0) {
|
|
|
const respData = resp.data
|
|
|
- /* this.examInfo.paperId = respData.paperId
|
|
|
- this.examInfo.name = respData.name
|
|
|
- this.examInfo.description = respData.description
|
|
|
- this.examInfo.duration = respData.duration
|
|
|
- this.examInfo.totalScore = respData.totalScore*/
|
|
|
+ this.paperInfo.name = respData.name
|
|
|
+ this.paperInfo.duration = respData.duration
|
|
|
+ this.paperInfo.totalScore = respData.totalScore
|
|
|
|
|
|
this.questionMap = respData.questionMap
|
|
|
- for (var key in this.questionMap) {
|
|
|
- for (var item of this.questionMap[key]) {
|
|
|
- this.answerMap.set(item.questionId, {
|
|
|
- questionId: item.questionId,
|
|
|
- answers: []
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- /* this.questionList = respData.questions
|
|
|
- // 重置问题的顺序 单选 -> -> 判断 -> 简答
|
|
|
- this.questionList = this.questionList.sort(function(a, b) {
|
|
|
- return a.questionType - b.questionType
|
|
|
- })*/
|
|
|
+ this.userAnswerMap = respData.userResult.cachedUserAnswers
|
|
|
this.renderByMathjax()
|
|
|
} else {
|
|
|
this.$message.error(resp.msg)
|
|
|
@@ -236,6 +254,7 @@ export default {
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning'
|
|
|
}).then(() => {
|
|
|
+ this.submitPaper()
|
|
|
this.$notify({
|
|
|
title: 'Tips',
|
|
|
message: '试卷已提交, 继续加油! *^▽^*',
|
|
|
@@ -252,24 +271,69 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
onRadioChange(val, item) {
|
|
|
- this.$message.info('change event: ' + val + ' -> ' + item.questionId)
|
|
|
- this.$set(this.radioMap, item.questionId, val)
|
|
|
- this.selectRadioArr[item.pos - 1] = val
|
|
|
- this.answerMap.get(item.questionId).answers[0] = val
|
|
|
- console.log(this.answerMap)
|
|
|
+ // this.$message.info('change event: ' + val + ' -> ' + item.questionId)
|
|
|
+ this.cacheAnswer()
|
|
|
},
|
|
|
onCheckboxChange(val, item) {
|
|
|
- this.$message.info('change event: ' + val + ' -> ' + item.questionId)
|
|
|
+ // this.$message.info('change event: ' + val + ' -> ' + item.questionId)
|
|
|
+ this.cacheAnswer()
|
|
|
},
|
|
|
onInputBlur(val, item) {
|
|
|
- this.$message.info('blur event: ' + val + ' -> ' + item.questionId)
|
|
|
+ // this.$message.info('blur event: ' + val + ' -> ' + item.questionId)
|
|
|
+ this.cacheAnswer()
|
|
|
},
|
|
|
onEditorBlur(val) {
|
|
|
- this.$message.info('editor blur -> ' + this.editorContent)
|
|
|
+ // this.$message.info('editor blur -> ' + this.editorContent)
|
|
|
+ this.cacheAnswer()
|
|
|
+ },
|
|
|
+ cacheAnswer() {
|
|
|
+ var userAnswers = []
|
|
|
+ for (const key in this.userAnswerMap) {
|
|
|
+ const userAnswer = {}
|
|
|
+ userAnswer.questionId = key
|
|
|
+ userAnswer.answers = this.userAnswerMap[key]
|
|
|
+ userAnswers.push(userAnswer)
|
|
|
+ }
|
|
|
+
|
|
|
+ var userResult = {}
|
|
|
+ userResult.paperId = this.paperId
|
|
|
+ userResult.userAnswers = userAnswers
|
|
|
+ cacheUserAnswer(userResult).then(resp => {
|
|
|
+ if (resp.code !== 0) {
|
|
|
+ console.log(resp.msg)
|
|
|
+ }
|
|
|
+ }).catch((e) => {
|
|
|
+ console.log(e)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ submitPaper() {
|
|
|
+ var userAnswers = []
|
|
|
+ for (const key in this.userAnswerMap) {
|
|
|
+ const userAnswer = {}
|
|
|
+ userAnswer.questionId = key
|
|
|
+ userAnswer.answers = this.userAnswerMap[key]
|
|
|
+ userAnswers.push(userAnswer)
|
|
|
+ }
|
|
|
+
|
|
|
+ var userResult = {}
|
|
|
+ userResult.paperId = this.paperId
|
|
|
+ userResult.userAnswers = userAnswers
|
|
|
+ submitExam(userResult).then(resp => {
|
|
|
+ if (resp.code !== 0) {
|
|
|
+ console.log(resp.msg)
|
|
|
+ }
|
|
|
+ }).catch((e) => {
|
|
|
+ console.log(e)
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
+.movie-list {
|
|
|
+ padding-top: 3px;
|
|
|
+ padding-left: 3px;
|
|
|
+ padding-right: 3px;
|
|
|
+}
|
|
|
</style>
|
