Merge branch 'attention_new_ui' into 'master'

Sidebar styling

See merge request !47

web-app/backend/server.py

@@ -92,6 +92,26 @@ def data2():
             'status': 'Parents consent has been added to the system successfully!',
         })
 
+    # GET all data from database
+    if request.method == 'GET':
+        allData = db.db['ethicalclearence'].find()
+        dataJson = []
+        for data in allData:
+            id = data['_id']
+            parentName = data['parentName']
+            parentSignature = data['parentSignature']
+            childCandidate = data['childCandidate']
+            createdAt = data['createdAt']
+            dataDict = {
+                'id': str(id),
+                "parentName": parentName,
+                "parentSignature": parentSignature,
+                "childCandidate": childCandidate,
+                "createdAt": createdAt,
+            }
+            dataJson.append(dataDict)
+        return jsonify(dataJson)
+
 
 @app.route('/users/', methods=['POST', 'GET'])
 @cross_origin()
@@ -420,14 +440,15 @@ def predictArithmetic():
             file.save("./"+file.filename)
             prediction = transform_audio(file.filename)
             activityName = "Arithmetic"
-            analysis = reasoningIQScoreCalculator(activityName,questionIndex,prediction)
+            analysis = reasoningIQScoreCalculator(
+                activityName, questionIndex, prediction)
             db.db['reasoningIQScore'].insert_one({
                 "activityName": activityName,
                 "candidateID": candidateID,
                 "questionIndex": questionIndex,
                 "transcription": prediction,
-                "score":analysis[0],
-                "expectedAnswer":analysis[1]
+                "score": analysis[0],
+                "expectedAnswer": analysis[1]
             })
             return jsonify({"msg": "Prediction completed"})
         except:
@@ -530,6 +551,7 @@ def predictKnowledgeIq():
             return jsonify({'error': 'Error during pipeline execution'})
     return jsonify({'result': 'test'})
 
+
 @app.route('/knowledgeIQScores/', methods=['GET'])
 @cross_origin()
 def getKnowledgeIQscores():
@@ -557,6 +579,7 @@ def getKnowledgeIQscores():
         dataJson.append(dataDict)
     return jsonify(dataJson)
 
+
 @app.route('/resoningIQSocres/', methods=['GET'])
 @cross_origin()
 def getReasoningIQscores():
@@ -582,6 +605,7 @@ def getReasoningIQscores():
         dataJson.append(dataDict)
     return jsonify(dataJson)
 
+
 @app.route('/attentionSpanScores/', methods=['GET'])
 @cross_origin()
 def getattentionSpanscores():
@@ -589,15 +613,15 @@ def getattentionSpanscores():
     dataJson = []
     for data in allData:
         id = data['_id']
-        activityName = data['activityName']
         candidateID = data['candidateID']
