feat: Give Color To List In All Questions (#21)

CODE-73 · Feb 5, 2024 · f090699 · f090699
1 parent 5e12087
commit f090699
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 5 deletions.
diff --git a/audire/audire-mobile-app/src/machines/MCQ/actions/index.ts b/audire/audire-mobile-app/src/machines/MCQ/actions/index.ts
@@ -88,6 +88,7 @@ export function setStartExam(
     numCorrectAnswers: 0,
     numUnattended: 0,
     numWrongAnswers: 0,
+    visited: {},
   };
 }
 
@@ -96,7 +97,7 @@ export function calculateMarks(context: MCQMachineContext): MCQMachineContext {
     numWrong = 0,
     numUnattended = 0;
   const score = context.questions.reduce((mark, question, idx) => {
-    if (context.markAnswer[idx] !== undefined) {
+    if (context.markAnswer[idx] >= 0) {
       if (context.markAnswer[idx] === question.correctOption) {
         mark += 4;
         numCorrect += 1;
@@ -119,3 +120,16 @@ export function calculateMarks(context: MCQMachineContext): MCQMachineContext {
     numUnattended: numUnattended,
   };
 }
+
+export function markQuestionVisited(
+  context: MCQMachineContext
+): MCQMachineContext {
+  return {
+    ...context,
+    visited: {
+      ...context.visited,
+
+      [context.currentQuestionIdx]: true,
+    },
+  };
+}
diff --git a/audire/audire-mobile-app/src/machines/MCQ/machine.ts b/audire/audire-mobile-app/src/machines/MCQ/machine.ts
@@ -8,6 +8,7 @@ import {
   setMarkToRevisit,
   setStartExam,
   calculateMarks,
+  markQuestionVisited,
 } from './actions';
 import { MCQMachineEvents } from './events';
 import { hasNextQuestion, hasPrevQuestion } from './guards';
@@ -23,7 +24,7 @@ export const MCQMachine = createMachine(
     context: {} as MCQMachineContext,
     states: {
       'attending-question': {
-        entry: ['calculateMarks'],
+        entry: ['calculateMarks', 'markQuestionVisited'],
         on: {
           SUBMIT_EXAM: {
             actions: ['calculateMarks'],
@@ -119,6 +120,9 @@ export const MCQMachine = createMachine(
       calculateMarks: assign(({ context }) => {
         return calculateMarks(context);
       }),
+      markQuestionVisited: assign(({ context }) => {
+        return markQuestionVisited(context);
+      }),
     },
     guards: {
       hasNextQuestion,

diff --git a/audire/audire-mobile-app/src/machines/MCQ/types/context.ts b/audire/audire-mobile-app/src/machines/MCQ/types/context.ts
@@ -6,7 +6,11 @@ export type MarkAnswer = {
 };
 
 export type MarkToRevisit = {
-  [questionId: string]: boolean;
+  [questionIdx: string]: boolean;
+};
+
+export type VisitedQuestions = {
+  [questionIdx: number]: boolean;
 };
 
 export type MCQMachineContext = {
@@ -15,6 +19,7 @@ export type MCQMachineContext = {
   currentQuestionIdx: number;
   markAnswer: MarkAnswer;
   markToRevisit: MarkToRevisit;
+  visited: VisitedQuestions;
   noOfQuestionToRevisit: number;
 
   // On Submit the following are filled

diff --git a/audire/audire-mobile-app/src/modules/mcq-exams/AllQuestions.tsx b/audire/audire-mobile-app/src/modules/mcq-exams/AllQuestions.tsx
@@ -14,19 +14,32 @@ import {
 } from '@gluestack-ui/themed';
 import { TouchableOpacity } from 'react-native';
 import { McqQuestion } from '@learning-app/syllabus';
+import {
+  MarkAnswer,
+  MarkToRevisit,
+  VisitedQuestions,
+} from '../../machines/MCQ/types/context';
 
 type AllQuestionsProps = ComponentProps<typeof Box> & {
   isOpen: boolean;
   onClose: () => void;
+  currentQuestionIdx: number;
   questions: McqQuestion[];
   onJumpToQuestion: (questionIdx: number) => void;
+  markedToRevisit: MarkToRevisit;
+  markAnswer: MarkAnswer;
+  visited: VisitedQuestions;
 };
 
 const AllQuestions: FC<AllQuestionsProps> = ({
   isOpen,
   onClose,
+  currentQuestionIdx,
   questions,
   onJumpToQuestion,
+  markedToRevisit,
+  markAnswer,
+  visited,
 }) => {
   const statusData = [
     { color: '#8FC37D', text: 'Answered' },
@@ -36,6 +49,23 @@ const AllQuestions: FC<AllQuestionsProps> = ({
     { color: '#79D3E7', text: 'To Revisit' },
     { color: 'white', text: 'Not visited' },
   ];
+  const getQuestionColor = (index: number) => {
+    if (markedToRevisit[index] === true) {
+      // To Revisit
+      return '#79D3E7';
+    } else if (markAnswer[index] >= 0) {
+      // Answer Marked
+      return '#8FC37D';
+    } else if (visited[index] === true) {
+      // Unanswered
+      return '#F07A7A';
+    } else {
+      return '$white';
+    }
+  };
+
+  console.log('bbbbb', markedToRevisit);
+  console.log('ccc', markAnswer);
   const ref = React.useRef(null);
   return (
     <Modal
@@ -70,10 +100,12 @@ const AllQuestions: FC<AllQuestionsProps> = ({
                 }}
               >
                 <Box
-                  bg="$white"
+                  bg={getQuestionColor(index)}
                   alignItems="center"
                   justifyContent="center"
                   borderRadius="$lg"
+                  borderColor={'$black'}
+                  borderWidth={currentQuestionIdx === index ? '$2' : undefined}
                   mb="$4"
                   width="$12"
                   height="$12"

diff --git a/audire/audire-mobile-app/src/modules/mcq-exams/McqExamPage.tsx b/audire/audire-mobile-app/src/modules/mcq-exams/McqExamPage.tsx
@@ -92,6 +92,7 @@ const McqExamPage: FC<McqExamPageProps> = ({ questions }) => {
           {showQuestionsDialog && (
             <AllQuestions
               isOpen={showQuestionsDialog}
+              currentQuestionIdx={state.context.currentQuestionIdx}
               onClose={() => setShowQuestionsDialog(false)}
               questions={state.context.questions}
               onJumpToQuestion={(idx) =>
@@ -100,6 +101,9 @@ const McqExamPage: FC<McqExamPageProps> = ({ questions }) => {
                   questionIdx: idx,
                 })
               }
+              markedToRevisit={state.context.markToRevisit}
+              markAnswer={state.context.markAnswer}
+              visited={state.context.visited}
             />
           )}
         </Box>
@@ -187,7 +191,8 @@ const McqExamPage: FC<McqExamPageProps> = ({ questions }) => {
             onPress={() =>
               send({
                 type: 'MARK_ANSWER',
-                selectedOption: option.id,
+                selectedOption:
+                  markAnswer[currentQuestionIdx] === option.id ? -1 : option.id,
               })
             } //MarkAnswer
           >