feat: language in localStorage, translated test

public/lit/texts.tsx

@@ -126,6 +126,29 @@ export const toChapter =
         SK: "Na kapitolu "
     }
 
+export const toTest =
+    {
+        EN: "Let's test",
+        SK: "K testu"
+    }
+export const correct =
+    {
+        EN: "Correct!",
+        SK: "Správne!"
+    }
+
+export const incorrect =
+    {
+        EN: "Incorrect!",
+        SK: "Nesprávne!"
+    }
+
+export const yourScore =
+    {
+        EN: "Your score: ",
+        SK: "Tvoje skóre: "
+    }
+
 export const stepperLabels = [
     {
         EN: "Insulin",

src/atoms/languageAtom.tsx

@@ -2,5 +2,5 @@ import {atom} from 'recoil';
 
 export const languageAtom = atom({
     key: 'languageState',
-    default: 'EN',
+    default: localStorage.getItem('selectedLanguage') || 'EN'
 });

src/components/HomePage.tsx

@@ -12,6 +12,7 @@ const Intro = () => {
     const startButtonText = startButton[language as keyof Texts]
 
     const handleLanguageChange = (newLanguage: string) => {
+        localStorage.setItem('selectedLanguage', newLanguage);
         setLanguage(newLanguage);
         setShowLangMenu(false);
     };

src/components/InsulinTest.tsx

 import {useState} from "react";
-import {finishButton, insulinTestQuestions, nextButton, stepperLabels} from "../../public/lit/texts";
+import {
+    correct,
+    finishButton,
+    insulinTestQuestions,
+    nextButton,
+    stepperLabels,
+    yourScore
+} from "../../public/lit/texts";
 import {Stepper} from "react-stepa";
 import {useRecoilValue} from "recoil";
 import {languageAtom} from "../atoms/languageAtom";
@@ -12,6 +19,8 @@ const InsulinTest = () => {
     const [currentStep, setCurrentStep] = useState(0);
     const nextButtonText = useTranslate(nextButton);
     const finishButtonText = useTranslate(finishButton);
+    const correctButtonText = useTranslate(correct);
+    const scoreText = useTranslate(yourScore);
     const [selectedAnswer, setSelectedAnswer] = useState(null);
     const [isAnswered, setIsAnswered] = useState(false);
     const [score, setScore] = useState(0);
@@ -54,7 +63,7 @@ const InsulinTest = () => {
             <div className="text-center">
                 {isSummaryStep ? (
                     <p className="text-xl font-semibold py-4">
-                        {`YOUR SCORE: ${(score / insulinTestQuestions.length) * 100}%`}
+                        {`${scoreText} ${(score / insulinTestQuestions.length) * 100}%`}
                     </p>
                 ) : (
                     <p className="text-xl font-semibold py-4">
@@ -98,7 +107,7 @@ const InsulinTest = () => {
                             <div
                                 className={`text-${insulinTestQuestions[currentStep].answers[selectedAnswer].isCorrect ? "green" : "red"}-500 mt-4`}>
                                 {insulinTestQuestions[currentStep].answers[selectedAnswer].isCorrect
-                                    ? "Correct!"
+                                    ? `${correctButtonText}`
                                     : insulinTestQuestions[currentStep].explanation[language as keyof Texts]}
                             </div>
                         )}

src/components/Opening.tsx

 import {useRef} from 'react';
 import {AnimateCC} from 'react-adobe-animate';
 import Typewriter, {TypewriterClass} from "typewriter-effect";
-import {diabetesTheorem, nextButton, opening, toChapter} from "../../public/lit/texts";
+import {diabetesTheorem, nextButton, opening, toTest} from "../../public/lit/texts";
 import {useAnimate} from "../hooks/useAnimate";
 import {useTranslate} from "../hooks/useTranslate";
 
 const Opening = () => {
     const firstTheoremText = useTranslate(diabetesTheorem);
     const nextButtonText = useTranslate(nextButton);
-    const chapter2Text = useTranslate(toChapter) + "2";
+    const testText = useTranslate(toTest);
     const typewriterRef = useRef<TypewriterClass>();
 
     const {getAnimationObject, handleClick, isAnimationComplete, isLast, onInit, paused} = useAnimate({
         typewriterRef,
-        link: '/opening',
+        link: '/InsulinTest',
         text: opening
     });
 
@@ -57,7 +57,7 @@ const Opening = () => {
                                 !isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-main'
                             }`}
                         >
-                            {isLast ? chapter2Text : nextButtonText}
+                            {isLast ? testText : nextButtonText}
                         </button>
                     </div>
                 </div>