Add Audio commands

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

 import React, { useState, useEffect } from "react";
 import "./ActivityContainer.css";
-import { PictureConcept, Arithmetic, ColourNumbers, DigitSpan, VideoPlayerScreen } from "../index";
+import {
+  PictureConcept,
+  Arithmetic,
+  ColourNumbers,
+  DigitSpan,
+  DigitSpanController,
+  VideoPlayerScreen,
+} from "../index";
 import LetterPattern from "./mentalChronometryEval/letterPattern/LetterPattern";
 import Coding from "./mentalChronometryEval/coding/Coding";
 import PairCancerlation from "./mentalChronometryEval/pairCancerlation/PairCancerlation";
@@ -18,7 +25,7 @@ const ActivityContainer = () => {
     setTimeout(() => {
       setIsGuideVideoClicked(state);
     }, 2000);
-  }
+  };
 
   const changeColor = () => {
     let currentDiv = document.getElementsById({ currentActivityNo });
@@ -109,7 +116,10 @@ const ActivityContainer = () => {
         </div>
         <div id="activity-container-item-1">
           {isGuideVideoClicked ? (
-            <VideoPlayerScreen currentActivtyIndex={currentActivityNo} changeScreen={changeActivityScreen} />
+            <VideoPlayerScreen
+              currentActivtyIndex={currentActivityNo}
+              changeScreen={changeActivityScreen}
+            />
           ) : (
             <>
               {currentActivityNo === 1 && (
@@ -131,7 +141,7 @@ const ActivityContainer = () => {
                 <ColourNumbers nextActivity={nextActivityHandler} />
               )}
               {currentActivityNo === 7 && (
-                <DigitSpan nextActivity={nextActivityHandler} />
+                <DigitSpanController nextActivity={nextActivityHandler} />
               )}
             </>
           )}

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

+import React, { useState, useEffect } from "react";
+import toast, { Toaster } from "react-hot-toast";
+import { ContainerCard } from "../../components/index";
+import Audio from "../../utility/audio";
+
+const AudioPlayerScreen = ({ currentActivtyIndex, changeScreen }) => {
+  return (
+    <>
+      <div className="w-full">
+        <div id=" w-full h-full bg-white">
+          <ContainerCard>
+            <div>
+              <div >
+                <h2 className="text-base text-[#3d59c1] font-semibold tracking-wide uppercase mt-4">
+                  Digit Span
+                </h2>
+              </div>
+              <div className="mt-10 sm:mt-0">
+                <Audio
+                  currentActivtyIndex={currentActivtyIndex}
+                  changeScreen={changeScreen}
+                />
+              </div>
+            </div>
+          </ContainerCard>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default AudioPlayerScreen;

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

 import React, { useState, useEffect } from "react";
-import { green, red } from '@mui/material/colors';
-import Avatar from '@mui/material/Avatar';
-import Stack from '@mui/material/Stack';
-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 Button from '@mui/material/Button';
-import Instruction1 from '../../../../assets/audio/audio.aac';
-import Instruction2 from '../../../../assets/audio/audio2.aac';
+import { green, red } from "@mui/material/colors";
+import Avatar from "@mui/material/Avatar";
+import Stack from "@mui/material/Stack";
+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 Button from "@mui/material/Button";
+// import Instruction1 from '../../../../assets/audio/audio.aac';
+// import Instruction2 from '../../../../assets/audio/audio2.aac';
 import Timer from "../../reasoningIqEval/timer/Timer";
-import {RecordingHandler} from "../recorder/Recorder";
+import { RecordingHandler } from "../recorder/Recorder";
 import "./DigitSpan.css";
 
-
-const DigitSpan = ({ nextActivity }) => {
-
+const DigitSpan = ({ GoNext, isAllCompleted }) => {
   const [buttonClicked, setButtonClicked] = useState(1);
-  const [audio, setAudio] = useState(Instruction1);
+  const [audio, setAudio] = useState("Instruction1");
   const [allCompleted, setAllCompleted] = useState(false);
   const [activityIndex, setActivityIndex] = useState(1);
 
-  const switchActivityHandler = () => {
-    let activityNo = activityIndex + 1;
-    setActivityIndex(activityNo);
-    // switch question
-    console.log('switch');
-    // if(activityNo < 4){
-      
-    // }
-    // else{
-    //   setAllCompleted(true);
-    // }
-  };
+  // const switchActivityHandler = ({switchActivity}) => {
+  //   let activityNo = activityIndex + 1;
+  //   setActivityIndex(activityNo);
+  //   // switch question
+  //   console.log("switch");
+  //   // if(activityNo < 4){
+
+  //   // }
+  //   // else{
+  //   //   setAllCompleted(true);
+  //   // }
+  // };
   // const audioFiles =[{source: Instruction1},
   //                   {source: Instruction2}];
 
@@ -53,30 +51,29 @@ const DigitSpan = ({ nextActivity }) => {
   //         })
   //     }
   //   }
-    useEffect(() => {
-      console.log('rec');
-      RecordingHandler(`DS.wav`, activityIndex);
-    }, [activityIndex]);
+  useEffect(() => {
+    console.log("rec");
+    RecordingHandler(`DS.wav`, activityIndex);
+  }, [activityIndex]);
 
+  // const switchAudio = () => {
 
-    // const switchAudio = () => {
-     
-    //   if (audio < audioFiles.length - 1) {
-    //     setActivityIndex(activityIndex+1)
+  //   if (audio < audioFiles.length - 1) {
+  //     setActivityIndex(activityIndex+1)
 
-    //     this.setState({
-    //       audio: audioFiles2[activityIndex]
-    //     });
-    //     //restart playlist
-    //   } else {
-    //     console.log('ERROR');
-    //   }
-    // }
+  //     this.setState({
+  //       audio: audioFiles2[activityIndex]
+  //     });
+  //     //restart playlist
+  //   } else {
+  //     console.log('ERROR');
+  //   }
+  // }
 
-    // useEffect(() => {
-    //   console.log('rec');
-    //   RecordingHandler(`CN.wav`, activityIndex);
-    // }, [activityIndex]);
+  // useEffect(() => {
+  //   console.log('rec');
+  //   RecordingHandler(`CN.wav`, activityIndex);
+  // }, [activityIndex]);
 
   return (
     <div className="container">
@@ -87,7 +84,7 @@ const DigitSpan = ({ nextActivity }) => {
           src={Picture}
         />
       </div> */}
-      {allCompleted && (
+      {isAllCompleted && (
         <div className="w-4/6 h-4/6 m-auto">
           {" "}
           <img
@@ -97,8 +94,13 @@ const DigitSpan = ({ nextActivity }) => {
           />
         </div>
       )}
-      <Stack direction="row" spacing={2} justifyContent="center" alignItems="center">
-      {/* {buttonClicked === 1 && (
+      <Stack
+        direction="row"
+        spacing={2}
+        justifyContent="center"
+        alignItems="center"
+      >
+        {/* {buttonClicked === 1 && (
           <Avatar sx={{ bgcolor: green[500], width: 100, height: 100}}
           onClick={()=> {setButtonClicked(2)}}>
           <MicSharpIcon sx={{ fontSize: 60 }}/>
@@ -110,7 +112,7 @@ const DigitSpan = ({ nextActivity }) => {
           <MicOffSharpIcon sx={{ fontSize: 60 }}/>
         </Avatar>
         )} */}
-      {/* {buttonClicked === 1 && (
+        {/* {buttonClicked === 1 && (
           <Avatar sx={{ bgcolor: green[500], width: 100, height: 100}}
           onClick={()=> {}}>
           <VolumeUpIcon sx={{ fontSize: 60 }}/>
@@ -122,8 +124,8 @@ const DigitSpan = ({ nextActivity }) => {
           <VolumeOffIcon sx={{ fontSize: 60 }}/>
         </Avatar>
         )}   */}
-        {!allCompleted && <Timer switchActivity={switchActivityHandler} />}
-    </Stack>
+        {!isAllCompleted && <Timer switchActivity={GoNext} />}
+      </Stack>
       {/* <Button
         onClick={() => {
           nextActivity();
@@ -135,4 +137,4 @@ const DigitSpan = ({ nextActivity }) => {
   );
 };
 
-export default DigitSpan;
\ No newline at end of file
+export default DigitSpan;

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

+import React, { useState, useEffect } from "react";
+import { DigitSpan } from "../../..";
+
+import AudioPlayerScreen from "../../audioPlayerScreen";
+
+const DigitSpanController = () => {
+  const activityCount = 4;
+  const [currentActivityNo, setCurrentActivityNo] = useState(1);
+  const [isAudioCompleted, setIsAudioCompleted] = useState(false);
+  const [isAllCompleted, setIsAllCompleted] = useState(false);
+
+  const nextActivityHandler = () => {
+    if (currentActivityNo < activityCount - 1) {
+      setCurrentActivityNo(currentActivityNo + 1);
+    } else {
+      setIsAllCompleted(true);
+    }
+
+    setIsAudioCompleted(false);
+  };
+
+  const StartRecording = (state) => {
+    setTimeout(() => {
+      setIsAudioCompleted(true);
+    }, 1000);
+  };
+
+  return (
+    <>
+      <div className="w-full h-full">
+        <div>
+          {!isAudioCompleted ? (
+            <AudioPlayerScreen
+              currentActivtyIndex={currentActivityNo}
+              changeScreen={StartRecording}
+            />
+          ) : (
+            <>
+              <DigitSpan
+                GoNext={nextActivityHandler}
+                isAllCompleted={isAllCompleted}
+              />
+            </>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DigitSpanController;

web-app/frontend/src/components/index.js

@@ -10,3 +10,5 @@ export { default as ColourNumbers } from "./activities/knowledgeIqEval/colourNum
 export { default as DigitSpan } from "./activities/knowledgeIqEval/digitSpan/DigitSpan";
 export { default as EthicalClearenceScreen } from "./activities/ethicalClearence";
 export { default as VideoPlayerScreen } from "./activities/videoPlayer";
+export { default as AudioPlayerScreen } from "./activities/audioPlayerScreen";
+export { default as DigitSpanController } from "./activities/knowledgeIqEval/digitSpan/digitSpanController";

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

+import React, { useState, useEffect, useRef } from "react";
+import A1 from "../Audio/A1.mp3";
+import A2 from "../Audio/A2.mp3";
+
+const Audio = ({ currentActivtyIndex, changeScreen }) => {
+  const myAudio = useRef();
+  const [audio, setAudio] = useState("");
+  const vidRef = useRef();
+
+  useEffect(() => {
+    switch (currentActivtyIndex) {
+      case 1:
+        setAudio(A1);
+        break;
+      case 2:
+        setAudio(A2);
+        break;
+      case 3:
+        setAudio(A1);
+        break;
+      case 4:
+        setAudio(A2);
+        break;
+      case 5:
+        setAudio(A1);
+        break;
+      default:
+    }
+    const timer = setTimeout(() => {
+      myAudio.current.play();
+    }, 3000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const myCallback = () => {
+    changeScreen(false);
+  };
+
+  //   const audio = "A2.mp3";
+
+  const handleBeep = () => {
+    console.log("Clicked");
+  };
+
+  return (
+    <div className="flex items-center">
+      {Audio && (
+        <>
+          <audio
+            id="beep"
+            ref={myAudio}
+            src={audio}
+            type="audio"
+            onEnded={() => myCallback()}
+          />
+
+          <button className="text-black" onClick={handleBeep}>
+            Start
+          </button>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default Audio;