@nualang/nualang-ui-components 0.1.1245 → 0.1.1246

package/dist/Exercises/Listener/Listener.js

@@ -42,7 +42,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 
 const useStyles = (0, _mui.makeStyles)()(theme => ({
   appBar: {
-    position: "sticky",
+    position: "relative",
     paddingTop: `env(safe-area-inset-top)`,
     paddingRight: `env(safe-area-inset-right)`,
     paddingLeft: `env(safe-area-inset-left)`
@@ -244,6 +244,7 @@ function Listener({
   const {
     classes
   } = useStyles();
+  const scrollRef = (0, _react.useRef)(null);
   const [wordBankTooltipOpen, setWordBankTooltipOpen] = (0, _react.useState)(false);
   const initialVoiceSpeed = topicInfo && topicInfo.voiceSpeed ? topicInfo.voiceSpeed : "";
   const exerciseState = (0, _useExerciseState.default)({
@@ -470,6 +471,14 @@ function Listener({
   (0, _react.useEffect)(() => {
     assignment ? setIsAssignmentExercise(true) : setIsAssignmentExercise(false);
   }, [assignment]);
+  (0, _react.useEffect)(() => {
+    if (scrollRef.current && useWordBank) {
+      scrollRef.current.scroll({
+        top: scrollRef.current.scrollHeight,
+        behavior: "smooth"
+      });
+    }
+  }, [useWordBank]);
   (0, _react.useEffect)(() => {
     if (open && !run && !localStorage.getItem(`listening-exercise-tour-completed`)) {
       setJoyrideState(prevState => ({
@@ -535,6 +544,9 @@ function Listener({
   const goBackToAssignment = () => {
     navigate(`/classrooms/${classroomId}#Assignments`);
   };
+  const noListeningWords = !listeningWords || listeningWords.length === 0;
+  const isWordBankMode = useWordBank && isWordBankEnabled;
+  const isSubmitAnswerDisabled = isWordBankMode ? !isWordBankAttemptChanged || noListeningWords : !listeningText && noListeningWords;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Dialog, {
     fullScreen: true,
     open: open,
@@ -644,9 +656,13 @@ function Listener({
         })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      ref: scrollRef,
       sx: {
+        overflowY: 'auto',
         flexGrow: 1,
-        overflowY: 'auto'
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
         container: true,
@@ -927,38 +943,13 @@ function Listener({
       exercise: exerciseName,
       languageInformation: languageInformation,
       nualaCelebratingImage: getNualaCelebratingImage()
-    }), useWordBank && isWordBankEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-      sx: {
-        position: 'sticky',
-        bottom: 0,
-        zIndex: 1100,
-        backgroundColor: theme => theme.palette.background.paper
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExerciseBottomBar.default, {
-        t: t,
-        listeningWords: listeningWords,
-        handleSubmit: () => handleContinue(false),
-        handleSkip: () => handleContinue(true),
-        isSubmitAnswerAllowed: true,
-        isSubmitAnswerDisabled: !isWordBankAttemptChanged || !listeningWords || listeningWords.length === 0,
-        useWordBank: useWordBank
-      })
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-      sx: {
-        position: 'sticky',
-        bottom: 0,
-        zIndex: 1100,
-        backgroundColor: theme => theme.palette.background.paper
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExerciseBottomBar.default, {
-        t: t,
-        listeningWords: listeningWords,
-        handleSubmit: () => handleContinue(false),
-        handleSkip: () => handleContinue(true),
-        isSubmitAnswerAllowed: true,
-        isSubmitAnswerDisabled: !listeningText && (!listeningWords || listeningWords.length === 0),
-        useWordBank: useWordBank
-      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExerciseBottomBar.default, {
+      t: t,
+      listeningWords: listeningWords,
+      handleSubmit: () => handleContinue(false),
+      handleSkip: () => handleContinue(true),
+      isSubmitAnswerAllowed: true,
+      isSubmitAnswerDisabled: isSubmitAnswerDisabled
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompletedExcercise.default, {
       open: isCompletionModalOpen,
       restartExcercise: handleRestartExercise,

package/dist/Exercises/Pronouncer/Pronouncer.js

@@ -176,6 +176,7 @@ function Pronouncer({
     classes,
     cx
   } = useStyles();
+  const scrollRef = (0, _react.useRef)(null);
   const [viewMoreTranslations, setViewMoreTranslations] = (0, _react.useState)(false);
   const [currentPhraseText, setCurrentPhraseText] = (0, _react.useState)("");
   const {
@@ -222,6 +223,12 @@ function Pronouncer({
   }, [open, recognizing, finalTranscript]);
   (0, _react.useEffect)(() => {
     let timer;
+    if (scrollRef.current && (interimTranscript || finalTranscript)) {
+      scrollRef.current.scroll({
+        top: scrollRef.current.scrollHeight,
+        behavior: "smooth"
+      });
+    }
     if (recognizing && interimTranscript === "" && finalTranscript === "") {
       // Set a timer to stop listening if no audio is detected after 10 seconds
       timer = setTimeout(() => {
@@ -479,6 +486,13 @@ function Pronouncer({
     onClose: handleClose,
     TransitionComponent: Transition,
     "aria-labelledby": "pronunciation-exercise-dialog",
+    PaperProps: {
+      sx: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%'
+      }
+    },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.AppBar, {
       className: classes.appBar,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Toolbar, {
@@ -574,240 +588,250 @@ function Pronouncer({
           exercise: "Pronunciation"
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
-      container: true,
-      className: classes.root,
-      direction: "column",
-      justifyContent: "center",
-      alignItems: "center",
-      spacing: 2,
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      ref: scrollRef,
       sx: {
-        maxWidth: "lg",
-        mx: "auto"
+        overflowY: 'auto',
+        flexGrow: 1,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
       },
-      component: "main",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-          title: t("pronounce_this_phrase"),
-          placement: "top",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-            variant: "h6",
-            component: "h2",
-            color: "inherit",
-            children: t("pronounce_this_phrase", {
-              lng: languageTag
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+        container: true,
+        className: classes.root,
+        direction: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        spacing: 2,
+        sx: {
+          maxWidth: "lg",
+          mx: "auto"
+        },
+        component: "main",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: t("pronounce_this_phrase"),
+            placement: "top",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "h6",
+              component: "h2",
+              color: "inherit",
+              children: t("pronounce_this_phrase", {
+                lng: languageTag
+              })
             })
           })
-        })
-      }), image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-          sx: {
-            textAlign: "center",
-            mx: "auto"
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            src: image,
-            className: classes.image,
-            alt: ""
-          })
-        })
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
-          container: true,
-          direction: "row",
-          justifyContent: "center",
-          alignItems: "center",
-          spacing: "1",
-          children: [question && question.pronunciations && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-              variant: "body1",
-              color: "textSecondary",
-              gutterBottom: true,
-              children: question && question.pronunciations[0]
+        }), image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            sx: {
+              textAlign: "center",
+              mx: "auto"
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              src: image,
+              className: classes.image,
+              alt: ""
             })
-          }), question && question.pronunciations && question.pronunciations[1] && !viewMoreTranslations && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-              title: t("see_more_pronunciations"),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          })
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+            container: true,
+            direction: "row",
+            justifyContent: "center",
+            alignItems: "center",
+            spacing: "1",
+            children: [question && question.pronunciations && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "body1",
                 color: "textSecondary",
-                edge: "end",
-                size: "small",
-                onClick: () => handleMoreTranslations(),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreHoriz.default, {})
+                gutterBottom: true,
+                children: question && question.pronunciations[0]
               })
-            })
-          }), viewMoreTranslations && question.pronunciations && question.pronunciations[1] && question.pronunciations.map((t, index) => {
-            if (index === 0) {
-              return null;
-            } else {
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
-                  variant: "body1",
+            }), question && question.pronunciations && question.pronunciations[1] && !viewMoreTranslations && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+                title: t("see_more_pronunciations"),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
                   color: "textSecondary",
-                  gutterBottom: true,
-                  children: ["| ", t]
+                  edge: "end",
+                  size: "small",
+                  onClick: () => handleMoreTranslations(),
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreHoriz.default, {})
                 })
-              });
-            }
-          })]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-          container: true,
-          spacing: 1,
-          justifyContent: "center",
-          alignItems: "center",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-            sx: {
-              display: "flex",
-              justifyContent: "center",
-              flexDirection: "row",
-              spacing: "5px"
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-              sx: {
-                display: "flex",
-                justifyContent: "center"
-              },
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                src: getVoiceImage(),
-                className: classes.nualaSpeaking,
-                alt: ""
               })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            }), viewMoreTranslations && question.pronunciations && question.pronunciations[1] && question.pronunciations.map((t, index) => {
+              if (index === 0) {
+                return null;
+              } else {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+                    variant: "body1",
+                    color: "textSecondary",
+                    gutterBottom: true,
+                    children: ["| ", t]
+                  })
+                });
+              }
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+            container: true,
+            spacing: 1,
+            justifyContent: "center",
+            alignItems: "center",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
               sx: {
-                display: "grid",
-                justifyContent: "flex-end",
-                marginLeft: 1
+                display: "flex",
+                justifyContent: "center",
+                flexDirection: "row",
+                spacing: "5px"
               },
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChatBubble.default, {
-                id: "currentPhrase",
-                handleTranslate: handleTranslate,
-                handleSpeak: handleSpeak,
-                clearQueue: clearQueue,
-                stopAudio: stopAudio,
-                learnLang: learnLang,
-                voice: voice || null,
-                voicePitch: voicePitch || null,
-                voiceSpeed: voiceSpeed,
-                forLang: forLang,
-                wordList: currentPhrase ? (0, _utils.removeExtraWhiteSpaces)(currentPhrase.phrase).split(" ") : [],
-                disableTranslation: false,
-                isMessage: false,
-                muteSound: muteSound,
-                t: t
-              }), learnLang !== "irish" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WaveFormLite.default, {
-                  src: pollyResult ? pollyResult : "",
-                  controls: false,
-                  isSpeaking: isSpeaking,
-                  recognizing: recognizing,
-                  muteAudio: true,
-                  handleSpeak: () => {
-                    speak(currentPhrase.phrase, voice, false, "#currentPhrase", voiceLanguageCode, false, voicePitch);
-                  },
-                  theme: theme
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                sx: {
+                  display: "flex",
+                  justifyContent: "center"
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: getVoiceImage(),
+                  className: classes.nualaSpeaking,
+                  alt: ""
                 })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                sx: {
+                  display: "grid",
+                  justifyContent: "flex-end",
+                  marginLeft: 1
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChatBubble.default, {
+                  id: "currentPhrase",
+                  handleTranslate: handleTranslate,
+                  handleSpeak: handleSpeak,
+                  clearQueue: clearQueue,
+                  stopAudio: stopAudio,
+                  learnLang: learnLang,
+                  voice: voice || null,
+                  voicePitch: voicePitch || null,
+                  voiceSpeed: voiceSpeed,
+                  forLang: forLang,
+                  wordList: currentPhrase ? (0, _utils.removeExtraWhiteSpaces)(currentPhrase.phrase).split(" ") : [],
+                  disableTranslation: false,
+                  isMessage: false,
+                  muteSound: muteSound,
+                  t: t
+                }), learnLang !== "irish" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WaveFormLite.default, {
+                    src: pollyResult ? pollyResult : "",
+                    controls: false,
+                    isSpeaking: isSpeaking,
+                    recognizing: recognizing,
+                    muteAudio: true,
+                    handleSpeak: () => {
+                      speak(currentPhrase.phrase, voice, false, "#currentPhrase", voiceLanguageCode, false, voicePitch);
+                    },
+                    theme: theme
+                  })
+                })]
               })]
