feat: addquiz feature

app/quiz/_layout.js

@@ -0,0 +1,9 @@
+import { Stack } from "expo-router";
+
+export default function Layout() {
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="quiz" />
+    </Stack>
+  );
+}

app/quiz/quiz-questions.js

@@ -0,0 +1,43 @@
+export const quizQuestions = [
+  {
+    question: "How often do you feel sad or down?",
+    options: ["Never", "Rarely", "Sometimes", "Frequently"],
+  },
+  {
+    question: "How often do you have trouble concentrating?",
+    options: ["Never", "Rarely", "Sometimes", "Frequently"],
+  },
+  {
+    question: "How often do you feel overwhelmed by daily tasks?",
+    options: ["Never", "Rarely", "Sometimes", "Frequently"],
+  },
+  {
+    question: "How often do you experience anxiety?",
+    options: ["Never", "Rarely", "Sometimes", "Frequently"],
+  },
+  {
+    question: "How often do you have trouble sleeping?",
+    options: ["Never", "Rarely", "Sometimes", "Frequently"],
+  },
+  {
+    question: "How often do you feel irritable or angry?",
+    options: ["Never", "Rarely", "Sometimes", "Frequently"],
+  },
+  {
+    question: "How often do you feel hopeless about the future?",
+    options: ["Never", "Rarely", "Sometimes", "Frequently"],
+  },
+  {
+    question: "How often do you engage in activities you used to enjoy?",
+    options: ["Never", "Rarely", "Sometimes", "Frequently"],
+  },
+  {
+    question:
+      "How often do you experience physical symptoms like headaches or stomachaches?",
+    options: ["Never", "Rarely", "Sometimes", "Frequently"],
+  },
+  {
+    question: "How often do you feel disconnected from others?",
+    options: ["Never", "Rarely", "Sometimes", "Frequently"],
+  },
+];

app/quiz/quiz.js

@@ -0,0 +1,172 @@
+import React, { useState, useEffect } from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { quizQuestions } from "./quiz-questions";
+
+const shuffleArray = (array) => {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+};
+
+const Quiz = ({ navigation }) => {
+  const [questions, setQuestions] = useState(quizQuestions);
+  const [ques, setQues] = useState(0);
+  const [options, setOptions] = useState([]);
+  const [score, setScore] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const getQuiz = async () => {
+      setIsLoading(true);
+      const url =
+        "https://opentdb.com/api.php?amount=10&type=multiple&encode=url3986";
+      const res = await fetch(url);
+      const data = await res.json();
+      setQuestions(data.results);
+      setOptions(generateOptionsAndShuffle(data.results[0]));
+      setIsLoading(false);
+    };
+    getQuiz();
+  }, []);
+
+  const handleNextPress = () => {
+    setQues(ques + 1);
+    setOptions(generateOptionsAndShuffle(questions[ques + 1]));
+  };
+
+  const generateOptionsAndShuffle = (_question) => {
+    const options = [..._question.incorrect_answers];
+    options.push(_question.correct_answer);
+
+    shuffleArray(options);
+
+    return options;
+  };
+
+  const handlSelectedOption = (_option) => {
+    if (_option === questions[ques].correct_answer) {
+      setScore(score + 10);
+    }
+    if (ques !== 9) {
+      setQues(ques + 1);
+      setOptions(generateOptionsAndShuffle(questions[ques + 1]));
+    }
+    if (ques === 9) {
+      handleShowResult();
+    }
+  };
+
+  const handleShowResult = () => {
+    navigation.navigate("Result", {
+      score: score,
+    });
+  };
+
+  return (
+    <View style={styles.container}>
+      {isLoading ? (
+        <View style={styles.loadingContainer}>
+          <Text style={styles.loadingText}>LOADING...</Text>
+        </View>
+      ) : (
+        <View style={styles.parent}>
+          <View style={styles.top}>
+            <Text style={styles.question}>
+              Q. {decodeURIComponent(questions[ques].question)}
+            </Text>
+          </View>
+          <View style={styles.options}>
+            {options.map((option, index) => (
+              <TouchableOpacity
+                key={index}
+                style={styles.optionButtom}
+                onPress={() => handlSelectedOption(option)}
+              >
+                <Text style={styles.option}>{decodeURIComponent(option)}</Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+          <View style={styles.bottom}>
+            {ques !== 9 && (
+              <TouchableOpacity style={styles.button} onPress={handleNextPress}>
+                <Text style={styles.buttonText}>SKIP</Text>
+              </TouchableOpacity>
+            )}
+            {ques === 9 && (
+              <TouchableOpacity
+                style={styles.button}
+                onPress={handleShowResult}
+              >
+                <Text style={styles.buttonText}>SHOW RESULTS</Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default Quiz;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingTop: 40,
+    paddingHorizontal: 20,
+    height: "100%",
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  loadingText: {
+    fontSize: 32,
+    fontWeight: "700",
+  },
+  top: {
+    marginVertical: 16,
+  },
+  options: {
+    marginVertical: 16,
+    flex: 1,
+  },
+  bottom: {
+    marginBottom: 12,
+    paddingVertical: 16,
+    justifyContent: "space-between",
+    flexDirection: "row",
+  },
+  button: {
+    backgroundColor: "#1A759F",
+    padding: 12,
+    paddingHorizontal: 16,
+    borderRadius: 16,
+    alignItems: "center",
+    marginBottom: 30,
+  },
+  buttonText: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "white",
+  },
+  question: {
+    fontSize: 28,
+  },
+  option: {
+    fontSize: 18,
+    fontWeight: "500",
+    color: "white",
+  },
+  optionButtom: {
+    paddingVertical: 12,
+    marginVertical: 6,
+    backgroundColor: "#34A0A4",
+    paddingHorizontal: 12,
+    borderRadius: 12,
+  },
+  parent: {
+    height: "100%",
+  },
+});