@nualang/nualang-ui-components 0.1.1400 → 0.2.0

package/dist/Exercises/Meaning/Meaning.js

@@ -1,805 +0,0 @@
-import { useEffect, useState, useRef } from "react";
-import { Joyride, STATUS } from "react-joyride";
-import { Grid, Slide, IconButton, Button, Dialog, AppBar, Toolbar, Tooltip, Typography, Box } from "@mui/material";
-import { styled } from "@mui/system";
-import LightbulbIcon from "@mui/icons-material/Lightbulb";
-import { makeStyles } from "tss-react/mui";
-import CheckIcon from "@mui/icons-material/Check";
-import CloseIcon from "@mui/icons-material/Close";
-import Replay from "@mui/icons-material/Replay";
-import VolumeOff from "@mui/icons-material/VolumeOff";
-import VolumeUp from "@mui/icons-material/VolumeUp";
-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 ChatBubble from "../../Misc/ChatBubble/ChatBubble";
-import WaveFormLite from "../../Misc/WaveFormLite/WaveFormLite";
-import { useTheme } from "@mui/material/styles";
-import getVoiceImages from "../../utils/voiceImages";
-import { useNavigate } from "react-router";
-import { removeExtraWhiteSpaces, shuffle } from "../../utils/index";
-import { jsx as _jsx, jsxs as _jsxs } 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"
-  },
-  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"
-    }
-  },
-  wordButton: {
-    textTransform: "none"
-  },
-  image: {
-    [theme.breakpoints.down("md")]: {
-      maxWidth: "200px",
-      maxHeight: "150px"
-    },
-    maxWidth: "250px",
-    height: "auto",
-    maxHeight: "200px",
-    borderRadius: "20px"
-  }
-}));
-const NualaSpeakingContainer = styled("div")(({
-  theme
-}) => ({
-  height: "100px",
-  minHeight: "80px",
-  minWidth: "80px",
-  borderRadius: "20px",
-  [theme.breakpoints.down("md")]: {
-    height: "80px"
-  }
-}));
-function Transition(props) {
-  return /*#__PURE__*/_jsx(Slide, {
-    direction: "up",
-    ...props
-  });
-}
-function Meaning({
-  t = text => text,
-  exerciseName = "meaning",
-  open,
-  handleClose,
-  phrases = [],
-  remainingQuestions,
-  openSnackbar,
-  handleSpeak,
-  clearQueue,
-  stopAudio,
-  courseId,
-  sectionId,
-  topicId,
-  history,
-  handleComplete,
-  learnLang = "",
-  forLang = "",
-  hiddenWordBankExercises,
-  existingAnswerAttempts,
-  exerciseStartTime,
-  topicInfo = {},
-  handleSaveProgress,
-  handleDeleteProgress,
-  correctSound,
-  incorrectSound,
-  disableShuffle,
-  toggleMuteSound,
-  handleReportProblem,
-  languageInformation,
-  voices,
-  languageTag,
-  courseSettings = {},
-  parentClassroom,
-  isReadWriteModeStudent,
-  classroomId,
-  assignment,
-  phraseListId,
-  isImageHidden = false,
-  speechMarks
-}) {
-  useExerciseDocumentTitle({
-    exerciseTitle: "Meaning",
-    open
-  });
-  const theme = useTheme();
-  const {
-    classes
-  } = useStyles();
-  const scrollRef = useRef(null);
-  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,
-    isWrite: false
-  });
-  const {
-    questions,
-    currentPhrase,
-    muteSound,
-    isSpeaking,
-    answerAttempt,
-    pollyResult,
-    isCorrectResultOpen,
-    isIncorrectResultOpen,
-    isSkipResultOpen,
-    answerAttempts,
-    isCloseModalOpen,
-    isInProgressModalOpen,
-    isCompletionModalOpen,
-    voiceSpeed,
-    isVoiceSpeedMenuOpen,
-    isReportProblemOpen,
-    handleCloseReportProblem,
-    handleOpenReportProblem,
-    handleOpenVoiceSpeedMenu,
-    handleCloseVoiceSpeedMenu,
-    handleChangeVoiceSpeed,
-    closeCloseModal,
-    closeInProgressModal,
-    handleNextQuestion,
-    handleContinue,
-    speak,
-    handleMute,
-    handleRestart,
-    handleRestartExercise,
-    viewReport,
-    handleSaveExerciseProgress,
-    handleCompleteExercise,
-    handleCloseExercise,
-    handleCloseClicked,
-    handleTranslationTourFinished,
-    setIsAssignmentExercise
-  } = exerciseState;
-  const [selectedPhrase, setSelectedPhrase] = useState(null);
-  const [phraseOptions, setPhraseOptions] = useState([]);
-  const [showResult, setShowResult] = useState(false);
-  const [isAnswerCorrect, setIsAnswerCorrect] = useState(false);
-  const [definitionPollyResult, setDefinitionPollyResult] = useState(null);
-  const unattemptedQuestionTotal = questions.filter(q => !q.questionAttempted).length;
-  useEffect(() => {
-    if (questions && questions.length > 0) {
-      const question = questions[0];
-      const correctPhrase = question.phrase;
-      const otherPhrases = phrases.filter(p => p.phrase !== correctPhrase).map(p => p.phrase);
-      shuffle(otherPhrases);
-      const distractors = otherPhrases.slice(0, 4);
-      const options = [correctPhrase, ...distractors].map((text, id) => ({
-        text,
-        id,
-        isCorrect: text === correctPhrase
-      }));
-      shuffle(options);
-      setPhraseOptions(options);
-    }
-  }, [questions, phrases]);
-  useEffect(() => {
-    setSelectedPhrase(null);
-    setShowResult(false);
-    setIsAnswerCorrect(false);
-    setDefinitionPollyResult(null);
-  }, [currentPhrase]);
-  useEffect(() => {
-    if (pollyResult && !selectedPhrase) {
-      setDefinitionPollyResult(pollyResult);
-    }
-  }, [pollyResult]);
-  useEffect(() => {
-    assignment ? setIsAssignmentExercise(true) : setIsAssignmentExercise(false);
-  }, [assignment]);
-  const joyrideSteps = [{
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("meaning_exercise_welcome")
-    }),
-    placement: "center",
-    target: "body"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("meaning_exercise_definition")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("meaning_exercise_definition_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#definitionBox"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("meaning_exercise_options")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("meaning_exercise_options_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#phraseOptions"
-  }, {
-    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"
-  }, {
-    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(prev => ({
-        ...prev,
-        run: false
-      }));
-      localStorage.setItem("meaning-exercise-tour-completed", "true");
-      handleTranslationTourFinished();
-    }
-  };
-  useEffect(() => {
-    if (open && !run && !localStorage.getItem("meaning-exercise-tour-completed")) {
-      setJoyrideState(prev => ({
-        ...prev,
-        run: true
-      }));
-    } else if (open && !run && !joyrideRewatched && localStorage.getItem("meaning-exercise-tour-completed")) {
-      handleTranslationTourFinished();
-    }
-  }, [open, run]);
-  let question, numOfQuestions, image, 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;
-  }
-  const definitionText = (() => {
-    if (!question) return "";
-    if (question.definitions?.length > 0) {
-      const raw = question.definitions[0];
-      return typeof raw === "string" ? raw : "";
-    }
-    if (question.translations?.length > 0) {
-      const raw = question.translations[0];
-      return typeof raw === "string" ? raw : "";
-    }
-    return "";
-  })();
-  const {
-    voice,
-    voiceLanguageCode,
-    voicePitch
-  } = topicInfo;
-  const voiceMap = getVoiceImages(voices || []);
-  const getNualaCelebratingImage = () => {
-    try {
-      const exerciseVoice = voiceMap.get(voice) || {};
-      return exerciseVoice.celebratingImage || null;
-    } catch (error) {
-      console.error("Error retrieving celebrating image:", error);
-      return null;
-    }
-  };
-  const handleKeyDown = event => {
-    if (event.key === "Escape") {
-      handleCloseClicked();
-    }
-  };
-  const handleSpeakPhrase = phraseText => {
-    if (!muteSound && !isReadWriteModeStudent) {
-      speak(phraseText, voice, false, null, voiceLanguageCode, false, voicePitch);
-    }
-  };
-  const handleSelectPhrase = option => {
-    if (showResult) return;
-    setSelectedPhrase(option);
-    handleSpeakPhrase(option.text);
-  };
-  const handleSubmitAnswer = (isSkipped = false) => {
-    if (isSkipped) {
-      handleContinue(true, null);
-      return;
-    }
-    if (!selectedPhrase) return;
-    setShowResult(true);
-    setIsAnswerCorrect(selectedPhrase.isCorrect);
-    handleContinue(false, selectedPhrase);
-  };
-  const navigate = useNavigate();
-  const goBackToAssignment = () => {
-    navigate(`/classrooms/${classroomId}#Assignments`);
-  };
-  const isSubmitDisabled = !selectedPhrase || showResult;
-  useEffect(() => {
-    if (open && definitionText && definitionText !== "" && !isCompletionModalOpen && !isCloseModalOpen && !isInProgressModalOpen && learnLang && learnLang !== "irish" && !isReadWriteModeStudent && !muteSound) {
-      speak(definitionText, voice, false, "#currentPhrase", voiceLanguageCode, false, voicePitch);
-    }
-  }, [currentPhrase, open]);
-  const NualaSpeakingAnimation = (voiceMap.get(voice) || {}).speakingImage || null;
-  return /*#__PURE__*/_jsxs(Dialog, {
-    fullScreen: true,
-    open: open,
-    onClose: handleClose,
-    "aria-labelledby": "meaning-exercise-dialog",
-    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(CloseIcon, {})
-        }), /*#__PURE__*/_jsx(Typography, {
-          variant: "h6",
-          component: "h1",
-          className: classes.flex,
-          id: "meaning-exercise-dialog",
-          sx: {
-            color: "inherit"
-          },
-          children: t("meaning")
-        }), /*#__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: "Meaning"
-        }), /*#__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,
-          exercise: exerciseName,
-          parentClassroom: parentClassroom,
-          openSnackbar: openSnackbar
-        })]
-      }), /*#__PURE__*/_jsx(Toolbar, {
-        variant: "dense",
-        className: classes.mobileAdditionalToolbar,
-        children: /*#__PURE__*/_jsx(ExerciseProgressBar, {
-          classes: {
-            root: classes.progress
-          },
-          numOfCorrectAnswers: numOfCorrectAnswers,
-          numOfQuestions: numOfQuestions,
-          completed: completed,
-          exercise: "Meaning"
-        })
-      })]
-    }), /*#__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("select_the_correct_phrase"),
-            placement: "top",
-            describeChild: "false",
-            children: /*#__PURE__*/_jsx(Typography, {
-              lang: languageTag,
-              variant: "h6",
-              component: "h2",
-              sx: {
-                color: "inherit"
-              },
-              children: t("select_the_correct_phrase", {
-                lng: languageTag
-              })
-            })
-          })
-        }), image && !isImageHidden ? /*#__PURE__*/_jsx(Grid, {
-          children: /*#__PURE__*/_jsx("img", {
-            src: image,
-            alt: "",
-            className: classes.image
-          })
-        }) : null, /*#__PURE__*/_jsx(Grid, {
-          children: /*#__PURE__*/_jsx(Grid, {
-            container: true,
-            spacing: 1,
-            sx: {
-              justifyContent: "center",
-              alignItems: "center"
-            },
-            children: /*#__PURE__*/_jsxs(Box, {
-              sx: {
-                display: "flex",
-                justifyContent: "center",
-                flexDirection: "row",
-                spacing: "5px"
-              },
-              children: [/*#__PURE__*/_jsx(Box, {
-                sx: {
-                  display: "flex",
-                  justifyContent: "center"
-                },
-                children: NualaSpeakingAnimation && /*#__PURE__*/_jsx(NualaSpeakingContainer, {
-                  children: /*#__PURE__*/_jsx(NualaSpeakingAnimation, {
-                    isSpeaking: isSpeaking,
-                    speechMarks: speechMarks
-                  })
-                })
-              }), /*#__PURE__*/_jsxs(Box, {
-                id: "definitionBox",
-                sx: {
-                  display: "grid",
-                  justifyContent: "flex-end",
-                  marginLeft: 1
-                },
-                children: [/*#__PURE__*/_jsx(ChatBubble, {
-                  id: "currentPhrase",
-                  handleSpeak: handleSpeak,
-                  clearQueue: clearQueue,
-                  stopAudio: stopAudio,
-                  learnLang: learnLang,
-                  voice: voice || null,
-                  voicePitch: voicePitch || null,
-                  voiceSpeed: voiceSpeed,
-                  forLang: forLang,
-                  wordList: definitionText ? removeExtraWhiteSpaces(definitionText).split(" ") : [],
-                  disableTranslation: true,
-                  isMessage: false,
-                  muteSound: isReadWriteModeStudent ? true : muteSound,
-                  t: t,
-                  languageTag: languageTag
-                }), learnLang !== "irish" && !isReadWriteModeStudent && /*#__PURE__*/_jsx(Box, {
-                  children: /*#__PURE__*/_jsx(WaveFormLite, {
-                    src: definitionPollyResult ? definitionPollyResult : "",
-                    controls: false,
-                    isSpeaking: isSpeaking,
-                    muteAudio: true,
-                    isCLoseModalOpen: isCloseModalOpen,
-                    handleSpeak: () => {
-                      speak(definitionText, voice, false, "#currentPhrase", voiceLanguageCode, false, voicePitch);
-                    },
-                    clearQueue: clearQueue,
-                    stopAudio: stopAudio,
-                    theme: theme
-                  })
-                })]
-              })]
-            })
-          })
-        }), /*#__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, {
-            id: "phraseOptions",
-            children: /*#__PURE__*/_jsx(Grid, {
-              container: true,
-              spacing: 1,
-              sx: {
-                justifyContent: "center",
-                width: "100%"
-              },
-              children: phraseOptions.map(option => {
-                const isSelected = selectedPhrase && selectedPhrase.id === option.id;
-                const isDisabled = showResult && !option.isCorrect && !isSelected;
-                if (showResult && option.isCorrect) {
-                  return /*#__PURE__*/_jsx(Grid, {
-                    children: /*#__PURE__*/_jsx(Button, {
-                      variant: "contained",
-                      className: classes.wordButton,
-                      color: "secondary",
-                      endIcon: /*#__PURE__*/_jsx(CheckIcon, {}),
-                      "aria-label": `Correct: ${option.text}`,
-                      onClick: () => handleSpeakPhrase(option.text),
-                      lang: languageTag,
-                      children: option.text
-                    })
-                  }, option.id);
-                } else if (showResult && isSelected && !option.isCorrect) {
-                  return /*#__PURE__*/_jsx(Grid, {
-                    children: /*#__PURE__*/_jsx(Button, {
-                      variant: "contained",
-                      className: classes.wordButton,
-                      color: "error",
-                      endIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
-                      "aria-label": `Incorrect: ${option.text}`,
-                      onClick: () => handleSpeakPhrase(option.text),
-                      lang: languageTag,
-                      children: option.text
-                    })
-                  }, option.id);
-                }
-                return /*#__PURE__*/_jsx(Grid, {
-                  children: /*#__PURE__*/_jsx(DefaultButton, {
-                    variant: "contained",
-                    onClick: () => handleSelectPhrase(option),
-                    disabled: isDisabled,
-                    className: classes.wordButton,
-                    "aria-label": `${option.text}${isSelected ? " selected" : ""}`,
-                    lang: languageTag,
-                    sx: isSelected ? {
-                      outline: theme => `3px solid ${theme.palette.primary.main}`,
-                      outlineOffset: "2px"
-                    } : {},
-                    children: option.text
-                  })
-                }, option.id);
-              })
-            })
-          })]
-        })]
-      })
-    }), /*#__PURE__*/_jsx(ExerciseBottomBar, {
-      t: t,
-      handleSubmit: () => handleSubmitAnswer(false),
-      handleSkip: () => handleSubmitAnswer(true),
-      isSubmitAnswerAllowed: true,
-      isSubmitAnswerDisabled: isSubmitDisabled
-    }), /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isCorrectResultOpen,
-      handleNext: handleNextQuestion,
-      ...answerAttempt,
-      result: "correct",
-      languageInformation: languageInformation,
-      nualaCelebratingImage: getNualaCelebratingImage(),
-      exercise: exerciseName
-    }), /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isIncorrectResultOpen,
-      handleNext: handleNextQuestion,
-      ...answerAttempt,
-      result: "incorrect",
-      languageInformation: languageInformation,
-      nualaCelebratingImage: getNualaCelebratingImage(),
-      exercise: exerciseName
-    }), /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isSkipResultOpen,
-      handleNext: handleNextQuestion,
-      ...answerAttempt,
-      result: "skipped",
-      languageInformation: languageInformation,
-      nualaCelebratingImage: getNualaCelebratingImage()
-    }), /*#__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']
-      }
-    })]
-  });
-}
-Meaning.propTypes = {};
-export default Meaning;