feat: show tips when 3 times wrong (cuixueshe#440)

* fix: add dropdown background * feat: show tips when 3 times wrong * fix: hide AnswerTip after correctAnswer * refactor: extraction function --------- Co-authored-by: cuixiaorui <[email protected]>
Torstentjh · Mar 30, 2024 · bc9f02b · bc9f02b
1 parent 8d8684f
commit bc9f02b
Showing 1 changed file with 22 additions and 6 deletions.
diff --git a/apps/client/components/main/Question/Question.vue b/apps/client/components/main/Question/Question.vue
@@ -70,7 +70,7 @@ const {
   getInputCursorPosition,
   inputChangedCallback,
 });
-const { hiddenAnswerTip } = useAnswerTip();
+const { showAnswerTip, hiddenAnswerTip } = useAnswerTip();
 
 watch(
   () => inputValue.value,
@@ -175,18 +175,36 @@ function inputWidth(word: string) {
   return width;
 }
 
+function answerError() {
+  let wrongTimes = 0;
+
+  function handleAnswerError() {
+    playErrorSound();
+    wrongTimes++;
+    if (wrongTimes >= 3) {
+      showAnswerTip();
+    }
+  }
+
+  return {
+    handleAnswerError,
+  };
+}
+
+const { handleAnswerError } = answerError();
+
 function handleKeydown(e: KeyboardEvent) {
   if (e.code === "Enter") {
     e.stopPropagation();
     submitAnswer(
       () => {
         playRightSound(); // 正确提示
         showAnswer();
+        hiddenAnswerTip();
       },
-      playErrorSound // 错误提示
+      handleAnswerError // 错误提示
     );
 
-    hiddenAnswerTip();
     return;
   }
 
@@ -197,9 +215,7 @@ function handleKeydown(e: KeyboardEvent) {
         playRightSound(); // 正确提示
         showAnswer();
       },
-      errorCallback: () => {
-        playErrorSound();
-      },
+      errorCallback: handleAnswerError, // 错误提示
     },
   });
 }