1. Toy模板网首页
  2. > Toy博客

uniapp实现微信小程序/H5答题卡

9月前 作者：Mengxy灬 分类：Toy博客 阅读(48) 违法举报

这篇具有很好参考价值的文章主要介绍了uniapp实现微信小程序/H5答题卡。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近项目中使用到很多答题卡，实现了一个可以复用的答题卡组件。

项目使用HbuilderX，uniapp，uview进行开发。

代码中有些地方判断写的没必要，懒得改了，xdm看不惯自己改吧 hhhhhhh ^_^。

HTML代码：微信小程序页面，如果要修改为H5，直接把view标签修改为div，

并把 :style="[getBackgroundColor(item)]"，修改为:style="getBackgroundColor(item)"

<template>
	<view style="background: #f9f9f9;min-height: 100%">
		<view v-if="!isFinal">
			<view class="questTypeBox">
				<view class="questionType">{{ questionType }}题</view>
				<view class="questionAmount">
					<view>
						<span style="color: #1e88e5">{{ current }}</span>
						|{{ list.length }}
					</view>
				</view>
			</view>
			<view class="questionBox">
				<template v-if="currentQuestion.isM" style="margin: 10px 0;">
					<view class="titleBox">
						<view class="titleMain"><view class="titleContent" v-html="materialList[currentQuestion.mid]"></view></view>
					</view>
				</template>
				<view class="titleBox">
					<view class="titleMain"><view class="titleContent" v-html="currentQuestion.title"></view></view>
				</view>
				<view class="answersBox">
					<view v-if="currentQuestion.type === 1">
						<u-radio-group :disabled="currentQuestion.stuAnswer == '' ? false : true" v-if="isAnswer" v-model="form.answer" placement="column" @change="handleSubmit">
							<u-radio :bgcolor="getBackgroundColor(item)" v-for="(item, index) in currentQuestion.formOptions || []" :key="index" :name="item.value" border>
								<span style="width: 100%;height: 100%;" :style="[getBackgroundColor(item)]" class="span_label" v-html="item.label"></span>
							</u-radio>
						</u-radio-group>
					</view>
					<template v-else-if="currentQuestion.type === 5">
						<u-radio-group :disabled="currentQuestion.stuAnswer == '' ? false : true" v-if="isAnswer" v-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 v-else-if="currentQuestion.type === 2">
						<u-checkbox-group :disabled="currentQuestion.stuAnswer == '' ? false : true" v-model="form.answer" placement="column">
							<u-checkbox
								shape="circle"
								border
								v-for="(item, index) in currentQuestion.formOptions || []"
								:key="index"
								:name="item.value"
								:label="item.label"
							></u-checkbox>
						</u-checkbox-group>
						<u-button style="width: 100%;height: 40px;font-size: 14px;font-weight: 500" round size="medium" type="primary" @click="handleSubmit">提交答案</u-button>
					</template>
					<template v-else-if="currentQuestion.type === 3">
						<u--textarea :disabled="currentQuestion.stuAnswer == '' ? false : true" v-if="isAnswer" v-model="form.answer" :rows="3" placeholder="请输入内容" />
						<u-button
							style="width: 100%;height: 40px;font-size: 14px;font-weight: 500;margin-top: 10px;margin-bottom: 50px;"
							round
							size="medium"
							type="primary"
							@click="handleSubmit"
						>
							提交答案
						</u-button>
					</template>
					<template v-else-if="currentQuestion.type === 6">
						<u--textarea :disabled="currentQuestion.stuAnswer == '' ? false : true" v-if="isAnswer" v-model="form.answer" :rows="3" placeholder="请输入内容" />
						<u-button
							style="width: 100%;height: 40px;font-size: 14px;font-weight: 500;margin-top: 10px;margin-bottom: 50px;"
							round
							size="medium"
							type="primary"
							@click="handleSubmit"
						>
							提交答案
						</u-button>
					</template>

					<template v-if="currentQuestion.type === 4">
						<u-radio-group :disabled="currentQuestion.stuAnswer == '' ? false : true" v-if="isAnswer" v-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>

					<!-- 按钮区域 -->
				</view>
			</view>
			<view class="answerBox" v-if="tip">
				<view style="display: flex;flex: 1;" v-if="currentQuestion.type !== 3 && currentQuestion.type !== 6">
					<view class="answerIcon" v-if="currentQuestion.type === 1 || currentQuestion.type === 2">
						<img :src="statusIcon" style="position: absolute;left: 0;top: 0;height:20px" />
					</view>
					<view class="answerBoxAnswers">
						<view class="resultCompareText" v-if="currentQuestion.type === 1 || currentQuestion.type === 2">{{ resultText }}</view>
						<view style="display: flex;flex: 1">
							<view class="answerBoxAnswersList">
								<view class="answers">正确答案</view>
								<view class="answers">
									{{
										outputList(currentQuestion.rightAnswer) == 1
											? '正确'
											: outputList(currentQuestion.rightAnswer) == 0
											? '错误'
											: outputList(currentQuestion.rightAnswer)
									}}
								</view>
							</view>
							<view class="answerBoxAnswersList">
								<view class="answers">您的答案</view>
								<view class="answers">
									{{
										outputList(currentQuestion.stuAnswer) == 1
											? '正确'
											: outputList(currentQuestion.stuAnswer) == 0
											? '错误'
											: outputList(currentQuestion.stuAnswer)
									}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="currentQuestion.type === 3">
					<view class="answerBoxAnswers">
						<view style="display: flex;flex: 1">
							<view class="answerBoxAnswersList">
								<view class="answers">正确答案</view>
								<view
									style="white-space: pre-wrap;"
									class="answers"
									v-for="(answer, index) in currentQuestion.rightAnswer"
									:key="index"
									v-show="answer != ''"
									v-html="answer"
								></view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="currentQuestion.type === 6">
					<view class="answerBoxAnswers">
						<view style="display: flex;flex: 1">
							<view class="answerBoxAnswersList">
								<view class="answers">正确答案</view>
								<view class="answers" v-for="(answer, index) in currentQuestion.rightAnswer" :key="index" v-show="answer != ''">{{ answer }};</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="questionAnalysis" v-if="tip">
				<view class="analysisTitle">
					答案解析
					<view class="analysis_AI" @click="toAi">
						<img src="https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/icon_4a6pvlsjrq8/%E6%9C%BA%E5%99%A8%E4%BA%BA.png" alt="" />
						AI智能解析
					</view>
				</view>
				<view style="white-space: pre-wrap;" class="analysisContent" v-html="currentQuestion.analysis"></view>
			</view>
			<view style="height: 20vh;width: 100%;"></view>
			<view class="bottomButton">
				<view class="buttonGroup">
					<view class="lButton" @click="lookAnswerClick()">
						<img src="https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A32%3A34checkAnswer.svg" />
						<p>查看答案</p>
					</view>
					<view class="lButton" @click="addCollection">
						<van-icon :name="collectIds.includes(currentQuestion.id) ? 'star' : 'star-o'" />
						<p>收藏</p>
					</view>
					<view class="lButton" @click="openAside">
						<img src="https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A32%3A57questionsCard.svg" />
						<p>答题卡</p>
					</view>
					<view class="lButton" @click="handlePreNextClick(-1)">
						<img src="https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A33%3A28up.svg" />
						<p>上一题</p>
					</view>
					<view class="rButtonBox">
						<view class="rButton" @click="handlePreNextClick(1)">{{ list.length === current ? '完成' : '下一题' }}</view>
					</view>
				</view>
			</view>
			<view class="aside" :class="{ openAside: answerPanel }">
				<view style="padding: 20px;border-radius: 5px;">
					<view style="display: flex;justify-content: space-between">
						<view class="card-title">答题卡</view>
						<view>
							<span class="titleDeText">
								未做
								<i class="titleText"></i>
							</span>
							<span class="titleDeText">
								已做
								<i class="titleText titleAnswered"></i>
							</span>
							<span class="titleDeText">
								正确
								<i class="titleText titleRight"></i>
							</span>
							<span class="titleDeText">
								错误
								<i class="titleText titleError"></i>
							</span>
						</view>
					</view>
					<view style="padding: 20px 0 10px 0;overflow-y:auto;min-height: 260px;max-height: 400px;">
						<view
							v-for="(item, index) in list"
							:key="index"
							: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(index)"
						>
							{{ index + 1 }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="accomplish" v-if="isFinal">
			<view class="detailBox">
				<img class="detailIcon" src="https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A32%3A10accomplish.png" />
				<view class="detailTitle">答题完成</view>
				<view class="detailTitle">{{ examName }}</view>
				<view class="detailTitle">正确率{{ (right / list.length).toFixed(2) * 100 }}%</view>
				<view class="detailButton detailButtonTop" @click="viewAnalysis">查看解析</view>
				<view class="detailButton detailButtonBottom" @click="goBack">返回列表</view>
			</view>
		</view>
	</view>
</template>

 js代码：使用了lodash，需要先安装lodash   npm install lodash，

项目中包含很多题型，可以根据自己的题型进行修改，每个题型都由对应的数字type表达：

1: '单项选择'，2: '多项选择'，3: '问答'，4: '材料'，5: '判断'，6: '填空'。

关键信息：currentQuestion：当前题目信息，list：题目列表，collectionList：收藏列表

data中的数据：

	data() {
		const type = Number(this.$route == undefined ? 1 : this.$route.query.type);
		return {
			examquestionSource: {},
			tokenDetail: {},
			type,
			isEqual,
			form: {
				answer: [''],
				questionId: ''
			},
			radio: 3,
			tip: type === 2,
			list: [],
			current: 1,
			submitLoading: false,
			loading: false,
			examName: this.$route == undefined ? '' : this.$route.query.name,
			answerPanel: false,
			redoExam: false,
			showAnalysis: false,
			statusIcon: 'https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A33%3A25rightn.png',
			rightIcon: 'https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A33%3A25rightn.png',
			errorIcon: 'https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A32%3A49errorn.png',
			resultText: '',
			rightText: '回答正确',
			errorText: '回答错误',
			isFinal: false,
			materialList: [],
			strategy: '',
			collectionList: [],
			collectIds: [],
			everyDay: '',
			selectRight: 0,
			right: 0,
			error: 0,
			submitList: [],
			// 错题
			errChild: [],
			paperId: '',
			collectList: [],
			imitateTest: uni.getStorageSync('imitateTest')
			// 	// 0 综合知识
			// 	// 1 案例分析
		};
	},

 计算属性 computed：

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.value && item.value === this.currentQuestion.stuAnswer)
						return {
							backgroundColor: 'rgb(168 255 173)'
						};
					else if (this.tip && this.currentQuestion.rightAnswer !== item.value && item.value === this.currentQuestion.stuAnswer)
						return {
							backgroundColor: '#ffbaba'
						};
					else if (this.tip && this.currentQuestion.rightAnswer == item.value)
						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(value) {//题目信息
			if (value.type === 1) {
				if (value.stuAnswer.length > 0) {
					this.form.answer = value.stuAnswer;
					this.checkAnswer();
				} else {
					this.form.answer = '';
				}
			}
			if (value.type === 2) {
				if (value.stuAnswer.length > 0) {
					this.form.answer = value.stuAnswer;
					this.checkAnswer();
				} else this.form.answer = [];
			}
			if (value.type === 3) {
				this.form.answer = value.stuAnswer.length > 0 ? value.stuAnswer : '';
				if (value.stuAnswer.length > 0) this.checkAnswer();
			}
			if (value.type === 6) {
				this.form.answer = value.stuAnswer.length > 0 ? value.stuAnswer : '';
				if (value.stuAnswer.length > 0) this.checkAnswer();
			}
			if (value.type === 4) {
				// console.log(value);
				if (value.stuAnswer.length > 0) {
					this.form.answer = value.stuAnswer;
					this.checkAnswer();
				} else this.form.answer = '';
			}
			if (value.type === 5) {
				console.log(value);
				console.log(value.stuAnswer);
				if (value.stuAnswer.length > 0) {
					this.form.answer = value.stuAnswer;
					this.checkAnswer();
				} else this.form.answer = '';
			}
		}
	},

