Skip to content
Snippets Groups Projects
Commit 10e83df9 authored by Katarína Sieklová's avatar Katarína Sieklová
Browse files

feat: language in localStorage, translated test

parent b64d5a10
No related branches found
No related tags found
No related merge requests found
Pipeline #
......@@ -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",
......
......@@ -2,5 +2,5 @@ import {atom} from 'recoil';
export const languageAtom = atom({
key: 'languageState',
default: 'EN',
default: localStorage.getItem('selectedLanguage') || 'EN'
});
......@@ -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);
};
......
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>
)}
......
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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment