feat(Grading Tool): Teacher Reflection Questions

[hirokiterashima]

Description

Introduces support for Teacher Reflection Questions, enabling curriculum authors to author reflection prompts on components and allowing teachers to view and record reflection responses during classroom runs in the grading tool.

---

Changes

1. Authoring Tool (src/app/authoring-tool/)

• New Component EditComponentTeacherReflectionsComponent:
  • Allows authors to view, add, edit, and delete reflection questions attached to a component.
  • Added a confirmation prompt dialog when deleting a reflection question to prevent accidental data loss.
  • Added instructional description text and placeholder prompts for author clarity.
• Advanced Authoring Integration:
  • Exported EditComponentTeacherReflectionsComponent via EditComponentAdvancedSharedModule.
  • Added the Teacher Reflection Questions section under the Advanced > General authoring view across components (Open Response, Multiple Choice, Table, Match, Draw, HTML, AI Chat, Concept Map, Discussion, etc.).

2. Runtime & VLE (src/assets/wise5/teacher-reflection/ & src/app/vle/)

• New Component TeacherReflectionComponent:
  • Renders reflection questions in an expansion panel (expanded by default).
  • Built with modern Angular conventions: signal-based inputs (input()), state signals (signal()), and ChangeDetectionStrategy.OnPush.
  • Automatically saves teacher answers with debouncing and includes workgroupId.
  • Shows visual save status feedback via NotificationService ("Saving...", "Saved").
• New Service TeacherReflectionService:
  • Manages HTTP requests for retrieving and saving teacher reflection answers for given runs and components.
• Model & Type Definitions:
  • Created TeacherReflectionQuestion and TeacherReflectionAnswer models in teacher-reflection.model.ts.
  • Added optional teacherReflectionQuestions?: TeacherReflectionQuestion[] to ComponentContent.ts.
• Component Summary Integration:
  • Integrated TeacherReflectionComponent into ComponentSummaryComponent to display reflection questions/answers when viewing student/class work.
  • Excluded from discussion summary display where not applicable.

3. Tests

• Added unit tests for TeacherReflectionService (teacher-reflection.service.spec.ts).
• Added unit tests for TeacherReflectionComponent (teacher-reflection.component.spec.ts), including mocked NotificationService.
• Added unit tests for EditComponentTeacherReflectionsComponent (edit-component-teacher-reflections.component.spec.ts), verifying add, edit, and delete-confirmation workflows.

---

Test

Note: test with WISE-Community/WISE-API#364

Manual Verification

1. Authoring Tool (Authoring Reflection Questions)

• Open a project in the Authoring Tool and navigate to any component editor (e.g., Open Response, Dialog Guidance, Multiple Choice, Table, HTML).
• Switch to the Advanced > General tab and locate the Teacher Reflection Questions section.
• Verify the section displays instructional description text and default prompts.
• Click Add Question and enter text in the prompt field.
• Click the Delete button on a question:
  • Verify a confirmation modal prompt appears asking to confirm deletion.
  • Cancel the prompt and confirm the question is not deleted.
  • Confirm deletion and verify the question is removed.
• Save the project and reload the authoring tool to verify questions persist.

2. Teacher View / Component Summary

• Launch a classroom run for the authored project as a teacher.
• Navigate to a step with authored teacher reflection questions in the Component Summary view.
• Verify the Teacher Reflection panel is:
  • Visible and expanded by default.
  • Displays the authored prompt(s) and instructions.
• Enter an answer into the reflection text area:
  • Verify the debounced save notification displays ("Saving..." followed by "Saved").
  • Inspect the network request to verify the POST payload includes runId, componentId, workgroupId, and answer content.
• Refresh the page and confirm the saved reflection answer is retrieved and displayed.
• Navigate to the Open Response Summary (if applicable) and confirm teacher reflection is excluded from display where not intended.

Automated Tests

Run the unit test suite for the new components and service:

npm run test -- --include="src/assets/wise5/teacher-reflection/**/*.spec.ts"
npm run test -- --include="src/app/authoring-tool/edit-component-teacher-reflections/**/*.spec.ts"

[qltysh]

❌ 2 blocking issues (2 total)

Tool	Category	Rule	Count
qlty	Structure	Complex binary expression	2	❌

[qltysh]

Complex binary expression [qlty:boolean-logic]

[qltysh]

Complex binary expression [qlty:boolean-logic]

[qltysh]

Coverage Impact

Unable to calculate total coverage change because base branch coverage was not found.

Modified Files with Diff Coverage (4)

Rating	File	% Diff	Uncovered Line #s
	src/assets/wise5/teacher-reflection/teacher-reflection.service.ts	100.0%
	...er-reflections/edit-component-teacher-reflections.component.ts	100.0%
	...ssets/wise5/teacher-reflection/teacher-reflection.component.ts	92.3%	46, 79, 88, 107
	...torComponents/component-summary/component-summary.component.ts	100.0%
	Total	95.6%

🤖 Increase coverage with AI coding...

In the `feat/teacher-reflection-questions` branch, add test coverage for this new code:

- `src/assets/wise5/teacher-reflection/teacher-reflection.component.ts` -- Lines 46, 79, 88, and 107

🚦 See full report on Qlty Cloud »

🛟 Help

• Diff Coverage: Coverage for added or modified lines of code (excludes deleted files). Learn more.

• Total Coverage: Coverage for the whole repository, calculated as the sum of all File Coverage. Learn more.

• File Coverage: Covered Lines divided by Covered Lines plus Missed Lines. (Excludes non-executable lines including blank lines and comments.)

  • Indirect Changes: Changes to File Coverage for files that were not modified in this PR. Learn more.

[breity]

LGTM

[hirokiterashima]

🎉 This PR is included in version 5.244.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