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

feat: InsulinTest.tsx

parent 0d46e1cf
No related branches found
No related tags found
No related merge requests found
Pipeline #
Expand all Show whitespace changes
Inline Side-by-side
package-lock.json
+ 118
− 0
View file @ b64d5a10
......@@ -15,6 +15,7 @@
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.0",
"react-scripts": "^5.0.1",
"react-stepa": "^1.0.1",
"recoil": "^0.7.7",
"typewriter-effect": "^2.20.1"
},
......@@ -2305,6 +2306,29 @@
"postcss-selector-parser": "^6.0.10"
}
},
"node_modules/@emotion/is-prop-valid": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
"integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
"dependencies": {
"@emotion/memoize": "^0.8.1"
}
},
"node_modules/@emotion/memoize": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
"integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
},
"node_modules/@emotion/stylis": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
},
"node_modules/@emotion/unitless": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
},
"node_modules/@esbuild/android-arm": {
"version": "0.17.19",
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz",
......@@ -5406,6 +5430,21 @@
"@babel/core": "^7.0.0-0"
}
},
"node_modules/babel-plugin-styled-components": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz",
"integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==",
"dependencies": {
"@babel/helper-annotate-as-pure": "^7.22.5",
"@babel/helper-module-imports": "^7.22.5",
"@babel/plugin-syntax-jsx": "^7.22.5",
"lodash": "^4.17.21",
"picomatch": "^2.3.1"
},
"peerDependencies": {
"styled-components": ">= 2"
}
},
"node_modules/babel-plugin-transform-react-remove-prop-types": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
......@@ -5728,6 +5767,14 @@
"node": ">= 6"
}
},
"node_modules/camelize": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
"integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/caniuse-api": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
......@@ -6171,6 +6218,14 @@
"postcss": "^8.4"
}
},
"node_modules/css-color-keywords": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
"integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
"engines": {
"node": ">=4"
}
},
"node_modules/css-declaration-sorter": {
"version": "6.4.1",
"resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
......@@ -6352,6 +6407,16 @@
"resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
"integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
},
"node_modules/css-to-react-native": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
"integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
"dependencies": {
"camelize": "^1.0.0",
"css-color-keywords": "^1.0.0",
"postcss-value-parser": "^4.0.2"
}
},
"node_modules/css-tree": {
"version": "1.0.0-alpha.37",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
......@@ -8839,6 +8904,14 @@
"he": "bin/he"
}
},
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
......@@ -14694,6 +14767,17 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/react-stepa": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/react-stepa/-/react-stepa-1.0.1.tgz",
"integrity": "sha512-91lFOAoKK7U0rCFeXZrvWyP63/VeJtNYvNP8vlezAmOUWrsOQ5o6cGVDvuJu7ibGd6/3dcFwmXW8vc99HpreKg==",
"dependencies": {
"styled-components": "^5.3.5"
},
"peerDependencies": {
"react": "17.0.2"
}
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
......@@ -15434,6 +15518,11 @@
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
},
"node_modules/shallowequal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
},
"node_modules/shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
......@@ -15814,6 +15903,35 @@
"webpack": "^5.0.0"
}
},
"node_modules/styled-components": {
"version": "5.3.11",
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
"integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
"dependencies": {
"@babel/helper-module-imports": "^7.0.0",
"@babel/traverse": "^7.4.5",
"@emotion/is-prop-valid": "^1.1.0",
"@emotion/stylis": "^0.8.4",
"@emotion/unitless": "^0.7.4",
"babel-plugin-styled-components": ">= 1.12.0",
"css-to-react-native": "^3.0.0",
"hoist-non-react-statics": "^3.0.0",
"shallowequal": "^1.1.0",
"supports-color": "^5.5.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/styled-components"
},
"peerDependencies": {
"react": ">= 16.8.0",
"react-dom": ">= 16.8.0",
"react-is": ">= 16.8.0"
}
},
"node_modules/stylehacks": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
......
package.json
+ 1
− 0
View file @ b64d5a10
......@@ -17,6 +17,7 @@
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.0",
"react-scripts": "^5.0.1",
"react-stepa": "^1.0.1",
"recoil": "^0.7.7",
"typewriter-effect": "^2.20.1"
},
......
public/lit/texts.tsx
+ 152
− 0
View file @ b64d5a10
......@@ -114,9 +114,161 @@ export const nextButton =
SK: "Ďalej"
}
export const finishButton =
{
EN: "Finish",
SK: "Odovzdaj"
}
export const toChapter =
{
EN: "To Chapter ",
SK: "Na kapitolu "
}
export const stepperLabels = [
{
EN: "Insulin",
SK: "Inzulín",
},
{
EN: "Glucose",
SK: "Glukóza",
},
{
EN: "Complications",
SK: "Komplikácie",
},
{
EN: "Purpose",
SK: "Význam",
},
{
EN: "Your score",
SK: "Tvoje skóre",
},
]
export const insulinTestQuestions = [
{
EN: "What is the main role of insulin in our bodies?",
SK: "Aká je hlavná úloha inzulínu v našom tele?",
answers: [
{
EN: "It gives us energy.",
SK: "Dodáva nám energiu.",
isCorrect: false,
},
{
EN: "It breaks down sugar molecules.",
SK: "Rozkladá molekuly cukru.",
isCorrect: false,
},
{
EN: "It allows glucose to enter our cells.",
SK: "Umožňuje glukóze dostať sa do bunky.",
isCorrect: true,
},
{
EN: "It makes us grow taller",
SK: "Umožňuje nám rásť.",
isCorrect: false,
},
],
explanation: {
EN: "Insulin is important because it lets glucose into our cells so we can get energy.",
SK: "Inzulín je dôležitý, lebo dovoľuje glukóze vstúpiť do bunky, aby sme mali energiu.",
},
},
{
EN: "Why is glucose important for our bodies?",
SK: "Prečo je glukóza dôležitá pre naše telo?",
answers: [
{
EN: "It helps us sleep better",
SK: "Pomáha nám spať lepšie",
isCorrect: false,
},
{
EN: "It makes our skin glow",
SK: "Robí našu pokožku žiarivou",
isCorrect: false,
},
{
EN: "It gives us energy",
SK: "Dodáva nám energiu",
isCorrect: true,
},
{
EN: "It makes us laugh",
SK: "Robí nás šťastnými",
isCorrect: false,
},
],
explanation: {
EN: "Glucose is important because it gives our bodies the energy they need to function properly.",
SK: "Glukóza je dôležitá, pretože poskytuje našim telám energiu, ktorú potrebujú na správne fungovanie.",
},
},
{
EN: "What would happen if glucose couldn't enter our cells?",
SK: "Čo by sa stalo, keby sa glukóza nedokázala dostať do našich buniek?",
answers: [
{
EN: "We would become invisible",
SK: "Stali by sme sa neviditeľnými",
isCorrect: false,
},
{
EN: "We would feel very sleepy",
SK: "Cítili by sme sa veľmi ospalí",
isCorrect: false,
},
{
EN: "We would experience unpleasant symptoms",
SK: "Zažívali by sme nepríjemné príznaky",
isCorrect: true,
},
{
EN: "We would become superheroes",
SK: "Stali by sme sa superhrdinami",
isCorrect: false,
},
],
explanation: {
EN: "If glucose couldn't enter our cells, we would experience unpleasant symptoms because our cells wouldn't get the energy they need to function.",
SK: "Ak by sa glukóza nedokázala dostať do našich buniek, zažívali by sme nepríjemné príznaky, pretože naše bunky by nedostávali energiu, ktorú potrebujú na fungovanie.",
},
},
{
EN: "What is the role of insulin in allowing glucose into our cells?",
SK: "Akú úlohu zohráva inzulín pri umožnení vstupu glukózy do našich buniek?",
answers: [
{
EN: "Insulin tells glucose to stay outside",
SK: "Inzulín hovorí glukóze, aby zostala vonku",
isCorrect: false,
},
{
EN: "Insulin helps glucose get inside the cells",
SK: "Inzulín pomáha glukóze dostať sa do buniek",
isCorrect: true,
},
{
EN: "Insulin makes glucose disappear",
SK: "Inzulín robí glukózu neviditeľnou",
isCorrect: false,
},
{
EN: "Insulin makes glucose taste better",
SK: "Inzulín robí glukózu chutnejšou",
isCorrect: false,
},
],
explanation: {
EN: "Insulin plays a vital role in allowing glucose to enter our cells by helping it get inside. Without insulin, glucose can't effectively enter the cells.",
SK: "Inzulín zohráva kľúčovú úlohu pri umožnení vstupu glukózy do našich buniek tým, že jej pomáha dostať sa dovnútra. Bez inzulínu sa glukóza nedokáže efektívne dostávať do buniek.",
},
},
];
src/App.tsx
+ 6
− 6
View file @ b64d5a10
import Intro from './components/Intro';
import Test from './components/Intro';
import {Route, Routes} from 'react-router-dom';
import {FC} from 'react';
import Navbar from './components/Navbar';
import Chapters from './components/Chapters';
import Overview from './components/Overview';
import Opening from "./components/Opening";
import Insulin from "./components/Opening";
import HomePage from "./components/HomePage";
import InsulinTest from "./components/InsulinTest";
const App: FC = () => {
return (
......@@ -17,11 +17,11 @@ const App: FC = () => {
</header>
<Routes>
<Route path="/" element={<HomePage />} index />
<Route path="chapters" element={<Chapters />} />
<Route path="intro" element={<Intro />} />
<Route path="/chapters" element={<Chapters />} />
<Route path="/opening" element={<Opening />} />
<Route path="/overview" element={<Overview />} />
<Route path="/test" element={<Test />} />
<Route path="insulin" element={<Insulin />} />
<Route path="overview" element={<Overview />} />
<Route path="insulinTest" element={<InsulinTest />} />
</Routes>
</div>
</>
......
src/assets/backgrounds/homepage-static.svg
+ 530
− 667
View file @ b64d5a10
This diff is collapsed.
src/components/HomePage.tsx
+ 10
− 7
View file @ b64d5a10
......@@ -21,12 +21,8 @@ const Intro = () => {
return (
<>
<div className="bg-primary-dark h-screen">
<div className="absolute bottom-0">
<img src="src/assets/backgrounds/homepage-static.svg" alt="background picture"/>
</div>
</div>
<div>
<div className="flex-grow flex flex-col justify-center items-center">
<button
onClick={handleClick}
className="mt-20 border-2 border-black font-primary bg-primary-light z-10 absolute top-28 left-28">
......@@ -55,6 +51,13 @@ const Intro = () => {
</button>
</div>
)}
<div className="bg-primary-dark">
<img
src="src/assets/backgrounds/homepage-static.svg"
alt="background picture"
className="mt-4"
/>
</div>
</div>
</>
);
......
src/components/InsulinTest.tsx 0 → 100644
+ 131
− 0
View file @ b64d5a10
import {useState} from "react";
import {finishButton, insulinTestQuestions, nextButton, stepperLabels} 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 [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">
{`YOUR SCORE: ${(score / insulinTestQuestions.length) * 100}%`}
</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
? "Correct!"
: 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;
src/components/Intro.tsx
+ 1
− 1
View file @ b64d5a10
......@@ -12,7 +12,7 @@ const Intro = () => {
const {getAnimationObject, handleClick, isAnimationComplete, isLast, onInit, paused} = useAnimate({
typewriterRef,
link: '/opening',
link: '/insulin',
text: intro
});
......
src/components/Navbar.tsx
+ 1
− 1
View file @ b64d5a10
......@@ -10,7 +10,7 @@ const Navbar = () => {
return (
<nav className="bg-primary-main">
<div className="p-2 flex justify-between">
<div className="p-2 mx-auto flex justify-between">
<div>
<img src={logo} alt="Logo"
onClick={() => navigate("/")}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment