feat(Grading Tool): Teacher Reflection Questions

src/app/authoring-tool/edit-component-advanced/edit-component-advanced-shared.module.ts

@@ -17,6 +17,7 @@ import { FormsModule } from '@angular/forms';
 import { EditComponentAddToNotebookButtonComponent } from '../edit-component-add-to-notebook-button/edit-component-add-to-notebook-button.component';
 import { EditConnectedComponentsComponent } from '../edit-connected-components/edit-connected-components.component';
 import { EditComponentSummarizerSystemPromptComponent } from '../edit-component-summarizer-system-prompt/edit-component-summarizer-system-prompt.component';
+import { EditComponentTeacherReflectionsComponent } from '../edit-component-teacher-reflections/edit-component-teacher-reflections.component';
 
 @NgModule({
   imports: [
@@ -31,6 +32,7 @@ import { EditComponentSummarizerSystemPromptComponent } from '../edit-component-
     EditComponentWidthComponent,
     EditComponentRubricComponent,
     EditComponentSummarizerSystemPromptComponent,
+    EditComponentTeacherReflectionsComponent,
     EditComponentTagsComponent,
     EditComponentConstraintsComponent,
     EditComponentJsonComponent,
@@ -51,6 +53,7 @@ import { EditComponentSummarizerSystemPromptComponent } from '../edit-component-
     EditComponentWidthComponent,
     EditComponentRubricComponent,
     EditComponentSummarizerSystemPromptComponent,
+    EditComponentTeacherReflectionsComponent,
     EditComponentTagsComponent,
     EditComponentConstraintsComponent,
     EditComponentJsonComponent,

src/app/authoring-tool/edit-component-teacher-reflections/edit-component-teacher-reflections.component.html

@@ -0,0 +1,53 @@
+<mat-expansion-panel class="w-full !mt-4">
+  <mat-expansion-panel-header>
+    <mat-panel-title i18n>Teacher Reflection Questions</mat-panel-title>
+  </mat-expansion-panel-header>
+  <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center gap-2">
+        <span i18n
+          >These questions will only appear for teachers (in the Grade by Step view for this
+          activity in the Teacher Tools).</span
+        >
+        <button
+          mat-icon-button
+          color="primary"
+          type="button"
+          (click)="addQuestion()"
+          class="flex items-center gap-1"
+          matTooltip="Add teacher reflection question"
+          i18n-matTooltip
+          matTooltipPosition="above"
+        >
+          <mat-icon>add_circle</mat-icon>
+        </button>
+      </div>
+
+      @for (q of componentContent()?.teacher?.reflectionQuestions; track q.id; let idx = $index) {
+        <div class="flex items-center gap-2">
+          <mat-form-field appearance="fill" subscriptSizing="dynamic" class="flex-grow">
+            <mat-label i18n>Question {{ idx + 1 }}</mat-label>
+            <input
+              matInput
+              [(ngModel)]="q.text"
+              (ngModelChange)="onQuestionTextChanged()"
+              placeholder="e.g. Which, if any, response surprised you?"
+              i18n-placeholder
+            />
+          </mat-form-field>
+          <button
+            mat-icon-button
+            color="warn"
+            type="button"
+            (click)="deleteQuestion(idx)"
+            matTooltip="Delete question"
+            i18n-matTooltip
+            matTooltipPosition="above"
+          >
+            <mat-icon>delete</mat-icon>
+          </button>
+        </div>
+      }
+    </div>
+  </div>
+</mat-expansion-panel>

src/app/authoring-tool/edit-component-teacher-reflections/edit-component-teacher-reflections.component.spec.ts

@@ -0,0 +1,98 @@
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { EditComponentTeacherReflectionsComponent } from './edit-component-teacher-reflections.component';
+import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
+import { ComponentContent } from '../../../assets/wise5/common/ComponentContent';
+
+describe('EditComponentTeacherReflectionsComponent', () => {
+  let component: EditComponentTeacherReflectionsComponent;
+  let fixture: ComponentFixture<EditComponentTeacherReflectionsComponent>;
+  let mockProjectService: jasmine.SpyObj<TeacherProjectService>;
+
+  beforeEach(async () => {
+    mockProjectService = jasmine.createSpyObj('TeacherProjectService', ['nodeChanged']);
+
+    await TestBed.configureTestingModule({
+      imports: [EditComponentTeacherReflectionsComponent],
+      providers: [{ provide: TeacherProjectService, useValue: mockProjectService }]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EditComponentTeacherReflectionsComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('componentContent', {
+      id: 'comp1',
+      type: 'Discussion'
+    } as ComponentContent);
+  });
+
+  it('should create and initialize reflectionQuestions if missing', () => {
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+    expect(component.componentContent().teacher).toBeDefined();
+    expect(component.componentContent().teacher.reflectionQuestions).toEqual([]);
+  });
+
+  it('should add a reflection question and notify node changed', () => {
+    fixture.detectChanges();
+    component.addQuestion();
+
+    expect(component.componentContent().teacher.reflectionQuestions.length).toBe(1);
+    expect(component.componentContent().teacher.reflectionQuestions[0].id).toBeTruthy();
+    expect(component.componentContent().teacher.reflectionQuestions[0].text).toBe('');
+    expect(mockProjectService.nodeChanged).toHaveBeenCalledTimes(1);
+  });
+
+  it('should delete a reflection question and notify node changed', () => {
+    fixture.componentRef.setInput('componentContent', {
+      id: 'comp1',
+      type: 'Discussion',
+      teacher: {
+        reflectionQuestions: [
+          { id: 'q1', text: 'First question' },
+          { id: 'q2', text: 'Second question' }
+        ]
+      }
+    } as ComponentContent);
+    fixture.detectChanges();
+    spyOn(window, 'confirm').and.returnValue(true);
+    component.deleteQuestion(0);
+
+    expect(component.componentContent().teacher.reflectionQuestions.length).toBe(1);
+    expect(component.componentContent().teacher.reflectionQuestions[0].id).toBe('q2');
+    expect(mockProjectService.nodeChanged).toHaveBeenCalledTimes(1);
+  });
+
+  it('should debounce question text changes', fakeAsync(() => {
+    fixture.componentRef.setInput('componentContent', {
+      id: 'comp1',
+      type: 'Discussion',
+      teacher: {
+        reflectionQuestions: [{ id: 'q1', text: 'Initial' }]
+      }
+    } as ComponentContent);
+    fixture.detectChanges();
+
+    component.componentContent().teacher.reflectionQuestions[0].text = 'Typing 1';
+    component['onQuestionTextChanged']();
+
+    expect(mockProjectService.nodeChanged).not.toHaveBeenCalled();
+
+    tick(500);
+    component.componentContent().teacher.reflectionQuestions[0].text = 'Typing 2';
+    component['onQuestionTextChanged']();
+
+    tick(1000);
+    expect(mockProjectService.nodeChanged).toHaveBeenCalledTimes(1);
+  }));
+
+  it('should emit componentChangedEvent when a question is added', () => {
+    fixture.detectChanges();
+    let emitted = false;
+    component.componentChangedEvent.subscribe(() => {
+      emitted = true;
+    });
+
+    component.addQuestion();
+
+    expect(emitted).toBeTrue();
+  });
+});

src/app/authoring-tool/edit-component-teacher-reflections/edit-component-teacher-reflections.component.ts

@@ -0,0 +1,84 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnDestroy,
+  OnInit,
+  inject,
+  input,
+  output
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Subject, Subscription } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import { ComponentContent } from '../../../assets/wise5/common/ComponentContent';
+import { generateRandomKey } from '../../../assets/wise5/common/string/string';
+import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    FormsModule,
+    MatButtonModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatTooltipModule
+  ],
+  selector: 'edit-component-teacher-reflections',
+  styles: [':host { display: block; width: 100%; }'],
+  templateUrl: 'edit-component-teacher-reflections.component.html'
+})
+export class EditComponentTeacherReflectionsComponent implements OnInit, OnDestroy {
+  readonly componentContent = input.required<ComponentContent>();
+  readonly componentChangedEvent = output<void>();
+
+  protected questionTextChanged = new Subject<void>();
+  private projectService = inject(TeacherProjectService);
+  private subscriptions = new Subscription();
+
+  ngOnInit(): void {
+    if (!this.componentContent().teacher) {
+      this.componentContent().teacher = { reflectionQuestions: [] };
+    }
+    this.subscriptions.add(
+      this.questionTextChanged.pipe(debounceTime(1000)).subscribe(() => {
+        this.notifyChanged();
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
+
+  addQuestion(): void {
+    this.componentContent().teacher.reflectionQuestions.push({
+      id: generateRandomKey(),
+      text: ''
+    });
+    this.notifyChanged();
+  }
+
+  deleteQuestion(index: number): void {
+    if (confirm($localize`Are you sure you want to delete this question?`)) {
+      this.componentContent().teacher.reflectionQuestions.splice(index, 1);
+      this.notifyChanged();
+    }
+  }
+
+  protected onQuestionTextChanged(): void {
+    this.questionTextChanged.next();
+  }
+
+  private notifyChanged(): void {
+    this.projectService.nodeChanged();
+    this.componentChangedEvent.emit();
+  }
+}

src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.html

@@ -111,6 +111,16 @@
             <ng-container [ngTemplateOutlet]="ideasSummary" />
           </div>
         }
+        @if (hasReflectionQuestions && isSinglePeriod) {
+          <teacher-reflection
+            [nodeId]="node.id"
+            [componentId]="component.id"
+            [componentType]="component.type"
+            [periodId]="periodId"
+            [questions]="component.teacher?.reflectionQuestions || []"
+            class="summary"
+          />
+        }
       } @else if (component.type === 'Match') {
         <ng-container [ngTemplateOutlet]="scoreSummary" />
         <div class="summary-content" [class.!col-span-full]="!showScoreSummary">
@@ -149,6 +159,16 @@
             <ng-container [ngTemplateOutlet]="ideasSummary" />
           </div>
         }
+        @if (hasReflectionQuestions && isSinglePeriod) {
+          <teacher-reflection
+            [nodeId]="node.id"
+            [componentId]="component.id"
+            [componentType]="component.type"
+            [periodId]="periodId"
+            [questions]="component.teacher?.reflectionQuestions || []"
+            class="summary"
+          />
+        }
       }
     </div>
   }

src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.ts

@@ -27,6 +27,7 @@ import {
   MatDialogRef
 } from '@angular/material/dialog';
 import { DiscussionSummaryComponent } from '../../../directives/teacher-summary-display/discussion-summary/discussion-summary.component';
+import { TeacherReflectionComponent } from '../../../teacher-reflection/teacher-reflection.component';
 
 @Component({
   imports: [
@@ -42,6 +43,7 @@ import { DiscussionSummaryComponent } from '../../../directives/teacher-summary-
     OpenResponseAiSummaryComponent,
     NgTemplateOutlet,
     PeerGroupButtonComponent,
+    TeacherReflectionComponent,
     TeacherSummaryDisplayComponent
   ],
   selector: 'component-summary',
@@ -148,6 +150,14 @@ export class ComponentSummaryComponent {
       panelClass: 'summary-dialog'
     });
   }
+
+  protected get hasReflectionQuestions(): boolean {
+    return (this.component.teacher?.reflectionQuestions?.length ?? 0) > 0;
+  }
+
+  protected get isSinglePeriod(): boolean {
+    return this.periodId != null && this.periodId !== -1;
+  }
 }
 
 @Component({