@nualang/nualang-ui-components 0.1.1144 → 0.1.1145

package/dist/Dialogs/CreateQuestion/CreateQuestion.js

@@ -61,10 +61,12 @@ function CreateQuestion({
   const [question, setQuestion] = (0, _react.useState)(otherProps.question);
   const [answer, setAnswer] = (0, _react.useState)(initialAnswerState);
   const [answerList, setAnswerList] = (0, _react.useState)(otherProps.answers);
+  const [error, setError] = (0, _react.useState)("");
   const handleAnswerInputChange = event => {
     const target = event.target;
     const value = target.type === "checkbox" ? target.checked : target.value;
     const name = target.name;
+    setError("");
     setAnswer(prevState => ({
       ...prevState,
       [name]: value
@@ -72,11 +74,18 @@ function CreateQuestion({
   };
   const handleAddAnswer = () => {
     if (answer && answer.text) {
-      setAnswerList(prevAnswerList => [...prevAnswerList, {
-        ...answer,
-        text: answer.text.trim()
-      }]);
-      setAnswer(initialAnswerState);
+      const trimmedText = answer.text.trim().toLowerCase();
+      const isDuplicate = answerList.some(existingAnswer => existingAnswer.text.toLowerCase() === trimmedText);
+      if (isDuplicate) {
+        setError(t("duplicate_answer_desc"));
+      } else {
+        setAnswerList(prevAnswerList => [...prevAnswerList, {
+          ...answer,
+          text: answer.text.trim()
+        }]);
+        setAnswer(initialAnswerState);
+        setError("");
+      }
     }
   };
   const handleRemoveAnswer = index => {
@@ -101,7 +110,8 @@ function CreateQuestion({
   };
   const handleSubmit = () => {
     const correctAnswers = answerList.filter(a => a.correct);
-    if (correctAnswers.length && question !== "") {
+    const duplicateAnswers = answerList.filter((a, index) => answerList.findIndex(b => b.text.toLowerCase() === a.text.toLowerCase()) !== index);
+    if (correctAnswers.length && question !== "" && !duplicateAnswers.length) {
       onSubmit({
         question: question.trim(),
         answers: answerList
@@ -110,7 +120,7 @@ function CreateQuestion({
         resetQuestionState();
       }
     } else {
-      alert(t("must_question_least_correct_answer"));
+      alert(!correctAnswers.length ? t("must_question_least_correct_answer") : t("duplicate_answer_desc"));
     }
   };
   const handleOnDragEnd = result => {
@@ -170,6 +180,7 @@ function CreateQuestion({
     item: true,
     xs: 12
   }, /*#__PURE__*/_react.default.createElement(_InputHelper.default, {
+    error: !!error,
     t: t,
     value: answer.text,
     onChange: handleAnswerInputChange,
@@ -182,7 +193,7 @@ function CreateQuestion({
     fullWidth: true,
     variant: "outlined",
     characters: forLangCharacters ? forLangCharacters : null,
-    helperText: answer.text && answer.text.trim() !== "" ? t("answer_helper_text") : "",
+    helperText: error || (answer.text && answer.text.trim() !== "" ? t("answer_helper_text") : ""),
     multiline: true
   }))), /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.DragDropContext, {
     onDragEnd: handleOnDragEnd

package/dist/Exercises/Pronouncer/Pronouncer.js

@@ -173,6 +173,7 @@ function Pronouncer({
     cx
   } = useStyles();
   const [viewMoreTranslations, setViewMoreTranslations] = (0, _react.useState)(false);
+  const [currentPhraseText, setCurrentPhraseText] = (0, _react.useState)("");
   const {
     isSocketConnected,
     recognitionState,
@@ -181,7 +182,12 @@ function Pronouncer({
     resetTranscript,
     clearAttemptAudio,
     indicateEndStream
-  } = (0, _useRecognition.default)();
+  } = (0, _useRecognition.default)({
+    currentPhraseText,
+    trackRecommendedEvent,
+    exerciseName,
+    learnLang
+  });
   const {
     interimTranscript,
     finalTranscript,
@@ -192,7 +198,6 @@ function Pronouncer({
     attemptAudioURL,
     audioBlob
   } = recognitionState;
-  const [currentAttemptAudioURL, setCurrentAttemptAudioURL] = (0, _react.useState)("");
   const handleMic = expectedTranscript => {
     const speechContexts = expectedTranscript ? [{
       phrases: [...(expectedTranscript.length < 100 ? [(0, _utils.removeExtraWhiteSpaces)(expectedTranscript)] : (0, _utils.removeExtraWhiteSpaces)(expectedTranscript).split(" "))],
@@ -200,42 +205,16 @@ function Pronouncer({
     }] : null;
     const model = expectedTranscript && expectedTranscript.length < 50 ? "latest_short" : "default";
 
-    // Stop Recording required to get final confidence score
-    toggleListen(learnLang, speechContexts, model);
+    // Stop Recording required to get final confidence score and trigger event if needed
+    toggleListen(learnLang, speechContexts, model, true);
   };
   (0, _react.useEffect)(() => {
-    if (open && !recognizing) {
-      // Check if recording has ended and has detected at least one word
-      if (finalTranscript) {
-        // Submit attempt
-        handleContinue(false, currentPhrase);
-      } else if (attemptAudioURL && attemptAudioURL !== currentAttemptAudioURL) {
-        setCurrentAttemptAudioURL(attemptAudioURL);
-        const captureSpeechRecognitionNoTranscript = async () => {
-          const {
-            userAgent,
-            language,
-            mediaDevices
-          } = navigator;
-          const browser = (0, _utils.getBrowserInfo)(userAgent);
-          const machineInfo = (0, _utils.getMachineInfo)(userAgent);
-          const [availableMicrophones, activeMicrophone] = await (0, _utils.getMicrophoneInfo)(mediaDevices);
-          trackRecommendedEvent("speech_recognition_no_transcript", {
-            A1_phrase: `${currentPhrase.phrase}`,
-            A2_active_microphone: `${activeMicrophone}`,
-            A3_available_microphones: `${availableMicrophones}`,
-            A4_browser: `${browser}`,
-            A5_socket_state: isSocketConnected ? "connected" : "disconnected",
-            A6_machine_info: `${machineInfo}`,
-            A7_user_language: `${language}`,
-            A8_learn_language: `${learnLang}`,
-            A9_exercise: `${exerciseName}`
-          });
-        };
-        captureSpeechRecognitionNoTranscript().catch(console.error);
-      }
+    // Check if recording has ended and has detected at least one word
+    if (open && !recognizing && finalTranscript) {
+      // Submit attempt
+      handleContinue(false, currentPhrase);
     }
-  }, [open, recognizing, finalTranscript, attemptAudioURL]);
+  }, [open, recognizing, finalTranscript]);
   const initialVoiceSpeed = topicInfo && topicInfo.voiceSpeed ? topicInfo.voiceSpeed : "";
   const exerciseState = (0, _useExerciseState.default)({
     open,
@@ -322,6 +301,11 @@ function Pronouncer({
     checked,
     setChecked
   } = exerciseState;
+  (0, _react.useEffect)(() => {
+    if (currentPhrase.phrase) {
+      setCurrentPhraseText(currentPhrase.phrase);
+    }
+  }, [currentPhrase]);
   const unattemptedQuestionTotal = questions.filter(q => !q.questionAttempted).length;
   const joyrideSteps = [{
     content: /*#__PURE__*/_react.default.createElement("h2", null, t("pronunciation_exercise_welcome")),

package/dist/Exercises/Roleplay/Games/ActItOutGameListeningAndSpeaking/ActItOutGame.js

@@ -284,6 +284,7 @@ function RoleplayGame({
     open
   });
   const scriptWithoutQuestions = roleplay.script.filter(scriptLine => !scriptLine?.question);
+  const [currentPhraseText, setCurrentPhraseText] = (0, _react.useState)("");
   const {
     isSocketConnected,
     recognitionState,
@@ -291,7 +292,13 @@ function RoleplayGame({
     resetTranscript,
     indicateEndStream,
     toggleListen
-  } = (0, _useRecognition.default)();
+  } = (0, _useRecognition.default)({
+    currentPhraseText,
+    trackRecommendedEvent,
+    exerciseName,
+    learnLang,
+    gameId
+  });
   const {
     interimTranscript,
     finalTranscript,
@@ -304,7 +311,6 @@ function RoleplayGame({
   } = recognitionState;
   const [currentMessages, setCurrentMessages] = (0, _react.useState)([]);
   const [celebratingNualaImage, setCelebratingNualaImage] = (0, _react.useState)(_nuala_1_celebrating.default);
-  const [currentAttemptAudioURL, setCurrentAttemptAudioURL] = (0, _react.useState)("");
   const exerciseState = (0, _useExerciseState.default)({
     t,
     open,
@@ -417,8 +423,8 @@ function RoleplayGame({
     }] : null;
     const model = expectedTranscript && expectedTranscript.length < 50 ? "latest_short" : "default";
 
-    // Stop Recording required to get final confidence score
-    toggleListen(learnLang, speechContexts, model);
+    // Stop Recording required to get final confidence score and trigger event if needed
+    toggleListen(learnLang, speechContexts, model, true);
   };
   const getRandomNuala = () => {
     let finished = false;
@@ -441,41 +447,20 @@ function RoleplayGame({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [actorHasBeenSelected]);
   const nextScriptLine = roleplay && scriptWithoutQuestions && scriptWithoutQuestions[roleplayMessages.length] ? scriptWithoutQuestions[roleplayMessages.length] : "";
+  (0, _react.useEffect)(() => {
+    if (nextScriptLine) {
+      setCurrentPhraseText(nextScriptLine.text);
+    }
+  }, [nextScriptLine]);
   const phraseWordList = nextScriptLine ? (0, _utils.removeExtraWhiteSpaces)((0, _utils.removeAllSymbols)(nextScriptLine.text)).split(" ") : [];
   (0, _react.useEffect)(() => {
-    if (open && !recognizing) {
-      // Check if recording has ended and has detected at least one word
-      if (finalTranscript) {
-        // Submit attempt
-        checkRoleplayPronunciation(finalTranscript, nextScriptLine.text);
-      } else if (attemptAudioURL && attemptAudioURL !== currentAttemptAudioURL) {
-        setCurrentAttemptAudioURL(attemptAudioURL);
-        const captureSpeechRecognitionNoTranscript = async () => {
-          const {
-            userAgent,
-            language,
-            mediaDevices
-          } = navigator;
-          const browser = (0, _utils.getBrowserInfo)(userAgent);
-          const machineInfo = (0, _utils.getMachineInfo)(userAgent);
-          const [availableMicrophones, activeMicrophone] = await (0, _utils.getMicrophoneInfo)(mediaDevices);
-          trackRecommendedEvent("speech_recognition_no_transcript", {
-            A1_phrase: `${nextScriptLine.text}`,
-            A2_active_microphone: `${activeMicrophone}`,
-            A3_available_microphones: `${availableMicrophones}`,
-            A4_browser: `${browser}`,
-            A5_socket_state: isSocketConnected ? "connected" : "disconnected",
-            A6_machine_info: `${machineInfo}`,
-            A7_user_language: `${language}`,
-            A8_learn_language: `${learnLang}`,
-            A9_exercise: `${exerciseName}-act-it-out-listening-speaking`
-          });
-        };
-        captureSpeechRecognitionNoTranscript().catch(console.error);
-      }
+    // Check if recording has ended and has detected at least one word
+    if (open && !recognizing && finalTranscript) {
+      // Submit attempt
+      checkRoleplayPronunciation(finalTranscript, nextScriptLine.text);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, recognizing, finalTranscript, attemptAudioURL]);
+  }, [open, recognizing, finalTranscript]);
   const isRoleplayScriptLoaded = roleplay && roleplay.script;
   (0, _react.useEffect)(() => {
     if (isRoleplayScriptLoaded) {

package/dist/Exercises/Roleplay/Games/ActItOutGameSpeaking/ActItOutGame.js

@@ -280,6 +280,7 @@ function RoleplayGame({
     open
   });
   const scriptWithoutQuestions = roleplay.script.filter(scriptLine => !scriptLine?.question);
+  const [currentPhraseText, setCurrentPhraseText] = (0, _react.useState)("");
   const {
     isSocketConnected,
     recognitionState,
@@ -287,7 +288,13 @@ function RoleplayGame({
     resetTranscript,
     indicateEndStream,
     toggleListen
-  } = (0, _useRecognition.default)();
+  } = (0, _useRecognition.default)({
+    currentPhraseText,
+    trackRecommendedEvent,
+    exerciseName,
+    learnLang,
+    gameId
+  });
   const {
     interimTranscript,
     finalTranscript,
@@ -301,7 +308,6 @@ function RoleplayGame({
   const [currentMessages, setCurrentMessages] = (0, _react.useState)([]);
   const [ariaLiveText, setAriaLiveText] = (0, _react.useState)("");
   const [celebratingNualaImage, setCelebratingNualaImage] = (0, _react.useState)(_nuala_1_celebrating.default);
-  const [currentAttemptAudioURL, setCurrentAttemptAudioURL] = (0, _react.useState)("");
   const exerciseState = (0, _useExerciseState.default)({
     t,
     open,
@@ -415,8 +421,8 @@ function RoleplayGame({
     const model = expectedTranscript && expectedTranscript.length < 50 ? "latest_short" : "default";
     setAriaLiveText("Listening...");
 
-    // Stop Recording required to get final confidence score
-    toggleListen(learnLang, speechContexts, model);
+    // Stop Recording required to get final confidence score and trigger event if needed
+    toggleListen(learnLang, speechContexts, model, true);
   };
   const getRandomNuala = () => {
     let finished = false;
@@ -439,41 +445,20 @@ function RoleplayGame({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [actorHasBeenSelected]);
   const nextScriptLine = roleplay && scriptWithoutQuestions && scriptWithoutQuestions[roleplayMessages.length] ? scriptWithoutQuestions[roleplayMessages.length] : "";
+  (0, _react.useEffect)(() => {
+    if (nextScriptLine) {
+      setCurrentPhraseText(nextScriptLine.text);
+    }
+  }, [nextScriptLine]);
   const phraseWordList = nextScriptLine ? (0, _utils.removeExtraWhiteSpaces)((0, _utils.removeAllSymbols)(nextScriptLine.text)).split(" ") : [];
   (0, _react.useEffect)(() => {
-    if (open && !recognizing) {
-      // Check if recording has ended and has detected at least one word
-      if (finalTranscript) {
-        // Submit attempt
-        checkRoleplayPronunciation(finalTranscript, nextScriptLine.text);
-      } else if (attemptAudioURL && attemptAudioURL !== currentAttemptAudioURL) {
-        setCurrentAttemptAudioURL(attemptAudioURL);
-        const captureSpeechRecognitionNoTranscript = async () => {
-          const {
-            userAgent,
-            language,
-            mediaDevices
-          } = navigator;
-          const browser = (0, _utils.getBrowserInfo)(userAgent);
-          const machineInfo = (0, _utils.getMachineInfo)(userAgent);
-          const [availableMicrophones, activeMicrophone] = await (0, _utils.getMicrophoneInfo)(mediaDevices);
-          trackRecommendedEvent("speech_recognition_no_transcript", {
-            A1_phrase: `${nextScriptLine.text}`,
-            A2_active_microphone: `${activeMicrophone}`,
-            A3_available_microphones: `${availableMicrophones}`,
-            A4_browser: `${browser}`,
-            A5_socket_state: isSocketConnected ? "connected" : "disconnected",
-            A6_machine_info: `${machineInfo}`,
-            A7_user_language: `${language}`,
-            A8_learn_language: `${learnLang}`,
-            A9_exercise: `${exerciseName}-act-it-out-speaking`
-          });
-        };
-        captureSpeechRecognitionNoTranscript().catch(console.error);
-      }
+    // Check if recording has ended and has detected at least one word
+    if (open && !recognizing && finalTranscript) {
+      // Submit attempt
+      checkRoleplayPronunciation(finalTranscript, nextScriptLine.text);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, recognizing, finalTranscript, attemptAudioURL]);
+  }, [open, recognizing, finalTranscript]);
   const isRoleplayScriptLoaded = roleplay && roleplay.script;
   (0, _react.useEffect)(() => {
     if (isRoleplayScriptLoaded) {

package/dist/Forms/Settings/Settings.stories.js

@@ -280,7 +280,7 @@ Subscription.args = {
     subscriptionStatus: "active",
     updatedAt: 1630678018431
   }, {
-    allowedDomains: 2[("ces-schools.com", "fathomtech.io")],
+    allowedDomains: 2["ces-schools.com", "fathomtech.io"],
     createdAt: 1630679041953,
     createdBy: "39e46d34-9863-497f-b4f9-10e6a7875833",
     createdByName: "Stephen",

package/dist/hooks/useRecognition.js

@@ -40,7 +40,13 @@ const constraints = {
   audio: true,
   video: false
 };
-function useRecognition() {
+function useRecognition({
+  currentPhraseText,
+  trackRecommendedEvent,
+  learnLang,
+  exerciseName,
+  gameId
+}) {
   const browserSupportsSpeechRecognition = true;
   const [recognitionState, setRecognitionState] = (0, _react.useState)({
     interimTranscript: "",
@@ -176,7 +182,30 @@ function useRecognition() {
   const indicateEndStream = () => {
     socket.emit("endGoogleCloudStream", "");
   };
-  const stopRecording = keepSocketAlive => {
+  const captureSpeechRecognitionNoTranscript = async () => {
+    const {
+      userAgent,
+      language,
+      mediaDevices
+    } = navigator;
+    const browser = (0, _index.getBrowserInfo)(userAgent);
+    const machineInfo = (0, _index.getMachineInfo)(userAgent);
+    const [availableMicrophones, activeMicrophone] = await (0, _index.getMicrophoneInfo)(mediaDevices);
+    const eventBody = {
+      A1_phrase: `${currentPhraseText}`,
+      A2_active_microphone: `${activeMicrophone}`,
+      A3_available_microphones: `${availableMicrophones}`,
+      A4_browser: `${browser}`,
+      A5_socket_state: isSocketConnected ? "connected" : "disconnected",
+      A6_machine_info: `${machineInfo}`,
+      A7_user_language: `${language}`,
+      A8_learn_language: `${learnLang}`,
+      A9_exercise: gameId ? `${exerciseName}-${gameId}` : `${exerciseName}`
+    };
+    console.log("Event Body:", eventBody);
+    trackRecommendedEvent("speech_recognition_no_transcript", eventBody);
+  };
+  const stopRecording = (keepSocketAlive, triggerEvent) => {
     // indicate end stream to trigger interim transcript to return as final transcript
     if (socket) {
       indicateEndStream();
@@ -190,6 +219,14 @@ function useRecognition() {
         ...prevState,
         isRecognizingDisabled: false
       }));
+      const {
+        finalTranscript,
+        interimTranscript
+      } = recognitionState;
+      if (triggerEvent && (!finalTranscript || finalTranscript === "") && (!interimTranscript || interimTranscript === "")) {
+        captureSpeechRecognitionNoTranscript().catch(console.error);
+        console.log("Event triggered");
+      }
     }, 2000);
   };
   (0, _react.useEffect)(() => {
@@ -280,12 +317,12 @@ function useRecognition() {
       // No further action needed, as this already closes itself on error
     });
   };
-  const toggleListen = (lang, speechContexts, model) => {
+  const toggleListen = (lang, speechContexts, model, triggerEvent) => {
     const {
       recognizing
     } = recognitionState;
     if (recognizing) {
-      stop();
+      stop(triggerEvent);
     } else {
       start(lang, speechContexts, model);
     }
@@ -302,7 +339,7 @@ function useRecognition() {
     }, audioRecordingLimit);
     startRecognition(_config.default.languages[lang?.toLowerCase()]?.Tag, speechContexts, model);
   };
-  const stop = () => {
+  const stop = triggerEvent => {
     if (stopAudioRecordingTimeoutId) {
       clearTimeout(stopAudioRecordingTimeoutId);
       stopAudioRecordingTimeoutId = null;
@@ -312,7 +349,7 @@ function useRecognition() {
       recognizing: false,
       isRecognizingDisabled: true
     }));
-    stopRecording(true);
+    stopRecording(true, triggerEvent);
   };
   const resetTranscript = () => {
     setRecognitionState(prevState => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1144",
+  "version": "0.1.1145",
   "main": "dist/index.js",
   "files": [
     "dist",