diff --git a/public/lit/texts.tsx b/public/lit/texts.tsx index a5c48cc37afa20a63ce7893554e4115d9e87d5e2..a391da656962c546c2b30dede8749e2875c2900e 100644 --- a/public/lit/texts.tsx +++ b/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", diff --git a/src/atoms/languageAtom.tsx b/src/atoms/languageAtom.tsx index 6d8a4cce9c3baacc31bccdbb665689595bbac5cc..7adafac2fd4ab0c3e213382a2708ecda80f8021e 100644 --- a/src/atoms/languageAtom.tsx +++ b/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' }); diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx index 040f85853a7df0036f8df52edd8147a44cafcf59..50956ffd938b5b30924213143dded9ff982ceed5 100644 --- a/src/components/HomePage.tsx +++ b/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); }; diff --git a/src/components/InsulinTest.tsx b/src/components/InsulinTest.tsx index eb993dc5daaa2303e681553844670c793b6df670..6933005bca986e50769188dba91bba93eba000d5 100644 --- a/src/components/InsulinTest.tsx +++ b/src/components/InsulinTest.tsx @@ -1,5 +1,12 @@ 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> )} diff --git a/src/components/Opening.tsx b/src/components/Opening.tsx index 140b36a682cb930da9ae930f092e60ec4836e66d..115da6870c1b8be616e48477d2edcc2fc07335a1 100644 --- a/src/components/Opening.tsx +++ b/src/components/Opening.tsx @@ -1,19 +1,19 @@ 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>