@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Exercises/MeaningReadWrite/MeaningReadWriteGame.js

@@ -1,725 +0,0 @@
-import { useRef, useState, useEffect } from "react";
-import { Joyride, STATUS } from "react-joyride";
-import useExerciseDocumentTitle from "../../hooks/useExerciseDocumentTitle";
-import { useTheme } from "@mui/material/styles";
-import { makeStyles } from "tss-react/mui";
-import useExerciseState from "../../hooks/useExerciseState";
-import { removeExtraWhiteSpaces } from "../../utils/index";
-import { Grid, Slide, IconButton, Dialog, AppBar, Toolbar, Tooltip, Typography, Box } from "@mui/material";
-import LightbulbIcon from "@mui/icons-material/Lightbulb";
-import CloseIcon from "@mui/icons-material/Close";
-import Replay from "@mui/icons-material/Replay";
-import ReportProblem from "../../Misc/ReportProblem/ReportProblem";
-import ExerciseProgressBar from "../../Misc/ExerciseProgressBar/ExerciseProgressBar";
-import { useNavigate } from "react-router";
-import getVoiceImages from "../../utils/voiceImages";
-import ChatBubble from "../../Misc/ChatBubble/ChatBubble";
-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 ExerciseBottomBar from "../../Misc/ExerciseBottomBar/ExerciseBottomBar";
-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"
-    }
-  },
-  image: {
-    [theme.breakpoints.down("md")]: {
-      maxWidth: "200px",
-      maxHeight: "150px"
-    },
-    maxWidth: "250px",
-    height: "auto",
-    maxHeight: "200px",
-    borderRadius: "20px"
-  },
-  nualaSpeaking: {
-    [theme.breakpoints.down("md")]: {
-      height: "80px"
-    },
-    height: "100px",
-    minHeight: "80px",
-    minWidth: "80px",
-    borderRadius: "20px"
-  },
-  srOnly: {
-    position: "absolute",
-    width: "1px",
-    height: "1px",
-    padding: 0,
-    margin: "-1px",
-    overflow: "hidden",
-    clip: "rect(0, 0, 0, 0)",
-    whiteSpace: "nowrap",
-    border: 0
-  }
-}));
-function Transition(props) {
-  return /*#__PURE__*/_jsx(Slide, {
-    direction: "up",
-    ...props
-  });
-}
-export default function MeaningReadWrite({
-  t = text => text,
-  exerciseName = "meaning-read-and-write",
-  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,
-  forLangCharacters,
-  isImageHidden = false
-}) {
-  useExerciseDocumentTitle({
-    exerciseTitle: "Read & Write",
-    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: true
-  });
-  const {
-    questions,
-    currentPhrase,
-    muteSound,
-    answerAttempt,
-    isCorrectResultOpen,
-    isIncorrectResultOpen,
-    isSkipResultOpen,
-    answerAttempts,
-    isCloseModalOpen,
-    isInProgressModalOpen,
-    isCompletionModalOpen,
-    voiceSpeed,
-    isVoiceSpeedMenuOpen,
-    isReportProblemOpen,
-    handleCloseReportProblem,
-    handleOpenReportProblem,
-    handleOpenVoiceSpeedMenu,
-    handleCloseVoiceSpeedMenu,
-    handleChangeVoiceSpeed,
-    closeCloseModal,
-    closeInProgressModal,
-    handleNextQuestion,
-    handleContinue,
-    handleMute,
-    handleRestart,
-    handleRestartExercise,
-    viewReport,
-    handleSaveExerciseProgress,
-    handleCompleteExercise,
-    handleCloseExercise,
-    handleCloseClicked,
-    handleTranslationTourFinished,
-    setIsAssignmentExercise,
-    readWriteText,
-    handleInputChange
-  } = exerciseState;
-  const unattemptedQuestionTotal = questions.filter(q => !q.questionAttempted).length;
-  useEffect(() => {
-    assignment ? setIsAssignmentExercise(true) : setIsAssignmentExercise(false);
-  }, [assignment]);
-  const joyrideSteps = [{
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("read_write_exercise_welcome")
-    }),
-    placement: "center",
-    target: "body"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("read_write_exercise_definition")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("read_write_exercise_definition_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#definitionBox"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("read_write_exercise_options")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("read_write_exercise_options_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#translationTextAnchor"
-  }, {
-    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;
-  useEffect(() => {
-    if (open && !run && !localStorage.getItem("meaning-read-write-exercise-tour-completed")) {
-      setJoyrideState(prev => ({
-        ...prev,
-        run: true
-      }));
-    } else if (open && !run && !joyrideRewatched && localStorage.getItem("meaning-read-write-exercise-tour-completed")) {
-      handleTranslationTourFinished();
-    }
-  }, [open, run]);
-  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-read-write-exercise-tour-completed", "true");
-      handleTranslationTourFinished();
-    }
-  };
-  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,
-    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 handleKeyDown = event => {
-    if (event.key === "Escape") {
-      handleCloseClicked();
-    }
-  };
-  const handleSubmitAnswer = (isSkipped = false) => {
-    if (isSkipped) {
-      handleContinue(true, null);
-      return;
-    }
-    if (!readWriteText?.trim()) return;
-    handleContinue(false);
-  };
-  const navigate = useNavigate();
-  const goBackToAssignment = () => {
-    navigate(`/classrooms/${classroomId}#Assignments`);
-  };
-  const isSubmitDisabled = !readWriteText?.trim();
-  const handleSpeakCurrentPhrase = () => {
-    if (!currentPhrase?.phrase) return;
-    handleSpeak({
-      text: currentPhrase.phrase,
-      learnLanguage: learnLang,
-      voiceName: voice || null,
-      voiceSpeed,
-      pitch: voicePitch || null
-    });
-  };
-  return /*#__PURE__*/_jsxs(Dialog, {
-    fullScreen: true,
-    open: open,
-    onClose: handleClose,
-    "aria-labelledby": "read-write-exercise-dialog",
-    TransitionComponent: Transition,
-    PaperProps: {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100%"
-      }
-    },
-    onKeyDown: handleKeyDown,
-    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(Tooltip, {
-          title: t("read_write"),
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "h6",
-            component: "h1",
-            color: "inherit",
-            className: classes.flex,
-            id: "read-write-exercise-dialog",
-            sx: {
-              whiteSpace: "nowrap"
-            },
-            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(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",
-        justifyContent: "center",
-        alignItems: "center",
-        spacing: 2,
-        sx: {
-          maxWidth: "lg",
-          mx: "auto"
-        },
-        component: "main",
-        children: [/*#__PURE__*/_jsx(Grid, {
-          children: /*#__PURE__*/_jsx(Tooltip, {
-            title: t("read_the_definition"),
-            placement: "top",
-            describeChild: "false",
-            children: /*#__PURE__*/_jsx(Typography, {
-              lang: languageTag,
-              variant: "h6",
-              component: "h2",
-              color: "inherit",
-              children: t("read_the_definition", {
-                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,
-            justifyContent: "center",
-            alignItems: "center",
-            children: /*#__PURE__*/_jsxs(Box, {
-              sx: {
-                display: "flex",
-                justifyContent: "center",
-                flexDirection: "row",
-                alignItems: "flex-start",
-                spacing: "5px"
-              },
-              children: [/*#__PURE__*/_jsx(Box, {
-                sx: {
-                  display: "flex",
-                  justifyContent: "center"
-                },
-                children: /*#__PURE__*/_jsx("img", {
-                  src: getVoiceImage(),
-                  className: classes.nualaSpeaking,
-                  alt: ""
-                })
-              }), /*#__PURE__*/_jsx(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: true,
-                  t: t,
-                  languageTag: languageTag
-                })
-              })]
-            })
-          })
-        }), /*#__PURE__*/_jsxs(Box, {
-          component: "fieldset",
-          sx: {
-            borderWidth: 0
-          },
-          children: [/*#__PURE__*/_jsx(Typography, {
-            variant: "subtitle1",
-            color: "inherit",
-            gutterBottom: true,
-            component: "legend",
-            sx: {
-              textAlign: "center",
-              paddingBottom: 1
-            },
-            children: t("type_the_correct_phrase")
-          }), /*#__PURE__*/_jsx(Grid, {
-            sx: {
-              width: "100%",
-              maxWidth: `250px !important`
-            },
-            children: /*#__PURE__*/_jsxs("div", {
-              id: "translationTextAnchor",
-              style: {
-                position: "relative"
-              },
-              children: [/*#__PURE__*/_jsx("span", {
-                className: classes.srOnly,
-                children: readWriteText
-              }), /*#__PURE__*/_jsx(InputHelper, {
-                t: t,
-                value: readWriteText,
-                onChange: handleInputChange,
-                onKeyDown: e => {
-                  if (e.key === "Enter") {
-                    handleContinue(false);
-                    e.stopPropagation();
-                  }
-                },
-                id: "readWriteText",
-                name: "readWriteText",
-                "aria-label": "phrase",
-                "data-cy": "phrase",
-                label: t("phrase"),
-                type: "text",
-                role: "textbox",
-                "aria-multiline": "true",
-                "aria-autocomplete": "none",
-                variant: "outlined",
-                multiline: true,
-                fullWidth: true,
-                autoComplete: "off",
-                characters: forLangCharacters ? forLangCharacters : null,
-                autoFocus: true
-              })]
-            })
-          })]
-        })]
-      })
-    }), /*#__PURE__*/_jsx(ExerciseBottomBar, {
-      t: t,
-      handleSubmit: () => handleSubmitAnswer(false),
-      handleSkip: () => handleContinue(true),
-      isSubmitAnswerAllowed: true,
-      isSubmitAnswerDisabled: isSubmitDisabled
-    }), /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isCorrectResultOpen,
-      handleNext: handleNextQuestion,
-      ...answerAttempt,
-      result: "correct",
-      languageInformation: languageInformation,
-      nualaCelebratingImage: getNualaCelebratingImage(),
-      exercise: exerciseName,
-      handleSpeak: handleSpeakCurrentPhrase,
-      definitionsText: definitionText
-    }), /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isIncorrectResultOpen,
-      handleNext: handleNextQuestion,
-      ...answerAttempt,
-      result: "incorrect",
-      languageInformation: languageInformation,
-      nualaCelebratingImage: getNualaCelebratingImage(),
-      exercise: exerciseName,
-      handleSpeak: handleSpeakCurrentPhrase,
-      definitionsText: definitionText
-    }), /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isSkipResultOpen,
-      handleNext: handleNextQuestion,
-      ...answerAttempt,
-      result: "skipped",
-      languageInformation: languageInformation,
-      nualaCelebratingImage: getNualaCelebratingImage(),
-      exercise: exerciseName,
-      handleSpeak: handleSpeakCurrentPhrase,
-      definitionsText: definitionText
-    }), /*#__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"]
-      }
-    })]
-  });
-}