|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | 天诚科技 [ 刘海东 17600099397赋能开发者，助力企业发展 ] -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Copyright (c) 2016～2022 https://www.crmeb.com All rights reserved. -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Licensed 该系统并不是自由软件，未经许可不能去掉相关版权 -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Author:甘肃天诚志信电子商务有限公司 刘海东 联系电话维系17600099397 -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
{extend name="public/container"}
|
|
|
{block name="title"}练习答题{/block}
|
|
|
{block name="head_top"}
|
|
|
<style>
|
|
|
body {
|
|
|
background-color: #f5f5f5;
|
|
|
}
|
|
|
|
|
|
.share-mask {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
z-index: 6;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
</style>
|
|
|
{/block}
|
|
|
{block name="content"}
|
|
|
<div v-cloak id="app" class="question-paper">
|
|
|
<div v-show="questionSwiper" class="header">
|
|
|
<div :style="{ visibility: isSubmits ? 'hidden' : 'visible' }" class="message">温馨提示：请点击“答题卡”前去提交考试哦！</div>
|
|
|
<div class="header-bd">
|
|
|
<a :href="'{:url('topic/problem_sheet')}?test_id=' + test_id + '&record_id=' + e_id + '&index=' + activeIndex">答题卡</a>
|
|
|
<a v-if="isWechat" href="javascript:" @click="isShare = true">分享</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="swiper-container swiper-no-swiping">
|
|
|
<div class="swiper-wrapper">
|
|
|
<div v-for="item in virtualData.slides" :key="item.id" :style="{ left: virtualData.offset + 'px' }" class="swiper-slide">
|
|
|
<div class="type">{{ item.questionType }}</div>
|
|
|
<div class="question">
|
|
|
<div>{{ item.stem }}</div>
|
|
|
<img v-if="item.image" :src="item.image">
|
|
|
<div :class="{ image: item.is_img }" class="label-group">
|
|
|
<template v-for="option in item.options">
|
|
|
<label v-if="option.value" :key="option.code">
|
|
|
<input v-if="item.question_type === 2" v-model="item.user_answer" :value="option.code" :disabled="isSubmits || !!item.is_correct" type="checkbox" hidden>
|
|
|
<input v-else v-model="item.user_answer" :value="option.code" :disabled="isSubmits || !!item.is_correct" type="radio" hidden>
|
|
|
<div :class="{
|
|
|
ok: option.right && item.is_correct && item.user_answer.includes(option.code),
|
|
|
no: !option.right && item.is_correct && item.user_answer.includes(option.code)
|
|
|
}">
|
|
|
<img v-if="item.is_img" :src="option.value">
|
|
|
<template v-else>{{ option.value }}</template>
|
|
|
</div>
|
|
|
</label>
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-show="isSubmits || item.is_correct" class="analysis">
|
|
|
<div :class="{ no: item.is_correct === 1 }">回答{{ item.is_correct === 1 ? '错误' : '正确' }}</div>
|
|
|
<div>
|
|
|
<div>正确答案：<div>{{ item.answer }}</div>
|
|
|
</div>
|
|
|
<div>您的答案：<div>{{ item.user_answer.toString() || '未答' }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>试题难度：<span v-for="star in 5" :key="star" :class="{ on: item.difficulty >= star }" class="iconfont iconxing"></span></div>
|
|
|
<div>答案解析：</div>
|
|
|
<div v-html="item.analysis"></div>
|
|
|
<div v-if="item.special.length">关联知识点：</div>
|
|
|
<a v-for="special in item.special" :key="special.id"
|
|
|
:href="(special.is_light ? '{:url('special/single_details')}' : '{:url('special/details')}') + '?id=' + special.id">{{ special.title }}</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="swiper-pagination"></div>
|
|
|
</div>
|
|
|
<div v-if="questionSwiper" class="footer">
|
|
|
<button :disabled="!questionSwiper.activeIndex" @click="slidePrev">
|
|
|
<i class="iconfont iconshangyige"></i>
|
|
|
<div>上一题</div>
|
|
|
</button>
|
|
|
<button v-if="!isSubmits" :disabled="!!questions[questionSwiper.activeIndex].is_correct" @click="submitQuestion">
|
|
|
<i class="iconfont icontijiao"></i>
|
|
|
<div>确认提交</div>
|
|
|
</button>
|
|
|
<button :disabled="questionSwiper.activeIndex === questionSwiper.virtual.slides.length - 1" @click="slideNext">
|
|
|
<i class="iconfont iconxiayige"></i>
|
|
|
<div>下一题</div>
|
|
|
</button>
|
|
|
</div>
|
|
|
<img v-show="isShare" class="share-mask" src="{__WAP_PATH}zsff/images/share-info.png" @touchmove.prevent @click="isShare = false">
|
|
|
<quick-menu></quick-menu>
|
|
|
<question-guide :visible.sync="guideVisible"></question-guide>
|
|
|
</div>
|
|
|
{/block}
|
|
|
{block name="foot"}
|
|
|
<script>
|
|
|
window.overallShare = false;
|
|
|
var wechat_share =<?php echo isset($overallShareWechat) ? $overallShareWechat : '{}'; ?>;
|
|
|
var uid = '{$uid}';
|
|
|
var titles = '{$titles}';
|
|
|
require([
|
|
|
'vue',
|
|
|
'helper',
|
|
|
'axios',
|
|
|
'swiper',
|
|
|
'layer',
|
|
|
'components/question-guide/index',
|
|
|
'quick'
|
|
|
], function (Vue, $h, axios, Swiper, layer, questionGuide) {
|
|
|
var isWechat = '{$isWechat}';
|
|
|
var app = new Vue({
|
|
|
el: '#app',
|
|
|
components: {
|
|
|
'question-guide': questionGuide
|
|
|
},
|
|
|
data: {
|
|
|
questions: [],
|
|
|
test_id: '',
|
|
|
e_id: '',
|
|
|
isWechat: isWechat,
|
|
|
is_analysis: 0,
|
|
|
isShare: false,
|
|
|
activeIndex: 0,
|
|
|
virtualData: {
|
|
|
slides: []
|
|
|
},
|
|
|
questionSwiper: null,
|
|
|
guideVisible: false,
|
|
|
isSubmits: 0
|
|
|
},
|
|
|
watch: {
|
|
|
guideVisible: function (value) {
|
|
|
if (!value) {
|
|
|
localStorage.setItem('problem-guide', new Date());
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
created: function () {
|
|
|
var vm = this;
|
|
|
this.test_id = $h.getParmas('test_id');
|
|
|
this.activeIndex = Number($h.getParmas('index'));
|
|
|
|
|
|
if (parseInt($h.getParmas('is_analysis'))) {
|
|
|
this.is_analysis = 1;
|
|
|
// this.e_id = $h.getParmas('e_id');
|
|
|
// this.getQuestions();
|
|
|
} else {
|
|
|
// this.getSituation();
|
|
|
}
|
|
|
if ($h.getParmas('e_id')) {
|
|
|
this.e_id = $h.getParmas('e_id');
|
|
|
this.getQuestions();
|
|
|
}
|
|
|
if (this.isWechat) {
|
|
|
mapleWx($jssdk(), function () {
|
|
|
this.onMenuShareAll({
|
|
|
title: titles,
|
|
|
desc: titles,
|
|
|
imgUrl: wechat_share.wechat_share_img,
|
|
|
link: window.location.origin + "{:url('topic/problem_index')}?spread_uid=" + uid + "&id=" + vm.test_id
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
this.isSubmit();
|
|
|
},
|
|
|
methods: {
|
|
|
// 获取状态
|
|
|
getSituation: function () {
|
|
|
var vm = this;
|
|
|
var load = layer.load(1);
|
|
|
axios.get('/wap/topic/situationRecord', {
|
|
|
params: {
|
|
|
id: this.test_id
|
|
|
}
|
|
|
}).then(function (res) {
|
|
|
if (res.data.code === 400) {
|
|
|
return layer.msg(res.data.msg);
|
|
|
}
|
|
|
switch (res.data.data) {
|
|
|
case 0:
|
|
|
vm.getAnswer();
|
|
|
break;
|
|
|
case 1:
|
|
|
vm.getAnswerAgain();
|
|
|
break;
|
|
|
case 2:
|
|
|
vm.getAnswerContinue();
|
|
|
break;
|
|
|
}
|
|
|
}).catch(function () {
|
|
|
|
|
|
}).then(function () {
|
|
|
layer.close(load);
|
|
|
});
|
|
|
},
|
|
|
// 开始答题
|
|
|
getAnswer: function () {
|
|
|
var vm = this;
|
|
|
var load = layer.load(1);
|
|
|
axios.get('/wap/topic/userAnswer', {
|
|
|
params: {
|
|
|
test_id: this.test_id,
|
|
|
type: 1
|
|
|
}
|
|
|
}).then(function (res) {
|
|
|
if (res.data.code === 200) {
|
|
|
vm.e_id = res.data.data;
|
|
|
$h.setCookie('e_id', vm.e_id);
|
|
|
vm.getQuestions();
|
|
|
} else {
|
|
|
layer.msg(res.data.msg, function () {
|
|
|
window.location.assign('{:url(\'topic/question_user\')}?type=1');
|
|
|
});
|
|
|
}
|
|
|
}).catch(function () {
|
|
|
|
|
|
}).then(function () {
|
|
|
layer.close(load);
|
|
|
});
|
|
|
},
|
|
|
// 再次答题
|
|
|
getAnswerAgain: function () {
|
|
|
var vm = this;
|
|
|
var load = layer.load(1);
|
|
|
axios.get('/wap/topic/takeTheTestAgain', {
|
|
|
params: {
|
|
|
test_id: this.test_id,
|
|
|
type: 1
|
|
|
}
|
|
|
}).then(function (res) {
|
|
|
if (res.data.code === 200) {
|
|
|
vm.e_id = res.data.data;
|
|
|
$h.setCookie('e_id', vm.e_id);
|
|
|
vm.getQuestions();
|
|
|
} else {
|
|
|
layer.msg(res.data.msg, function () {
|
|
|
window.location = "{:url('topic/question_user')}?type=1";
|
|
|
});
|
|
|
}
|
|
|
}).catch(function () {
|
|
|
|
|
|
}).then(function () {
|
|
|
layer.close(load);
|
|
|
});
|
|
|
},
|
|
|
// 继续答题
|
|
|
getAnswerContinue: function () {
|
|
|
var vm = this;
|
|
|
var load = layer.load(1);
|
|
|
axios.get('/wap/topic/continueAnswer', {
|
|
|
params: {
|
|
|
test_id: this.test_id,
|
|
|
type: 1
|
|
|
}
|
|
|
}).then(function (res) {
|
|
|
if (res.data.code === 200) {
|
|
|
vm.e_id = res.data.data;
|
|
|
$h.setCookie('e_id', vm.e_id);
|
|
|
vm.getQuestions();
|
|
|
} else {
|
|
|
layer.msg(res.data.msg, function () {
|
|
|
window.location = "{:url('topic/question_user')}?type=1";
|
|
|
});
|
|
|
}
|
|
|
}).catch(function () {
|
|
|
|
|
|
}).then(function () {
|
|
|
layer.close(load);
|
|
|
});
|
|
|
},
|
|
|
// 获取练习题
|
|
|
getQuestions: function () {
|
|
|
var vm = this;
|
|
|
var load = layer.load(1);
|
|
|
axios.get('/wap/topic/testPaperQuestions', {
|
|
|
params: {
|
|
|
test_id: this.test_id,
|
|
|
record_id: this.e_id,
|
|
|
type: 1
|
|
|
}
|
|
|
}).then(function (res) {
|
|
|
var questions = res.data.data;
|
|
|
questions.forEach(function (question) {
|
|
|
question.options = [];
|
|
|
if (Array.isArray(question.option)) {
|
|
|
question.option.forEach(function (option, index) {
|
|
|
var code = String.fromCharCode(index + 65);
|
|
|
question.options.push({
|
|
|
code: code,
|
|
|
value: option,
|
|
|
right: question.answer.includes(code)
|
|
|
});
|
|
|
});
|
|
|
} else {
|
|
|
for (var key in question.option) {
|
|
|
if (Object.hasOwnProperty.call(question.option, key)) {
|
|
|
question.options.push({
|
|
|
code: key,
|
|
|
value: question.option[key],
|
|
|
right: question.answer.includes(key)
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
if (!Array.isArray(question.userAnswer)) {
|
|
|
Object.assign(question, question.userAnswer);
|
|
|
}
|
|
|
if (!('is_correct' in question)) {
|
|
|
question.is_correct = 0;
|
|
|
}
|
|
|
if (!('user_answer' in question)) {
|
|
|
question.user_answer = '';
|
|
|
}
|
|
|
if (question.question_type === 2) {
|
|
|
question.user_answer = question.user_answer ? question.user_answer.split(',') : [];
|
|
|
}
|
|
|
switch (question.question_type) {
|
|
|
case 1:
|
|
|
question.questionType = '单选题';
|
|
|
break;
|
|
|
case 2:
|
|
|
question.questionType = '多选题';
|
|
|
break;
|
|
|
case 3:
|
|
|
question.questionType = '判断题';
|
|
|
break;
|
|
|
}
|
|
|
});
|
|
|
vm.questions = questions;
|
|
|
vm.questionSwiper = new Swiper('.swiper-container', {
|
|
|
initialSlide: vm.activeIndex,
|
|
|
pagination: {
|
|
|
el: '.swiper-pagination',
|
|
|
type: 'fraction'
|
|
|
},
|
|
|
virtual: {
|
|
|
slides: questions,
|
|
|
renderExternal: function (data) {
|
|
|
vm.virtualData = data;
|
|
|
}
|
|
|
},
|
|
|
on: {
|
|
|
init: function () {
|
|
|
vm.guideVisible = !localStorage.getItem('problem-guide');
|
|
|
},
|
|
|
slideChange: function () {
|
|
|
vm.activeIndex = this.activeIndex;
|
|
|
if (vm.activeIndex === vm.questions.length - 1) {
|
|
|
layer.msg('答完全部考题后<br>点击左上角“答题卡”前去提交练习');
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
}).catch(function () {
|
|
|
|
|
|
}).then(function () {
|
|
|
layer.close(load);
|
|
|
});
|
|
|
},
|
|
|
// 提交本题
|
|
|
submitQuestion: function () {
|
|
|
var question = this.questions[this.activeIndex];
|
|
|
var data = {
|
|
|
e_id: this.e_id,
|
|
|
questions_id: question.questions_id,
|
|
|
answer: question.answer,
|
|
|
score: question.score,
|
|
|
type: 1
|
|
|
};
|
|
|
if (!question.user_answer.length) {
|
|
|
return layer.msg('请作答后提交本题');
|
|
|
}
|
|
|
if (question.question_type === 2) {
|
|
|
question.user_answer.sort();
|
|
|
data.user_answer = question.user_answer.toString();
|
|
|
} else {
|
|
|
data.user_answer = question.user_answer;
|
|
|
}
|
|
|
data.is_correct = data.user_answer === question.answer ? 2 : 1;
|
|
|
var load = layer.load(1);
|
|
|
axios.post('/wap/topic/submitQuestions', data).then(function (res) {
|
|
|
if (res.data.code === 200) {
|
|
|
question.is_correct = data.is_correct;
|
|
|
} else {
|
|
|
layer.msg(res.data.msg);
|
|
|
}
|
|
|
}).catch(function () {
|
|
|
|
|
|
}).then(function () {
|
|
|
layer.close(load);
|
|
|
});
|
|
|
},
|
|
|
// 上一题
|
|
|
slidePrev: function () {
|
|
|
this.questionSwiper.slidePrev();
|
|
|
},
|
|
|
// 下一题
|
|
|
slideNext: function () {
|
|
|
this.questionSwiper.slideNext();
|
|
|
},
|
|
|
isSubmit: function () {
|
|
|
var that=this;
|
|
|
axios.post('/wap/topic/is_submit', {
|
|
|
examination_id: that.e_id
|
|
|
}).then(function (res) {
|
|
|
that.isSubmits = res.data.data;
|
|
|
});
|
|
|
},
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
{/block} |
