@nualang/nualang-ui-components 0.1.1230 → 0.1.1232

package/dist/Assignments/AssignmentCard/AssignmentCard.js

@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = AssignmentCard;
 var _react = _interopRequireWildcard(require("react"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
-var _ExpandLess = _interopRequireDefault(require("@mui/icons-material/ExpandLess"));
 var _material = require("@mui/material");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _AssignmentExerciseSelector = _interopRequireDefault(require("../AssignmentExerciseSelector/AssignmentExerciseSelector"));
 var _Queries = require("@nualang/nualang-api-and-queries/Queries");
 var _useConfirm = _interopRequireDefault(require("../../hooks/useConfirm"));
+var _iconsMaterial = require("@mui/icons-material");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -28,19 +27,29 @@ function AssignmentCard({
   getCourses,
   deleteAssignment,
   handleEditAssignment,
-  isExpanded,
-  setExpandedAssignmentId
+  lastClickedExerciseId
 }) {
   const [confirm] = (0, _useConfirm.default)(t);
   const handleDeleteAssignment = async (classroomId, assignmentId) => {
-    const confirmed = await confirm(t('delete_assignment'), t('delete_assignment_confirmation'));
+    const confirmed = await confirm(t("delete_assignment"), t("delete_assignment_confirmation"));
     if (confirmed) {
       await deleteAssignment(classroomId, assignmentId);
     }
   };
-  const calculateDaysUntilDue = dueDate => {
+  const calculateDaysUntilDue = (dueDate, scheduledDate) => {
     const now = new Date();
     const due = new Date(dueDate);
+    const scheduled = new Date(scheduledDate);
+    if (scheduled > now) {
+      const daysUntilScheduled = Math.ceil((scheduled - now) / (1000 * 60 * 60 * 24));
+      if (daysUntilScheduled === 1) {
+        return t("available_tomorrow");
+      } else if (daysUntilScheduled === 0) {
+        return t("available_today");
+      } else {
+        return `${t("available_in")} ${daysUntilScheduled} ${t("days")}`;
+      }
+    }
     const diffTime = due - now;
     const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
     if (diffDays < 0) {
@@ -53,10 +62,6 @@ function AssignmentCard({
       return `${t("due_in")} ${diffDays} ${t("days")}`;
     }
   };
-  const handleIconClick = event => {
-    event.stopPropagation();
-    setExpandedAssignmentId(prevId => prevId === assignment.assignmentId ? null : assignment.assignmentId);
-  };
   const {
     uniqueCourses
   } = (0, _react.useMemo)(() => {
@@ -136,34 +141,32 @@ function AssignmentCard({
               children: `${Math.round(assignment.completed / assignment.assignedStudents.length * 100)}%`
             })]
           })]
-        }), isCreator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
-          item: true,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-            onClick: () => handleEditAssignment(assignment),
-            color: "primary",
-            children: t("edit")
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Button, {
-            color: "primary",
-            onClick: () => {
-              handleDeleteAssignment(assignment.classroomId, assignment.assignmentId);
-            },
-            children: [t("delete"), " "]
-          })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
           item: true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
             variant: "button",
             color: "text.secondary",
-            children: calculateDaysUntilDue(assignment.dueDate)
+            children: calculateDaysUntilDue(assignment.dueDate, assignment.scheduleDate)
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+        }), isCreator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
           item: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
-            onClick: handleIconClick,
-            children: isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {})
-          })
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: t("edit"),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.IconButton, {
+              onClick: () => handleEditAssignment(assignment),
+              children: [" ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Edit, {}), " "]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: t("delete"),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.IconButton, {
+              onClick: () => {
+                handleDeleteAssignment(assignment.classroomId, assignment.assignmentId);
+              },
+              children: [" ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Delete, {}), " "]
+            })
+          })]
         })]
