diff --git a/app/(quiz)/_layout.tsx b/app/(quiz)/_layout.tsx
new file mode 100644
index 0000000..b4ef1de
--- /dev/null
+++ b/app/(quiz)/_layout.tsx
@@ -0,0 +1,9 @@
+import { Stack } from "expo-router";
+
+export default function QuizLayout() {
+ return (
+
+
+
+ );
+}
diff --git a/app/(quiz)/quiz.tsx b/app/(quiz)/quiz.tsx
new file mode 100644
index 0000000..dc59fdd
--- /dev/null
+++ b/app/(quiz)/quiz.tsx
@@ -0,0 +1,53 @@
+import BackButton from "@/components/BackButton";
+import GoalQuestion from "@/components/quiz/GoalQuestion";
+import LvlQuestion from "@/components/quiz/LvlQuestion";
+import { QuestionChildProps } from "@/components/quiz/Question";
+import Button from "@/components/ui/Button";
+import Screen from "@/components/ui/Screen";
+import Text from "@/components/ui/Text";
+import React, { ForwardRefExoticComponent, RefAttributes } from "react";
+import { View } from "react-native";
+
+export default function Quiz() {
+ const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0);
+ const questions: ForwardRefExoticComponent<
+ QuestionChildProps & RefAttributes
+ >[] = [GoalQuestion, LvlQuestion];
+
+ const goBack = () => {
+ if (currentQuestionIndex >= 1) {
+ setCurrentQuestionIndex(currentQuestionIndex - 1);
+ }
+ };
+
+ const goNext = () => {
+ if (currentQuestionIndex < questions.length - 1) {
+ setCurrentQuestionIndex(currentQuestionIndex + 1);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ Question {currentQuestionIndex + 1} / {questions.length}
+
+
+
+ {questions.map((QuestionComponent, index) => (
+
+ {index == currentQuestionIndex && (
+
+ )}
+
+ ))}
+
+
+
+ );
+}
diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
index e6ee3da..6126317 100644
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -18,7 +18,7 @@ export default function TabBarLayout() {
if (!session) {
// On web, static rendering will stop here as the user is not authenticated
// in the headless Node process that the pages are rendered in.
- return ;
+ return ;
}
return (
(
+ (props, ref): React.ReactElement => {
+ const { ...rest } = props;
+ return (
+
+ );
+ }
+);
diff --git a/components/quiz/LvlQuestion.tsx b/components/quiz/LvlQuestion.tsx
new file mode 100644
index 0000000..df81f7c
--- /dev/null
+++ b/components/quiz/LvlQuestion.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import Question, { QuestionChildProps } from "./Question";
+
+export default React.forwardRef(
+ (props, ref): React.ReactElement => {
+ const { ...rest } = props;
+ return (
+
+ );
+ }
+);
diff --git a/components/quiz/Question.tsx b/components/quiz/Question.tsx
new file mode 100644
index 0000000..e9bafe7
--- /dev/null
+++ b/components/quiz/Question.tsx
@@ -0,0 +1,29 @@
+import Text from "@/components/ui/Text";
+import React from "react";
+import { View, ViewProps } from "react-native";
+
+export interface QuestionChildProps extends ViewProps {
+ isVisible: boolean;
+}
+
+interface QuestionProps extends QuestionChildProps {
+ question: string;
+}
+
+export default React.forwardRef(
+ (props, ref): React.ReactElement => {
+ const { question, isVisible, children, ...rest } = props;
+ const getClassName = () => {
+ return "gap-4" + " " + (isVisible ? "block" : "hidden");
+ };
+
+ return (
+
+
+ {question}
+
+ {children}
+
+ );
+ }
+);