devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：AllinToyou | 2024-04-29 02:46:06

赞

踩

uniapp答题小程序

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

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

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

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

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

  1. <template>
  2. 	<view style="background: #f9f9f9;min-height: 100%">
  3. 		<view v-if="!isFinal">
  4. 			<view class="questTypeBox">
  5. 				<view class="questionType">{{ questionType }}题</view>
  6. 				<view class="questionAmount">
  7. 					<view>
  8. 						<span style="color: #1e88e5">{{ current }}</span>
  9. 						|{{ list.length }}
  10. 					</view>
  11. 				</view>
  12. 			</view>
  13. 			<view class="questionBox">
  14. 				<template v-if="currentQuestion.isM" style="margin: 10px 0;">
  15. 					<view class="titleBox">
  16. 						<view class="titleMain"><view class="titleContent" v-html="materialList[currentQuestion.mid]"></view></view>
  17. 					</view>
  18. 				</template>
  19. 				<view class="titleBox">
  20. 					<view class="titleMain"><view class="titleContent" v-html="currentQuestion.title"></view></view>
  21. 				</view>
  22. 				<view class="answersBox">
  23. 					<view v-if="currentQuestion.type === 1">
  24. 						<u-radio-group :disabled="currentQuestion.stuAnswer == '' ? false : true" v-if="isAnswer" v-model="form.answer" placement="column" @change="handleSubmit">
  25. 							<u-radio :bgcolor="getBackgroundColor(item)" v-for="(item, index) in currentQuestion.formOptions || []" :key="index" :name="item.value" border>
  26. 								<span style="width: 100%;height: 100%;" :style="[getBackgroundColor(item)]" class="span_label" v-html="item.label"></span>
  27. 							</u-radio>
  28. 						</u-radio-group>
  29. 					</view>
  30. 					<template v-else-if="currentQuestion.type === 5">
  31. 						<u-radio-group :disabled="currentQuestion.stuAnswer == '' ? false : true" v-if="isAnswer" v-model="form.answer" placement="column" @change="handleSubmit">
  32. 							<u-radio name="1" label="正确" :bgcolor="getBackgroundColor(1)" border></u-radio>
  33. 							<u-radio name="0" label="错误" :bgcolor="getBackgroundColor(0)" border></u-radio>
  34. 						</u-radio-group>
  35. 					</template>
  36. 					<template v-else-if="currentQuestion.type === 2">
  37. 						<u-checkbox-group :disabled="currentQuestion.stuAnswer == '' ? false : true" v-model="form.answer" placement="column">
  38. 							<u-checkbox
  39. 								shape="circle"
  40. 								border
  41. 								v-for="(item, index) in currentQuestion.formOptions || []"
  42. 								:key="index"
  43. 								:name="item.value"
  44. 								:label="item.label"
  45. 							></u-checkbox>
  46. 						</u-checkbox-group>
  47. 						<u-button style="width: 100%;height: 40px;font-size: 14px;font-weight: 500" round size="medium" type="primary" @click="handleSubmit">提交答案</u-button>
  48. 					</template>
  49. 					<template v-else-if="currentQuestion.type === 3">
  50. 						<u--textarea :disabled="currentQuestion.stuAnswer == '' ? false : true" v-if="isAnswer" v-model="form.answer" :rows="3" placeholder="请输入内容" />
  51. 						<u-button
  52. 							style="width: 100%;height: 40px;font-size: 14px;font-weight: 500;margin-top: 10px;margin-bottom: 50px;"
  53. 							round
  54. 							size="medium"
  55. 							type="primary"
  56. 							@click="handleSubmit"
  57. 						>
  58. 							提交答案
  59. 						</u-button>
  60. 					</template>
  61. 					<template v-else-if="currentQuestion.type === 6">
  62. 						<u--textarea :disabled="currentQuestion.stuAnswer == '' ? false : true" v-if="isAnswer" v-model="form.answer" :rows="3" placeholder="请输入内容" />
  63. 						<u-button
  64. 							style="width: 100%;height: 40px;font-size: 14px;font-weight: 500;margin-top: 10px;margin-bottom: 50px;"
  65. 							round
  66. 							size="medium"
  67. 							type="primary"
  68. 							@click="handleSubmit"
  69. 						>
  70. 							提交答案
  71. 						</u-button>
  72. 					</template>
  73.  
  74. 					<template v-if="currentQuestion.type === 4">
  75. 						<u-radio-group :disabled="currentQuestion.stuAnswer == '' ? false : true" v-if="isAnswer" v-model="form.answer" placement="column" @change="handleSubmit">
  76. 							<u-radio name="1" label="正确" :style="[getBackgroundColor(1)]" border></u-radio>
  77. 							<u-radio name="0" label="错误" :style="[getBackgroundColor(0)]" border></u-radio>
  78. 						</u-radio-group>
  79. 					</template>
  80.  
  81. 					<!-- 按钮区域 -->
  82. 				</view>
  83. 			</view>
  84. 			<view class="answerBox" v-if="tip">
  85. 				<view style="display: flex;flex: 1;" v-if="currentQuestion.type !== 3 && currentQuestion.type !== 6">
  86. 					<view class="answerIcon" v-if="currentQuestion.type === 1 || currentQuestion.type === 2">
  87. 						<img :src="statusIcon" style="position: absolute;left: 0;top: 0;height:20px" />
  88. 					</view>
  89. 					<view class="answerBoxAnswers">
  90. 						<view class="resultCompareText" v-if="currentQuestion.type === 1 || currentQuestion.type === 2">{{ resultText }}</view>
  91. 						<view style="display: flex;flex: 1">
  92. 							<view class="answerBoxAnswersList">
  93. 								<view class="answers">正确答案</view>
  94. 								<view class="answers">
  95. 									{{
  96. 										outputList(currentQuestion.rightAnswer) == 1
  97. 											? '正确'
  98. 											: outputList(currentQuestion.rightAnswer) == 0
  99. 											? '错误'
  100. 											: outputList(currentQuestion.rightAnswer)
  101. 									}}
  102. 								</view>
  103. 							</view>
  104. 							<view class="answerBoxAnswersList">
  105. 								<view class="answers">您的答案</view>
  106. 								<view class="answers">
  107. 									{{
  108. 										outputList(currentQuestion.stuAnswer) == 1
  109. 											? '正确'
  110. 											: outputList(currentQuestion.stuAnswer) == 0
  111. 											? '错误'
  112. 											: outputList(currentQuestion.stuAnswer)
  113. 									}}
  114. 								</view>
  115. 							</view>
  116. 						</view>
  117. 					</view>
  118. 				</view>
  119. 				<view v-if="currentQuestion.type === 3">
  120. 					<view class="answerBoxAnswers">
  121. 						<view style="display: flex;flex: 1">
  122. 							<view class="answerBoxAnswersList">
  123. 								<view class="answers">正确答案</view>
  124. 								<view
  125. 									style="white-space: pre-wrap;"
  126. 									class="answers"
  127. 									v-for="(answer, index) in currentQuestion.rightAnswer"
  128. 									:key="index"
  129. 									v-show="answer != ''"
  130. 									v-html="answer"
  131. 								></view>
  132. 							</view>
  133. 						</view>
  134. 					</view>
  135. 				</view>
  136. 				<view v-if="currentQuestion.type === 6">
  137. 					<view class="answerBoxAnswers">
  138. 						<view style="display: flex;flex: 1">
  139. 							<view class="answerBoxAnswersList">
  140. 								<view class="answers">正确答案</view>
  141. 								<view class="answers" v-for="(answer, index) in currentQuestion.rightAnswer" :key="index" v-show="answer != ''">{{ answer }};</view>
  142. 							</view>
  143. 						</view>
  144. 					</view>
  145. 				</view>
  146. 			</view>
  147. 			<view class="questionAnalysis" v-if="tip">
  148. 				<view class="analysisTitle">
  149. 					答案解析
  150. 					<view class="analysis_AI" @click="toAi">
  151. 						<img src="https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/icon_4a6pvlsjrq8/%E6%9C%BA%E5%99%A8%E4%BA%BA.png" alt="" />
  152. 						AI智能解析
  153. 					</view>
  154. 				</view>
  155. 				<view style="white-space: pre-wrap;" class="analysisContent" v-html="currentQuestion.analysis"></view>
  156. 			</view>
  157. 			<view style="height: 20vh;width: 100%;"></view>
  158. 			<view class="bottomButton">
  159. 				<view class="buttonGroup">
  160. 					<view class="lButton" @click="lookAnswerClick()">
  161. 						<img src="https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A32%3A34checkAnswer.svg" />
  162. 						<p>查看答案</p>
  163. 					</view>
  164. 					<view class="lButton" @click="addCollection">
  165. 						<van-icon :name="collectIds.includes(currentQuestion.id) ? 'star' : 'star-o'" />
  166. 						<p>收藏</p>
  167. 					</view>
  168. 					<view class="lButton" @click="openAside">
  169. 						<img src="https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A32%3A57questionsCard.svg" />
  170. 						<p>答题卡</p>
  171. 					</view>
  172. 					<view class="lButton" @click="handlePreNextClick(-1)">
  173. 						<img src="https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A33%3A28up.svg" />
  174. 						<p>上一题</p>
  175. 					</view>
  176. 					<view class="rButtonBox">
  177. 						<view class="rButton" @click="handlePreNextClick(1)">{{ list.length === current ? '完成' : '下一题' }}</view>
  178. 					</view>
  179. 				</view>
  180. 			</view>
  181. 			<view class="aside" :class="{ openAside: answerPanel }">
  182. 				<view style="padding: 20px;border-radius: 5px;">
  183. 					<view style="display: flex;justify-content: space-between">
  184. 						<view class="card-title">答题卡</view>
  185. 						<view>
  186. 							<span class="titleDeText">
  187. 								未做
  188. 								<i class="titleText"></i>
  189. 							</span>
  190. 							<span class="titleDeText">
  191. 								已做
  192. 								<i class="titleText titleAnswered"></i>
  193. 							</span>
  194. 							<span class="titleDeText">
  195. 								正确
  196. 								<i class="titleText titleRight"></i>
  197. 							</span>
  198. 							<span class="titleDeText">
  199. 								错误
  200. 								<i class="titleText titleError"></i>
  201. 							</span>
  202. 						</view>
  203. 					</view>
  204. 					<view style="padding: 20px 0 10px 0;overflow-y:auto;min-height: 260px;max-height: 400px;">
  205. 						<view
  206. 							v-for="(item, index) in list"
  207. 							:key="index"
  208. 							:class="{
  209. 								'picker-item': true,
  210. 								error: !answerEqual(item.stuAnswer, item.rightAnswer, item.type) && item.stuAnswer.length > 0,
  211. 								right: answerEqual(item.stuAnswer, item.rightAnswer, item.type) && item.stuAnswer.length > 0,
  212. 								normal: answerEqual(item.type, 3) && item.stuAnswer.length > 0
  213. 							}"
  214. 							@click="answerPanelClick(index)"
  215. 						>
  216. 							{{ index + 1 }}
  217. 						</view>
  218. 					</view>
  219. 				</view>
  220. 			</view>
  221. 		</view>
  222. 		<view class="accomplish" v-if="isFinal">
  223. 			<view class="detailBox">
  224. 				<img class="detailIcon" src="https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A32%3A10accomplish.png" />
  225. 				<view class="detailTitle">答题完成</view>
  226. 				<view class="detailTitle">{{ examName }}</view>
  227. 				<view class="detailTitle">正确率{{ (right / list.length).toFixed(2) * 100 }}%</view>
  228. 				<view class="detailButton detailButtonTop" @click="viewAnalysis">查看解析</view>
  229. 				<view class="detailButton detailButtonBottom" @click="goBack">返回列表</view>
  230. 			</view>
  231. 		</view>
  232. 	</view>
  233. </template>

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

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

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

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

