Final Fixes of mental chronometry

web-app/frontend/src/components/activities/mentalChronometryEval/coding/Coding.jsx

 import React from "react";
 import CodingContainer from "./CodingContainer";
 
-const Coding = () => {
+const Coding = ({nextActivity}) => {
   return (
     <div>
-      <CodingContainer />
+      <CodingContainer nextActivity={nextActivity}/>
     </div>
   );
 };

web-app/frontend/src/components/activities/mentalChronometryEval/coding/CodingContainer.jsx

@@ -5,7 +5,7 @@ import SignaturePad from "react-signature-canvas";
 import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
 import API from "../../../../config/api";
 
-const CodingContainer = () => {
+const CodingContainer = ({ nextActivity }) => {
   const sigCanvas = useRef({});
   const [time, setTime] = useState({
     seconds: 0,
@@ -185,9 +185,19 @@ const CodingContainer = () => {
       setIsCancelled(true);
       generateScore();
       setActivityCompleted(true);
-      saveScore();
+      setTimeout(() => {
+        saveScore();
+    }, 5000);
     }
   };
+
+  useEffect(() => {
+    if (activityCompleted) {
+      nextActivity();
+    }
+  }, [activityCompleted, nextActivity]);
+
+
   return (
     <div className="justify-items-center h-full">
       {!activityCompleted && (
@@ -304,7 +314,7 @@ const CodingContainer = () => {
         </div>
       )}
 
-      {activityCompleted && (
+      {/* {activityCompleted && (
         <div className="grid grid-cols-1 m-4">
           <div className="grid justify-items-center">
             <img
@@ -327,7 +337,7 @@ const CodingContainer = () => {
             </h1>
           </div>
         </div>
-      )}
+      )} */}
     </div>
   );
 };

web-app/frontend/src/components/activities/mentalChronometryEval/letterPattern/LetterPattern.jsx

@@ -13,7 +13,7 @@ const LetterPattern = ({ nextActivity }) => {
 
   return (
     <div className="h-full  ">
-      <LetterPatternContainer />
+      <LetterPatternContainer nextActivity={nextActivity} />
     </div>
   );
 };

web-app/frontend/src/components/activities/mentalChronometryEval/letterPattern/LetterPatternContainer.jsx

@@ -157,10 +157,19 @@ const LetterPatternContainer = ({ nextActivity }) => {
       setIsCancelled(true);
       generateScore();
       setActivityCompleted(true);
-      saveScore();
+      setTimeout(() => {
+        saveScore();
+    }, 5000);
+      
     }
   };
 
+  useEffect(() => {
+    if (activityCompleted) {
+      nextActivity();
+    }
+  }, [activityCompleted, nextActivity]);
+
   return (
     <div className="justify-items-center h-full">
       {!activityCompleted && (
@@ -237,7 +246,7 @@ const LetterPatternContainer = ({ nextActivity }) => {
         </div>
       )}
 
-      {activityCompleted && (
+      {/* {activityCompleted && (
         <div className="grid grid-cols-1 m-4">
           <div className="grid justify-items-center">
             <img
@@ -260,7 +269,7 @@ const LetterPatternContainer = ({ nextActivity }) => {
             </h1>
           </div>
         </div>
-      )}
+      )} */}
     </div>
   );
 };

web-app/frontend/src/components/activities/mentalChronometryEval/pairCancerlation/PairCancerlation.jsx

 import React from "react";
 import PairCancerlationContainer from "./PairCancerlationContainer";
 
-const PairCancerlation = () => {
+const PairCancerlation = ({nextActivity}) => {
   return (
     <div>
-      <PairCancerlationContainer />
+      <PairCancerlationContainer nextActivity={nextActivity}/>
     </div>
   );
 };

web-app/frontend/src/components/activities/mentalChronometryEval/pairCancerlation/PairCancerlationContainer.jsx

@@ -12,7 +12,7 @@ import PCA4 from "./img/PCA4.png";
 // import { PCA1, PCB1 } from "./img/";
 import axios from "axios";
 
-const PairCancerlationContainer = () => {
+const PairCancerlationContainer = ({nextActivity}) => {
   const [src, selectFile] = useState(null);
   const [activityCompleted, setActivityCompleted] = useState(false);
   const [Pair, setPair] = useState([PCA1, PCA3, PCA4]);
@@ -171,7 +171,6 @@ const PairCancerlationContainer = () => {
     for (let i = 0; i < actualResult.length; i++) {
       if (JSON.stringify(actualResult[i]) === JSON.stringify(predResult[i])) {
         res += 1;
-        alert(res);
         // setFinalScore(result);
       }
     }
@@ -179,9 +178,17 @@ const PairCancerlationContainer = () => {
     // finalResult = result;
     setFinalScore(res);
     console.log(res);
-    saveScore(res);
+    setTimeout(() => {
+      saveScore(res);
+  }, 5000);
   };
 
+  useEffect(() => {
+    if (activityCompleted) {
+      nextActivity();
+    }
+  }, [activityCompleted, nextActivity]);
+
   return (
     <div className="justify-items-center h-full">
       {!activityCompleted && (
@@ -190,7 +197,10 @@ const PairCancerlationContainer = () => {
             {" "}
             <div>
               {" "}
-              <img src={Pair[activityIndex]}/>{" "}
+              <img  style={{
+                    width: "15rem",
+                    height: "6rem",
+                  }} src={Pair[activityIndex]}/>{" "}
             </div>
           </div>
           <div className="grid grid-cols-1 h-fit m-10">
@@ -220,8 +230,8 @@ const PairCancerlationContainer = () => {
                   <button onClick={getCroppedImg}>
                     <img
                       style={{
-                        width: "250px",
-                        height: "80px",
+                        width: "100%",
+                        height: "100%",
                       }}
                       src="https://i.ibb.co/Hz254BT/Screenshot-2022-10-02-093444.png"
                       alt="pattern"
@@ -245,7 +255,7 @@ const PairCancerlationContainer = () => {
         </div>
       )}
 
-      {activityCompleted && (
+      {/* {activityCompleted && (
         <div className="grid grid-cols-1 m-4">
           <div className="grid justify-items-center">
             <img
@@ -268,7 +278,7 @@ const PairCancerlationContainer = () => {
             </h1>
           </div>
         </div>
-      )}
+      )} */}
     </div>
   );
 };