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

[yemingc]

Fixes #13174

Outline of Solution

1. Toggle Checkbox for Self Responses:

   Added a toggle checkbox to the session result page (File edit: session-result-page.component.html). The checkbox controls a new boolean property, hideMyResponses, in SessionResultPageComponent.

2. Passing hideMyResponses to Child Components:

   Updated the QuestionResponsePanelComponent to accept an @Input() hideMyResponses property. The visibility of self responses is controlled based on the value of hideMyResponses.

3. UI Updates:

   The checkbox is implemented with custom styling classes (toggle-container, toggle-input, toggle-label). If hideMyResponses is set to true, the "self responses" section is hidden in the UI.

Files Changed:

1. session-result-page.component.html:

   Added the HTML for the toggle checkbox. Updated the QuestionResponsePanelComponent to pass the hideMyResponses property.

2. session-result-page.component.ts:

   Added a hideMyResponses boolean property. Created a toggleHideSelfResponses() method to handle the change event from the checkbox.

3. question-response-panel.component.ts: Updated to include an @Input() property called hideMyResponses. Modified the ngIf condition to control the visibility of self responses.

The approach is adapted from #13175. and we add testing to the new changes.

Testing:

• Added unit tests to verify the correct behavior of the toggle feature.

• Tests include verifying the hideMyResponses property when the checkbox is toggled, and checking if the responses are correctly hidden or displayed in QuestionResponsePanelComponent.

• Updated the existing test suite (File changed: session-result-page.component.spec.ts) to include these new tests.

Screenshot of UI:

[damithc]

Thanks for sending this PR @yemingc Heads up: TEAMMATES dev team is not active around this period as they are busy with studies (TEAMMATES is based in a university). So, PRs received in this period are unlikely to get dev attention until the team is active again, estimated to be around Jan 2025.

[Yiou-Liu]

Current Status We noticed that some checks have failed:

Component Tests and E2E Tests: These tests are showing errors. I am currently reviewing the detailed logs to identify the cause and resolve any issues. Additional Checks: Accessibility and documentation checks have passed successfully. Next Steps We will work on resolving the failing tests as soon as possible.

[jasonqiu212]

Hi @yemingc Thank you for contributing to TEAMMATES! Could you fix the failing tests and lint before we review your PR?

[jasonqiu212]

Closing due to inactivity. Please feel free to re-open a new PR if you wish to work on this again @yemingc 🙏