+        activityName = data['activityName']
         questionIndex = data['questionIndex']
         attentionLevelScore = data['attentionLevelScore']
         createdAt = data['createdAt']
         dataDict = {
             'id': str(id),
-            'activityName': activityName,
             'candidateID': candidateID,
+            'activityName': activityName,
             'questionIndex': questionIndex,
             'attentionLevelScore': attentionLevelScore,
             'createdAt': createdAt,
@@ -605,11 +629,6 @@ def getattentionSpanscores():
         dataJson.append(dataDict)
     return jsonify(dataJson)
 
-# @app.route("/testDB")
-# def test():
-#     db.db.collection.insert_one({"name": "John"})
-#     return "Connected to the data base!"
-
 
 # Running app
 if __name__ == "__main__":

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

 import React, { useState, useEffect } from "react";
-import "./creativeside.css";
 import VideoPlayerScreen2 from "../videoPlayer2";
 
-function CreativeAttention() {
+function CreativeAttention({ nextActivity }) {
   const [currentLevel, setCurrentLevel] = useState(1);
   const [attention, setattention] = useState([]);
 
@@ -18,6 +17,10 @@ function CreativeAttention() {
     }, 2000);
   };
 
+  const moveToNextActivityType = () => {
+    nextActivity();
+  };
+
   return (
     <>
       <div className="overflow-hidden bg-white shadow sm:rounded-lg">
@@ -27,6 +30,7 @@ function CreativeAttention() {
               currentActivtyIndex={1}
               activityType={"CreativeAttention"}
               changeLevel={changeActivityLevel}
+              nextActivity={moveToNextActivityType}
             />
           )}
           {currentLevel === 2 && (
@@ -34,6 +38,7 @@ function CreativeAttention() {
               currentActivtyIndex={2}
               activityType={"CreativeAttention"}
               changeLevel={changeActivityLevel}
+              nextActivity={moveToNextActivityType}
             />
           )}
           {currentLevel === 3 && (
@@ -41,6 +46,7 @@ function CreativeAttention() {
               currentActivtyIndex={3}
               activityType={"CreativeAttention"}
               changeLevel={changeActivityLevel}
+              nextActivity={moveToNextActivityType}
             />
           )}
         </div>

web-app/frontend/src/components/activities/attentionEval/videoPlayer2.jsx

 import React, { useState, useEffect, useRef } from "react";
 import Webcam from "react-webcam";
 import { predictAttention } from "./predictAttention";
+import InsertEmoticonRoundedIcon from "@mui/icons-material/InsertEmoticonRounded";
+import SportsScoreSharpIcon from "@mui/icons-material/SportsScoreSharp";
 
-const VideoPlayerScreen2 = ({ currentActivtyIndex, activityType, changeLevel }) => {
+const VideoPlayerScreen2 = ({
+  currentActivtyIndex,
+  activityType,
+  changeLevel,
+  nextActivity,
+}) => {
   const webcamRef = React.useRef(null);
   const mediaRecorderRef = React.useRef(null);
   const [videoLink, setVideoLink] = useState("");
   const vidRef = useRef();
   const [capturing, setCapturing] = React.useState(false);
+  const [lastVideoFinished, setIsLastVideoFinished] = React.useState(false);
   const [recordedChunks, setRecordedChunks] = React.useState([]);
   const videoConstraints = {
     facingMode: "user",
@@ -46,10 +54,8 @@ const VideoPlayerScreen2 = ({ currentActivtyIndex, activityType, changeLevel })
     if (localStorage) {
       candidateID = localStorage.getItem("candidateID");
     }
-    console.log("Next level")
-    changeLevel(true);
     if (recordedChunks.length) {
-        console.log("Prediction started");
+      console.log("Prediction started");
       const blob = new Blob(recordedChunks, {
         type: "video/webm",
       });
@@ -61,6 +67,15 @@ const VideoPlayerScreen2 = ({ currentActivtyIndex, activityType, changeLevel })
       data.append("candidateID", candidateID);
       predictAttention(data);
       setRecordedChunks([]);
+      if (
+        lastVideoFinished &&
+        currentActivtyIndex === 3 &&
+        currentActivtyIndex !== 6
+      ) {
+        nextActivity();
+      }
+      console.log("Next level");
+      changeLevel(true);
     }
   }, [recordedChunks]);
 
@@ -88,17 +103,21 @@ const VideoPlayerScreen2 = ({ currentActivtyIndex, activityType, changeLevel })
     }
     const timer = setTimeout(() => {
       vidRef.current.play();
+      handleStartCaptureClick();
     }, 3000);
     return () => clearTimeout(timer);
   }, [currentActivtyIndex]);
 
   const myCallback = async () => {
     await handleStopCaptureClick();
+    if (currentActivtyIndex === 3 || currentActivtyIndex === 6) {
+      setIsLastVideoFinished(true);
+    }
   };
 
-  const myCallback2 = () => {
-    handleStartCaptureClick();
-  };
+  // const myCallback2 = () => {
+  //   handleStartCaptureClick();
+  // };
 
   return (
     <>
@@ -111,15 +130,36 @@ const VideoPlayerScreen2 = ({ currentActivtyIndex, activityType, changeLevel })
                 className="w-full h-full p-2"
                 controls
                 onEnded={() => myCallback()}
-                onPlay={() => myCallback2()}
+                // onPlay={() => myCallback2()}
               >
                 <source src={videoLink} type="video/mp4" />
               </video>
             </>
           )}
         </div>
-        {recordedChunks.length > 0 && (
-          <button onClick={handlePredict}>Next</button>
+        {!lastVideoFinished && recordedChunks.length > 0 && (
+          <div className="flex flex-col items-center mt-4">
+            <button
+              onClick={handlePredict}
+              type="button"
+              className="text-white bg-[#008080] hover:bg-[#008080]/90 focus:ring-4 focus:outline-none focus:ring-[#008080]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-[#008080]/55 mr-2 mb-1"
+            >
+              <InsertEmoticonRoundedIcon className="mr-1" />
+              Go Next
+            </button>
+          </div>
+        )}
+        {lastVideoFinished && recordedChunks.length > 0 && (
+          <div className="flex flex-col items-center mt-4">
+            <button
+              onClick={handlePredict}
+              type="button"
+              className="text-white bg-[#008080] hover:bg-[#008080]/90 focus:ring-4 focus:outline-none focus:ring-[#008080]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-[#008080]/55 mr-2 mb-1"
+            >
+              <SportsScoreSharpIcon className="mr-1" />
+              Finish
+            </button>
+          </div>
         )}
         <div className="invisible h-0 w-0">
           <Webcam