@nualang/nualang-ui-components 0.1.1410 → 0.1.1412

package/dist/Assignments/AssignmentCard/AssignmentCard.js

@@ -167,7 +167,7 @@ export default function AssignmentCard({
                 borderRadius: 1,
                 fontWeight: "bold"
               },
-              children: t("NEW")
+              children: t("new")
             })]
           })
         }), /*#__PURE__*/_jsx(Grid, {

package/dist/Cards/FeedbackCard/FeedbackCard.js

@@ -514,7 +514,7 @@ export default function FeedbackCard({
                             setHasBeenEdited(true);
                             setIsSubmitted(false);
                           },
-                          placeholder: t("Write your feedback here")
+                          placeholder: t("write_your_feedback_here")
                         })
                       })]
                     })

package/dist/Dialogs/BotPreview/BotPreview.js

@@ -237,7 +237,7 @@ function BotPreview({
         textAlign: "center",
         mb: 1
       },
-      children: t("Preview")
+      children: t("preview")
     }), bot && bot.picture && /*#__PURE__*/_jsx(Box, {
       sx: {
         textAlign: "center"

package/dist/Dialogs/InviteDialog/InviteDialog.js

@@ -200,11 +200,11 @@ function InviteDialog({
   return /*#__PURE__*/_jsx(ResponsiveDialog, {
     open: open,
     handleClose: handleClose,
-    dialogTitle: t("Invite Students"),
+    dialogTitle: t("invite_students"),
     handleSubmit: isWaysideClassroom ? () => {
       window.open(learningSiteURL, "wayside-window");
     } : null,
-    submitText: isWaysideClassroom ? t("Visit Learning Site") : null,
+    submitText: isWaysideClassroom ? t("visit_learning_site") : null,
     children: isWaysideClassroom ? /*#__PURE__*/_jsx(_Fragment, {
       children: /*#__PURE__*/_jsxs(DialogContentText, {
         sx: {

package/dist/Dialogs/QuickCreateClassroomDialog/QuickCreateClassroomDialog.js

@@ -133,7 +133,7 @@ export default function QuickCreateClassroomDialog({
     return String(Math.floor(Math.random() * 90000) + 10000);
   };
   const handleSubmit = async () => {
-    if (!classroomName.trim() || !classroomDescription.trim()) return;
+    if (!classroomName.trim() || !classroomDescription.trim() || !classroomLearnLang || !classroomForLang) return;
     setIsLoading(true);
     try {
       const createdClassroom = await handleCreate({
@@ -187,7 +187,7 @@ export default function QuickCreateClassroomDialog({
     handleClose: isLoading ? undefined : resetAndClose,
     handleSubmit: handleSubmit,
     dialogTitle: t("create_classroom") || "Create Classroom",
-    isSubmitDisabled: !classroomName.trim() || !classroomDescription.trim() || isLoading,
+    isSubmitDisabled: !classroomName.trim() || !classroomDescription.trim() || !classroomLearnLang || !classroomForLang || isLoading,
     closeText: t("cancel") || "Cancel",
     submitText: t("create") || "Create",
     PaperComponent: ClassroomDialogPaper,

package/dist/Dialogs/QuickCreateCourseDialog/QuickCreateCourseDialog.js

@@ -133,7 +133,7 @@ export default function QuickCreateCourseDialog({
     return String(Math.floor(Math.random() * 90000) + 10000);
   };
   const handleSubmit = async () => {
-    if (!courseName.trim() || !courseDescription.trim() || !difficulty) return;
+    if (!courseName.trim() || !courseDescription.trim() || !difficulty || !courseLearnLang || !courseForLang) return;
     setIsLoading(true);
     try {
       const createdCourse = await handleCreate({
@@ -185,7 +185,7 @@ export default function QuickCreateCourseDialog({
     handleClose: isLoading ? undefined : resetAndClose,
     handleSubmit: handleSubmit,
     dialogTitle: t("create_course") || "Create Course",
-    isSubmitDisabled: !courseName.trim() || !difficulty || isLoading,
+    isSubmitDisabled: !courseName.trim() || !courseDescription.trim() || !difficulty || !courseLearnLang || !courseForLang || isLoading,
     closeText: t("cancel") || "Cancel",
     submitText: t("create") || "Create",
     PaperComponent: CourseDialogPaper,

package/dist/Dialogs/QuickCreateTopicDialog/QuickCreateTopicDialog.js

@@ -142,7 +142,7 @@ export default function QuickCreateTopicDialog({
     setPicture(inheritCourseImage ? coursePicture : "");
   };
   const handleSubmit = async () => {
-    if (!topicName.trim() || !topicDifficulty) return;
+    if (!topicName.trim() || !topicDifficulty || !learnLang || !forLang) return;
     setIsLoading(true);
     try {
       const createdTopic = await handleCreate({
@@ -190,7 +190,7 @@ export default function QuickCreateTopicDialog({
     handleClose: isLoading ? undefined : resetAndClose,
     handleSubmit: handleSubmit,
     dialogTitle: t("create_topic") || "Create Topic",
-    isSubmitDisabled: !topicName.trim() || !topicDifficulty || isLoading,
+    isSubmitDisabled: !topicName.trim() || !topicDifficulty || !learnLang || !forLang || isLoading,
     closeText: t("cancel") || "Cancel",
     submitText: t("create") || "Create",
     PaperComponent: TopicDialogPaper,

package/dist/Editors/Bot/Bot.js

@@ -26,6 +26,7 @@ import Editor from "./Editor/Editor";
 
 // utils
 import { jsonToRivescript, rivescriptToJson } from "../../utils/index";
+import { startJoyrideWhenReady } from "../../utils/joyride";
 import useDebounce from "../../hooks/useDebounce";
 import useRecognition from "../../hooks/useRecognition";
 import { botErrorMessage } from "../../utils/constants";
@@ -217,16 +218,6 @@ function Bot({
     }),
     spotlightPadding: 8,
     target: "#editorSidebar"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("bot_editor_flow_chart")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("bot_editor_flow_chart_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#editorFlowChart"
   }, {
     content: /*#__PURE__*/_jsx("h2", {
       children: t("bot_editor_share")
@@ -260,10 +251,11 @@ function Bot({
   };
   useEffect(() => {
     if (open && !localStorage.getItem("bot-editor-tour-completed")) {
-      setJoyrideState(prevState => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
         ...prevState,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     }
   }, [open]);
   useEffect(() => {
@@ -303,10 +295,11 @@ function Bot({
       }));
     }
     if (tabValue === 0 && !localStorage.getItem(`bot-editor-tour-completed`)) {
-      setJoyrideState(prevState => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
         ...prevState,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     }
   }, [tabValue]);
   const handleChangeTab = (event, newValue) => {
@@ -670,13 +663,14 @@ function Bot({
           }), /*#__PURE__*/_jsx("div", {
             className: "grow-1"
           }), /*#__PURE__*/_jsx(Tooltip, {
-            title: t("Rewatch tutorial"),
+            title: t("rewatch_tutorial"),
             children: /*#__PURE__*/_jsx(IconButton, {
               color: "inherit",
-              onClick: () => setJoyrideState({
-                ...joyrideState,
-                run: true
-              }),
+              onClick: () => startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
+                ...prevState,
+                run: true,
+                steps
+              }))),
               size: "large",
               children: /*#__PURE__*/_jsx(LightbulbIcon, {})
             })
@@ -825,6 +819,7 @@ function Bot({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {

package/dist/Editors/Bot/Editor/Editor.js

@@ -475,7 +475,7 @@ function Editor({
           width: "100%"
         },
         children: [/*#__PURE__*/_jsx(Tooltip, {
-          title: isDisabled ? t("Please select a textfield") : t("formatting_options"),
+          title: isDisabled ? t("please_select_a_textfield") : t("formatting_options"),
           children: /*#__PURE__*/_jsx("span", {
             children: /*#__PURE__*/_jsx(IconButton, {
               color: "inherit",
@@ -489,7 +489,7 @@ function Editor({
             })
           })
         }), /*#__PURE__*/_jsx(Tooltip, {
-          title: isDisabled ? t("Please select a textfield") : t("insert_link"),
+          title: isDisabled ? t("please_select_a_textfield") : t("insert_link"),
           children: /*#__PURE__*/_jsx("span", {
             children: /*#__PURE__*/_jsx(IconButton, {
               color: "inherit",

package/dist/Editors/Roleplay/Roleplay.js

@@ -26,6 +26,7 @@ import useExerciseState from "../../hooks/useExerciseState";
 import useConfirm from "../../hooks/useConfirm";
 import { handleScriptDownload } from "../../hooks/handleScriptDownload";
 import { formatMarkdownNewlines } from "../../utils";
+import { startJoyrideWhenReady } from "../../utils/joyride";
 import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
 import { removeExtraWhiteSpaces } from "../../utils/index";
 import GenerateQuestion from "../../Dialogs/GenerateQuestion/GenerateQuestion";
@@ -388,18 +389,20 @@ function Roleplay({
       }));
     }
     if (tabValue === 0 && !localStorage.getItem(`roleplay-editor-tour-completed`)) {
-      setJoyrideState(prevState => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
         ...prevState,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     }
   }, [tabValue]);
   useEffect(() => {
     if (open && !localStorage.getItem(`roleplay-editor-tour-completed`)) {
-      setJoyrideState(prevState => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
         ...prevState,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     }
   }, [open]);
 
@@ -719,13 +722,14 @@ function Roleplay({
             },
             children: roleplay.roleplayName
           }), /*#__PURE__*/_jsx(Tooltip, {
-            title: t("Rewatch tutorial"),
+            title: t("rewatch_tutorial"),
             children: /*#__PURE__*/_jsx(IconButton, {
               color: "inherit",
-              onClick: () => setJoyrideState({
-                ...joyrideState,
-                run: true
-              }),
+              onClick: () => startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
+                ...prevState,
+                run: true,
+                steps
+              }))),
               size: "large",
               children: /*#__PURE__*/_jsx(LightbulbIcon, {})
             })
@@ -937,6 +941,7 @@ function Roleplay({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {

package/dist/Exercises/Bot/Bot.js

@@ -21,6 +21,7 @@ import useExerciseState from "../../hooks/useExerciseState";
 import VoiceSpeedSelector from "../../Misc/VoiceSpeed/VoiceSpeed";
 import ReportProblem from "../../Misc/ReportProblem/ReportProblem";
 import NualaSignInImage from "../../img/nuala_sign_in.svg";
+import { startJoyrideWhenReady } from "../../utils/joyride";
 import { useTheme } from "@mui/material/styles";
 import config from "../../config";
 import { useNavigate } from "react-router";
@@ -393,10 +394,11 @@ function Bot({
   }, [currentPhrase, bot, isSpeaking]);
   useEffect(() => {
     if (open && !run && !localStorage.getItem(`bot-exercise-tour-completed`)) {
-      setJoyrideState(prevState => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
         ...prevState,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     } else {
       if (open && !joyrideRewatched && !run && bot.studentInstructions && bot.studentInstructions !== "") {
         handleClickOpenInstructions();
@@ -424,15 +426,16 @@ function Bot({
 
   const topBarActions = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Tooltip, {
-      title: t("Rewatch tutorial"),
+      title: t("rewatch_tutorial"),
       children: /*#__PURE__*/_jsx(IconButton, {
         color: "inherit",
         onClick: () => {
           setJoyrideRewatched(true);
-          setJoyrideState({
-            ...joyrideState,
-            run: true
-          });
+          startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
+            ...prevState,
+            run: true,
+            steps
+          })));
         },
         size: "large",
         children: /*#__PURE__*/_jsx(LightbulbIcon, {})
@@ -698,6 +701,7 @@ function Bot({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {

package/dist/Exercises/ListenAndSpeak/ListenAndSpeak.js

@@ -22,12 +22,11 @@ import ExerciseBottomBar from "../../Misc/ExerciseBottomBar/ExerciseBottomBar";
 import useExerciseState from "../../hooks/useExerciseState";
 import useExerciseDocumentTitle from "../../hooks/useExerciseDocumentTitle";
 import useRecognition from "../../hooks/useRecognition";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import VoiceSpeedSelector from "../../Misc/VoiceSpeed/VoiceSpeed";
 import ReportProblem from "../../Misc/ReportProblem/ReportProblem";
-import ChatBubble from "../../Misc/ChatBubble/ChatBubble";
 import WaveFormLite from "../../Misc/WaveFormLite/WaveFormLite";
 import { removeExtraWhiteSpaces, removeAllSymbols } from "../../utils";
+import { startJoyrideWhenReady } from "../../utils/joyride";
 import getVoiceImages from "../../utils/voiceImages";
 import { useNavigate } from "react-router";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -340,16 +339,6 @@ function ListenAndSpeak({
     }),
     placement: "center",
     target: "body"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("pronunciation_exercise_speak")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("listen_and_speak_exercise_speak_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#speakButton"
   }, {
     content: /*#__PURE__*/_jsx("div", {
       children: /*#__PURE__*/_jsx("h2", {
@@ -429,10 +418,11 @@ function ListenAndSpeak({
   }, [isSpeaking, isSocketConnected]);
   useEffect(() => {
     if (open && !localStorage.getItem(`meaning-listen-and-speak-exercise-tour-completed`)) {
-      setJoyrideState(prevState => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
         ...prevState,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     } else if (open && !run && !joyrideRewatched && localStorage.getItem(`meaning-listen-and-speak-exercise-tour-completed`)) {
       handlePronunciationTourFinished();
     }
@@ -524,15 +514,16 @@ function ListenAndSpeak({
             children: t("meaning")
           })
         }), /*#__PURE__*/_jsx(Tooltip, {
-          title: t("Rewatch tutorial"),
+          title: t("rewatch_tutorial"),
           children: /*#__PURE__*/_jsx(IconButton, {
             color: "inherit",
             onClick: () => {
               setJoyrideRewatched(true);
-              setJoyrideState({
-                ...joyrideState,
-                run: true
-              });
+              startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
+                ...prevState,
+                run: true,
+                steps
+              })));
             },
             size: "large",
             children: /*#__PURE__*/_jsx(LightbulbIcon, {})
@@ -950,6 +941,7 @@ function ListenAndSpeak({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {

package/dist/Exercises/Listener/Listener.js

@@ -30,6 +30,7 @@ import { Sortable, SortableGridDndContextWrapper } from "../../utils/dragAndDrop
 
 // utils
 import { capitalize, removeExtraWhiteSpaces } from "../../utils/index";
+import { startJoyrideWhenReady } from "../../utils/joyride";
 import useWordBankFocus from "../../hooks/useWordBankFocus";
 import getVoiceImages from "../../utils/voiceImages";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -379,16 +380,6 @@ function Listener({
     }),
     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", {
@@ -480,10 +471,11 @@ function Listener({
   }, [useWordBank]);
   useEffect(() => {
     if (open && !run && !localStorage.getItem(`listening-exercise-tour-completed`)) {
-      setJoyrideState(prevState => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
         ...prevState,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     } else if (open && !run && !joyrideRewatched && localStorage.getItem(`listening-exercise-tour-completed`)) {
       handleListeningTourFinished();
       setTimeout(() => setWordBankTooltipOpen(true), 1000);
@@ -586,15 +578,16 @@ function Listener({
           },
           children: t("listening")
         }), /*#__PURE__*/_jsx(Tooltip, {
-          title: t("Rewatch tutorial"),
+          title: t("rewatch_tutorial"),
           children: /*#__PURE__*/_jsx(IconButton, {
             color: "inherit",
             onClick: () => {
               setJoyrideRewatched(true);
-              setJoyrideState({
-                ...joyrideState,
-                run: true
-              });
+              startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
+                ...prevState,
+                run: true,
+                steps
+              })));
             },
             size: "large",
             children: /*#__PURE__*/_jsx(LightbulbIcon, {})
@@ -735,6 +728,7 @@ function Listener({
                 marginLeft: 1
               },
               children: learnLang !== "irish" && /*#__PURE__*/_jsx(Box, {
+                id: "speakButton",
                 sx: theme => ({
                   [theme.breakpoints.down("md")]: {
                     minWidth: 185
@@ -886,6 +880,7 @@ function Listener({
               })
             })
           }), isWordBankEnabled && /*#__PURE__*/_jsx(Grid, {
+            id: "useWordBank",
             children: /*#__PURE__*/_jsx(Tooltip, {
               title: t("use_wordbank_if_stuck"),
               enterDelay: 500,
@@ -909,10 +904,7 @@ function Listener({
                     run: false
                   }));
                 },
-                startIcon: /*#__PURE__*/_jsx(Bank, {})
-                // Commented out to fix lint warning - jsx-no-duplicate-props
-                // id="useWordBank"
-                ,
+                startIcon: /*#__PURE__*/_jsx(Bank, {}),
                 children: t("use_word_bank")
               })
             })
@@ -1010,6 +1002,7 @@ function Listener({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {

package/dist/Exercises/Meaning/Meaning.js

@@ -26,6 +26,7 @@ import { useTheme } from "@mui/material/styles";
 import getVoiceImages from "../../utils/voiceImages";
 import { useNavigate } from "react-router";
 import { removeExtraWhiteSpaces, shuffle } from "../../utils/index";
+import { startJoyrideWhenReady } from "../../utils/joyride";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   appBar: {
@@ -335,10 +336,11 @@ function Meaning({
   };
   useEffect(() => {
     if (open && !run && !localStorage.getItem("meaning-exercise-tour-completed")) {
-      setJoyrideState(prev => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prev => ({
         ...prev,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     } else if (open && !run && !joyrideRewatched && localStorage.getItem("meaning-exercise-tour-completed")) {
       handleTranslationTourFinished();
     }
@@ -454,15 +456,16 @@ function Meaning({
           },
           children: t("meaning")
         }), /*#__PURE__*/_jsx(Tooltip, {
-          title: t("Rewatch tutorial"),
+          title: t("rewatch_tutorial"),
           children: /*#__PURE__*/_jsx(IconButton, {
             color: "inherit",
             onClick: () => {
               setJoyrideRewatched(true);
-              setJoyrideState({
-                ...joyrideState,
-                run: true
-              });
+              startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
+                ...prevState,
+                run: true,
+                steps
+              })));
             },
             size: "large",
             children: /*#__PURE__*/_jsx(LightbulbIcon, {})
@@ -787,6 +790,7 @@ function Meaning({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {

package/dist/Exercises/MeaningReadWrite/MeaningReadWriteGame.js

@@ -5,6 +5,7 @@ import { useTheme } from "@mui/material/styles";
 import { makeStyles } from "tss-react/mui";
 import useExerciseState from "../../hooks/useExerciseState";
 import { removeExtraWhiteSpaces } from "../../utils/index";
+import { startJoyrideWhenReady } from "../../utils/joyride";
 import { Grid, Slide, IconButton, Dialog, AppBar, Toolbar, Tooltip, Typography, Box } from "@mui/material";
 import { styled } from "@mui/system";
 import LightbulbIcon from "@mui/icons-material/Lightbulb";
@@ -268,19 +269,12 @@ export default function MeaningReadWrite({
     }),
     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"
-  }, {
+  },
+  // No change_voice_speed or exercise_mute step: this exercise has neither control.
+  // It speaks only through the answer result dialogs, and that path calls the raw
+  // handleSpeak prop rather than the muteSound-aware speak() from useExerciseState,
+  // so a mute button here would not silence anything the learner hears.
+  {
     content: /*#__PURE__*/_jsx("h2", {
       children: t("exercise_restart")
     }),
@@ -298,10 +292,11 @@ export default function MeaningReadWrite({
   } = joyrideState;
   useEffect(() => {
     if (open && !run && !localStorage.getItem("meaning-read-write-exercise-tour-completed")) {
-      setJoyrideState(prev => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prev => ({
         ...prev,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     } else if (open && !run && !joyrideRewatched && localStorage.getItem("meaning-read-write-exercise-tour-completed")) {
       handleTranslationTourFinished();
     }
@@ -429,10 +424,11 @@ export default function MeaningReadWrite({
             color: "inherit",
             onClick: () => {
               setJoyrideRewatched(true);
-              setJoyrideState({
-                ...joyrideState,
-                run: true
-              });
+              startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
+                ...prevState,
+                run: true,
+                steps
+              })));
             },
             size: "large",
             children: /*#__PURE__*/_jsx(LightbulbIcon, {})
@@ -714,6 +710,7 @@ export default function MeaningReadWrite({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {