You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Mobile/app/(quiz)/quiz.tsx

75 lines
2.7 KiB

import BackButton from "@/components/BackButton";
import { toBgColor, toTextColor } from "@/components/Constants";
import Button from "@/components/ui/Button";
import Screen from "@/components/ui/Screen";
import Text from "@/components/ui/Text";
import React from "react";
import { View } from "react-native";
import FrequencyQuestion from "@/components/quiz/FrequencyQuestion";
import GoalQuestion from "@/components/quiz/GoalQuestion";
import GenderQuestion from "@/components/quiz/GenderQuestion";
import WeightQuestion from "@/components/quiz/WeightQuestion";
import HeightQuestion from "@/components/quiz/HeightQuestion";
import AgeQuestion from "@/components/quiz/AgeQuestion";
import BeginnerQuestion from "@/components/quiz/BeginnerQuestion";
import LvlQuestion from "@/components/quiz/LvlQuestion";
import SleepQuestion from "@/components/quiz/SleepQuestion";
import SportQuestion from "@/components/quiz/SportQuestion";
export default function Quiz() {
const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0);
interface Question<T = any> {
component: React.ForwardRefExoticComponent<T & React.RefAttributes<any>>;
props: T;
}
const questions: Question[] = [
{ component: GoalQuestion, props: {} },
{ component: GenderQuestion, props: {} },
{ component: WeightQuestion, props: {} },
{ component: HeightQuestion, props: {} },
{ component: AgeQuestion, props: {} },
{ component: BeginnerQuestion, props: {} },
{ component: LvlQuestion, props: {} },
{ component: FrequencyQuestion, props: { isMale: true } },
{ component: SportQuestion, props: {} },
{ component: SleepQuestion, props: {} },
];
const goBack = () => {
if (currentQuestionIndex >= 1) {
setCurrentQuestionIndex(currentQuestionIndex - 1);
}
};
const goNext = () => {
if (currentQuestionIndex < questions.length - 1) {
setCurrentQuestionIndex(currentQuestionIndex + 1);
}
};
return (
<Screen>
<View className="gap-4 justify-between h-full">
<View className="flex-row justify-between items-center">
<BackButton onPress={goBack} />
<View className={"px-4 py-2 rounded-2xl" + " " + toBgColor("blue")}>
<Text className={toTextColor("blue")} weight="bold">
{currentQuestionIndex + 1} sur {questions.length}
</Text>
</View>
</View>
{questions.map((question, index) =>
React.createElement(question.component, {
isVisible: index === currentQuestionIndex,
key: index,
...question.props,
})
)}
<Button afterIcon="arrowright" onPress={goNext}>
Suivant
</Button>
</View>
</Screen>
);
}