Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

ChengCui11
Copy link

@ChengCui11 ChengCui11 commented Oct 20, 2024

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 bootstrap@v5.3.3
  • 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:
1

Screenshot 2: Before pressing and activating the button:
2

Screenshot 3: After pressing and activating the button:
3

Copy link

Hi @ChengCui11, thank you for your interest in contributing to TEAMMATES!
However, your PR does not appear to follow our contribution guidelines:

  • Title must start with the issue number the PR is fixing in square brackets, e.g. [#<issue-number>]

Please address the above before we proceed to review your PR.

@ChengCui11 ChengCui11 changed the title Feature/hide self responses [#13054] Add toggle to hide self responses on feedback results page Oct 20, 2024
@ChengCui11 ChengCui11 changed the title [#13054] Add toggle to hide self responses on feedback results page [#13174] Add toggle to hide self responses on feedback results page Oct 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Student viewing responses: allow hiding self reponses
2 participants