-            })]
+            })
           })
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-        sx: {
-          marginTop: 1
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-          sx: theme => ({
-            [theme.breakpoints.down("md")]: {
-              height: "50px",
-              width: "200px",
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          sx: {
+            marginTop: 1
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+            sx: theme => ({
+              [theme.breakpoints.down("md")]: {
+                height: "50px",
+                width: "200px",
+                color: "white",
+                padding: 2,
+                fontSize: "16px",
+                borderRadius: 3
+              },
+              height: "70px",
+              width: "250px",
               color: "white",
-              padding: 2,
-              fontSize: "16px",
-              borderRadius: 3
+              backgroundColor: recognizing ? "#d32f2f" : "#2d7b30",
+              padding: 1,
+              fontSize: "20px",
+              borderRadius: 5,
+              border: "1.5px solid transparent",
+              "&:hover": {
+                backgroundColor: recognizing ? "#d32f2f" : "#2d7b30",
+                border: "1.5px solid black"
+              }
+            }),
+            onClick: () => handleMic(currentPhrase ? currentPhrase.phrase : ""),
+            startIcon: recognizing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MicOff.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Mic.default, {}),
+            color: recognizing ? "error" : "success",
+            disabled: isSpeaking || !isSocketConnected || isRecognizingDisabled,
+            id: "voiceInput",
+            variant: "contained",
+            ref: btnRef,
+            children: recognizing ? t("click_to_stop") : t("click_to_start")
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            role: "status",
+            sx: {
+              mt: isListeningIndicatorTextVisible ? 3 : 0
             },
-            height: "70px",
-            width: "250px",
-            color: "white",
-            backgroundColor: recognizing ? "#d32f2f" : "#2d7b30",
-            padding: 1,
+            textAlign: "center",
+            fontWeight: "bolder",
             fontSize: "20px",
-            borderRadius: 5,
-            border: "1.5px solid transparent",
-            "&:hover": {
-              backgroundColor: recognizing ? "#d32f2f" : "#2d7b30",
-              border: "1.5px solid black"
-            }
-          }),
-          onClick: () => handleMic(currentPhrase ? currentPhrase.phrase : ""),
-          startIcon: recognizing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MicOff.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Mic.default, {}),
-          color: recognizing ? "error" : "success",
-          disabled: isSpeaking || !isSocketConnected || isRecognizingDisabled,
-          id: "voiceInput",
-          variant: "contained",
-          ref: btnRef,
-          children: recognizing ? t("click_to_stop") : t("click_to_start")
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-          role: "status",
-          sx: {
-            mt: isListeningIndicatorTextVisible ? 3 : 0
-          },
-          textAlign: "center",
-          fontWeight: "bolder",
-          fontSize: "20px",
-          "aria-label": "Mic is",
-          "aria-live": "polite",
-          children: isListeningIndicatorTextVisible ? t("listening_indicator") : ""
-        })
-      }), finalTranscript || interimTranscript ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
-        alignItems: "center",
-        className: classes.setWidth,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-          title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-            children: `Confidence: ${((transcriptConfidence || 0) * 100).toFixed(0)}%`
-          }),
-          open: isConfidenceOpen,
-          onClose: handleCloseConfidence,
-          onOpen: handleOpenConfidence,
-          role: "status",
-          "aria-live": "assertive",
-          "aria-label": `Confidence: ${(transcriptConfidence * 100).toFixed(0)}%`,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: (finalTranscript || interimTranscript).split(" ").map((word, i) => {
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-                className: classes.finalTranscript,
-                variant: "h5",
-                color: phraseWordList[i] && checkIsPronunciationCorrect(word.trim(), {
-                  phrase: phraseWordList[i].trim(),
-                  alternativeVersions: currentPhrase.alternativeVersions ? currentPhrase.alternativeVersions.map(altAns => {
-                    return altAns ? (0, _utils.removeExtraWhiteSpaces)(altAns).split(" ")[i] : "";
-                  }) : []
-                }) ? "secondary" : "",
-                component: "span",
-                children: word
-              });
-            })
+            "aria-label": "Mic is",
+            "aria-live": "polite",
+            children: isListeningIndicatorTextVisible ? t("listening_indicator") : ""
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
-          onClick: handleReset,
-          size: "small",
-          className: classes.listenButton,
-          "aria-label": "Clear",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Clear.default, {
-            className: cx(classes.iconSmall)
+        }), finalTranscript || interimTranscript ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+          alignItems: "center",
+          className: classes.setWidth,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: `Confidence: ${((transcriptConfidence || 0) * 100).toFixed(0)}%`
+            }),
+            open: isConfidenceOpen,
+            onClose: handleCloseConfidence,
+            onOpen: handleOpenConfidence,
+            role: "status",
+            "aria-live": "assertive",
+            "aria-label": `Confidence: ${(transcriptConfidence * 100).toFixed(0)}%`,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: (finalTranscript || interimTranscript).split(" ").map((word, i) => {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                  className: classes.finalTranscript,
+                  variant: "h5",
+                  color: phraseWordList[i] && checkIsPronunciationCorrect(word.trim(), {
+                    phrase: phraseWordList[i].trim(),
+                    alternativeVersions: currentPhrase.alternativeVersions ? currentPhrase.alternativeVersions.map(altAns => {
+                      return altAns ? (0, _utils.removeExtraWhiteSpaces)(altAns).split(" ")[i] : "";
+                    }) : []
+                  }) ? "secondary" : "",
+                  component: "span",
+                  children: word
+                });
+              })
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+            onClick: handleReset,
+            size: "small",
+            className: classes.listenButton,
+            "aria-label": "Clear",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Clear.default, {
+              className: cx(classes.iconSmall)
+            })
+          })]
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: classes.waveform,
+          "aria-labelledby": finalTranscript,
+          children: attemptAudioURL && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Waveform.default, {
+            src: attemptAudioURL,
+            theme: theme,
+            controls: true
           })
         })]
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: classes.waveform,
-        "aria-labelledby": finalTranscript,
-        children: attemptAudioURL && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Waveform.default, {
-          src: attemptAudioURL,
-          theme: theme,
-          controls: true
-        })
-      })]
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExerciseBottomBar.default, {
       t: t,
       handleSubmit: () => handleContinue(false, currentPhrase),

package/dist/Exercises/Translator/Translator.js

@@ -44,7 +44,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 
 const useStyles = (0, _mui.makeStyles)()(theme => ({
   appBar: {
-    position: "sticky",
+    position: "relative",
     paddingTop: `env(safe-area-inset-top)`,
     paddingRight: `env(safe-area-inset-right)`,
     paddingLeft: `env(safe-area-inset-left)`
@@ -252,6 +252,7 @@ function Translator({
   const {
     classes
   } = useStyles();
+  const scrollRef = (0, _react.useRef)(null);
   const [wordBankTooltipOpen, setWordBankTooltipOpen] = (0, _react.useState)(false);
   const initialVoiceSpeed = topicInfo && topicInfo.voiceSpeed ? topicInfo.voiceSpeed : "";
   const exerciseState = (0, _useExerciseState.default)({
@@ -464,6 +465,14 @@ function Translator({
   (0, _react.useEffect)(() => {
     checkAnswer && checkCompletionAndNotify();
   }, [checkAnswer]);
+  (0, _react.useEffect)(() => {
+    if (scrollRef.current && useWordBank) {
+      scrollRef.current.scroll({
+        top: scrollRef.current.scrollHeight,
+        behavior: "smooth"
+      });
+    }
+  }, [useWordBank]);
   (0, _react.useEffect)(() => {
     if (open && !run && !localStorage.getItem(`translation-exercise-tour-completed`)) {
       setJoyrideState(prevState => ({
@@ -542,6 +551,9 @@ function Translator({
   const goBackToAssignment = () => {
     navigate(`/classrooms/${classroomId}#Assignments`);
   };
+  const noTranslationWords = !translationWords || translationWords.length === 0;
+  const isWordBankMode = useWordBank && isWordBankEnabled;
+  const isSubmitAnswerDisabled = isWordBankMode ? !isWordBankAttemptChanged || noTranslationWords : !translationText && noTranslationWords;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Dialog, {
     fullScreen: true,
     open: open,
@@ -652,9 +664,13 @@ function Translator({
         })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      ref: scrollRef,
       sx: {
+        overflowY: 'auto',
         flexGrow: 1,
-        overflowY: 'auto'
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
         container: true,
@@ -907,38 +923,13 @@ function Translator({
           })]
         })]
       })
-    }), useWordBank && isWordBankEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-      sx: {
-        position: 'sticky',
-        bottom: 0,
-        zIndex: 1100,
-        backgroundColor: theme => theme.palette.background.paper
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExerciseBottomBar.default, {
-        t: t,
-        translationWords: translationWords,
-        handleSubmit: () => handleContinue(false),
-        handleSkip: () => handleContinue(true),
-        isSubmitAnswerAllowed: true,
-        isSubmitAnswerDisabled: !isWordBankAttemptChanged || !translationWords || translationWords.length === 0,
-        useWordBank: useWordBank
-      })
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-      sx: {
-        position: 'sticky',
-        bottom: 0,
-        zIndex: 1100,
-        backgroundColor: theme => theme.palette.background.paper
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExerciseBottomBar.default, {
-        t: t,
-        translationWords: translationWords,
-        handleSubmit: () => handleContinue(false),
-        handleSkip: () => handleContinue(true),
-        isSubmitAnswerAllowed: true,
-        isSubmitAnswerDisabled: !translationText && (!translationWords || translationWords.length === 0),
-        useWordBank: useWordBank
-      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExerciseBottomBar.default, {
+      t: t,
+      translationWords: translationWords,
+      handleSubmit: () => handleContinue(false),
+      handleSkip: () => handleContinue(true),
+      isSubmitAnswerAllowed: true,
+      isSubmitAnswerDisabled: isSubmitAnswerDisabled
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnswerResult.default, {
       t: t,
       open: isCorrectResultOpen,

package/dist/Live/LiveListener/LiveListener.js

@@ -586,8 +586,7 @@ function LiveListener({
       listeningText: listeningText,
       listeningWords: listeningWords,
       setCurrentAnswer: setCurrentAnswer,
-      exercise: exercise,
-      useWordBank: useWordBank
+      exercise: exercise
     })]
   });
 }

package/dist/Live/LiveTranslator/LiveTranslator.js

@@ -708,8 +708,7 @@ function LiveTranslator({
       translationText: translationText,
       translationWords: translationWords,
       setCurrentAnswer: setCurrentAnswer,
-      exercise: exercise,
-      useWordBank: useWordBank
+      exercise: exercise
     })]
   });
 }

package/dist/Misc/ExerciseBottomBar/ExerciseBottomBar.js

@@ -12,10 +12,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useStyles = (0, _mui.makeStyles)()(theme => ({
   footer: {
-    [theme.breakpoints.down("md")]: {
-      padding: theme.spacing(2)
-    },
-    padding: theme.spacing(3),
+    padding: theme.spacing(2),
     borderTop: `2px solid ${theme.palette.grey[300]}`
   }
 }));
@@ -34,26 +31,17 @@ function ExerciseBottomBar({
   setCurrentAnswer,
   translationText,
   translationWords,
-  exercise,
-  useWordBank
+  exercise
 }) {
   const {
     classes
   } = useStyles();
-  const submitButtonRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
     if (isTimeUp) {
       handleSubmit();
       setIsAnswered(true);
     }
   }, [isTimeUp]);
-  (0, _react.useEffect)(() => {
-    if (submitButtonRef.current && useWordBank) {
-      submitButtonRef.current.scrollIntoView({
-        behavior: "smooth"
-      });
-    }
-  }, [useWordBank]);
   const handleAnswerButtonClick = () => {
     if (isLive && isAnswered) {
       setIsAnswered(false);
@@ -85,7 +73,6 @@ function ExerciseBottomBar({
       })
     }), (isLive || isSubmitAnswerAllowed) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        ref: submitButtonRef,
         color: isLive && isAnswered ? "primary" : "secondary",
         variant: isAnswered ? "outlined" : "contained",
         onClick: handleAnswerButtonClick,

package/package.json

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