onLoad()生命周期:

根据自己的页面传参，在onLoad中获取，并根据options中的数据进行判断获取的是什么题目，例如：从每日一练、模拟考试、收藏、错题等跳转传参不同，获取的题目也不同。

	onLoad(options) {
		this.getList(1);
		this.getCollectionList();
	},

methods方法：


		toAi() {
			// 跳转文心一言，并携带题目。
			uni.navigateTo({
				url: `/pages/wenxin/index?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，就取消收藏
			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 handlePreNextClick(p) {
			if (this.list.length === this.current) {
				if (this.right + this.error == this.list.length) {
					// 提交答案
					this.isFinal = true;
					if (this.everyDay == true) {
						// 如果每日一练还要添加每日一练记录
						this.postDays();
					}
				} else {
					// 最后一道题
					uni.showToast({
						title: `当前最后一题，您还有${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.redoExam === true) this.tip = true;
			// current为题目序号
			this.current = Math.max(1, Math.min(this.current + p, this.list.length));
			this.checkAnswer();
			if (this.redoExam === false) this.tip = false;
		},
		// 添加每日一练记录
		postDays() {
			this.$request
				.request({
					url: `/student/dailyParactice?accuracy=${(this.selectRight / this.list.length).toFixed(2)}`,
					method: 'POST'
				})
				.then(res => {
					// console.log(res);
					// 显示返回结果
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
					// 等待一下之后跳转首页
					setTimeout(function() {
						uni.reLaunch({
							url: '/pages/chapters/index'
						});
					}, 2000);
				});
		},
		getCurrentQuestion() {
			const data = _.cloneDeep(this.list).find((_, i) => i === this.current - 1) || {};
			data.formOptions = Object.entries(data.options || {}).map(([key, value]) => ({
				label: key + '、' + value,
				value: 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，在点击课程的时候会保存课程的信息在缓存中。
			if (uni.getStorageSync('course')) {
				var 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.resultText = this.errorText;
					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.resultText = this.rightText;
					this.statusIcon = this.rightIcon;
					this.currentQuestion.isRight = true;

					if (this.current !== this.list.length) {
						uni.showToast({
							title: '回答正确，正在跳转第' + (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.handlePreNextClick(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: '回答正确，正在跳转第' + (this.current + 1) + '题',
						icon: 'none',
						duration: 2000
					});
					let _this = this;
					setTimeout(function() {
						_this.handlePreNextClick(1);
					}, 1000);
				}
			}

			if (this.currentQuestion.type === 5) {
				if (this.form.answer == 1) {
					this.list[this.current - 1].stuAnswer = '正确';
					// 正确
					this.tip = true;
					this.resultText = this.rightText;
					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.resultText = this.errorText;
					this.currentQuestion.isRight = false;
				}
				if (this.list[this.current - 1].stuAnswer == this.list[this.current - 1].rightAnswer) {
					uni.showToast({
						title: '回答正确，正在跳转第' + (this.current + 1) + '题',
						icon: 'none',
						duration: 2000
					});
					setTimeout(() => {
						this.handlePreNextClick(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.everyDay) {
						this.postDays();
					}
				} else {
					uni.showToast({
						title: `当前最后一题，您还有${this.list.length - (this.right + this.error)}道题目未作答`,
						icon: 'none',
						duration: 2000
					});
				}
			}
		},
		checkToken(res) {
			if (res.code == 500) {
				Dialog.confirm({
					title: '广东自考题库',
					message: '登录状态已过期，请重新登录'
				})
					.then(() => {
						// 页面跳转
						uni.navigateTo({
							url: '/pages/Login/index'
						});
					})
					.catch(() => {
						console.log('取消');
					});
			}
		},
		async getList(isFirstFetch) {
			if (this.everyDay) {
				let course = uni.getStorageSync('course');
				await this.$request
					.request({
						url: `/student/dailyParactice/days/questions?courseId=2`,
						method: 'GET'
					})
					.then(res => {
						this.examquestionSource = res.data;
						// 获取题目列表
						this.getquestionList();
					});
			} else if (this.errChild.length > 0) {
				this.examquestionSource = this.errChild;
				this.getquestionList();
			} else if (this.collectList.length > 0) {
				this.examquestionSource = this.collectList;
				this.getquestionList();
			} else if (uni.getStorageSync('questionList')) {
				this.examquestionSource = 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.examquestionSource = res.data;
							//  获取题目列表
							this.getquestionList();
						});
				} else {
					// 案例分析
					await this.$request
						.request({
							url: `/student/dailyParactice/get/case`,
							method: 'GET'
						})
						.then(res => {
							this.examquestionSource = 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.examquestionSource = res.rows;
						// 获取题目列表
						this.getquestionList();
					});
			}
		},


getquestionList() {
			this.list = this.handleQuestion(this.examquestionSource);
			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 {
					var obj = JSON.parse(str);
					if (typeof obj == 'object' && obj) {
						return true;
					} else {
						return false;
					}
				} catch (e) {
					console.log('error：' + 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 examp = {
					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 examp.options.E;
					delete examp.options.F;
				}
				if (!singleList[i].options.F) {
					delete examp.options.F;
				}
				if (isM) examp.isM = true;
				delist.push(examp);
			}
			// console.log(delist);
			return delist;
		},


openAside() {
			this.$forceUpdate();
			this.answerPanel = !this.answerPanel;
		},
		answerPanelClick(index) {
			this.current = index + 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;
		},
		viewAnalysis() {
			this.isFinal = false;
			this.current = 1;
			this.redoExam = 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.resultText = this.errorText;
					} else {
						this.tip = true;
						this.resultText = this.rightText;
						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.resultText = this.rightText;
						this.statusIcon = this.rightIcon;
						this.selectRight++;
					} else {
						this.tip = true;
						this.statusIcon = this.errorIcon;
						this.resultText = this.errorText;
					}
				}
			}
			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.resultText = this.rightText;
					this.statusIcon = this.rightIcon;
					this.selectRight++;
				} else {
					this.tip = true;
					this.statusIcon = this.errorIcon;
					this.resultText = this.errorText;
				}
			}
			if (this.currentQuestion.type === 5) {
				if (this.form.answer == [] || this.form.answer.length === 0) return;
				if (this.form.answer === this.currentQuestion.rightAnswer) {
					this.resultText = this.rightText;
					this.statusIcon = this.rightIcon;
					this.selectRight++;
				} else {
					this.tip = true;
					this.statusIcon = this.errorIcon;
					this.resultText = this.errorText;
				}
			}
			this.$forceUpdate();
		},
		getAnswerPanelColor(item) {
			if (this.tip && this.currentQuestion.rightAnswer === item.value) return '#68ff72';
			else if (this.tip && this.currentQuestion.rightAnswer !== item.value) return '#ff5555';
			else return '';
		},
		lookAnswerClick() {
			this.tip = !this.tip;
			this.checkAnswer();
		}

scss样式：


<style lang="scss" scoped>
$right: green;
$error: red;
$normal: #03a9f4ab;

.span_label /deep/ p {
	display: inline;
}
.container {
	max-width: 1200px;
	margin: auto;

	/deep/ .el-checkbox {
		display: block;
		margin-bottom: 32px;
	}
}

.aside {
	width: 330px;
	display: flex;
	position: fixed;
	right: -330px;
	top: 154px;
	transition: right 0.3s ease;
	z-index: 1001;
	background-color: white;
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

.openAside {
	right: 0 !important;
}

.answer {
	display: flex;

	.main {
		flex: 1;
	}

	&__type {
		display: flex;
		justify-content: space-between;
		padding-right: 20px;
		color: #333;

		.text {
			font-weight: bold;
			font-size: 16px;
			margin-bottom: 16px;
		}

		.progress {
			color: #999;

			&__content {
				font-size: 14px;
				font-weight: bold;
				margin-bottom: 20px;
			}

			span {
				font-size: 16px;
				font-weight: bold;
				color: #1890ff;
			}
		}
	}

	&__content {
		margin-bottom: 20px;
		font-weight: bold;
	}

	&__form {
	}
}

.el-radio-group {
	.el-radio {
		display: block;
		margin-top: 10px;
		width: 100%;
	}
}

.el-radio.is-bordered + .el-radio.is-bordered {
	margin-left: 0;
}

.card-title {
	font-weight: bold;
	color: #0d0e10;
	text-align: left;
	padding-left: 10px;
	font-size: 14px;
	border-left: #1e88e5 3px solid;
}

.answer-type {
	color: #666;
	margin-top: 46px;
	padding-bottom: 14px;
	border-bottom: solid 1px #ebecf2;
}

.picker-item {
	cursor: pointer;
	width: 38px;
	height: 38px;
	line-height: 38px;
	text-align: center;
	border: 1px solid #dddddd;
	border-radius: 5px;
	background: #ffffff;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: left;
	margin: 4px 6px;
	position: relative;
	overflow: hidden;

	&.error {
		background: $error;
		color: #fff;
	}

	&.right {
		background: $right;
		color: #fff;
	}

	&.normal {
		background: $normal;
		color: #fff;
	}
}

.bottom {
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
}

.tip-box {
	margin-top: 32px;
	padding: 16px;
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	position: relative;

	.title {
		color: #333;
		font-weight: bold;
	}

	.desc {
		margin-top: 16px;
		color: #7f7f7f;

		span {
			color: #333;
			font-weight: bold;
		}
	}

	.arrow {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
		top: -6px;
		left: 32px;
		margin-right: 3px;
		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: 6px;
			top: 1px;
			margin-left: -6px;
			border-top-width: 0;
			border-bottom-color: #fff;
		}
	}
}

.bread {
	padding: 20px 0;
}

.answer-container {
	background: initial;
}

.titleText {
	position: relative;
	display: inline-block;
	border: 1px solid #bfbfbf;
	width: 12px;
	height: 12px;
	text-indent: 0;
	margin-left: 3px;
	top: 2px;
}

.titleRight {
	background: $right;
}

.titleError {
	background: $error;
}

.titleAnswered {
	border: 1px solid #5a82ff;
	background: #5a82ff;
}

.titleDeText {
	font-size: 12px;
	color: #9cb2cd;
	text-indent: 0;
	margin-left: 5px;
}

.openAfix {
	font-size: 16px;
	margin-top: 20px;
	color: white;
	border-radius: 5px;
	width: 18px;
	height: 120px;
	display: none;
	background: #1e88e5;
	padding: 14px;
	justify-content: center;
	align-items: center;
}

@media screen and (max-width: 786px) {
	.bread {
		padding: 20px;
	}

	.openAfix {
		display: flex;
	}
}

.questTypeBox {
	height: 41px;
	line-height: 41px;
	padding: 0 14px;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.questionType {
	font-size: 13px;
	color: #666;
}

.questionAmount {
	font-size: 12px;
	color: #999;
}

.questionBox {
	background: #fff;
	padding: 14px;
}

.titleBox {
	color: #333;
	padding-bottom: 14px;
}

.titleMain {
	height: auto;
}

.titleContent {
	margin-bottom: 10px;
	font-size: 15px;
}

.titleImg {
	width: 100%;
	max-height: 200px;
	object-fit: contain;
	object-position: left;
}

.answerBox {
	padding: 14px 16px;
	background-color: #fff;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
}

.answerIcon {
	width: 20px;
	margin-right: 10px;
	position: relative;
}

.answerIcon img {
	width: 100%;
	margin-top: 2px;
}

.answerBoxText {
	flex: 1;
}

.answerBoxContent {
	font-weight: 500;
	font-size: 14px;
	color: #666;
	line-height: 22px;
	margin-bottom: 9px;
}

.answerBoxAnswers {
	flex: 1;
}

.resultCompareText {
	font-weight: 500;
	font-size: 14px;
	color: #666;
	line-height: 22px;
	margin-bottom: 9px;
}

.answerBoxAnswersList {
	flex: 1;
}

.answers {
	font-size: 14px;
	line-height: 22px;
	color: #666;
}

.questionAnalysis {
	padding: 14px;
	background-color: #fff;
	margin-top: 10px;
}

.analysisTitle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	color: #666;
	line-height: 22px;
	font-weight: 700;
	.analysis_AI {
		display: flex;
		align-items: center;
		img {
			width: 25px;
			height: 25px;
		}
	}
}

.analysisContent {
	padding: 6px 0 12px;
	border-bottom: 1px dashed #ddd;
	margin-bottom: 11px;
}

.bottomButton {
	position: fixed;
	bottom: 0;
	left: 0;
	height: 50px;
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	background: #fff;
	z-index: 1000;
}

.buttonGroup {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
}

.rButtonBox {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	display: flex;
	align-items: center;
	padding-right: 14px;
}

.lButton {
	flex: 1;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	justify-items: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-align-content: center;
	align-content: center;
}

.lButton img {
	width: 18px;
	height: 18px;
	text-align: center;
}

.lButton p {
	text-align: center;
	width: 100%;
	font-size: 11px;
	color: #666;
	line-height: 15px;
}

.rButton {
	height: 33px;
	width: 122px;
	border-radius: 74px;
	background-color: #0096ff;
	color: #fff;
	text-align: center;
	line-height: 33px;
	cursor: pointer;
}

.accomplish {
	padding-top: 45px;
	background: linear-gradient(#0096ff, rgb(159, 207, 241), rgba(254, 159, 16, 0) 90%);
	height: calc(100vh - 45px);
}

.detailBox {
	text-align: center;
	height: calc(100vh - 200px);
	border-radius: 10px;
	background-color: #fff;
	padding-top: 67px;
	margin: 0 20px;
}

.detailIcon {
	width: 99px;
	height: 99px;
	overflow: visible;
	opacity: 1;
	transition: opacity 0.5s ease-in-out 0s;
	background-color: transparent;
	margin: 0 auto 24px;
}

.detailTitle {
	width: 300px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
	margin-bottom: 20px;
}

.detailButton {
	text-align: center;
	width: 290px;
	height: 37px;
	border-radius: 74px;
	font-size: 14px;
}

.detailButtonTop {
	line-height: 37px;
	background-color: #0096ff;
	color: #fff;
	margin: 0 auto 24px;
}

.detailButtonBottom {
	border: 1px solid #0096ff;
	color: #20a3fd;
	line-height: 35px;
	margin: 0 auto;
}
</style>

<style lang="scss">
.u-radio {
	min-height: 41px;
	width: 100%;
	padding: 0 7px;
	box-sizing: border-box;
	background: #f6f6f6;
	margin-bottom: 14px;
	border-radius: 4px;
	font-size: 14px;
}

.u-radio__label {
	font-size: 14px !important;
	white-space: normal;
	padding: 7px;
}

.u-checkbox {
	width: 100%;
	min-height: 41px;
	padding: 0 7px;
	box-sizing: border-box;
	background: #f6f6f6;
	margin-bottom: 14px;
	border-radius: 4px;
	border: initial;
	display: flex;
	align-items: center;
	height: initial;
}

.u-checkbox__label {
	white-space: normal;
	padding: 7px;
	font-size: 14px !important;
}

.u-checkbox .is-checked {
	background-color: #e5f1ff;
}
</style>

答题卡作答之后不可以继续作答

选择题：

        uniapp答题小程序,小程序,前端,javascript,uni-app,微信小程序,vue.js                 uniapp答题小程序,小程序,前端,javascript,uni-app,微信小程序,vue.js

材料题：

       uniapp答题小程序,小程序,前端,javascript,uni-app,微信小程序,vue.js               uniapp答题小程序,小程序,前端,javascript,uni-app,微信小程序,vue.js

答题卡：

       uniapp答题小程序,小程序,前端,javascript,uni-app,微信小程序,vue.js                 uniapp答题小程序,小程序,前端,javascript,uni-app,微信小程序,vue.js文章来源地址https://www.toymoban.com/news/detail-780656.html

到了这里，关于uniapp实现微信小程序/H5答题卡的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 【完整项目】基于Python+Tkinter+OpenCV+Yolo+手写OCR的双模式答题卡识别软件的设计与实现

    2023年12月31日
    浏览(50)
  • 竞赛 机器视觉opencv答题卡识别系统

    竞赛 机器视觉opencv答题卡识别系统

    🔥 优质竞赛项目系列，今天要分享的是 🚩 答题卡识别系统 - opencv python 图像识别 该项目较为新颖，适合作为竞赛课题方向，学长非常推荐！ 🥇学长这里给一个题目综合评分(每项满分5分) 难度系数：3分 工作量：3分 创新点：3分 🧿 更多资料, 项目分享： https://gitee.com/da

    2024年02月07日
    浏览(43)
  • 竞赛保研 机器视觉opencv答题卡识别系统

    竞赛保研 机器视觉opencv答题卡识别系统

    🔥 优质竞赛项目系列，今天要分享的是 🚩 答题卡识别系统 - opencv python 图像识别 该项目较为新颖，适合作为竞赛课题方向，学长非常推荐！ 🥇学长这里给一个题目综合评分(每项满分5分) 难度系数：3分 工作量：3分 创新点：3分 🧿 更多资料, 项目分享： https://gitee.com/da

    2024年01月21日
    浏览(43)
  • 【实战精选】基于计算机视觉OpenCV的答题卡识别系统

    【实战精选】基于计算机视觉OpenCV的答题卡识别系统

    项目参考AAAI Association for the Advancement of Artificial Intelligence 研究背景与意义： 随着科技的不断发展，计算机视觉技术在各个领域中的应用越来越广泛。其中，基于计算机视觉的答题卡识别系统在教育领域中具有重要的意义。传统的答题卡批阅方式需要大量的人力和时间，容易

    2024年04月25日
    浏览(42)
  • OpenCV从入门到精通实战(四)——答题卡识别判卷系统

    OpenCV从入门到精通实战(四)——答题卡识别判卷系统

    基于OpenCV的答题卡识别系统，其主要功能是自动读取并评分答题卡上的选择题答案。系统通过图像处理和计算机视觉技术，自动化地完成了从读取图像到输出成绩的整个流程。下面是该系统的主要步骤和实现细节的概述： 1. 导入必要的库 系统首先导入了 numpy 、 argparse 、 i

    2024年04月22日
    浏览(32)

  • [Day 4 of 17]opencv扫描文稿并应用于考试测试答题卡

    https://pyimagesearch.com/2016/10/03/bubble-sheet-multiple-choice-scanner-and-test-grader-using-omr-python-and-opencv/?utm_source=Driputm_medium=Emailutm_campaign=CVandDLCrashCourseutm_content=email4 Bubble sheet multiple choice scanner and test grader using OMR, Python, and OpenCV 数据集至关重要，允许训练一个模型来准确识别和评分，对自

    2024年02月11日
    浏览(42)
  • opencv-python基于计算机视觉的答题卡识别及判分系统ocr

    opencv-python基于计算机视觉的答题卡识别及判分系统ocr

    python  django  mysql 基于计算机视觉的答题卡识别及判分系统设计与实现 通过查阅资料和文献在充分掌握OpenCV图像处理开源框架，采用Python开发语言、实现简单答题卡识别系统，其基本功能包括：1，对答题卡进行图像处理；2，识别答题卡的选择题选项；3，将选择题所选答案与

    2024年02月20日
    浏览(57)
  • 基于Python+OpenCV智能答题卡识别系统——深度学习和图像识别算法应用(含Python全部工程源码)+训练与测试数据集

    基于Python+OpenCV智能答题卡识别系统——深度学习和图像识别算法应用(含Python全部工程源码)+训练与测试数据集

    本项目基于Python和OpenCV图像处理库，在Windows平台下开发了一个答题卡识别系统。系统运用精巧的计算机视觉算法，实现了批量识别答题卡并将信息导出至Excel表格的功能。这一解决方案使得答题卡的判卷过程变得轻便、高效且准确。 首先，我们以Python语言作为开发基础，结合

    2024年02月10日
    浏览(55)
  • 采用uniapp实现的银行卡卡片, 支持H5和微信小程序

    采用uniapp实现的银行卡卡片, 支持H5和微信小程序

    采用uniapp-vue3实现的银行卡卡片 支持H5、微信小程序（其他小程序未测试过，可自行尝试） 可用于参考学习 可到插件市场下载尝试： https://ext.dcloud.net.cn/plugin?id=16736 使用示例

    2024年02月22日
    浏览(68)

  • uniapp实现H5、APP、微信小程序三端文件下载

    这里我使用了uniapp官方api uni.downloadFile 和 uni.openDocument APP使用了uniapp官方api uni.downloadFile 和 uni.saveImageToPhotosAlbum(OBJECT) 还有 uni.openDocument H5的方法比较简单可以直接使用window.open方法下载。即： 如果你的浏览器支持预览，就会自动打开预览文件，然后自己手动下载文件，不支

    2024年02月16日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包