-      }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
         mt: 2,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
           sx: {
@@ -181,7 +184,7 @@ function AssignmentCard({
               children: assignment.instructions
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
               mt: 2,
-              width: "80%",
+              width: isCreator ? "80%" : "100%",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentExerciseSelector.default, {
                 t: t,
                 assignment: assignment,
@@ -191,14 +194,15 @@ function AssignmentCard({
                 getRoleplays: getRoleplays,
                 isCreator: isCreator,
                 viewOnly: true,
-                useCase: isCreator ? "assignment-view" : "assignment-start"
+                useCase: isCreator ? "assignment-view" : "assignment-start",
+                lastClickedExerciseId: lastClickedExerciseId
               })
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
             item: true,
             xs: 3,
             md: 2,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            children: [isCreator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
               display: "flex",
               justifyContent: "space-between",
               alignItems: "center",

package/dist/Assignments/AssignmentCardsList/AssignmentCardsList.js

@@ -27,22 +27,21 @@ const AssignmentCardsList = ({
   handleEditAssignment,
   refreshAssignments
 }) => {
-  const [expandedAssignmentId, setExpandedAssignmentId] = (0, _react.useState)(null);
+  const [lastClickedExerciseId, setLastClickedExerciseId] = (0, _react.useState)(null);
   (0, _react.useEffect)(() => {
-    const storedId = localStorage.getItem("expandedAssignmentId");
-    if (storedId) {
-      setExpandedAssignmentId(JSON.parse(storedId));
+    const stored = localStorage.getItem("lastClickedExercise");
+    if (stored) {
+      try {
+        const parsed = JSON.parse(stored);
+        if (parsed?.courseSectionTopicId) {
+          setLastClickedExerciseId(parsed.courseSectionTopicId);
+        }
+      } catch (e) {
+        console.error("Error parsing lastClickedExercise", e);
+      }
     }
   }, []);
-  (0, _react.useEffect)(() => {
-    if (expandedAssignmentId) {
-      localStorage.setItem("expandedAssignmentId", JSON.stringify(expandedAssignmentId));
-    } else {
-      localStorage.removeItem("expandedAssignmentId");
-    }
-  }, [expandedAssignmentId]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-    mt: 3,
     mb: 1,
     children: assignments.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
@@ -64,14 +63,14 @@ const AssignmentCardsList = ({
           sx: {
             textAlign: "center",
             mt: 2,
-            width: '70%'
+            width: "70%"
           },
           children: t("no_assignments_description")
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
             textAlign: "center",
             mt: 2,
-            width: '70%'
+            width: "70%"
           },
           children: t("assignments_description")
         }), isCreator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
@@ -122,7 +121,11 @@ const AssignmentCardsList = ({
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Refresh.default, {})
           })
         })]
-      }), assignments.map(assignment => /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentCard.default, {
+      }), assignments.filter(assignment => {
+        if (isCreator) return true;
+        if (!assignment.scheduleDate) return true;
+        return new Date(assignment.scheduleDate) <= new Date();
+      }).map(assignment => /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentCard.default, {
         assignment: assignment,
         t: t,
         isCreator: isCreator,
@@ -131,8 +134,7 @@ const AssignmentCardsList = ({
         getRoleplays: getRoleplays,
         deleteAssignment: deleteAssignment,
         handleEditAssignment: handleEditAssignment,
-        isExpanded: expandedAssignmentId === assignment.assignmentId,
-        setExpandedAssignmentId: setExpandedAssignmentId
+        lastClickedExerciseId: lastClickedExerciseId
       }, assignment.assignmentId))]
     })
   });

package/dist/Assignments/AssignmentCourseSelection/AssignmentCourseSelection.js

