Merge branch 'KIQ-02' into 'master'

Add Activity videos and minor fixes

See merge request !40

web-app/backend/knowledgeIqScoreCalculation.py

 import difflib
+import re
 
-colourNumbers = [ "5 4","5 6 7","5 6 7 8"]
+colourNumbers = [ "3","21","38","148"]
 
-digitSpan     = [ "5 4","5 6 7","5 6 7 8"]
+digitSpan     = [ "27","386","6251","86237", "382157"]
 
 def calKnowledgeIqActivityScore(activity, questionIndex, prediction):
     questionIndex = int(questionIndex)
-    prediction = "".join(prediction).replace(".","")
+    string1 = "".join(prediction)
+    string2 = re.findall('\d+', string1)
+    prediction = "".join(string2).replace(" ", "")
     cal_score = []
     if (activity == "CN"):
 
@@ -20,7 +23,7 @@ def calKnowledgeIqActivityScore(activity, questionIndex, prediction):
         print(temp.get_matching_blocks())
         print('Similarity Score: ',temp.ratio())
 
-        cal_score = [score, temp.ratio()*100]
+        cal_score = [score, temp.ratio()*100, colourNumbers[questionIndex-1]]
 
     elif (activity == "DS"):
 
@@ -29,15 +32,15 @@ def calKnowledgeIqActivityScore(activity, questionIndex, prediction):
         else:
             score = 0
 
-        temp = difflib.SequenceMatcher(None, colourNumbers[questionIndex-1], prediction)
+        temp = difflib.SequenceMatcher(None, digitSpan[questionIndex-1], prediction)
 
         print(temp.get_matching_blocks())
         print('Similarity Score: ',temp.ratio())
 
-        cal_score = [score, temp.ratio()*100]
+        cal_score = [score, temp.ratio()*100, digitSpan[questionIndex-1]]
 
     else:
-        cal_score = [0,0]
+        cal_score = []
         print('Score cannot be specified to the activity specified in the system!')
 
     return  cal_score          
\ No newline at end of file

web-app/backend/server.py

@@ -457,8 +457,6 @@ def mentalChromScores():
     })
 
 # Knowledge IQ evaluation
-
-
 @app.route('/predictKnowledgeIq', methods=['POST', 'GET'])
 @cross_origin()
 def predictKnowledgeIq():
@@ -466,9 +464,10 @@ def predictKnowledgeIq():
         file = request.files.get('file')
         questionIndex = request.form.get('questionIndex')
         activityName = request.form.get('activityName')
+        candidateID = request.form.get('candidateID')
         print(questionIndex)
         if file is None or file.filename == "":
-            return jsonify({'error: no file'})
+            return jsonify({'error': 'no file'})
 
         try:
             file.save("./"+file.filename)
@@ -478,15 +477,17 @@ def predictKnowledgeIq():
                 activityName, questionIndex, prediction)
             db.db['knowledgeIQScore'].insert_one({
                 "activityName": activityName,
+                "candidateID": candidateID,
                 "questionIndex": questionIndex,
                 "transcription": prediction,
                 "accuracyScore": score[0],
-                "similarityScore": score[1]
+                "similarityScore": score[1],
+                "expectedAnswer": score[2]
             })
             return jsonify(data)
         except:
-            return jsonify({'error: Error during pipeline execution'})
-    return jsonify({'result: test'})
+            return jsonify({'error': 'Error during pipeline execution'})
+    return jsonify({'result': 'test'})
 
 
 # @app.route("/testDB")
@@ -498,6 +499,6 @@ def predictKnowledgeIq():
 # Running app
 if __name__ == "__main__":
     app.secret_key = os.urandom(24)
-    app.run(host="192.168.8.169",ssl_context='adhoc',debug=True, use_reloader=False)
+    app.run(host="192.168.43.120",ssl_context='adhoc',debug=True, use_reloader=False)
 
 flask_cors.CORS(app, expose_headers='Authorization')

web-app/frontend/src/components/activities/knowledgeIqEval/colourNumbers/ColourNumbers.css

 .new{
-    padding-top: 10%;
+    padding-top: 16%;
+    padding-bottom: 16%;
 }
 
 .digitCard:hover {

web-app/frontend/src/components/activities/knowledgeIqEval/colourNumbers/ColourNumbers.jsx

-import React, {useState, useEffect} from "react";
+import React, {useState, useEffect, memo} from "react";
 import Grid from "@mui/material/Grid";
 import Paper from "@mui/material/Paper";
 import Box from "@mui/material/Box";
@@ -6,7 +6,8 @@ import "./ColourNumbers.css";
 import { lightBlue, yellow } from "@mui/material/colors";
 import { createTheme, ThemeProvider, styled } from "@mui/material/styles";
 import { RecordingHandler } from "../recorder/Recorder";
-import Timer from "../../reasoningIqEval/timer/Timer";
+import Timer from "../timer/Timer";
+import { useRef } from "react";
 const Item = styled(Paper)(({ theme }) => ({
   textAlign: "center",
   color: theme.palette.text.primary,
@@ -19,60 +20,37 @@ const Item = styled(Paper)(({ theme }) => ({
 
 
 const ColourNumbers = ({ GoNext, isAllCompleted }) => {
-  const [allCompleted, setAllCompleted] = useState(false);
+  // const [isAllCompleted, setAllCompleted] = useState(false);
 const [activityIndex, setActivityIndex] = useState(1);
+const effectRan = useRef(false);
 
-const switchActivityHandler = () => {
-  let activityNo = activityIndex + 1;
-  setActivityIndex(activityNo);
-// switch question
-  console.log('switch');
+// const switchActivityHandler = () => {
+//   let activityNo = activityIndex + 1;
+//   setActivityIndex(activityNo);
+// // switch question
+//   console.log('switch');
 
-};
+// };
 
 useEffect(() => {
-  setTimeout(() => {
-  }, 5000);
   console.log('rec');
-  RecordingHandler(`CN.wav`, activityIndex, 'CN');
+  if(effectRan.current === false){
+    RecordingHandler(`CN.wav`, activityIndex, 'CN');
+    return () => {
+      console.log("unmounted");
+      effectRan.current = true;
+    }
+  }
+  
 }, [activityIndex]);
 
   return (
     <div className="new">
-      <Grid container>
-        <Grid item xs={16}>
-          <Box
-            className=" mt-32"
-            sx={{
-              p: 2,
-              bgcolor: "background.default",
-              display: "grid",
-              gridTemplateColumns: { md: "1fr 1fr 1fr 1fr 1fr" },
-              gap: 6,
-            }}
-          >
-            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => (
-              <Item
-                className="digitCard"
-                key={value}
-                elevation={24}
-                sx={
-                  value % 2
-                    ? { bgcolor: lightBlue[900] }
-                    : { bgcolor: yellow[500] }
-                }
-              >
-                {`${value}`}
-              </Item>
-            ))}
-          </Box>
-        </Grid>
-      </Grid>
 
-      {!allCompleted && <Timer switchActivity={switchActivityHandler} />}
+      {!isAllCompleted && <Timer switchActivity={GoNext} />}
 
     </div>
   );
 };
 
-export default ColourNumbers;
+export default memo(ColourNumbers);

web-app/frontend/src/components/activities/knowledgeIqEval/colourNumbers/colourNumbersController.jsx

@@ -3,7 +3,7 @@ import { ColourNumbers } from "../../..";
 
 import VideoPlayerScreen from "./videoPlayer";
 
-const ColourNumbersController = () => {
+const ColourNumbersController = ({nextActivity}) => {
   const activityCount = 4;
   const [currentActivityNo, setCurrentActivityNo] = useState(1);
   const [isAudioCompleted, setIsAudioCompleted] = useState(false);
@@ -25,6 +25,12 @@ const ColourNumbersController = () => {
     }, 1000);
   };
 
+  useEffect(() => {
+    if (isAllCompleted) {
+      nextActivity();
+    }
+  }, [isAllCompleted, nextActivity]);
+
   return (
     <>
       <div className="w-full h-full">

web-app/frontend/src/components/activities/knowledgeIqEval/colourNumbers/videos.jsx

 import React, { useState, useEffect, useRef } from "react";
-import Vid4 from "../../../../assets/video/vid6.mp4";
+import CN1 from "../../../../assets/video/CN-3.mp4";
+import CN2 from "../../../../assets/video/CN-2-1.mp4";
+import CN3 from "../../../../assets/video/CN-3-8.mp4";
+import CN4 from "../../../../assets/video/CN-1-4-8.mp4";
 
 const Video = ({ currentActivtyIndex, changeScreen }) => {
   const [videoLink, setVideoLink] = useState("");
@@ -8,16 +11,16 @@ const Video = ({ currentActivtyIndex, changeScreen }) => {
   useEffect(() => {
     switch (currentActivtyIndex) {
       case 1:
-        setVideoLink(Vid4);
+        setVideoLink(CN1);
         break;
       case 2:
-        setVideoLink(Vid4);
+        setVideoLink(CN2);
         break;
       case 3:
-        setVideoLink(Vid4);
+        setVideoLink(CN3);
         break;
       case 4:
-        setVideoLink(Vid4);
+        setVideoLink(CN4);
         break;
       case 5:
         setVideoLink("/Videos/vid1.mp4");

web-app/frontend/src/components/activities/knowledgeIqEval/digitSpan/DigitSpan.css

@@ -3,4 +3,14 @@
     position: relative;
     height: 100%;
     width: 100%;
-}
\ No newline at end of file
+}
+
+.new{
+    padding-top: 16%;
+    padding-bottom: 16%;
+}
+
+/* img{
+    height: 350px;
+    width: auto;
+} */
\ No newline at end of file

web-app/frontend/src/components/activities/knowledgeIqEval/digitSpan/DigitSpan.jsx

-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, memo, useRef } from "react";
 import { green, red } from "@mui/material/colors";
 import Avatar from "@mui/material/Avatar";
 import Stack from "@mui/material/Stack";
@@ -6,18 +6,25 @@ import MicSharpIcon from "@mui/icons-material/MicSharp";
 import MicOffSharpIcon from "@mui/icons-material/MicOffSharp";
 import VolumeUpIcon from "@mui/icons-material/VolumeUp";
 import VolumeOffIcon from "@mui/icons-material/VolumeOff";
-import Picture from "../../../../assets/digitspan.jpg";
+// import Picture from "./teacherDS.gif";
 import Button from "@mui/material/Button";
-import Timer from "../../reasoningIqEval/timer/Timer";
+import Timer from "../timer/Timer";
 import { RecordingHandler } from "../recorder/Recorder";
 import "./DigitSpan.css";
 
 const DigitSpan = ({ GoNext, isAllCompleted, currentActivityNo }) => {
   const [activityIndex, setActivityIndex] = useState(1);
+  const effectRan = useRef(false);
 
   useEffect(() => {
     console.log("rec");
-    RecordingHandler(`DS.wav`, currentActivityNo, 'DS');
+    if(effectRan.current === false) {
+      RecordingHandler(`DS.wav`, currentActivityNo, 'DS');
+      return () => {
+        console.log("unmounted");
+        effectRan.current = true;
+      }
+    }
   }, [currentActivityNo]);
 
 
@@ -35,6 +42,7 @@ const DigitSpan = ({ GoNext, isAllCompleted, currentActivityNo }) => {
         </div>
       )}
       <Stack
+        className="new"
         direction="row"
         spacing={2}
         justifyContent="center"
@@ -53,4 +61,4 @@ const DigitSpan = ({ GoNext, isAllCompleted, currentActivityNo }) => {
   );
 };
 
-export default DigitSpan;
+export default memo(DigitSpan);

web-app/frontend/src/components/activities/knowledgeIqEval/digitSpan/digitSpanController.jsx

@@ -3,8 +3,8 @@ import { DigitSpan } from "../../..";
 
 import AudioPlayerScreen from "../../audioPlayerScreen";
 
-const DigitSpanController = () => {
-  const activityCount = 4;
+const DigitSpanController = ({nextActivity}) => {
+  const activityCount = 5;
   const [currentActivityNo, setCurrentActivityNo] = useState(1);
   const [isAudioCompleted, setIsAudioCompleted] = useState(false);
   const [isAllCompleted, setIsAllCompleted] = useState(false);
@@ -25,6 +25,12 @@ const DigitSpanController = () => {
     }, 1000);
   };
 
+  useEffect(() => {
+    if (isAllCompleted) {
+      nextActivity();
+    }
+  }, [isAllCompleted, nextActivity]);
+
   return (
     <>
       <div className="w-full h-full">

web-app/frontend/src/components/activities/knowledgeIqEval/timer/Timer.css

+h1 {
+  font-family: "Roboto";
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.timer-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.timer {
+  font-family: "Montserrat";
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.text {
+  color: #aaa;
+}
+
+.value {
+  font-size: 40px;
+}
+
+.info {
+  max-width: 360px;
+  margin: 40px auto 0;
+  text-align: center;
+  font-size: 16px;
+}

web-app/frontend/src/components/activities/knowledgeIqEval/timer/Timer.jsx

+import React from "react";
+import { CountdownCircleTimer } from "react-countdown-circle-timer";
+
+import "./Timer.css";
+
+const Timer = ({ switchActivity }) => {
+  const renderTime = ({ remainingTime }) => {
+    if (remainingTime === 0) {
+      return <div className="timer text-black">--</div>;
+    } else {
+      return <div className="value text-black">{remainingTime}</div>;
+    }
+  };
+  return (
+    <div className="Timer">
+      <div className="timer-wrapper">
+        <CountdownCircleTimer
+          isPlaying
+          duration={15}
+          colors={["#004777", "#F7B801", "#A30000", "#A30000"]}
+          colorsTime={[15, 10, 7, 5]}
+          rotation={"counterclockwise"}
+          size={180}
+          strokeWidth={8}
+          onComplete={() => {
+            // change activity
+            switchActivity();
+            return { shouldRepeat: true, delay: 0 }; // repeat animation in 1.5 seconds
+          }}
+        >
+          {renderTime}
+        </CountdownCircleTimer>
+      </div>
+    </div>
+  );
+};
+
+export default Timer;

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

 import React, { useState, useEffect, useRef } from "react";
-import D1 from "../Audio/DS1.mp3";
-import D2 from "../Audio/DS2.mp3";
-import D3 from "../Audio/DS3.mp3";
+import D1 from "../Audio/2-7.mp3";
+import D2 from "../Audio/3-8-6.mp3";
+import D3 from "../Audio/6-2-5-1.mp3";
+import D4 from "../Audio/8-6-2-3-7.mp3";
+import D5 from "../Audio/3-8-2-1-5-7.mp3";
 
-const Audio = ({ currentActivtyIndex, changeScreen }) => {
+const Audio = React.memo(({ currentActivtyIndex, changeScreen }) => {
   const myAudio = useRef();
   const [audio, setAudio] = useState("");
   const vidRef = useRef();
@@ -20,10 +22,10 @@ const Audio = ({ currentActivtyIndex, changeScreen }) => {
         setAudio(D3);
         break;
       case 4:
-        setAudio(D1);
+        setAudio(D4);
         break;
       case 5:
-        setAudio(D2);
+        setAudio(D5);
         break;
       default:
     }
@@ -54,14 +56,16 @@ const Audio = ({ currentActivtyIndex, changeScreen }) => {
             type="audio"
             onEnded={() => myCallback()}
           />
-
-          <button className="text-black" onClick={handleBeep}>
-            Start
-          </button>
+          {" "}
+          <img
+            className="m-auto"
+            src="https://i.ibb.co/Lt4BV8q/teacher-DS.gif"
+            alt="pattern"
+          />
         </>
       )}
     </div>
   );
-};
+});
 
 export default Audio;