data中的数据：

  1. 	data() {
  2. 		const type = Number(this.$route == undefined ? 1 : this.$route.query.type);
  3. 		return {
  4. 			examquestionSource: {},
  5. 			tokenDetail: {},
  6. 			type,
  7. 			isEqual,
  8. 			form: {
  9. 				answer: [''],
  10. 				questionId: ''
  11. 			},
  12. 			radio: 3,
  13. 			tip: type === 2,
  14. 			list: [],
  15. 			current: 1,
  16. 			submitLoading: false,
  17. 			loading: false,
  18. 			examName: this.$route == undefined ? '' : this.$route.query.name,
  19. 			answerPanel: false,
  20. 			redoExam: false,
  21. 			showAnalysis: false,
  22. 			statusIcon: 'https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A33%3A25rightn.png',
  23. 			rightIcon: 'https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A33%3A25rightn.png',
  24. 			errorIcon: 'https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A32%3A49errorn.png',
  25. 			resultText: '',
  26. 			rightText: '回答正确',
  27. 			errorText: '回答错误',
  28. 			isFinal: false,
  29. 			materialList: [],
  30. 			strategy: '',
  31. 			collectionList: [],
  32. 			collectIds: [],
  33. 			everyDay: '',
  34. 			selectRight: 0,
  35. 			right: 0,
  36. 			error: 0,
  37. 			submitList: [],
  38. 			// 错题
  39. 			errChild: [],
  40. 			paperId: '',
  41. 			collectList: [],
  42. 			imitateTest: uni.getStorageSync('imitateTest')
  43. 			// 	// 0 综合知识
  44. 			// 	// 1 案例分析
  45. 		};
  46. 	},

 计算属性 computed：

  1. computed: {
  2. 		currentQuestion() {
  3. 			return this.getCurrentQuestion();
  4. 		},
  5. 		questionType() {
  6. 			return {
  7. 				1: '单项选择',
  8. 				2: '多项选择',
  9. 				3: '问答',
  10. 				4: '材料',
  11. 				5: '判断',
  12. 				6: '填空'
  13. 			}[this.currentQuestion.type || 3];
  14. 		},
  15. 		isAnswer() {
  16. 			return this.type === 1;
  17. 		},
  18. 		getBackgroundColor() {
  19. 			return function(item = {}) {
  20. 				if (this.currentQuestion.type == 1) {
  21. 					if (this.tip && this.currentQuestion.rightAnswer === item.value && item.value === this.currentQuestion.stuAnswer)
  22. 						return {
  23. 							backgroundColor: 'rgb(168 255 173)'
  24. 						};
  25. 					else if (this.tip && this.currentQuestion.rightAnswer !== item.value && item.value === this.currentQuestion.stuAnswer)
  26. 						return {
  27. 							backgroundColor: '#ffbaba'
  28. 						};
  29. 					else if (this.tip && this.currentQuestion.rightAnswer == item.value)
  30. 						return {
  31. 							backgroundColor: 'rgb(168 255 173)'
  32. 						};
  33. 					else return {};
  34. 				}
  35. 				if (this.currentQuestion.type == 4) {
  36. 					if (this.tip && parseInt(this.currentQuestion.rightAnswer) === item)
  37. 						return {
  38. 							backgroundColor: 'rgb(168 255 173)'
  39. 						};
  40. 					else if (this.tip && this.currentQuestion.rightAnswer != item)
  41. 						return {
  42. 							backgroundColor: '#ffbaba'
  43. 						};
  44. 					else return {};
  45. 				}
  46. 				if (this.currentQuestion.type == 5) {
  47. 					let YorN = '';
  48. 					if (item == 0) {
  49. 						YorN = '错误';
  50. 					} else {
  51. 						YorN = '正确';
  52. 					}
  53. 					console.log(this.currentQuestion.rightAnswer[0] === YorN);
  54. 					if (this.tip && this.currentQuestion.rightAnswer[0] === YorN)
  55. 						return {
  56. 							backgroundColor: 'rgb(168 255 173)'
  57. 						};
  58. 					else if (this.tip && this.currentQuestion.rightAnswer[0] != YorN)
  59. 						return {
  60. 							backgroundColor: '#ffbaba'
  61. 						};
  62. 					else return {};
  63. 				}
  64. 			};
  65. 		},
  66. 		answerEqual() {
  67. 			return function(a, b, c) {
  68. 				if (c == 1) {
  69. 					return a[0] === b[0];
  70. 				} else if (typeof a === 'object' && typeof b === 'object') {
  71. 					return JSON.stringify(a) === JSON.stringify(b);
  72. 				}
  73. 				return a === b;
  74. 			};
  75. 		}
  76. 	},

监听数据变化 watch:

  1. watch: {
  2. 		form: {
  3. 			handler(old, news) {},
  4. 			deep: true
  5. 		},
  6. 		currentQuestion(value) {//题目信息
  7. 			if (value.type === 1) {
  8. 				if (value.stuAnswer.length > 0) {
  9. 					this.form.answer = value.stuAnswer;
  10. 					this.checkAnswer();
  11. 				} else {
  12. 					this.form.answer = '';
  13. 				}
  14. 			}
  15. 			if (value.type === 2) {
  16. 				if (value.stuAnswer.length > 0) {
  17. 					this.form.answer = value.stuAnswer;
  18. 					this.checkAnswer();
  19. 				} else this.form.answer = [];
  20. 			}
  21. 			if (value.type === 3) {
  22. 				this.form.answer = value.stuAnswer.length > 0 ? value.stuAnswer : '';
  23. 				if (value.stuAnswer.length > 0) this.checkAnswer();
  24. 			}
  25. 			if (value.type === 6) {
  26. 				this.form.answer = value.stuAnswer.length > 0 ? value.stuAnswer : '';
  27. 				if (value.stuAnswer.length > 0) this.checkAnswer();
  28. 			}
  29. 			if (value.type === 4) {
  30. 				// console.log(value);
  31. 				if (value.stuAnswer.length > 0) {
  32. 					this.form.answer = value.stuAnswer;
  33. 					this.checkAnswer();
  34. 				} else this.form.answer = '';
  35. 			}
  36. 			if (value.type === 5) {
  37. 				console.log(value);
  38. 				console.log(value.stuAnswer);
  39. 				if (value.stuAnswer.length > 0) {
  40. 					this.form.answer = value.stuAnswer;
  41. 					this.checkAnswer();
  42. 				} else this.form.answer = '';
  43. 			}
  44. 		}
  45. 	},

onLoad()生命周期:

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

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

methods方法：

  1.  
  2. 		toAi() {
  3. 			// 跳转文心一言，并携带题目。
  4. 			uni.navigateTo({
  5. 				url: `/pages/wenxin/index?question=${this.currentQuestion.title}`
  6. 			});
  7. 		},
  8. 		// 获取收藏列表
  9. 		async getCollectionList(id) {
  10. 			this.collectIds = [];
  11. 			this.collectionList = [];
  12. 			let res = await this.$request.request({
  13. 				url: `/student/collect`,
  14. 				method: 'GET'
  15. 			});
  16. 			let collectionList = res.data;
  17. 			for (let collect of collectionList) {
  18. 				if (collect.paperId == this.currentQuestion.paperId) {
  19. 					this.collectionList = collect.collectChildren;
  20. 					for (let question of collect.collectChildren) {
  21. 						this.collectIds.push(question.questionId);
  22. 					}
  23. 				}
  24. 			}
  25. 		},
  26. 		// 收藏
  27. 		async addCollection() {
  28. 			// 如果获取的收藏列表中包含点击的题目id，就取消收藏
  29. 			if (this.collectIds.includes(this.currentQuestion.id)) {
  30. 				await this.$request
  31. 					.request({
  32. 						url: `/student/collect?questionId=${this.currentQuestion.id}`,
  33. 						method: 'DELETE'
  34. 					})
  35. 					.then(res => {
  36. 						// 重新获取收藏列表
  37. 						this.getCollectionList();
  38. 						// 提示
  39. 						uni.showToast({
  40. 							title: '取消收藏',
  41. 							icon: 'none',
  42. 							duration: 1500
  43. 						});
  44. 					});
  45. 			} else {
  46. 				// 否则添加收藏
  47. 				await this.$request
  48. 					.request({
  49. 						url: `/student/collect`,
  50. 						method: 'POST',
  51. 						data: {
  52. 							questionId: this.currentQuestion.id,
  53. 							paperId: this.currentQuestion.paperId
  54. 						}
  55. 					})
  56. 					.then(res => {
  57. 						// 重新获取收藏列表
  58. 						this.getCollectionList();
  59. 						// 提示
  60. 						uni.showToast({
  61. 							title: '收藏成功',
  62. 							icon: 'none',
  63. 							duration: 1500
  64. 						});
  65. 					});
  66. 			}
  67. 		},
  68. 		// 下一题
  69. 		async handlePreNextClick(p) {
  70. 			if (this.list.length === this.current) {
  71. 				if (this.right + this.error == this.list.length) {
  72. 					// 提交答案
  73. 					this.isFinal = true;
  74. 					if (this.everyDay == true) {
  75. 						// 如果每日一练还要添加每日一练记录
  76. 						this.postDays();
  77. 					}
  78. 				} else {
  79. 					// 最后一道题
  80. 					uni.showToast({
  81. 						title: `当前最后一题，您还有${this.list.length - (this.right + this.error)}道题目未作答`,
  82. 						icon: 'none',
  83. 						duration: 1500
  84. 					});
  85. 				}
  86. 			}
  87. 			if (p === 1 && (!this.isAnswer || this.currentQuestion.type === 3)) {
  88. 				await this.submit();
  89. 			}
  90. 			if (this.isAnswer) {
  91. 				this.tip = false;
  92. 			}
  93. 			// 查看解析
  94. 			if (this.redoExam === true) this.tip = true;
  95. 			// current为题目序号
  96. 			this.current = Math.max(1, Math.min(this.current + p, this.list.length));
  97. 			this.checkAnswer();
  98. 			if (this.redoExam === false) this.tip = false;
  99. 		},
  100. 		// 添加每日一练记录
  101. 		postDays() {
  102. 			this.$request
  103. 				.request({
  104. 					url: `/student/dailyParactice?accuracy=${(this.selectRight / this.list.length).toFixed(2)}`,
  105. 					method: 'POST'
  106. 				})
  107. 				.then(res => {
  108. 					// console.log(res);
  109. 					// 显示返回结果
  110. 					uni.showToast({
  111. 						title: res.msg,
  112. 						icon: 'none',
  113. 						duration: 2000
  114. 					});
  115. 					// 等待一下之后跳转首页
  116. 					setTimeout(function() {
  117. 						uni.reLaunch({
  118. 							url: '/pages/chapters/index'
  119. 						});
  120. 					}, 2000);
  121. 				});
  122. 		},
  123. 		getCurrentQuestion() {
  124. 			const data = _.cloneDeep(this.list).find((_, i) => i === this.current - 1) || {};
  125. 			data.formOptions = Object.entries(data.options || {}).map(([key, value]) => ({
  126. 				label: key + '、' + value,
  127. 				value: key
  128. 			}));
  129. 			if (data.type === 1 && Array.isArray(data.rightAnswer) && data.rightAnswer.length > 0) {
  130. 				data.rightAnswer = data.rightAnswer[0];
  131. 			}
  132. 			return data;
  133. 		},
  134.  
  135. 		// 答题记录
  136. 		async noteTitle(correct, userAnswer) {
  137. 			// 缓存中的course，在点击课程的时候会保存课程的信息在缓存中。
  138. 			if (uni.getStorageSync('course')) {
  139. 				var course = JSON.parse(uni.getStorageSync('course'));
  140. 				// 添加刷题记录到数据库
  141. 				await this.$request
  142. 					.request({
  143. 						url: `/student/pascal/count`,
  144. 						method: 'POST',
  145. 						data: {
  146. 							courseId: course.coursesId, //课程id
  147. 							courseName: course.paperName, //课程名称
  148. 							pascalId: this.currentQuestion.id, //试题ID
  149. 							answer: userAnswer, //用户作答
  150. 							isRigth: correct, //是否正确
  151. 							paperId: this.currentQuestion.paperId //套题id
  152. 						}
  153. 					})
  154. 					.then(res => {
  155. 						// console.log('答题记录', res);
  156. 					});
  157. 			}
  158. 		},
  159. 		handleSubmit() {
  160. 			let isRight = false;
  161. 			if (this.currentQuestion.type === 1 || this.currentQuestion.type === 2) {
  162. 				this.list[this.current - 1].stuAnswer = this.form.answer;
  163. 				if (this.currentQuestion.type === 2) this.form.answer = this.form.answer.sort((a, b) => a.charCodeAt() - b.charCodeAt());
  164. 				if (this.outputList(this.currentQuestion.rightAnswer, 'this.currentQuestion.rightAnswer') !== this.outputList(this.form.answer, 'this.form.answer')) {
  165. 					this.tip = true;
  166. 					this.statusIcon = this.errorIcon;
  167. 					this.resultText = this.errorText;
  168. 					this.currentQuestion.isRight = false;
  169. 					let answer = [];
  170. 					answer.push(this.currentQuestion.stuAnswer);
  171. 					this.noteTitle(0, JSON.stringify(answer));
  172. 					if (!this.submitList.includes(this.currentQuestion.id)) {
  173. 						this.submitList.push(this.currentQuestion.id);
  174. 						this.error++;
  175. 					}
  176. 				} else {
  177. 					this.resultText = this.rightText;
  178. 					this.statusIcon = this.rightIcon;
  179. 					this.currentQuestion.isRight = true;
  180.  
  181. 					if (this.current !== this.list.length) {
  182. 						uni.showToast({
  183. 							title: '回答正确，正在跳转第' + (this.current + 1) + '题',
  184. 							icon: 'none',
  185. 							duration: 2000
  186. 						});
  187. 					}
  188. 					let answer = [];
  189. 					answer.push(this.currentQuestion.stuAnswer);
  190. 					this.noteTitle(1, JSON.stringify(answer));
  191. 					if (!this.submitList.includes(this.currentQuestion.id)) {
  192. 						this.submitList.push(this.currentQuestion.id);
  193. 						this.right++;
  194. 					}
  195. 					let _this = this;
  196. 					setTimeout(function() {
  197. 						_this.handlePreNextClick(1);
  198. 					}, 1000);
  199. 				}
  200. 			}
  201. 			if (this.currentQuestion.type === 3) {
  202. 				this.list[this.current - 1].stuAnswer = this.form.answer;
  203. 				this.tip = true;
  204. 				this.noteTitle(1, JSON.stringify(this.form.answer));
  205. 			}
  206. 			if (this.currentQuestion.type === 6) {
  207. 				this.list[this.current - 1].stuAnswer = this.form.answer;
  208. 				this.tip = true;
  209. 				this.noteTitle(1, JSON.stringify(this.form.answer));
  210. 				this.right++;
  211. 			}
  212. 		
  213. 			if (this.currentQuestion.type === 4) {
  214. 				this.list[this.current - 1].stuAnswer = this.form.answer;
  215. 				if (this.list[this.current - 1].stuAnswer === this.list[this.current - 1].rightAnswer) {
  216. 					uni.showToast({
  217. 						title: '回答正确，正在跳转第' + (this.current + 1) + '题',
  218. 						icon: 'none',
  219. 						duration: 2000
  220. 					});
  221. 					let _this = this;
  222. 					setTimeout(function() {
  223. 						_this.handlePreNextClick(1);
  224. 					}, 1000);
  225. 				}
  226. 			}
  227.  
  228. 			if (this.currentQuestion.type === 5) {
  229. 				if (this.form.answer == 1) {
  230. 					this.list[this.current - 1].stuAnswer = '正确';
  231. 					// 正确
  232. 					this.tip = true;
  233. 					this.resultText = this.rightText;
  234. 					this.statusIcon = this.rightIcon;
  235. 					this.currentQuestion.isRight = true;
  236. 				} else if (this.form.answer == 0) {
  237. 					this.list[this.current - 1].stuAnswer = '错误';
  238. 					// 错误
  239. 					this.tip = true;
  240. 					this.statusIcon = this.errorIcon;
  241. 					this.resultText = this.errorText;
  242. 					this.currentQuestion.isRight = false;
  243. 				}
  244. 				if (this.list[this.current - 1].stuAnswer == this.list[this.current - 1].rightAnswer) {
  245. 					uni.showToast({
  246. 						title: '回答正确，正在跳转第' + (this.current + 1) + '题',
  247. 						icon: 'none',
  248. 						duration: 2000
  249. 					});
  250. 					setTimeout(() => {
  251. 						this.handlePreNextClick(1);
  252. 					}, 1000);
  253. 					this.noteTitle(1, JSON.stringify(this.form.answer));
  254. 				} else {
  255. 					this.noteTitle(0, JSON.stringify(this.form.answer));
  256. 				}
  257. 			}
  258. 			this.$forceUpdate();
  259. 			this.submit();
  260. 			uni.setStorageSync('questionList', this.list);
  261. 		},
  262. 		async submit() {
  263. 			const form = {
  264. 				...this.form
  265. 			};
  266. 			if (this.currentQuestion.type === 2 && form.answer && form.answer.length) {
  267. 				// 答案排序
  268. 				form.answer = form.answer.sort((a, b) => a.charCodeAt() - b.charCodeAt());
  269. 			}
  270. 			this.submitLoading = true;
  271. 			// 显示答题完成界面
  272. 			if (this.list.length === this.current) {
  273. 				if (this.right + this.error == this.list.length) {
  274. 					this.isFinal = true;
  275. 					if (this.everyDay) {
  276. 						this.postDays();
  277. 					}
  278. 				} else {
  279. 					uni.showToast({
  280. 						title: `当前最后一题，您还有${this.list.length - (this.right + this.error)}道题目未作答`,
  281. 						icon: 'none',
  282. 						duration: 2000
  283. 					});
  284. 				}
  285. 			}
  286. 		},
  287. 		checkToken(res) {
  288. 			if (res.code == 500) {
  289. 				Dialog.confirm({
  290. 					title: '广东自考题库',
  291. 					message: '登录状态已过期，请重新登录'
  292. 				})
  293. 					.then(() => {
  294. 						// 页面跳转
  295. 						uni.navigateTo({
  296. 							url: '/pages/Login/index'
  297. 						});
  298. 					})
  299. 					.catch(() => {
  300. 						console.log('取消');
  301. 					});
  302. 			}
  303. 		},
  304. 		async getList(isFirstFetch) {
  305. 			if (this.everyDay) {
  306. 				let course = uni.getStorageSync('course');
  307. 				await this.$request
  308. 					.request({
  309. 						url: `/student/dailyParactice/days/questions?courseId=2`,
  310. 						method: 'GET'
  311. 					})
  312. 					.then(res => {
  313. 						this.examquestionSource = res.data;
  314. 						// 获取题目列表
  315. 						this.getquestionList();
  316. 					});
  317. 			} else if (this.errChild.length > 0) {
  318. 				this.examquestionSource = this.errChild;
  319. 				this.getquestionList();
  320. 			} else if (this.collectList.length > 0) {
  321. 				this.examquestionSource = this.collectList;
  322. 				this.getquestionList();
  323. 			} else if (uni.getStorageSync('questionList')) {
  324. 				this.examquestionSource = uni.getStorageSync('questionList');
  325. 				// 获取题目列表
  326. 				this.getquestionList();
  327. 			} else if (uni.getStorageSync('imitateTest')) {
  328. 				if (uni.getStorageSync('imitateTest') == 0) {
  329. 					// 获取机考选择题
  330. 					await this.$request
  331. 						.request({
  332. 							url: `/student/dailyParactice/get/testSgin`,
  333. 							method: 'GET'
  334. 						})
  335. 						.then(res => {
  336. 							this.examquestionSource = res.data;
  337. 							//  获取题目列表
  338. 							this.getquestionList();
  339. 						});
  340. 				} else {
  341. 					// 案例分析
  342. 					await this.$request
  343. 						.request({
  344. 							url: `/student/dailyParactice/get/case`,
  345. 							method: 'GET'
  346. 						})
  347. 						.then(res => {
  348. 							this.examquestionSource = res.data;
  349. 							//  获取题目列表
  350. 							this.getquestionList();
  351. 						});
  352. 				}
  353. 			} else {
  354. 				await this.$request
  355. 					.request({
  356. 						url: `/student/paper/question/list?paperId=${this.paperId}`,
  357. 						method: 'GET'
  358. 					})
  359. 					.then(res => {
  360. 						this.checkToken(res);
  361. 						this.examquestionSource = res.rows;
  362. 						// 获取题目列表
  363. 						this.getquestionList();
  364. 					});
  365. 			}
  366. 		},
  367.  
  368.  
  369. getquestionList() {
  370. 			this.list = this.handleQuestion(this.examquestionSource);
  371. 			if (this.strategy == 1) {
  372. 				this.$request
  373. 					.request({
  374. 						url: `/student/pascal/count/getPascale/record`,
  375. 						data: {
  376. 							paperId: this.paperId,
  377. 							strategy: this.strategy
  378. 						},
  379. 						method: 'GET'
  380. 					})
  381. 					.then(res => {
  382. 						for (let question of res.data) {
  383. 							for (let item of this.list) {
  384. 								if (item.id == question.pascalId) {
  385. 									if (typeof JSON.parse(question.answer) == 'string') {
  386. 										item.stuAnswer = JSON.parse(question.answer);
  387. 									} else {
  388. 										item.stuAnswer = JSON.parse(question.answer)[0];
  389. 									}
  390. 								}
  391. 							}
  392. 						}
  393. 					});
  394. 			} else if (this.strategy == 0) {
  395. 				// 点击取消清空用户答题记录
  396. 				this.$request
  397. 					.request({
  398. 						// paperType为1测试章节套题
  399. 						url: `/student/pascal/count/getPascale/record`,
  400. 						data: {
  401. 							paperId: this.paperId,
  402. 							strategy: this.strategy
  403. 						},
  404. 						method: 'GET'
  405. 					})
  406. 					.then(res => {
  407. 						// console.log('题目列表', this.list);
  408. 						// console.log('清空答题记录', res);
  409. 					});
  410. 			}
  411. 		},
  412. 		isJSON(str) {
  413. 			if (typeof str == 'string') {
  414. 				try {
  415. 					var obj = JSON.parse(str);
  416. 					if (typeof obj == 'object' && obj) {
  417. 						return true;
  418. 					} else {
  419. 						return false;
  420. 					}
  421. 				} catch (e) {
  422. 					console.log('error：' + str + '!!!' + e);
  423. 					return false;
  424. 				}
  425. 			}
  426. 		},
  427. 		// 对题目进行处理
  428. 		handleQuestion(singleList, mid = 0, isM = false) {
  429. 			let delist = [];
  430. 			for (let i = 0; i < singleList.length; i++) {
  431. 				if (singleList[i].options != '') {
  432. 					singleList[i].options = JSON.parse(singleList[i].options);
  433. 				}
  434. 				let examp = {
  435. 					analysis: singleList[i].analysis,
  436. 					analysisImgKey: '',
  437. 					analysisImgUrl: '',
  438. 					id: singleList[i].questionId,
  439. 					isAnswer: true,
  440. 					options: {
  441. 						A: singleList[i].options.A,
  442. 						B: singleList[i].options.B,
  443. 						C: singleList[i].options.C,
  444. 						D: singleList[i].options.D,
  445. 						E: singleList[i].options.E ? singleList[i].options.E : null,
  446. 						F: singleList[i].options.F ? singleList[i].options.F : null
  447. 					},
  448. 					questionImgKey: '',
  449. 					questionImgUrl: '',
  450. 					rightAnswer: this.isJSON(singleList[i].rightAnswer) ? JSON.parse(singleList[i].rightAnswer) : singleList[i].rightAnswer,
  451. 					stuAnswer: '',
  452. 					title: singleList[i].title,
  453. 					type: singleList[i].type,
  454. 					isM: false,
  455. 					mid: mid,
  456. 					paperId: singleList[i].paperId
  457. 				};
  458. 				console.log();
  459. 				if (!singleList[i].options.E) {
  460. 					delete examp.options.E;
  461. 					delete examp.options.F;
  462. 				}
  463. 				if (!singleList[i].options.F) {
  464. 					delete examp.options.F;
  465. 				}
  466. 				if (isM) examp.isM = true;
  467. 				delist.push(examp);
  468. 			}
  469. 			// console.log(delist);
  470. 			return delist;
  471. 		},
  472.  
  473.  
  474. openAside() {
  475. 			this.$forceUpdate();
  476. 			this.answerPanel = !this.answerPanel;
  477. 		},
  478. 		answerPanelClick(index) {
  479. 			this.current = index + 1;
  480. 			this.tip = false;
  481. 			// uniapp获取微信小程序窗口信息
  482. 			let getWindowInfo = uni.getWindowInfo();
  483.  
  484. 			if (getWindowInfo.screenWidth <= 768) {
  485. 				this.openAside();
  486. 			}
  487. 		},
  488. 		outputList(list, source = 'default') {
  489. 			let outputStr = '';
  490. 			if (typeof list == 'string' || typeof list == 'number') return list;
  491. 			if (list != null)
  492. 				for (let i = 0; i < list.length; i++) {
  493. 					outputStr += list[i] + '';
  494. 				}
  495. 			return outputStr;
  496. 		},
  497. 		viewAnalysis() {
  498. 			this.isFinal = false;
  499. 			this.current = 1;
  500. 			this.redoExam = true;
  501. 			this.tip = true;
  502. 		},
  503. 		goBack() {
  504. 			this.$router.go(-1);
  505. 		},
  506.  
  507.  
  508. 		checkAnswer() {
  509. 			if (this.currentQuestion.type === 1 || this.currentQuestion.type === 2) {
  510. 				if (this.currentQuestion.type === 2) {
  511. 					if (this.form.answer == [] || this.form.answer.length === 0) return;
  512. 					// console.log(this.outputList(this.form.answer));
  513. 					this.form.answer = this.form.answer.sort((a, b) => a.charCodeAt() - b.charCodeAt());
  514. 					if (this.outputList(this.currentQuestion.rightAnswer) !== this.outputList(this.form.answer)) {
  515. 						if (this.form.answer == [] || this.form.answer.length === 0) return;
  516. 						this.tip = true;
  517. 						this.statusIcon = this.errorIcon;
  518. 						this.resultText = this.errorText;
  519. 					} else {
  520. 						this.tip = true;
  521. 						this.resultText = this.rightText;
  522. 						this.statusIcon = this.rightIcon;
  523. 						this.selectRight++;
  524. 					}
  525. 				}
  526. 				if (this.currentQuestion.type === 1) {
  527. 					if (this.form.answer == [] || this.form.answer.length === 0) return;
  528. 					if (this.form.answer == this.currentQuestion.rightAnswer) {
  529. 						this.tip = true;
  530. 						this.resultText = this.rightText;
  531. 						this.statusIcon = this.rightIcon;
  532. 						this.selectRight++;
  533. 					} else {
  534. 						this.tip = true;
  535. 						this.statusIcon = this.errorIcon;
  536. 						this.resultText = this.errorText;
  537. 					}
  538. 				}
  539. 			}
  540. 			if (this.currentQuestion.type === 3 || this.currentQuestion.type === 6) {
  541. 				this.tip = true;
  542. 			}
  543. 			if (this.currentQuestion.type === 4) {
  544. 				if (this.form.answer == [] || this.form.answer.length === 0) return;
  545. 				if (this.form.answer === this.currentQuestion.rightAnswer) {
  546. 					this.resultText = this.rightText;
  547. 					this.statusIcon = this.rightIcon;
  548. 					this.selectRight++;
  549. 				} else {
  550. 					this.tip = true;
  551. 					this.statusIcon = this.errorIcon;
  552. 					this.resultText = this.errorText;
  553. 				}
  554. 			}
  555. 			if (this.currentQuestion.type === 5) {
  556. 				if (this.form.answer == [] || this.form.answer.length === 0) return;
  557. 				if (this.form.answer === this.currentQuestion.rightAnswer) {
  558. 					this.resultText = this.rightText;
  559. 					this.statusIcon = this.rightIcon;
  560. 					this.selectRight++;
  561. 				} else {
  562. 					this.tip = true;
  563. 					this.statusIcon = this.errorIcon;
  564. 					this.resultText = this.errorText;
  565. 				}
  566. 			}
  567. 			this.$forceUpdate();
  568. 		},
  569. 		getAnswerPanelColor(item) {
  570. 			if (this.tip && this.currentQuestion.rightAnswer === item.value) return '#68ff72';
  571. 			else if (this.tip && this.currentQuestion.rightAnswer !== item.value) return '#ff5555';
  572. 			else return '';
  573. 		},
  574. 		lookAnswerClick() {
  575. 			this.tip = !this.tip;
  576. 			this.checkAnswer();
  577. 		}

