[#13174] Add toggle to hide self responses on feedback results page #13186
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
Updated Feedback Results Page:
src/web/app/pages-session/session-result-page/session-result-page.component.ts
to introduce a new state variablehideSelfResponses
, used to track the toggle state.session-result-page.component.html
), allowing students to hide their own responses.Modified Child Component Logic:
hideSelfResponses
state to thetm-question-response-panel
child component to control the visibility of the student’s own responses.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:
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: