minor ui fix

web-app/frontend/src/components/activities/ActivityContainer.jsx

@@ -12,6 +12,8 @@ import {
 import LetterPattern from "./mentalChronometryEval/letterPattern/LetterPattern";
 import Coding from "./mentalChronometryEval/coding/Coding";
 import PairCancerlation from "./mentalChronometryEval/pairCancerlation/PairCancerlation";
+import CreativeAttention from "./attentionEval/creativeSide/CreativeContainer";
+import AnalyticalAttention from "./attentionEval/analyticalSide/AnalyticalContainer";
 import { useNavigate } from "react-router-dom";
 
 const ActivityContainer = () => {
@@ -30,93 +32,116 @@ const ActivityContainer = () => {
     }, 2000);
   };
 
-  const changeColor = () => {
-    let currentDiv = document.getElementsById({ currentActivityNo });
-    alert("hi");
-  };
-
   return (
     <>
       <div className="activity-container-angry-grid">
         <div id="activity-container-item-0">
           <div
             id="1"
+            style={{
+              backgroundColor: currentActivityNo === 1 ? 'white' : 'teal',
+              color: currentActivityNo === 1 ? 'teal' : 'white',
+              fontWeight: currentActivityNo === 1 ? 'bold' : 'normal'
+            }}
             className="activity-container-navigator-item"
             onClick={() => {
               setCurrentActivityNo(1);
               setIsGuideVideoClicked(true);
-              changeColor();
             }}
           >
             1
           </div>
           <div
             id="2"
+            style={{
+              backgroundColor: currentActivityNo === 2 ? 'white' : 'teal',
+              color: currentActivityNo === 2 ? 'teal' : 'white',
+              fontWeight: currentActivityNo === 2 ? 'bold' : 'normal'
+            }}
             className="activity-container-navigator-item"
             onClick={() => {
               setCurrentActivityNo(2);
               setIsGuideVideoClicked(true);
-              changeColor();
             }}
           >
             2
           </div>
           <div
             id="3"
+            style={{
+              backgroundColor: currentActivityNo === 3 ? 'white' : 'teal',
+              color: currentActivityNo === 3 ? 'teal' : 'white',
+              fontWeight: currentActivityNo === 3 ? 'bold' : 'normal'
+            }}
             className="activity-container-navigator-item"
             onClick={() => {
               setCurrentActivityNo(3);
               setIsGuideVideoClicked(true);
-              changeColor();
             }}
           >
             3
           </div>
           <div
             id="4"
+            style={{
+              backgroundColor: currentActivityNo === 4 ? 'white' : 'teal',
+              color: currentActivityNo === 4 ? 'teal' : 'white',
+              fontWeight: currentActivityNo === 4 ? 'bold' : 'normal'
+            }}
             className="activity-container-navigator-item"
             onClick={() => {
               setCurrentActivityNo(4);
               setIsGuideVideoClicked(true);
-              changeColor();
             }}
           >
             4
           </div>
           <div
             id="5"
+            style={{
+              backgroundColor: currentActivityNo === 5 ? 'white' : 'teal',
+              color: currentActivityNo === 5 ? 'teal' : 'white',
+              fontWeight: currentActivityNo === 5 ? 'bold' : 'normal'
+            }}
             className="activity-container-navigator-item"
             onClick={() => {
               setCurrentActivityNo(5);
               setIsGuideVideoClicked(true);
-              changeColor();
             }}
           >
             5
           </div>
           <div
             id="6"
+            style={{
+              backgroundColor: currentActivityNo === 6 ? 'white' : 'teal',
+              color: currentActivityNo === 6 ? 'teal' : 'white',
+              fontWeight: currentActivityNo === 6 ? 'bold' : 'normal'
+            }}
             className="activity-container-navigator-item"
             onClick={() => {
               setCurrentActivityNo(6);
               setIsGuideVideoClicked(true);
-              changeColor();
             }}
           >
             6
           </div>
           <div
             id="7"
+            style={{
+              backgroundColor: currentActivityNo === 7 ? 'white' : 'teal',
+              color: currentActivityNo === 7 ? 'teal' : 'white',
+              fontWeight: currentActivityNo === 7 ? 'bold' : 'normal'
+            }}
             className="activity-container-navigator-item"
             onClick={() => {
               setCurrentActivityNo(7);
               setIsGuideVideoClicked(true);
-              changeColor();
             }}
           >
             7
           </div>
-          <div
+          {/* <div
             id="8"
             className="activity-container-navigator-itemx"
             onClick={() => {
@@ -124,6 +149,36 @@ const ActivityContainer = () => {
             }}
           >
             8
+          </div> */}
+          <div
+            id="9"
+            style={{
+              backgroundColor: currentActivityNo === 9 ? 'white' : 'teal',
+              color: currentActivityNo === 9 ? 'teal' : 'white',
+              fontWeight: currentActivityNo === 9 ? 'bold' : 'normal'
+            }}
+            className="activity-container-navigator-item"
+            onClick={() => {
+              setCurrentActivityNo(9);
+              setIsGuideVideoClicked(true);
+            }}
+          >
+            9 WIP
+          </div>
+          <div
+            id="10"
+            style={{
+              backgroundColor: currentActivityNo === 10 ? 'white' : 'teal',
+              color: currentActivityNo === 10 ? 'teal' : 'white',
+              fontWeight: currentActivityNo === 10 ? 'bold' : 'normal'
+            }}
+            className="activity-container-navigator-item"
+            onClick={() => {
+              setCurrentActivityNo(10);
+              setIsGuideVideoClicked(true);
+            }}
+          >
+            10 WIP
           </div>
         </div>
         <div id="activity-container-item-1">
@@ -155,6 +210,12 @@ const ActivityContainer = () => {
               {currentActivityNo === 7 && (
                 <DigitSpanController nextActivity={nextActivityHandler} />
               )}
+              {currentActivityNo === 9 && (
+                <CreativeAttention nextActivity={nextActivityHandler} />
+              )}
+              {currentActivityNo === 10 && (
+                <AnalyticalAttention nextActivity={nextActivityHandler} />
+              )}
             </>
           )}
         </div>

web-app/frontend/src/components/activities/attentionEval/analyticalSide/AnalyticalContainer.jsx

+import React, { useState, useRef, useEffect } from "react";
+
+function AnalyticalAttention() {
+    return (
+        <p>Hello</p>
+    )
+}
+
+export default AnalyticalAttention
\ No newline at end of file

web-app/frontend/src/components/activities/attentionEval/creativeSide/CreativeContainer.jsx

+import React, { useState, useRef, useEffect } from "react";
+
+function CreativeAttention () {
+    return (
+        <p>Hello creative people</p>
+    )
+}
+
+export default CreativeAttention
\ No newline at end of file

web-app/frontend/src/utility/videos.jsx

@@ -31,7 +31,10 @@ const Video = ({ currentActivtyIndex, changeScreen }) => {
         setVideoLink("/Videos/vid4.mp4");
         break;
       case 9:
-        setVideoLink("/Videos/vid5.mp4");
+        setVideoLink("/Videos/vid4.mp4");
+        break;
+      case 10:
+        setVideoLink("/Videos/vid4.mp4");
         break;
       default:
     }