7 changed files with 629 additions and 7 deletions
-
2manifest.json
-
9pages.json
-
21pages/exercises/brushQuestions/brushQuestions.vue
-
588pages/exercises/brushQuestions/examQuestions.vue
-
13pages/exercises/examSubjiect1/examSubjiect1.vue
-
3pages/exercises/theoryStudy/theoryStudy.vue
-
BINstatic/images/theory/scActive.png
@ -0,0 +1,588 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<up-navbar leftText=" " title="" :safeAreaInsetTop="false" :autoBack="true"> |
|||
<template #center> |
|||
<view class="flex"> |
|||
<view class="lastText">剩余时间</view> |
|||
<view class="lastText" style="margin-left: 8rpx;">44：00</view> |
|||
</view> |
|||
</template> |
|||
</up-navbar> |
|||
|
|||
|
|||
<view class="con padding"> |
|||
<view class="h1_row"> |
|||
<text class="tag" :class="{red: questionBank.types==2, blue: questionBank.types==3}">{{types[questionBank.types-1]}}</text> |
|||
<text class="h1" @click="speak(questionBank.title)">{{ questionBank.title}}</text> |
|||
</view> |
|||
<view class="imgBox" style="width: 100%;padding: 0 0 30rpx 0;" v-if="questionBank.img"> |
|||
<image :src="questionBank.img" mode="widthFix"></image> |
|||
</view> |
|||
<view class="option"> |
|||
<view v-for="(item,index) in questionBank.optionArr" @click="chooseOption(item)"> |
|||
<!-- 多选题 --> |
|||
<view class="optionItem flex" v-if="questionBank.types ==2&& (!curOption.answer||curOption.answer==questionBank.answer)"> |
|||
<up-icon name="checkmark-circle-fill" color="#55ff7f" size="20" v-if="curOption.ans?.includes(item.key)"></up-icon> |
|||
<view class="icon" v-else></view> |
|||
<view class="text"><text >{{item.key}}</text> {{item.text}}</view> |
|||
</view> |
|||
<!-- 正常答案 --> |
|||
<view class="optionItem flex" v-else @click="chooseOption(item)"> |
|||
<view class="icon" v-if="!curOption.key&&questionBank.types !=2"></view> |
|||
<up-icon name="checkmark-circle-fill" color="#55ff7f" size="20" v-else-if="questionBank.answer.includes(item.key)"></up-icon> |
|||
<up-icon name="close-circle-fill" color="#ff0000" size="20" v-else></up-icon> |
|||
<view class="text"><text v-if="questionBank.types!=3">{{item.key}}</text> {{item.text}}</view> |
|||
</view> |
|||
<!-- ans --> |
|||
</view> |
|||
</view> |
|||
<view class="answerCss flex" v-if="curOption.answer&&questionBank.answer!=curOption.answer"> |
|||
<view class="ans">正确答案是 |
|||
<text v-if="questionBank.types==3" >{{ questionBank.answer=='false'?'错误':'正确' }}</text> |
|||
<text v-else >{{ questionBank.answer }}</text> |
|||
</view> |
|||
<view class="ans">您的答案是 |
|||
<text v-if="questionBank.types==3" class="red">{{ curOption.answer=='false'?'错误':'正确' }}</text> |
|||
<text v-else class="red">{{ curOption.answer }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="btn_row flex-b"> |
|||
<!-- @click="$goPage('/pages/exercises/lastPage/lastPage')" --> |
|||
<button class="btn border" @click="debounce(nextQuestion(-1), 500)" :class="{disable: currentIndex==1}" :disabled="currentIndex==1">上一题</button> |
|||
<button class="btn bg" @click="debounce(nextQuestion(1), 500)" :class="{disable: currentIndex>=quesIdList.length}" :disabled="currentIndex>=quesIdList.length">下一题</button> |
|||
</view> |
|||
<view class="analysis" v-if="currentNav==2||(curOption.answer&&curOption.answer!=questionBank.answer)"> |
|||
<view class="tit">题目解析</view> |
|||
<view class="txt">{{ questionBank.resolving }}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="bottomBar"> |
|||
|
|||
<view class="ul"> |
|||
<!-- <view class="li"> |
|||
<view class="icon" style="color: #55ff7f;">{{ yesNum }}</view> |
|||
<view class="text">答对</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="icon" style="color: #ff0000;">{{ noNum }}</view> |
|||
<view class="text">答错</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="icon">{{currentIndex}}/<text style="color: #999; font-size: 24rpx;">{{quesIdList.length}}</text></view> |
|||
<view class="text">题目</view> |
|||
</view> --> |
|||
<view class="flex leftCotrl"> |
|||
<view class="li" @click="showCommt=true"> |
|||
<view class="icon"> |
|||
<image src="@/static/images/theory/fankui.png" mode=""></image> |
|||
</view> |
|||
<view class="text">反馈</view> |
|||
</view> |
|||
<view class="li" @click="openPopup"> |
|||
<view class="icon"> |
|||
<image src="@/static/images/theory/dtk.png" mode=""></image> |
|||
</view> |
|||
<view class="text">答题卡</view> |
|||
</view> |
|||
<view class="li" @click="$noDoFn"> |
|||
<view class="icon"> |
|||
<image src="@/static/images/theory/sc.png" mode=""></image> |
|||
</view> |
|||
<view class="text">收藏</view> |
|||
</view> |
|||
</view> |
|||
<view class="submitBtn">交卷</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<up-popup :show="show" @close="closePopup" @open="openPopup" mode="bottom" round="20" closeable> |
|||
<view class="popupCon"> |
|||
<view class="h3">答题卡</view> |
|||
<view class="ulRow"> |
|||
<view class="ul"> |
|||
<view class="li"> |
|||
<view class="icon" style="color: #55ff7f;">{{ yesNum }}</view> |
|||
<view class="text">答对</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="icon" style="color: #ff0000;">{{ noNum }}</view> |
|||
<view class="text">答错</view> |
|||
</view> |
|||
<view class="li" style="margin-left: auto;"> |
|||
<view class="icon">{{currentIndex}}/<text style="color: #999; font-size: 24rpx;">{{quesIdList.length}}</text></view> |
|||
<view class="text">题目</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="ul2"> |
|||
<view class="li2" v-for="(item,index) in quesIdList" :key="index" @click="quesIdListClick(item,index)"> |
|||
<view class="num" :class="{active: index+1==currentIndex}">{{ index+1 }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</up-popup> |
|||
|
|||
<up-popup :show="showCommt" @close="showCommtClose" mode="bottom" round="20rpx" closeable> |
|||
<view class="commtCon" style="padding: 30rpx"> |
|||
<up-textarea v-model.trim="contentStr" placeholder="请输入反馈内容" style="margin-top: 50rpx;" maxlength="300"></up-textarea> |
|||
<up-button text="提 交" style="margin-top: 20rpx;" type="primary" @click="submitCommt"></up-button> |
|||
</view> |
|||
</up-popup> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
function speak(text) { |
|||
const speech = new SpeechSynthesisUtterance(text); // 创建语音消息 |
|||
window.speechSynthesis.speak(speech); // 播报消息 |
|||
} |
|||
|
|||
import { startExam, submitAnswerResultApi, getQuestionApi, questionCommentAdd } from '@/config/api.js' |
|||
import { debounce } from '@/uni_modules/uview-plus'; |
|||
import { |
|||
ref, |
|||
reactive |
|||
} from 'vue'; |
|||
const currentNav = ref('1') |
|||
const types = ref([ |
|||
'单选题', |
|||
'多选题', |
|||
'判断题' |
|||
]) |
|||
const yesNum = ref(0) |
|||
const noNum = ref(0) |
|||
|
|||
import carStore from '@/store/modules/car.js' |
|||
let usecarStore = carStore() |
|||
|
|||
import { |
|||
onLoad, |
|||
onReady |
|||
} from "@dcloudio/uni-app" |
|||
// 1：单选题，2：多选题，3：判断题 |
|||
function changeNav(val) { |
|||
console.log(window) |
|||
if(currentNav.value == val) return |
|||
currentNav.value = val |
|||
} |
|||
function goEmam() { |
|||
uni.navigateTo({ |
|||
// url: '/pages/exercises/exam/exam', |
|||
// url: '/pages/exercises/beforeExam/beforeExam', |
|||
// url: '/pages/exercises/examResults/examResults', |
|||
// url: '/pages/exercises/wrongQuestion/wrongQuestion', |
|||
// url: '/pages/exercises/theoryStudy/theoryStudy', |
|||
url: '/pages/vip/vipEntry/vipEntry' |
|||
|
|||
}) |
|||
} |
|||
function changeTabbar(val) { |
|||
console.log(val) |
|||
} |
|||
const show = ref(false) |
|||
function closePopup() { |
|||
show.value = false |
|||
} |
|||
function openPopup() { |
|||
show.value = true |
|||
} |
|||
|
|||
let showCommt = ref(false) |
|||
let contentStr = ref('') |
|||
function showCommtClose() { |
|||
showCommt.value = false |
|||
contentStr.value = '' |
|||
} |
|||
// 提交反馈 |
|||
async function submitCommt() { |
|||
if(!contentStr.value) return uni.$u.toast('请输入内容') |
|||
let obj = { |
|||
content: contentStr.value, |
|||
questionId: questionBank.value.id |
|||
} |
|||
const res = await questionCommentAdd(obj) |
|||
if(res.errorcode==0) { |
|||
uni.$u.toast('提交成功，感谢您的反馈') |
|||
showCommt.value = false |
|||
} |
|||
} |
|||
// 请求数据 |
|||
const questionBank = ref({}) |
|||
let quesIdList = ref([]) |
|||
let currentIndex = ref(1) |
|||
async function startQuestionFn() { |
|||
try{ |
|||
uni.showLoading({ |
|||
title: '正在加载...' |
|||
}) |
|||
let obj = { |
|||
carType: usecarStore.carInfo.carType, |
|||
stepType: usecarStore.carInfo.stepType, |
|||
examType: 1, |
|||
} |
|||
const {data: res} = await startExam(obj) |
|||
uni.hideLoading() |
|||
questionBank.value = res.questionBank |
|||
initOptionArr() |
|||
quesIdList.value = res.quesIdList |
|||
}catch(e){ |
|||
uni.hideLoading() |
|||
} |
|||
} |
|||
startQuestionFn() |
|||
|
|||
function initOptionArr() { |
|||
questionBank.value.optionArr = [] |
|||
let abcd = [ |
|||
'a', |
|||
'b', |
|||
'c', |
|||
'd', |
|||
'e', |
|||
'f' |
|||
] |
|||
abcd.forEach((k,i)=>{ |
|||
let option = 'option'+k |
|||
if(questionBank.value[option]) { |
|||
let obj = { |
|||
key: k.toLocaleUpperCase(), |
|||
text: questionBank.value[option], |
|||
index: i+1 |
|||
} |
|||
questionBank.value.optionArr.push(obj) |
|||
// console.log(questionBank.value.optionArr) |
|||
} |
|||
}) |
|||
|
|||
// 如果是判断题 |
|||
if(questionBank.value.types==3) { |
|||
questionBank.value.optionArr[0].key = 'true' |
|||
questionBank.value.optionArr[1].key = 'false' |
|||
} |
|||
|
|||
} |
|||
|
|||
// 下一题 |
|||
async function nextQuestion(num) { |
|||
// 如果是多选题，什么时候不直接请求下一题，是多选题 ，并且有答案，答错了，并且不是next |
|||
if(questionBank.value.types==2 && curOption.value.ans) { |
|||
// 如果没有请求就请求一下 |
|||
if(!curOption.value.answer) { |
|||
curOption.value.answer = curOption.value.ans |
|||
await submitAnswerResultFn() |
|||
} |
|||
// 如果答案不一样,并且是第一次请求 |
|||
if(questionBank.value.answer != curOption.value.ans&&curOption.value.isNext != 'next') { |
|||
curOption.value.isNext = 'next' |
|||
return false |
|||
} |
|||
} |
|||
curOption.value = {} |
|||
currentIndex.value = currentIndex.value + num |
|||
getQuestionFn() |
|||
|
|||
} |
|||
// 请求下一题 |
|||
async function getQuestionFn() { |
|||
console.log(currentIndex.value) |
|||
let questionId = quesIdList.value[currentIndex.value-1] |
|||
let obj = { |
|||
"carType": usecarStore.carInfo.carType, |
|||
"questionId": questionId, |
|||
"sort": currentIndex.value, |
|||
"stepType": usecarStore.carInfo.stepType, |
|||
'tempId': questionBank.value.questionDoTemp.id |
|||
} |
|||
const {data: res} = await getQuestionApi(obj) |
|||
questionBank.value = res |
|||
curOption.value.isNext = '' |
|||
initOptionArr() |
|||
} |
|||
async function quesIdListClick(id, index) { |
|||
curOption.value = {} |
|||
currentIndex.value = index + 1 |
|||
getQuestionFn() |
|||
show.value = false |
|||
} |
|||
|
|||
// 选择答案 |
|||
const curOption = ref({}) |
|||
async function chooseOption(item) { |
|||
// console.log(item) |
|||
if(curOption.value.answer) return |
|||
if(questionBank.value.types != 2) { |
|||
item.answer = item.key |
|||
curOption.value = item |
|||
submitAnswerResultFn() |
|||
}else if(questionBank.value.types == 2){ |
|||
if(!curOption.value.ans) curOption.value.ans = '' |
|||
if(curOption.value.ans.includes(item.key)) { |
|||
curOption.value.ans = curOption.value.ans.replace(item.key, '') |
|||
return |
|||
} |
|||
curOption.value.ans = curOption.value.ans + item.key |
|||
// console.log(curOption.value.ans) |
|||
} |
|||
} |
|||
// 提交请求 |
|||
async function submitAnswerResultFn() { |
|||
let obj = { |
|||
answer: curOption.value.answer, |
|||
carType: 'car', |
|||
questionId: questionBank.value.id, |
|||
result: '0', |
|||
stepType: 1, |
|||
tempId: questionBank.value.questionDoTemp.id |
|||
} |
|||
const res = await submitAnswerResultApi(obj) |
|||
if(res.errorcode!=0) return |
|||
if(curOption.value.answer==questionBank.value.answer) { |
|||
console.log('答对了') |
|||
curOption.value = {} |
|||
yesNum.value ++ |
|||
nextQuestion(1) |
|||
}else { |
|||
noNum.value ++ |
|||
} |
|||
// console.log(res) |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
image {display: block;width: 100%;height: 100%;} |
|||
.bottomBar { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 98rpx; |
|||
background: #FFFFFF; |
|||
border-top: 1rpx solid #F4F4F4; |
|||
|
|||
} |
|||
.ul { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
height: 100%; |
|||
align-items: center; |
|||
.leftCotrl { |
|||
flex: 1; |
|||
} |
|||
.submitBtn { |
|||
width: 100rpx; |
|||
height: 50rpx; |
|||
background: linear-gradient(0deg, #4FACFE 0%, #00F2FE 100%); |
|||
border-radius: 25rpx; |
|||
font-size: 24rpx; |
|||
line-height: 50rpx; |
|||
text-align: center; |
|||
margin-right: 32rpx; |
|||
color: #fff; |
|||
} |
|||
.li { |
|||
// width: 16.6%; |
|||
padding: 0 30rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.icon { |
|||
font-size: 30rpx; |
|||
height: 30rpx; |
|||
line-height: 30rpx; |
|||
image { |
|||
display: block; |
|||
margin-top: 4rpx; |
|||
width: 26rpx; |
|||
height: 26rpx; |
|||
} |
|||
} |
|||
.text { |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #999999; |
|||
margin-top: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
.content { |
|||
padding: 120rpx 0; |
|||
min-height: 100vh; |
|||
.u-nav-slot { |
|||
width: 306rpx; |
|||
height: 54rpx; |
|||
border-radius: 10rpx; |
|||
border: 1px solid #333333; |
|||
display: flex; |
|||
|
|||
.btn { |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
flex: 1; |
|||
text-align: center; |
|||
line-height: 54rpx; |
|||
|
|||
&.active { |
|||
background-color: #333333; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
.btn_row { |
|||
padding: 60rpx 0 30rpx 0; |
|||
.btn { |
|||
width: 44%; |
|||
height: 76rpx; |
|||
border-radius: 38rpx; |
|||
border: 1rpx solid $themC; |
|||
line-height: 76rpx; |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: $themC; |
|||
&.disable { |
|||
opacity: 0.4; |
|||
} |
|||
&.bg { |
|||
background: #3776FF; |
|||
border-radius: 38rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
} |
|||
} |
|||
.con { |
|||
.h1_row { |
|||
margin-bottom: 50rpx; |
|||
.tag { |
|||
display: inline-block; |
|||
// width: 66px; |
|||
height: 36rpx; |
|||
line-height: 36rpx; |
|||
padding: 4rpx 6rpx; |
|||
background: #63C168; |
|||
border-radius: 6rpx; |
|||
margin-top: -2rpx; |
|||
margin-right: 16rpx; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
&.blue { |
|||
background: #3776FF; |
|||
} |
|||
&.red { |
|||
background: orangered; |
|||
} |
|||
} |
|||
|
|||
text.h1 { |
|||
font-size: 36rpx; |
|||
} |
|||
} |
|||
|
|||
.option { |
|||
width: 100%; |
|||
.optionItem { |
|||
margin-bottom: 50rpx; |
|||
align-items: center; |
|||
.icon { |
|||
width: 36rpx; |
|||
height:36rpx; |
|||
border-radius: 50%; |
|||
border: 1rpx solid #999; |
|||
} |
|||
|
|||
.text { |
|||
font-size: 32rpx; |
|||
margin-left: 16rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.answerCss { |
|||
height: 90rpx; |
|||
background: #F4F4F4; |
|||
padding: 30rpx; |
|||
margin-top: 20rpx; |
|||
justify-content: space-around; |
|||
.ans { |
|||
font-size: 30rpx; |
|||
text { |
|||
&.red { |
|||
color: red; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.analysis { |
|||
margin-top: 60rpx; |
|||
.tit { |
|||
font-weight: 700; |
|||
font-size: 32rpx; |
|||
position: relative; |
|||
padding-left: 30rpx; |
|||
&::after { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 8rpx; |
|||
width: 6rpx; |
|||
height: 30rpx; |
|||
background: linear-gradient(0deg, #43EA80 0%, #38F8D4 100%); |
|||
border-radius: 3rpx; |
|||
} |
|||
} |
|||
|
|||
.txt { |
|||
margin-top: 39rpx; |
|||
font-size: 32rpx; |
|||
color: #333333; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.popupCon { |
|||
width: 100%; |
|||
height: calc(100vh - 200rpx); |
|||
.h3 { |
|||
height: 88rpx; |
|||
border-bottom: 1px solid #F4F4F4; |
|||
line-height: 88rpx; |
|||
font-size: 30rpx; |
|||
padding: 0rpx 0 0 30rpx; |
|||
} |
|||
.ulRow { |
|||
height: 100rpx; |
|||
padding: 30rpx 0; |
|||
} |
|||
.ul2 { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 30rpx 10rpx; |
|||
height: calc(100vh - 388rpx); |
|||
overflow-y: auto; |
|||
.li2 { |
|||
width: 16.6%; |
|||
margin-bottom: 20rpx; |
|||
.num { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
border-radius: 50%; |
|||
margin: auto; |
|||
background: #F6F7FA; |
|||
font-size: 32rpx; |
|||
line-height: 100rpx; |
|||
text-align: center; |
|||
&.active { |
|||
border: 1px solid #63C168; |
|||
background: rgba(99,193,104,0.1); |
|||
color: #63C168; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: 24 | Height: 24 | Size: 835 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue