vue+vant制作一个做题页面（包含选择题，判断题，填空题，简答题）_vue实现选择题计分

• 作者简介：一名后端开发人员，每天分享后端开发以及人工智能相关技术，行业前沿信息，面试宝典。
• 座右铭：未来是不可确定的，慢慢来是最快的。
• 个人主页：极客李华-CSDN博客
• 合作方式：私聊+
• 这个专栏内容：BAT等大厂常见后端java开发面试题详细讲解，更新数目100道常见大厂java后端开发面试题。
• 我的CSDN社区：https://bbs.csdn.net/forums/99eb3042821a4432868bb5bfc4d513a8
• 微信公众号，抖音，b站等平台统一叫做：极客李华，加入微信公众号领取各种编程资料，加入抖音，b站学习面试技巧，职业规划

vue+vant制作一个做题页面（包含选择题，判断题，填空题，简答题）

本文讲解如何结合vue+vant制作一个做题页面里面包含选择题，判断题，填空题，简答题，还包含计算成绩的功能。

如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历等内容，让大家更好学习编程，我的抖音，B站也叫极客李华。大家喜欢也可以关注一下

代码讲解

效果展示

完整代码如下：

<template>
	<div>
		<!-- 标题栏 -->
		<van-nav-bar title="题目测试" left-text="返回" left-arrow @click-left="onClickLeft" />

		<!-- 题目列表 -->
		<van-list v-if="questions.length > 0">
			<div class="question-card" v-for="(question, index) in questions" :key="question.id">
				<van-card
						  :title="index + 1 + '. ' + question.content"
						  :class="{ 'bg-red': showAnswer[question.id] && selectedAnswers[question.id] !== question.answer }">
					<!-- 根据题目类型进行渲染 -->
					<template v-if="question.questionType === '选择题'" #desc>
						<van-radio-group v-model="selectedAnswers[question.id]">
							<van-radio :name="'A'">A.{{ question.optionA }}</van-radio>
							<van-radio :name="'B'">B.{{ question.optionB }}</van-radio>
							<van-radio :name="'C'">C.{{ question.optionC }}</van-radio>
							<van-radio :name="'D'">D.{{ question.optionD }}</van-radio>
						</van-radio-group>
            <!-- 显示正确答案 -->
        <p class="answer" v-if="question && showAnswer[question.id]">正确答案：<span class="correct">{{ question.answer }}</span></p>
					</template>

					<template v-else-if="question.questionType === '判断题'" #desc>
						<van-radio-group v-model="selectedAnswers[question.id]" :direction="isVertical ? 'vertical' : 'horizontal'">
							<van-radio :name="'true'">正确</van-radio>
							<van-radio :name="'false'">错误</van-radio>
						</van-radio-group>
            <!-- 显示正确答案 -->
        <p class="answer" v-if="question && showAnswer[question.id]">正确答案：<span class="correct">{{ question.answer }}</span></p>
					</template>

					<template v-else-if="question.questionType === '简答题'" #desc>
						<van-field v-model="selectedAnswers[question.id]" :rows="3" placeholder="请输入简答题答案" />
            <!-- 显示正确答案 -->
        <p class="answer" v-if="question && showAnswer[question.id]">正确答案：<span class="correct">{{ question.answer }}</span></p>
					</template>

					<template v-else-if="question.questionType === '填空题'" #desc>
						<van-field
								   v-model="selectedAnswers[question.id]"
								   label-width="80px"
								   placeholder="请输入填空题答案">
							<template #label>请填写答案：</template>
						</van-field>
            <!-- 显示正确答案 -->
        <p class="answer" v-if="question && showAnswer[question.id]">正确答案：<span class="correct">{{ question.answer }}</span></p>
					</template>        					
				</van-card>
			</div>
		</van-list>

		<!-- 无数据占位符 -->
		<van-empty v-else />

		<!-- 提交答案按钮 -->
		<van-button ref="submitButton" block type="primary" :disabled="isSubmitting" @click="onSubmit">{{ submitBtnText }}</van-button>
	</div>
</template>

<script>
	import axios from "axios";
	import { showDialog } from 'vant';
	export default {
	  data() {
	    return {
	      questions: [], // 题目列表
	      selectedAnswers: {}, // 用户选择的答案
	      showAnswer: {}, // 是否显示答案
	      isVertical: false, // 是否垂直布局选项（主要用于选择题）
	      currentQuestionIndex: 0, // 当前问题的索引
	      totalScore: 0, // 总分数
	      isSubmitting: false, // 是否正在提交答案
	    };
	  },
	  computed: {
	    submitBtnText() {
	      return this.isSubmitting ? '正在提交' : '提交'
	    }
	  },
	  methods: {
	    // 返回按钮点击事件处理函数
	    onClickLeft() {
	      this.$router.push("/my");
	    },
	
	    // 提交答案的代码
	    onSubmit() {
	      let totalCount = Object.keys(this.selectedAnswers).length;
	      let correctCount = 0;
	      let score = 0;
	
	      // 禁用提交按钮
	      this.isSubmitting = true
	
	      // 计算总得分
	      for (const question of this.questions) {
	        const userAnswer = this.selectedAnswers[question.id];
	        if (userAnswer === question.answer) {
	          correctCount++;
	          score += question.score;
	        }
	        // 显示正确答案
	        this.showAnswer[question.id] = true;
	      }
	      this.totalScore = score;
	
	      // 使用vant-ui组件弹出对话框显示结果
	  const message = `你选择了 ${totalCount} 道题，答对了 ${correctCount} 道题。总得分：${this.totalScore} 分。`;
	
	  showDialog({
	    title: "考试结束啦>_<",
	    message: message,
	  }).then(() => {
	    // on close
	  });
	
	  // 禁用提交按钮
	  this.isSubmitting = true
	  
	  // 显示正确答案
	  for (const question of this.questions) {
	    this.showAnswer[question.id] = true;
	  }
    // console.log("正确答案集合")
    // for (let i = 0; i < this.questions.length; ++ i){
    //   console.log(this.questions[i].answer)
    // }

    console.log("用户选择的正确答案集合")
    console.log(this.selectedAnswers)
	},
	
	
	// 获取问题分数
	getQuestionScore(questionId) {
	  const userAnswer = this.selectedAnswers[questionId];
	  const question = this.questions.find((q) => q.id === questionId);
	  return userAnswer === question.answer ? question.score : 0;
	},
	
	// 显示当前问题
	showQuestion() {
	  // 获取当前问题
	  const question = this.questions[this.currentQuestionIndex];
	
	  // 根据题目类型渲染问题
	  switch (question.questionType) {
	    case "选择题":
	      this.isVertical = false;
	      break;
	    case "判断题":
	      this.isVertical = true;
	      break;
	  }
	
	  // 显示问题并将提交按钮重新启用
	  this.$refs.submitButton.disable = false;
	},
	},
	mounted() {
	// 获取题目列表
	axios
	.get("http://localhost:8083/questions")
	.then((res) => {
	this.questions = res.data.data;
	
	    // 对问题数据进行按题目类型排序
	    this.questions.sort((a, b) => {
	      const typeOrder = { "选择题": 0, "判断题": 1, "填空题": 2, "简答题": 3 };
	      return typeOrder[a.questionType] - typeOrder[b.questionType];
	    });
	
	    // 显示第一个问题
	    this.showQuestion();
	  })
	  .catch((error) => {
	    console.log(error);
	  });
	},
	};
</script>

<style>
	.answer {
	color: red;
	margin-bottom: 0;
	}
	.correct {
	color: green;
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192

如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历等内容，让大家更好学习编程，我的抖音，B站也叫极客李华。大家喜欢也可以关注一下