+
+
+ );
+ }
+}
diff --git a/src/utils/Loader.css b/src/utils/Loader.css
new file mode 100644
index 00000000..55b8aa1e
--- /dev/null
+++ b/src/utils/Loader.css
@@ -0,0 +1,44 @@
+.wrapper {
+ display: flex;
+ column-gap: 10px;
+ position: absolute;
+ bottom: 36%;
+ left: 45%;
+}
+@media only screen and (max-width: 600px) {
+ .wrapper {
+ left: 35%;
+ }
+}
+.wrapper .dot {
+ height: 20px;
+ width: 20px;
+ border-radius: 50%;
+ background: #008ae6;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+ animation: animate 1s ease-in-out infinite alternate;
+}
+.dot:nth-child(1) {
+ animation-delay: -0.25s;
+}
+.dot:nth-child(2) {
+ background: #e60000;
+ animation-delay: -0.5s;
+}
+.dot:nth-child(3) {
+ background: #ffcc00;
+ animation-delay: -0.75s;
+}
+.dot:nth-child(4) {
+ background: #008800;
+ animation-delay: -1s;
+}
+
+@keyframes animate {
+ 0% {
+ transform: translateY(-10px);
+ }
+ 100% {
+ transform: translateY(5px);
+ }
+}
diff --git a/src/utils/Loader.js b/src/utils/Loader.js
new file mode 100644
index 00000000..9d9f290a
--- /dev/null
+++ b/src/utils/Loader.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import './Loader.css';
+
+function Loader() {
+ return (
+
+ {(() => {
+ if (status === "recording" && recordingInitialized) {
+ return (
+
+
+
+
+ this.handleStop()}
+ >
+
+
+
+
+ );
+ } else {
+ return (
+
+ {(!this.props.dontShowListen || this.props.recordedAudio) && (
+ <>
+ {!this.props.pauseAudio ? (
+ {
+ this.props.playAudio(false);
+ }}
+ >
+
+
+ )}
+
+ )}
+
+
+ );
+ }
+ })()}
+ {
+ this.props.playAudio(true);
+ }}
+ >
+
+
+
+ ) : (
+ <>
+
+ this.handleMic()}
+ >
+ {!this.props.recordedAudio ? (
+
+ {/* 
+
+
+ SPEAK
+
*/}
+
+
+ + +
+ + + +
+
+ );
+}
+
+export default Loader;
diff --git a/src/utils/RecordVoiceVisualizer.jsx b/src/utils/RecordVoiceVisualizer.jsx
new file mode 100644
index 00000000..cb9f71f6
--- /dev/null
+++ b/src/utils/RecordVoiceVisualizer.jsx
@@ -0,0 +1,93 @@
+import { useEffect } from 'react';
+
+const color1 = `linear-gradient(90deg, #73dd24 -1265.13%, #00bbe4 5589.67%, #46d77d 12029.02%)`;
+export default function RecordVoiceVisualizer() {
+ const bar1 = (
+
+ );
+ const bar2 = (
+
+ );
+ const bar3 = (
+
+ );
+ const bar4 = (
+
+ );
+ const bar5 = (
+
+ );
+
+ const renderType = {
+ bar1: { bar: 1, times: 7 },
+ bar2: { bar: 2, times: 10 },
+ bar3: { bar: 3, times: 15 },
+ bar4: { bar: 4, times: 10 },
+ bar5: { bar: 5, times: 7 },
+ };
+
+ const renderBar = (key, value) => {
+ const renderArr = [];
+ for (let i = 0; i <= Number(value.times); i++) {
+ renderArr.push(
+ ,
+ );
+ }
+ return renderArr;
+ };
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/utils/VoiceAnalyser.js b/src/utils/VoiceAnalyser.js
new file mode 100644
index 00000000..dba5bb67
--- /dev/null
+++ b/src/utils/VoiceAnalyser.js
@@ -0,0 +1,475 @@
+import { useEffect, useState } from "react";
+import { Box, CircularProgress } from "../../node_modules/@mui/material/index";
+import axios from "../../node_modules/axios/index";
+import calcCER from "../../node_modules/character-error-rate/index";
+import s1 from "../assets/audio/S1.m4a";
+import s2 from "../assets/audio/S2.m4a";
+import s3 from "../assets/audio/S3.m4a";
+import s4 from "../assets/audio/S4.m4a";
+import s5 from "../assets/audio/S5.m4a";
+import s6 from "../assets/audio/S6.m4a";
+import v1 from "../assets/audio/V1.m4a";
+import v10 from "../assets/audio/V10.mp3";
+import v2 from "../assets/audio/V2.m4a";
+import v3 from "../assets/audio/V3.m4a";
+import v4 from "../assets/audio/V4.m4a";
+import v5 from "../assets/audio/V5.m4a";
+import v6 from "../assets/audio/V6.m4a";
+import v7 from "../assets/audio/V7.m4a";
+import v8 from "../assets/audio/V8.m4a";
+import { response } from "../services/telementryService";
+import AudioCompare from "./AudioCompare";
+import {
+ BASE_API,
+ SpeakButton,
+ compareArrays,
+ getLocalData,
+ replaceAll,
+} from "./constants";
+// import S3Client from '../config/awsS3';
+/* eslint-disable */
+
+const AudioPath = {
+ 1: {
+ 0: v1,
+ 1: v2,
+ 2: v3,
+ 3: v4,
+ 4: v5,
+ 5: v6,
+ 6: v7,
+ 7: v8,
+ 10: v10,
+ },
+ 2: {
+ 0: s1,
+ 1: s2,
+ 2: s3,
+ 3: s4,
+ 4: s5,
+ 5: s6,
+ },
+};
+const currentIndex = localStorage.getItem("index") || 1;
+console.log("get current index", currentIndex);
+function VoiceAnalyser(props) {
+ const [loadCnt, setLoadCnt] = useState(0);
+ const [loader, setLoader] = useState(false);
+ const [pauseAudio, setPauseAudio] = useState(false);
+ const [recordedAudio, setRecordedAudio] = useState("");
+ const [recordedAudioBase64, setRecordedAudioBase64] = useState("");
+ const [audioPermission, setAudioPermission] = useState(null);
+ const [apiResponse, setApiResponse] = useState("");
+ const [currentIndex, setCurrentIndex] = useState();
+ const [temp_audio, set_temp_audio] = useState(null);
+ const { callUpdateLearner } = props;
+
+ const [isAudioPreprocessing, setIsAudioPreprocessing] = useState(
+ process.env.REACT_APP_IS_AUDIOPREPROCESSING === "true"
+ );
+
+ const initiateValues = async () => {
+ const currIndex = (await localStorage.getItem("index")) || 1;
+ setCurrentIndex(currIndex);
+ };
+
+ useEffect(() => {
+ setRecordedAudio("");
+ }, [props.contentId]);
+
+ const playAudio = (val) => {
+ try {
+ var audio = new Audio(
+ recordedAudio
+ ? recordedAudio
+ : props.contentId
+ ? `${process.env.REACT_APP_AWS_S3_BUCKET_CONTENT_URL}/Audio/${props.contentId}.wav`
+ : AudioPath[1][10]
+ );
+ set_temp_audio(audio);
+ setPauseAudio(val);
+ } catch (err) {
+ console.log(err);
+ }
+ };
+
+ useEffect(() => {
+ console.log("check temp audio", temp_audio && temp_audio.play());
+ if (temp_audio !== null) {
+ if (!pauseAudio) {
+ temp_audio.pause();
+ props.setVoiceAnimate(false);
+ } else {
+ temp_audio.play();
+ props.setVoiceAnimate(true);
+ }
+ temp_audio.onended = function () {
+ setPauseAudio(false);
+ props.setVoiceAnimate(false);
+ };
+ //temp_audio.addEventListener("ended", () => alert("end"));
+ }
+ return () => {
+ if (temp_audio !== null) {
+ temp_audio.pause();
+ }
+ };
+ }, [temp_audio]);
+
+ useEffect(() => {
+ initiateValues();
+ }, []);
+
+ useEffect(() => {
+ if (loadCnt === 0) {
+ getpermision();
+ setLoadCnt((loadCnt) => Number(loadCnt + 1));
+ }
+ }, [loadCnt]);
+
+ function hasVoice(base64String) {
+ // Convert base64 string to ArrayBuffer
+ const binaryString = atob(base64String);
+ const length = binaryString.length;
+ const bytes = new Uint8Array(length);
+ for (let i = 0; i < length; i++) {
+ bytes[i] = binaryString.charCodeAt(i);
+ }
+
+ // Decode ArrayBuffer to audio buffer
+ const audioContext = new (window.AudioContext ||
+ window.webkitAudioContext)();
+ return new Promise((resolve) => {
+ audioContext.decodeAudioData(bytes.buffer, (buffer) => {
+ // Analyze the audio buffer to check for voice
+ const analyser = audioContext.createAnalyser();
+ analyser.fftSize = 2048;
+ const dataArray = new Uint8Array(analyser.frequencyBinCount);
+
+ const source = audioContext.createBufferSource();
+ source.buffer = buffer;
+ source.connect(analyser);
+ analyser.connect(audioContext.destination);
+
+ source.start();
+
+ // Wait for a moment and check if there is any voice
+ setTimeout(() => {
+ analyser.getByteFrequencyData(dataArray);
+ const hasVoice = dataArray.some((value) => value > 0);
+ resolve(hasVoice);
+ }, buffer.duration * 1000);
+ });
+ });
+ }
+
+ useEffect(() => {
+ if (recordedAudio !== "") {
+ setLoader(true);
+ let uri = recordedAudio;
+ var request = new XMLHttpRequest();
+ request.open("GET", uri, true);
+ request.responseType = "blob";
+ request.onload = function () {
+ var reader = new FileReader();
+ reader.readAsDataURL(request.response);
+ reader.onload = function (e) {
+ console.log("DataURL:", e.target.result);
+ var base64Data = e.target.result.split(",")[1];
+ // hasVoice(base64Data).then((res) => console.log("testAudio", res));
+ setRecordedAudioBase64(base64Data);
+ };
+ };
+ request.send();
+ } else {
+ setLoader(false);
+ setRecordedAudioBase64("");
+ setApiResponse("");
+ }
+ }, [recordedAudio]);
+
+ useEffect(() => {
+ if (recordedAudioBase64 !== "") {
+ const lang = getLocalData("lang") || "ta";
+ fetchASROutput(lang, recordedAudioBase64);
+ }
+ }, [recordedAudioBase64]);
+ useEffect(() => {
+ // props.updateStory();
+ props.setVoiceText(apiResponse);
+ props.setRecordedAudio(recordedAudio);
+ }, [apiResponse]);
+
+ const fetchASROutput = async (sourceLanguage, base64Data) => {
+ // let samplingrate = 30000;
+ // var myHeaders = new Headers();
+ // myHeaders.append('Content-Type', 'application/json');
+ // var payload = JSON.stringify({
+ // config: {
+ // language: {
+ // sourceLanguage: sourceLanguage,
+ // },
+ // transcriptionFormat: {
+ // value: 'transcript',
+ // },
+ // audioFormat: 'wav',
+ // samplingRate: samplingrate,
+ // postProcessors: null,
+ // },
+ // audio: [
+ // {
+ // audioContent: base64Data,
+ // },
+ // ],
+ // });
+ // var requestOptions = {
+ // method: 'POST',
+ // headers: myHeaders,
+ // body: payload,
+ // redirect: 'follow',
+ // };
+ // const apiURL = `https://asr-api.apiResponse.org/asr/v1/recognize/en`;
+ // fetch(apiURL, requestOptions)
+ // .then((response) => response.text())
+ // .then((result) => {
+ // var apiResponse = JSON.parse(result);
+ // setApiResponse(apiResponse['output'][0]['source'] != '' ? apiResponse['output'][0]['source'] : '-');
+ // setLoader(false);
+ // });
+
+ try {
+ const lang = getLocalData("lang");
+ const virtualId = getLocalData("virtualId");
+ const sessionId = getLocalData("sessionId");
+ const sub_session_id = getLocalData("sub_session_id");
+ const { originalText, contentType, contentId, currentLine } = props;
+ const responseStartTime = new Date().getTime();
+ let responseText = "";
+ let data = {};
+
+ if (callUpdateLearner) {
+ const { data: updateLearnerData } = await axios.post(
+ `${BASE_API}lais/scores/updateLearnerProfile/${lang}`,
+ {
+ original_text: originalText,
+ audio: base64Data,
+ user_id: virtualId,
+ session_id: sessionId,
+ language: lang,
+ date: new Date(),
+ sub_session_id,
+ contentId,
+ contentType,
+ }
+ );
+ data = updateLearnerData;
+ responseText = data.responseText;
+ }
+
+ const responseEndTime = new Date().getTime();
+ const responseDuration = Math.round(
+ (responseEndTime - responseStartTime) / 1000
+ );
+
+ let texttemp = responseText.toLowerCase();
+ texttemp = replaceAll(texttemp, ".", "");
+ texttemp = replaceAll(texttemp, "'", "");
+ texttemp = replaceAll(texttemp, ",", "");
+ texttemp = replaceAll(texttemp, "!", "");
+ texttemp = replaceAll(texttemp, "|", "");
+ texttemp = replaceAll(texttemp, "?", "");
+ const studentTextArray = texttemp.split(" ");
+
+ let tempteacherText = originalText.toLowerCase();
+ tempteacherText = tempteacherText.replace(/\u00A0/g, " ");
+ tempteacherText = tempteacherText.trim();
+ tempteacherText = replaceAll(tempteacherText, ".", "");
+ tempteacherText = replaceAll(tempteacherText, "'", "");
+ tempteacherText = replaceAll(tempteacherText, ",", "");
+ tempteacherText = replaceAll(tempteacherText, "!", "");
+ tempteacherText = replaceAll(tempteacherText, "|", "");
+ tempteacherText = replaceAll(tempteacherText, "?", "");
+ const teacherTextArray = tempteacherText.split(" ");
+
+ let student_correct_words_result = [];
+ let student_incorrect_words_result = [];
+ let originalwords = teacherTextArray.length;
+ let studentswords = studentTextArray.length;
+ let wrong_words = 0;
+ let correct_words = 0;
+ let result_per_words = 0;
+ let result_per_words1 = 0;
+ let occuracy_percentage = 0;
+
+ let word_result_array = compareArrays(teacherTextArray, studentTextArray);
+
+ for (let i = 0; i < studentTextArray.length; i++) {
+ if (teacherTextArray.includes(studentTextArray[i])) {
+ correct_words++;
+ student_correct_words_result.push(studentTextArray[i]);
+ } else {
+ wrong_words++;
+ student_incorrect_words_result.push(studentTextArray[i]);
+ }
+ }
+ //calculation method
+ if (originalwords >= studentswords) {
+ result_per_words = Math.round(
+ Number((correct_words / originalwords) * 100)
+ );
+ } else {
+ result_per_words = Math.round(
+ Number((correct_words / studentswords) * 100)
+ );
+ }
+
+ const errorRate = calcCER(responseText, tempteacherText);
+ let finalScore = 100 - errorRate * 100;
+
+ finalScore = finalScore < 0 ? 0 : finalScore;
+
+ let word_result = finalScore === 100 ? "correct" : "incorrect";
+
+ // TODO: Remove false when REACT_APP_AWS_S3_BUCKET_NAME and keys added
+ var audioFileName = "";
+ if (process.env.REACT_APP_CAPTURE_AUDIO === "true" && false) {
+ let getContentId = currentLine;
+ audioFileName = `${
+ process.env.REACT_APP_CHANNEL
+ }/${sessionId}-${Date.now()}-${getContentId}.wav`;
+
+ const command = new PutObjectCommand({
+ Bucket: process.env.REACT_APP_AWS_S3_BUCKET_NAME,
+ Key: audioFileName,
+ Body: Uint8Array.from(window.atob(base64Data), (c) =>
+ c.charCodeAt(0)
+ ),
+ ContentType: "audio/wav",
+ });
+ try {
+ const response = await S3Client.send(command);
+ } catch (err) {
+ console.log(
+ "here",
+ err,
+ err.message,
+ { err: err.name, errtype: "CONTENT" },
+ "ET"
+ );
+ }
+ }
+
+ response(
+ {
+ // Required
+ target:
+ process.env.REACT_APP_CAPTURE_AUDIO === "true"
+ ? `${audioFileName}`
+ : "", // 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 },
+ { response_text: responseText },
+ { response_correct_words_array: student_correct_words_result },
+ { response_incorrect_words_array: student_incorrect_words_result },
+ { response_word_array_result: word_result_array },
+ { response_word_result: word_result },
+ { accuracy_percentage: finalScore },
+ { duration: responseDuration },
+ ],
+ },
+ "ET"
+ );
+
+ setApiResponse(callUpdateLearner ? data.status : "success");
+ setLoader(false);
+ } catch (error) {
+ setLoader(false);
+ setRecordedAudioBase64("");
+ setApiResponse("error");
+ console.log("err", error);
+ }
+ };
+
+ // const getpermision = () => {
+ // navigator.getUserMedia =
+ // navigator.getUserMedia ||
+ // navigator.webkitGetUserMedia ||
+ // navigator.mozGetUserMedia ||
+ // navigator.msGetUserMedia;
+ // navigator.getUserMedia(
+ // { audio: true },
+ // () => {
+ // console.log("Permission Granted");
+ // setAudioPermission(true);
+ // },
+ // () => {
+ // console.log("Permission Denied");
+ // setAudioPermission(false);
+ // //alert("Microphone Permission Denied");
+ // }
+ // );
+ // };
+ const getpermision = () => {
+ navigator.mediaDevices
+ .getUserMedia({ audio: true })
+ .then((stream) => {
+ console.log("Permission Granted");
+ setAudioPermission(true);
+ })
+ .catch((error) => {
+ console.log("Permission Denied");
+ setAudioPermission(false);
+ //alert("Microphone Permission Denied");
+ });
+ };
+ return (
+
+ {loader ? (
+
+
+ ) : (
+ (() => {
+ if (audioPermission != null) {
+ if (audioPermission) {
+ return (
+ <>
+ {
+ alert(
+ "Microphone is blocked. Enable microphone to continue."
+ );
+ }}
+ >
+
+ );
+ }
+ }
+ })()
+ )}
+
+ );
+}
+
+export default VoiceAnalyser;
diff --git a/src/utils/constants.js b/src/utils/constants.js
new file mode 100644
index 00000000..16589fcf
--- /dev/null
+++ b/src/utils/constants.js
@@ -0,0 +1,3152 @@
+import confetti from "canvas-confetti";
+import * as React from "react";
+
+export const getLocalData = (item) => {
+ return localStorage.getItem(item);
+};
+
+export const setLocalData = (item, value) => {
+ return localStorage.setItem(item, value);
+};
+
+export function replaceAll(string, search, replace) {
+ return string.split(search).join(replace);
+}
+
+export function compareArrays(arr1, arr2) {
+ let words_result = [];
+
+ // Iterate over each element and compare
+ for (var k in arr1) {
+ if (arr2[k] == "" || arr2[k] == undefined) {
+ // Element not available on the same key
+ words_result.push("-1");
+ } else if (arr1[k] === arr2[k]) {
+ // Elements match on the same key
+ words_result.push("1");
+ } else {
+ // Element does not match on the same key
+ words_result.push("0");
+ }
+ }
+ if (arr1.length < arr2.length) {
+ for (let i = arr1.length; i < arr2.length; i++) {
+ words_result.push("-1");
+ }
+ }
+ return words_result;
+}
+
+export const questionsList = [
+ {
+ question:
+ "One day, a dog was passing by a river. He had a bone in his mouth.",
+ type: "sentence",
+ },
+ {
+ question: "He looked into the water and saw his own reflection in it.",
+ type: "sentence",
+ },
+ {
+ question: "He started barking bow-wow, and bone fell into the water.",
+ type: "sentence",
+ },
+ { question: "River", type: "word" },
+ { question: "Water", type: "word" },
+ { question: "Barking", type: "word" },
+ {
+ question:
+ "There are many different kinds of animals that live in China. Tigers and leopards are animals that live in China's forests in the north.",
+ type: "paragraph",
+ },
+ {
+ question:
+ "Bali and Lombok are neighbouring islands both are part of the Indonesian archipelago. It is easy to appreciate each island as an attractive tourist destination.",
+ type: "paragraph",
+ },
+ {
+ question:
+ "Martin Luther led many demonstrations against racism. He delivered his message in a non-violent manner. The jail sentence he received was four months.",
+ type: "paragraph",
+ },
+];
+
+export const NextButton = (props) => {
+ return (
+
+ );
+};
+
+export const ListenButton = (props) => {
+ return (
+
+ );
+};
+
+export const SpeakButton = (props) => (
+
+);
+
+export const StopButton = (props) => (
+
+);
+
+export const AudioPlayerSvg = (props) => {
+ return (
+
+ );
+};
+
+export const PlayAudioButton = (props) => (
+
+);
+
+export const StopAudioButton = (props) => (
+
+);
+
+export const AudioBarSvg = (props) => (
+
+);
+
+export const AudioBarColoredSvg = (props) => (
+
+);
+
+export const SubmitButton = (props) => (
+
+);
+
+export const LevelOne = (props) => (
+
+);
+
+export const LevelTwo = (props) => (
+
+);
+
+export const LevelThree = (props) => (
+
+);
+
+export const LevelFour = (props) => (
+
+);
+
+export const LevelFive = (props) => (
+
+);
+
+export const LevelSix = (props) => (
+
+);
+
+export const LevelSeven = (props) => (
+
+);
+
+export const LevelEight = (props) => (
+
+);
+
+export const LevelNine = (props) => (
+
+);
+
+export const LetsStart = (props) => (
+
+);
+export const StartAssessmentButton = (props) => (
+
+);
+
+export const GoodMood = (props) => (
+
+);
+
+export const AverageMood = (props) => (
+
+);
+
+export const BadMood = (props) => (
+
+);
+
+export const GreenTick = (props) => (
+
+);
+
+export const LevelRight = (props) => (
+
+);
+
+export const SelectLanguageButton = (props) => (
+
+);
+
+export const RoundTick = (props) => (
+
+);
+
+export const RetryIcon = (props) => (
+
+);
+
+export const AssesmentCompletePlane = (props) => (
+
+);
+
+export const SessionID = "13900744731701973109305";
+export const UserID = "1390074473";
+export const BASE_API = "https://www.learnerai-dev.theall.ai/";
+
+export const practiceSteps = [
+ { name: "P1", fullName: "Practice 1" },
+ { name: "P2", fullName: "Practice 2" },
+ { name: "P3", fullName: "Practice 3" },
+ { name: "P4", fullName: "Practice 4" },
+ { name: "S1", fullName: "Showcase 1" },
+ { name: "P5", fullName: "Practice 5" },
+ { name: "P6", fullName: "Practice 6" },
+ { name: "P7", fullName: "Practice 7" },
+ { name: "P8", fullName: "Practice 8" },
+ { name: "S2", fullName: "Showcase 2" },
+];
+
+export const levelGetContent = {
+ 0: [
+ { title: "P1", criteria: "char", template: "simple" },
+ { title: "P2", criteria: "char", template: "simple" },
+ { title: "P3", criteria: "char", template: "simple" },
+ { title: "P4", criteria: "char", template: "simple" },
+ { title: "S1", criteria: "word", template: "simple" },
+ { title: "P5", criteria: "word", template: "simple" },
+ { title: "P6", criteria: "word", template: "simple" },
+ { title: "P7", criteria: "word", template: "simple" },
+ { title: "P8", criteria: "word", template: "simple" },
+ { title: "S2", criteria: "word", template: "simple" },
+ ],
+ 1: [
+ { title: "P1", criteria: "word", template: "simple" },
+ { title: "P2", criteria: "word", template: "simple" },
+ { title: "P3", criteria: "word", template: "simple" },
+ { title: "P4", criteria: "word", template: "simple" },
+ { title: "S1", criteria: "word", template: "simple" },
+ { title: "P5", criteria: "word", template: "simple" },
+ { title: "P6", criteria: "word", template: "simple" },
+ { title: "P7", criteria: "word", template: "simple" },
+ { title: "P8", criteria: "word", template: "simple" },
+ { title: "S2", criteria: "word", template: "simple" },
+ ],
+ 2: [
+ { title: "P1", criteria: "char", template: "simple" },
+ { title: "P2", criteria: "char", template: "simple" },
+ { title: "P3", criteria: "word", template: "simple" },
+ { title: "P4", criteria: "word", template: "simple" },
+ { title: "S1", criteria: "word", template: "simple" },
+ { title: "P5", criteria: "word", template: "simple" },
+ { title: "P6", criteria: "word", template: "simple" },
+ { title: "P7", criteria: "word", template: "simple" },
+ { title: "P8", criteria: "word", template: "simple" },
+ { title: "S2", criteria: "word", template: "simple" },
+ ],
+ 3: [
+ { title: "P1", criteria: "word", template: "simple" },
+ { title: "P2", criteria: "word", template: "simple" },
+ { title: "P3", criteria: "sentence", template: "simple" },
+ { title: "P4", criteria: "sentence", template: "simple" },
+ { title: "S1", criteria: "sentence", template: "simple" },
+ { title: "P5", criteria: "word", template: "simple" },
+ { title: "P6", criteria: "sentence", template: "simple" },
+ { title: "P7", criteria: "sentence", template: "simple" },
+ { title: "P8", criteria: "sentence", template: "simple" },
+ { title: "S2", criteria: "sentence", template: "simple" },
+ ],
+ 4: [
+ { title: "P1", criteria: "word", template: "simple" },
+ { title: "P2", criteria: "word", template: "simple" },
+ { title: "P3", criteria: "sentence", template: "simple" },
+ { title: "P4", criteria: "sentence", template: "simple" },
+ { title: "S1", criteria: "sentence", template: "simple" },
+ { title: "P5", criteria: "sentence", template: "simple" },
+ { title: "P6", criteria: "sentence", template: "simple" },
+ { title: "P7", criteria: "sentence", template: "simple" },
+ { title: "P8", criteria: "sentence", template: "simple" },
+ { title: "S2", criteria: "sentence", template: "simple" },
+ ],
+ 5: [
+ { title: "P1", criteria: "sentence", template: "simple" },
+ { title: "P2", criteria: "sentence", template: "simple" },
+ { title: "P3", criteria: "sentence", template: "simple" },
+ { title: "P4", criteria: "sentence", template: "simple" },
+ { title: "S1", criteria: "sentence", template: "simple" },
+ { title: "P5", criteria: "sentence", template: "simple" },
+ { title: "P6", criteria: "sentence", template: "simple" },
+ { title: "P7", criteria: "sentence", template: "simple" },
+ { title: "P8", criteria: "sentence", template: "simple" },
+ { title: "S2", criteria: "sentence", template: "simple" },
+ ],
+ 6: [
+ { title: "P1", criteria: "sentence", template: "simple" },
+ { title: "P2", criteria: "sentence", template: "simple" },
+ { title: "P3", criteria: "paragraph", template: "simple" },
+ { title: "P4", criteria: "paragraph", template: "simple" },
+ { title: "S1", criteria: "paragraph", template: "simple" },
+ { title: "P5", criteria: "sentence", template: "simple" },
+ { title: "P6", criteria: "paragraph", template: "simple" },
+ { title: "P7", criteria: "paragraph", template: "simple" },
+ { title: "P8", criteria: "paragraph", template: "simple" },
+ { title: "S2", criteria: "paragraph", template: "simple" },
+ ],
+ 7: [
+ { title: "P1", criteria: "sentence", template: "simple" },
+ { title: "P2", criteria: "sentence", template: "simple" },
+ { title: "P3", criteria: "paragraph", template: "simple" },
+ { title: "P4", criteria: "paragraph", template: "simple" },
+ { title: "S1", criteria: "paragraph", template: "simple" },
+ { title: "P5", criteria: "paragraph", template: "simple" },
+ { title: "P6", criteria: "paragraph", template: "simple" },
+ { title: "P7", criteria: "paragraph", template: "simple" },
+ { title: "P8", criteria: "paragraph", template: "simple" },
+ { title: "S2", criteria: "paragraph", template: "simple" },
+ ],
+ 8: [
+ { title: "P1", criteria: "sentence", template: "simple" },
+ { title: "P2", criteria: "sentence", template: "simple" },
+ { title: "P3", criteria: "paragraph", template: "simple" },
+ { title: "P4", criteria: "paragraph", template: "simple" },
+ { title: "S1", criteria: "paragraph", template: "simple" },
+ { title: "P5", criteria: "paragraph", template: "simple" },
+ { title: "P6", criteria: "paragraph", template: "simple" },
+ { title: "P7", criteria: "paragraph", template: "simple" },
+ { title: "P8", criteria: "paragraph", template: "simple" },
+ { title: "S2", criteria: "paragraph", template: "simple" },
+ ],
+ 9: [
+ { title: "P1", criteria: "sentence", template: "simple" },
+ { title: "P2", criteria: "sentence", template: "simple" },
+ { title: "P3", criteria: "paragraph", template: "simple" },
+ { title: "P4", criteria: "paragraph", template: "simple" },
+ { title: "S1", criteria: "paragraph", template: "simple" },
+ { title: "P5", criteria: "paragraph", template: "simple" },
+ { title: "P6", criteria: "paragraph", template: "simple" },
+ { title: "P7", criteria: "paragraph", template: "simple" },
+ { title: "P8", criteria: "paragraph", template: "simple" },
+ { title: "S2", criteria: "paragraph", template: "simple" },
+ ],
+};
+
+export const callConfetti = () => {
+ var duration = 3 * 1000;
+ var animationEnd = Date.now() + duration;
+ var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
+
+ function randomInRange(min, max) {
+ return Math.random() * (max - min) + min;
+ }
+
+ var interval = setInterval(function () {
+ var timeLeft = animationEnd - Date.now();
+
+ if (timeLeft <= 0) {
+ return clearInterval(interval);
+ }
+
+ var particleCount = 50 * (timeLeft / duration);
+ // since particles fall down, start a bit higher than random
+ confetti({
+ ...defaults,
+ particleCount,
+ origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
+ });
+ confetti({
+ ...defaults,
+ particleCount,
+ origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
+ });
+ }, 250);
+};
+
+export const levelConfig = {
+ 1: { color: "#3872C1" },
+ 2: { color: "#FF1276" },
+ 3: { color: "#FFB31F" },
+ 4: { color: "#BC00FF" },
+ 5: { color: "#37C473" },
+ 6: { color: "#F810E1" },
+ 7: { color: "#634AFF" },
+ 8: { color: "#B4CF12" },
+ 9: { color: "#00C7E2" },
+};
+
+export const languages = [
+ { name: "Tamil", lang: "ta", symbol: "இ" },
+ { name: "English", lang: "en", symbol: "A" },
+ { name: "Hindi", lang: "hi", symbol: "क" },
+ ,
+];
diff --git a/src/utils/reduxActions.js b/src/utils/reduxActions.js
new file mode 100644
index 00000000..01de104f
--- /dev/null
+++ b/src/utils/reduxActions.js
@@ -0,0 +1,7 @@
+// DOCUMENTATION: https://intelligize.atlassian.net/wiki/spaces/IN/pages/92635137/Redux+Actions
+
+export const asyncActionType = (type: any) => ({
+ PENDING: `${type} - Pending`,
+ SUCCESS: `${type} - Success`,
+ ERROR: `${type} - Error`,
+});
diff --git a/src/utils/reselect.js b/src/utils/reselect.js
new file mode 100644
index 00000000..f0c3e6cc
--- /dev/null
+++ b/src/utils/reselect.js
@@ -0,0 +1,10 @@
+import { createSelectorCreator, defaultMemoize } from 'reselect';
+import { is } from 'immutable';
+
+function isEqual(a, b) {
+ return is(a, b);
+}
+
+const createImmutableSelector = createSelectorCreator(defaultMemoize, isEqual);
+
+export default createImmutableSelector;
diff --git a/src/views/AppContent/AppContent.jsx b/src/views/AppContent/AppContent.jsx
new file mode 100644
index 00000000..dae87902
--- /dev/null
+++ b/src/views/AppContent/AppContent.jsx
@@ -0,0 +1,41 @@
+import React, { useEffect, Fragment } from "react";
+import { Routes, Route, useNavigate, useLocation } from "react-router-dom";
+import CustomizedSnackbars from "../../views/Snackbar/CustomSnackbar";
+import { useSelector } from "react-redux";
+
+const PrivateRoute = (props) => {
+ const { virtualId } = useSelector((state) => state.user);
+ const navigate = useNavigate();
+ useEffect(() => {
+ if (!virtualId && props.requiresAuth) {
+ // navigate("/");
+ }
+ }, [virtualId]);
+
+ return <>{props.children};
+};
+const AppContent = ({ routes }) => {
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ return (
+