#0000 audio detection feature enabled

package.json

@@ -17,6 +17,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "ajv": "^8.17.1",
     "axios": "^1.6.5",
     "canvas-confetti": "^1.9.2",
     "character-error-rate": "^1.1.4",

src/components/Mechanism/WordsOrImage.jsx

@@ -1,5 +1,5 @@
 import { Box, CardContent, Typography, CircularProgress } from "@mui/material";
-import { createRef, useState } from "react";
+import { createRef, useState, useEffect } from "react";
 import v11 from "../../assets/audio/V10.mp3";
 import VoiceAnalyser from "../../utils/VoiceAnalyser";
 import { PlayAudioButton, StopAudioButton } from "../../utils/constants";
@@ -53,6 +53,29 @@ const WordsOrImage = ({
   const [isReady, setIsReady] = useState(false);
 
   const [isPlaying, setIsPlaying] = useState(false);
+  const [storedData, setStoredData] = useState([]);
+
+  //console.log('wordsORimage', words, storedData);
+
+  const updateStoredData = (audio, isCorrect) => {
+    if (audio && words) {
+      const newEntry = {
+        selectedAnswer: words,
+        audioUrl: audio,
+        correctAnswer: isCorrect,
+      };
+
+      setStoredData((prevData) => [...prevData, newEntry]);
+    }
+  };
+
+  const resetStoredData = () => {
+    setStoredData([]);
+  };
+
+  useEffect(() => {
+    updateStoredData();
+  }, [handleNext]);
 
   const togglePlayPause = () => {
     if (isPlaying) {
@@ -72,6 +95,9 @@ const WordsOrImage = ({
       enableNext={enableNext}
       showTimer={showTimer}
       points={points}
+      storedData={storedData}
+      resetStoredData={resetStoredData}
+      pageName={"wordsorimage"}
       {...{
         steps,
         currentStep,
@@ -237,7 +263,9 @@ const WordsOrImage = ({
         )}
         <Box sx={{ display: "flex", justifyContent: "center" }}>
           <VoiceAnalyser
+            pageName={"wordsorimage"}
             setVoiceText={setVoiceText}
+            updateStoredData={updateStoredData}
             setRecordedAudio={setRecordedAudio}
             setVoiceAnimate={setVoiceAnimate}
             storyLine={storyLine}

src/components/Practice/Mechanics3.jsx

@@ -70,6 +70,8 @@ const Mechanics2 = ({
   const lang = getLocalData("lang");
   let wordToCheck = type === "audio" ? parentWords : wordToFill;
 
+  //console.log('Mechanics3', answer);
+
   useEffect(() => {
     const initializeFillInTheBlank = async () => {
       if (type === "fillInTheBlank" && parentWords?.length) {
@@ -238,6 +240,7 @@ const Mechanics2 = ({
       enableNext={getEnableButton()}
       showTimer={showTimer}
       points={points}
+      pageName={"m3"}
       {...{
         steps,
         currentStep,
@@ -540,6 +543,7 @@ const Mechanics2 = ({
         <Box sx={{ display: "flex", justifyContent: "center" }}>
           <VoiceAnalyser
             setVoiceText={setVoiceText}
+            pageName={"m3"}
             setRecordedAudio={setRecordedAudio}
             setVoiceAnimate={setVoiceAnimate}
             storyLine={storyLine}

src/components/Practice/Mechanics4.jsx

@@ -76,6 +76,8 @@ const Mechanics4 = ({
     return words;
   }
 
+  //console.log('Mechanics4');
+
   useEffect(() => {
     let wordsArr = jumbleSentence(parentWords);
     if (parentWords) {
@@ -154,6 +156,7 @@ const Mechanics4 = ({
       enableNext={enableNext}
       showTimer={showTimer}
       points={points}
+      pageName={"m4"}
       {...{
         steps,
         currentStep,
@@ -314,6 +317,7 @@ const Mechanics4 = ({
       {
         <Box sx={{ display: "flex", justifyContent: "center" }}>
           <VoiceAnalyser
+            pageName={"m4"}
             setVoiceText={setVoiceText}
             setRecordedAudio={setRecordedAudio}
             setVoiceAnimate={setVoiceAnimate}

src/components/Practice/Mechanics5.jsx

@@ -11,7 +11,7 @@ const Mechanics5 = ({
   isDiscover,
   header,
   parentWords,
-  options,
+  options = {},
   image,
   question_audio,
   handleNext,
@@ -58,6 +58,29 @@ const Mechanics5 = ({
   const [playingIndex, setPlayingIndex] = useState(null);
   const [selectedOption, setSelectedOption] = useState(null); // Add state to track selected radio button
 
+  const [storedData, setStoredData] = useState([]);
+
+  const updateStoredData = (audios, isCorrect) => {
+    if (audios) {
+      const newEntry = {
+        selectedAnswer:
+          options && options.length > 0 && options[selectedOption]?.text,
+        audioUrl: audios,
+        correctAnswer: isCorrect,
+      };
+
+      setStoredData((prevData) => [...prevData, newEntry]);
+    }
+  };
+
+  const resetStoredData = () => {
+    setStoredData([]);
+  };
+
+  useEffect(() => {
+    updateStoredData();
+  }, [handleNext]);
+
   useEffect(() => {
     // Ensure that audio stops playing when options change
     audiosRef.current.forEach((ref) => {
@@ -95,12 +118,17 @@ const Mechanics5 = ({
     }
   };
 
+  //console.log('Mechanics5' , storedData, options);
+
   const handleOptionChange = (event, i) => {
     setSelectedOption(i); // Set the selected option index
   };
 
   return (
     <MainLayout
+      pageName={"m5"}
+      storedData={storedData}
+      resetStoredData={resetStoredData}
       background={background}
       handleNext={handleNext}
       enableNext={enableNext}
@@ -191,7 +219,7 @@ const Mechanics5 = ({
             </span>
           </Box>
 
-          {options.length &&
+          {options && options.length > 0 ? (
             options.map((option, i) => (
               <Box
                 key={option.audio_url}
@@ -235,21 +263,29 @@ const Mechanics5 = ({
                     marginLeft: "10px",
                   }}
                 >
-                  {option.text}
+                  {option?.text || "Text is missing"}
                 </span>
               </Box>
-            ))}
+            ))
+          ) : (
+            <div>No options available</div>
+          )}
         </Grid>
       </Grid>
 
       <Box paddingTop={1} sx={{ display: "flex", justifyContent: "center" }}>
         <VoiceAnalyser
+          pageName={"m5"}
+          updateStoredData={updateStoredData}
           setVoiceText={setVoiceText}
           setRecordedAudio={setRecordedAudio}
           setVoiceAnimate={setVoiceAnimate}
           storyLine={storyLine}
           dontShowListen={type === "image" || isDiscover}
+          isShowCase={isShowCase || isDiscover}
           originalText={
+            options &&
+            options.length > 0 &&
             options.find((option) => option.isAns === true).text
               ? options.find((option) => option.isAns === true).text
               : parentWords

src/components/Practice/Mechanics6.jsx

@@ -94,6 +94,8 @@ const Mechanics2 = ({
     initializeAudio();
   }, [contentId, parentWords]);
 
+  //console.log('Mechanics6');
+
   const getSimilarWords = async (wordForFindingHomophones) => {
     const lang = getLocalData("lang");
     // const isFillInTheBlanks = type === "fillInTheBlank";
@@ -186,6 +188,7 @@ const Mechanics2 = ({
 
   return (
     <MainLayout
+      pageName={"m6"}
       background={background}
       handleNext={handleNext}
       enableNext={enableNext}
@@ -470,6 +473,7 @@ const Mechanics2 = ({
       {
         <Box sx={{ display: "flex", justifyContent: "center" }}>
           <VoiceAnalyser
+            pageName={"m6"}
             setVoiceText={setVoiceText}
             setRecordedAudio={setRecordedAudio}
             setVoiceAnimate={setVoiceAnimate}

src/utils/VoiceAnalyser.js

@@ -74,6 +74,9 @@ function VoiceAnalyser(props) {
   const [isAudioPreprocessing, setIsAudioPreprocessing] = useState(
     process.env.REACT_APP_IS_AUDIOPREPROCESSING === "true"
   );
+  const [isMatching, setIsMatching] = useState(false);
+
+  //console.log('audio', recordedAudio, isMatching);
 
   useEffect(() => {
     if (!props.enableNext) {
@@ -348,6 +351,14 @@ function VoiceAnalyser(props) {
         }
       }
 
+      if (responseText.toLowerCase() === originalText.toLowerCase()) {
+        setIsMatching(true);
+      } else {
+        setIsMatching(false);
+      }
+
+      //console.log('textss', recordedAudio, isMatching, responseText, originalText);
+
       const responseEndTime = new Date().getTime();
       const responseDuration = Math.round(
         (responseEndTime - responseStartTime) / 1000
@@ -602,6 +613,8 @@ function VoiceAnalyser(props) {
       });
   };
 
+  //console.log('textss', recordedAudio, isMatching);
+
   return (
     <div>
       {loader ? (
@@ -663,6 +676,12 @@ function VoiceAnalyser(props) {
           <Box
             sx={{ cursor: "pointer" }}
             onClick={() => {
+              if (
+                props.pageName === "wordsorimage" ||
+                props.pageName === "m5"
+              ) {
+                props.updateStoredData(recordedAudio, isMatching);
+              }
               if (props.setIsNextButtonCalled) {
                 props.setIsNextButtonCalled(true);
               } else {
@@ -696,6 +715,8 @@ VoiceAnalyser.propTypes = {
   setVoiceText: PropTypes.func.isRequired,
   livesData: PropTypes.object,
   contentId: PropTypes.string,
+  updateStoredData: PropTypes.func.isRequired,
+  pageName: PropTypes.string,
 };
 
 export default VoiceAnalyser;

src/views/Practice/Practice.jsx

@@ -41,7 +41,7 @@ const Practice = () => {
   const [level, setLevel] = useState("");
   const [isShowCase, setIsShowCase] = useState(false);
   const [startShowCase, setStartShowCase] = useState(false);
-  const limit = 6;
+  const limit = 5;
   const [disableScreen, setDisableScreen] = useState(false);
   const [mechanism, setMechanism] = useState("");
 
@@ -215,6 +215,10 @@ const Practice = () => {
       let newQuestionIndex =
         currentQuestion === questions.length - 1 ? 0 : currentQuestion + 1;
 
+      const currentGetContent = levelGetContent?.[level]?.find(
+        (elem) => elem.title === practiceSteps?.[newPracticeStep]?.name
+      );
+
       if (currentQuestion === questions.length - 1 || isGameOver) {
         // navigate or setNextPracticeLevel
         let currentPracticeStep =
@@ -233,7 +237,10 @@ const Practice = () => {
               user_id: virtualId,
               totalSyllableCount: totalSyllableCount,
               language: localStorage.getItem("lang"),
-              is_mechanics: currentGetContent?.mechanism?.id ? true : false,
+              is_mechanics:
+                currentGetContent && currentGetContent?.mechanism?.id
+                  ? true
+                  : false,
             }
           );
           const { data: getSetData } = getSetResultRes;
@@ -284,10 +291,6 @@ const Practice = () => {
           currentPracticeProgress = 0;
         }
 
-        const currentGetContent = levelGetContent?.[level]?.find(
-          (elem) => elem.title === practiceSteps?.[newPracticeStep].name
-        );
-
         await axios.post(
           `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.ADD_LESSON}`,
           {
@@ -828,7 +831,7 @@ const Practice = () => {
             setOpenMessageDialog,
             options: questions[currentQuestion]?.mechanics_data
               ? questions[currentQuestion]?.mechanics_data[0]?.options
-              : null,
+              : [],
           }}
         />
       );
@@ -878,7 +881,7 @@ const Practice = () => {
     } else if (mechanism.name === "readTheImage") {
       const options = questions[currentQuestion]?.mechanics_data
         ? questions[currentQuestion]?.mechanics_data[0]?.options
-        : null;
+        : [];
       const audioLink =
         options && options.length > 0
           ? options.find((option) => option.isAns === true)?.audio_url || null
@@ -1056,7 +1059,7 @@ const Practice = () => {
             setOpenMessageDialog,
             options: questions[currentQuestion]?.mechanics_data
               ? questions[currentQuestion]?.mechanics_data[0]?.options
-              : null,
+              : [],
           }}
         />
       );