@@ -28,9 +28,11 @@ function Course({
   assignment,
   handleStartExercise,
   isCreator,
-  viewOnly
+  viewOnly,
+  lastClickedExerciseId
 }) {
-  const [open, setOpen] = (0, _react.useState)(false);
+  const numOfIds = lastClickedExerciseId ? lastClickedExerciseId.split('|') : [];
+  const [open, setOpen] = (0, _react.useState)(lastClickedExerciseId && (numOfIds.length === 4 && lastClickedExerciseId.endsWith(`|${assignment.assignmentId}`) || numOfIds.length === 5 && lastClickedExerciseId.split('|')[3] === assignment.assignmentId));
   const [selectedSectionIds, setSelectedSectionIds] = (0, _react.useState)([]);
   const [filteredSections, setFilteredSections] = (0, _react.useState)([]);
   const sectionsQuery = _Queries.courses.useCourseSections(async (courseId, filters) => {
@@ -127,7 +129,8 @@ function Course({
           assignment: assignment,
           handleStartExercise: handleStartExercise,
           isCreator: isCreator,
-          viewOnly: viewOnly
+          viewOnly: viewOnly,
+          lastClickedExerciseId: lastClickedExerciseId
         })
       })
     })]
@@ -148,6 +151,7 @@ function AssignmentCourseSelection({
   handleStartExercise,
   isCreator,
   viewOnly,
+  lastClickedExerciseId,
   ...otherProps
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -166,7 +170,8 @@ function AssignmentCourseSelection({
       assignment: assignment,
       handleStartExercise: handleStartExercise,
       isCreator: isCreator,
-      viewOnly: viewOnly
+      viewOnly: viewOnly,
+      lastClickedExerciseId: lastClickedExerciseId
     }))
   });
 }

package/dist/Assignments/AssignmentExerciseSelection/AssignmentExerciseSelection.js

@@ -34,7 +34,8 @@ function Exercise({
   handleSelectExercise = null,
   selectedExercises,
   useCase,
-  assignment
+  assignment,
+  lastClickedExerciseId
 }) {
   const [listeningHidden, setListeningHidden] = (0, _react.useState)(false);
   const [translationHidden, setTranslationHidden] = (0, _react.useState)(false);
@@ -49,6 +50,10 @@ function Exercise({
   } = params;
   const [courseId, sectionId, topicId] = courseSectionTopicId.split("|");
   const addSearchParams = () => {
+    const lastClickedExercise = {
+      courseSectionTopicId: `${courseSectionTopicId}|${assignment.assignmentId}`
+    };
+    localStorage.setItem("lastClickedExercise", JSON.stringify(lastClickedExercise));
     const assignmentParam = encodeURIComponent(JSON.stringify(assignment));
     navigate(`/classrooms/${classroomId}/${courseId}/${sectionId}/${topicId}?exercise=${name}&assignment=${assignmentParam}`);
   };
@@ -137,7 +142,8 @@ function Exercise({
           handleSelectExercise: handleSelectExercise,
           selectedExercises: selectedExercises,
           useCase: useCase,
-          assignment: assignment
+          assignment: assignment,
+          lastClickedExerciseId: lastClickedExerciseId
         })
       })
     })]
@@ -161,6 +167,7 @@ function ExerciseList({
   assignment,
   handleStartExercise,
   isCreator,
+  lastClickedExerciseId,
   ...otherProps
 }) {
   const courseSectionTopicId = `${courseId}|${sectionId}|${topicId}`;
@@ -188,6 +195,7 @@ function ExerciseList({
         assignment: assignment,
         handleStartExercise: handleStartExercise,
         isCreator: isCreator,
+        lastClickedExerciseId: lastClickedExerciseId,
         ...otherProps
       }, keyId);
     })
