Add activity preview answer checking for Admin

Author: ji-mmyliu

frontend/src/components/course_authoring/editorComponents/PreviewLearnerModal.tsx

@@ -1,12 +1,15 @@
+import { Replay } from "@mui/icons-material";
 import CloseIcon from "@mui/icons-material/Close";
 import {
   Box,
+  Button,
   Dialog,
   IconButton,
   Stack,
   Typography,
   useTheme,
 } from "@mui/material";
+import { useRef, useState } from "react";
 import {
   Activity,
   isMatchingActivity,
@@ -16,9 +19,12 @@ import {
   isTextInputActivity,
 } from "../../../types/CourseTypes";
 import MatchingViewer from "../../course_viewing/matching/MatchingViewer";
+import WrongAnswerModal from "../../course_viewing/modals/WrongAnswerModal";
 import MultipleChoiceViewer from "../../course_viewing/multiple-choice/MultipleChoiceViewer";
 import TableViewer from "../../course_viewing/table/TableViewer";
-import TextInputViewer from "../../course_viewing/text-input/TextInputViewer";
+import TextInputViewer, {
+  ActivityViewerHandle,
+} from "../../course_viewing/text-input/TextInputViewer";
 
 const PreviewLearnerModal = ({
   activity,
@@ -30,6 +36,9 @@ const PreviewLearnerModal = ({
   handleClose: () => void;
 }) => {
   const theme = useTheme();
+  const activityPreviewRef = useRef<ActivityViewerHandle>(null);
+  const [isCompleted, setIsCompleted] = useState(false);
+  const [showWrongAnswerModal, setShowWrongAnswerModal] = useState(false);
   return (
     <Dialog
       open={open}
@@ -58,45 +67,86 @@ const PreviewLearnerModal = ({
         }}
       >
         <Typography variant="labelMedium">Preview (Learner View)</Typography>
-        <IconButton onClick={handleClose}>
-          <CloseIcon />
-        </IconButton>
+        <Stack direction="row" alignItems="center" gap="8px">
+          <Button
+            onClick={() => {
+              if (isCompleted) {
+                setIsCompleted(false);
+              } else {
+                activityPreviewRef.current?.checkAnswer();
+              }
+            }}
+            sx={{
+              height: "48px",
+              width: "fit-content",
+              paddingX: "16px",
+              paddingY: "10px",
+              gap: "8px",
+              border: "1px solid",
+              borderColor: theme.palette.Neutral[500],
+              borderRadius: "4px",
+              backgroundColor: theme.palette.Learner.Dark.Default,
+              color: "white",
+            }}
+          >
+            <Typography variant="labelLarge">
+              {isCompleted ? (
+                <>
+                  <Replay /> Reset
+                </>
+              ) : (
+                "Check Answer"
+              )}
+            </Typography>
+          </Button>
+          <IconButton onClick={handleClose}>
+            <CloseIcon />
+          </IconButton>
+        </Stack>
       </Stack>
       <Box sx={{ padding: "20px" }}>
         {(isMultipleChoiceActivity(activity) ||
           isMultiSelectActivity(activity)) && (
           <MultipleChoiceViewer
             activity={activity}
-            onWrongAnswer={() => {}}
-            onCorrectAnswer={() => {}}
-            isCompleted={false}
+            onWrongAnswer={() => setShowWrongAnswerModal(true)}
+            onCorrectAnswer={() => setIsCompleted(true)}
+            isCompleted={isCompleted}
+            ref={activityPreviewRef}
           />
         )}
         {isTableActivity(activity) && (
           <TableViewer
             activity={activity}
-            onWrongAnswer={() => {}}
-            onCorrectAnswer={() => {}}
-            isCompleted={false}
+            onWrongAnswer={() => setShowWrongAnswerModal(true)}
+            onCorrectAnswer={() => setIsCompleted(true)}
+            isCompleted={isCompleted}
+            ref={activityPreviewRef}
           />
         )}
         {isMatchingActivity(activity) && (
           <MatchingViewer
             activity={activity}
-            onWrongAnswer={() => {}}
-            onCorrectAnswer={() => {}}
-            isCompleted={false}
+            onWrongAnswer={() => setShowWrongAnswerModal(true)}
+            onCorrectAnswer={() => setIsCompleted(true)}
+            isCompleted={isCompleted}
+            ref={activityPreviewRef}
           />
         )}
         {isTextInputActivity(activity) && (
           <TextInputViewer
             activity={activity}
-            onWrongAnswer={() => {}}
-            onCorrectAnswer={() => {}}
-            isCompleted={false}
+            onWrongAnswer={() => setShowWrongAnswerModal(true)}
+            onCorrectAnswer={() => setIsCompleted(true)}
+            isCompleted={isCompleted}
+            ref={activityPreviewRef}
           />
         )}
       </Box>
+      <WrongAnswerModal
+        open={showWrongAnswerModal}
+        onClose={() => setShowWrongAnswerModal(false)}
+      />
     </Dialog>
   );
 };

frontend/src/components/course_viewing/modals/WrongAnswerModal.tsx

@@ -6,7 +6,7 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
-import React from "react";
+import React, { useMemo } from "react";
 import activityWrongAnswerTitles from "../../../constants/ActivityWrongAnswerTitles";
 
 export type WrongAnswerModalProps = {
@@ -21,17 +21,31 @@ const WrongAnswerModal: React.FC<WrongAnswerModalProps> = ({
   hint,
 }) => {
   const theme = useTheme();
+  const [lastUpdated, setLastUpdated] = React.useState(Date.now());
+  const prevOpen = React.useRef(open);
+
+  React.useEffect(() => {
+    if (!prevOpen.current && open) {
+      setLastUpdated(Date.now());
+    }
+    prevOpen.current = open;
+  }, [open]);
+
+  const title = useMemo(
+    () =>
+      hint
+        ? "Hint"
+        : activityWrongAnswerTitles[
+            Math.floor(Math.random() * activityWrongAnswerTitles.length)
+          ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hint, lastUpdated],
+  );
 
   const handleClose = () => {
     onClose();
   };
 
-  const title = hint
-    ? "Hint"
-    : activityWrongAnswerTitles[
-        Math.floor(Math.random() * activityWrongAnswerTitles.length)
-      ];
-
   return (
     <Dialog
       open={open}
@@ -85,7 +99,7 @@ const WrongAnswerModal: React.FC<WrongAnswerModalProps> = ({
             color: "white",
             alignSelf: "flex-end",
           }}
-          onClick={onClose}
+          onClick={handleClose}
         >
           <Typography variant="labelLarge">Try Again</Typography>
           <RefreshIcon />

frontend/src/components/course_viewing/multiple-choice/MultipleChoiceViewOption.tsx

@@ -27,7 +27,9 @@ export default function MultipleChoiceViewOption({
     iconElement = <Check />;
   } else if (isMultiSelect) {
     if (selected) {
-      iconElement = <CheckBox />;
+      iconElement = (
+        <CheckBox sx={{ color: theme.palette.Learner.Dark.Default }} />
+      );
     } else {
       iconElement = <CheckBoxOutlineBlank />;
     }