304 lines
6.5 KiB
Vue
304 lines
6.5 KiB
Vue
|
<template>
|
|||
|
|
<view class="fullHeight">
|
|||
|
|
<headers>
|
|||
|
|
<view class="headerName">
|
|||
|
|
WiFi链接答题
|
|||
|
|
</view>
|
|||
|
|
</headers>
|
|||
|
|
<view class="pageContent" v-if="answerStatus!=3">
|
|||
|
|
<view class="questionTitle">
|
|||
|
|
{{questionDetail.questionName}}（{{questionDetail.questionType==1?'单选':'多选'}}）
|
|||
|
|
</view>
|
|||
|
|
<view class="optionList">
|
|||
|
|
<view class="item" :class="{'mySelect': answerStatus==1,'correct':answerStatus == 2 && correctOptionArr.indexOf(item.optionId)!=-1, 'error':answerStatus == 2 && correctOptionArr.indexOf(item.optionId)==-1 && selectOptArr.indexOf(item.optionId)!=-1&&correctOptionArr.indexOf(item.optionId)==-1}" v-for="(item,index) in questionDetail.optionList" @click="selectOpt(item)">
|
|||
|
|
<text class="index">{{indexList[index]}}</text><text class="name">{{item.optionName}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="" v-if="answerStatus==2">
|
|||
|
|
<view class="answerTxt">
|
|||
|
|
正确答案：{{correctOption}}
|
|||
|
|
</view>
|
|||
|
|
<view class="analysisBox">
|
|||
|
|
<view class="title">
|
|||
|
|
试题解析：
|
|||
|
|
</view>
|
|||
|
|
<view class="content">
|
|||
|
|
{{questionDetail.questionAnalysis}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="fixedBtn" @click="answerFn">
|
|||
|
|
{{answerStatus==1?'提交':'重新答题'}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="successBox" v-else>
|
|||
|
|
<image src="/static/wifi.png" class="wifiImg"></image>
|
|||
|
|
<view class="txt1">
|
|||
|
|
上网成功
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="txt2">
|
|||
|
|
恭喜您回答正确,<text class="num">3</text>秒自动返回桌面
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
answerStatus:1,// 1 正在答题 2 答题错误 3 答题成功
|
|||
|
|
devSn:'45345235',
|
|||
|
|
indexList: [
|
|||
|
|
"A",
|
|||
|
|
"B",
|
|||
|
|
"C",
|
|||
|
|
"D",
|
|||
|
|
"E",
|
|||
|
|
"F",
|
|||
|
|
"G",
|
|||
|
|
"H",
|
|||
|
|
"I",
|
|||
|
|
"J",
|
|||
|
|
"K",
|
|||
|
|
"L",
|
|||
|
|
"N",
|
|||
|
|
"M",
|
|||
|
|
"O",
|
|||
|
|
"P",
|
|||
|
|
"Q",
|
|||
|
|
"R",
|
|||
|
|
"S",
|
|||
|
|
"T",
|
|||
|
|
"U",
|
|||
|
|
"V",
|
|||
|
|
"W",
|
|||
|
|
"X",
|
|||
|
|
"Y",
|
|||
|
|
"Z",
|
|||
|
|
],
|
|||
|
|
questionDetail:{
|
|||
|
|
libraryId: '',
|
|||
|
|
optionList: [],
|
|||
|
|
questionAnalysis: "",
|
|||
|
|
questionId: '',
|
|||
|
|
questionName: "",
|
|||
|
|
questionType: 1
|
|||
|
|
},
|
|||
|
|
correctOption:'',
|
|||
|
|
correctOptionArr:[],
|
|||
|
|
selectOptArr:[]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options){
|
|||
|
|
// this.devSn=options.devSn
|
|||
|
|
this.getQuestion()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//添加回答记录
|
|||
|
|
addAnswerRecord(){
|
|||
|
|
let json = {
|
|||
|
|
devSn:this.devSn,
|
|||
|
|
answerType:this.answerStatus==3?1:2,
|
|||
|
|
questionId:this.questionDetail.questionId,
|
|||
|
|
answerOption:this.selectOptArr.join(',')
|
|||
|
|
}
|
|||
|
|
this.sendRequest({
|
|||
|
|
url: "xmgl/wirelessEducationQuestionAnswer/add",
|
|||
|
|
data: json,
|
|||
|
|
method: "post",
|
|||
|
|
success:(res)=> {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
answerFn(){
|
|||
|
|
if(this.answerStatus==1){
|
|||
|
|
if(this.selectOptArr.length==this.correctOptionArr.length){
|
|||
|
|
if(this.selectOptArr.length==1){
|
|||
|
|
if(this.selectOptArr[0]==this.correctOptionArr[0]){
|
|||
|
|
this.answerStatus=3
|
|||
|
|
}else{
|
|||
|
|
this.answerStatus=2
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
this.selectOptArr.sort(function(a,b){
|
|||
|
|
return a-b
|
|||
|
|
})
|
|||
|
|
let onoff = false
|
|||
|
|
this.selectOptArr.forEach((item,index)=>{
|
|||
|
|
if(item!=this.correctOptionArr[index]){
|
|||
|
|
onoff=true
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
if(onoff){
|
|||
|
|
this.answerStatus=2
|
|||
|
|
}else{
|
|||
|
|
this.answerStatus=3
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
this.answerStatus=2
|
|||
|
|
}
|
|||
|
|
this.addAnswerRecord()
|
|||
|
|
}else{
|
|||
|
|
this.selectOptArr=[]
|
|||
|
|
this.answerStatus=1
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
colorClass(item){
|
|||
|
|
if(this.answerStatus==1){
|
|||
|
|
if(this.selectOptArr.indexOf(item.optionId)!=-1){
|
|||
|
|
return 'mySelect'
|
|||
|
|
}else{
|
|||
|
|
return ''
|
|||
|
|
}
|
|||
|
|
}else if(this.answerStatus==2){
|
|||
|
|
if(this.correctOptionArr.indexOf(item.optionId)!=-1){
|
|||
|
|
return 'correct'
|
|||
|
|
}else{
|
|||
|
|
// for (var i = 0; i < this.selectOptArr.length; i++) {
|
|||
|
|
// this.selectOptArr[i]
|
|||
|
|
// }
|
|||
|
|
if(this.selectOptArr.indexOf(item.optionId)!=-1&&this.correctOptionArr.indexOf(item.optionId)==-1){
|
|||
|
|
return 'error'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
selectOpt(item){
|
|||
|
|
if(this.questionDetail.questionType==1){
|
|||
|
|
this.selectOptArr=[item.optionId]
|
|||
|
|
}else{
|
|||
|
|
let i = this.selectOptArr.indexOf(item.optionId)
|
|||
|
|
if(i==-1){
|
|||
|
|
this.selectOptArr.push(item.optionId)
|
|||
|
|
}else{
|
|||
|
|
this.selectOptArr.splice(i,1)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
console.log(this.selectOptArr)
|
|||
|
|
},
|
|||
|
|
//通过设备编号随机抽取一道试题
|
|||
|
|
getQuestion(){
|
|||
|
|
this.sendRequest({
|
|||
|
|
url: "xmgl/wirelessEducationQuestionSubject/getDeviceRandomEducationQuestion",
|
|||
|
|
data: {devSn:this.devSn},
|
|||
|
|
method: "post",
|
|||
|
|
success:(res)=> {
|
|||
|
|
if(res.result){
|
|||
|
|
this.questionDetail=res.result
|
|||
|
|
let arr = this.questionDetail.optionList
|
|||
|
|
for (var i = 0; i < arr.length; i++) {
|
|||
|
|
if(arr[i].correctType==1){
|
|||
|
|
this.correctOption+=this.indexList[i]
|
|||
|
|
this.correctOptionArr.push(arr[i].optionId)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.pageContent{
|
|||
|
|
padding-bottom: 80px;
|
|||
|
|
}
|
|||
|
|
.questionTitle{
|
|||
|
|
color: rgba(51, 51, 51, 0.8);
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
margin: 40rpx 30rpx;
|
|||
|
|
}
|
|||
|
|
.optionList{
|
|||
|
|
margin: 40rpx 30rpx;
|
|||
|
|
.item{
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
background-color: rgba(216, 216, 216, 0.12);
|
|||
|
|
min-height: 60rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
color: rgba(51, 51, 51, 100);
|
|||
|
|
border: 1px solid rgba(216, 216, 216, 0.12);
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
.index{
|
|||
|
|
margin-right: 40rpx;
|
|||
|
|
}
|
|||
|
|
&.mySelect{
|
|||
|
|
border-color: rgba(18, 127, 236, 1);
|
|||
|
|
color: rgba(18, 127, 236, 1);
|
|||
|
|
}
|
|||
|
|
&.correct{
|
|||
|
|
background-color: #2CC776;
|
|||
|
|
border-color: #2CC776;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
&.error{
|
|||
|
|
background-color: #F07023;
|
|||
|
|
border-color: #F07023;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.answerTxt{
|
|||
|
|
color: rgba(44, 199, 118, 100);
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
margin: 0 30rpx;
|
|||
|
|
}
|
|||
|
|
.analysisBox{
|
|||
|
|
margin: 0 30rpx;
|
|||
|
|
color: rgba(42, 46, 63, 100);
|
|||
|
|
.title{
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
margin: 30rpx 0 16rpx;
|
|||
|
|
}
|
|||
|
|
.content{
|
|||
|
|
opacity: 0.8;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.successBox{
|
|||
|
|
position: fixed;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%,-50%);
|
|||
|
|
text-align: center;
|
|||
|
|
.txt1{
|
|||
|
|
color: rgba(99, 217, 140, 0.8);
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
margin: 20rpx auto 7px;
|
|||
|
|
}
|
|||
|
|
.txt2{
|
|||
|
|
color: rgba(42, 46, 63, 0.6);
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
.num{
|
|||
|
|
color: rgba(99, 217, 140, 100);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.wifiImg{
|
|||
|
|
width: 224rpx;
|
|||
|
|
height: 204rpx;
|
|||
|
|
}
|
|||
|
|
.fixedBtn{
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100rpx;
|
|||
|
|
line-height: 100rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: white;
|
|||
|
|
background-color: rgba(18, 127, 236, 1);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
</style>
|