SCRUM-109 Complete integration with backend for questions data

frontend/iQMA-Skills-Builder/app/VideoQuiz.tsx

@@ -1,76 +1,37 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {ScrollView, StyleSheet, Text, Image, View} from 'react-native';
 import SectionCard from '@/components/SectionCard';
-import React, {useLayoutEffect, useState} from 'react';
-import {useNavigation} from '@react-navigation/native';
+import React, { useEffect, useLayoutEffect, useState } from 'react';
+import { useNavigation } from '@react-navigation/native';
 import ProgressBar from '@/components/ProgressBar';
-import {QuizCard} from '@/components/QuizCard';
-import {router} from 'expo-router';
+import { QuizCard } from '@/components/QuizCard';
+import axios from 'axios';
+import { router } from 'expo-router';
+import { Question } from '@/constants/Quiz';
 
 export default function VideoQuiz() {
     const navigation = useNavigation();
     const [currentQnsIdx, setCurrentQnsIdx] = useState(0);
+    const [questions, setQuestions] = useState<Question[]>([]);;
+
+    const lessonName = "Lesson 1a: Understanding Verbal and Non-verbal Signals";
+    const sectionID = "SEC0001";
+    const unitID = "UNIT0001";
+    const lessonID = "1a";
 
-    const lessonName = 'Lesson 1a: Understanding Verbal and Non-verbal Signals';
-
-    const questions = [
-        {
-            quizID: 1,
-            questionNo: 1,
-            question:
-                'Which aspect of communication is most crucial in environments requiring explicit clarity and detail?',
-            option1: {
-                option: 'Non-verbal cues',
-                explanation:
-                    'Incorrect. Non-verbal cues are important but do not provide explicit clarity and detail. They can enhance communication but are not sufficient for providing detailed explanations.',
-            },
-            option2: {
-                option: 'Written documentation',
-                explanation:
-                    'Incorrect. Written documentation is important for clarity but the question emphasizes the role of verbal explanations in dynamic interactions. Written documentation is static and does not allow for immediate clarification or interaction.',
-            },
-            option3: {
-                option: 'Verbal explanations',
-                explanation:
-                    'Correct. Verbal explanations are essential in scenarios like negotiations, where explicit clarity and detail are critical. They allow for immediate feedback, questions, and clarification.',
-            },
-            option4: {
-                option: 'Visual aids',
-                explanation:
-                    'Incorrect. Visual aids support communication but are not sufficient alone for providing detailed explanations. They enhance verbal communication but cannot replace the need for clear verbal explanations.',
-            },
-            answer: 'option3',
-            isSelfReflection: false,
-        },
-        {
-            quizID: 1,
-            questionNo: 2,
-            question:
-                'In which scenario might non-verbal communication play a more significant role than verbal communication?',
-            option1: {
-                option: 'Negotiating a contract',
-                explanation:
-                    'Incorrect. Negotiating a contract relies heavily on clear verbal communication. Although non-verbal cues can be important, the primary mode of communication is verbal.',
-            },
-            option2: {
-                option: 'Delivering a technical presentation',
-                explanation:
-                    'Incorrect. Delivering a technical presentation typically relies on clear verbal and visual communication. Verbal communication is essential for explaining technical details.',
-            },
-            option3: {
-                option: 'Comforting a colleague in distress',
-                explanation:
-                    'Correct. Non-verbal communication, such as gestures and facial expressions, plays a significant role in comforting someone. Physical presence, touch, and facial expressions can convey empathy and support more effectively than words.',
-            },
-            option4: {
-                option: 'Writing an email to a client',
-                explanation:
-                    'Incorrect. Writing an email is a form of written communication. Non-verbal communication does not play a role in written emails, where the communication is text-based.',
-            },
-            answer: 'option3',
-            isSelfReflection: false,
-        },
-    ];
+    useEffect(() => {
+        const fetchQuestions = async () => {
+            try {
+                const response = await axios.get(
+                    `${process.env.EXPO_PUBLIC_LOCALHOST_URL}/quiz/getquestions/${sectionID}/${unitID}/${lessonID}`
+                );
+                setQuestions(response.data)
+            } catch (e) {
+                console.error(e);
+            }
+        };
+        fetchQuestions();
+    }, [sectionID, unitID, lessonID]);
 
     useLayoutEffect(() => {
         navigation.setOptions({
@@ -85,8 +46,10 @@ export default function VideoQuiz() {
         if (newIdx < questions.length) {
             await AsyncStorage.setItem('currentQnsIdx', newIdx.toString());
             setCurrentQnsIdx(newIdx);
-        } else {
-            router.replace('SectionIntroduction');
+        }
+        else {
+            // TO CHANGE:
+            router.replace("SectionIntroduction");
         }
     };
 
@@ -121,10 +84,9 @@ export default function VideoQuiz() {
                         source={require('@/assets/images/deepinthought.png')}
                     />
                 </View>
-                <QuizCard
-                    questionData={questions[currentQnsIdx]}
-                    onNextQuestion={handleNextQuestion}
-                />
+                {questions.length > 0 && questions[currentQnsIdx] && (
+                    <QuizCard questionData={questions[currentQnsIdx]} onNextQuestion={handleNextQuestion} />
+                )}
             </View>
         </ScrollView>
     );

frontend/iQMA-Skills-Builder/components/CustomButton.tsx

@@ -11,7 +11,7 @@ export const CustomButton = ({
     onPressHandler = () => {},
     capitalise = true,
 }) => {
-    const textStyle = capitalise ? 'uppercase' : 'capitalize';
+    const textStyle = capitalise ? 'uppercase' : 'none';
 
     return (
         <View>

frontend/iQMA-Skills-Builder/components/QuizCard.tsx

@@ -1,32 +1,11 @@
 import {Image, StyleSheet, Text, View, Modal} from 'react-native';
 import React, {useState} from 'react';
 import {CustomButton} from '@/components/CustomButton';
+import { Option, Question } from '@/constants/Quiz';
 
-interface Option {
-    option: string;
-    explanation: string;
-}
-
-interface QuestionData {
-    quizID: number;
-    questionNo: number;
-    question: string;
-    option1: Option;
-    option2: Option;
-    option3: Option;
-    option4: Option;
-    answer: string;
-    isSelfReflection: boolean;
-}
-
-export const QuizCard: React.FC<{
-    questionData: QuestionData;
-    onNextQuestion: () => void;
-}> = ({questionData, onNextQuestion}) => {
-    const {question, option1, option2, option3, option4, answer} = questionData;
-    const [selectedButton, setSelectedButton] = useState<Option | undefined>(
-        undefined
-    );
+export const QuizCard: React.FC<{ questionData: Question, onNextQuestion: () => void}> = ({ questionData, onNextQuestion }) => {
+    const { question, option1, option2, option3, option4, answer } = questionData;
+    const [selectedButton, setSelectedButton] = useState<Option | undefined>(undefined);
     const [selectedLabel, setSelectedLabel] = useState<string>('');
     const [modalVisible, setModalVisible] = useState<boolean>(false);
     const [isCorrect, setIsCorrect] = useState<boolean>(false);
@@ -174,11 +153,9 @@ export const QuizCard: React.FC<{
                         </Text>
                         <View style={{alignItems: 'center'}}>
                             <CustomButton
-                                label={isCorrect ? 'continue' : 'try again'}
-                                labelColor='#18113C'
-                                backgroundColor={
-                                    isCorrect ? '#8CE5CB' : '#E66A63'
-                                }
+                                label={isCorrect ? "continue" : "try again"}
+                                labelColor={isCorrect ? "#18113C" : "#FFFFFF"}
+                                backgroundColor={isCorrect ? '#8CE5CB' : '#E66A63'}
                                 borderColor={isCorrect ? '#8CE5CB' : '#E66A63'}
                                 onPressHandler={handleAnswer}
                             />

frontend/iQMA-Skills-Builder/constants/Quiz.ts

@@ -0,0 +1,16 @@
+export interface Option {
+    option: string;
+    explanation: string;
+}
+
+export interface Question {
+    quizID: number;
+    questionNo: number;
+    question: string;
+    option1: Option;
+    option2: Option;
+    option3: Option;
+    option4: Option;
+    answer: string;
+    isSelfReflection: boolean;
+}