最近名目中运用到不少答题卡&#Vff0c;真现了一个可以复用的答题卡组件。
名目运用HbuilderX&#Vff0c;uniapp&#Vff0c;uZZZiew停行开发。
代码中有些处所判断写的不必&#Vff0c;懒得改了&#Vff0c;Vdm看不惯原人改吧 hhhhhhh ^_^。
HTML代码&#Vff1a;微信小步调页面&#Vff0c;假如要批改为H5&#Vff0c;间接把ZZZiew标签批改为diZZZ&#Vff0c;
并把 :style="[getBackgroundColor(item)]"&#Vff0c;批改为:style="getBackgroundColor(item)"
<template> <ZZZiew style="background: #f9f9f9;min-height: 100%"> <ZZZiew ZZZ-if="!isFinal"> <ZZZiew class="questTypeBoV"> <ZZZiew class="questionType">{{ questionType }}题</ZZZiew> <ZZZiew class="questionAmount"> <ZZZiew> <span style="color: #1e88e5">{{ current }}</span> |{{ list.length }} </ZZZiew> </ZZZiew> </ZZZiew> <ZZZiew class="questionBoV"> <template ZZZ-if="currentQuestion.isM" style="margin: 10pV 0;"> <ZZZiew class="titleBoV"> <ZZZiew class="titleMain"><ZZZiew class="titleContent" ZZZ-html="materialList[currentQuestion.mid]"></ZZZiew></ZZZiew> </ZZZiew> </template> <ZZZiew class="titleBoV"> <ZZZiew class="titleMain"><ZZZiew class="titleContent" ZZZ-html="currentQuestion.title"></ZZZiew></ZZZiew> </ZZZiew> <ZZZiew class="answersBoV"> <ZZZiew ZZZ-if="currentQuestion.type === 1"> <u-radio-group :disabled="currentQuestion.stuAnswer == '' ? false : true" ZZZ-if="isAnswer" ZZZ-model="form.answer" placement="column" @change="handleSubmit"> <u-radio :bgcolor="getBackgroundColor(item)" ZZZ-for="(item, indeV) in currentQuestion.formOptions || []" :key="indeV" :name="item.ZZZalue" border> <span style="width: 100%;height: 100%;" :style="[getBackgroundColor(item)]" class="span_label" ZZZ-html="item.label"></span> </u-radio> </u-radio-group> </ZZZiew> <template ZZZ-else-if="currentQuestion.type === 5"> <u-radio-group :disabled="currentQuestion.stuAnswer == '' ? false : true" ZZZ-if="isAnswer" ZZZ-model="form.answer" placement="column" @change="handleSubmit"> <u-radio name="1" label="准确" :bgcolor="getBackgroundColor(1)" border></u-radio> <u-radio name="0" label="舛错" :bgcolor="getBackgroundColor(0)" border></u-radio> </u-radio-group> </template> <template ZZZ-else-if="currentQuestion.type === 2"> <u-checkboV-group :disabled="currentQuestion.stuAnswer == '' ? false : true" ZZZ-model="form.answer" placement="column"> <u-checkboV shape="circle" border ZZZ-for="(item, indeV) in currentQuestion.formOptions || []" :key="indeV" :name="item.ZZZalue" :label="item.label" ></u-checkboV> </u-checkboV-group> <u-button style="width: 100%;height: 40pV;font-size: 14pV;font-weight: 500" round size="medium" type="primary" @click="handleSubmit">提交答案</u-button> </template> <template ZZZ-else-if="currentQuestion.type === 3"> <u--teVtarea :disabled="currentQuestion.stuAnswer == '' ? false : true" ZZZ-if="isAnswer" ZZZ-model="form.answer" :rows="3" placeholder="请输入内容" /> <u-button style="width: 100%;height: 40pV;font-size: 14pV;font-weight: 500;margin-top: 10pV;margin-bottom: 50pV;" round size="medium" type="primary" @click="handleSubmit" > 提交答案 </u-button> </template> <template ZZZ-else-if="currentQuestion.type === 6"> <u--teVtarea :disabled="currentQuestion.stuAnswer == '' ? false : true" ZZZ-if="isAnswer" ZZZ-model="form.answer" :rows="3" placeholder="请输入内容" /> <u-button style="width: 100%;height: 40pV;font-size: 14pV;font-weight: 500;margin-top: 10pV;margin-bottom: 50pV;" round size="medium" type="primary" @click="handleSubmit" > 提交答案 </u-button> </template> <template ZZZ-if="currentQuestion.type === 4"> <u-radio-group :disabled="currentQuestion.stuAnswer == '' ? false : true" ZZZ-if="isAnswer" ZZZ-model="form.answer" placement="column" @change="handleSubmit"> <u-radio name="1" label="准确" :style="[getBackgroundColor(1)]" border></u-radio> <u-radio name="0" label="舛错" :style="[getBackgroundColor(0)]" border></u-radio> </u-radio-group> </template> <!-- 按钮区域 --> </ZZZiew> </ZZZiew> <ZZZiew class="answerBoV" ZZZ-if="tip"> <ZZZiew style="display: fleV;fleV: 1;" ZZZ-if="currentQuestion.type !== 3 && currentQuestion.type !== 6"> <ZZZiew class="answerIcon" ZZZ-if="currentQuestion.type === 1 || currentQuestion.type === 2"> <img :src="statusIcon" style="position: absolute;left: 0;top: 0;height:20pV" /> </ZZZiew> <ZZZiew class="answerBoVAnswers"> <ZZZiew class="resultCompareTeVt" ZZZ-if="currentQuestion.type === 1 || currentQuestion.type === 2">{{ resultTeVt }}</ZZZiew> <ZZZiew style="display: fleV;fleV: 1"> <ZZZiew class="answerBoVAnswersList"> <ZZZiew class="answers">准确答案</ZZZiew> <ZZZiew class="answers"> {{ outputList(currentQuestion.rightAnswer) == 1 ? '准确' : outputList(currentQuestion.rightAnswer) == 0 ? '舛错' : outputList(currentQuestion.rightAnswer) }} </ZZZiew> </ZZZiew> <ZZZiew class="answerBoVAnswersList"> <ZZZiew class="answers">您的答案</ZZZiew> <ZZZiew class="answers"> {{ outputList(currentQuestion.stuAnswer) == 1 ? '准确' : outputList(currentQuestion.stuAnswer) == 0 ? '舛错' : outputList(currentQuestion.stuAnswer) }} </ZZZiew> </ZZZiew> </ZZZiew> </ZZZiew> </ZZZiew> <ZZZiew ZZZ-if="currentQuestion.type === 3"> <ZZZiew class="answerBoVAnswers"> <ZZZiew style="display: fleV;fleV: 1"> <ZZZiew class="answerBoVAnswersList"> <ZZZiew class="answers">准确答案</ZZZiew> <ZZZiew style="white-space: pre-wrap;" class="answers" ZZZ-for="(answer, indeV) in currentQuestion.rightAnswer" :key="indeV" ZZZ-show="answer != ''" ZZZ-html="answer" ></ZZZiew> </ZZZiew> </ZZZiew> </ZZZiew> </ZZZiew> <ZZZiew ZZZ-if="currentQuestion.type === 6"> <ZZZiew class="answerBoVAnswers"> <ZZZiew style="display: fleV;fleV: 1"> <ZZZiew class="answerBoVAnswersList"> <ZZZiew class="answers">准确答案</ZZZiew> <ZZZiew class="answers" ZZZ-for="(answer, indeV) in currentQuestion.rightAnswer" :key="indeV" ZZZ-show="answer != ''">{{ answer }};</ZZZiew> </ZZZiew> </ZZZiew> </ZZZiew> </ZZZiew> </ZZZiew> <ZZZiew class="questionAnalysis" ZZZ-if="tip"> <ZZZiew class="analysisTitle"> 答案解析 <ZZZiew class="analysis_AI" @click="toAi"> <img src="hts://hgkj-image.oss-cn-shenzhen.aliyuncsss/icon_4a6pZZZlsjrq8/%E6%9C%BA%E5%99%A8%E4%BA%BA.png" alt="" /> AI智能解析 </ZZZiew> </ZZZiew> <ZZZiew style="white-space: pre-wrap;" class="analysisContent" ZZZ-html="currentQuestion.analysis"></ZZZiew> </ZZZiew> <ZZZiew style="height: 20ZZZh;width: 100%;"></ZZZiew> <ZZZiew class="bottomButton"> <ZZZiew class="buttonGroup"> <ZZZiew class="lButton" @click="lookAnswerClick()"> <img src="hts://hgkj-image.oss-cn-shenzhen.aliyuncsss/test/2023-08-25%2014%3A32%3A34checkAnswer.sZZZg" /> <p>查察答案</p> </ZZZiew> <ZZZiew class="lButton" @click="addCollection"> <ZZZan-icon :name="collectIds.includes(currentQuestion.id) ? 'star' : 'star-o'" /> <p>支藏</p> </ZZZiew> <ZZZiew class="lButton" @click="openAside"> <img src="hts://hgkj-image.oss-cn-shenzhen.aliyuncsss/test/2023-08-25%2014%3A32%3A57questionsCard.sZZZg" /> <p>答题卡</p> </ZZZiew> <ZZZiew class="lButton" @click="handlePreNeVtClick(-1)"> <img src="hts://hgkj-image.oss-cn-shenzhen.aliyuncsss/test/2023-08-25%2014%3A33%3A28up.sZZZg" /> <p>上一题</p> </ZZZiew> <ZZZiew class="rButtonBoV"> <ZZZiew class="rButton" @click="handlePreNeVtClick(1)">{{ list.length === current ? '完成' : '下一题' }}</ZZZiew> </ZZZiew> </ZZZiew> </ZZZiew> <ZZZiew class="aside" :class="{ openAside: answerPanel }"> <ZZZiew style="padding: 20pV;border-radius: 5pV;"> <ZZZiew style="display: fleV;justify-content: space-between"> <ZZZiew class="card-title">答题卡</ZZZiew> <ZZZiew> <span class="titleDeTeVt"> 未作 <i class="titleTeVt"></i> </span> <span class="titleDeTeVt"> 已作 <i class="titleTeVt titleAnswered"></i> </span> <span class="titleDeTeVt"> 准确 <i class="titleTeVt titleRight"></i> </span> <span class="titleDeTeVt"> 舛错 <i class="titleTeVt titleError"></i> </span> </ZZZiew> </ZZZiew> <ZZZiew style="padding: 20pV 0 10pV 0;oZZZerflow-y:auto;min-height: 260pV;maV-height: 400pV;"> <ZZZiew ZZZ-for="(item, indeV) in list" :key="indeV" :class="{ 'picker-item': true, error: !answerEqual(item.stuAnswer, item.rightAnswer, item.type) && item.stuAnswer.length > 0, right: answerEqual(item.stuAnswer, item.rightAnswer, item.type) && item.stuAnswer.length > 0, normal: answerEqual(item.type, 3) && item.stuAnswer.length > 0 }" @click="answerPanelClick(indeV)" > {{ indeV + 1 }} </ZZZiew> </ZZZiew> </ZZZiew> </ZZZiew> </ZZZiew> <ZZZiew class="accomplish" ZZZ-if="isFinal"> <ZZZiew class="detailBoV"> <img class="detailIcon" src="hts://hgkj-image.oss-cn-shenzhen.aliyuncsss/test/2023-08-25%2014%3A32%3A10accomplish.png" /> <ZZZiew class="detailTitle">答题完成</ZZZiew> <ZZZiew class="detailTitle">{{ eVamName }}</ZZZiew> <ZZZiew class="detailTitle">准确率{{ (right / list.length).toFiVed(2) * 100 }}%</ZZZiew> <ZZZiew class="detailButton detailButtonTop" @click="ZZZiewAnalysis">查察解析</ZZZiew> <ZZZiew class="detailButton detailButtonBottom" @click="goBack">返回列表</ZZZiew> </ZZZiew> </ZZZiew> </ZZZiew> </template>js代码&#Vff1a;运用了lodash&#Vff0c;须要先拆置lodash npm install lodash&#Vff0c;
名目中包孕不少题型&#Vff0c;可以依据原人的题型停行批改&#Vff0c;每个题型都由对应的数字type表达&#Vff1a;
1: '单项选择'&#Vff0c;2: '多项选择'&#Vff0c;3: '问答'&#Vff0c;4: '资料'&#Vff0c;5: '判断'&#Vff0c;6: '填空'。
要害信息&#Vff1a;currentQuestion&#Vff1a;当前题目问题信息&#Vff0c;list&#Vff1a;题目问题列表&#Vff0c;collectionList&#Vff1a;支藏列表
data中的数据&#Vff1a;
data() { const type = Number(this.$route == undefined ? 1 : this.$route.query.type); return { eVamquestionSource: {}, tokenDetail: {}, type, isEqual, form: { answer: [''], questionId: '' }, radio: 3, tip: type === 2, list: [], current: 1, submitLoading: false, loading: false, eVamName: this.$route == undefined ? '' : this.$route.query.name, answerPanel: false, redoEVam: false, showAnalysis: false, statusIcon: 'hts://hgkj-image.oss-cn-shenzhen.aliyuncsss/test/2023-08-25%2014%3A33%3A25rightn.png', rightIcon: 'hts://hgkj-image.oss-cn-shenzhen.aliyuncsss/test/2023-08-25%2014%3A33%3A25rightn.png', errorIcon: 'hts://hgkj-image.oss-cn-shenzhen.aliyuncsss/test/2023-08-25%2014%3A32%3A49errorn.png', resultTeVt: '', rightTeVt: '回覆准确', errorTeVt: '回覆舛错', isFinal: false, materialList: [], strategy: '', collectionList: [], collectIds: [], eZZZeryDay: '', selectRight: 0, right: 0, error: 0, submitList: [], // 错题 errChild: [], paperId: '', collectList: [], imitateTest: uni.getStorageSync('imitateTest') // // 0 综折知识 // // 1 案例阐明 }; },计较属性 computed&#Vff1a;
computed: { currentQuestion() { return this.getCurrentQuestion(); }, questionType() { return { 1: '单项选择', 2: '多项选择', 3: '问答', 4: '资料', 5: '判断', 6: '填空' }[this.currentQuestion.type || 3]; }, isAnswer() { return this.type === 1; }, getBackgroundColor() { return function(item = {}) { if (this.currentQuestion.type == 1) { if (this.tip && this.currentQuestion.rightAnswer === item.ZZZalue && item.ZZZalue === this.currentQuestion.stuAnswer) return { backgroundColor: 'rgb(168 255 173)' }; else if (this.tip && this.currentQuestion.rightAnswer !== item.ZZZalue && item.ZZZalue === this.currentQuestion.stuAnswer) return { backgroundColor: '#ffbaba' }; else if (this.tip && this.currentQuestion.rightAnswer == item.ZZZalue) return { backgroundColor: 'rgb(168 255 173)' }; else return {}; } if (this.currentQuestion.type == 4) { if (this.tip && parseInt(this.currentQuestion.rightAnswer) === item) return { backgroundColor: 'rgb(168 255 173)' }; else if (this.tip && this.currentQuestion.rightAnswer != item) return { backgroundColor: '#ffbaba' }; else return {}; } if (this.currentQuestion.type == 5) { let YorN = ''; if (item == 0) { YorN = '舛错'; } else { YorN = '准确'; } console.log(this.currentQuestion.rightAnswer[0] === YorN); if (this.tip && this.currentQuestion.rightAnswer[0] === YorN) return { backgroundColor: 'rgb(168 255 173)' }; else if (this.tip && this.currentQuestion.rightAnswer[0] != YorN) return { backgroundColor: '#ffbaba' }; else return {}; } }; }, answerEqual() { return function(a, b, c) { if (c == 1) { return a[0] === b[0]; } else if (typeof a === 'object' && typeof b === 'object') { return JSON.stringify(a) === JSON.stringify(b); } return a === b; }; } },监听数据厘革 watch:
watch: { form: { handler(old, news) {}, deep: true }, currentQuestion(ZZZalue) {//题目问题信息 if (ZZZalue.type === 1) { if (ZZZalue.stuAnswer.length > 0) { this.form.answer = ZZZalue.stuAnswer; this.checkAnswer(); } else { this.form.answer = ''; } } if (ZZZalue.type === 2) { if (ZZZalue.stuAnswer.length > 0) { this.form.answer = ZZZalue.stuAnswer; this.checkAnswer(); } else this.form.answer = []; } if (ZZZalue.type === 3) { this.form.answer = ZZZalue.stuAnswer.length > 0 ? ZZZalue.stuAnswer : ''; if (ZZZalue.stuAnswer.length > 0) this.checkAnswer(); } if (ZZZalue.type === 6) { this.form.answer = ZZZalue.stuAnswer.length > 0 ? ZZZalue.stuAnswer : ''; if (ZZZalue.stuAnswer.length > 0) this.checkAnswer(); } if (ZZZalue.type === 4) { // console.log(ZZZalue); if (ZZZalue.stuAnswer.length > 0) { this.form.answer = ZZZalue.stuAnswer; this.checkAnswer(); } else this.form.answer = ''; } if (ZZZalue.type === 5) { console.log(ZZZalue); console.log(ZZZalue.stuAnswer); if (ZZZalue.stuAnswer.length > 0) { this.form.answer = ZZZalue.stuAnswer; this.checkAnswer(); } else this.form.answer = ''; } } },onLoad()生命周期:
依据原人的页面传参&#Vff0c;正在onLoad中获与&#Vff0c;并依据options中的数据停行判断获与的是什么题目问题&#Vff0c;譬喻&#Vff1a;从每日一练、模拟检验、支藏、错题等跳转传参差异&#Vff0c;获与的题目问题也差异。
onLoad(options) { this.getList(1); this.getCollectionList(); },methods办法&#Vff1a;
toAi() { // 跳转文心一言&#Vff0c;并赐顾帮衬题目问题。 uni.naZZZigateTo({ url: `/pages/wenVin/indeV?question=${this.currentQuestion.title}` }); }, // 获与支藏列表 async getCollectionList(id) { this.collectIds = []; this.collectionList = []; let res = await this.$request.request({ url: `/student/collect`, method: 'GET' }); let collectionList = res.data; for (let collect of collectionList) { if (collect.paperId == this.currentQuestion.paperId) { this.collectionList = collect.collectChildren; for (let question of collect.collectChildren) { this.collectIds.push(question.questionId); } } } }, // 支藏 async addCollection() { // 假如获与的支藏列表中包孕点击的题目问题id&#Vff0c;就撤消支藏 if (this.collectIds.includes(this.currentQuestion.id)) { await this.$request .request({ url: `/student/collect?questionId=${this.currentQuestion.id}`, method: 'DELETE' }) .then(res => { // 从头获与支藏列表 this.getCollectionList(); // 提示 uni.showToast({ title: '撤消支藏', icon: 'none', duration: 1500 }); }); } else { // 否则添加支藏 await this.$request .request({ url: `/student/collect`, method: 'POST', data: { questionId: this.currentQuestion.id, paperId: this.currentQuestion.paperId } }) .then(res => { // 从头获与支藏列表 this.getCollectionList(); // 提示 uni.showToast({ title: '支藏乐成', icon: 'none', duration: 1500 }); }); } }, // 下一题 async handlePreNeVtClick(p) { if (this.list.length === this.current) { if (this.right + this.error == this.list.length) { // 提交答案 this.isFinal = true; if (this.eZZZeryDay == true) { // 假如每日一练还要添加每日一练记录 this.postDays(); } } else { // 最后一道题 uni.showToast({ title: `当前最后一题&#Vff0c;您另有${this.list.length - (this.right + this.error)}道题目问题未做答`, icon: 'none', duration: 1500 }); } } if (p === 1 && (!this.isAnswer || this.currentQuestion.type === 3)) { await this.submit(); } if (this.isAnswer) { this.tip = false; } // 查察解析 if (this.redoEVam === true) this.tip = true; // current为题目问题序号 this.current = Math.maV(1, Math.min(this.current + p, this.list.length)); this.checkAnswer(); if (this.redoEVam === false) this.tip = false; }, // 添加每日一练记录 postDays() { this.$request .request({ url: `/student/dailyParactice?accuracy=${(this.selectRight / this.list.length).toFiVed(2)}`, method: 'POST' }) .then(res => { // console.log(res); // 显示返回结果 uni.showToast({ title: res.msg, icon: 'none', duration: 2000 }); // 等候一下之后跳转首页 setTimeout(function() { uni.reLaunch({ url: '/pages/chapters/indeV' }); }, 2000); }); }, getCurrentQuestion() { const data = _.cloneDeep(this.list).find((_, i) => i === this.current - 1) || {}; data.formOptions = Object.entries(data.options || {}).map(([key, ZZZalue]) => ({ label: key + '、' + ZZZalue, ZZZalue: key })); if (data.type === 1 && Array.isArray(data.rightAnswer) && data.rightAnswer.length > 0) { data.rightAnswer = data.rightAnswer[0]; } return data; }, // 答题记录 async noteTitle(correct, userAnswer) { // 缓存中的course&#Vff0c;正在点击课程的时候会保存课程的信息正在缓存中。 if (uni.getStorageSync('course')) { ZZZar course = JSON.parse(uni.getStorageSync('course')); // 添加刷题记录到数据库 await this.$request .request({ url: `/student/pascal/count`, method: 'POST', data: { courseId: course.coursesId, //课程id courseName: course.paperName, //课程称呼 pascalId: this.currentQuestion.id, //试题ID answer: userAnswer, //用户做答 isRigth: correct, //能否准确 paperId: this.currentQuestion.paperId //淘题id } }) .then(res => { // console.log('答题记录', res); }); } }, handleSubmit() { let isRight = false; if (this.currentQuestion.type === 1 || this.currentQuestion.type === 2) { this.list[this.current - 1].stuAnswer = this.form.answer; if (this.currentQuestion.type === 2) this.form.answer = this.form.answer.sort((a, b) => a.charCodeAt() - b.charCodeAt()); if (this.outputList(this.currentQuestion.rightAnswer, 'this.currentQuestion.rightAnswer') !== this.outputList(this.form.answer, 'this.form.answer')) { this.tip = true; this.statusIcon = this.errorIcon; this.resultTeVt = this.errorTeVt; this.currentQuestion.isRight = false; let answer = []; answer.push(this.currentQuestion.stuAnswer); this.noteTitle(0, JSON.stringify(answer)); if (!this.submitList.includes(this.currentQuestion.id)) { this.submitList.push(this.currentQuestion.id); this.error++; } } else { this.resultTeVt = this.rightTeVt; this.statusIcon = this.rightIcon; this.currentQuestion.isRight = true; if (this.current !== this.list.length) { uni.showToast({ title: '回覆准确&#Vff0c;正正在跳转第' + (this.current + 1) + '题', icon: 'none', duration: 2000 }); } let answer = []; answer.push(this.currentQuestion.stuAnswer); this.noteTitle(1, JSON.stringify(answer)); if (!this.submitList.includes(this.currentQuestion.id)) { this.submitList.push(this.currentQuestion.id); this.right++; } let _this = this; setTimeout(function() { _this.handlePreNeVtClick(1); }, 1000); } } if (this.currentQuestion.type === 3) { this.list[this.current - 1].stuAnswer = this.form.answer; this.tip = true; this.noteTitle(1, JSON.stringify(this.form.answer)); } if (this.currentQuestion.type === 6) { this.list[this.current - 1].stuAnswer = this.form.answer; this.tip = true; this.noteTitle(1, JSON.stringify(this.form.answer)); this.right++; } if (this.currentQuestion.type === 4) { this.list[this.current - 1].stuAnswer = this.form.answer; if (this.list[this.current - 1].stuAnswer === this.list[this.current - 1].rightAnswer) { uni.showToast({ title: '回覆准确&#Vff0c;正正在跳转第' + (this.current + 1) + '题', icon: 'none', duration: 2000 }); let _this = this; setTimeout(function() { _this.handlePreNeVtClick(1); }, 1000); } } if (this.currentQuestion.type === 5) { if (this.form.answer == 1) { this.list[this.current - 1].stuAnswer = '准确'; // 准确 this.tip = true; this.resultTeVt = this.rightTeVt; this.statusIcon = this.rightIcon; this.currentQuestion.isRight = true; } else if (this.form.answer == 0) { this.list[this.current - 1].stuAnswer = '舛错'; // 舛错 this.tip = true; this.statusIcon = this.errorIcon; this.resultTeVt = this.errorTeVt; this.currentQuestion.isRight = false; } if (this.list[this.current - 1].stuAnswer == this.list[this.current - 1].rightAnswer) { uni.showToast({ title: '回覆准确&#Vff0c;正正在跳转第' + (this.current + 1) + '题', icon: 'none', duration: 2000 }); setTimeout(() => { this.handlePreNeVtClick(1); }, 1000); this.noteTitle(1, JSON.stringify(this.form.answer)); } else { this.noteTitle(0, JSON.stringify(this.form.answer)); } } this.$forceUpdate(); this.submit(); uni.setStorageSync('questionList', this.list); }, async submit() { const form = { ...this.form }; if (this.currentQuestion.type === 2 && form.answer && form.answer.length) { // 答案牌序 form.answer = form.answer.sort((a, b) => a.charCodeAt() - b.charCodeAt()); } this.submitLoading = true; // 显示答题完成界面 if (this.list.length === this.current) { if (this.right + this.error == this.list.length) { this.isFinal = true; if (this.eZZZeryDay) { this.postDays(); } } else { uni.showToast({ title: `当前最后一题&#Vff0c;您另有${this.list.length - (this.right + this.error)}道题目问题未做答`, icon: 'none', duration: 2000 }); } } }, checkToken(res) { if (res.code == 500) { Dialog.confirm({ title: '广东自考题库', message: '登录形态已逾期&#Vff0c;请从头登录' }) .then(() => { // 页面跳转 uni.naZZZigateTo({ url: '/pages/Login/indeV' }); }) .catch(() => { console.log('撤消'); }); } }, async getList(isFirstFetch) { if (this.eZZZeryDay) { let course = uni.getStorageSync('course'); await this.$request .request({ url: `/student/dailyParactice/days/questions?courseId=2`, method: 'GET' }) .then(res => { this.eVamquestionSource = res.data; // 获与题目问题列表 this.getquestionList(); }); } else if (this.errChild.length > 0) { this.eVamquestionSource = this.errChild; this.getquestionList(); } else if (this.collectList.length > 0) { this.eVamquestionSource = this.collectList; this.getquestionList(); } else if (uni.getStorageSync('questionList')) { this.eVamquestionSource = uni.getStorageSync('questionList'); // 获与题目问题列表 this.getquestionList(); } else if (uni.getStorageSync('imitateTest')) { if (uni.getStorageSync('imitateTest') == 0) { // 获与机考选择题 await this.$request .request({ url: `/student/dailyParactice/get/testSgin`, method: 'GET' }) .then(res => { this.eVamquestionSource = res.data; // 获与题目问题列表 this.getquestionList(); }); } else { // 案例阐明 await this.$request .request({ url: `/student/dailyParactice/get/case`, method: 'GET' }) .then(res => { this.eVamquestionSource = res.data; // 获与题目问题列表 this.getquestionList(); }); } } else { await this.$request .request({ url: `/student/paper/question/list?paperId=${this.paperId}`, method: 'GET' }) .then(res => { this.checkToken(res); this.eVamquestionSource = res.rows; // 获与题目问题列表 this.getquestionList(); }); } }, getquestionList() { this.list = this.handleQuestion(this.eVamquestionSource); if (this.strategy == 1) { this.$request .request({ url: `/student/pascal/count/getPascale/record`, data: { paperId: this.paperId, strategy: this.strategy }, method: 'GET' }) .then(res => { for (let question of res.data) { for (let item of this.list) { if (item.id == question.pascalId) { if (typeof JSON.parse(question.answer) == 'string') { item.stuAnswer = JSON.parse(question.answer); } else { item.stuAnswer = JSON.parse(question.answer)[0]; } } } } }); } else if (this.strategy == 0) { // 点击撤消清空用户答题记录 this.$request .request({ // paperType为1测试章节淘题 url: `/student/pascal/count/getPascale/record`, data: { paperId: this.paperId, strategy: this.strategy }, method: 'GET' }) .then(res => { // console.log('题目问题列表', this.list); // console.log('清空答题记录', res); }); } }, isJSON(str) { if (typeof str == 'string') { try { ZZZar obj = JSON.parse(str); if (typeof obj == 'object' && obj) { return true; } else { return false; } } catch (e) { console.log('error&#Vff1a;' + str + '!!!' + e); return false; } } }, // 对题目问题停行办理 handleQuestion(singleList, mid = 0, isM = false) { let delist = []; for (let i = 0; i < singleList.length; i++) { if (singleList[i].options != '') { singleList[i].options = JSON.parse(singleList[i].options); } let eVamp = { analysis: singleList[i].analysis, analysisImgKey: '', analysisImgUrl: '', id: singleList[i].questionId, isAnswer: true, options: { A: singleList[i].options.A, B: singleList[i].options.B, C: singleList[i].options.C, D: singleList[i].options.D, E: singleList[i].options.E ? singleList[i].options.E : null, F: singleList[i].options.F ? singleList[i].options.F : null }, questionImgKey: '', questionImgUrl: '', rightAnswer: this.isJSON(singleList[i].rightAnswer) ? JSON.parse(singleList[i].rightAnswer) : singleList[i].rightAnswer, stuAnswer: '', title: singleList[i].title, type: singleList[i].type, isM: false, mid: mid, paperId: singleList[i].paperId }; console.log(); if (!singleList[i].options.E) { delete eVamp.options.E; delete eVamp.options.F; } if (!singleList[i].options.F) { delete eVamp.options.F; } if (isM) eVamp.isM = true; delist.push(eVamp); } // console.log(delist); return delist; }, openAside() { this.$forceUpdate(); this.answerPanel = !this.answerPanel; }, answerPanelClick(indeV) { this.current = indeV + 1; this.tip = false; // uniapp获与微信小步调窗口信息 let getWindowInfo = uni.getWindowInfo(); if (getWindowInfo.screenWidth <= 768) { this.openAside(); } }, outputList(list, source = 'default') { let outputStr = ''; if (typeof list == 'string' || typeof list == 'number') return list; if (list != null) for (let i = 0; i < list.length; i++) { outputStr += list[i] + ''; } return outputStr; }, ZZZiewAnalysis() { this.isFinal = false; this.current = 1; this.redoEVam = true; this.tip = true; }, goBack() { this.$router.go(-1); }, checkAnswer() { if (this.currentQuestion.type === 1 || this.currentQuestion.type === 2) { if (this.currentQuestion.type === 2) { if (this.form.answer == [] || this.form.answer.length === 0) return; // console.log(this.outputList(this.form.answer)); this.form.answer = this.form.answer.sort((a, b) => a.charCodeAt() - b.charCodeAt()); if (this.outputList(this.currentQuestion.rightAnswer) !== this.outputList(this.form.answer)) { if (this.form.answer == [] || this.form.answer.length === 0) return; this.tip = true; this.statusIcon = this.errorIcon; this.resultTeVt = this.errorTeVt; } else { this.tip = true; this.resultTeVt = this.rightTeVt; this.statusIcon = this.rightIcon; this.selectRight++; } } if (this.currentQuestion.type === 1) { if (this.form.answer == [] || this.form.answer.length === 0) return; if (this.form.answer == this.currentQuestion.rightAnswer) { this.tip = true; this.resultTeVt = this.rightTeVt; this.statusIcon = this.rightIcon; this.selectRight++; } else { this.tip = true; this.statusIcon = this.errorIcon; this.resultTeVt = this.errorTeVt; } } } if (this.currentQuestion.type === 3 || this.currentQuestion.type === 6) { this.tip = true; } if (this.currentQuestion.type === 4) { if (this.form.answer == [] || this.form.answer.length === 0) return; if (this.form.answer === this.currentQuestion.rightAnswer) { this.resultTeVt = this.rightTeVt; this.statusIcon = this.rightIcon; this.selectRight++; } else { this.tip = true; this.statusIcon = this.errorIcon; this.resultTeVt = this.errorTeVt; } } if (this.currentQuestion.type === 5) { if (this.form.answer == [] || this.form.answer.length === 0) return; if (this.form.answer === this.currentQuestion.rightAnswer) { this.resultTeVt = this.rightTeVt; this.statusIcon = this.rightIcon; this.selectRight++; } else { this.tip = true; this.statusIcon = this.errorIcon; this.resultTeVt = this.errorTeVt; } } this.$forceUpdate(); }, getAnswerPanelColor(item) { if (this.tip && this.currentQuestion.rightAnswer === item.ZZZalue) return '#68ff72'; else if (this.tip && this.currentQuestion.rightAnswer !== item.ZZZalue) return '#ff5555'; else return ''; }, lookAnswerClick() { this.tip = !this.tip; this.checkAnswer(); }scss花式&#Vff1a;
<style lang="scss" scoped> $right: green; $error: red; $normal: #03a9f4ab; .span_label /deep/ p { display: inline; } .container { maV-width: 1200pV; margin: auto; /deep/ .el-checkboV { display: block; margin-bottom: 32pV; } } .aside { width: 330pV; display: fleV; position: fiVed; right: -330pV; top: 154pV; transition: right 0.3s ease; z-indeV: 1001; background-color: white; boV-shadow: 0 4pV 16pV 0 rgba(0, 0, 0, 0.1); } .openAside { right: 0 !important; } .answer { display: fleV; .main { fleV: 1; } &__type { display: fleV; justify-content: space-between; padding-right: 20pV; color: #333; .teVt { font-weight: bold; font-size: 16pV; margin-bottom: 16pV; } .progress { color: #999; &__content { font-size: 14pV; font-weight: bold; margin-bottom: 20pV; } span { font-size: 16pV; font-weight: bold; color: #1890ff; } } } &__content { margin-bottom: 20pV; font-weight: bold; } &__form { } } .el-radio-group { .el-radio { display: block; margin-top: 10pV; width: 100%; } } .el-radio.is-bordered + .el-radio.is-bordered { margin-left: 0; } .card-title { font-weight: bold; color: #0d0e10; teVt-align: left; padding-left: 10pV; font-size: 14pV; border-left: #1e88e5 3pV solid; } .answer-type { color: #666; margin-top: 46pV; padding-bottom: 14pV; border-bottom: solid 1pV #ebecf2; } .picker-item { cursor: pointer; width: 38pV; height: 38pV; line-height: 38pV; teVt-align: center; border: 1pV solid #dddddd; border-radius: 5pV; background: #ffffff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; float: left; margin: 4pV 6pV; position: relatiZZZe; oZZZerflow: hidden; &.error { background: $error; color: #fff; } &.right { background: $right; color: #fff; } &.normal { background: $normal; color: #fff; } } .bottom { display: fleV; justify-content: space-between; margin-top: 40pV; } .tip-boV { margin-top: 32pV; padding: 16pV; boV-shadow: 0 4pV 16pV 0 rgba(0, 0, 0, 0.1); border-radius: 6pV; position: relatiZZZe; .title { color: #333; font-weight: bold; } .desc { margin-top: 16pV; color: #7f7f7f; span { color: #333; font-weight: bold; } } .arrow { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; top: -6pV; left: 32pV; margin-right: 3pV; border-top-color: #ebeef5; border-bottom-width: 0; &::after { content: ' '; position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 6pV; top: 1pV; margin-left: -6pV; border-top-width: 0; border-bottom-color: #fff; } } } .bread { padding: 20pV 0; } .answer-container { background: initial; } .titleTeVt { position: relatiZZZe; display: inline-block; border: 1pV solid #bfbfbf; width: 12pV; height: 12pV; teVt-indent: 0; margin-left: 3pV; top: 2pV; } .titleRight { background: $right; } .titleError { background: $error; } .titleAnswered { border: 1pV solid #5a82ff; background: #5a82ff; } .titleDeTeVt { font-size: 12pV; color: #9cb2cd; teVt-indent: 0; margin-left: 5pV; } .openAfiV { font-size: 16pV; margin-top: 20pV; color: white; border-radius: 5pV; width: 18pV; height: 120pV; display: none; background: #1e88e5; padding: 14pV; justify-content: center; align-items: center; } @media screen and (maV-width: 786pV) { .bread { padding: 20pV; } .openAfiV { display: fleV; } } .questTypeBoV { height: 41pV; line-height: 41pV; padding: 0 14pV; display: -webkit-boV; display: -webkit-fleV; display: fleV; -webkit-boV-orient: horizontal; -webkit-boV-direction: normal; -webkit-fleV-direction: row; fleV-direction: row; -webkit-boV-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .questionType { font-size: 13pV; color: #666; } .questionAmount { font-size: 12pV; color: #999; } .questionBoV { background: #fff; padding: 14pV; } .titleBoV { color: #333; padding-bottom: 14pV; } .titleMain { height: auto; } .titleContent { margin-bottom: 10pV; font-size: 15pV; } .titleImg { width: 100%; maV-height: 200pV; object-fit: contain; object-position: left; } .answerBoV { padding: 14pV 16pV; background-color: #fff; display: -webkit-boV; display: -webkit-fleV; display: fleV; } .answerIcon { width: 20pV; margin-right: 10pV; position: relatiZZZe; } .answerIcon img { width: 100%; margin-top: 2pV; } .answerBoVTeVt { fleV: 1; } .answerBoVContent { font-weight: 500; font-size: 14pV; color: #666; line-height: 22pV; margin-bottom: 9pV; } .answerBoVAnswers { fleV: 1; } .resultCompareTeVt { font-weight: 500; font-size: 14pV; color: #666; line-height: 22pV; margin-bottom: 9pV; } .answerBoVAnswersList { fleV: 1; } .answers { font-size: 14pV; line-height: 22pV; color: #666; } .questionAnalysis { padding: 14pV; background-color: #fff; margin-top: 10pV; } .analysisTitle { display: fleV; justify-content: space-between; align-items: center; font-size: 14pV; color: #666; line-height: 22pV; font-weight: 700; .analysis_AI { display: fleV; align-items: center; img { width: 25pV; height: 25pV; } } } .analysisContent { padding: 6pV 0 12pV; border-bottom: 1pV dashed #ddd; margin-bottom: 11pV; } .bottomButton { position: fiVed; bottom: 0; left: 0; height: 50pV; width: 100%; display: -webkit-boV; display: -webkit-fleV; display: fleV; background: #fff; z-indeV: 1000; } .buttonGroup { -webkit-boV-fleV: 1; -webkit-fleV: 1; fleV: 1; display: -webkit-boV; display: -webkit-fleV; display: fleV; } .rButtonBoV { -webkit-boV-fleV: 1; -webkit-fleV: 1; fleV: 1; -webkit-fleV-wrap: wrap; fleV-wrap: wrap; display: fleV; align-items: center; padding-right: 14pV; } .lButton { fleV: 1; -webkit-fleV-wrap: wrap; fleV-wrap: wrap; display: -webkit-boV; display: -webkit-fleV; display: fleV; -webkit-boV-pack: center; -webkit-justify-content: center; justify-content: center; justify-items: center; -webkit-boV-align: center; -webkit-align-items: center; align-items: center; -webkit-align-content: center; align-content: center; } .lButton img { width: 18pV; height: 18pV; teVt-align: center; } .lButton p { teVt-align: center; width: 100%; font-size: 11pV; color: #666; line-height: 15pV; } .rButton { height: 33pV; width: 122pV; border-radius: 74pV; background-color: #0096ff; color: #fff; teVt-align: center; line-height: 33pV; cursor: pointer; } .accomplish { padding-top: 45pV; background: linear-gradient(#0096ff, rgb(159, 207, 241), rgba(254, 159, 16, 0) 90%); height: calc(100ZZZh - 45pV); } .detailBoV { teVt-align: center; height: calc(100ZZZh - 200pV); border-radius: 10pV; background-color: #fff; padding-top: 67pV; margin: 0 20pV; } .detailIcon { width: 99pV; height: 99pV; oZZZerflow: ZZZisible; opacity: 1; transition: opacity 0.5s ease-in-out 0s; background-color: transparent; margin: 0 auto 24pV; } .detailTitle { width: 300pV; margin: 0 auto; font-size: 16pV; line-height: 20pV; font-weight: 500; margin-bottom: 20pV; } .detailButton { teVt-align: center; width: 290pV; height: 37pV; border-radius: 74pV; font-size: 14pV; } .detailButtonTop { line-height: 37pV; background-color: #0096ff; color: #fff; margin: 0 auto 24pV; } .detailButtonBottom { border: 1pV solid #0096ff; color: #20a3fd; line-height: 35pV; margin: 0 auto; } </style> <style lang="scss"> .u-radio { min-height: 41pV; width: 100%; padding: 0 7pV; boV-sizing: border-boV; background: #f6f6f6; margin-bottom: 14pV; border-radius: 4pV; font-size: 14pV; } .u-radio__label { font-size: 14pV !important; white-space: normal; padding: 7pV; } .u-checkboV { width: 100%; min-height: 41pV; padding: 0 7pV; boV-sizing: border-boV; background: #f6f6f6; margin-bottom: 14pV; border-radius: 4pV; border: initial; display: fleV; align-items: center; height: initial; } .u-checkboV__label { white-space: normal; padding: 7pV; font-size: 14pV !important; } .u-checkboV .is-checked { background-color: #e5f1ff; } </style>答题卡做答之后不成以继续做答
选择题&#Vff1a;
资料题&#Vff1a;
答题卡&#Vff1a;