scss样式：

  1.  
  2. <style lang="scss" scoped>
  3. $right: green;
  4. $error: red;
  5. $normal: #03a9f4ab;
  6.  
  7. .span_label /deep/ p {
  8. 	display: inline;
  9. }
  10. .container {
  11. 	max-width: 1200px;
  12. 	margin: auto;
  13.  
  14. 	/deep/ .el-checkbox {
  15. 		display: block;
  16. 		margin-bottom: 32px;
  17. 	}
  18. }
  19.  
  20. .aside {
  21. 	width: 330px;
  22. 	display: flex;
  23. 	position: fixed;
  24. 	right: -330px;
  25. 	top: 154px;
  26. 	transition: right 0.3s ease;
  27. 	z-index: 1001;
  28. 	background-color: white;
  29. 	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
  30. }
  31.  
  32. .openAside {
  33. 	right: 0 !important;
  34. }
  35.  
  36. .answer {
  37. 	display: flex;
  38.  
  39. 	.main {
  40. 		flex: 1;
  41. 	}
  42.  
  43. 	&__type {
  44. 		display: flex;
  45. 		justify-content: space-between;
  46. 		padding-right: 20px;
  47. 		color: #333;
  48.  
  49. 		.text {
  50. 			font-weight: bold;
  51. 			font-size: 16px;
  52. 			margin-bottom: 16px;
  53. 		}
  54.  
  55. 		.progress {
  56. 			color: #999;
  57.  
  58. 			&__content {
  59. 				font-size: 14px;
  60. 				font-weight: bold;
  61. 				margin-bottom: 20px;
  62. 			}
  63.  
  64. 			span {
  65. 				font-size: 16px;
  66. 				font-weight: bold;
  67. 				color: #1890ff;
  68. 			}
  69. 		}
  70. 	}
  71.  
  72. 	&__content {
  73. 		margin-bottom: 20px;
  74. 		font-weight: bold;
  75. 	}
  76.  
  77. 	&__form {
  78. 	}
  79. }
  80.  
  81. .el-radio-group {
  82. 	.el-radio {
  83. 		display: block;
  84. 		margin-top: 10px;
  85. 		width: 100%;
  86. 	}
  87. }
  88.  
  89. .el-radio.is-bordered + .el-radio.is-bordered {
  90. 	margin-left: 0;
  91. }
  92.  
  93. .card-title {
  94. 	font-weight: bold;
  95. 	color: #0d0e10;
  96. 	text-align: left;
  97. 	padding-left: 10px;
  98. 	font-size: 14px;
  99. 	border-left: #1e88e5 3px solid;
  100. }
  101.  
  102. .answer-type {
  103. 	color: #666;
  104. 	margin-top: 46px;
  105. 	padding-bottom: 14px;
  106. 	border-bottom: solid 1px #ebecf2;
  107. }
  108.  
  109. .picker-item {
  110. 	cursor: pointer;
  111. 	width: 38px;
  112. 	height: 38px;
  113. 	line-height: 38px;
  114. 	text-align: center;
  115. 	border: 1px solid #dddddd;
  116. 	border-radius: 5px;
  117. 	background: #ffffff;
  118. 	-webkit-user-select: none;
  119. 	-moz-user-select: none;
  120. 	-ms-user-select: none;
  121. 	user-select: none;
  122. 	float: left;
  123. 	margin: 4px 6px;
  124. 	position: relative;
  125. 	overflow: hidden;
  126.  
  127. 	&.error {
  128. 		background: $error;
  129. 		color: #fff;
  130. 	}
  131.  
  132. 	&.right {
  133. 		background: $right;
  134. 		color: #fff;
  135. 	}
  136.  
  137. 	&.normal {
  138. 		background: $normal;
  139. 		color: #fff;
  140. 	}
  141. }
  142.  
  143. .bottom {
  144. 	display: flex;
  145. 	justify-content: space-between;
  146. 	margin-top: 40px;
  147. }
  148.  
  149. .tip-box {
  150. 	margin-top: 32px;
  151. 	padding: 16px;
  152. 	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
  153. 	border-radius: 6px;
  154. 	position: relative;
  155.  
  156. 	.title {
  157. 		color: #333;
  158. 		font-weight: bold;
  159. 	}
  160.  
  161. 	.desc {
  162. 		margin-top: 16px;
  163. 		color: #7f7f7f;
  164.  
  165. 		span {
  166. 			color: #333;
  167. 			font-weight: bold;
  168. 		}
  169. 	}
  170.  
  171. 	.arrow {
  172. 		position: absolute;
  173. 		display: block;
  174. 		width: 0;
  175. 		height: 0;
  176. 		border-color: transparent;
  177. 		border-style: solid;
  178. 		top: -6px;
  179. 		left: 32px;
  180. 		margin-right: 3px;
  181. 		border-top-color: #ebeef5;
  182. 		border-bottom-width: 0;
  183.  
  184. 		&::after {
  185. 			content: ' ';
  186. 			position: absolute;
  187. 			display: block;
  188. 			width: 0;
  189. 			height: 0;
  190. 			border-color: transparent;
  191. 			border-style: solid;
  192. 			border-width: 6px;
  193. 			top: 1px;
  194. 			margin-left: -6px;
  195. 			border-top-width: 0;
  196. 			border-bottom-color: #fff;
  197. 		}
  198. 	}
  199. }
  200.  
  201. .bread {
  202. 	padding: 20px 0;
  203. }
  204.  
  205. .answer-container {
  206. 	background: initial;
  207. }
  208.  
  209. .titleText {
  210. 	position: relative;
  211. 	display: inline-block;
  212. 	border: 1px solid #bfbfbf;
  213. 	width: 12px;
  214. 	height: 12px;
  215. 	text-indent: 0;
  216. 	margin-left: 3px;
  217. 	top: 2px;
  218. }
  219.  
  220. .titleRight {
  221. 	background: $right;
  222. }
  223.  
  224. .titleError {
  225. 	background: $error;
  226. }
  227.  
  228. .titleAnswered {
  229. 	border: 1px solid #5a82ff;
  230. 	background: #5a82ff;
  231. }
  232.  
  233. .titleDeText {
  234. 	font-size: 12px;
  235. 	color: #9cb2cd;
  236. 	text-indent: 0;
  237. 	margin-left: 5px;
  238. }
  239.  
  240. .openAfix {
  241. 	font-size: 16px;
  242. 	margin-top: 20px;
  243. 	color: white;
  244. 	border-radius: 5px;
  245. 	width: 18px;
  246. 	height: 120px;
  247. 	display: none;
  248. 	background: #1e88e5;
  249. 	padding: 14px;
  250. 	justify-content: center;
  251. 	align-items: center;
  252. }
  253.  
  254. @media screen and (max-width: 786px) {
  255. 	.bread {
  256. 		padding: 20px;
  257. 	}
  258.  
  259. 	.openAfix {
  260. 		display: flex;
  261. 	}
  262. }
  263.  
  264. .questTypeBox {
  265. 	height: 41px;
  266. 	line-height: 41px;
  267. 	padding: 0 14px;
  268. 	display: -webkit-box;
  269. 	display: -webkit-flex;
  270. 	display: flex;
  271. 	-webkit-box-orient: horizontal;
  272. 	-webkit-box-direction: normal;
  273. 	-webkit-flex-direction: row;
  274. 	flex-direction: row;
  275. 	-webkit-box-pack: justify;
  276. 	-webkit-justify-content: space-between;
  277. 	justify-content: space-between;
  278. }
  279.  
  280. .questionType {
  281. 	font-size: 13px;
  282. 	color: #666;
  283. }
  284.  
  285. .questionAmount {
  286. 	font-size: 12px;
  287. 	color: #999;
  288. }
  289.  
  290. .questionBox {
  291. 	background: #fff;
  292. 	padding: 14px;
  293. }
  294.  
  295. .titleBox {
  296. 	color: #333;
  297. 	padding-bottom: 14px;
  298. }
  299.  
  300. .titleMain {
  301. 	height: auto;
  302. }
  303.  
  304. .titleContent {
  305. 	margin-bottom: 10px;
  306. 	font-size: 15px;
  307. }
  308.  
  309. .titleImg {
  310. 	width: 100%;
  311. 	max-height: 200px;
  312. 	object-fit: contain;
  313. 	object-position: left;
  314. }
  315.  
  316. .answerBox {
  317. 	padding: 14px 16px;
  318. 	background-color: #fff;
  319. 	display: -webkit-box;
  320. 	display: -webkit-flex;
  321. 	display: flex;
  322. }
  323.  
  324. .answerIcon {
  325. 	width: 20px;
  326. 	margin-right: 10px;
  327. 	position: relative;
  328. }
  329.  
  330. .answerIcon img {
  331. 	width: 100%;
  332. 	margin-top: 2px;
  333. }
  334.  
  335. .answerBoxText {
  336. 	flex: 1;
  337. }
  338.  
  339. .answerBoxContent {
  340. 	font-weight: 500;
  341. 	font-size: 14px;
  342. 	color: #666;
  343. 	line-height: 22px;
  344. 	margin-bottom: 9px;
  345. }
  346.  
  347. .answerBoxAnswers {
  348. 	flex: 1;
  349. }
  350.  
  351. .resultCompareText {
  352. 	font-weight: 500;
  353. 	font-size: 14px;
  354. 	color: #666;
  355. 	line-height: 22px;
  356. 	margin-bottom: 9px;
  357. }
  358.  
  359. .answerBoxAnswersList {
  360. 	flex: 1;
  361. }
  362.  
  363. .answers {
  364. 	font-size: 14px;
  365. 	line-height: 22px;
  366. 	color: #666;
  367. }
  368.  
  369. .questionAnalysis {
  370. 	padding: 14px;
  371. 	background-color: #fff;
  372. 	margin-top: 10px;
  373. }
  374.  
  375. .analysisTitle {
  376. 	display: flex;
  377. 	justify-content: space-between;
  378. 	align-items: center;
  379. 	font-size: 14px;
  380. 	color: #666;
  381. 	line-height: 22px;
  382. 	font-weight: 700;
  383. 	.analysis_AI {
  384. 		display: flex;
  385. 		align-items: center;
  386. 		img {
  387. 			width: 25px;
  388. 			height: 25px;
  389. 		}
  390. 	}
  391. }
  392.  
  393. .analysisContent {
  394. 	padding: 6px 0 12px;
  395. 	border-bottom: 1px dashed #ddd;
  396. 	margin-bottom: 11px;
  397. }
  398.  
  399. .bottomButton {
  400. 	position: fixed;
  401. 	bottom: 0;
  402. 	left: 0;
  403. 	height: 50px;
  404. 	width: 100%;
  405. 	display: -webkit-box;
  406. 	display: -webkit-flex;
  407. 	display: flex;
  408. 	background: #fff;
  409. 	z-index: 1000;
  410. }
  411.  
  412. .buttonGroup {
  413. 	-webkit-box-flex: 1;
  414. 	-webkit-flex: 1;
  415. 	flex: 1;
  416. 	display: -webkit-box;
  417. 	display: -webkit-flex;
  418. 	display: flex;
  419. }
  420.  
  421. .rButtonBox {
  422. 	-webkit-box-flex: 1;
  423. 	-webkit-flex: 1;
  424. 	flex: 1;
  425. 	-webkit-flex-wrap: wrap;
  426. 	flex-wrap: wrap;
  427. 	display: flex;
  428. 	align-items: center;
  429. 	padding-right: 14px;
  430. }
  431.  
  432. .lButton {
  433. 	flex: 1;
  434. 	-webkit-flex-wrap: wrap;
  435. 	flex-wrap: wrap;
  436. 	display: -webkit-box;
  437. 	display: -webkit-flex;
  438. 	display: flex;
  439. 	-webkit-box-pack: center;
  440. 	-webkit-justify-content: center;
  441. 	justify-content: center;
  442. 	justify-items: center;
  443. 	-webkit-box-align: center;
  444. 	-webkit-align-items: center;
  445. 	align-items: center;
  446. 	-webkit-align-content: center;
  447. 	align-content: center;
  448. }
  449.  
  450. .lButton img {
  451. 	width: 18px;
  452. 	height: 18px;
  453. 	text-align: center;
  454. }
  455.  
  456. .lButton p {
  457. 	text-align: center;
  458. 	width: 100%;
  459. 	font-size: 11px;
  460. 	color: #666;
  461. 	line-height: 15px;
  462. }
  463.  
  464. .rButton {
  465. 	height: 33px;
  466. 	width: 122px;
  467. 	border-radius: 74px;
  468. 	background-color: #0096ff;
  469. 	color: #fff;
  470. 	text-align: center;
  471. 	line-height: 33px;
  472. 	cursor: pointer;
  473. }
  474.  
  475. .accomplish {
  476. 	padding-top: 45px;
  477. 	background: linear-gradient(#0096ff, rgb(159, 207, 241), rgba(254, 159, 16, 0) 90%);
  478. 	height: calc(100vh - 45px);
  479. }
  480.  
  481. .detailBox {
  482. 	text-align: center;
  483. 	height: calc(100vh - 200px);
  484. 	border-radius: 10px;
  485. 	background-color: #fff;
  486. 	padding-top: 67px;
  487. 	margin: 0 20px;
  488. }
  489.  
  490. .detailIcon {
  491. 	width: 99px;
  492. 	height: 99px;
  493. 	overflow: visible;
  494. 	opacity: 1;
  495. 	transition: opacity 0.5s ease-in-out 0s;
  496. 	background-color: transparent;
  497. 	margin: 0 auto 24px;
  498. }
  499.  
  500. .detailTitle {
  501. 	width: 300px;
  502. 	margin: 0 auto;
  503. 	font-size: 16px;
  504. 	line-height: 20px;
  505. 	font-weight: 500;
  506. 	margin-bottom: 20px;
  507. }
  508.  
  509. .detailButton {
  510. 	text-align: center;
  511. 	width: 290px;
  512. 	height: 37px;
  513. 	border-radius: 74px;
  514. 	font-size: 14px;
  515. }
  516.  
  517. .detailButtonTop {
  518. 	line-height: 37px;
  519. 	background-color: #0096ff;
  520. 	color: #fff;
  521. 	margin: 0 auto 24px;
  522. }
  523.  
  524. .detailButtonBottom {
  525. 	border: 1px solid #0096ff;
  526. 	color: #20a3fd;
  527. 	line-height: 35px;
  528. 	margin: 0 auto;
  529. }
  530. </style>
  531.  
  532. <style lang="scss">
  533. .u-radio {
  534. 	min-height: 41px;
  535. 	width: 100%;
  536. 	padding: 0 7px;
  537. 	box-sizing: border-box;
  538. 	background: #f6f6f6;
  539. 	margin-bottom: 14px;
  540. 	border-radius: 4px;
  541. 	font-size: 14px;
  542. }
  543.  
  544. .u-radio__label {
  545. 	font-size: 14px !important;
  546. 	white-space: normal;
  547. 	padding: 7px;
  548. }
  549.  
  550. .u-checkbox {
  551. 	width: 100%;
  552. 	min-height: 41px;
  553. 	padding: 0 7px;
  554. 	box-sizing: border-box;
  555. 	background: #f6f6f6;
  556. 	margin-bottom: 14px;
  557. 	border-radius: 4px;
  558. 	border: initial;
  559. 	display: flex;
  560. 	align-items: center;
  561. 	height: initial;
  562. }
  563.  
  564. .u-checkbox__label {
  565. 	white-space: normal;
  566. 	padding: 7px;
  567. 	font-size: 14px !important;
  568. }
  569.  
  570. .u-checkbox .is-checked {
  571. 	background-color: #e5f1ff;
  572. }
  573. </style>

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

选择题：

                         

材料题：

                      

答题卡：

                        

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/505608
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号