@@ -226,12 +234,23 @@ function Topic({
   assignment,
   handleStartExercise,
   isCreator,
+  lastClickedExerciseId,
   ...otherProps
 }) {
   const theme = (0, _styles.useTheme)();
   const isLargeScreen = (0, _useMediaQuery.default)(theme.breakpoints.up("sm"));
-  const [isExerciseListOpen, setExerciseListOpen] = (0, _react.useState)(false);
+  const topicRef = (0, _react.useRef)(null);
+  const [lasClickedCourseId, lasClickedSectionId, lasClickedTopicId, lastClickedAssignmentId] = lastClickedExerciseId?.split("|") || [];
+  const [isExerciseListOpen, setExerciseListOpen] = (0, _react.useState)(lasClickedTopicId === topicId && lastClickedAssignmentId === assignment.assignmentId);
   const [isWholeTopicSelected, setIsWholeTopicSelected] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (lasClickedTopicId === topicId && topicRef.current) {
+      topicRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+      });
+    }
+  }, []);
   let exercises;
   switch (useCase) {
     case "assignment-select":
@@ -294,7 +313,7 @@ function Topic({
       games = ["roleplay-story", "roleplay-fill-in-the-blanks", "roleplay-act-it-out", "roleplay-act-it-out-listening", "roleplay-act-it-out-speaking", "roleplay-act-it-out-listening-speaking"];
   }
   (0, _react.useEffect)(() => {
-    const exerciseCount = selectedExercises?.filter(exercise => exercise.courseSectionTopicId === `${courseId}|${sectionId}|${topicId}`).length;
+    const exerciseCount = selectedExercises?.filter(exercise => !exercise.roleplayId && exercise.courseSectionTopicId === `${courseId}|${sectionId}|${topicId}`).length;
     const roleplayCount = selectedExercises?.filter(exercise => exercise.roleplayId && roleplays?.some(roleplay => roleplay.roleplayId === exercise.roleplayId)).length;
     const total = roleplays.length * 6 + 3;
     if (exerciseCount + roleplayCount === total) {
@@ -322,7 +341,9 @@ function Topic({
           if (!selectedExercises?.some(e => e.roleplayId === roleplay.roleplayId && e.game === game)) {
             exercisesToAdd = [...exercisesToAdd, {
               roleplayId: roleplay.roleplayId,
-              game
+              game,
+              courseSectionTopicId: `${courseId}|${sectionId}|${topicId}`,
+              roleplayName: roleplay.roleplayName
             }];
           }
         });
@@ -344,6 +365,7 @@ function Topic({
         justifyContent: "space-between",
         onClick: toggleExerciseList,
         "data-cy": "topic-list-item",
+        ref: topicRef,
         disabled: phrases.length === 0 && !hasNonEmptyRoleplay || isExerciseSelected,
         children: [isLargeScreen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
           children: picture ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
@@ -431,6 +453,7 @@ function Topic({
           assignment: assignment,
           handleStartExercise: handleStartExercise,
           isCreator: isCreator,
+          lastClickedExerciseId: lastClickedExerciseId,
           ...otherProps
         })
       })]
@@ -455,6 +478,7 @@ function Section({
   handleStartExercise,
   isCreator,
   viewOnly,
+  lastClickedExerciseId,
   ...otherProps
 }) {
   const root = {
@@ -516,7 +540,8 @@ function Section({
         useCase: useCase,
         assignment: assignment,
         handleStartExercise: handleStartExercise,
-        isCreator: isCreator
+        isCreator: isCreator,
+        lastClickedExerciseId: lastClickedExerciseId
       }, `${sectionId}-${topic.topicId}`)) : topics.map((topic, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Topic, {
         index: i,
         topics: topics,
@@ -537,7 +562,8 @@ function Section({
         useCase: useCase,
         assignment: assignment,
         handleStartExercise: handleStartExercise,
-        isCreator: isCreator
+        isCreator: isCreator,
+        lastClickedExerciseId: lastClickedExerciseId
       }, `${sectionId}-${topic.topicId}`))
     })
   });
@@ -558,6 +584,7 @@ function SectionList({
   handleStartExercise,
   isCreator,
   viewOnly,
+  lastClickedExerciseId,
   ...otherProps
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
@@ -580,6 +607,7 @@ function SectionList({
         handleStartExercise: handleStartExercise,
         isCreator: isCreator,
         viewOnly: viewOnly,
+        lastClickedExerciseId: lastClickedExerciseId,
         ...otherProps
       }, section.sectionId);
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -607,6 +635,7 @@ function AssignmentExerciseSelection({
   assignment,
   handleStartExercise,
   viewOnly,
+  lastClickedExerciseId,
   ...otherProps
 }) {
   if (isLoading) {
@@ -627,6 +656,7 @@ function AssignmentExerciseSelection({
         assignment: assignment,
         handleStartExercise: handleStartExercise,
         viewOnly: viewOnly,
+        lastClickedExerciseId: lastClickedExerciseId,
         ...otherProps
       })
     });
@@ -649,6 +679,7 @@ function AssignmentExerciseSelection({
       useCase: useCase,
       assignment: assignment,
       viewOnly: viewOnly,
+      lastClickedExerciseId: lastClickedExerciseId,
       ...otherProps
     })
   });

package/dist/Assignments/AssignmentExerciseSelector/AssignmentExerciseSelector.js

@@ -19,7 +19,8 @@ function AssignmentExerciseSelector({
   isCreator,
   selectedExercises,
   viewOnly,
-  useCase
+  useCase,
+  lastClickedExerciseId
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Box, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentCourseSelection.default, {
@@ -33,7 +34,8 @@ function AssignmentExerciseSelector({
       isCreator: isCreator,
       selectedExercises: selectedExercises,
       viewOnly: viewOnly,
-      useCase: useCase
+      useCase: useCase,
+      lastClickedExerciseId: lastClickedExerciseId
     })
   });
 }

package/dist/Assignments/AssignmentRoleplaySelection/AssignmentRoleplaySelection.js

@@ -28,7 +28,8 @@ function Roleplay({
   handleSelectExercise = null,
   selectedExercises,
   useCase,
-  assignment
+  assignment,
+  lastClickedExerciseId
 }) {
   const navigate = (0, _reactRouterDom.useNavigate)();
   const params = (0, _reactRouterDom.useParams)();
@@ -36,15 +37,20 @@ function Roleplay({
     classroomId
   } = params;
   const [courseId, sectionId, topicId] = courseSectionTopicId ? courseSectionTopicId.split("|") : "";
+  const [lasClickedCourseId, lasClickedSectionId, lasClickedTopicId, lastClickedAssignmentId, lastClickedRoleplayId] = lastClickedExerciseId?.split("|") || [];
   const addSearchParams = exercise => {
     if (!classroomId || !courseId || !sectionId || !topicId || !roleplay?.roleplayId) {
-      console.error('Missing required parameters for navigation');
+      console.error("Missing required parameters for navigation");
       return;
     }
+    const lastClickedExercise = {
+      courseSectionTopicId: `${courseSectionTopicId}|${assignment.assignmentId}|${roleplay.roleplayId}`
+    };
+    localStorage.setItem("lastClickedExercise", JSON.stringify(lastClickedExercise));
     const assignmentParam = encodeURIComponent(JSON.stringify(assignment));
     navigate(`/classrooms/${classroomId}/${courseId}/${sectionId}/${topicId}/roleplays/${roleplay?.roleplayId}?game=${encodeURIComponent(exercise)}&assignment=${assignmentParam}`);
   };
-  const [open, setOpen] = (0, _react.useState)(false);
+  const [open, setOpen] = (0, _react.useState)(lastClickedRoleplayId === roleplay.roleplayId && lastClickedAssignmentId === assignment.assignmentId);
   const games = ["roleplay-story", "roleplay-fill-in-the-blanks", "roleplay-act-it-out", "roleplay-act-it-out-listening", "roleplay-act-it-out-speaking", "roleplay-act-it-out-listening-speaking"];
   const [isSelectAllChecked, setIsSelectAllChecked] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
@@ -64,7 +70,9 @@ function Roleplay({
         if (!selectedExercises?.some(e => e.roleplayId === roleplay.roleplayId && e.game === game)) {
           gamesToAdd = [...gamesToAdd, {
             roleplayId: roleplay.roleplayId,
-            game
+            game,
+            courseSectionTopicId: roleplay.courseSectionTopicId,
+            roleplayName: roleplay.roleplayName
           }];
         }
       });
@@ -105,7 +113,7 @@ function Roleplay({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
       title: !isRoleplayValid ? t("roleplay_not_valid") : "",
-      placement: "left",
+      placement: "right",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
           onClick: () => setOpen(!open),
@@ -214,7 +222,8 @@ function Roleplay({
         children: [useCase === "assignment-select" && games.map((game, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
           onClick: () => handleSelectExercise([{
             roleplayId: roleplay.roleplayId,
-            game
+            game,
+            courseSectionTopicId: roleplay.courseSectionTopicId
           }]),
           sx: {
             display: "flex",
@@ -271,7 +280,8 @@ function AssignmentRoleplaySelection({
   handleSelectExercise,
   selectedExercises,
   useCase,
-  assignment
+  assignment,
+  lastClickedExerciseId
 }) {
   const [isRoleplaySelected, setIsRoleplaySelected] = (0, _react.useState)(false);
   return roleplays.map((roleplay, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Roleplay, {
@@ -284,7 +294,8 @@ function AssignmentRoleplaySelection({
     handleSelectExercise: handleSelectExercise,
     selectedExercises: selectedExercises,
     useCase: useCase,
-    assignment: assignment
+    assignment: assignment,
+    lastClickedExerciseId: lastClickedExerciseId
   }, index));
 }
 var _default = exports.default = AssignmentRoleplaySelection;

package/dist/Assignments/AssignmentSelectExercise/AssignmentSelectExercise.js

@@ -29,10 +29,10 @@ function AssignmentSelectExercise({
     setSelectedExercises(prevSelectedExercises => {
       let updatedExercises = [...prevSelectedExercises];
       exercises.forEach(exercise => {
-        if (exercise.courseSectionTopicId && updatedExercises.some(e => e.courseSectionTopicId === exercise.courseSectionTopicId && e.name === exercise.name)) {
+        if (exercise.courseSectionTopicId && !exercise.roleplayId && updatedExercises.some(e => e.courseSectionTopicId === exercise.courseSectionTopicId && e.name === exercise.name)) {
           updatedExercises = updatedExercises.filter(e => e.courseSectionTopicId !== exercise.courseSectionTopicId || e.name !== exercise.name);
         } else if (exercise.roleplayId && updatedExercises.some(e => e.roleplayId === exercise.roleplayId && e.game === exercise.game)) {
-          updatedExercises = updatedExercises.filter(e => !!e.courseSectionTopicId || e.roleplayId !== exercise.roleplayId || e.game !== exercise.game);
+          updatedExercises = updatedExercises.filter(e => !!e.courseSectionTopicId && !e.roleplayId || e.roleplayId !== exercise.roleplayId || e.game !== exercise.game);
         } else {
           updatedExercises.push(exercise);
         }

package/dist/Assignments/CreateAssignmentDialog/CreateAssignmentDialog.js

@@ -336,17 +336,17 @@ function CreateAssignmentDialog({
         })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-      sx: {
+      sx: theme => ({
         position: "fixed",
         bottom: 0,
         width: "100%",
-        backgroundColor: "white",
-        boxShadow: "0 -2px 5px rgba(0,0,0,0.1)",
+        backgroundColor: theme.palette.background.paper,
+        boxShadow: theme.shadows[4],
         p: 2,
         textAlign: "center",
         display: "flex",
         justifyContent: "flex-end"
-      },
+      }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
         color: "primary",
         sx: {
@@ -407,7 +407,7 @@ function CreateAssignmentDialog({
             color: "primary",
             fullWidth: true,
             onClick: () => {
-              handleCreateAssignment;
+              handleCreateAssignment();
               handleMenuClose();
             },
             children: t("schedule_assignment")

package/dist/Cards/SubscriptionPlan/SubscriptionPlan.js

@@ -234,7 +234,7 @@ function SubscriptionPlan({
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardContent, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PlanTitle, {
           variant: "h6",
-          children: displayPlan.title
+          children: t(displayPlan.title)
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(PlanPricing, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PlanPricingTotal, {
             variant: "h3",
@@ -251,12 +251,12 @@ function SubscriptionPlan({
               title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMarkdown.default, {
                   className: classes.planFeaturesListItemTooltipContent,
-                  children: displayPlan.footnote
+                  children: t(displayPlan.footnote)
                 })
               }),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Badge, {
                 component: "div",
-                children: displayPlan.badge
+                children: t(displayPlan.badge)
               })
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {}), priceInfo && priceInfo.interval && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
               variant: "subtitle1",
@@ -265,7 +265,7 @@ function SubscriptionPlan({
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PlanSubtitle, {
           variant: "subtitle1",
-          children: displayPlan.subtitle
+          children: t(displayPlan.subtitle)
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PlanFeaturesList, {
           children: (displayPlan.benefits || []).map((feature, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(PlanFeaturesListItem, {
             children: [feature.supported ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckCircle.default, {
@@ -282,12 +282,12 @@ function SubscriptionPlan({
               title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMarkdown.default, {
                   className: classes.planFeaturesListItemTooltipContent,
-                  children: feature.description
+                  children: t(feature.description)
                 })
               }),
               children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(PlanFeaturesListItemLabel, {
                 variant: "subtitle2",
-                children: [feature.label, /*#__PURE__*/(0, _jsxRuntime.jsx)(_HelpOutline.default, {
+                children: [t(feature.label), /*#__PURE__*/(0, _jsxRuntime.jsx)(_HelpOutline.default, {
                   fontSize: "small",
                   sx: {
                     ml: 0.5,
@@ -297,7 +297,7 @@ function SubscriptionPlan({
               })
             }), !feature.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(PlanFeaturesListItemLabel, {
               variant: "subtitle2",
-              children: feature.label
+              children: t(feature.label)
             })]
           }, `${displayPlan.title}-benefits-${index}`))
         }), plan.button && /*#__PURE__*/(0, _jsxRuntime.jsx)(PlanButton, {
@@ -306,7 +306,7 @@ function SubscriptionPlan({
           color: plan.button.buttonColor || "primary",
           onClick: () => plan.button.onClick(),
           bgPrimary: plan.bgPrimary,
-          children: plan.button.buttonText
+          children: t(plan.button.buttonText)
         }), displayPlan && billingPeriod && currency && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
           mt: 2,
           children: [plan.planVersions && displayPlan.subButton && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -322,7 +322,7 @@ function SubscriptionPlan({
               "aria-controls": open ? "demo-positioned-menu" : undefined,
               "aria-haspopup": "true",
               "aria-expanded": open ? "true" : "false",
-              children: plan.subButton.buttonText
+              children: t(plan.subButton.buttonText)
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
               alignItems: "center",
               children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Menu, {
@@ -350,7 +350,7 @@ function SubscriptionPlan({
                     sx: {
                       margin: 2
                     },
-                    children: [getPriceList(i), " ", currentPlan.title, " - Up to", " ", currentPlan.students, " Students"]
+                    children: [getPriceList(i), " ", t(currentPlan.title), " - Up to", " ", t(currentPlan.students), " Students"]
                   })
                 })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
                   "aria-label": "close",
@@ -378,11 +378,11 @@ function SubscriptionPlan({
             disabled: buyNowDisabled,
             onClick: () => displayPlan.buyButton.onClick(displayPlan, currency, billingPeriod),
             bgPrimary: displayPlan.bgPrimary,
-            children: displayPlan.buyButton.buttonText
+            children: t(displayPlan.buyButton.buttonText)
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMarkdown.default, {
           className: classes.planFootnote,
-          children: displayPlan.footnote
+          children: t(displayPlan.footnote)
         })]
       })
     }), displayPlan && displayPlan.nuala && /*#__PURE__*/(0, _jsxRuntime.jsx)(Nuala, {