Add intro vdo for MC

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

@@ -18,12 +18,13 @@ const PairCancerlationContainer = () => {
   const [activityCompleted, setActivityCompleted] = useState(false);
   const [Pair, setPair] = useState([PCA1, PCA2, PCA3, PCA4]);
   const [picture, setPicture] = useState([PCB1, PCB2, PCB3, PCB4]);
+  const [finalScore, setFinalScore] = useState([PCB1, PCB2, PCB3, PCB4]);
   const [predResult] = useState([]);
 
   const [actualResult, setActualResult] = useState([
     ["star", "circle"],
     ["triangle", "square"],
-    ["triangle", "circle"],
+    ["triangle", "star"],
     ["star", "star"],
   ]);
   let results = 0;
@@ -36,7 +37,42 @@ const PairCancerlationContainer = () => {
     minutes: 0,
     hours: 0,
   });
-  const [isCancelled] = useState(false);
+  const [isCancelled, setIsCancelled] = useState(false);
+
+  var finalResult = 0;
+
+  const [activityName] = useState("Pair Cancerlation");
+
+  let saveScore = async (result) => {
+    const headerConfig = {
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+        "Content-Type": "application/json",
+      },
+    };
+    try {
+      const payload = {
+        activityName: activityName,
+        score: finalResult,
+        actualResult: actualResult,
+        predResult: result,
+        totalTime: time,
+        createdTime: Date(),
+      };
+
+      await API.post("mentalChromScores", JSON.stringify(payload), headerConfig)
+        .then((res) => {
+          if (res.status === 200) {
+            console.log(res);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    } catch (err) {
+      console.log(err);
+    }
+  };
   useEffect(() => {
     const calculateTime = () => {
       setTimeout(() => {
@@ -68,72 +104,71 @@ const PairCancerlationContainer = () => {
   const [crop, setCrop] = useState({
     aspect: 16 / 9,
     unit: "px",
-    width: "150",
-    height: "60",
+    width: "170",
+    height: "80",
   });
 
   const getCroppedImg = async () => {
     if (activityIndex === 3) {
       setActivityCompleted(true);
+      setIsCancelled(true);
       setTimeout(() => {
         generateScore();
       }, 10000);
-    } else {
-      const canvas = document.getElementById("canvas");
-      const image = document.getElementById("result");
-      const ctx = canvas.getContext("2d");
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-      const imageWidthRatio = image.naturalWidth / image.width;
-      const imageHeightRatio = image.naturalHeight / image.height;
-
-      ctx.drawImage(
-        image,
-        crop.x * imageWidthRatio,
-        crop.y * imageHeightRatio,
-        crop.width * imageWidthRatio,
-        crop.height * imageHeightRatio,
-        0,
-        0,
-        crop.width,
-        crop.height
-      );
-
-      const base64 = canvas.toDataURL("image/png");
-
-      let imagetoPred = base64.replace("data:image/png;base64,", "");
-
-      // console.log(base64);
-      if (activityIndex < 3) {
-        setActivityIndex(activityIndex + 1);
-      }
+    }
+    const canvas = document.getElementById("canvas");
+    const image = document.getElementById("result");
+    const ctx = canvas.getContext("2d");
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-      let message = { image: imagetoPred };
+    const imageWidthRatio = image.naturalWidth / image.width;
+    const imageHeightRatio = image.naturalHeight / image.height;
 
-      await API.post("predictShapePattern", JSON.stringify(message))
-        .then((res) => {
-          for (let i = 0; i < res.data.prediction.length; i++) {
-            predResult.push(res.data.prediction);
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-        });
+    ctx.drawImage(
+      image,
+      crop.x * imageWidthRatio,
+      crop.y * imageHeightRatio,
+      crop.width * imageWidthRatio,
+      crop.height * imageHeightRatio,
+      0,
+      0,
+      crop.width,
+      crop.height
+    );
+
+    const base64 = canvas.toDataURL("image/png");
+
+    let imagetoPred = base64.replace("data:image/png;base64,", "");
+
+    // console.log(base64);
+    if (activityIndex < 3) {
+      setActivityIndex(activityIndex + 1);
     }
-  };
 
-  const generateScore = () => {
-    let res = 0;
-    for (let i = 0; i <= actualResult.length; i++) {
-      console.log(predResult[i]);
+    let message = { image: imagetoPred };
 
+    await API.post("predictShapePattern", JSON.stringify(message))
+      .then((res) => {
+        predResult.push(res.data.prediction);
+        console.log(predResult);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+  let res = 0;
+  let count = 1;
+  const generateScore = () => {
+    for (let i = 0; i < actualResult.length; i++) {
       if (JSON.stringify(actualResult[i]) === JSON.stringify(predResult[i])) {
         res += 1;
         // setFinalScore(result);
       }
     }
     // finalResult = result;
+    setFinalScore(res);
     console.log(res);
+    saveScore(res);
   };
 
   return (
@@ -212,7 +247,9 @@ const PairCancerlationContainer = () => {
               src="https://i.ibb.co/sJWJZsD/completed.png"
               alt="pattern"
             />
-            <h1 className="text-black">Final Score {results && results}</h1>
+            <h1 className="text-black">
+              Final Score {finalScore && finalScore}
+            </h1>
             <h1 className="text-black">
               Total Time {time.hours < 10 ? "0" + time.hours : time.hours} :{" "}
               {time.minutes < 10 ? "0" + time.minutes : time.minutes} :{" "}

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

@@ -19,7 +19,7 @@ const Video = ({ currentActivtyIndex, changeScreen }) => {
         setVideoLink("/Videos/vid4.mp4");
         break;
       case 5:
-        setVideoLink("/Videos/vid1.mp4");
+        setVideoLink("/Videos/vid5.mp4");
         break;
       case 6:
         setVideoLink("/Videos/vid2.mp4");
@@ -43,13 +43,18 @@ const Video = ({ currentActivtyIndex, changeScreen }) => {
 
   const myCallback = () => {
     changeScreen(false);
-  }
+  };
 
   return (
     <div className="flex items-center">
       {videoLink && (
         <>
-          <video ref={vidRef} className="w-full h-full p-2" controls onEnded={() => myCallback()}>
+          <video
+            ref={vidRef}
+            className="w-full h-full p-2"
+            controls
+            onEnded={() => myCallback()}
+          >
             <source src={videoLink} type="video/mp4" />
           </video>
         </>