[#13174] Add toggle to hide self responses on feedback results page

[ChengCui11]

Fixes #13174

Outline of Solution

Problem: Users currently have no option to hide their own responses on the results page. In cases where students are only interested in viewing responses from others, the lack of this feature makes it harder to focus on external feedback.

Solution: We added a new feature that allows students to hide their own responses on the feedback results page. This feature introduces a toggle switch labeled "Hide my own responses," which, when activated, removes the student's responses from the view.

Changes Made:

Add Bootstrap Dependency:

• After installation, a bootstrap folder will appear inside the node_modules directory.

• The following command is used to install the dependency and used at root directory:

npm install [email protected]

• After installation, a bootstrap folder will appear inside the node_modules directory.

Updated Feedback Results Page:

• Modified the src/web/app/pages-session/session-result-page/session-result-page.component.ts to introduce a new state variable hideSelfResponses, used to track the toggle state.
• Implemented a toggle switch in the results page template (session-result-page.component.html), allowing students to hide their own responses.
• Styled the toggle switch using Bootstrap’s form-switch class for a consistent UI.

Modified Child Component Logic:

• Passed the new hideSelfResponses state to the tm-question-response-panel child component to control the visibility of the student’s own responses.
• Updated the child component (src/web/app/components/question-response-panel/question-response-panel.component.ts) to handle the state and adjust the display logic in its template.

Template Adjustments:

• Updated the template logic in question-response-panel.component.html to conditionally render the student’s own responses based on the toggle switch’s state, ensuring the page is decluttered when the toggle is activated.

Screenshots of the New UI: Screenshot 1: Position and description of new toggle button:

Screenshot 2: Before pressing and activating the button:

Screenshot 3: After pressing and activating the button: