更新单选题

components/question/FillItem.vue

@@ -1,7 +1,7 @@
 <template>
 	<uni-popup background-color="#fff" ref="fillRef">
 		<view class="popup-content">
-			<input v-model="result" style="width: 100%" @blur="onBlur" type="text" class="input-box" />
+			<input v-model="result"  style="width: 100%" @blur="onBlur" type="text" class="input-box" />
 		</view>
 	</uni-popup>
 </template>

components/question/tiankong.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="fill-in-the-blank">
 		<!-- 显示填空后的文本 -->
-		<div class="formatted-text" v-html="formattedText"></div>
+		<view class="formatted-text" v-html="formattedText" :question="question" :change:question="TK.watchQuestionChange"></view>
 		<!-- 提供与占位符数量相匹配的输入框 -->
 		<template v-for="(placeholder, index) in placeholders" :key="index">
 			<FillItem :value="question.reply[index]" :ref="`popup${index}Ref`" :index="index" @blur="onBlur"></FillItem>
@@ -10,37 +10,11 @@
 </template>
 
 <script>
-  import FillItem from "./FillItem.vue";
-
+	import FillItem from "./FillItem.vue";
 	export default {
-    components: {
-      FillItem
-    },
-		props: {
-			placeholders: { // 占位符
-				type: Array,
-				required: true
-			},
-			question: {
-				type: Object,
-			},
-			showError: {
-				type: Boolean,
-				default: false
-			}
+		components: {
+			FillItem
 		},
-		methods: {
-			setResult(data) {
-				const {index,result} = data;
-				this.question.reply[index] = result;
-			}
-		}
-	}
-	
-</script>
-
-<script module="TK" lang="renderjs">
-	export default {
 		props: {
 			placeholders: { // 占位符
 				type: Array,
@@ -54,42 +28,77 @@
 				default: false
 			}
 		},
-		data() {
-			return {
-				
-			};
-		},
 		computed: {
 			// 计算属性，用于生成填空后的文本
 			formattedText() {
 				let result = this.question.name;
 				this.placeholders.forEach((placeholder, index) => {
+					const regex2 = new RegExp(`\\<img `, 'g');
+					result = result.replace(regex2, '<image ');
 					// 使用正则表达式全局替换占位符
 					const regex = new RegExp(`\\${placeholder}`, 'g');
-					result = result.replace(regex,
-						`<input id="t_${this.question.stId}_${index}" readonly data-index="${index}" value="${this.question.reply[index]}" />`);
+					if (this.showError) {
+						// 答题状态默认错误
+						let answer_status = 'showError';
+						// 更新答题状态正确
+						this.question.reply[index] && this.question.result[index].some(citem => citem === this
+							.question.reply[index].trim()) && (answer_status = 'active_right');
+						result = result.replace(regex,
+							`<input class="tiankong-input ${answer_status}" style="width: 50px;margin: 0 3px" id="t_${this.question.stId}_${index}" readonly data-index="${index}" value="${this.question.reply[index]}" />`
+						);
+
+					} else {
+						result = result.replace(regex,
+							`<input class="tiankong-input" style="width: 50px;margin: 0 3px" id="t_${this.question.stId}_${index}" readonly data-index="${index}" value="${this.question.reply[index]}" />`
+						);
+
+					}
 				});
-				//  追加监听事件
-				this.$nextTick(() => {
-					this.initListener();
-				})
 				return result;
 			},
 		},
 		methods: {
+			setResult(data) {
+				const {
+					index,
+					result
+				} = data;
+				this.question.reply[index] = result;
+			},
 			onBlur(data) {
-				const {index,result} = data;
+				const {
+					index,
+					result
+				} = data;
+
 				this.question.reply[index] = result;
-				this.$ownerInstance.callMethod('setResult', data)
+				this.setResult(data);
 			},
+			showPopup(str) {
+				this.$refs[str][0].showPopup();
+			}
+		},
+	}
+</script>
+
+<script module="TK" lang="renderjs">
+	export default {
+		methods: {
 			updateFn(e) {
 				const str = `popup${e.target.dataset.index}Ref`;
-				console.log(this.$refs[str],str)
-				this.$refs[str][0].showPopup();
+				this.$ownerInstance.callMethod('showPopup',str)
 			},
-			initListener() {
-				this.question.result.forEach((item,index) => {
-					document.getElementById(`t_${this.question.stId}_${index}`).addEventListener('focus', (e) => this.updateFn(e))
+
+			watchQuestionChange(newValue, oldValue, ownerInstance, instance) {
+				if (newValue) {
+					this.initListener(newValue)
+				}
+			},
+
+			initListener(question) {
+				question.result.forEach((item, index) => {
+					const dom = document.getElementById(`t_${question.stId}_${index}`)
+					dom && dom.addEventListener('focus', (e) => this.updateFn(e))
 				})
 			},
 		},
@@ -120,4 +129,8 @@
 		border: 1px solid #ccc;
 		border-radius: 4px;
 	}
+
+	.tiankong-input {
+		width: 50px;
+	}
 </style>