Newer
Older
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";
import {Texts} from "../hooks/useAnimate";
import {useTranslate} from "../hooks/useTranslate";
import {useNavigate} from "react-router-dom";
const InsulinTest = () => {
const language = useRecoilValue(languageAtom);
const [currentStep, setCurrentStep] = useState(0);
const nextButtonText = useTranslate(nextButton);
const finishButtonText = useTranslate(finishButton);
const correctButtonText = useTranslate(correct);
const scoreText = useTranslate(yourScore);
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
const [selectedAnswer, setSelectedAnswer] = useState(null);
const [isAnswered, setIsAnswered] = useState(false);
const [score, setScore] = useState(0);
const navigate = useNavigate();
const handleNextStep = () => {
setCurrentStep(currentStep + 1);
setSelectedAnswer(null);
setIsAnswered(false);
};
const handleAnswerClick = (index: any) => {
if (!isAnswered) {
setSelectedAnswer(index);
setIsAnswered(true);
if (insulinTestQuestions[currentStep].answers[index].isCorrect) {
setScore(score + 1);
}
}
};
const isLastStep = currentStep === insulinTestQuestions.length - 1;
const isSummaryStep = currentStep === insulinTestQuestions.length;
return (
<div className="container mx-auto py-8">
<Stepper
customStyle={{
completed: '#3D348B',
pending: '#aaccff',
progress: '#5599ff',
}}
steps={stepperLabels.map((question) => ({
label: question[language as keyof Texts],
description: ""
}))}
activeStep={currentStep}
/>
<div className="text-center">
{isSummaryStep ? (
<p className="text-xl font-semibold py-4">
{`${scoreText} ${(score / insulinTestQuestions.length) * 100}%`}
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
</p>
) : (
<p className="text-xl font-semibold py-4">
{language === "EN"
? insulinTestQuestions[currentStep].EN
: insulinTestQuestions[currentStep].SK}
</p>
)}
</div>
<div className="text-center mt-4">
{isSummaryStep ? (
<button
className="bg-primary-light hover:bg-primary-main text-white font-bold py-2 px-4 rounded"
onClick={() => navigate("/")}
>
{nextButtonText}
</button>
) : (
<div>
<div>
{insulinTestQuestions[currentStep].answers.map((answer, index) => (
<button
key={index}
className={`bg-primary-dark ${
selectedAnswer === index
? answer.isCorrect
? "bg-green-500"
: "bg-red-500"
: ""
} ${
selectedAnswer !== null ? "cursor-not-allowed" : ""
} hover:bg-primary-light font-bold py-2 px-4 rounded mr-4`}
onClick={() => handleAnswerClick(index)}
disabled={isAnswered}
>
{language === "EN" ? answer.EN : answer.SK}
</button>
))}
</div>
{selectedAnswer !== null && (
<div
className={`text-${insulinTestQuestions[currentStep].answers[selectedAnswer].isCorrect ? "green" : "red"}-500 mt-4`}>
{insulinTestQuestions[currentStep].answers[selectedAnswer].isCorrect
? `${correctButtonText}`
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
: insulinTestQuestions[currentStep].explanation[language as keyof Texts]}
</div>
)}
{!isLastStep && (
<button
className={`${!isAnswered ? 'bg-gray-main' : 'bg-primary-light hover:bg-primary-main'} text-white font-bold mt-4 py-2 px-4 rounded`}
onClick={handleNextStep}
disabled={!isAnswered}
>
{nextButtonText}
</button>
)}
{isLastStep && (
<button
className={`${!isAnswered ? 'bg-gray-main' : 'bg-primary-light hover:bg-primary-main'} text-white font-bold mt-4 py-2 px-4 rounded`}
onClick={() => {
setCurrentStep(currentStep + 1);
}}
disabled={!isAnswered}
>
{finishButtonText}
</button>
)}
</div>
)}
</div>
</div>
);
};
export default InsulinTest;