Merge pull request #337 from bounswe/287/mobile-features

287/mobile features

mobile/Quizzard/components/QuizSolveQuizHeader.tsx

@@ -1,56 +1,61 @@
 // QuizSolvingScreen.js
 import React, { useState } from 'react';
 import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  Alert,
+    View,
+    Text,
+    StyleSheet,
+    TouchableOpacity,
+    Alert,
 } from 'react-native';
 
 const QuizHeader = ({ quizName, questionIndex, totalQuestions }) => {
     return (
-    <View style={styles.headerContainer}>
-        {/* Quiz Name with rounded rectangle background */}
-        <View style={styles.headerBox}>
-            <Text style={styles.headerText}>{quizName}</Text>
-        </View>
+        <View style={styles.headerContainer}>
+            {/* Quiz Name with rounded rectangle background */}
+            <View style={styles.headerBox}>
+                <Text style={styles.quizName}>{quizName}</Text>
+            </View>
 
-        {/* Question Number with rounded rectangle background */}
-        <View style={styles.headerBox}>
-            <Text style={styles.headerText}>
-            Question {questionIndex + 1} / {totalQuestions}
-            </Text>
+            {/* Question Number with rounded rectangle background */}
+            <View style={styles.headerBox}>
+                <Text style={styles.questionCountText}>
+                    Question {questionIndex + 1} / {totalQuestions}
+                </Text>
+            </View>
         </View>
-    </View>
     );
 };
-  
+
 
 const styles = StyleSheet.create({
-headerContainer: {
-    position: 'absolute',
-    top: 50, // Adjust this to move it further from the top
-    left: 20,
-    right: 20,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingVertical: 10,
-},
-headerBox: {
-    backgroundColor: '#d3d3d3', // Light grey background color
-    paddingVertical: 10,
-    paddingHorizontal: 15,
-    borderRadius: 10, // Rounded corners
-    opacity: 0.9, // Slight opacity
-},
-headerText: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: '#000000', // Black text
-},
+    headerContainer: {
+        position: 'absolute',
+        top: 50, // Adjust this to move it further from the top
+        left: 20,
+        right: 20,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingVertical: 10,
+    },
+    headerBox: {
+        backgroundColor: '#d3d3d3', // Light grey background color
+        paddingVertical: 10,
+        paddingHorizontal: 15,
+        borderRadius: 10, // Rounded corners
+        opacity: 0.9, // Slight opacity
+    },
+    quizName: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: '#6a0dad', // Purple text
+    },
+    questionCountText: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: '#000000', // Black text
+    },
 });
-  
+
 
 export default QuizHeader;

mobile/Quizzard/screens/BaseLayout.tsx

@@ -78,6 +78,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     padding: 16,
     backgroundColor: "#fff",
+    paddingBottom: 180,
   },
   appName: {
     fontSize: 24,

mobile/Quizzard/screens/HomeScreen.tsx

@@ -91,15 +91,15 @@ const HomePage = ({ navigation }) => {
     navigation.navigate("QuizCreation");
   };
 
-  const navigateToMockQuiz = (questions) => {
-    navigation.navigate("QuizSolving", { questions });
+  const navigateToMockQuiz = (quiz, questions) => {
+    navigation.navigate("QuizSolving", { quiz, questions });
   };
   // do noth
   const renderOtherQuizzes = ({ item }: { item: Quiz }) => (
     <View style={styles.quizWrapper}>
       <QuizViewComponent
         quiz={item}
-        onPress={() => navigateToMockQuiz(item.questions)}
+        onPress={() => navigateToMockQuiz(item, item.questions)}
       />
     </View>
   );
@@ -140,7 +140,7 @@ const HomePage = ({ navigation }) => {
               <QuizViewComponent
                 key={quiz.id}
                 quiz={quiz}
-                onPress={() => navigateToMockQuiz(quiz.questions)}
+                onPress={() => navigateToMockQuiz(quiz, quiz.questions)}
               />
             ))
           ) : (
@@ -187,7 +187,6 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginTop: 40, // Adjusted from 320 for better layout
     marginBottom: 10,
     paddingLeft: 15,
     paddingRight: 15,
@@ -212,7 +211,7 @@ const styles = StyleSheet.create({
     textAlign: "center",
   },
   quizSection: {
-    height: 220, // Adjusted for better visibility
+    height: 240, // Adjusted for better visibility
   },
   quizScroll: {
     paddingLeft: 15,

mobile/Quizzard/screens/QuizSolvingScreen.tsx

@@ -5,7 +5,7 @@ import Icon from "react-native-vector-icons/MaterialIcons"; // Import the icon
 import QuizHeader from "../components/QuizSolveQuizHeader";
 
 const QuizSolvingScreen = ({ route, navigation }) => {
-  const { questions } = route.params; // Access the passed data
+  const { quiz, questions } = route.params; // Access the passed data
   const [questionIndex, setQuestionIndex] = useState(0);
   const [selectedAnswers, setSelectedAnswers] = useState([]);
   const [curentQuestionIsAnswered, setCurentQuestionIsAnswered] =
@@ -47,7 +47,7 @@ const QuizSolvingScreen = ({ route, navigation }) => {
   return (
     <View style={styles.container}>
       <QuizHeader
-        quizName={"Demo Quiz"} //TODO: add laters
+        quizName={quiz.title} //TODO: add laters
         questionIndex={questionIndex}
         totalQuestions={questions.length}
       />
@@ -60,7 +60,7 @@ const QuizSolvingScreen = ({ route, navigation }) => {
             backgroundColor = "#FFFFFF"; // Match the background color
           } else {
             if (answer === question.correctAnswer) {
-              backgroundColor = "green"; // Correct answer
+              backgroundColor = "#6a0dad"; // Correct answer
             } else if (answer === selectedAnswers[selectedAnswers.length - 1]) {
               backgroundColor = "red"; // Selected answer
             } else {
@@ -89,6 +89,20 @@ const QuizSolvingScreen = ({ route, navigation }) => {
           {/* Replace text with right-pointing arrow icon */}
           <Icon name="arrow-forward" size={24} color="#000" />
         </TouchableOpacity>
+
+      </View>
+        {/* Cancel and Submit Buttons */}
+        <View style={styles.bottomButtons}>
+        <TouchableOpacity style={styles.cancelButton} onPress={() => navigation.goBack()}>
+          <Text style={styles.cancelButtonText}>Cancel</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+        style={styles.submitButton}
+        onPress={() => navigation.goBack()}>
+         {/*Upon submission of the quiz, navigate back to the home screen for now*/}
+          <Text style={styles.submitButtonText}>Submit</Text>
+        </TouchableOpacity>
       </View>
     </View>
   );
@@ -107,6 +121,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 15,
     borderRadius: 10, // Rounded corners
     opacity: 0.9, // Slight opacity
+    marginTop: 40,
   },
   questionText: {
     fontSize: 20,
@@ -138,6 +153,33 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
     paddingHorizontal: 60, // Adjust for smaller button size
   },
+  bottomButtons: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: 25,
+  },
+  cancelButton: {
+    backgroundColor: "#555",
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+  },
+  cancelButtonText: {
+    color: "#fff",
+    fontWeight: "bold",
+    fontSize: 16,
+  },
+  submitButton: {
+    backgroundColor: "#6a0dad",
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+  },
+  submitButtonText: {
+    color: "#fff",
+    fontWeight: "bold",
+    fontSize: 16,
+  },
 });
 
 export default QuizSolvingScreen;