Fix feedback slides indexing and fetch existing

Author: ji-mmyliu

backend/models/activity.mgmodel.ts

@@ -67,6 +67,7 @@ export interface TextInputActivity extends Activity {
   placeholder?: string;
   maxLength?: number;
   validation?: TextInputValidation;
+  units?: string;
 }
 
 const options2 = {
@@ -286,6 +287,10 @@ const TextInputActivitySchema = new Schema({
       message: "maxLength must be a positive number",
     },
   },
+  units: {
+    type: String,
+    required: false,
+  },
   validation: {
     type: {
       mode: {

backend/rest/feedbackRoutes.ts

@@ -24,6 +24,32 @@ feedbackRouter.get(
   },
 );
 
+/* 
+Check if a learner has already submitted feedback for a module
+- requires moduleId and learnerId in query params
+- Ex. /feedbacks/check?moduleId=123&learnerId=456
+*/
+feedbackRouter.get(
+  "/check",
+  isAuthorizedByRole(new Set(["Learner"])),
+  async (req, res) => {
+    try {
+      const { moduleId, learnerId } = req.query;
+      if (!moduleId || !learnerId) {
+        res.status(400).send("moduleId and learnerId are required");
+        return;
+      }
+      const hasFeedback = await feedbackService.hasFeedback(
+        learnerId as string,
+        moduleId as string,
+      );
+      res.status(200).json({ hasFeedback });
+    } catch (error) {
+      res.status(500).send(getErrorMessage(error));
+    }
+  },
+);
+
 /* 
 Get a Feedback by its ID 
 - requires feedbackId in request params 

backend/services/implementations/activityService.ts

@@ -100,6 +100,14 @@ class ActivityService {
           ],
           rows: 3,
         };
+      } else if (questionType === QuestionType.TextInput) {
+        activityData = {
+          ...baseActivity,
+          validation: {
+            mode: "short_answer",
+            answers: [],
+          },
+        };
       } else {
         activityData = baseActivity;
       }

backend/services/implementations/feedbackService.ts

@@ -88,5 +88,23 @@ class FeedbackService implements IFeedbackService {
       throw error;
     }
   }
+
+  async hasFeedback(
+    learnerId: string,
+    moduleId: string,
+  ): Promise<boolean> {
+    try {
+      const feedback = await MgFeedback.findOne({
+        learnerId,
+        moduleId,
+      });
+      return !!feedback;
+    } catch (error) {
+      Logger.error(
+        `Error checking if feedback exists: ${getErrorMessage(error)}`,
+      );
+      throw error;
+    }
+  }
 }
 export default FeedbackService;

backend/services/interfaces/feedbackService.ts

@@ -22,6 +22,15 @@ interface IFeedbackService {
    * @throws error if feedback retrieval fails
    */
   getAllFeedback(): Promise<FeedbackDTO[]>;
+
+  /**
+   * Check if a learner has already submitted feedback for a module
+   * @param learnerId learner's id
+   * @param moduleId module's id
+   * @returns true if feedback exists, false otherwise
+   * @throws Error if check fails
+   */
+  hasFeedback(learnerId: string, moduleId: string): Promise<boolean>;
 }
 
 export default IFeedbackService;

frontend/src/APIClients/ActivityAPIClient.ts

@@ -130,10 +130,32 @@ const uploadImage = async (
   }
 };
 
+const hasFeedback = async (
+  learnerId: string,
+  moduleId: string,
+): Promise<boolean> => {
+  const bearerToken = `Bearer ${getLocalStorageObjProperty(
+    AUTHENTICATED_USER_KEY,
+    "accessToken",
+  )}`;
+  try {
+    const { data } = await baseAPIClient.get(
+      `/feedbacks/check?moduleId=${moduleId}&learnerId=${learnerId}`,
+      {
+        headers: { Authorization: bearerToken },
+      },
+    );
+    return data.hasFeedback;
+  } catch (error) {
+    return false;
+  }
+};
+
 export default {
   createActivity,
   updateActivity,
   updateActivityMainPicture,
   sendFeedback,
+  hasFeedback,
   uploadImage,
 };

frontend/src/APIClients/FeedbackAPIClient.ts

@@ -14,4 +14,21 @@ const fetchAllFeedback = async (): Promise<Array<FeedbackPopulated>> => {
   return data;
 };
 
-export default { fetchAllFeedback };
+const hasFeedback = async (
+  learnerId: string,
+  moduleId: string,
+): Promise<boolean> => {
+  const bearerToken = `Bearer ${getLocalStorageObjProperty(
+    AUTHENTICATED_USER_KEY,
+    "accessToken",
+  )}`;
+  const { data } = await baseAPIClient.get(
+    `/feedbacks/check?moduleId=${moduleId}&learnerId=${learnerId}`,
+    {
+      headers: { Authorization: bearerToken },
+    },
+  );
+  return data.hasFeedback;
+};
+
+export default { fetchAllFeedback, hasFeedback };

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

@@ -13,10 +13,12 @@ import {
   isMultipleChoiceActivity,
   isMultiSelectActivity,
   isTableActivity,
+  isTextInputActivity,
 } from "../../../types/CourseTypes";
 import MatchingViewer from "../../course_viewing/matching/MatchingViewer";
 import MultipleChoiceViewer from "../../course_viewing/multiple-choice/MultipleChoiceViewer";
 import TableViewer from "../../course_viewing/table/TableViewer";
+import TextInputViewer from "../../course_viewing/text-input/TextInputViewer";
 
 const PreviewLearnerModal = ({
   activity,
@@ -86,6 +88,14 @@ const PreviewLearnerModal = ({
             isCompleted={false}
           />
         )}
+        {isTextInputActivity(activity) && (
+          <TextInputViewer
+            activity={activity}
+            onWrongAnswer={() => {}}
+            onCorrectAnswer={() => {}}
+            isCompleted={false}
+          />
+        )}
       </Box>
     </Dialog>
   );

frontend/src/components/course_authoring/text-input/TextInputEditor.tsx

@@ -1,5 +1,12 @@
 import { AddPhotoAlternate } from "@mui/icons-material";
-import { Box, Button, Typography, useTheme } from "@mui/material";
+import {
+  Box,
+  Button,
+  Stack,
+  TextField,
+  Typography,
+  useTheme,
+} from "@mui/material";
 import { VisuallyHidden } from "@reach/visually-hidden";
 import React from "react";
 import ActivityAPIClient from "../../../APIClients/ActivityAPIClient";
@@ -202,17 +209,22 @@ const TextInputMainEditor = ({
             </Box>
           )}
         </Box>
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: "row",
-            rowGap: "24px",
-            columnGap: "34px",
-            flexWrap: "wrap",
-          }}
+        <Stack
+          direction="row"
+          alignItems="center"
+          gap="24px"
+          alignSelf="stretch"
         >
