Learner Activity Views by ji-mmyliu · Pull Request #165 · uwblueprint/extend-a-family

ji-mmyliu · 2025-12-08T03:08:22Z

Notion ticket link

Ticket Name

Implementation description

Steps to test

What should reviewers focus on?

Checklist

My PR name is descriptive and in imperative tense
My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
I have run the appropriate linter(s)
I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

github-actions · 2025-12-08T03:11:22Z

Visit the preview URL for this PR (updated for commit ede8166):

https://extendafamily-7613e--pr165-jimmy-activity-learn-f4837rtu.web.app

_{(expires Mon, 15 Dec 2025 03:11:19 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: f8bb7b5cd838ab636347dc54fd0ab08ab3715d31}

Copilot

Pull request overview

This PR adds interactive learner view functionality for activity pages, enabling learners to complete activities with answer checking and feedback, while providing administrators with preview capabilities.

Implements viewer components for three activity types: multiple-choice, table, and matching activities
Adds answer validation with feedback modals for incorrect answers
Introduces preview modal for administrators to view activities from learner perspective

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
frontend/src/types/CourseTypes.ts	Updates type guard functions to accept optional parameters for safer null checking
frontend/src/theme/theme.ts	Fixes Pressed state color from black to proper theme color
frontend/src/components/pages/ViewModulePage.tsx	Integrates viewer components with role-based rendering and adds interactive buttons for learners and admins
frontend/src/components/course_viewing/table/TableViewer.tsx	New component implementing interactive table activity with answer checking
frontend/src/components/course_viewing/multiple-choice/MultipleChoiceViewer.tsx	Refactored to forwardRef pattern with answer validation logic
frontend/src/components/course_viewing/multiple-choice/MultipleChoiceViewOption.tsx	Adds visual feedback for correct answers and selected states
frontend/src/components/course_viewing/modals/WrongAnswerModal.tsx	New modal displaying hints when learners answer incorrectly
frontend/src/components/course_viewing/matching/MatchingViewer.tsx	New component implementing drag-and-connect matching activity with visual feedback
frontend/src/components/course_viewing/matching/MatchingBox.tsx	New component rendering individual matching boxes with selection states
frontend/src/components/course_authoring/matching/MatchingRow.tsx	Removes redundant label text from arrow component
frontend/src/components/course_authoring/editorComponents/PreviewLearnerModal.tsx	New modal allowing administrators to preview activities as learners

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-23T00:28:46Z

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

+export type ActivityViewerHandle = {
+  checkAnswer: () => void;
+  onRetry?: () => void;
+};


The ActivityViewerHandle type is duplicated here. It's also defined in TableViewer.tsx and MatchingViewer.tsx. This type should be defined once in a shared location and imported where needed to maintain consistency.

Copilot · 2025-12-23T00:28:46Z

frontend/src/components/course_viewing/table/TableViewer.tsx

+          <TableCell
+            align="center"
+            key={colIndex}
+            sx={{ backgroundColor: displayCorrect ? "#F5FFDF" : "transparent" }}


The magic color value "#F5FFDF" (light green) is duplicated across multiple files (TableViewer.tsx line 94, MultipleChoiceViewOption.tsx line 42, and MatchingBox.tsx line 30). This should be defined as a constant in the theme or a shared constants file to ensure consistency and make it easier to update.

Copilot · 2025-12-23T00:28:46Z

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


+  let backgroundColor: string | null = null;
+  if (displayCorrect) {
+    backgroundColor = "#F5FFDF"; // light green


The magic color value "#F5FFDF" (light green) is hardcoded here. This same value appears in other files (TableViewer.tsx, MatchingBox.tsx). It should be defined as a constant in the theme or a shared constants file to ensure consistency.

Copilot · 2025-12-23T00:28:47Z

frontend/src/components/course_viewing/table/TableViewer.tsx

+import { TableActivity } from "../../../types/CourseTypes";
+
+type TableViewerProps = {
+  activity: TableActivity;
+  onWrongAnswer: () => void;
+};
+
+export type ActivityViewerHandle = {
+  checkAnswer: () => void;
+};
+


The ActivityViewerHandle type is duplicated across multiple files (TableViewer.tsx, MultipleChoiceViewer.tsx, and MatchingViewer.tsx). This type should be defined once in a shared location (e.g., in CourseTypes.ts or a dedicated types file) and imported where needed to avoid duplication and potential inconsistencies.

Suggested change

import { TableActivity } from "../../../types/CourseTypes";

type TableViewerProps = {

activity: TableActivity;

onWrongAnswer: () => void;

};

export type ActivityViewerHandle = {

checkAnswer: () => void;

};

import { ActivityViewerHandle, TableActivity } from "../../../types/CourseTypes";

type TableViewerProps = {

activity: TableActivity;

onWrongAnswer: () => void;

};

Copilot · 2025-12-23T00:28:47Z

frontend/src/components/course_viewing/matching/MatchingViewer.tsx

+
+type MatchingViewerProps = {
+  activity: MatchingActivity;
+  onWrongAnswer: () => void;
+};
+
+export type ActivityViewerHandle = {
+  checkAnswer: () => void;
+  onRetry?: () => void;
+};
+


The ActivityViewerHandle type is duplicated here. It's also defined in TableViewer.tsx and MultipleChoiceViewer.tsx. This type should be defined once in a shared location and imported where needed to maintain consistency.

Suggested change

type MatchingViewerProps = {

activity: MatchingActivity;

onWrongAnswer: () => void;

};

export type ActivityViewerHandle = {

checkAnswer: () => void;

onRetry?: () => void;

};

import type { ActivityViewerHandle } from "../table/TableViewer";

type MatchingViewerProps = {

activity: MatchingActivity;

onWrongAnswer: () => void;

};

Copilot · 2025-12-23T00:28:47Z

frontend/src/components/course_viewing/table/TableViewer.tsx

+        <Typography variant="bodySmall">
+          <Typography variant="bodySmall">{rowLabel}</Typography>
+        </Typography>


There's a redundant Typography wrapper. The rowLabel is wrapped in a Typography variant="bodySmall" component which itself is inside another Typography variant="bodySmall" component. The outer wrapper should be removed.

Suggested change

<Typography variant="bodySmall">

<Typography variant="bodySmall">{rowLabel}</Typography>

</Typography>

<Typography variant="bodySmall">{rowLabel}</Typography>

Copilot · 2025-12-23T00:28:48Z

frontend/src/components/pages/ViewModulePage.tsx

+                  <Button
+                    sx={{
+                      height: "48px",
+                      paddingLeft: "16px",
+                      paddingRight: "24px",
+                      paddingY: "10px",
+                      gap: "8px",
+                      border: "1px solid",
+                      borderColor: theme.palette.Error.Light.Default,
+                      borderRadius: "4px",
+                      backgroundColor: theme.palette.Error.Light.Default,
+                      color: theme.palette.Error.Dark.Default,
+                    }}
+                    onClick={() => {}}
+                  >
+                    <DeleteOutline />
+                    <Typography variant="labelLarge">Delete Page</Typography>
+                  </Button>


The Delete Page button has an onClick handler that does nothing (empty function). This creates a non-functional button in the UI. Either implement the delete functionality or remove the button until it's ready to be implemented.

Suggested change

<Button

sx={{

height: "48px",

paddingLeft: "16px",

paddingRight: "24px",

paddingY: "10px",

gap: "8px",

border: "1px solid",

borderColor: theme.palette.Error.Light.Default,

borderRadius: "4px",

backgroundColor: theme.palette.Error.Light.Default,

color: theme.palette.Error.Dark.Default,

}}

onClick={() => {}}

>

<DeleteOutline />

<Typography variant="labelLarge">Delete Page</Typography>

</Button>

Copilot · 2025-12-23T00:28:48Z

frontend/src/components/course_viewing/matching/MatchingBox.tsx

+    border: `1px solid ${theme.palette.Neutral[400]}`,
+    borderRadius: "4px",
+    cursor: item ? "pointer" : "default",
+    // transition: "border-color 120ms ease, box-shadow 120ms ease",


The commented-out transition property suggests it was intentionally disabled. If this is temporary, a TODO comment should explain why. If it's permanent, the commented code should be removed to keep the codebase clean.

Suggested change

// transition: "border-color 120ms ease, box-shadow 120ms ease",

ji-mmyliu added 3 commits December 3, 2025 19:58

Initial commit

9423815

Add Table Learner View and Admin Previewing

81896f1

Implement Matching Editor

ede8166

ji-mmyliu marked this pull request as ready for review December 23, 2025 00:25

ji-mmyliu requested a review from Copilot December 23, 2025 00:25

Copilot started reviewing on behalf of ji-mmyliu December 23, 2025 00:26 View session

Copilot AI reviewed Dec 23, 2025

View reviewed changes

ji-mmyliu merged commit ee7f294 into main Dec 23, 2025
9 checks passed

ji-mmyliu deleted the jimmy/activity-learner-views branch December 23, 2025 00:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Learner Activity Views#165

Learner Activity Views#165
ji-mmyliu merged 3 commits intomainfrom
jimmy/activity-learner-views

ji-mmyliu commented Dec 8, 2025

Uh oh!

github-actions bot commented Dec 8, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 23, 2025

Uh oh!

Copilot AI Dec 23, 2025

Uh oh!

Copilot AI Dec 23, 2025

Uh oh!

Copilot AI Dec 23, 2025

Uh oh!

Copilot AI Dec 23, 2025

Uh oh!

Copilot AI Dec 23, 2025

Uh oh!

Copilot AI Dec 23, 2025

Uh oh!

Copilot AI Dec 23, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

ji-mmyliu commented Dec 8, 2025

Notion ticket link

Implementation description

Steps to test

What should reviewers focus on?

Checklist

Uh oh!

github-actions bot commented Dec 8, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant