选项试题弹框添加对错提示

src/components/videopage/DialogComponents.vue

@@ -28,6 +28,20 @@
                 :value="option"
               >
                 <span>{{ option }}</span>
+                <!-- 正确答案显示对号 -->
+                <img 
+                  v-if="answerSubmitted && selectedOption === option && option === currentQuestion.ccAnswer" 
+                  :src="checkMarkIcon" 
+                  alt="正确" 
+                  class="answer-icon correct"
+                />
+                <!-- 错误选择显示错号 -->
+                <img 
+                  v-else-if="answerSubmitted && selectedOption === option && option !== currentQuestion.ccAnswer" 
+                  :src="wrongNumberIcon" 
+                  alt="错误" 
+                  class="answer-icon wrong"
+                />
               </el-radio>
             </div>
           </div>
@@ -38,8 +52,8 @@
           <div class="dialog-footer">
             <el-button
               class="child-button confirm"
-              @click="handleSubmitAnswer"
-              >确定</el-button
+              @click="handleButtonClick"
+              >{{ answerSubmitted && !isCorrect ? '重选' : '确定' }}</el-button
             >
           </div>
           <!-- 右侧小图标 -->
@@ -163,6 +177,9 @@ import stopicon from '@/assets/icon/stopicon.png'
 // 导入图标
 import auto from '@/assets/icon/auto_awesome.png'
 
+import checkMarkIcon from '@/assets/icon/check-mark.png'
+import wrongNumberIcon from '@/assets/icon/wrong-number.png'
+
 // 定义props
 const props = defineProps({
   componentType: { type: String, default: 'course' },
@@ -179,6 +196,8 @@ const emits = defineEmits(['closeQuestionDialog', 'submitAnswer', 'saveProgress'
 // 内部状态
 const showAIDialog = ref(false)
 const selectedOption = ref(null)
+const answerSubmitted = ref(false) // 跟踪是否已提交答案
+const isCorrect = ref(false) // 跟踪答案是否正确
 const messageList = ref([])
 const prompt = ref('')
 const messageContainer = ref(null)
@@ -235,13 +254,35 @@ const handleSubmitAnswer = () => {
     ElMessage.warning('请选择一个选项!')
     return
   }
-  if (selectedOption.value === props.currentQuestion.ccAnswer) {
+  // 检查答案是否正确
+  isCorrect.value = selectedOption.value === props.currentQuestion.ccAnswer
+  if (isCorrect.value) {
     ElMessage.success('恭喜回答正确!')
+    // 回答正确，延时1秒自动关闭弹框
+    setTimeout(() => {
+      handleCloseQuestionDialog()
+    }, 1000)
   }else{
     ElMessage.warning('回答错误!')
   }
-  emits('submitAnswer', selectedOption.value === props.currentQuestion.ccAnswer)
-  selectedOption.value = null
+  answerSubmitted.value = true // 设置答案已提交状态
+  emits('submitAnswer', isCorrect.value)
+}
+
+// 重选答案
+const handleReselect = () => {
+  selectedOption.value = null // 重置选择
+  answerSubmitted.value = false // 重置提交状态
+  isCorrect.value = false // 重置正确状态
+}
+
+// 按钮点击处理
+const handleButtonClick = () => {
+  if (answerSubmitted.value && !isCorrect.value) {
+    handleReselect() // 重选答案
+  } else {
+    handleSubmitAnswer() // 提交答案
+  }
 }
 
 // 处理 AI 助手点击事件
@@ -575,8 +616,10 @@ const onCompositionend = () => {
 // 监听props变化
 watch(() => props.questionDialogVisible, (newVal) => {
   if (newVal && props.currentQuestion) {
-    // 重置选项
+    // 重置选项和提交状态
     selectedOption.value = null
+    answerSubmitted.value = false
+    isCorrect.value = false
   }
 })
 // 监听showAIDialog变化，在关闭时销毁语音读取
@@ -585,6 +628,12 @@ watch(() => showAIDialog.value, (newVal) => {
     stopPlayback();
   }
 })
+// 监听选项变化，用户选择其他选项时，重置提交状态
+watch(selectedOption, (newVal) => {
+  if (answerSubmitted.value && !isCorrect.value && newVal) {
+    answerSubmitted.value = false;
+  }
+})
 // 监听消息列表变化，自动滚动到底部
 watch(messageList, () => {
   scrollToBottom()
@@ -755,6 +804,41 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
     flex: 1;
     text-align: left;
     font-size: rpx(12);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  // 对错图标样式
+  .answer-icon {
+    width: rpx(20);
+    height: rpx(20);
+    margin-left: rpx(10);
+    animation: iconAppear 0.6s ease-out forwards;
+  }
+
+  .answer-icon.correct {
+    color: green;
+  }
+
+  .answer-icon.wrong {
+    color: red;
+  }
+
+  // 对错图标出现动画
+  @keyframes iconAppear {
+    0% {
+      opacity: 0;
+      transform: scale(0) translateY(10px);
+    }
+    50% {
+      opacity: 0.8;
+      transform: scale(1.2) translateY(-5px);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
   }
 
   // 增强选中时的样式变化

src/views/AIPage/AIDevelop.vue

@@ -485,8 +485,9 @@ const closeQuestionDialog = () => {
 }
 
 // 提交答案
-const handleSubmitAnswer = ({ selectedOption }) => {
-  questionDialogVisible.value = false
+const handleSubmitAnswer = (isCorrect) => {
+  console.log("提交答案:", isCorrect)
+  // 不直接关闭弹框，子组件自己控制关闭逻辑
 }
 
 // 处理提示弹窗确定按钮

src/views/laboratory/ExperimentalInterface.vue

@@ -356,7 +356,8 @@ const closeQuestionDialog = () => {
 
 // 提交答案
 const handleSubmitAnswer = ({ selectedOption }) => {
-  questionDialogVisible.value = false
+    console.log("提交答案:", isCorrect)
+  // 不直接关闭弹框，子组件自己控制关闭逻辑
 }
 
 // 处理提示弹窗确定按钮

src/views/programming/Interface.vue

@@ -356,9 +356,9 @@ const closeQuestionDialog = () => {
 }
 
 // 提交答案
-const handleSubmitAnswer = ({ result }) => {
-  console.log("提交答案:",result)
-  questionDialogVisible.value = false
+const handleSubmitAnswer = (isCorrect) => {
+  console.log("提交答案:", isCorrect)
+  // 不直接关闭弹框，子组件自己控制关闭逻辑
 }
 
 // 处理提示弹窗确定按钮