integrated_traffic_uniapp/pages/application/onlinexxks/course_exam.vue

551 lines
16 KiB
Vue
Raw Normal View History

2024-03-25 19:16:41 +08:00
<template>
<view>
<cu-custom bgColor="bg-gradual-blueness" :isBack="false">
<block slot="backText">返回</block>
<block slot="content">课程考试</block>
</cu-custom>
<view class="container">
<view class="top">
<view class="suject">
<text>考试科目{{ info.EXAMNAME }}</text>
</view>
<view class="questions">
<text>当前试题{{ current + 1 }}/{{ options.length }}</text>
</view>
<view class="time">
<text>考试剩余时间</text>
<!-- -->
<uni-countdown :minute="info.ANSWERSHEETTIME" @timeup="fnCountDownFinish" color="#fff" splitorColor="#fff"/>
</view>
</view>
<view class="topic">
<view class="title">
<text>
{{ current + 1 }}.{{ options[current].QUESTIONDRY }}
</text>
<text v-show="options[current].QUESTIONTYPE === '1'">
(单选)
</text>
<text v-show="options[current].QUESTIONTYPE === '2'">
(多选)
</text>
<text v-show="options[current].QUESTIONTYPE === '3'">
(判断)
</text>
<text v-show="options[current].QUESTIONTYPE === '4'">
(填空)
</text>
</view>
<view
class="options"
v-show="options[current].QUESTIONTYPE === '1'"
>
<view
class="item"
@click="fnChooseTopic('radio', 'A')"
:class="{ active: options[current].checked === 'A' }"
>
<text class="option">A</text>
<text class="text">{{ options[current].OPTIONA }}</text>
</view>
<view
class="item"
@click="fnChooseTopic('radio', 'B')"
:class="{ active: options[current].checked === 'B' }"
>
<text class="option">B</text>
<text class="text">{{ options[current].OPTIONB }}</text>
</view>
<view
class="item"
@click="fnChooseTopic('radio', 'C')"
:class="{ active: options[current].checked === 'C' }"
>
<text class="option">C</text>
<text class="text">{{ options[current].OPTIONC }}</text>
</view>
<view
class="item"
@click="fnChooseTopic('radio', 'D')"
:class="{ active: options[current].checked === 'D' }"
>
<text class="option">D</text>
<text class="text">{{ options[current].OPTIOND }}</text>
</view>
</view>
<view
class="options"
v-show="options[current].QUESTIONTYPE === '2'"
>
<view
class="item"
@click="fnChooseTopic('multiple', 'A')"
:class="{
active:
options[current].checked &&
options[current].checked.indexOf('A') !== -1,
}"
>
<text class="option">A</text>
<text class="text">{{ options[current].OPTIONA }}</text>
</view>
<view
class="item"
@click="fnChooseTopic('multiple', 'B')"
:class="{
active:
options[current].checked &&
options[current].checked.indexOf('B') !== -1,
}"
>
<text class="option">B</text>
<text class="text">{{ options[current].OPTIONB }}</text>
</view>
<view
class="item"
@click="fnChooseTopic('multiple', 'C')"
:class="{
active:
options[current].checked &&
options[current].checked.indexOf('C') !== -1,
}"
>
<text class="option">C</text>
<text class="text">{{ options[current].OPTIONC }}</text>
</view>
<view
class="item"
@click="fnChooseTopic('multiple', 'D')"
:class="{
active:
options[current].checked &&
options[current].checked.indexOf('D') !== -1,
}"
>
<text class="option">D</text>
<text class="text">{{ options[current].OPTIOND }}</text>
</view>
</view>
<view
class="options"
v-show="options[current].QUESTIONTYPE === '3'"
>
<view
class="item"
@click="fnChooseTopic('judge', 'A')"
:class="{ active: options[current].checked === 'A' }"
>
<text class="option">{{ options[current].OPTIONA }}</text>
<text class="text"></text>
</view>
<view
class="item"
@click="fnChooseTopic('judge', 'B')"
:class="{ active: options[current].checked === 'B' }"
>
<text class="option">{{ options[current].OPTIONB }}</text>
<text class="text"></text>
</view>
</view>
<view
class="options"
v-show="options[current].QUESTIONTYPE === '4'"
>
<view class="item">
<textarea
maxlength="255"
v-model="options[current].checked"
placeholder="请输入内容"
/>
</view>
</view>
</view>
<view class="footer">
<button
class="cu-btn"
:style="{ width: '45%' }"
v-show="current !== 0"
@click="fnPreviousQuestion"
>
上一题
</button>
<button
class="cu-btn bg-blue"
:style="{ width: current === 0 ? '100%' : '45%' }"
v-show="current !== options.length - 1"
@click="fnNextQuestion"
>
下一题
</button>
<button
class="cu-btn bg-blue"
:style="{ width: '45%' }"
v-show="current === options.length - 1"
@click="fnHandInThePaper"
>
交卷
</button>
</view>
</view>
</view>
</template>
<script>
import {basePath, loginUser} from "@/common/tool";
export default {
data() {
return {
info: {
ANSWERSHEETTIME:1
},
options: [{}],
current: 0,
STAGEEXAMPAPERINPUT_ID: '',
STAGEEXAMPAPER_ID: '',
CLASS_ID: '',
POST_ID: '',
STUDENT_ID: '',
NUMBEROFEXAMS: '',
entrySite: '',
}
},
// onBackPress(event) {
// if (event.from === "backbutton") {
// uni.showToast({
// title:'正在答题中',
// icon:'none'
// })
// return true;
// }
// return false;
// },
onLoad(options) {
this.STAGEEXAMPAPERINPUT_ID = options.STAGEEXAMPAPERINPUT_ID;
this.STAGEEXAMPAPER_ID = options.STAGEEXAMPAPER_ID;
this.CLASS_ID = options.CLASS_ID;
this.POST_ID = options.POST_ID;
this.STUDENT_ID = options.STUDENT_ID;
this.NUMBEROFEXAMS = options.NUMBEROFEXAMS;
this.entrySite = options.entrySite;
this.fnGetData();
},
methods: {
fnGetData() {
uni.showLoading({
title: '请稍候'
})
let url = ''
let params = {}
if(this.entrySite === "strengththen"){
url = '/app/stageexam/getStrengthenExam'
params = {
STRENGTHEN_STAGEEXAMPAPER_INPUT_ID: this.STAGEEXAMPAPERINPUT_ID,
CLASS_ID: this.CLASS_ID,
POST_ID: this.POST_ID,
STUDENT_ID: this.STUDENT_ID,
NUMBEROFEXAMS: this.NUMBEROFEXAMS,
}
}else {
url = '/app/stageexam/getExam'
params = {
STAGEEXAMPAPERINPUT_ID: this.STAGEEXAMPAPERINPUT_ID,
STAGEEXAMPAPER_ID: this.STAGEEXAMPAPER_ID,
CLASS_ID: this.CLASS_ID,
POST_ID: this.POST_ID,
STUDENT_ID: this.STUDENT_ID,
NUMBEROFEXAMS: this.NUMBEROFEXAMS,
}
}
uni.request({
url: basePath + url,
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
data: params,
success: (res) => {
uni.hideLoading(); //结束加载中动画
var resData = res.data;
if (resData.result === 'success') {
this.options = resData.inputQue;
this.info = resData.pd;
if (resData.NUMBEROFEXAMS > 0) {
// uni.showModal({
// title: "温馨提示",
// content:`您还可以考试${resData.NUMBEROFEXAMS}次!`,
// showCancel:false
// })
} else if (resData.NUMBEROFEXAMS === "-9999") {
uni.showModal({
title: "温馨提示",
content:`加强学习考试开始限时60分钟请注意答题时间`,
showCancel:false
})
} else {
uni.showModal({
title: "温馨提示",
content:`您无考试次数!`,
showCancel:false,
success: (res) => {
if (res.confirm) {
uni.navigateBack()
}
}
})
}
}
}
})
},
fnChooseTopic(type, checked){
if (!this.options[this.current].checked) {
this.$set(this.options[this.current], "checked", "");
}
if (type === "judge" || type === "radio") {
if (this.options[this.current].checked === checked) {
this.options[this.current].checked = "";
} else {
this.options[this.current].checked = checked;
}
}
if (type === "multiple") {
if (this.options[this.current].checked) {
const checkedArr = this.options[this.current].checked.split(",");
if (checkedArr.indexOf(checked) !== -1) {
checkedArr.splice(checkedArr.indexOf(checked), 1);
this.options[this.current].checked = checkedArr.join(",");
} else {
checkedArr.push(checked);
checkedArr.sort();
this.options[this.current].checked = checkedArr.join(",");
}
} else {
this.options[this.current].checked = checked;
}
console.log(this.options[this.current].checked)
}
},
fnIsFinish(){
if (!this.options[this.current].checked) {
uni.showModal({
title: "温馨提示",
content: "请对本题进行作答。",
showCancel:false
})
return false;
}
return true;
},
fnNextQuestion(){
if (!this.fnIsFinish()) return;
this.current++;
},
fnPreviousQuestion(){
this.current--;
},
fnHandInThePaper(){
if (!this.fnIsFinish()) return;
this.fnSubmit();
},
fnCountDownFinish(){
uni.showToast({
title: '考试时间已结束',
icon:'none'
})
for (let i = 0; i < this.options.length; i++) {
if (!this.options[i].checked) {
this.options[i].checked = "";
}
}
this.fnSubmit();
},
fnSubmit(){
for (let i = 0; i < this.options.length; i++) {
if (this.options[i].QUESTIONTYPE === "2") {
this.options[i].checked = this.options[i].checked.replace(/,/g, "");
}
}
uni.request({
url: basePath + '/app/stageexam/submit',
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
data: {
USERNAME: loginUser.NAME,
USER_ID: loginUser.USER_ID,
STAGEEXAMPAPERINPUT_ID:this.STAGEEXAMPAPERINPUT_ID,
STUDENT_ID:this.STUDENT_ID,
CLASS_ID:this.CLASS_ID,
NUMBEROFEXAMS:this.NUMBEROFEXAMS,
entrySite:this.entrySite,
PASSSCORE: this.info.PASSSCORE,
EXAMSCORE: this.info.EXAMSCORE,
EXAMTIMEBEGIN: this.info.EXAMTIMEBEGIN,
options: JSON.stringify(this.options),
},
success: (res) => {
uni.hideLoading(); //结束加载中动画
var resData = res.data;
if (resData.result === 'success') {
if (resData.examResult === "0") {
uni.showModal({
title:'温馨提示',
content:`您的成绩为${resData.examScore}分,很遗憾您没有通过本次考试,请再接再厉!`,
showCancel:false,
success: (res) => {
if (res.confirm) {
if (this.entrySite === "video_study")uni.navigateBack({delta:3})
else uni.navigateBack()
}
}
})
} else {
uni.showModal({
title:'温馨提示',
content:`您的成绩为${resData.examScore}分,恭喜您通过本次考试,请继续保持!`,
showCancel:false,
success: (res) => {
if (res.confirm) {
if (this.entrySite === "video_study") uni.navigateBack({delta:3})
else if (this.entrySite === "strengththen") uni.navigateBack({delta:2})
else uni.navigateBack()
}
}
})
}
}
}
})
}
},
}
</script>
<style scoped lang="scss">
.container {
width: 100%;
background: #fff;
padding: 20upx;
box-sizing: border-box;
min-height: 100vh;
.top {
background: url("/static/study/bgimg1.png");
background-size: 100% 100%;
border-radius: 20upx;
padding: 40upx;
text-align: center;
.suject {
color: #fff;
font-weight: bold;
font-size: 32upx;
}
.questions {
color: #eeecec;
font-size: 30upx;
padding-top: 20upx;
}
.time {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: #eeecec;
font-size: 28upx;
padding-top: 20upx;
.van-count-down {
color: #eeecec;
font-size: 28upx;
line-height: normal;
}
}
}
.topic {
margin-top: 20upx;
margin-bottom: 80upx;
padding: 20upx;
box-sizing: border-box;
.title {
font-size: 32upx;
font-weight: 600;
.question-type {
border-radius: 40upx;
padding: 4upx 14upx;
border: 1upx solid #3c9cff;
font-size: 24upx;
color: #3c9cff;
}
}
.options {
margin-top: 40upx;
.item {
position: relative;
margin-top: 40upx;
color: #696868;
&.active {
color: #3c9cff;
.option {
background-color: #3c9cff;
color: #fff;
}
}
.option {
background-color: #eee;
border-radius: 80upx;
width: 65upx;
height: 65upx;
line-height: 65upx;
text-align: center;
font-size: 30upx;
display: inline-block;
}
.text {
margin-left: 30upx;
height: 60upx;
line-height: 60upx;
}
uni-textarea{
width: 100%;
border: 1px solid #ccc;
padding: 10upx;
border-radius: 10upx;
}
}
}
}
.footer {
display: flex;
position: fixed;
bottom: 0;
justify-content: space-between;
width: 100%;
left: 0;
padding: 20upx;
box-sizing: border-box;
background: #fff;
button {
border-radius: 10upx;
}
}
}
</style>