make user input of review page turn red or green if answer is false o…

…r true
nora-kauczor · Nov 8, 2024 · d6977de · d6977de
1 parent ca393db
commit d6977de
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 49 deletions.
diff --git a/frontend/src/pages/ReviewPage/ReviewPage.css b/frontend/src/pages/ReviewPage/ReviewPage.css
@@ -23,6 +23,14 @@
     border-radius: 0.3rem;
 }
 
+.red {
+    color: red !important;
+}
+
+.green {
+    color:green !important;
+}
+
 .review-page-button {
     align-self: center;
 }
diff --git a/frontend/src/pages/ReviewPage/ReviewPage.tsx b/frontend/src/pages/ReviewPage/ReviewPage.tsx
@@ -28,6 +28,7 @@ export default function ReviewPage(props: Readonly<Props>) {
     const [userInput, setUserInput] = useState<string>("")
     const [showFireworks, setShowFireworks] = useState(false);
     const [displayAnswer, setDisplayAnswer] = useState(false);
+    const [inputColor, setInputColor] = useState<string>("inherit")
     const navigate = useNavigate()
 
     useEffect(() => {
@@ -48,64 +49,74 @@ export default function ReviewPage(props: Readonly<Props>) {
     // }, []);
 
     useEffect(() => {
-            if (showFireworks) {
-                return
-            }
-            // TODO erst ¨¨berprüfen wenn vocastoreview geupdated sind
-            if (props.vocabsToReview.length < 1) {
-                navigate("/")
-            } else {
-                getNextVocab()
-            }
-        },[showFireworks])
-
-        function getNextVocab(): void {
-            setCurrentIndex(0)
+        if (showFireworks) {
+            return
+        }
+        // TODO erst überprüfen wenn vocabstoreview geupdated sind
+        if (props.vocabsToReview.length < 1) {
+            navigate("/")
+        } else {
+            getNextVocab()
         }
+    }, [showFireworks])
 
-        function checkAnswer() {
-            const rightAnswers: string[] = getRightAnswers(currentVocab.word,
-                props.language)
-            const rightAnswersLowerCase = rightAnswers.map(
-                answer => answer.toLowerCase())
-            const inputWithoutExtraSpaces: string = getInputWithoutExtraSpaces(
-                userInput)
-            if (rightAnswersLowerCase.includes(inputWithoutExtraSpaces)) {
-                setDisplayAnswer(true)
-                setShowFireworks(true)
-                setTimeout(() => {
-                    setShowFireworks(false)
-                }, 2500);
-                setTimeout(() => {
-                    setDisplayAnswer(false)
-                }, 2500);
-setUserInput("")
-            } else {
-                props.changeReviewDates(currentVocab.id)
-                // TODO Zeige den Misserfolg irgendwie an
-                setDisplayAnswer(true)
-            }
+    function getNextVocab(): void {
+        setInputColor("inherit")
+        setCurrentIndex(0)
+    }
 
-            props.removeVocabFromVocabsToReview(currentVocab.id)
+    function checkAnswer() {
+        const rightAnswers: string[] = getRightAnswers(currentVocab.word,
+            props.language)
+        const rightAnswersLowerCase = rightAnswers.map(
+            answer => answer.toLowerCase())
+        const inputWithoutExtraSpaces: string = getInputWithoutExtraSpaces(
+            userInput)
+        if (rightAnswersLowerCase.includes(inputWithoutExtraSpaces)) {
+            setDisplayAnswer(true)
+            setShowFireworks(true)
+            setInputColor("green")
+            setTimeout(() => {
+                setShowFireworks(false)
+            }, 2500);
+            setTimeout(() => {
+                setDisplayAnswer(false)
+            }, 2500);
+            setTimeout(() => {
+                setInputColor("inherit")
+            }, 2500);
+            // TODO wird das geleert?
+            setUserInput("")
+        } else {
+            props.changeReviewDates(currentVocab.id)
+            setInputColor("red")
+            setDisplayAnswer(true)
         }
 
+        props.removeVocabFromVocabsToReview(currentVocab.id)
+    }
+
 
-        return (<div id={"review-page"} className={"page"} role={"main"}>
-            {showFireworks && <Confetti/>}
-            {currentVocab && <CardContainer displayedVocab={currentVocab}
-                                            displayWord={displayAnswer}/>}
-            <label htmlFor={"review-input"} className={"visually-hidden"}>Your
-                answer</label>
-            <div id={"review-input-and-button-wrapper"}>
+    return (<div id={"review-page"} className={"page"} role={"main"}>
+        {showFireworks && <Confetti/>}
+        {currentVocab && <CardContainer displayedVocab={currentVocab}
+                                        displayWord={displayAnswer}/>}
+        <label htmlFor={"review-input"} className={"visually-hidden"}>Your
+            answer</label>
+        <div id={"review-input-and-button-wrapper"}>
             <input id={"review-input"}
                    onChange={element => setUserInput(element.target.value)}
+                   className={inputColor}
                    aria-label={"Enter your answer"}
                    placeholder={"Type your answer here"}
                    disabled={displayAnswer}
             />
-            {!displayAnswer ? <button className={"review-page-button big-button"} onClick={checkAnswer}
-                                      aria-label={"Submit your answer"}>show answer
-            </button> : <button className={"review-page-button"} onClick={getNextVocab}>next</button>}
-            </div>
-            </div>)
-    }
+            {!displayAnswer ?
+                <button className={"review-page-button big-button"}
+                        onClick={checkAnswer}
+                        aria-label={"Submit your answer"}>show answer
+                </button> : <button className={"review-page-button"}
+                                    onClick={getNextVocab}>next</button>}
+        </div>
+    </div>)
+}