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>
|