399 lines
10 KiB
Python
399 lines
10 KiB
Python
<template>
|
||
<view>
|
||
<!-- 大标题 -->
|
||
<view class="header" id="header">
|
||
<span class="header-button">第{{currentIndex+1}}/{{currentExam.questions_.length}} 题</span>
|
||
|
||
</view>
|
||
<!-- 小标题栏 -->
|
||
<view class="sub-header">
|
||
<u-row>
|
||
<u-col span="4">
|
||
<u-count-down :timestamp="currentExam.paper_.limit*60" :show-days="false" @end="end" border-color="#2979ff">
|
||
</u-count-down>
|
||
</u-col>
|
||
<u-col span="4">
|
||
<view style="text-align: center;"><span class="header-card">{{currentQuestion.type}}</span></view>
|
||
</u-col>
|
||
<u-col span="4">
|
||
<view style="text-align: right;"><span class="submitButton" @click='handleSubmit()' >交卷</span></view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<scroll-view class="content" scroll-y="true" v-bind:style="{height:scollHeight+'rpx'}">
|
||
<view class="name">
|
||
<view>{{currentIndex}}·{{currentQuestion.name}}</view>
|
||
<!-- <rich-text :nodes="currentQuestion.name"></rich-text> -->
|
||
<view v-if="currentQuestion.img">
|
||
{{currentQuestion.img}}
|
||
</view>
|
||
</view>
|
||
<view class="options">
|
||
<checkbox-group @change="checkboxGroupChange" v-if="currentQuestion.type=='多选'">
|
||
<label class="option" v-for="item in currentOptions" :key="item.id" >
|
||
<view class="option-item1">
|
||
<checkbox :value="item.value" :checked="item.checked" color="#2979ff"/>
|
||
</view >
|
||
<view class="option-item2">{{item.value}}.{{item.text}}</view>
|
||
</label>
|
||
</checkbox-group>
|
||
<radio-group v-else @change="checkboxGroupChange">
|
||
<label class="option" v-for="item in currentOptions" :key="item.id">
|
||
<view class="option-item1">
|
||
<radio :value="item.value" :checked="item.checked" color="#2979ff"></radio>
|
||
</view>
|
||
<view class="option-item2">
|
||
{{item.value}}.{{item.text}}
|
||
</view>
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
<view style="height:20rpx"></view>
|
||
</scroll-view>
|
||
<u-popup v-model="showM" mode="bottom" height="40%">
|
||
<view class="questionArea" style="display:flex">
|
||
<block v-for="(item, index) in currentExam.questions_" :key="index">
|
||
<view class="questionItem questionItem-select" v-if="item.user_answer" @click="jumpQuestion(index)">{{index+1}}</view>
|
||
<view class="questionItem questionItem-unselect" v-else @click="jumpQuestion(index)">{{index+1}}</view>
|
||
</block>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 底部栏 -->
|
||
<view class="footer" id="footer">
|
||
<u-button @click='previousQ()' throttle-time="200" :plain="true" type="primary">上一题</u-button>
|
||
<u-button @click="showM = !showM" type="primary">答题卡</u-button>
|
||
<u-button @click='nextQ()' throttle-time="200" :plain="true" type="primary">下一题</u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentExam:{questions_:[]},
|
||
currentIndex:0,
|
||
currentOptions:[],
|
||
currentQuestion:{type:'单选'},
|
||
showM:false,
|
||
keyid:0,
|
||
start_time:null,
|
||
scollHeight:0
|
||
}
|
||
},
|
||
onLoad() {
|
||
//#ifdef MP-WEIXIN
|
||
uni.hideHomeButton()
|
||
//#endif
|
||
this.start_time= (new Date()).getTime()
|
||
this.currentExam = uni.getStorageSync('currentExam')
|
||
let res = uni.getSystemInfoSync();
|
||
let ratio = 750 / res.windowWidth;
|
||
this.scollHeight = res.windowHeight*ratio - 230
|
||
this.initQuestion()
|
||
},
|
||
methods: {
|
||
end(){
|
||
var that = this
|
||
uni.showModal({
|
||
title: '警告',
|
||
content: '时间到,请交卷',
|
||
showCancel:false,
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
that.handIn();
|
||
}
|
||
}
|
||
});
|
||
|
||
},
|
||
change(){
|
||
|
||
},
|
||
handleSubmit(){
|
||
var that = this
|
||
let questions = that.currentExam.questions_;
|
||
for(var i=0;i<questions.length;i++){
|
||
if(!questions[i].user_answer){
|
||
uni.showModal({
|
||
title: '警告',
|
||
content: '答卷未完成,确认交卷吗?',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
that.handIn();
|
||
}
|
||
}
|
||
});
|
||
return
|
||
}
|
||
}
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确认交卷吗?',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
//直接交卷，不需要判卷了
|
||
that.handIn();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
handIn(){
|
||
var that = this
|
||
uni.showLoading({
|
||
title:'正在提交...',
|
||
mask:true
|
||
})
|
||
let questions_ = [];
|
||
for (let i = 0; i < that.currentExam.questions_.length; i++) {
|
||
let obj = {};
|
||
obj.id=that.currentExam.questions_[i].id;
|
||
obj.user_answer=that.currentExam.questions_[i].user_answer;
|
||
questions_.push(obj);
|
||
}
|
||
that.$u.api.submitExam(that.currentExam.examrecord,{questions_:questions_}).then(res=>{
|
||
uni.setStorageSync('currentExam',res.data)
|
||
uni.hideLoading()
|
||
uni.redirectTo({
|
||
url:'/pages/exam/result'
|
||
})
|
||
}).catch(e=>{
|
||
if(res.msg){
|
||
uni.showModal({
|
||
title:'提交失败',
|
||
content:res.msg,
|
||
showCancel:false,
|
||
success(res) {
|
||
uni.reLaunch({
|
||
url:'/pages/index/index'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
})
|
||
// let questions = this.currentExam.questions
|
||
// let score=0
|
||
// for(var i=0, lenI =questions.length;i<lenI;i++){
|
||
// var ret=this.panTi(questions[i])
|
||
// questions[i].is_right=ret.is_right
|
||
// questions[i].score=ret.score
|
||
// score = score+ret.score
|
||
// }
|
||
// this.currentExam.score = score
|
||
// this.currentExam.start_time = this.$u.timeFormat(this.start_time, 'yyyy-mm-dd hh:MM:ss');
|
||
// this.currentExam.end_time = this.$u.timeFormat((new Date()).getTime(), 'yyyy-mm-dd hh:MM:ss')
|
||
// this.currentExam.took = Math.floor(((new Date()).getTime() - this.start_time) / 1000)
|
||
// if(score>=this.currentExam.pass_score){
|
||
// this.currentExam.is_pass=true
|
||
// }else{
|
||
// this.currentExam.is_pass=false
|
||
// }
|
||
// if(this.vuex_user.id){
|
||
|
||
// }
|
||
// else{
|
||
// uni.setStorageSync('currentExam',this.currentExam)
|
||
// uni.hideLoading()
|
||
// uni.redirectTo({
|
||
// url:'/pages/exam/result'
|
||
// })
|
||
// }
|
||
},
|
||
panTi(tm_current) {
|
||
// 返回当前题目是否正确,得分多少
|
||
let is_right = false, score = 0
|
||
if (tm_current.type == '多选') {
|
||
if (tm_current.user_answer) {
|
||
if (tm_current.user_answer.sort().toString() == tm_current.right.sort().toString()) {
|
||
is_right = true
|
||
score = tm_current.total_score
|
||
}
|
||
}
|
||
} else {
|
||
if(tm_current.right == tm_current.user_answer){
|
||
is_right = true
|
||
score = tm_current.total_score
|
||
}
|
||
}
|
||
return {'is_right':is_right,'score':score}
|
||
},
|
||
initQuestion(){
|
||
var currentQuestion = this.currentExam.questions_[this.currentIndex];
|
||
this.currentQuestion = currentQuestion;
|
||
let options_ = [];
|
||
let origin = currentQuestion.options;
|
||
this.currentOptions = [];
|
||
for (let key in origin) {
|
||
let option = {
|
||
value:key,
|
||
text:origin[key],
|
||
id: this.keyid++,
|
||
checked:false
|
||
}
|
||
if (currentQuestion.user_answer) {
|
||
if (key == currentQuestion.user_answer || currentQuestion.user_answer.indexOf(key) != -1) {
|
||
option.checked = true
|
||
}
|
||
} else {
|
||
option.checked = false
|
||
}
|
||
options_.push(option)
|
||
}
|
||
this.currentOptions = options_
|
||
},
|
||
nextQ(){
|
||
let index = this.currentIndex + 1
|
||
if(index<this.currentExam.questions_.length){
|
||
this.currentIndex = index
|
||
this.initQuestion()
|
||
}
|
||
},
|
||
previousQ(){
|
||
let index = this.currentIndex - 1
|
||
if(index >= 0){
|
||
this.currentIndex = index
|
||
this.initQuestion()
|
||
}
|
||
},
|
||
checkboxGroupChange(e){
|
||
// debugger;
|
||
console.log(e)
|
||
this.currentExam.questions_[this.currentIndex].user_answer = e.detail.value
|
||
},
|
||
jumpQuestion(index){
|
||
this.currentIndex = index
|
||
this.initQuestion()
|
||
this.showM = false
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: $u-bg-color;
|
||
}
|
||
.content{
|
||
margin-top:8rpx;
|
||
.name {
|
||
font-size:34rpx;
|
||
padding: 25rpx 30rpx;
|
||
color:$u-content-color;
|
||
line-height:130%;
|
||
background-color: #FFFFFF;
|
||
}
|
||
.options {
|
||
margin-top:8rpx;
|
||
background-color: #FFFFFF;
|
||
padding: 6rpx 30rpx;
|
||
.option {
|
||
padding: 10rpx 0rpx;
|
||
display: flex;
|
||
font-size: 36rpx;
|
||
.option-item1{
|
||
justify-content: flex-start
|
||
}
|
||
.option-item2{
|
||
justify-content: flex-start;
|
||
color:$u-main-color;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.header {
|
||
width: 750rpx;
|
||
text-align: center;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: $theme-color;
|
||
background-color: #FFFFFF;
|
||
|
||
&-button {
|
||
position: absolute;
|
||
right: 10rpx;
|
||
font-size:34rpx;
|
||
font-weight: bold;
|
||
color: #000;
|
||
}
|
||
|
||
.scoreText {
|
||
color: #00b060;
|
||
font-size: 35rpx;
|
||
}
|
||
}
|
||
.sub-header {
|
||
padding: 4rpx 20rpx;
|
||
color: #000;
|
||
font-size: 33rpx;
|
||
font-weight: bold;
|
||
background-color: #FFFFFF;
|
||
}
|
||
.submitButton{
|
||
padding: 6rpx 20rpx;
|
||
border-radius: 15rpx;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
background-color: $u-type-error;
|
||
}
|
||
.header-card {
|
||
padding: 6rpx 20rpx;
|
||
border-radius: 15rpx;
|
||
color: #FFFFFF;
|
||
background-color: $u-type-primary-dark;
|
||
}
|
||
.footer {
|
||
width: 750rpx;
|
||
height: 100rpx;
|
||
padding: 30rpx 60rpx;
|
||
position: fixed;
|
||
bottom: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 32rpx;
|
||
box-sizing: border-box;
|
||
color: #4c8af3;
|
||
box-shadow: 0 0 5px 1px #eee;
|
||
background-color: #FFFFFF;
|
||
|
||
&-card {
|
||
padding: 10rpx 20rpx;
|
||
border: 1px solid $theme-color;
|
||
border-radius: 15rpx;
|
||
color: #FFFFFF;
|
||
background-color: $theme-color;
|
||
}
|
||
}
|
||
.questionArea {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 20rpx;
|
||
|
||
.questionItem {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
margin: 10rpx 22rpx;
|
||
line-height: 80rpx;
|
||
font-size: 35rpx;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
color: #ffffff;
|
||
}
|
||
.questionItem-select {
|
||
background-color: $theme-color;
|
||
}
|
||
|
||
.questionItem-unselect {
|
||
background-color: #bbbbbb;
|
||
}
|
||
}
|
||
|
||
|
||
</style> |