+ {words.map((word, index) => {
+ const isUnderlined = underlinedWords.includes(word);
+ const cleanWord = word.replace(/[.,!?;]/g, "");
+
+ return (
+
+ {
+ if (isUnderlined && showUnderlines) {
+ const rect = e.target.getBoundingClientRect();
+ onWordHover(cleanWord, {
+ top: rect.bottom + 5,
+ left: rect.left + rect.width / 2,
+ });
+ }
+ }}
+ onMouseLeave={() => {
+ if (isUnderlined && showUnderlines) {
+ onWordHover(null, { top: 0, left: 0 });
+ }
+ }}
+ >
+ {word}
+ {isUnderlined && showUnderlines && (
+
+ )}
+
+ {index < words.length - 1 && " "}
+
+ );
+ })}
+
+ );
+};
+
+const LanguageHint = ({ hint }) => {
+ if (!hint) return null;
+
+ return (
+
+ {words.map((word, index) => {
+ const isUnderlined = underlinedWords.includes(word);
+ const cleanWord = word.replace(/[.,!?;]/g, "");
+
+ return (
+
+ {
+ if (isUnderlined && showUnderlines) {
+ const rect = e.target.getBoundingClientRect();
+ onWordHover(cleanWord, {
+ top: rect.bottom + 5,
+ left: rect.left + rect.width / 2,
+ });
+ }
+ }}
+ onMouseLeave={() => {
+ if (isUnderlined && showUnderlines) {
+ onWordHover(null, { top: 0, left: 0 });
+ }
+ }}
+ >
+ {word}
+ {isUnderlined && showUnderlines && (
+
+ )}
+
+ {index < words.length - 1 && " "}
+
+ );
+ })}
+
+ );
+};
+
+const LanguageHint = ({ hint }) => {
+ if (!hint) return null;
+
+ return (
+ {},
+ callUpdateLearner,
+ disableScreen,
+ isShowCase,
+ handleBack,
+ setEnableNext,
+ loading,
+ setOpenMessageDialog,
+ audio,
+ currentImg,
+ fluency,
+ startShowCase,
+ setStartShowCase,
+ livesData,
+ setLivesData,
+ gameOverData,
+ highlightWords,
+ matchedChar,
+ isNextButtonCalled,
+ setIsNextButtonCalled,
+ vocabCount,
+ wordCount,
+}) => {
+ const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+ const isTablet = useMediaQuery(theme.breakpoints.between("sm", "md"));
+ const navigate = useNavigate();
+ const [showConfetti, setShowConfetti] = useState(false);
+ const [matches, setMatches] = useState([]);
+ const [selectedWord, setSelectedWord] = useState(null);
+ const [selectedImage, setSelectedImage] = useState(null);
+ const [correctMatch, setCorrectMatch] = useState(null);
+ const [isFaded, setIsFaded] = useState(false);
+ const [wrongMatch, setWrongMatch] = useState({
+ wordIndex: null,
+ imageIndex: null,
+ });
+ const [showInitialSelection, setShowInitialSelection] = useState(false);
+ const [shuffledImages, setShuffledImages] = useState([]);
+ const [shuffledWords, setShuffledWords] = useState([]);
+
+ const defaultWordImagePairs = [
+ { word: "Bike", img: bikeImg, match: "Bike" },
+ { word: "Lime", img: lemonImg, match: "Lime" },
+ { word: "Farmer", img: farmerImg, match: "Farmer" },
+ { word: "Fan", img: fanImg, match: "Fan" },
+ { word: "Fire", img: fireImg, match: "Fire" },
+ { word: "Tie", img: tieImg, match: "Tie" },
+ ];
+ const [firstAttemptCorrect, setFirstAttemptCorrect] = useState({});
+ const [wordImagePairs, setWordImagePairs] = useState(null);
+
+ useEffect(() => {
+ if (level === 1) {
+ setLocalData("readMatch", false);
+ navigate("/practice");
+ }
+ }, [level]);
+
+ useEffect(() => {
+ const fetchCorrectWords = async () => {
+ try {
+ const response = await getCorrectPracticeWords("false");
+ const correctWords = response?.data || [];
+ console.log("level api", level);
+
+ const formattedCorrectWords = correctWords?.map((item) => ({
+ word: item?.contentSourceData?.[0]?.text,
+ img: item?.imagePath || item?.mechanics_data?.[0]?.image_url,
+ match: item?.contentSourceData?.[0]?.text,
+ content_id: item?.contentId,
+ }));
+
+ if (formattedCorrectWords <= 3) {
+ setLocalData("readMatch", false);
+ }
+
+ setWordImagePairs(formattedCorrectWords);
+ } catch (error) {
+ console.error("Error fetching and mapping words:", error);
+ }
+ };
+
+ fetchCorrectWords();
+ }, []);
+
+ console.log("imagePairs", wordImagePairs);
+
+ const words = wordImagePairs?.map((pair) => pair.word);
+ const correctMatches = wordImagePairs?.map((pair) => pair.match);
+
+ const shuffledRef = useRef(null);
+
+ if (!shuffledRef.current && Array.isArray(words)) {
+ shuffledRef.current = [...words].sort(() => Math.random() - 0.5);
+ }
+
+ const shuffleArray = (array) => {
+ const newArray = [...array];
+ for (let i = newArray.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
+ }
+ return newArray;
+ };
+
+ console.log("matches", shuffledImages);
+
+ useEffect(() => {
+ console.log("res", matches.length, wordImagePairs?.length);
+
+ if (matches.length === wordImagePairs?.length) {
+ const formattedData = wordImagePairs?.map((item) => ({
+ content_id: item.content_id,
+ practice: true,
+ learned: true,
+ understood: firstAttemptCorrect[item.content_id] === true,
+ }));
+
+ updateCorrectPracticeWords(formattedData)
+ .then((res) => {
+ console.log("Update successful:", res);
+ setLocalData("readMatch", false);
+ navigate("/practice");
+ })
+ .catch((err) => {
+ console.error("Error updating correct practice words:", err);
+ if (process.env.REACT_APP_IS_APP_IFRAME === "true") {
+ navigate("/");
+ } else {
+ navigate("/discover-start");
+ }
+ });
+ }
+ }, [matches]);
+
+ const handleWordClick = (word, wordIndex) => {
+ if (isMatchedWord(wordIndex)) return;
+ setSelectedWord({ word, wordIndex });
+ setSelectedImage(null);
+ setWrongMatch({ wordIndex: null, imageIndex: null });
+ setShowInitialSelection(false);
+ };
+
+ const handleImageClick = (imageIndex) => {
+ if (!selectedWord) return;
+ if (isMatchedImage(imageIndex)) return;
+
+ setSelectedImage(imageIndex);
+ setShowInitialSelection(true);
+
+ const wordItem = wordImagePairs.find(
+ (item) => item.word === selectedWord.word
+ );
+ const imageItem = wordImagePairs[imageIndex];
+
+ const isCorrect = imageItem?.match === wordItem?.word;
+
+ if (firstAttemptCorrect[wordItem.content_id] === undefined) {
+ setFirstAttemptCorrect((prev) => ({
+ ...prev,
+ [wordItem.content_id]: isCorrect,
+ }));
+ }
+
+ if (isCorrect) {
+ const audio = new Audio(correctSound);
+ audio.play();
+ setCorrectMatch({ wordIndex: selectedWord.wordIndex, imageIndex });
+ setTimeout(() => {
+ setShowConfetti(true);
+ setTimeout(() => {
+ setMatches([
+ ...matches,
+ { sourceIndex: imageIndex, wordIndex: selectedWord.wordIndex },
+ ]);
+ setCorrectMatch(null);
+ setShowConfetti(false);
+ setIsFaded(true);
+ setSelectedWord(null);
+ setSelectedImage(null);
+ setShowInitialSelection(false);
+ }, 2500);
+ }, 500);
+ } else {
+ const audio = new Audio(wrongSound);
+ audio.play();
+ setTimeout(() => {
+ setWrongMatch({ wordIndex: selectedWord.wordIndex, imageIndex });
+ setTimeout(() => {
+ setSelectedWord(null);
+ setSelectedImage(null);
+ setWrongMatch({ wordIndex: null, imageIndex: null });
+ setShowInitialSelection(false);
+ }, 1000);
+ }, 1000);
+ }
+ };
+
+ const isMatchedWord = (wordIndex) =>
+ matches.some((m) => m.wordIndex === wordIndex);
+ const isMatchedImage = (imageIndex) =>
+ matches.some((m) => m.sourceIndex === imageIndex);
+ const isCorrectMatchWord = (wordIndex) =>
+ correctMatch?.wordIndex === wordIndex;
+ const isCorrectMatchImage = (imageIndex) =>
+ correctMatch?.imageIndex === imageIndex;
+ const isWrongMatchWord = (wordIndex) => wrongMatch.wordIndex === wordIndex;
+ const isWrongMatchImage = (imageIndex) =>
+ wrongMatch.imageIndex === imageIndex;
+ const isInitialSelection = (wordIndex, imageIndex) =>
+ showInitialSelection &&
+ selectedWord?.wordIndex === wordIndex &&
+ selectedImage === imageIndex;
+
+ const getImageStyle = (index) => {
+ const isMatched = isMatchedImage(index);
+ const isCorrect = isCorrectMatchImage(index) && showConfetti;
+ const isSelected = selectedImage === index;
+ const isWrong = isWrongMatchImage(index);
+ const isDisabled = isMatched && !isCorrect;
+ const isInitial = isInitialSelection(selectedWord?.wordIndex, index);
+
+ return {
+ border: isCorrect
+ ? "1px solid #c1e2a7"
+ : isWrong
+ ? "1px solid #FF4B4B"
+ : isDisabled
+ ? "1px solid rgba(0,0,0,0.3)"
+ : isInitial
+ ? "1px solid #A856FF"
+ : "1px solid #A856FF",
+ borderRadius: "10px",
+ padding: isMobile ? "5px" : "10px",
+ width: isMobile ? "80px" : isTablet ? "120px" : "150px",
+ height: isMobile ? "50px" : isTablet ? "75px" : "90px",
+ backgroundColor: isCorrect
+ ? "#DEF5CC"
+ : isWrong
+ ? "#FEE4D5"
+ : isDisabled
+ ? "rgba(255, 255, 255, 0.6)"
+ : isInitial
+ ? "#F6EEFF"
+ : isSelected
+ ? "#F6EEFF"
+ : "#fff",
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ cursor: isMatched ? "default" : "pointer",
+ transition: "all 0.3s ease",
+ opacity: isDisabled ? 0.8 : 1,
+ boxShadow:
+ !isMatched && selectedWord && selectedImage === null
+ ? `1px 6px 0px rgba(168, 86, 255, 0.9)`
+ : "none",
+ transform: selectedImage === index ? "translateY(-2px)" : "translateY(0)",
+ };
+ };
+
+ const getWordStyle = (wordIndex) => {
+ const isMatched = isMatchedWord(wordIndex);
+ const isCorrect = isCorrectMatchWord(wordIndex) && showConfetti;
+ const isSelected = selectedWord?.wordIndex === wordIndex;
+ const isDisabled = isMatched && !isCorrect;
+ const isWrong = isWrongMatchWord(wordIndex);
+ const isInitial = isInitialSelection(wordIndex, selectedImage);
+
+ return {
+ border: isCorrect
+ ? "1px solid #c1e2a7"
+ : isWrong
+ ? "1px solid #FF4B4B"
+ : isDisabled
+ ? "1px solid rgba(0,0,0,0.3)"
+ : isInitial
+ ? "1px solid #A856FF"
+ : "1px solid #A856FF",
+ borderRadius: "10px",
+ padding: isMobile ? "5px 10px" : "10px 20px",
+ font: "Quicksand",
+ backgroundColor: isCorrect
+ ? "#DEF5CC"
+ : isWrong
+ ? "#FEE4D5"
+ : isDisabled
+ ? "rgba(255, 255, 255, 0.4)"
+ : isInitial
+ ? "#F6EEFF"
+ : isSelected
+ ? "#F6EEFF"
+ : "#fff",
+ cursor: isMatched ? "default" : "pointer",
+ transition: "all 0.3s ease",
+ opacity: isDisabled ? 0.5 : 1,
+ fontFamily: "Quicksand, sans-serif",
+ fontWeight: 600,
+ fontSize: isMobile ? "16px" : isTablet ? "20px" : "32px",
+ lineHeight: isMobile ? "16px" : isTablet ? "20px" : "24px",
+ letterSpacing: "0px",
+ color: "#333F61",
+ textAlign: "center",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ height: isMobile ? "20px" : isTablet ? "22px" : "90px",
+ width: isMobile ? "80px" : isTablet ? "120px" : "150px",
+ };
+ };
+
+ return (
+
+
+ {showConfetti && }
+
+
+
+ {/* */}
+
+ {"Word Practice"}
+
+
+
+
+
+ {shuffledRef?.current?.map((word, i) => (
+ !isMatchedWord(i) && handleWordClick(word, i)}
+ sx={getWordStyle(i)}
+ >
+ {word}
+
+ ))}
+
+
+
+ {wordImagePairs?.slice(0, 6)?.map((item, index) => (
+
+ !isMatchedImage(index) && handleImageClick(index)
+ }
+ sx={getImageStyle(index)}
+ >
+
+
+ ))}
+
+
+
+
+
+ );
+};
+
+export default ReadMatch;
diff --git a/src/components/Practice/TowreFlow.jsx b/src/components/Practice/TowreFlow.jsx
index b5a849d8..49852e46 100644
--- a/src/components/Practice/TowreFlow.jsx
+++ b/src/components/Practice/TowreFlow.jsx
@@ -22,7 +22,7 @@ import booksStackImg from "../../assets/totalWord.svg";
import reportPandaImg from "../../assets/pandaa.svg";
import reportImg from "../../assets/reportImg.svg";
import { setLocalData, getLocalData } from "../../utils/constants";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
import MainLayout from "../Layouts.jsx/MainLayout";
import SpeechRecognition, {
useSpeechRecognition,
@@ -34,7 +34,7 @@ import { PutObjectCommand } from "@aws-sdk/client-s3";
env.localModelPath = "https://huggingface.co/Xenova/whisper-tiny/resolve/main/";
-const allWords = [
+const allEnglishWords = [
{ title: "is", isCorrect: false },
{ title: "up", isCorrect: false },
{ title: "cat", isCorrect: false },
@@ -145,9 +145,436 @@ const allWords = [
{ title: "collective", isCorrect: false },
];
-const wordsData = allWords?.map((word, idx) => ({
- id: idx + 1,
- word,
+const teluguWords = [
+ "అర",
+ "జడ",
+ "గద",
+ "కల",
+ "దడ",
+ "లత",
+ "ఒక",
+ "జత",
+ "ఈల",
+ "పద",
+ "ఏం",
+ "మీ",
+ "గోడ",
+ "బడి",
+ "పొగ",
+ "చీర",
+ "నది",
+ "జలజ",
+ "తబల",
+ "ఇతర",
+ "కలప",
+ "రచన",
+ "రుచి",
+ "గాలి",
+ "కాలు",
+ "తాగు",
+ "దండ",
+ "బాతు",
+ "ఎగరు",
+ "గింజ",
+ "బెడద",
+ "ఈతడు",
+ "మోసం",
+ "బురద",
+ "దోరగ",
+ "బలం",
+ "తలుపు",
+ "కంఠం",
+ "గుర్రం",
+ "శక్తి",
+ "ఎత్తు",
+ "జన్మ",
+ "పద్యం",
+ "కడుగు",
+ "బాలిక",
+ "పెరుగు",
+ "గుడారు",
+ "ఇతరుల",
+ "కదలరా",
+ "తరగతి",
+ "నిలకడ",
+ "రచనలు",
+ "ఊరేగింపు",
+ "హిందువులు",
+ "ఊరగాయ",
+ "అత్తరు",
+ "కట్నము",
+ "వచ్చాయి",
+ "వాకిళ్లు",
+ "ఉత్తరం",
+ "మెల్లన",
+ "కృత్తిక",
+ "సరస్వతి",
+ "దశాబ్దము",
+ "ముత్తాత",
+ "పిన్నీసు",
+ "శతబ్దం",
+ "స్కూటరు",
+ "బొమ్మలు",
+ "అత్తెము",
+ "సంరక్షణ",
+ "ప్రయత్నం",
+ "గ్రీష్మము",
+ "వ్యాజ్యము",
+ "ప్రత్యేకం",
+ "తాత్పర్యం",
+ "విద్యార్థి",
+ "ఆధ్వర్యం",
+ "మధ్యాహ్నం",
+ "ప్రాధాన్యత",
+ "వాత్సల్యం",
+ "పరిశ్రమ",
+ "సంస్కృతి",
+ "ముఖ్యమంత్రి",
+ "సముద్రము",
+ "స్వాతంత్య్రం",
+ "ప్రత్యక్షం",
+ "గురుదక్షిణ",
+ "పుణ్యక్షేత్రం",
+ "కృతజ్ఞతలు",
+ "కొల్పలము",
+ "విరోధికృత్తు",
+ "పురస్కారము",
+ "అక్షధూర్తుడు",
+ "విశ్వకర్ముడు",
+ "ఇంద్రియార్థము",
+ "సమయస్ఫూర్తి",
+ "వార్షికోత్సవం",
+ "ప్రధానమంత్రి",
+ "ఆత్మవిశ్వాసం",
+];
+
+const allTeluguWords = teluguWords.map((word) => ({
+ title: word,
+ isCorrect: false,
+}));
+
+const kannadaWords = [
+ "ಎಡ",
+ "ಗರ",
+ "ಬಲ",
+ "ಲಯ",
+ "ಈಗ",
+ "ಕದ",
+ "ಚಟ",
+ "ತಪ",
+ "ದಳ",
+ "ಆಟ",
+ "ಕೈ",
+ "ಭೂ",
+ "ಇಲಿ",
+ "ದಾರ",
+ "ನಗು",
+ "ಅಳು",
+ "ಚೀಲ",
+ "ಕಡಗ",
+ "ಈಚಲ",
+ "ನಗರ",
+ "ಪದಕ",
+ "ಔತಣ",
+ "ರುಚಿ",
+ "ಕೋಣ",
+ "ಬಾಯಿ",
+ "ಕುಡಿ",
+ "ಗೀರು",
+ "ದಂಡೆ",
+ "ಬಿಳಿ",
+ "ಕಡಲು",
+ "ಮಂಡಿ",
+ "ಚಾದರ",
+ "ಜೀವನ",
+ "ತುಂಟ",
+ "ನೀರಸ",
+ "ಸಿಂಹ",
+ "ಆರೋಪ",
+ "ಒಂಟೆ",
+ "ಶಬ್ದ",
+ "ಖಡ್ಗ",
+ "ಸ್ವರ",
+ "ಇಷ್ಟ",
+ "ಪದ್ಮ",
+ "ಕಡುಬು",
+ "ಬಾಲಕಿ",
+ "ತಲುಪು",
+ "ಚಿಮಣಿ",
+ "ಹಸಿರು",
+ "ಆಟಗಾರ",
+ "ಜಾನಪದ",
+ "ಗಡಿಯಾರ",
+ "ತರಕಾರಿ",
+ "ಸಂಪಾದಕ",
+ "ಅಂತಃಕಲಹ",
+ "ಸಹಕರಿಸು",
+ "ಚಿನಕುರಳಿ",
+ "ನಂದಗೋಕುಲ",
+ "ಹಳೇಬೀಡು",
+ "ಘನಾಕೃತಿ",
+ "ಪುಳಿಯೋಗರೆ",
+ "ರೇಖಾಕೃತಿ",
+ "ಹಬ್ಬದೂಟ",
+ "ಪರಸ್ಪರ",
+ "ಕನ್ನಂಬಾಡಿ",
+ "ಸ್ವರಚಿತ",
+ "ಆಹ್ವಾನ",
+ "ರಂಗಸ್ಥಳ",
+ "ಸದ್ಬಳಕೆ",
+ "ಶ್ರೀಮಂತ",
+ "ತತ್ವಪದ",
+ "ಸಮನ್ವಯ",
+ "ಯಕ್ಷಗಾನ",
+ "ಕೋಷ್ಟಕ",
+ "ಕಾಮನಬಿಲ್ಲು",
+ "ಶಬ್ದಕೋಶ",
+ "ಪ್ರಾಸಪದ",
+ "ಪರೀಕ್ಷೆ",
+ "ಅದೃಷ್ಟ",
+ "ಕಾಲ್ಚೀಲ",
+ "ಪದ್ಯಭಾಗ",
+ "ಸಂಕ್ರಾಂತಿ",
+ "ರಾಜಾಜ್ಞೆ",
+ "ಪ್ರಧಾನಿ",
+ "ಸಂಗ್ರಹಾಲಯ",
+ "ಅಪಪ್ರಚಾರ",
+ "ಸೌಂದರ್ಯ",
+ "ಸಾರ್ವಭೌಮ",
+ "ಭಾಷಾಭ್ಯಾಸ",
+ "ರಾಷ್ಟ್ರೀಯ",
+ "ಕರವಸ್ತ್ರ",
+ "ಚಿತ್ರಾನ್ನ",
+ "ವಿದ್ಯಾರ್ಥಿ",
+ "ಆತ್ಮವಿಶ್ವಾಸ",
+ "ಮಾರ್ಗದರ್ಶನ",
+ "ವಾರ್ಷಿಕೋತ್ಸವ",
+ "ಗಣ್ಯವ್ಯಕ್ತಿ",
+ "ಪುಣ್ಯಕ್ಷೇತ್ರ",
+ "ಸ್ಪರ್ಧಾತ್ಮಕ",
+ "ಪ್ರಶ್ನಾರ್ಥಕ",
+ "ಕರ್ತವ್ಯನಿಷ್ಠೆ",
+];
+
+const allKannadaWords = kannadaWords.map((word) => ({
+ title: word,
+ isCorrect: false,
+}));
+
+const hindiWords = [
+ "तल",
+ "पर",
+ "नर",
+ "कम",
+ "रस",
+ "एक",
+ "घर",
+ "बल",
+ "यह",
+ "जब",
+ "नौ",
+ "दो",
+ "आज",
+ "गला",
+ "दिन",
+ "सास",
+ "ताऊ",
+ "नगर",
+ "समय",
+ "कमल",
+ "अलग",
+ "शहर",
+ "जाति",
+ "चीता",
+ "पैसा",
+ "जंतु",
+ "गीला",
+ "सेना",
+ "अंक",
+ "गणित",
+ "बादल",
+ "ऊँचा",
+ "गाज़र",
+ "सूरज",
+ "घंटी",
+ "लड़का",
+ "कहाँ",
+ "क्या",
+ "जन्म",
+ "अम्ल",
+ "शब्द",
+ "सत्य",
+ "नाचना",
+ "बाज़ार",
+ "गुलाबी",
+ "शारीर",
+ "आकाश",
+ "कबूतर",
+ "उबलना",
+ "सरकार",
+ "दोपहर",
+ "जरूरत",
+ "चौंतीस",
+ "सुनाओं",
+ "औषधि",
+ "मण्डल",
+ "कम्बल",
+ "प्रकार",
+ "विकल्प",
+ "अक्सर",
+ "प्रगति",
+ "उत्पाद",
+ "बिस्तर",
+ "व्यापार",
+ "आरम्भ",
+ "कारागृह",
+ "संघर्ष",
+ "मातृभाषा",
+ "कामाख्या",
+ "ज़िम्मेदार",
+ "प्रतिलिपि",
+ "मुस्कराना",
+ "गणतंत्र",
+ "पारस्परिक",
+ "उपस्थिति",
+ "प्राकृतिक",
+ "परिस्थिती",
+ "अध्यापक",
+ "वैज्ञानिक",
+ "सुरक्षित",
+ "व्यवहार",
+ "शब्दकोश",
+ "राष्ट्रीय",
+ "वर्णमाला",
+ "कर्मचारी",
+ "वर्तमान",
+ "धन्यवाद",
+ "महोत्सव",
+ "निन्यानवे",
+ "संग्रहालय",
+ "चिकित्सालय",
+ "निम्नलिखित",
+ "सृजनात्मक",
+ "आशीर्वाद",
+ "परिवर्तन",
+ "अभिनेत्री",
+ "रक्षाबंधन",
+ "पर्यावरण",
+ "इन्द्रधनुष",
+ "महत्वपूर्ण",
+];
+
+const allHindiWords = hindiWords.map((word) => ({
+ title: word,
+ isCorrect: false,
+}));
+
+const tamilWords = [
+ "கல்",
+ "பல்",
+ "கண்",
+ "மண்",
+ "பழம்",
+ "மரம்",
+ "மணல்",
+ "கடல்",
+ "வனம்",
+ "களம்",
+ "தளம்",
+ "எரி",
+ "நெய்",
+ "வரம்",
+ "நலம்",
+ "மனம்",
+ "கனம்",
+ "கணம்",
+ "மழை",
+ "சமம்",
+ "வட்டம்",
+ "கட்டம்",
+ "பட்டம்",
+ "திட்டம்",
+ "பக்கம்",
+ "மடம்",
+ "கப்பல்",
+ "படம்",
+ "மணம்",
+ "சரம்",
+ "பலம்",
+ "பலன்",
+ "வளம்",
+ "வண்ணம்",
+ "அக்கா",
+ "சட்டை",
+ "மக்கள்",
+ "ஓடம்",
+ "மரணம்",
+ "மகள்",
+ "உரம்",
+ "நகல்",
+ "அச்சம்",
+ "உலர்",
+ "பந்தம்",
+ "நடனம்",
+ "நகரம்",
+ "அச்சகம்",
+ "பந்தல்",
+ "கணவன்",
+ "சங்கம்",
+ "அங்கம்",
+ "கரணம்",
+ "இனம்",
+ "கழகம்",
+ "பண்டலம்",
+ "இதயம்",
+ "இடம்",
+ "பதக்கம்",
+ "அடக்கம்",
+ "கதம்பம்",
+ "உளம்",
+ "நண்பர்",
+ "மத்தளம்",
+ "மஞ்சள்",
+ "சக்கரம்",
+ "பழக்கம்",
+ "வழக்கம்",
+ "வழங்கல்",
+ "வசனம்",
+ "வசந்தம்",
+ "சமயம்",
+ "சங்கடம்",
+ "சந்தனம்",
+ "சமரம்",
+ "தகரம்",
+ "கலகம்",
+ "கலகலம்",
+ "சலசலம்",
+ "வரன்",
+ "பொம்மை",
+ "ஒட்டகம்",
+ "இரதம்",
+ "நண்பன்",
+ "ஆலயம்",
+ "இரக்கம்",
+ "ஆக்கம்",
+ "ஓணம்",
+ "சம்பளம்",
+ "நல்லவன்",
+ "மண்டபம்",
+ "வல்லவன்",
+ "ஆலமரம்",
+ "இலக்கம்",
+ "நாங்கள்",
+ "உறக்கம்",
+ "தொடங்கு",
+ "வணக்கம்",
+ "ஊஞ்சல்",
+ "ஊர்வலம்",
+];
+
+const allTamilWords = tamilWords.map((word) => ({
+ title: word,
+ isCorrect: false,
}));
const theme = createTheme();
@@ -173,8 +600,6 @@ const createWordSets = (words) => {
return sets;
};
-const allWordSets = createWordSets(allWords);
-
const CombinedReportPage = ({
currentWordSetIndex,
wordsAttempted,
@@ -188,18 +613,17 @@ const CombinedReportPage = ({
const theme = createTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const navigate = useNavigate();
+ const location = useLocation();
const wordCount = transcript.trim().split(/\s+/).length;
//const wordsPerMinute = Math.round((wordCount / totalSec) * 60);
const totalWordsInCurrentSets = (currentWordSetIndex + 1) * 12;
- //console.log("transcript", wordCount);
-
const attemptedWordsCount = wordCount;
const correctWordsCount = allWords.filter((word) => word.isCorrect).length;
const wordsPerMinute = Math.round((correctWordsCount / totalSec) * 60);
const unattemptedWordsCount = allWords.length - correctWordsCount;
const newWordsLearnt = correctWordsCount;
- const totalWordsLearnt = correctWordsCount + wpm;
+ const totalWordsLearnt = Number(correctWordsCount || 0) + Number(wpm || 0);
const renderResults = () => (
{
setLocalData("tFlow", false);
//window.location.reload();
- if (process.env.REACT_APP_IS_APP_IFRAME === "true") {
+ if (location.pathname.includes("/towre-flow")) {
+ navigate("/discover-end");
+ } else if (process.env.REACT_APP_IS_APP_IFRAME === "true") {
navigate("/");
} else {
navigate("/discover-start");
@@ -663,10 +1089,25 @@ const TowreFlow = ({
resetTranscript,
browserSupportsSpeechRecognition,
} = useSpeechRecognition();
+ const lang = getLocalData("lang");
+
+ const wordsByLang = {
+ en: allEnglishWords,
+ hi: allHindiWords,
+ te: allTeluguWords,
+ ka: allKannadaWords,
+ ta: allTamilWords,
+ };
+
+ const allWords = wordsByLang[lang] || allEnglishWords;
+
+ const allWordSets = createWordSets(allWords);
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const currentWordSet = allWordSets[currentWordSetIndex];
const transcriptRef = useRef("");
- const lang = getLocalData("lang");
+ const location = useLocation();
+ background = "linear-gradient(45deg, #FF730E 30%, #FFB951 90%)";
+ showTimer = false;
useEffect(() => {
transcriptRef.current = transcript;
@@ -850,7 +1291,8 @@ const TowreFlow = ({
setLoading(true);
const transcriber = await pipeline(
"automatic-speech-recognition",
- ""
+ "Xenova/whisper-tiny",
+ { quantized: true }
);
const audioUrl = URL.createObjectURL(audioBlob);
@@ -1219,7 +1661,7 @@ const TowreFlow = ({
style={{
position: "relative",
width: 180,
- height: 110,
+ height: 85,
display: "flex",
justifyContent: "center",
alignItems: "center",
@@ -1255,7 +1697,7 @@ const TowreFlow = ({
- Bonus Round!
+ Towre Flow
![]()
{
+ return (
+
+ );
+};
+
+const WordWall = ({
+ handleNext,
+ enableNext,
+ background,
+ steps,
+ currentStep,
+ level,
+ progressData,
+ showProgress,
+ handleBack,
+ disableScreen,
+ loading,
+ vocabCount,
+ wordCount,
+ multilingual,
+}) => {
+ const [dropText, setDropText] = useState("");
+ const [showQuiz, setShowQuiz] = useState(false);
+ const [correctCount, setCorrectCount] = useState(0);
+ const [wrongCount, setWrongCount] = useState(0);
+ const [selectedId, setSelectedId] = useState(null);
+ const [showConfetti, setShowConfetti] = useState(false);
+ const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+ const [showGiftBoxes, setShowGiftBoxes] = useState(false);
+ const [showGiftAnimation, setShowGiftAnimation] = useState(false);
+ const [showReview, setShowReview] = useState(false);
+ const [wrongAnswersAllQuestions, setWrongAnswersAllQuestions] = useState([]);
+ const [currentReviewIndex, setCurrentReviewIndex] = useState(0);
+ const [openedGifts, setOpenedGifts] = useState([]);
+ const [showGiftImage, setShowGiftImage] = useState(false);
+ const [progress, setProgress] = useState(0);
+ const [giftsOpened, setGiftsOpened] = useState(0);
+ const [showResults, setShowResults] = useState(false);
+ const navigate = useNavigate();
+
+ const [windowSize, setWindowSize] = useState({
+ width: window.innerWidth,
+ height: window.innerHeight,
+ });
+ const [scoreAnimation, setScoreAnimation] = useState({
+ show: false,
+ value: "",
+ color: "",
+ startPos: { x: 0, y: 0 },
+ endPos: { x: 0, y: 0 },
+ });
+ const [lastAnswerResult, setLastAnswerResult] = useState(null);
+ const [pendingScoreUpdate, setPendingScoreUpdate] = useState({
+ value: 0,
+ isCorrect: false,
+ });
+ const [boxAnimation, setBoxAnimation] = useState({
+ correct: false,
+ wrong: false,
+ });
+
+ const [gameData, setGameData] = useState([]);
+ const correctBoxRef = useRef(null);
+ const wrongBoxRef = useRef(null);
+ const animationRef = useRef(null);
+ const username = getLocalData("profileName") || "User";
+
+ console.log("counts", wrongAnswersAllQuestions);
+
+ useEffect(() => {
+ const fetchGameData = async () => {
+ try {
+ const response = await getCorrectPracticeWords("false");
+ const correctWords = response?.data || [];
+
+ const formattedItems = correctWords?.map((item) => ({
+ image_url: item?.imagePath || item.mechanics_data?.[0].image_url,
+ text: item?.contentSourceData?.[0]?.text,
+ audio_en: `${item?.contentId}.wav`,
+ audio_hi: item?.multilingual?.kn?.audio_url,
+ }));
+
+ if (correctWords?.length < 3) {
+ setLocalData("wordWall", false);
+ navigate("/practice");
+ }
+
+ const shuffledItems = shuffle([...formattedItems]);
+
+ const correctItems = shuffledItems.slice(0, 3);
+
+ const finalGameData = correctItems.map((correctItem) => {
+ let pool = shuffledItems.filter(
+ (item) => item.text !== correctItem.text
+ );
+
+ if (pool.length < 2) {
+ pool = [...pool, ...shuffledItems].filter(
+ (item) => item.text !== correctItem.text
+ );
+ }
+
+ const incorrectOptions = shuffle(pool).slice(0, 2);
+
+ const options = shuffle([
+ {
+ ...correctItem,
+ isCorrect: true,
+ },
+ ...incorrectOptions.map((item) => ({
+ ...item,
+ isCorrect: false,
+ })),
+ ]);
+
+ return { images: options };
+ });
+
+ console.log(
+ "dataGame",
+ finalGameData,
+ getLocalData("wordWall"),
+ getLocalData("readMatch")
+ );
+
+ setGameData(finalGameData);
+ } catch (err) {
+ console.error("Failed to generate game data:", err);
+ }
+ };
+
+ fetchGameData();
+ }, []);
+
+ useEffect(() => {
+ const styleSheet = document.styleSheets[0];
+ if (styleSheet) {
+ styleSheet.insertRule(
+ `@keyframes dropFromTop {
+ 0% { top: 80px; opacity: 0; }
+ 30% { opacity: 1; }
+ 100% { top: 300px; opacity: 1; }
+ }`,
+ styleSheet.cssRules.length
+ );
+
+ styleSheet.insertRule(
+ `@keyframes scoreFlyToBox {
+ 0% {
+ transform: translate(90%, -70%) scale(1);
+
+ opacity: 1.2;
+ }
+ 70% {
+ opacity: 1.5;
+ }
+ 100% {
+ transform: translate(
+ calc(var(--target-x) - 55vw + 70%),
+ calc(var(--target-y) - 52vh + 80%)
+ ) scale(1);
+ opacity: 0;
+ }
+ }`,
+ styleSheet.cssRules.length
+ );
+
+ styleSheet.insertRule(
+ `@keyframes bounce {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(-15px); }
+ }`,
+ styleSheet.cssRules.length
+ );
+
+ styleSheet.insertRule(
+ `@keyframes popIn {
+ 0% { transform: scale(0.5); opacity: 0; }
+ 70% { transform: scale(1.1); opacity: 1; }
+ 100% { transform: scale(1); opacity: 1; }
+ }`,
+ styleSheet.cssRules.length
+ );
+
+ styleSheet.insertRule(
+ `@keyframes boxBounce {
+ 0%, 100% { transform: scale(1); }
+ 50% { transform: scale(1.2); }
+ }`,
+ styleSheet.cssRules.length
+ );
+
+ styleSheet.insertRule(
+ `@keyframes rotate {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }`,
+ styleSheet.cssRules.length
+ );
+ }
+
+ console.log("dataGameData", dropText);
+
+ const handleResize = () => {
+ setWindowSize({
+ width: window.innerWidth,
+ height: window.innerHeight,
+ });
+ };
+
+ window.addEventListener("resize", handleResize);
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ if (animationRef.current) {
+ clearTimeout(animationRef.current);
+ }
+ };
+ }, [currentQuestionIndex]);
+
+ useEffect(() => {
+ if (gameData?.length > 0) {
+ loadQuestion(currentQuestionIndex);
+ }
+ }, [gameData, currentQuestionIndex]);
+
+ useEffect(() => {
+ if (lastAnswerResult && currentQuestionIndex > 0) {
+ const startPos = {
+ x: window.innerWidth / 2,
+ y: window.innerHeight / 2,
+ };
+
+ const endPos = lastAnswerResult.correct
+ ? {
+ x: window.innerWidth - 90,
+ y: 100,
+ }
+ : {
+ x: 110,
+ y: 100,
+ };
+
+ setScoreAnimation({
+ show: true,
+ value: lastAnswerResult.correct ? "+1" : "-1",
+ color: lastAnswerResult.correct ? "#1F9D55" : "#F37052",
+ startPos,
+ endPos,
+ });
+
+ setPendingScoreUpdate({
+ value: lastAnswerResult.correct ? 1 : -1,
+ isCorrect: lastAnswerResult.correct,
+ });
+
+ setTimeout(() => {
+ setScoreAnimation({ show: false });
+ }, 1500);
+
+ setTimeout(() => {
+ if (lastAnswerResult.correct) {
+ setBoxAnimation((prev) => ({ ...prev, correct: true }));
+ setTimeout(() => {
+ setCorrectCount((prev) => prev + 1);
+ setBoxAnimation((prev) => ({ ...prev, correct: false }));
+ }, 300);
+ } else {
+ setBoxAnimation((prev) => ({ ...prev, wrong: true }));
+ setTimeout(() => {
+ setWrongCount((prev) => prev + 1);
+ setBoxAnimation((prev) => ({ ...prev, wrong: false }));
+ }, 300);
+ }
+ setLastAnswerResult(null);
+ }, 1600);
+ }
+ }, [currentQuestionIndex]);
+
+ const loadQuestion = (questionIndex) => {
+ const correct = gameData?.[questionIndex]?.images?.find(
+ (img) => img.isCorrect
+ );
+ if (correct) {
+ setDropText(correct?.text);
+ }
+ setShowQuiz(false);
+ setSelectedId(null);
+ };
+
+ const playAudio = (src) => {
+ console.log("src", src);
+
+ if (!src) return;
+ const audio = new Audio(src);
+ audio.play();
+ };
+
+ const handleImageClick = (item, id) => {
+ if (selectedId !== null) return;
+
+ setSelectedId(id);
+ const isLastQuestion = currentQuestionIndex === gameData?.length - 1;
+
+ if (item.isCorrect) {
+ setShowConfetti(true);
+ setLastAnswerResult({ correct: true });
+
+ setTimeout(() => {
+ setShowConfetti(false);
+
+ if (isLastQuestion) {
+ setShowResults(true);
+ } else {
+ setCurrentQuestionIndex((prev) => prev + 1);
+ }
+ }, 2000);
+ } else {
+ setLastAnswerResult({ correct: false });
+ const correctAnswer = gameData?.[currentQuestionIndex]?.images.find(
+ (img) => img.isCorrect
+ );
+ setWrongAnswersAllQuestions((prev) => [
+ ...prev,
+ {
+ questionIndex: currentQuestionIndex,
+ item: correctAnswer,
+ },
+ ]);
+
+ setTimeout(() => {
+ if (isLastQuestion) {
+ setShowResults(true);
+ } else {
+ setCurrentQuestionIndex((prev) => prev + 1);
+ }
+ }, 1000);
+ }
+ };
+ const handleGiftClick = (index) => {
+ if (openedGifts.includes(index)) return;
+
+ setOpenedGifts((prev) => [...prev, index]);
+
+ setCurrentReviewIndex(index);
+ setShowGiftAnimation(true);
+ setShowConfetti(true);
+ setShowGiftBoxes(false);
+ setShowGiftImage(false);
+
+ setTimeout(() => {
+ setShowGiftImage(true);
+ }, 1000);
+
+ animationRef.current = setTimeout(() => {
+ setShowGiftAnimation(false);
+ setShowGiftImage(false);
+ setShowConfetti(false);
+ setShowReview(true);
+
+ setGiftsOpened((prev) => {
+ const newCount = prev + 1;
+ const newProgress = Math.min(
+ 100,
+ Math.round((newCount / wrongAnswersAllQuestions.length) * 100)
+ );
+ setProgress(newProgress);
+ return newCount;
+ });
+ }, 3000);
+ };
+ const handleReviewComplete = () => {
+ setShowReview(false);
+
+ if (currentReviewIndex === wrongAnswersAllQuestions.length - 1) {
+ //setShowResults(true);
+ setLocalData("wordWall", false);
+ navigate("/practice");
+ } else {
+ setShowGiftBoxes(true);
+ }
+ };
+
+ const ResultsView = ({ onNext }) => (
+
+
+ You Did It!
+
+
+
+
+
+
+ {3 - wrongAnswersAllQuestions?.length}
+
+
+ Words you
+
+ know
+
+
+
+
+
+
+ {wrongAnswersAllQuestions?.length}
+
+
+ Words to
+
+ Try Again!
+
+
+
+
+
+
{
+ setShowResults(false);
+ setShowGiftBoxes(true);
+ if (wrongAnswersAllQuestions?.length === 0) {
+ setLocalData("wordWall", false);
+ navigate("/practice");
+ }
+ }}
+ />
+
+
+ );
+ const getImageBackground = (item, id) => {
+ if (selectedId !== id) return "#fff";
+ return item.isCorrect ? "#DEF5CC" : "#FEE4D5";
+ };
+
+ const renderGameView = () => (
+ <>
+ {!showQuiz ? (
+ <>
+
setShowQuiz(true)}
+ >
+
+
+ {dropText}
+
+
+
+
+
+
+
+ {-wrongCount}
+
+
+
+
+
setShowQuiz(true)}
+ >
+
+
Click Bubble
+
+
+
+
+
+ {correctCount}
+
+
+
+
+
+ ) : (
+
+
+ Can you find the?
+
+
+ {dropText}
+
+
+ {gameData?.[currentQuestionIndex]?.images?.map((item, idx) => (
+
handleImageClick(item, idx)}
+ >
+
+
+ ))}
+
+
+ )}
+
+ );
+
+ const renderGiftBoxesView = () => (
+
+
+ Let's open gifts
+
+
+
+ {wrongAnswersAllQuestions?.map((wrongAnswer, idx) => {
+ const isOpened = openedGifts.includes(idx);
+ const isAnimating = showGiftAnimation && currentReviewIndex === idx;
+
+ return (
+
!isOpened && !isAnimating && handleGiftClick(idx)}
+ >
+ {isAnimating ? (
+
+ ) : (
+ <>
+
+ {isOpened && (
+
+ {wrongAnswer?.item?.text}
+
+ )}
+
+ )}
+
+ );
+ })}
+
+
+ );
+
+ const renderGiftAnimation = () => (
+
+
+ {!showGiftImage && (
+
+ )}
+
+ {showGiftImage && (
+
+
+
+ )}
+
+
+ );
+
+ const renderReviewView = () => {
+ const currentAnswer = wrongAnswersAllQuestions?.[currentReviewIndex]?.item;
+ const lang = getLocalData("lang");
+
+ if (!currentAnswer) return null;
+
+ return (
+
+
+ This is called a...
+
+
+
+
+
+
+
+ playAudio(
+ `${process.env.REACT_APP_AWS_S3_BUCKET_CONTENT_URL}/all-audio-files/${lang}/${currentAnswer?.audio_en}`
+ )
+ }
+ >
+
+
English
+
+
+ playAudio(
+ `${process.env.REACT_APP_AWS_S3_BUCKET_CONTENT_URL}/multilingual_audios/${currentAnswer?.audio_hi}`
+ )
+ }
+ >
+
+
ಕನ್ನಡ
+
+
+
+
+
+
+
+
+ {currentAnswer?.text}
+
+
+
+
+
+
+
+
+ );
+ };
+
+ return (
+
+ {showResults ? (
+ {
+ setShowGiftBoxes(true);
+ }}
+ />
+ ) : (
+
+ {showConfetti && (
+
+ )}
+
+ {scoreAnimation.show && (
+
+ {scoreAnimation.value}
+
+ )}
+
+
+
+ {`${username}'s Word Wall`}
+
+
+ {(showGiftBoxes || showGiftAnimation || showReview) && (
+
+
+
+
+
+
+
+
+
+
+
+ {giftsOpened}/{wrongAnswersAllQuestions.length}
+
+
+
+ )}
+
+
+ {!showGiftBoxes &&
+ !showGiftAnimation &&
+ !showReview &&
+ renderGameView()}
+ {showGiftBoxes && renderGiftBoxesView()}
+ {showGiftAnimation && renderGiftAnimation()}
+ {showReview && renderReviewView()}
+
+ );
+};
+
+export default WordWall;
diff --git a/src/csp.js b/src/csp.js
index 15c800ca..e2ffc7c2 100644
--- a/src/csp.js
+++ b/src/csp.js
@@ -17,7 +17,7 @@ export const getCSP = (envVariables) => {
media-src 'self' blob: ${REACT_APP_AWS_S3_BUCKET_URL} ${REACT_APP_AWS_S3_BUCKET_CONTENT_URL} https://raw.githubusercontent.com https://github.com ;
connect-src 'self' *.theall.ai ${REACT_APP_HOST} ${REACT_APP_LEARNER_AI_BASE_URL} ${REACT_APP_AWS_S3_BUCKET_URL} ${REACT_APP_AWS_S3_BUCKET_CONTENT_URL} blob: https://huggingface.co https://cas-bridge.xethub.hf.co https://cdn.jsdelivr.net ;
form-action 'self';
- frame-src 'self' https://www.google.com https://www.gstatic.com;
+ frame-src 'self' https://www.google.com https://www.gstatic.com https://www.youtube.com https://www.youtube-nocookie.com;
object-src 'none';
base-uri 'none';
worker-src 'self' blob:;
diff --git a/src/routes/index.js b/src/routes/index.js
index c6a436b7..0606493c 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -66,6 +66,18 @@ const routData = [
component: reviews.LoginPage,
requiresAuth: false,
},
+ {
+ id: "route-011",
+ path: "/letter-hunt",
+ component: reviews.LetterHunt,
+ requiresAuth: true,
+ },
+ {
+ id: "route-012",
+ path: "/towre-flow",
+ component: reviews.TowreFlowPage,
+ requiresAuth: true,
+ },
];
// add login route for test rig
const TOKEN = localStorage.getItem("apiToken");
diff --git a/src/services/content/contentService.js b/src/services/content/contentService.js
index 8a256e41..1eea2200 100644
--- a/src/services/content/contentService.js
+++ b/src/services/content/contentService.js
@@ -32,14 +32,10 @@ export const fetchAssessmentData = async (lang) => {
}
};
-export const fetchPaginatedContent = async (
- collectionId,
- page = 1,
- limit = 5
-) => {
+export const fetchPaginatedContent = async (collectionId, limit, page = 1) => {
try {
const response = await axios.get(
- `${API_BASE_URL_CONTENT_SERVICE}/${config.URLS.GET_PAGINATION}?page=${page}&limit=${limit}&collectionId=${collectionId}`,
+ `${API_BASE_URL_CONTENT_SERVICE}/${config.URLS.GET_PAGINATION}?page=${page}&limit=${limit}&collectionId=${collectionId}&multilingual=true`,
getHeaders()
);
return response.data;
diff --git a/src/services/learnerAi/learnerAiService.js b/src/services/learnerAi/learnerAiService.js
index 1e142f07..25938a60 100644
--- a/src/services/learnerAi/learnerAiService.js
+++ b/src/services/learnerAi/learnerAiService.js
@@ -15,15 +15,29 @@ const getHeaders = () => {
};
};
-export const getContent = async (criteria, lang, limit, options = {}) => {
+export const getContent = async (
+ criteria,
+ lang,
+ limit,
+ options,
+ level = {}
+) => {
try {
let url = `${API_LEARNER_AI_APP_HOST}/${config.URLS.GET_CONTENT}/${criteria}?language=${lang}&contentlimit=${limit}&gettargetlimit=${limit}`;
- if (options.mechanismId) url += `&mechanics_id=${options.mechanismId}`;
+ if (
+ options.mechanismId &&
+ ![2, 3].includes(level) &&
+ !options.mechanismId.startsWith("Fluency") &&
+ options.mechanismId !== "PhrasesInAction"
+ )
+ url += `&mechanics_id=${options.mechanismId}`;
if (options.competency) url += `&level_competency=${options.competency}`;
- if (options.tags && lang === "en") url += `&tags=${options.tags}`;
+ if (options.tags && (lang === "en" || lang === "kn" || lang === "te"))
+ url += `&tags=${options.tags}`;
if (options.storyMode) url += `&story_mode=${options.storyMode}`;
if (options.CEFR_level) url += `&CEFR_level=${options.CEFR_level}`;
+ if (options.multilingual) url += `&multilingual=${options.multilingual}`;
const response = await axios.get(url, getHeaders());
return response.data;
@@ -33,12 +47,18 @@ export const getContent = async (criteria, lang, limit, options = {}) => {
}
};
-export const getContentNew = async (criteria, lang, limit, options = {}) => {
+export const getContentNew = async (
+ criteria,
+ lang,
+ limit,
+ options = {},
+ level
+) => {
try {
let url = `${API_LEARNER_AI_APP_HOST}/${config.URLS.GET_CONTENT_NEW}`;
const data = {
language: lang,
- content_type: "Word",
+ content_type: criteria,
};
const response = await axios.post(url, data, getHeaders());
return response.data;
@@ -82,6 +102,7 @@ export const fetchGetSetResult = async (
collectionId: currentCollectionId,
totalSyllableCount: totalSyllableCount,
language: lang,
+ is_B_enable: true,
},
getHeaders()
);
diff --git a/src/services/orchestration/orchestrationService.js b/src/services/orchestration/orchestrationService.js
index f7ebd92a..1c7a09ca 100644
--- a/src/services/orchestration/orchestrationService.js
+++ b/src/services/orchestration/orchestrationService.js
@@ -6,6 +6,8 @@ import { getVirtualId } from "../userservice/userService";
const API_BASE_URL_ORCHESTRATION =
process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST;
+const API_LEARNER_AI_APP_HOST = process.env.REACT_APP_LEARNER_AI_APP_HOST;
+
const getHeaders = () => {
const token = localStorage.getItem("apiToken");
return {
@@ -67,10 +69,87 @@ export const addPointer = async (points, milestone) => {
}
};
+export const addCorrectPracticeWords = async () => {
+ const correctPracticeWords = getLocalData("correctPracticeWords");
+ const token = localStorage.getItem("apiToken");
+
+ if (!correctPracticeWords || correctPracticeWords.length === 0) {
+ console.warn("No correct practice words to send.");
+ return;
+ }
+
+ try {
+ const response = await axios.post(
+ `${API_LEARNER_AI_APP_HOST}/api/towre/addCorrectWord`,
+ { correctPracticeWords },
+ {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ "Content-Type": "application/json",
+ },
+ }
+ );
+
+ return response.data;
+ } catch (error) {
+ console.error("Error sending correctPracticeWords:", error);
+ throw error;
+ }
+};
+
+export const updateCorrectPracticeWords = async (updates) => {
+ const token = localStorage.getItem("apiToken");
+
+ if (!updates || updates.length === 0) {
+ console.warn("No correct practice words to send.");
+ return;
+ }
+
+ try {
+ const response = await axios.put(
+ `${API_LEARNER_AI_APP_HOST}/api/towre/updateCorrectWords`,
+ { updates },
+ {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ "Content-Type": "application/json",
+ },
+ }
+ );
+
+ return response.data;
+ } catch (error) {
+ console.error("Error sending correctPracticeWords:", error);
+ throw error;
+ }
+};
+
+export const getCorrectPracticeWords = async (understood) => {
+ const token = localStorage.getItem("apiToken");
+
+ try {
+ const response = await axios.get(
+ `${API_LEARNER_AI_APP_HOST}/api/towre/getCorrectWords?practiced=true&learned=true&understood=${understood}`,
+ {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ "Content-Type": "application/json",
+ },
+ }
+ );
+
+ return response.data;
+ } catch (error) {
+ console.error("Error fetching correctPracticeWords:", error);
+ throw error;
+ }
+};
+
export const createLearnerProgress = async (
subSessionId,
milestoneLevel,
- totalSyllableCount
+ totalSyllableCount,
+ ansSelectionStatus
) => {
const sessionId = getLocalData("sessionId");
const language = getLocalData("lang");
@@ -81,6 +160,7 @@ export const createLearnerProgress = async (
subSessionId: subSessionId,
milestoneLevel: milestoneLevel,
language: language,
+ ansSelectionStatus: ansSelectionStatus,
};
if (totalSyllableCount !== undefined) {
requestBody.totalSyllableCount = totalSyllableCount;
diff --git a/src/services/telementryService.js b/src/services/telementryService.js
index 23855746..29553a59 100644
--- a/src/services/telementryService.js
+++ b/src/services/telementryService.js
@@ -63,6 +63,12 @@ export const initialize = async ({ context, config, metadata }) => {
cdata: [
{ id: contentSessionId, type: "ContentSession" },
{ id: playSessionId, type: "PlaySession" },
+ {
+ id: /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
+ ? "Mobile"
+ : "Desktop",
+ type: "Device",
+ },
],
},
userOrgDetails: {},
@@ -294,6 +300,12 @@ export const getEventOptions = () => {
},
{ id: userDetails?.udise_code, type: "udise_code" },
{ id: getVirtualId() || null, type: "virtualId" },
+ {
+ id: /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
+ ? "Mobile"
+ : "Desktop",
+ type: "Device",
+ },
],
rollup: {},
},
diff --git a/src/utils/AudioCompare.js b/src/utils/AudioCompare.js
index 777adf07..35cc68fd 100644
--- a/src/utils/AudioCompare.js
+++ b/src/utils/AudioCompare.js
@@ -1,11 +1,23 @@
import React, { useState, useEffect, useRef } from "react";
import RecordRTC from "recordrtc";
import { Box, CircularProgress } from "@mui/material";
-import { ListenButton, RetryIcon, SpeakButton, StopButton } from "./constants";
+import {
+ ListenButton,
+ RetryIcon,
+ SpeakButton,
+ StopButton,
+ getLocalData,
+} from "./constants";
import RecordVoiceVisualizer from "./RecordVoiceVisualizer";
import playButton from "../../src/assets/listen.png";
import pauseButton from "../../src/assets/pause.png";
import PropTypes from "prop-types";
+import { pipeline, env } from "@xenova/transformers";
+import { loadTranscriber } from "./transcriber";
+import { doubleMetaphone } from "double-metaphone";
+import { transliterateKannadaToLatin, compareWords } from "../utils/textUtils";
+
+env.localModelPath = "https://huggingface.co/Xenova/whisper-tiny/resolve/main/";
const AudioRecorder = (props) => {
const [isRecording, setIsRecording] = useState(false);
@@ -14,6 +26,21 @@ const AudioRecorder = (props) => {
const recorderRef = useRef(null);
const mediaStreamRef = useRef(null);
const [showLoader, setShowLoader] = useState(false);
+ const [language, setLanguage] = useState(getLocalData("lang") || "en");
+
+ function sanitize(text) {
+ return text
+ .toLowerCase()
+ .replace(/[.,\/#!$%\^&\*;:{}=\-_`~()"\[\]'’]/g, "")
+ .replace(/\s{2,}/g, " ")
+ .trim();
+ }
+
+ function phoneticMatch(a, b) {
+ const [a1, a2] = doubleMetaphone(a);
+ const [b1, b2] = doubleMetaphone(b);
+ return a1 === b1 || a1 === b2 || a2 === b1 || a2 === b2;
+ }
//console.log("pageName", props.pageName);
@@ -61,16 +88,64 @@ const AudioRecorder = (props) => {
const stopRecording = () => {
setShowLoader(true);
const timeoutId = setTimeout(() => {
- setShowLoader(false);
- setStatus("inactive");
+ // setShowLoader(false);
+ // setStatus("inactive");
if (recorderRef.current) {
- recorderRef.current.stopRecording(() => {
+ recorderRef.current.stopRecording(async () => {
const blob = recorderRef.current.getBlob();
if (blob) {
setAudioBlob(blob);
saveBlob(blob);
+ console.log("isShowCase", props.isShowCase);
+
+ if (props.noOffline !== true && !props.isShowCase) {
+ try {
+ // setLoading(true);
+ const transcriber = await loadTranscriber();
+ console.log("Transcriber is:", transcriber);
+ const audioUrl = URL.createObjectURL(blob);
+ const output = await transcriber(audioUrl, {
+ chunk_length_s: 20,
+ stride_length_s: 5,
+ task: "transcribe",
+ language: "en",
+ });
+ const transcripts = sanitize(output.text);
+ const target = sanitize(props.originalText);
+
+ console.log("Transcription resultss 1:", transcripts);
+ console.log("Transcription resultss 2:", target);
+
+ const isCorrect =
+ transcripts.includes(target) ||
+ phoneticMatch(transcripts, target);
+
+ if (language === "kn") {
+ const knLatin = transliterateKannadaToLatin(target);
+ const comparison = compareWords(transcripts, knLatin);
+ props.setIsCorrect?.(comparison?.isFine);
+ } else {
+ props.setIsCorrect?.(isCorrect);
+ }
+ setShowLoader(false);
+ setStatus("inactive");
+ } catch (error) {
+ console.error("Transcription error:", error);
+ setShowLoader(false);
+ setStatus("inactive");
+ props.setIsCorrect?.(false);
+ }
+ }
+ if (props.noOffline === true || props.isShowCase) {
+ setShowLoader(false);
+ setStatus("inactive");
+ props.setIsCorrect?.(false);
+ }
} else {
console.error("Failed to retrieve audio blob.");
+ setShowLoader(false);
+ setStatus("inactive");
+ props.setIsCorrect?.(false);
}
if (mediaStreamRef.current) {
mediaStreamRef.current.getTracks().forEach((track) => track.stop());
diff --git a/src/utils/LanguageModal.js b/src/utils/LanguageModal.js
new file mode 100644
index 00000000..c453c5b9
--- /dev/null
+++ b/src/utils/LanguageModal.js
@@ -0,0 +1,188 @@
+import React, { useState } from "react";
+import MotherTongue from "./../assets/motherTongue.svg";
+import { getLocalData, setLocalData } from "./constants";
+
+const sampleTranslations = [
+ { lang: "Kannada", text: "ka", icon: "ಅ" },
+ { lang: "Tamil", text: "tn", icon: "அ" },
+ { lang: "Telugu", text: "te", icon: "అ" },
+ { lang: "Hindi", text: "hi", icon: "क" },
+];
+
+const LanguageModalNew = ({ show, word, onClose }) => {
+ const [selectedLang, setSelectedLang] = useState("ka");
+
+ if (!show) return null;
+
+ const handleConfirm = () => {
+ setLocalData("nativeLang", selectedLang);
+ setLocalData("nativeLangEnable", true);
+ console.log("Selected language:", selectedLang);
+ onClose();
+ };
+
+ return (
+
+
+
+
+
Choose your help language
+
+
+
+ {sampleTranslations.map((entry, index) => {
+ const isSelected = selectedLang === entry.text;
+ return (
+
setSelectedLang(entry.text)}
+ >
+
+ {entry.icon}
+
+
+ {entry.lang}
+
+
+ {isSelected && "✔"}
+
+
+ );
+ })}
+
+
+
+
+
+ );
+};
+
+const styles = {
+ backdrop: {
+ position: "fixed",
+ top: 80,
+ left: 0,
+ width: "100%",
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ zIndex: 1000,
+ },
+ modal: {
+ backgroundColor: "#fff",
+ padding: "30px",
+ borderRadius: "20px",
+ width: "90%",
+ maxWidth: "600px",
+ boxShadow: "0 8px 24px rgba(0,0,0,0.15)",
+ textAlign: "center",
+ },
+ header: {
+ display: "flex",
+ alignItems: "center",
+ gap: "10px",
+ marginBottom: "35px",
+ justifyContent: "center",
+ },
+ avatar: {
+ width: "48px",
+ height: "48px",
+ borderRadius: "50%",
+ },
+ title: {
+ fontSize: "36px",
+ margin: 0,
+ fontWeight: "600",
+ fontFamily: "Quicksand",
+ color: "#333F61",
+ },
+ langGrid: {
+ display: "grid",
+ gridTemplateColumns: "repeat(3, 1fr)",
+ gap: "15px",
+ marginBottom: "20px",
+ },
+ card: {
+ border: "2px solid #e0e0e0",
+ borderRadius: "12px",
+ padding: "10px",
+ cursor: "pointer",
+ transition: "all 0.2s",
+ fontWeight: "600",
+ fontFamily: "Quicksand",
+ },
+ cardIcon: {
+ fontSize: "36px",
+ marginBottom: "5px",
+ fontWeight: "600",
+ fontFamily: "Quicksand",
+ },
+ cardText: {
+ fontSize: "20px",
+ fontWeight: "600",
+ fontFamily: "Quicksand",
+ },
+ tickMark: {
+ position: "absolute",
+ top: "10px",
+ right: "10px",
+ backgroundColor: "#fff",
+ color: "#F37021",
+ fontSize: "14px",
+ fontWeight: "bold",
+ borderRadius: "50%",
+ width: "24px",
+ height: "24px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ noTickMark: {
+ position: "absolute",
+ top: "10px",
+ right: "10px",
+ backgroundColor: "#fff",
+ border: "1.5px solid #999999",
+ fontSize: "14px",
+ fontWeight: "bold",
+ borderRadius: "50%",
+ width: "24px",
+ height: "24px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ confirmBtn: {
+ background: "linear-gradient(to right, #00c6ff, #0072ff)",
+ color: "#fff",
+ padding: "12px 72px",
+ borderRadius: "10px",
+ border: "none",
+ fontSize: "16px",
+ fontWeight: "600",
+ fontFamily: "Quicksand",
+ cursor: "pointer",
+ marginTop: "10px",
+ },
+};
+
+export default LanguageModalNew;
diff --git a/src/utils/SpeedSelector.js b/src/utils/SpeedSelector.js
new file mode 100644
index 00000000..b938c9ca
--- /dev/null
+++ b/src/utils/SpeedSelector.js
@@ -0,0 +1,194 @@
+import React, { useState } from "react";
+import rabbitImg from "../assets/rabbit.svg";
+import cheetahImg from "../assets/cheetah.svg";
+import tortoiseImg from "../assets/tortoise.svg";
+import meterlineimg from "../assets/meterline.svg";
+import dotimg from "../assets/dott.svg";
+
+const SpeedSelector = ({ onSelect, selected: propSelected }) => {
+ const [localSelected, setLocalSelected] = useState("Slow");
+ const selected = propSelected !== undefined ? propSelected : localSelected;
+
+ const handleSelect = (value) => {
+ if (propSelected === undefined) setLocalSelected(value);
+ if (onSelect) onSelect(value);
+ };
+
+ const getRotationAndFill = () => {
+ switch (selected) {
+ case "Slow":
+ return { needleRotate: -45, fillRotate: -137 };
+ case "Medium":
+ return { needleRotate: 0, fillRotate: -90 };
+ case "Fast":
+ return { needleRotate: 45, fillRotate: 0 };
+ default:
+ return { needleRotate: -45, fillRotate: -137 };
+ }
+ };
+
+ const { needleRotate, fillRotate } = getRotationAndFill();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {[
+ { label: "Slow", img: tortoiseImg },
+ { label: "Medium", img: rabbitImg },
+ { label: "Fast", img: cheetahImg },
+ ].map((item) => (
+
handleSelect(item.label)}
+ style={{
+ cursor: "pointer",
+ width: "100%",
+ textAlign: "center",
+ borderRadius: "16px",
+ padding: "10px 0",
+ background:
+ selected === item.label
+ ? "linear-gradient(180deg, #fff3e0, #ffe0b2)"
+ : "transparent",
+ transition: "0.3s",
+ }}
+ >
+
+
+ {item.label}
+
+
+ ))}
+
+
+ );
+};
+
+export default SpeedSelector;
diff --git a/src/utils/VoiceAnalyser.js b/src/utils/VoiceAnalyser.js
index 5f417d5c..fc0b3b36 100644
--- a/src/utils/VoiceAnalyser.js
+++ b/src/utils/VoiceAnalyser.js
@@ -104,7 +104,7 @@ function VoiceAnalyser(props) {
return;
}
const { audioLink } = props;
- //console.log("llink", audioLink);
+ console.log("llink", audioLink);
try {
let audio = new Audio(
@@ -372,7 +372,7 @@ function VoiceAnalyser(props) {
let requestBody = {
original_text: originalText,
audio: base64Data,
- user_id: virtualId,
+ //user_id: virtualId,
session_id: sessionId,
language: lang,
date: new Date(),
@@ -614,7 +614,7 @@ function VoiceAnalyser(props) {
"ET"
);
} else {
- setApiResponse("error");
+ setApiResponse("telemetry error");
}
console.error("err", error);
@@ -654,6 +654,8 @@ function VoiceAnalyser(props) {
// Calculate lives lost based on percentage.
let livesLost = Math.floor(percentage / (threshold / totalLives));
+ console.log("percent", percentage, livesLost);
+
// Check fluency criteria and adjust lives lost accordingly.
let meetsFluencyCriteria;
switch (contentType.toLowerCase()) {
@@ -781,6 +783,8 @@ function VoiceAnalyser(props) {
buttonAnimation={props.buttonAnimation}
handleStartRecording={props.handleStartRecording}
handleStopRecording={props.handleStopRecording}
+ setIsCorrect={props.setIsCorrect}
+ noOffline={props.noOffline}
/>
{/*
*/}
diff --git a/src/utils/apiUtil.js b/src/utils/apiUtil.js
index 7fd1801d..eafb48ce 100644
--- a/src/utils/apiUtil.js
+++ b/src/utils/apiUtil.js
@@ -214,3 +214,16 @@ export const callTelemetryApi = async (
"ET"
);
};
+
+export const callTelemetryDiscovery = async (originalText) => {
+ response(
+ {
+ // Required
+ target: "", // Required. Target of the response
+ //"qid": "", // Required. Unique assessment/question id
+ type: "SPEAK", // Required. Type of response. CHOOSE, DRAG, SELECT, MATCH, INPUT, SPEAK, WRITE
+ values: [{ original_text: originalText }],
+ },
+ "ET"
+ );
+};
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 8dee72c2..eee189d6 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -648,6 +648,2477 @@ export const SubmitButton = (props) => (
);
+export const LevelBeginner = (props) => (
+
+);
+
export const LevelOne = (props) => (
+
setShowModal(false)} />
);
};
diff --git a/src/views/Practice/Practice.jsx b/src/views/Practice/Practice.jsx
index 21b01afc..5dd7dc8a 100644
--- a/src/views/Practice/Practice.jsx
+++ b/src/views/Practice/Practice.jsx
@@ -7,8 +7,10 @@ import BingoCard from "../../components/Practice/BingoCard";
import SyllablePuzzle from "../../components/Practice/SyllablePuzzle";
import ReadAloud from "../../components/Practice/ReadAloud";
import R3 from "../../components/Practice/R3";
+import R0 from "../../RFlow/R0";
import R1 from "../../RFlow/R1";
import R2 from "../../RFlow/R2";
+import Barakhadi from "../../RFlow/Barakhadi";
import R3Flow from "../../RFlow/R3";
import R4 from "../../RFlow/R4";
import TowreFlow from "../../components/Practice/TowreFlow";
@@ -41,6 +43,15 @@ import { MessageDialog } from "../../components/Assesment/Assesment";
import { Log } from "../../services/telementryService";
import Mechanics6 from "../../components/Practice/Mechanics6";
import Mechanics7 from "../../components/Practice/Mechanics7";
+import FluencyP1 from "../../components/Practice/FluencyP1";
+import FluencyP2 from "../../components/Practice/FluencyP2";
+import FluencyP3 from "../../components/Practice/FluencyP3";
+import FluencyP4 from "../../components/Practice/FluencyP4";
+import FluencyP5 from "../../components/Practice/FluencyP5";
+import ParagraphFlow from "../../components/Practice/ParagraphFlow";
+import AserFlow from "../../components/Practice/AserFlow";
+import ReadMatch from "../../components/Practice/ReadMatch";
+import WordWall from "../../components/Practice/WordWall";
import * as Assets from "../../utils/imageAudioLinks";
import * as s3Assets from "../../utils/s3Links";
import { getAssetUrl } from "../../utils/s3Links";
@@ -53,6 +64,7 @@ import { jwtDecode } from "jwt-decode";
import {
addLesson,
addPointer,
+ addCorrectPracticeWords,
fetchUserPoints,
createLearnerProgress,
getLessonProgressByID,
@@ -105,6 +117,18 @@ const Practice = () => {
const [rStep, setRStep] = useState(() => {
return Number(getLocalData("rStep")) || 2;
});
+ const [rStepZero, setRStepZero] = useState(() => {
+ return Number(getLocalData("rStepZero"));
+ });
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setRStepZero(Number(getLocalData("rStepZero")));
+ }, 1000);
+ return () => clearInterval(interval);
+ }, []);
+
+ //console.log("practice rStepZero", rStepZero);
const levels = {
en: {
@@ -4217,11 +4241,23 @@ const Practice = () => {
}
const currentLevel = practiceSteps?.[currentPracticeStep]?.title || "P1";
+ const milestoneType = ["S1", "S2"].includes(currentLevel)
+ ? "showcase"
+ : "practice";
//console.log("prog", progressDatas);
+ if (level === "B" && rStepZero !== 1) {
+ setLocalData("mFail", true);
+ setLocalData("rFlow", true);
+ setLocalData("rStepZero", 0);
+ }
+
const rFlow = String(getLocalData("rFlow"));
const tFlow = String(getLocalData("tFlow"));
+ const readMatch = String(getLocalData("readMatch"));
+ //const setWordWall = setLocalData("wordWall", true);
+ const wordWallFlow = String(getLocalData("wordWall"));
// useEffect(() => {
// if (lang !== "en") {
@@ -4282,6 +4318,7 @@ const Practice = () => {
const meetsFluencyCriteria = livesData?.meetsFluencyCriteria;
setGameOverData({ gameOver: true, userWon, ...data, meetsFluencyCriteria });
};
+ //console.log("data", currentImage, parentWords);
useEffect(() => {
if (startShowCase) {
@@ -4455,7 +4492,8 @@ const Practice = () => {
const getContentFn = currentGetContent?.mechanism
? getContent
- : process.env.REACT_APP_USE_RECOMMENDATION_API === "true"
+ : process.env.REACT_APP_USE_RECOMMENDATION_API === "true" &&
+ lang === "en"
? getContentNew
: getContent;
@@ -4487,6 +4525,10 @@ const Practice = () => {
return;
}
+ if ([1, 2, 4, 5, 6, 7, 8, 9].includes(level)) {
+ const addCorrectWords = await addCorrectPracticeWords();
+ }
+
const result = await addPointer(points, milestone);
const awardedPoints = result?.result?.points;
@@ -4552,12 +4594,17 @@ const Practice = () => {
if (lang === "en" && (level === 3 || level === 6 || level === 9)) {
gameOver({ link: "/assesment-end" }, true);
setLocalData("tFlow", true);
+ //setLocalData("wordWall", true);
+ }
+ if (lang === "en") {
+ gameOver({ link: "/assesment-end" }, true);
+ setLocalData("wordWall", true);
}
try {
await addLesson({
sessionId,
- milestone: `practice`,
+ milestone: milestoneType,
lesson: "0",
progress: 0,
language: lang,
@@ -4572,6 +4619,7 @@ const Practice = () => {
setLocalData("mFail", true);
setTimeout(() => {
setLocalData("rFlow", true);
+ setLocalData("rStepZero", 0);
}, 7000);
}
}
@@ -4584,7 +4632,7 @@ const Practice = () => {
}
await addLesson({
sessionId: sessionId,
- milestone: `practice`,
+ milestone: milestoneType,
lesson: newPracticeStep,
progress: currentPracticeProgress,
language: lang,
@@ -4596,7 +4644,7 @@ const Practice = () => {
return;
}
- if (![10, 11, 12, 13, 14, 15].includes(level)) {
+ if (!["B", 10, 11, 12, 13, 14, 15].includes(level)) {
const resGetContent = await getContentFn(
currentGetContent.criteria,
lang,
@@ -4607,7 +4655,9 @@ const Practice = () => {
tags: currentGetContent?.tags,
storyMode: currentGetContent?.storyMode,
CEFR_level: currentGetContent?.CEFR_level,
- }
+ multilingual: currentGetContent?.multilingual,
+ },
+ level
);
setTotalSyllableCount(resGetContent?.totalSyllableCount);
@@ -4795,17 +4845,21 @@ const Practice = () => {
// TODO: validate the getMilestoneDetails API return
setLocalData("getMilestone", JSON.stringify({ ...getMilestoneDetails }));
- setVocabCount(getMilestoneDetails?.data?.extra?.vocabulary_count || 0);
+ setVocabCount(
+ getMilestoneDetails?.data?.extra?.vocabulary_count +
+ getMilestoneDetails?.data?.extra?.learned_voc_count || 0
+ );
setWordCount(
getMilestoneDetails?.data?.extra?.latest_towre_data?.wordsPerMinute || 0
);
- let level =
- Number(getMilestoneDetails?.data?.milestone_level?.replace("m", "")) ||
- 1;
-
- //console.log("curGetCont3", level, getMilestoneDetails);
-
- setLevel(level);
+ const levels = getMilestoneDetails?.data?.milestone_level;
+ let newLevel = levels?.startsWith("m")
+ ? Number(levels.replace("m", ""))
+ : levels;
+ setLevel(
+ levels?.startsWith("m") ? Number(levels.replace("m", "")) : levels
+ );
+ console.log("newLevel", levels);
const resLessons = await getLessonProgressByID(lang);
@@ -4842,23 +4896,26 @@ const Practice = () => {
const getCurrentContent = (stepKey) => {
const lang = getLocalData("lang") || "en";
- //console.log("curGetCont2", lang, level);
- return levelGetContent[lang]?.[level]?.find(
+ console.log("curGetCont2", lang, levels);
+ return levelGetContent[lang]?.[newLevel]?.find(
(elem) => elem.title === practiceSteps?.[stepKey]?.name
);
};
const currentGetContent = getCurrentContent(userState);
+ console.log("curContent", currentGetContent, userState);
+
const getContentFn = currentGetContent?.mechanism
? getContent
- : process.env.REACT_APP_USE_RECOMMENDATION_API === "true"
+ : process.env.REACT_APP_USE_RECOMMENDATION_API === "true" &&
+ lang === "en"
? getContentNew
: getContent;
//console.log("curGetCont", userState, currentGetContent);
- if (![10, 11, 12, 13, 14, 15].includes(level)) {
+ if (!["B", 10, 11, 12, 13, 14, 15].includes(level)) {
const resWord = await getContentFn(
currentGetContent.criteria,
lang,
@@ -4869,7 +4926,9 @@ const Practice = () => {
tags: currentGetContent?.tags,
storyMode: currentGetContent?.storyMode,
CEFR_level: currentGetContent?.CEFR_level,
- }
+ multilingual: currentGetContent?.multilingual,
+ },
+ level
);
// TODO: handle error if resWord is empty
@@ -4894,7 +4953,7 @@ const Practice = () => {
setQuestions(quesArr);
}
- if ([10, 11, 12, 13, 14, 15].includes(level)) {
+ if (["B", 10, 11, 12, 13, 14, 15].includes(level)) {
const dummyQuestions = Array.from({ length: 5 }, (_, i) => ({
id: `dummy-${i + 1}`,
}));
@@ -4935,6 +4994,7 @@ const Practice = () => {
useEffect(() => {
fetchDetails();
+ setLocalData("correctPracticeWords", null);
}, []);
useEffect(() => {
@@ -4968,7 +5028,7 @@ const Practice = () => {
};
await addLesson({
sessionId: sessionId,
- milestone: "practice",
+ milestone: milestoneType,
lesson: newCurrentPracticeStep,
progress: (newCurrentPracticeStep / practiceSteps.length) * 100,
language: lang,
@@ -4981,13 +5041,14 @@ const Practice = () => {
const getContentFn = currentGetContent?.mechanism
? getContent
- : process.env.REACT_APP_USE_RECOMMENDATION_API === "true"
+ : process.env.REACT_APP_USE_RECOMMENDATION_API === "true" &&
+ lang === "en"
? getContentNew
: getContent;
let quesArr = [];
- if (![10, 11, 12, 13, 14, 15].includes(level)) {
+ if (!["B", 10, 11, 12, 13, 14, 15].includes(level)) {
const resWord = await getContentFn(
currentGetContent.criteria,
lang,
@@ -4998,7 +5059,9 @@ const Practice = () => {
tags: currentGetContent?.tags,
storyMode: currentGetContent?.storyMode,
CEFR_level: currentGetContent?.CEFR_level,
- }
+ multilingual: currentGetContent?.multilingual,
+ },
+ level
);
setTotalSyllableCount(resWord?.totalSyllableCount);
setLivesData({
@@ -5017,7 +5080,7 @@ const Practice = () => {
setQuestions(quesArr);
}
- if ([10, 11, 12, 13, 14, 15].includes(level)) {
+ if (["B", 10, 11, 12, 13, 14, 15].includes(level)) {
const dummyQuestions = Array.from({ length: 5 }, (_, i) => ({
id: `dummy-${i + 1}`,
}));
@@ -5142,7 +5205,7 @@ const Practice = () => {
component="h4"
ml={1}
sx={{
- color: "#333F61",
+ color: color,
fontSize: "clamp(1.6rem, 2.5vw, 3.8rem)",
fontWeight: 700,
fontFamily: "Quicksand",
@@ -5182,12 +5245,20 @@ const Practice = () => {
}
}, [questions[currentQuestion]]);
- //console.log("mec", mechanism, level, rFlow, currentLevel);
+ //console.log("mecc", wordWallFlow);
const renderMechanics = () => {
if (
- (!mechanism && rFlow !== "true" && tFlow !== "true") ||
- (mechanism?.id === "mechanic_15" && rFlow !== "true" && tFlow !== "true")
+ (!mechanism &&
+ rFlow !== "true" &&
+ tFlow !== "true" &&
+ readMatch !== "true" &&
+ wordWallFlow !== "true") ||
+ (mechanism?.id === "mechanic_15" &&
+ rFlow !== "true" &&
+ tFlow !== "true" &&
+ readMatch !== "true" &&
+ wordWallFlow !== "true")
) {
const mechanics_data = questions[currentQuestion]?.mechanics_data;
@@ -5195,12 +5266,7 @@ const Practice = () => {
{
? `Guess the below image`
: `Speak the below ${questions[currentQuestion]?.contentType}`),
words:
- process.env.REACT_APP_USE_RECOMMENDATION_API === "true"
- ? mechanism?.id === "mechanic_15"
- ? questions[currentQuestion]?.mechanics_data?.[0]?.text
- : questions[currentQuestion]?.contentSourceData?.[0]?.text
- : level === 1 || level === 2 || level === 3
- ? levelOneWord
- : mechanism?.id === "mechanic_15"
+ mechanism?.id === "mechanic_15"
? questions[currentQuestion]?.mechanics_data?.[0]?.text
: questions[currentQuestion]?.contentSourceData?.[0]?.text,
hints: questions[currentQuestion]?.mechanics_data?.[0]?.hints?.text,
+ multilingual: questions[currentQuestion]?.multilingual,
contentType: currentContentType,
contentId: questions[currentQuestion]?.contentId,
setVoiceText,
@@ -5313,7 +5374,156 @@ const Practice = () => {
}}
/>
);
- } else if (rFlow === "true" && level === 1) {
+ } else if (readMatch === "true") {
+ return (
+
+ );
+ } else if (wordWallFlow === "true") {
+ return (
+
+ );
+ } else if (
+ rFlow === "true" &&
+ (level === 1 || level === "B") &&
+ rStepZero === 0
+ ) {
+ return (
+
+ );
+ } else if (
+ rFlow === "true" &&
+ (level === 1 || level === "B") &&
+ rStepZero === 1 &&
+ lang === "en"
+ ) {
return (
{
}}
/>
);
+ } else if (
+ rFlow === "true" &&
+ (level === 1 || level === "B") &&
+ rStepZero === 1 &&
+ lang !== "en"
+ ) {
+ return (
+
+ );
} else if (rFlow === "true" && level === 2 && [2, 3, 4].includes(rStep)) {
return (
{
? `Guess the below image`
: `Speak the below word`,
//
- currentImg: currentImage,
- parentWords: parentWords,
+ currentImg: questions[currentQuestion]?.contentSourceData?.[0],
+ parentWords: questions[currentQuestion]?.mechanics_data?.[0],
+ multilingual: questions[currentQuestion]?.multilingual,
contentType: currentContentType,
contentId: questions[currentQuestion]?.contentId,
setVoiceText,
@@ -5583,7 +5845,292 @@ const Practice = () => {
: `Speak the below word`,
//
currentImg: currentImage,
- parentWords: parentWords,
+ parentWords: questions[currentQuestion]?.mechanics_data?.[0],
+ contentType: currentContentType,
+ contentId: questions[currentQuestion]?.contentId,
+ setVoiceText,
+ setRecordedAudio,
+ setVoiceAnimate,
+ storyLine,
+ handleNext,
+ type: "word",
+ // image: elephant,
+ enableNext,
+ showTimer: false,
+ points,
+ steps: questions?.length,
+ currentStep: currentQuestion + 1,
+ progressData,
+ showProgress: true,
+ background:
+ isShowCase &&
+ "linear-gradient(281.02deg, #AE92FF 31.45%, #555ADA 100%)",
+ playTeacherAudio,
+ callUpdateLearner: isShowCase,
+ disableScreen,
+ isShowCase,
+ handleBack: !isShowCase && handleBack,
+ setEnableNext,
+ loading,
+ setOpenMessageDialog,
+ vocabCount,
+ wordCount,
+ }}
+ />
+ );
+ } else if (mechanism.name === "fluencyP1") {
+ return (
+
+ );
+ } else if (mechanism.name === "fluencyP2") {
+ return (
+
+ );
+ } else if (mechanism.name === "fluencyP3") {
+ return (
+
+ );
+ } else if (mechanism.name === "fluencyP4") {
+ return (
+
+ );
+ } else if (mechanism.name === "fluencyP5") {
+ return (
+
+ );
+ } else if (mechanism.name === "fluencyP6") {
+ return (
+ {
? `Guess the below image`
: `Speak the below word`,
//
- currentImg: currentImage,
- parentWords: parentWords,
+ currentImg: questions[currentQuestion]?.contentSourceData?.[0],
+ parentWords: questions[currentQuestion]?.mechanics_data?.[0],
contentType: currentContentType,
contentId: questions[currentQuestion]?.contentId,
+ multilingual: questions[currentQuestion]?.multilingual,
setVoiceText,
setRecordedAudio,
setVoiceAnimate,
diff --git a/src/views/TowreFlow/TowreFlow.jsx b/src/views/TowreFlow/TowreFlow.jsx
new file mode 100644
index 00000000..f01e1ba0
--- /dev/null
+++ b/src/views/TowreFlow/TowreFlow.jsx
@@ -0,0 +1,8 @@
+import React from "react";
+import TowreFlow from "../../components/Practice/TowreFlow";
+
+const TowreFlowPage = () => {
+ return ;
+};
+
+export default TowreFlowPage;
diff --git a/src/views/TowreFlow/index.js b/src/views/TowreFlow/index.js
new file mode 100644
index 00000000..fdbc094a
--- /dev/null
+++ b/src/views/TowreFlow/index.js
@@ -0,0 +1 @@
+export { default as TowreFlowPage } from "./TowreFlow";
diff --git a/src/views/index.js b/src/views/index.js
index cd6d8bac..095526bd 100644
--- a/src/views/index.js
+++ b/src/views/index.js
@@ -9,3 +9,5 @@ export { AssesmentEnd } from "./AssesmentEnd";
export { DiscoverStart } from "./DiscoverStart";
export { PracticeRedirectPage } from "./PracticeRedirectPage";
export { LoginPage } from "./LoginPage";
+export { LetterHunt } from "./LetterHunt";
+export { TowreFlowPage } from "./TowreFlow";
setOpen(true)}
+ />
+
+ {/* Modal */}
+ {open && (
+ 
setShowFullChart(false)}
+ />
+
+ 
+
+ 
+ 
+ 
+ ) : (
+ <>
+ 
playWordAudio(currentWordData)}
+ />
+
+
+ )}
+ 
+ 
+
+ {buttonTexts.viewChart}
+
+