[#13174] Student viewing responses: allow hiding self reponses

src/web/app/components/question-response-panel/question-response-panel.component.html

@@ -35,7 +35,7 @@
               <strong>Other responses (to you): </strong>Responses are not visible to you.
             </div>
           </ng-template>
-          <div class="given-responses mt-4" *ngIf="question.responsesFromSelf.length">
+          <div class="given-responses mt-4" *ngIf="question.responsesFromSelf.length && !hideMyResponses">
             <strong>Your own responses (to others):</strong>
             <div *ngFor="let responseFromSelf of question.responsesFromSelf">
               <tm-student-view-responses [responses]="[responseFromSelf]" [isSelfResponses]="true" [feedbackQuestion]="question.feedbackQuestion" [timezone]="session.timeZone" [statistics]="question.questionStatistics"></tm-student-view-responses>

src/web/app/components/question-response-panel/question-response-panel.component.ts

@@ -61,6 +61,9 @@ export class QuestionResponsePanelComponent {
   @Input()
   regKey: string = '';
 
+  @Input()
+  hideMyResponses: boolean = false;
+
   @Input()
   previewAsPerson: string = '';
 

src/web/app/pages-session/session-result-page/session-result-page.component.html

@@ -73,6 +73,11 @@ <h4>Previewing Session Results as
   </div>
 </div>
 
+<div class="toggle-container">
+    <input class="toggle-input" type="checkbox" id="hideMyResponses" (change)="toggleHideSelfResponses($event)" >
+    <label class="toggle-label" for="hideMyResponses">Hide my own responses</label>
+</div>
+
 <tm-loading-retry [shouldShowRetry]="hasFeedbackSessionResultsLoadingFailed" [message]="'Failed to load results'" (retryEvent)="retryLoadingFeedbackSessionResults()">
   <div *tmIsLoading="isFeedbackSessionResultsLoading">
     <div *ngIf="questions.length === 0" class="mt-4">
@@ -82,6 +87,7 @@ <h4>Previewing Session Results as
     </div>
     <tm-question-response-panel [questions]="questions" [session]="session"
                                 [intent]="intent" [regKey]="regKey" [previewAsPerson]="previewAsPerson"
+                                [hideMyResponses]="hideMyResponses"
     ></tm-question-response-panel>
   </div>
 </tm-loading-retry>

src/web/app/pages-session/session-result-page/session-result-page.component.spec.ts

@@ -1,6 +1,7 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ActivatedRoute } from '@angular/router';
+import { FormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 import { of, throwError } from 'rxjs';
 import SpyInstance = jest.SpyInstance;
@@ -36,6 +37,10 @@
   StudentViewResponsesModule,
 } from '../../components/question-responses/student-view-responses/student-view-responses.module';
 import { QuestionTextWithInfoModule } from '../../components/question-text-with-info/question-text-with-info.module';
+import {
+  QuestionResponsePanelComponent
+} from "../../components/question-response-panel/question-response-panel.component";
+import {By} from "@angular/platform-browser";
 
 describe('SessionResultPageComponent', () => {
   const testFeedbackSession: FeedbackSession = {
@@ -119,6 +124,7 @@
       imports: [
         HttpClientTestingModule,
         RouterTestingModule,
+        FormsModule,
         StudentViewResponsesModule,
         QuestionTextWithInfoModule,
         QuestionResponsePanelModule,
@@ -413,4 +419,70 @@
     expect(component.questions.length).toEqual(1);
     expect(component.questions[0]).toEqual(testFeedbackQuestionModel);
   });
+
+  // Test the toggle feature
+  it('should toggle `hideMyResponses` when the checkbox is clicked', () => {
+    // Arrange: Get the checkbox input element
+    const checkbox = fixture.debugElement.query(By.css('#hideMyResponses')).nativeElement;
+
+    // Act: Toggle the checkbox to hide responses
+    checkbox.checked = true;
+    checkbox.dispatchEvent(new Event('change'));
+    fixture.detectChanges();
+
+    // Assert: The `hideMyResponses` should be true
+    expect(component.hideMyResponses).toBe(true);
+
+    // Act: Toggle the checkbox again to show responses
+    checkbox.checked = false;
+    checkbox.dispatchEvent(new Event('change'));
+    fixture.detectChanges();
+
+    // Assert: The `hideMyResponses` should be false
+    expect(component.hideMyResponses).toBe(false);
+  });
+
+  it('should pass `hideMyResponses` to QuestionResponsePanelComponent correctly', () => {
+    // Arrange: Set `hideMyResponses` to true
+    component.hideMyResponses = true;
+    fixture.detectChanges();
+
+    // Act: Get the QuestionResponsePanelComponent instance
+    const questionResponsePanel = fixture.debugElement.query(By.directive(QuestionResponsePanelComponent))
+        .componentInstance as QuestionResponsePanelComponent;
+
+    // Assert: The `hideMyResponses` should be passed to the child component
+    expect(questionResponsePanel.hideMyResponses).toBe(true);
+
+    // Arrange: Set `hideMyResponses` to false
+    component.hideMyResponses = false;
+    fixture.detectChanges();
+
+    // Assert: The `hideMyResponses` should now be false in the child component
+    expect(questionResponsePanel.hideMyResponses).toBe(false);
+  });
+
+  it('should hide the self responses section when `hideMyResponses` is true', () => {
+    // Arrange: Set `hideMyResponses` to true
+    component.hideMyResponses = true;
+    fixture.detectChanges();
+
+    // Act: Query the responses section with class `given-responses`
+    const responseSection = fixture.debugElement.query(By.css('.given-responses'));
+
+    // Assert: Response section should not be present in the DOM
+    expect(responseSection).toBeNull();
+  });
+
+  it('should show the self responses section when `hideMyResponses` is false', () => {
+    // Arrange: Set `hideMyResponses` to false
+    component.hideMyResponses = false;
+    fixture.detectChanges();
+
+    // Act: Query the responses section with class `given-responses`
+    const responseSection = fixture.debugElement.query(By.css('.given-responses'));
+
+    // Assert: Response section should be present in the DOM
+    expect(responseSection).not.toBeNull();
+  });
 });

src/web/app/pages-session/session-result-page/session-result-page.component.ts

@@ -108,6 +108,13 @@ export class SessionResultPageComponent implements OnInit {
 
   private backendUrl: string = environment.backendUrl;
 
+  hideMyResponses: boolean = false;
+
+  toggleHideSelfResponses(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.hideMyResponses = target.checked;
+  }
+
   constructor(private feedbackQuestionsService: FeedbackQuestionsService,
               private feedbackSessionsService: FeedbackSessionsService,
               private route: ActivatedRoute,