Vue实现一个简单的答题案例（单选/多选）

<template>
	<div class="rootdiv">
		<div v-for="(item,index) in question" :key="index" v-show="index==idx" class="question">
			<view class="dttijd">
				<view class="jd_bt">
					当前进度
				</view>
				<view class="zxdajdt">
					<progress percent="60" stroke-width="6" activeColor="#5c93fe" border-radius="6px" />
				</view>
				<view class="jd_num">
					<text class="jd_dq">{
  
  {idx+1}}</text> / <text class="jd_zs">{
  
  {question.length}}</text>
				</view>
			</view>
			<view class="dati_nr">
				<view v-if="item.ismultiple">
					<uni-section title="多选" type="line">
						<view class="timu">{
  
  {item.name}}</view>
					</uni-section>
				</view>				
				<view v-else>
					<uni-section title="单选" type="line">
						<view class="timu">{
  
  {item.name}}</view>
					</uni-section>
				</view>				
				<div>
					<div :class="val.checked ? 'bgc' : ''" v-for="val in item.option" :key="val.id" class="list"
						@click="handleCilck(val)">
						{
  
  {val.letter}}.{
  
  {val.name}}
					</div>
				</div>				
			</view>						
		</div>
		
		<div class="title">
				<span class="answer" v-show="answerShow">答案：{
  
  {item.answer}}</span>				
		</div>			
		
		<div class="btn-box">
			 <button @click="back()" :style="idx == 0 ? 'background-color:#ccc;':''"
				:disabled="idx == 0 ? true : false">上一题</button> 
			<button @click="next()" :style="idx == question.length - 1 ? 'background-color:#ccc;':''"
				:disabled="idx == question.length - 1 ? true : false">下一题</button>
			<button @click="sumbit" style="background-color: rgb(250, 142, 0);color: aliceblue;">提交</button>
			<button v-show="isshow" @click="answerShow = true">查看答案</button>
		</div>
	</div>
</template>
<script>
	// 引入
	import CountDown from './components/time.vue'
	export default {
		data() {
			return {
				idx: 0,
				allSocre: 0,
				isshow: false,
				answerShow: false,
				ismultipleAnswer: [],
				question: [{
						id: 1,
						ismultiple: false,
						name: '十八大何时召开的?',
						answer: '2012年11月8日',
						score: 2,
						option: [{
								id: 1,
								name: '2012年11月8日',
								checked: false,
								letter: 'A'
							},
							{
								id: 2,
								name: '2012年11月15日',
								checked: false,
								letter: 'B'
							},
							{
								id: 3,
								name: '2012年12月18日',
								checked: false,
								letter: 'C'
							},
						],
					},
					{
						id: 2,
						ismultiple: false,
						name: '你喜欢吃什么?',
						answer: 'C',
						score: 2,
						option: [{
								id: 1,
								name: '香蕉',
								checked: false,
								letter: 'A'
							},
							{
								id: 2,
								name: '苹果',
								checked: false,
								letter: 'B'
							},
							{
								id: 3,
								name: '橘子',
								checked: false,
								letter: 'C'
							},
						],
					},
					{
						id: 3,
						ismultiple: false,
						name: '你的梦想是什么?',
						answer: 'B',
						score: 2,
						option: [{
								id: 1,
								name: '当一名程序员',
								checked: false,
								letter: 'A'
							},
							{
								id: 2,
								name: '当一名测试员',
								checked: false,
								letter: 'B'
							},
							{
								id: 3,
								name: '当一名运维',
								checked: false,
								letter: 'C'
							},
						],
					},
					{
						id: 4,
						ismultiple: true, //是否多选
						name: '这是一题多选吗?',
						answer: 'BC',
						score: 2,
						option: [ //选项
							{
								id: 1,
								name: '不是',
								checked: false,
								letter: 'A'
							},
							{
								id: 2,
								name: '是的',
								checked: false,
								letter: 'B'
							},
							{
								id: 3,
								name: '是的',
								checked: false,
								letter: 'C'
							},
						],
					},
					{
						id: 5,
						ismultiple: true, //是否多选
						name: '是多选吧?',
						answer: 'ABC',
						score: 2,
						option: [ //选项
							{
								id: 1,
								name: '是的',
								checked: false,
								letter: 'A'
							},
							{
								id: 2,
								name: '是的',
								checked: false,
								letter: 'B'
							},
							{
								id: 3,
								name: '是的',
								checked: false,
								letter: 'C'
							},
						],
					},
				],
				seconds: 0,

				abc: 20
			}
		},
		components: {
			CountDown
		},
		methods: {
			next() {
				this.idx++
			},
			 back() {
			 	this.idx--
			 },
			handleCilck(info) {
				let question = this.question[this.idx] //每题选项
				let option = this.question[this.idx].option //每一题题目的选项

				//选中添加样式
				option.forEach(item => {
					if (item.id == info.id) { //如果选中的与数据里面的相等就改变他的样式
						item.checked = !item.checked // 是否选中，取反
					} else if (!question.ismultiple) { //如果不是多选 只能选中一个 其他的都为false
						item.checked = false
					}
				});


				let isAnswer = info.letter //选中的答案
				let answer = this.question[this.idx].answer //题目中的答案

				//如果是多选
				if (question.ismultiple) {
					this.ismultipleAnswer = []
					option.forEach(item => {
						if (item.checked) { //将选中的push到 ismultipleAnswer 数组中
							this.ismultipleAnswer.push(item.letter)
						}
					});
					isAnswer = this.ismultipleAnswer.join('') //将ismultipleAnswer转为字符串 下面与答案比较
				}


				console.log('选中的答案', isAnswer);
				console.log('题目的答案', answer);


				//判断是否选正确，计算分数

				if (isAnswer == answer) { // 如果选的答案与题目答案相等,isOk 说明选对了
					this.question[this.idx].isOk = true
				} else {
					this.question[this.idx].isOk = false
				}

			},

			// 提交计算分数
			sumbit() {
				this.allSocre = 0 //每次计算总分先清0,，在计算
				let result = [] //定义选中的个数
				this.question.forEach(item => {
					//返回是否选中的数组
					let selsetArr = item.option.map(val => {
						if (val.checked) {
							return val.checked //map最终返回一个数组，返回 checked 的数组
						}
					})
					console.log('selsetArr', selsetArr);
					//这边是否包含true，包含 true 就push到result中
					const isTrue = selsetArr.includes(true) //如果包含返回true,否则返回false
					//这里判断一下,如果 isTrue 是 true，说明包含true 就说明选了
					if (isTrue) {
						result.push(isTrue) //如果选了，就push到 result 中
					}

					if (item.isOk) { //如果isOK 为 true 说明选了，计算分数
						this.allSocre += item.score
					}
				})
				//用选中 result 的长度  与 题目的长度比较 是否相当 不等就没选完
				if (result.length < this.question.length) {
					console.log('还有题目没做呢')
					return
				}

				setTimeout(() => {
					console.log('获得分数：' + this.allSocre)
					this.isshow = true
				}, 100);

			}
		}
	}
</script>
<style lang="less" scoped>
	.rootdiv{ padding:20rpx 20rpx;}
	
	.question {}

	.btn-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	// button {
	// 	margin-top: 15px;
	// 	margin-right: 10px;
	// 	outline: none;
	// 	background-color: rgb(255, 153, 98);
	// 	border: 0;
	// 	padding: 10px;
	// 	color: rgb(61, 61, 61);
	// 	border-radius: 5px;
	// }

	// button:active {
	// 	background-color: rgba(248, 161, 121, 0.664);
	// }

	.title {
		color: black;
		font-weight: 600;
		font-size: 18px;
		height: 30px;
		line-height: 30px;
	}





	.answer {
		color: brown;
		font-size: 16px;
		margin-left: 20px;
	}


	// 答题进度  border: 1px #ff0000 solid;
	.dtti_bt{ font-size:40rpx; color: #333;  width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
	.dttijd{ display: flex;padding: 30rpx 0 40rpx; align-self: center;}
	.jd_bt{ width: 120rpx;height: 60rpx; line-height: 60rpx; }
	.jd_num{ width: 80rpx;color: #999;height: 60rpx; line-height: 50rpx;text-align: right; }
	.zxdajdt{ flex: 1;padding-top:25rpx;box-sizing: border-box; }	
	.jd_dq{ font-size: 36rpx; color: #568ffe;}
	.jd_zs{ font-size:28rpx; color: #999; display: inline-block; padding-left:5rpx;}
	// 答题内容
	.dati_nr{box-shadow: 0 0 10px #e9e7e7; border-radius: 20rpx; padding:10rpx 25rpx;}
	.timu{font-size:32rpx; color: #333; }
	.list {
		margin-top: 10px;
		padding: 10px 5px;
		font-size: 16px;
		border: 1px #eee solid;
		border-radius:5px;
	}
	.bgc {
		color: #296ef0;
		background: rgba(41, 110, 240, 0.12);
		border: 1px solid rgba(41, 110, 240, 0.8);
	}

</style>

Vue实现一个简单的答题案例（单选/多选） - ℡北瞳少年、 - 博客园