diff --git a/app/(quiz)/quiz.tsx b/app/(quiz)/quiz.tsx index 7b64827..951ce6a 100644 --- a/app/(quiz)/quiz.tsx +++ b/app/(quiz)/quiz.tsx @@ -15,6 +15,7 @@ import LvlQuestion from "@/components/quiz/LvlQuestion"; import GenderQuestion from "@/components/quiz/GenderQuestion"; import ActivityQuestion from "@/components/quiz/ActivityQuestion"; import SleepQuestion from "@/components/quiz/SleepQuestion"; +import SportQuestion from "@/components/quiz/SportQuestion"; export default function Quiz() { const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0); @@ -29,7 +30,8 @@ export default function Quiz() { AgeQuestion, BeginnerQuestion, ActivityQuestion, - SleepQuestion + SleepQuestion, + SportQuestion ]; const goBack = () => { diff --git a/components/CheckButtonComponent.tsx b/components/CheckButtonComponent.tsx new file mode 100644 index 0000000..909aaef --- /dev/null +++ b/components/CheckButtonComponent.tsx @@ -0,0 +1,30 @@ +import React, {Component} from "react"; +import {View, Text, TouchableOpacity, Image} from "react-native"; +import {AntDesign, FontAwesome6} from "@expo/vector-icons"; +import {AntDesignIconNames} from "./Icons"; + +interface CheckButtonProps { + label: string; + value: boolean; + onChange: () => void; + icon: AntDesignIconNames | string; +} + +const CheckButton: React.FC = ({ label, value, onChange, icon }) => { + let AwesomIconList = ["weight-scale", "beer"]; + return ( + + + {AwesomIconList.includes(icon) ? ( + + ) : ( + + )} + + + {label} + + ); +}; + +export default CheckButton; \ No newline at end of file diff --git a/components/CheckboxComponent.tsx b/components/CheckboxComponent.tsx index 4365ba4..9103363 100644 --- a/components/CheckboxComponent.tsx +++ b/components/CheckboxComponent.tsx @@ -2,7 +2,6 @@ import React, {Component} from "react"; import {View, Text, TouchableOpacity, Image} from "react-native"; import {AntDesign, FontAwesome6} from "@expo/vector-icons"; import {AntDesignIconNames} from "./Icons"; -import PropTypes, {string} from "prop-types"; interface CheckBoxProps { label: string; diff --git a/components/quiz/SportQuestion.tsx b/components/quiz/SportQuestion.tsx new file mode 100644 index 0000000..ea9520e --- /dev/null +++ b/components/quiz/SportQuestion.tsx @@ -0,0 +1,158 @@ +import React from "react"; +import Question, { QuestionChildProps } from "./Question"; +import CheckButton from "../CheckboxComponent"; +import {View} from "react-native"; +import {FontAwesome6} from "@expo/vector-icons"; + +export default React.forwardRef( + (props, ref): React.ReactElement => { + const { ...rest } = props; + + const [checkedOne, setCheckedOne] = React.useState(true); + const [checkedTwo, setCheckedTwo] = React.useState(false); + const [checkedThree, setCheckedThree] = React.useState(false); + const [checkedFour, setCheckedFour] = React.useState(false); + const [checkedFive, setCheckedFive] = React.useState(false); + const [checkedSix, setCheckedSix] = React.useState(false); + const [checkedSeven, setCheckedSeven] = React.useState(false); + const [checkedEight, setCheckedEight] = React.useState(false); + const [checkedNine, setCheckedNine] = React.useState(false); + const handleChangeOne = () => { + if(!checkedOne) { + setCheckedOne(!checkedOne); + setCheckedTwo(false); + setCheckedThree(false); + setCheckedFour(false); + setCheckedFive(false); + setCheckedSix(false); + setCheckedSeven(false); + setCheckedEight(false); + setCheckedNine(false); + } + }; + const handleChangeTwo = () => { + if(!checkedTwo) { + setCheckedOne(false); + setCheckedTwo(!checkedTwo); + setCheckedThree(false); + setCheckedFour(false); + setCheckedFive(false); + setCheckedSix(false); + setCheckedSeven(false); + setCheckedEight(false); + setCheckedNine(false); + } + }; + const handleChangeThree = () => { + if(!checkedThree) { + setCheckedOne(false); + setCheckedTwo(false); + setCheckedThree(!checkedThree); + setCheckedFour(false); + setCheckedFive(false); + setCheckedSix(false); + setCheckedSeven(false); + setCheckedEight(false); + setCheckedNine(false); + } + }; + const handleChangeFour = () => { + if(!checkedFour) { + setCheckedOne(false); + setCheckedTwo(false); + setCheckedThree(false); + setCheckedFour(!checkedFour); + setCheckedFive(false); + setCheckedSix(false); + setCheckedSeven(false); + setCheckedEight(false); + setCheckedNine(false); + } + }; + const handleChangeFive = () => { + if(!checkedFive) { + setCheckedOne(false); + setCheckedTwo(false); + setCheckedThree(false); + setCheckedFour(false); + setCheckedFive(!checkedFive); + setCheckedSix(false); + setCheckedSeven(false); + setCheckedEight(false); + setCheckedNine(false); + } + }; + const handleChangeSix = () => { + if(!checkedFive) { + setCheckedOne(false); + setCheckedTwo(false); + setCheckedThree(false); + setCheckedFour(false); + setCheckedFive(false); + setCheckedSix(!checkedSix); + setCheckedSeven(false); + setCheckedEight(false); + setCheckedNine(false); + } + }; + const handleChangeSeven = () => { + if(!checkedFive) { + setCheckedOne(false); + setCheckedTwo(false); + setCheckedThree(false); + setCheckedFour(false); + setCheckedFive(false); + setCheckedSix(false); + setCheckedSeven(!checkedSeven); + setCheckedEight(false); + setCheckedNine(false); + } + }; + const handleChangeEight = () => { + if(!checkedFive) { + setCheckedOne(false); + setCheckedTwo(false); + setCheckedThree(false); + setCheckedFour(false); + setCheckedFive(false); + setCheckedSix(false); + setCheckedSeven(false); + setCheckedEight(!checkedEight); + setCheckedNine(false); + } + }; + const handleChangeNine = () => { + if(!checkedFive) { + setCheckedOne(false); + setCheckedTwo(false); + setCheckedThree(false); + setCheckedFour(false); + setCheckedFive(false); + setCheckedSix(false); + setCheckedSeven(false); + setCheckedEight(false); + setCheckedNine(!checkedNine); + } + }; + + return ( + + + + + + + + + + + + + + ); + } +);