@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Exercises/Listener/Listener.js

@@ -1,1023 +0,0 @@
-import { useState, useEffect, forwardRef, useRef } from "react";
-import { Joyride, STATUS } from "react-joyride";
-import { Grid, Slide, IconButton, Button, Dialog, AppBar, Toolbar, Tooltip, Typography, Box } from "@mui/material";
-import LightbulbIcon from "@mui/icons-material/Lightbulb";
-import { makeStyles } from "tss-react/mui";
-import CheckIcon from "@mui/icons-material/Check";
-import Replay from "@mui/icons-material/Replay";
-import VolumeOff from "@mui/icons-material/VolumeOff";
-import VolumeUp from "@mui/icons-material/VolumeUp";
-import Close from "@mui/icons-material/Close";
-import Bank from "@mui/icons-material/AccountBalance";
-import InputHelper from "../../Forms/InputHelper/InputHelper";
-import CloseExerciseMenu from "../../Dialogs/ExerciseMenu/Menus/CloseExercise/CloseExercise";
-import InProgressExerciseMenu from "../../Dialogs/ExerciseMenu/Menus/InProgressExercise/InProgressExercise";
-import CompletedExcercise from "../../Dialogs/ExerciseMenu/Menus/CompletedExcercise/CompletedExcercise";
-import AnswerResult from "../../Misc/AnswerResult/AnswerResult";
-import ExerciseProgressBar from "../../Misc/ExerciseProgressBar/ExerciseProgressBar";
-import ExerciseBottomBar from "../../Misc/ExerciseBottomBar/ExerciseBottomBar";
-import useExerciseState from "../../hooks/useExerciseState";
-import useExerciseDocumentTitle from "../../hooks/useExerciseDocumentTitle";
-import VoiceSpeedSelector from "../../Misc/VoiceSpeed/VoiceSpeed";
-import ReportProblem from "../../Misc/ReportProblem/ReportProblem";
-import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
-import WaveFormLite from "../../Misc/WaveFormLite/WaveFormLite";
-import { useTheme } from "@mui/material/styles";
-import { useNavigate } from "react-router";
-import { arrayMove } from "@dnd-kit/sortable";
-import { Sortable, SortableGridDndContextWrapper } from "../../utils/dragAndDrop/dragAndDrop";
-
-// utils
-import { capitalize, removeExtraWhiteSpaces } from "../../utils/index";
-import useWordBankFocus from "../../hooks/useWordBankFocus";
-import getVoiceImages from "../../utils/voiceImages";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  appBar: {
-    position: "relative",
-    paddingTop: `env(safe-area-inset-top)`,
-    paddingRight: `env(safe-area-inset-right)`,
-    paddingLeft: `env(safe-area-inset-left)`
-  },
-  flex: {
-    [theme.breakpoints.down("md")]: {
-      display: "none"
-    },
-    flex: 1
-  },
-  root: {
-    [theme.breakpoints.down("md")]: {
-      padding: theme.spacing(2)
-    },
-    flexGrow: 1,
-    width: "100%",
-    padding: theme.spacing(4),
-    boxSizing: "border-box" // Add this line to include padding within the specified width
-  },
-  progress: {
-    width: "100%",
-    marginLeft: theme.spacing(2),
-    marginRight: theme.spacing(2)
-  },
-  largeScreenProgressBar: {
-    [theme.breakpoints.down("sm")]: {
-      display: "none"
-    }
-  },
-  mobileAdditionalToolbar: {
-    display: "none",
-    [theme.breakpoints.down("sm")]: {
-      display: "flex"
-    }
-  },
-  iconSmall: {
-    fontSize: 20
-  },
-  image: {
-    [theme.breakpoints.down("md")]: {
-      maxWidth: "200px",
-      maxHeight: "150px"
-    },
-    maxWidth: "250px",
-    height: "auto",
-    maxHeight: "200px",
-    borderRadius: "20px"
-  },
-  listenButton: {
-    marginRight: theme.spacing(1)
-  },
-  wordButton: {
-    textTransform: "none"
-  },
-  footer: {
-    [theme.breakpoints.down("md")]: {
-      padding: theme.spacing(2)
-    },
-    padding: theme.spacing(3),
-    borderTop: `2px solid ${theme.palette.grey[300]}`
-  },
-  wordsContainer: {
-    padding: theme.spacing(),
-    margin: theme.spacing(1, 2, 1, 2),
-    borderRadius: theme.spacing(),
-    borderWidth: "2px",
-    borderColor: theme.palette.primary.main,
-    borderStyle: "solid",
-    textAlign: "center",
-    color: theme.palette.primary.main,
-    display: "flex",
-    flexDirection: "row",
-    width: "100%",
-    minHeight: "10vh"
-  },
-  typography: {
-    subtitle1: {
-      fontSize: "16px"
-    }
-  }
-}));
-function Transition(props) {
-  return /*#__PURE__*/_jsx(Slide, {
-    direction: "up",
-    ...props
-  });
-}
-const WordBankButton = /*#__PURE__*/forwardRef(({
-  word,
-  index,
-  question,
-  checkIsListeningCorrect,
-  currentPhrase,
-  removeExtraWhiteSpaces,
-  listeningWords,
-  setListeningWords,
-  classes,
-  handleSelectInAnswerBox,
-  checkAnswer
-}, ref) => {
-  const phraseWordList = question && question.phrase ? removeExtraWhiteSpaces(question.phrase).split(" ") : [];
-  const key = `${word.text}${word.id}`;
-  const isWordCorrect = phraseWordList[index] && checkIsListeningCorrect(word.text, {
-    phrase: phraseWordList[index],
-    alternativeVersions: currentPhrase.alternativeVersions ? currentPhrase.alternativeVersions.map(altAns => {
-      return altAns ? removeExtraWhiteSpaces(altAns).split(" ")[index] : "";
-    }) : []
-  });
-  const onButtonClick = () => {
-    handleSelectInAnswerBox(word);
-    setListeningWords(listeningWords.filter(w => w.id !== word.id));
-  };
-  if (isWordCorrect && checkAnswer) {
-    return /*#__PURE__*/_jsx(Grid, {
-      children: /*#__PURE__*/_jsx(Button, {
-        variant: "contained",
-        onClick: onButtonClick,
-        className: classes.wordButton,
-        color: "secondary",
-        endIcon: isWordCorrect ? /*#__PURE__*/_jsx(CheckIcon, {}) : null,
-        "aria-label": `Correct word: ${word.text}`,
-        ref: ref,
-        children: word.text
-      })
-    }, key);
-  } else if (!isWordCorrect && checkAnswer) {
-    return /*#__PURE__*/_jsx(Grid, {
-      children: /*#__PURE__*/_jsx(Button, {
-        variant: "contained",
-        onClick: onButtonClick,
-        className: classes.wordButton,
-        color: "error",
-        endIcon: isWordCorrect ? /*#__PURE__*/_jsx(CheckIcon, {}) : /*#__PURE__*/_jsx(Close, {}),
-        "aria-label": `Incorrect word: ${word.text}`,
-        ref: ref,
-        children: word.text
-      })
-    }, key);
-  }
-  return /*#__PURE__*/_jsx(Grid, {
-    children: /*#__PURE__*/_jsx(DefaultButton, {
-      variant: "contained",
-      onClick: onButtonClick,
-      className: classes.wordButton,
-      endIcon: /*#__PURE__*/_jsx(Close, {}),
-      "aria-label": `Word: ${word.text}`,
-      "aria-live": "polite",
-      role: "status",
-      ref: ref,
-      children: word.text
-    })
-  }, key);
-});
-WordBankButton.displayName = "WordBankButton";
-function Listener({
-  t = text => text,
-  exerciseName = "listening",
-  phrases = [],
-  remainingQuestions,
-  open,
-  handleClose,
-  topicInfo = {},
-  handleSpeak,
-  clearQueue,
-  stopAudio,
-  openSnackbar,
-  courseId,
-  sectionId,
-  topicId,
-  handleComplete,
-  learnLang = "",
-  learnLangCharacters,
-  voices = {},
-  existingAnswerAttempts,
-  exerciseStartTime,
-  history,
-  handleSaveProgress,
-  handleDeleteProgress,
-  hiddenWordBankExercises,
-  correctSound,
-  incorrectSound,
-  disableShuffle,
-  toggleMuteSound,
-  handleReportProblem,
-  languageInformation,
-  languageTag,
-  siteLanguage,
-  courseSettings,
-  parentClassroom,
-  isReadWriteModeStudent = false,
-  classroomId,
-  assignment,
-  phraseListId
-}) {
-  useExerciseDocumentTitle({
-    exerciseTitle: "Listening",
-    open
-  });
-  const theme = useTheme();
-  const {
-    classes
-  } = useStyles();
-  const scrollRef = useRef(null);
-  const [wordBankTooltipOpen, setWordBankTooltipOpen] = useState(false);
-  const initialVoiceSpeed = topicInfo && topicInfo.voiceSpeed ? topicInfo.voiceSpeed : "";
-  const exerciseState = useExerciseState({
-    open,
-    handleClose,
-    exerciseName,
-    phrases,
-    topicInfo,
-    initialVoiceSpeed,
-    remainingQuestions,
-    existingAnswerAttempts,
-    exerciseStartTime,
-    handleComplete,
-    handleSaveProgress,
-    handleDeleteProgress,
-    openSnackbar,
-    courseId,
-    sectionId,
-    topicId,
-    history,
-    handleSpeak,
-    clearQueue,
-    stopAudio,
-    learnLang,
-    hiddenWordBankExercises,
-    correctSound,
-    incorrectSound,
-    disableShuffle,
-    toggleMuteSound,
-    isReadWriteModeStudent,
-    classroomId,
-    phraseListId
-  });
-  const {
-    questions,
-    currentPhrase,
-    wordOptions,
-    listeningText,
-    pollyResult,
-    listeningWords,
-    useWordBank,
-    isWordBankHidden,
-    muteSound,
-    isSpeaking,
-    answerAttempt,
-    isCorrectResultOpen,
-    isIncorrectResultOpen,
-    isPartiallyCorrectResultOpen,
-    isSkipResultOpen,
-    answerAttempts,
-    isCloseModalOpen,
-    isInProgressModalOpen,
-    isCompletionModalOpen,
-    voiceSpeed,
-    isVoiceSpeedMenuOpen,
-    isReportProblemOpen,
-    handleCloseReportProblem,
-    handleOpenReportProblem,
-    handleOpenVoiceSpeedMenu,
-    handleCloseVoiceSpeedMenu,
-    handleChangeVoiceSpeed,
-    closeCloseModal,
-    handleInputChange,
-    setListeningWords,
-    handleUseWordBank,
-    checkIsListeningCorrect,
-    checkIsLetterCorrect,
-    closeInProgressModal,
-    handleContinue,
-    handleNextQuestion,
-    speak,
-    handleMute,
-    handleRestart,
-    handleRestartExercise,
-    viewReport,
-    handleSaveExerciseProgress,
-    handleCompleteExercise,
-    handleCloseExercise,
-    handleCloseClicked,
-    handleListeningTourFinished,
-    checkAnswer,
-    setCheckAnswer,
-    isWordBankAttemptChanged,
-    setIsWordBankAttemptChanged,
-    setIsAssignmentExercise
-  } = exerciseState;
-  const {
-    handleSelectInAnswerBox,
-    handleSelectInWordOptions,
-    setAnswerBoxRef,
-    setAnswerOptionRef
-  } = useWordBankFocus({
-    selectedWords: listeningWords,
-    wordOptions,
-    setSelectedWords: setListeningWords
-  });
-  const unattemptedQuestionTotal = questions.filter(q => !q.questionAttempted).length;
-  const {
-    voice,
-    voiceLanguageCode,
-    voicePitch
-  } = topicInfo;
-  const voiceMap = getVoiceImages(voices || []);
-  const getVoiceImage = () => {
-    try {
-      const exerciseVoice = voiceMap.get(voice) || {};
-      return exerciseVoice.speakingImage || null;
-    } catch (error) {
-      console.error("Error retrieving voice image:", error);
-      return null;
-    }
-  };
-  const getNualaCelebratingImage = () => {
-    try {
-      const exerciseVoice = voiceMap.get(voice) || {};
-      return exerciseVoice.celebratingImage || null;
-    } catch (error) {
-      console.error("Error retrieving celebrating image:", error);
-      return null;
-    }
-  };
-  const joyrideSteps = [{
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("listening_exercise_welcome")
-    }),
-    placement: "center",
-    target: "body"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("listening_exercise_speak")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("listening_exercise_speak_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#speakButton"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("listening_exercise_voice_options")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("listening_exercise_voice_options_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#voiceOptions"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("listening_exercise_keyboard_input")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("listening_exercise_keyboard_input_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#listeningTextAnchor"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("listening_exercise_word_bank")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("listening_exercise_word_bank_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#useWordBank"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("exercise_skip")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("exercise_skip_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#skipButton",
-    disableScrollParentFix: false
-  }, {
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("change_voice_speed")
-    }),
-    spotlightPadding: 8,
-    target: "#change-voice-speed"
-  }, {
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("exercise_mute")
-    }),
-    spotlightPadding: 8,
-    target: "#mute"
-  }, {
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("exercise_restart")
-    }),
-    spotlightPadding: 8,
-    target: "#restart"
-  }];
-  const [joyrideState, setJoyrideState] = useState({
-    run: false,
-    steps: joyrideSteps
-  });
-  const [joyrideRewatched, setJoyrideRewatched] = useState(false);
-  const {
-    run,
-    steps
-  } = joyrideState;
-  const handleJoyrideCallback = data => {
-    const {
-      status,
-      action
-    } = data;
-    const finishedStatuses = [STATUS.FINISHED, STATUS.SKIPPED];
-    if (finishedStatuses.includes(status) || action === "close") {
-      setJoyrideState(prevState => ({
-        ...prevState,
-        run: false
-      }));
-      localStorage.setItem(`listening-exercise-tour-completed`, "true");
-      handleListeningTourFinished();
-    }
-  };
-  useEffect(() => {
-    setCheckAnswer(false);
-    setIsWordBankAttemptChanged(true);
-  }, [listeningWords]);
-  useEffect(() => {
-    assignment ? setIsAssignmentExercise(true) : setIsAssignmentExercise(false);
-  }, [assignment]);
-  useEffect(() => {
-    if (scrollRef.current && useWordBank) {
-      scrollRef.current.scroll({
-        top: scrollRef.current.scrollHeight,
-        behavior: "smooth"
-      });
-    }
-  }, [useWordBank]);
-  useEffect(() => {
-    if (open && !run && !localStorage.getItem(`listening-exercise-tour-completed`)) {
-      setJoyrideState(prevState => ({
-        ...prevState,
-        run: true
-      }));
-    } else if (open && !run && !joyrideRewatched && localStorage.getItem(`listening-exercise-tour-completed`)) {
-      handleListeningTourFinished();
-      setTimeout(() => setWordBankTooltipOpen(true), 1000);
-      setTimeout(() => setWordBankTooltipOpen(false), 5000);
-    }
-  }, [open, run]);
-  let question, image, numOfQuestions, numOfCorrectAnswers, completed;
-  if (questions && questions.length > 0) {
-    numOfQuestions = phrases.length;
-    numOfCorrectAnswers = numOfQuestions - questions.length;
-    completed = numOfCorrectAnswers / numOfQuestions * 100;
-    question = questions[0];
-    image = question.image || null;
-  }
-  // Commented out to fix lint warning - no-unused-vars
-  // const combinedVoices =
-  //   question && question.voices && question.voices.length > 0 ?
-  //     [
-  //       {
-  //         label: "Uploaded",
-  //         voiceOptions: question.voices,
-  //       },
-  //       ...Object.values(voices)
-  //     ]
-  //     :
-  //     Object.values(voices);
-
-  const phraseWordList = question && question.phrase ? removeExtraWhiteSpaces(question.phrase).split(" ") : [];
-  const handleKeyDown = event => {
-    if (event.key === "Escape") {
-      handleCloseClicked();
-    }
-  };
-  let isWordBankEnabled = !isWordBankHidden;
-  if (courseSettings?.wordBankEnabled === "enabled") {
-    isWordBankEnabled = true;
-  } else if (courseSettings?.wordBankEnabled === "disabled") {
-    isWordBankEnabled = false;
-  }
-  const handleOnDragEnd = result => {
-    const {
-      active,
-      over
-    } = result;
-    if (!over) {
-      return;
-    }
-    if (active.id !== over.id) {
-      const oldIndex = listeningWords.findIndex(item => item.id === active.id);
-      const newIndex = listeningWords.findIndex(item => item.id === over.id);
-      const updatedListeningWords = arrayMove(listeningWords, oldIndex, newIndex);
-      setListeningWords(updatedListeningWords);
-      return;
-    }
-  };
-  const navigate = useNavigate();
-  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__*/_jsxs(Dialog, {
-    fullScreen: true,
-    open: open,
-    onClose: handleClose,
-    onKeyDown: handleKeyDown,
-    slots: {
-      transition: Transition
-    },
-    slotProps: {
-      paper: {
-        sx: {
-          display: "flex",
-          flexDirection: "column",
-          height: "100%"
-        }
-      }
-    },
-    children: [/*#__PURE__*/_jsxs(AppBar, {
-      className: classes.appBar,
-      children: [/*#__PURE__*/_jsxs(Toolbar, {
-        children: [/*#__PURE__*/_jsx(IconButton, {
-          "data-cy": "close-dialog",
-          edge: "start",
-          color: "inherit",
-          onClick: handleCloseClicked,
-          "aria-label": "Close",
-          size: "large",
-          autoFocus: true,
-          children: /*#__PURE__*/_jsx(Close, {})
-        }), /*#__PURE__*/_jsx(Typography, {
-          variant: "h6",
-          component: "h1",
-          className: classes.flex,
-          id: "listening-exercise-dialog",
-          sx: {
-            color: "inherit"
-          },
-          children: t("listening")
-        }), /*#__PURE__*/_jsx(Tooltip, {
-          title: t("Rewatch tutorial"),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            color: "inherit",
-            onClick: () => {
-              setJoyrideRewatched(true);
-              setJoyrideState({
-                ...joyrideState,
-                run: true
-              });
-            },
-            size: "large",
-            children: /*#__PURE__*/_jsx(LightbulbIcon, {})
-          })
-        }), /*#__PURE__*/_jsx(ExerciseProgressBar, {
-          classes: {
-            root: classes.progress,
-            progressBar: classes.largeScreenProgressBar
-          },
-          numOfCorrectAnswers: numOfCorrectAnswers,
-          numOfQuestions: numOfQuestions,
-          completed: completed,
-          exercise: "Listening"
-        }), /*#__PURE__*/_jsx(VoiceSpeedSelector, {
-          t: t,
-          voiceSpeed: voiceSpeed,
-          isVoiceSpeedMenuOpen: isVoiceSpeedMenuOpen,
-          handleOpenVoiceSpeedMenu: handleOpenVoiceSpeedMenu,
-          handleCloseVoiceSpeedMenu: handleCloseVoiceSpeedMenu,
-          handleChangeVoiceSpeed: handleChangeVoiceSpeed
-        }), /*#__PURE__*/_jsx(Tooltip, {
-          title: muteSound ? t("unmute") : t("mute"),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            color: "inherit",
-            onClick: handleMute,
-            "aria-label": t("mute"),
-            "aria-pressed": muteSound ? "true" : "false",
-            id: "mute",
-            size: "large",
-            children: muteSound ? /*#__PURE__*/_jsx(VolumeOff, {}) : /*#__PURE__*/_jsx(VolumeUp, {})
-          })
-        }), /*#__PURE__*/_jsx(Tooltip, {
-          title: t("replay"),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            color: "inherit",
-            onClick: handleRestart,
-            "aria-label": "Restart",
-            id: "restart",
-            size: "large",
-            children: /*#__PURE__*/_jsx(Replay, {})
-          })
-        }), /*#__PURE__*/_jsx(ReportProblem, {
-          t: t,
-          edge: "end",
-          isReportProblemOpen: isReportProblemOpen,
-          handleOpenReportProblem: handleOpenReportProblem,
-          handleCloseReportProblem: handleCloseReportProblem,
-          handleReportProblem: handleReportProblem,
-          currentPhrase: currentPhrase,
-          parentClassroom: parentClassroom,
-          openSnackbar: openSnackbar,
-          exercise: exerciseName
-        })]
-      }), /*#__PURE__*/_jsx(Toolbar, {
-        variant: "dense",
-        className: classes.mobileAdditionalToolbar,
-        children: /*#__PURE__*/_jsx(ExerciseProgressBar, {
-          classes: {
-            root: classes.progress
-          },
-          numOfCorrectAnswers: numOfCorrectAnswers,
-          numOfQuestions: numOfQuestions,
-          completed: completed,
-          exercise: "Listening"
-        })
-      })]
-    }), /*#__PURE__*/_jsx(Box, {
-      ref: scrollRef,
-      sx: {
-        overflowY: "auto",
-        flexGrow: 1,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center"
-      },
-      children: /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        className: classes.root,
-        direction: "column",
-        spacing: 2,
-        component: "main",
-        sx: {
-          justifyContent: "center",
-          alignItems: "center",
-          maxWidth: "lg",
-          mx: "auto"
-        },
-        children: [/*#__PURE__*/_jsx(Grid, {
-          children: /*#__PURE__*/_jsx(Tooltip, {
-            title: t("listen_to_this_phrase", {
-              language: ["en", "en-US", "ga", "de"].includes(siteLanguage) ? capitalize(t(learnLang.toLowerCase())) : t(learnLang.toLowerCase()).toLowerCase()
-            }),
-            placement: "top",
-            children: /*#__PURE__*/_jsx(Typography, {
-              lang: languageTag,
-              variant: "h6",
-              component: "h2",
-              sx: {
-                color: "inherit"
-              },
-              children: t("listen_to_this_phrase", {
-                language: ["en", "en-US", "ga", "de"].includes(languageTag) ? capitalize(t(learnLang.toLowerCase(), {
-                  lng: languageTag
-                })) : t(learnLang.toLowerCase(), {
-                  lng: languageTag
-                }).toLowerCase(),
-                lng: languageTag
-              })
-            })
-          })
-        }), image ? /*#__PURE__*/_jsx(Grid, {
-          children: /*#__PURE__*/_jsx("img", {
-            src: image,
-            className: classes.image,
-            alt: ""
-          })
-        }) : null, /*#__PURE__*/_jsx(Grid, {
-          children: /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              display: "flex",
-              justifyContent: "center",
-              flexDirection: "row"
-            },
-            children: [/*#__PURE__*/_jsx(Box, {
-              sx: {
-                display: "flex"
-              },
-              children: /*#__PURE__*/_jsx("img", {
-                src: getVoiceImage(),
-                className: classes.nualaSpeaking,
-                alt: ""
-              })
-            }), /*#__PURE__*/_jsx(Box, {
-              sx: {
-                display: "grid",
-                alignItems: "center",
-                marginLeft: 1
-              },
-              children: learnLang !== "irish" && /*#__PURE__*/_jsx(Box, {
-                sx: theme => ({
-                  [theme.breakpoints.down("md")]: {
-                    minWidth: 185
-                  },
-                  mt: theme.spacing(2),
-                  marginLeft: `-${theme.spacing(2)}`,
-                  minWidth: 300
-                }),
-                children: /*#__PURE__*/_jsx(WaveFormLite, {
-                  src: pollyResult ? pollyResult : "",
-                  controls: false,
-                  isSpeaking: isSpeaking,
-                  muteAudio: true,
-                  handleSpeak: () => speak(currentPhrase ? currentPhrase.phrase : "", voice, true, null, voiceLanguageCode, false, voicePitch),
-                  theme: theme
-                })
-              })
-            })]
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          children: /*#__PURE__*/_jsx(Typography, {
-            id: "what-do-you-hear",
-            component: "h3",
-            gutterBottom: true,
-            sx: {
-              color: "inherit"
-            },
-            children: t("what_do_you_hear")
-          })
-        }), useWordBank && isWordBankEnabled ? /*#__PURE__*/_jsxs("div", {
-          role: "application",
-          children: [/*#__PURE__*/_jsx(Grid, {
-            container: true,
-            sx: theme => ({
-              [theme.breakpoints.down("sm")]: {
-                minWidth: 250
-              },
-              minWidth: 400,
-              mx: theme.spacing(2)
-            }),
-            children: /*#__PURE__*/_jsx(SortableGridDndContextWrapper, {
-              items: listeningWords.map(word => word.id),
-              onDragEnd: handleOnDragEnd,
-              orientation: "horizontal",
-              gridClassName: classes.wordsContainer,
-              children: listeningWords.map((word, index) => /*#__PURE__*/_jsx(Sortable, {
-                sortId: word.id,
-                children: /*#__PURE__*/_jsx(Grid, {
-                  tabIndex: -1,
-                  children: /*#__PURE__*/_jsx(WordBankButton, {
-                    word: word,
-                    index: index,
-                    question: question,
-                    checkIsListeningCorrect: checkIsListeningCorrect,
-                    currentPhrase: currentPhrase,
-                    removeExtraWhiteSpaces: removeExtraWhiteSpaces,
-                    listeningWords: listeningWords,
-                    setListeningWords: setListeningWords,
-                    classes: classes,
-                    languageTag: languageTag,
-                    handleSelectInAnswerBox: handleSelectInAnswerBox,
-                    ref: setAnswerBoxRef(index),
-                    checkAnswer: checkAnswer
-                  })
-                })
-              }, word.id.toString()))
-            })
-          }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsxs(Box, {
-            component: "fieldset",
-            sx: {
-              borderWidth: 0
-            },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "subtitle1",
-              gutterBottom: true,
-              component: "legend",
-              sx: {
-                color: "inherit",
-                textAlign: "center",
-                paddingBottom: 1
-              },
-              children: t("select_the_correct_answer")
-            }), /*#__PURE__*/_jsx(Grid, {
-              children: /*#__PURE__*/_jsx(Grid, {
-                container: true,
-                spacing: 1,
-                sx: {
-                  justifyContent: "center",
-                  width: "100%"
-                },
-                children: wordOptions.map((word, index) => {
-                  const isDisabled = listeningWords.findIndex(w => w.id === word.id) > -1 ? true : false;
-                  // const isWordCorrect = phraseWordList.includes(word.text);
-
-                  return /*#__PURE__*/_jsx(Grid, {
-                    children: /*#__PURE__*/_jsx(DefaultButton, {
-                      lang: languageTag,
-                      variant: "contained",
-                      onClick: () => handleSelectInWordOptions(word),
-                      disabled: isDisabled,
-                      className: classes.wordButton,
-                      "aria-label": `${word.text}`,
-                      ref: setAnswerOptionRef(index)
-                      // startIcon={isWordCorrect && isDisabled ? <CheckIcon /> : null}
-                      ,
-                      children: word.text
-                    })
-                  }, `${word.text}${word.id}`);
-                })
-              })
-            })]
-          })]
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Grid, {
-            sx: {
-              width: "100%",
-              maxWidth: `250px !important`
-            },
-            children: /*#__PURE__*/_jsx("div", {
-              id: "listeningTextAnchor",
-              style: {
-                position: "relative"
-              },
-              children: /*#__PURE__*/_jsx(InputHelper, {
-                t: t,
-                value: listeningText,
-                onChange: handleInputChange,
-                onKeyDown: e => {
-                  if (e.key === "Enter") {
-                    handleContinue(false);
-                    e.stopPropagation();
-                  }
-                },
-                id: "listeningText",
-                name: "listeningText",
-                label: t("language_phrase", {
-                  language: capitalize(t(learnLang.toLowerCase()))
-                }),
-                type: "text",
-                role: "textbox",
-                "aria-multiline": "true",
-                "aria-labelledby": "what-do-you-hear",
-                variant: "outlined",
-                fullWidth: true,
-                multiline: true,
-                autoComplete: "off",
-                characters: learnLangCharacters ? learnLangCharacters : null,
-                autoFocus: true
-              })
-            })
-          }), isWordBankEnabled && /*#__PURE__*/_jsx(Grid, {
-            children: /*#__PURE__*/_jsx(Tooltip, {
-              title: t("use_wordbank_if_stuck"),
-              enterDelay: 500,
-              leaveDelay: 200,
-              open: wordBankTooltipOpen,
-              onClose: () => {
-                setWordBankTooltipOpen(false);
-              },
-              onOpen: () => {
-                setWordBankTooltipOpen(true);
-              },
-              children: /*#__PURE__*/_jsx(Button, {
-                id: "wordbank",
-                "data-cy": "use-word-bank-button",
-                color: "primary",
-                size: "small",
-                onClick: () => {
-                  handleUseWordBank();
-                  setJoyrideState(prevState => ({
-                    ...prevState,
-                    run: false
-                  }));
-                },
-                startIcon: /*#__PURE__*/_jsx(Bank, {})
-                // Commented out to fix lint warning - jsx-no-duplicate-props
-                // id="useWordBank"
-                ,
-                children: t("use_word_bank")
-              })
-            })
-          })]
-        })]
-      })
-    }), answerAttempt && answerAttempt.result === "correct" && /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isCorrectResultOpen,
-      handleNext: handleNextQuestion,
-      exercise: exerciseName,
-      phraseWordList: phraseWordList,
-      checkIsListeningCorrect: checkIsListeningCorrect,
-      checkIsLetterCorrect: checkIsLetterCorrect,
-      currentPhrase: currentPhrase,
-      ...answerAttempt,
-      nualaCelebratingImage: getNualaCelebratingImage(),
-      languageInformation: languageInformation
-    }), answerAttempt && answerAttempt.result === "incorrect" && /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isIncorrectResultOpen,
-      handleNext: handleNextQuestion,
-      checkIsListeningCorrect: checkIsListeningCorrect,
-      checkIsLetterCorrect: checkIsLetterCorrect,
-      currentPhrase: currentPhrase,
-      phraseWordList: phraseWordList,
-      exercise: exerciseName,
-      ...answerAttempt,
-      languageInformation: languageInformation
-    }), answerAttempt && answerAttempt.result === "partially_correct" && /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isPartiallyCorrectResultOpen,
-      handleNext: handleNextQuestion,
-      checkIsListeningCorrect: checkIsListeningCorrect,
-      checkIsLetterCorrect: checkIsLetterCorrect,
-      exercise: exerciseName,
-      currentPhrase: currentPhrase,
-      phraseWordList: phraseWordList,
-      ...answerAttempt,
-      languageInformation: languageInformation
-    }), answerAttempt && answerAttempt.result === "skipped" && /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isSkipResultOpen,
-      handleNext: handleNextQuestion,
-      currentPhrase: currentPhrase,
-      ...answerAttempt,
-      exercise: exerciseName,
-      languageInformation: languageInformation,
-      nualaCelebratingImage: getNualaCelebratingImage()
-    }), /*#__PURE__*/_jsx(ExerciseBottomBar, {
-      t: t,
-      listeningWords: listeningWords,
-      handleSubmit: () => handleContinue(false),
-      handleSkip: () => handleContinue(true),
-      isSubmitAnswerAllowed: true,
-      isSubmitAnswerDisabled: isSubmitAnswerDisabled
-    }), /*#__PURE__*/_jsx(CompletedExcercise, {
-      open: isCompletionModalOpen,
-      restartExcercise: handleRestartExercise,
-      onClose: () => isCompletionModalOpen(false),
-      goBack: handleCloseExercise,
-      viewReport: viewReport,
-      fullScreen: true,
-      t: t,
-      inTopic: courseId && sectionId && topicId,
-      goBackToAssignment: goBackToAssignment
-    }), /*#__PURE__*/_jsx(CloseExerciseMenu, {
-      t: t,
-      open: isCloseModalOpen,
-      close: closeCloseModal,
-      saveProgress: () => handleSaveExerciseProgress(questions, answerAttempts, true),
-      finishExercise: handleCompleteExercise,
-      goBack: handleCloseExercise,
-      inTopic: courseId && sectionId && topicId,
-      isFinishExerciseDisabled: unattemptedQuestionTotal > 0,
-      goBackToAssignment: goBackToAssignment
-    }), /*#__PURE__*/_jsx(InProgressExerciseMenu, {
-      t: t,
-      open: isInProgressModalOpen,
-      close: closeInProgressModal,
-      onClose: closeInProgressModal,
-      continueExercise: closeInProgressModal,
-      restartExercise: handleRestartExercise,
-      goBack: handleCloseExercise,
-      inTopic: courseId && sectionId && topicId,
-      goBackToAssignment: goBackToAssignment
-    }), /*#__PURE__*/_jsx(Joyride, {
-      onEvent: handleJoyrideCallback,
-      continuous: true,
-      run: run,
-      scrollToFirstStep: true,
-      steps: steps,
-      locale: {
-        back: t("back"),
-        close: t("close"),
-        last: t("last"),
-        next: t("next"),
-        skip: t("skip")
-      },
-      options: {
-        showProgress: true,
-        scrollOffset: 100,
-        zIndex: 10000,
-        arrowColor: theme.palette.background.paper,
-        backgroundColor: theme.palette.background.paper,
-        primaryColor: theme.palette.primary.main,
-        textColor: theme.palette.text.primary,
-        buttons: ['back', 'close', 'primary', 'skip']
-      }
-    })]
-  });
-}
-Listener.propTypes = {};
-export default Listener;