|
|
|
|
@ -0,0 +1,189 @@
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
|
|
|
|
<head>
|
|
|
|
|
<th:block th:include="include :: header('详情')" />
|
|
|
|
|
<th:block th:include="include :: element-css" />
|
|
|
|
|
</head>
|
|
|
|
|
<style>
|
|
|
|
|
.qu-content div{
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.qu-analysis p{
|
|
|
|
|
color: #555; font-size: 14px
|
|
|
|
|
}
|
|
|
|
|
.qu-analysis-line{
|
|
|
|
|
margin-top: 20px; border-bottom: #eee 1px solid
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-checkbox-group label,.el-radio-group label{
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<body class="white-bg">
|
|
|
|
|
<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="app">
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
|
|
|
|
|
<el-card style="margin-top: 20px;font-size: 16px">
|
|
|
|
|
|
|
|
|
|
<div class="qu-content">
|
|
|
|
|
|
|
|
|
|
<p>【{{ quData.quTypeData | quTypeFilter }}】{{ quData.content }}</p>
|
|
|
|
|
<p v-if="quData.image!=null && quData.image!=''">
|
|
|
|
|
<el-image :src="quData.image" style="max-width:100%;" />
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<div v-if="quData.quType === 1 || quData.quType===3 ">
|
|
|
|
|
<el-radio-group v-model="answerValues[0]" readonly>
|
|
|
|
|
<el-radio v-for="an in quData.answerList" :key="an.id" :label="an.id" readonly>
|
|
|
|
|
{{ an.abc }}.{{ an.content }}
|
|
|
|
|
<div v-if="an.image!=null && an.image!=''" style="clear: both">
|
|
|
|
|
<el-image :src="an.image" style="max-width:100%;" />
|
|
|
|
|
</div>
|
|
|
|
|
</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 多选题 -->
|
|
|
|
|
<div v-if="quData.quType === 2">
|
|
|
|
|
<el-checkbox-group v-model="answerValues" readonly>
|
|
|
|
|
<el-checkbox v-for="an in quData.answerList" :key="an.id" :label="an.id">
|
|
|
|
|
{{ an.abc }}.{{ an.content }}
|
|
|
|
|
<div v-if="an.image!=null && an.image!=''" style="clear: both">
|
|
|
|
|
<el-image :src="an.image" style="max-width:100%;" />
|
|
|
|
|
</div>
|
|
|
|
|
</el-checkbox>
|
|
|
|
|
</el-checkbox-group>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div v-if="analysisShow" style="margin-top: 20px; color: #1890ff; font-weight: bold">
|
|
|
|
|
正确答案：{{ rightTags.join(' ') }}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
|
<el-card v-if="analysisShow" class="qu-analysis" style="margin-top: 20px">
|
|
|
|
|
整题解析：
|
|
|
|
|
<p>{{ quData.analysis }}</p>
|
|
|
|
|
<p v-if="!quData.analysis">暂无解析内容！</p>
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
|
<el-card v-if="analysisShow" class="qu-analysis" style="margin-top: 20px;">
|
|
|
|
|
选项解析：
|
|
|
|
|
<div v-for="an in quData.answerList" v-if="an.analysis" class="qu-analysis-line">
|
|
|
|
|
<p style="color: #555;">{{ an.content }}：</p>
|
|
|
|
|
<p style="color: #1890ff;">{{ an.analysis }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p v-if="analysisCount === 0">暂无选项解析</p>
|
|
|
|
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
|
<div style="padding-top: 30px">
|
|
|
|
|
<el-button type="primary" @click="handNext">继续下一题</el-button>
|
|
|
|
|
<el-button type="info" onclick="closeItem()">返回</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<th:block th:include="include :: footer" />
|
|
|
|
|
<th:block th:include="include :: element-js" />
|
|
|
|
|
<script th:inline="javascript">
|
|
|
|
|
var app = new Vue({
|
|
|
|
|
el: '#app',
|
|
|
|
|
data: {
|
|
|
|
|
examId: '',
|
|
|
|
|
quId: '',
|
|
|
|
|
tags: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],
|
|
|
|
|
analysisShow: false,
|
|
|
|
|
quData: {
|
|
|
|
|
quTypeData:''
|
|
|
|
|
},
|
|
|
|
|
answerValues: [],
|
|
|
|
|
rightValues: [],
|
|
|
|
|
rightTags: []
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.examId = [[${examId}]]
|
|
|
|
|
|
|
|
|
|
this.fetchNextQu()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
clearValues() {
|
|
|
|
|
this.answerValues = []
|
|
|
|
|
this.rightValues = []
|
|
|
|
|
this.analysisShow = false
|
|
|
|
|
this.rightTags = []
|
|
|
|
|
},
|
|
|
|
|
// 查找试卷详情
|
|
|
|
|
fetchQuDetail(id) {
|
|
|
|
|
// 当前赋值
|
|
|
|
|
this.quId = id
|
|
|
|
|
this.clearValues()
|
|
|
|
|
let that = this
|
|
|
|
|
axios.get('/system/qu/detail',{params:{quId:id}}).then(response => {
|
|
|
|
|
// 题目信息
|
|
|
|
|
that.quData = response.data.data
|
|
|
|
|
if (that.quData.quType === 1) {
|
|
|
|
|
that.quData.quTypeData = '单选题'
|
|
|
|
|
}else if(that.quData.quType === 3){
|
|
|
|
|
that.quData.quTypeData = '判断题'
|
|
|
|
|
}else if(that.quData.quType === 2){
|
|
|
|
|
that.quData.quTypeData = '多选题'
|
|
|
|
|
}
|
|
|
|
|
// 保存正确答案
|
|
|
|
|
that.quData.answerList.forEach((an, index) => {
|
|
|
|
|
an.abc = that.tags[index]
|
|
|
|
|
|
|
|
|
|
// 用户选定的
|
|
|
|
|
if (an.isRight) {
|
|
|
|
|
that.rightValues.push(an.id)
|
|
|
|
|
that.rightTags.push(an.abc)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
fetchNextQu() {
|
|
|
|
|
// 查找下一个
|
|
|
|
|
let that = this
|
|
|
|
|
let param = {
|
|
|
|
|
examId: this.examId,
|
|
|
|
|
quId: this.quId
|
|
|
|
|
}
|
|
|
|
|
axios.post('/system/userBook/next',param).then(response => {
|
|
|
|
|
that.fetchQuDetail(response.data.msg)
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
handNext() {
|
|
|
|
|
// 直接显示下一个
|
|
|
|
|
if (this.analysisShow) {
|
|
|
|
|
// 正确显示下一个
|
|
|
|
|
this.fetchNextQu()
|
|
|
|
|
} else {
|
|
|
|
|
// 直接判断正确性
|
|
|
|
|
if (this.rightValues.join(',') === this.answerValues.join(',')) {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '回答正确，你好棒哦！',
|
|
|
|
|
type: 'success'
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 正确显示下一个
|
|
|
|
|
this.fetchNextQu()
|
|
|
|
|
} else {
|
|
|
|
|
// 错误显示解析
|
|
|
|
|
this.analysisShow = true
|
|
|
|
|
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '很遗憾，做错了呢，请参考答案解析！',
|
|
|
|
|
type: 'error'
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
dshclm
9 months ago