-          {" "}
-        </Box>
+          <TextField disabled placeholder="Enter your answer here" fullWidth />
+          {activity.units !== undefined && (
+            <Typography
+              variant="bodyMedium"
+              sx={{ color: theme.palette.Neutral[600] }}
+            >
+              {activity.units}
+            </Typography>
+          )}
+        </Stack>
       </Box>
     </Box>
   );

frontend/src/components/course_authoring/text-input/TextInputSidebar.tsx

@@ -13,10 +13,17 @@ import {
 } from "@mui/material";
 import { Numbers, Subject, Close } from "@mui/icons-material";
 import IOSSwitch from "../../common/form/IOSSwitch";
+import {
+  Activity,
+  isTextInputActivity,
+  TextInputActivity,
+} from "../../../types/CourseTypes";
 
 interface TextInputEditorSidebarProps {
   mode: "short_answer" | "numeric_range";
   setMode: (value: "short_answer" | "numeric_range") => void;
+  activity: TextInputActivity;
+  setActivity: React.Dispatch<React.SetStateAction<Activity | undefined>>;
   hasImage: boolean;
   setHasImage: (value: boolean) => void;
   hasAdditionalContext: boolean;
@@ -25,11 +32,15 @@ interface TextInputEditorSidebarProps {
   setHint: (value: string) => void;
   correctAnswers: string[];
   setCorrectAnswers: (value: string[]) => void;
+  units?: string;
+  setUnits: (value?: string) => void;
 }
 
 export default function TextInputEditorSidebar({
   mode,
   setMode,
+  activity,
+  setActivity,
   hasImage,
   setHasImage,
   hasAdditionalContext,
@@ -38,11 +49,12 @@ export default function TextInputEditorSidebar({
   setHint,
   correctAnswers,
   setCorrectAnswers,
+  units,
+  setUnits,
 }: TextInputEditorSidebarProps) {
   const boxHeight = "calc(100vh - 68px)";
   const theme = useTheme();
   const [currentAnswer, setCurrentAnswer] = useState("");
-  const [hasUnits, setHasUnits] = useState(false);
 
   const handleAddAnswer = (ev: React.FormEvent) => {
     ev.preventDefault();
@@ -237,13 +249,15 @@ export default function TextInputEditorSidebar({
             >
               <Typography variant="bodySmall">Units</Typography>
               <IOSSwitch
-                checked={hasUnits}
-                onChange={(ev) => setHasUnits(ev.target.checked)}
+                checked={units !== undefined}
+                onChange={(ev) => setUnits(ev.target.checked ? "" : undefined)}
               />
             </Box>
-            {hasUnits && (
+            {units !== undefined && (
               <TextField
                 placeholder="Unit - ex. dollars, coins, etc."
+                defaultValue={units}
+                onChange={(e) => setUnits(e.target.value)}
                 sx={{ width: "100%" }}
               />
             )}
@@ -343,8 +357,42 @@ export default function TextInputEditorSidebar({
                   Set a number range for correct answers
                 </Typography>
                 <Stack direction="row" alignItems="center" gap="16px">
-                  <TextField type="number" label="Min" sx={{ width: "100%" }} />
-                  <TextField type="number" label="Max" sx={{ width: "100%" }} />
+                  <TextField
+                    type="number"
+                    label="Min"
+                    defaultValue={activity.validation.min}
+                    sx={{ width: "100%" }}
+                    onChange={(ev) =>
+                      setActivity((prev) => {
+                        if (!prev || !isTextInputActivity(prev)) return prev;
+                        return {
+                          ...prev,
+                          validation: {
+                            ...prev.validation,
+                            min: Number(ev.target.value),
+                          },
+                        };
+                      })
+                    }
+                  />
+                  <TextField
+                    type="number"
+                    label="Max"
+                    defaultValue={activity.validation.max}
+                    sx={{ width: "100%" }}
+                    onChange={(ev) =>
+                      setActivity((prev) => {
+                        if (!prev || !isTextInputActivity(prev)) return prev;
+                        return {
+                          ...prev,
+                          validation: {
+                            ...prev.validation,
+                            max: Number(ev.target.value),
+                          },
+                        };
+                      })
+                    }
+                  />
                 </Stack>
               </>
             )}