Introduce a lock to prevent currentQuestionIndex++ from being execu…

…ted twice
SkyEye-FAST · Jul 13, 2024 · 9d6e8c7 · 9d6e8c7
1 parent 8f069f2
commit 9d6e8c7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 30 deletions.
diff --git a/static/js/quiz.js b/static/js/quiz.js
@@ -16,6 +16,7 @@ $(document).ready(function () {
     const questionKeys = Object.keys(questionsData);
     const delayBetweenQuestions = 800;
     const fadeDuration = 300;
+    let isLocked = false;
 
     if (questionKeys.length === 0) {
         console.error("No questions available.");
@@ -37,15 +38,15 @@ $(document).ready(function () {
         ].map((segment) => segment.segment);
         const translationLength = translationSegments.length;
 
-        await fadeOutInfo(fadeDuration);
+        await fadeOutElement($info, fadeDuration);
 
         $sourceText.text(source);
         $keyText.text(currentKey);
 
         $inputBox.val("");
         createBoxes(translationLength);
 
-        await fadeInInfo(fadeDuration);
+        await fadeInElement($info, fadeDuration);
     }
 
     function getSegmentedText(text) {
@@ -112,7 +113,7 @@ $(document).ready(function () {
     }
 
     async function showSummary() {
-        await fadeOutInfoAndInputBox(fadeDuration);
+        await fadeOutElement($info.add($inputBox), fadeDuration);
 
         const $summaryBody = $("#summaryBody").empty();
 
@@ -123,7 +124,7 @@ $(document).ready(function () {
                 .appendTo($summaryBody);
         });
 
-        await fadeInSummary(fadeDuration);
+        await fadeInElement($("#summary"), fadeDuration);
     }
 
     let isComposing = false;
@@ -149,49 +150,35 @@ $(document).ready(function () {
             updateBoxes();
         }
 
-        if (input === translation) {
+        if (input === translation && !isLocked) {
+            isLocked = true;
             await delay(delayBetweenQuestions);
             if (currentQuestionIndex === questionKeys.length - 1) {
                 await showSummary();
             } else {
-                await fadeOutInfo(fadeDuration);
+                await fadeOutElement($info, fadeDuration);
                 currentQuestionIndex++;
                 await initializeQuestion();
             }
+            isLocked = false;
         }
     });
 
     function delay(duration) {
-        return new Promise(resolve => setTimeout(resolve, duration));
+        return new Promise((resolve) => setTimeout(resolve, duration));
     }
 
-    function fadeOutInfo(fadeDuration) {
-        return new Promise(resolve => {
-            $info.fadeOut(fadeDuration, function () {
+    function fadeOutElement($element, fadeDuration) {
+        return new Promise((resolve) => {
+            $element.fadeOut(fadeDuration, function () {
                 resolve();
             });
         });
     }
 
-    function fadeInInfo(fadeDuration) {
-        return new Promise(resolve => {
-            $info.fadeIn(fadeDuration, function () {
-                resolve();
-            });
-        });
-    }
-
-    function fadeOutInfoAndInputBox(fadeDuration) {
-        return new Promise(resolve => {
-            $info.add($inputBox).fadeOut(fadeDuration, function () {
-                resolve();
-            });
-        });
-    }
-
-    function fadeInSummary(fadeDuration) {
-        return new Promise(resolve => {
-            $("#summary").fadeIn(fadeDuration, function () {
+    function fadeInElement($element, fadeDuration) {
+        return new Promise((resolve) => {
+            $element.fadeIn(fadeDuration, function () {
                 resolve();
             });
         });

diff --git a/templates/quiz_sub.html b/templates/quiz_sub.html
@@ -7,7 +7,7 @@
     <title>Minecraft译名认知测验</title>
     <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
     <link rel="stylesheet"
-        href="https://fonts.font.im/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
+        href="https://fonts.font.im/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0" />
     <link rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/quiz_sub.css') }}" type="text/css">
     <style>