Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Fall 2024 - E2487. Reimplement authorization helper.rb

2024-11-13T00:34:21Z

Shassa22: /* JWT Token Overview */

== Introduction ==
Expertiza currently uses session-based authentication in its AuthorizationHelper module. However, the new back-end reimplementation adopts JSON Web Token (JWT) for authentication. This transition is necessary to make the system more scalable, stateless, and secure. JWT-based authentication will replace session-based methods, requiring updates to the AuthorizationHelper module and associated methods.

== Background ==
The AuthorizationHelper module in Expertiza plays a critical role in managing user permissions and access control within the system. It provides methods to verify a user’s privileges based on their assigned roles, such as Super-Admin, Admin, Instructor, TA, or Student. These methods check if the user is authorized to perform actions like submitting assignments, reviewing work, or participating in quizzes. Additionally, it determines whether a user is involved in specific assignments, either as a participant, instructor, or through TA mappings.

==Problem Statement==

Expertiza currently uses session-based authentication in its [[https://github.com/expertiza/expertiza/blob/main/app/helpers/authorization_helper.rb| AuthorizationHelper]] module. The [[https://github.com/expertiza/reimplementation-back-end| reimplementation-back-end]] however, uses JWT (JSON Web Token) based authentication. This requires a redesign of the AuthorizationHelper module to accommodate JWT-based authentication.

The following points need to be taken care of as per the requirement

* JWT Creation :
** Enable the system to process, verify, and decode JWT tokens.
** Use token data to authenticate users and authorize their actions.

* Token expiry and revocation :
** Implement token expiry mechanisms to ensure tokens have limited lifetimes.
** Add a strategy to handle token revocation, such as maintaining a revocation list.

* Privilege Verification :
** Update methods to validate user privileges using JWT claims.

* Testing and Documentation :
** Write comprehensive unit tests for all JWT-related methods.
** Include clear documentation and comments to aid future developers.

=Proposed Changes=

== JWT Token Overview ==

A JSON Web Token (JWT) is a compact, URL-safe token format commonly used for securely transmitting information between parties. It is widely used in web applications for authentication and authorization, as it allows information to be verified and trusted. In the context of our reimplemented AuthorizationHelper module, JWT tokens will replace session-based authentication, enabling stateless and more secure access control.

A JWT Token consists of three main parts:

*Header: Contains metadata about the token, such as the type (JWT) and the hashing algorithm used (e.g., HS256 or RS256).
*Payload: Includes claims, which are statements about an entity (typically, the user) and additional data like the user’s role and permissions.
*Signature: A cryptographic signature generated by encoding the header and payload with a secret key or private key, ensuring data integrity.
These three sections are separated by dots (.), forming a token that looks like this: <Header>.<Payload>.<Signature>

[[File:JWT-Workflow.png|500px|center]]

==Methods to implement==

* jwt_verify_and_decode(token): This method will verify and decode a JWT token and return the user's information, including role and claims. Successful verification of the token signature with the secret key will be followed by extraction of the payload which will contain important information about the user and their role for authentication and authorization.
* check_user_privileges(user_info, required_privilege): extract the user's roles or permissions from user_info (e.g., from the decoded JWT payload). Then, check if required_privilege exists within the user's permissions, returning true if it does and false otherwise to control access accordingly.

==Existing Methods to update==

* current_user_is_a?(role_name):
<pre>
def current_user_is_a?(role_name)
current_user_and_role_exist? && session[:user].role.name == role_name
end
</pre>

Currently this method relies on the session variable which is populated at the time of login to determine the role of a user. This would have to be updated to decode the user's role from the JWT payload

* user_logged_in?:
<pre>
def user_logged_in?
!session[:user].nil?
end
</pre>
This method will have to be updated to check the user's login status based on JWT validity

* current_user_has_privileges_of?(role_name)
<pre>
def current_user_has_privileges_of?(role_name)
current_user_and_role_exist? && session[:user].role.has_all_privileges_of?(Role.find_by(name: role_name))
end
</pre>

Needs to remove dependency on session variable and get user information from the JWT's decoded payload

* current_user_and_role_exist?
<pre>
def current_user_and_role_exist?
user_logged_in? && !session[:user].role.nil?
end
</pre>

Similarly, the role here needs to be checked from the JWT payload
Similarly methods like current_user_has_id?(id) will also have to be updated to remove dependencies from the session object, which are all part of the [[https://github.com/expertiza/expertiza/blob/main/app/helpers/authorization_helper.rb| AuthorizationHelper]] module

==Anticipated Outcomes==
1. Enhanced AuthorizationHelper Module with JWT Integration: 
Updated and operational AuthorizationHelper module that would use JWT-based authentication. The module would be restructured to incorporate token-based authentication checks, replacing prior session-based methods.

2. Updated Associated Methods: 
Methods within the module will have to be updated to leverage JWT claims, ensuring authentication and authorization are handled based on token data. This will allow the module to verify user roles and permissions effectively through JWT claims.

3. Comprehensive JWT Error Handling: 
Built-in error handling to manage potential JWT-related issues, such as token expiration, tampering, or invalid claims. This ensures that unauthorized access is
blocked, and clear error messages are provided when issues arise.

4. Robust Unit Tests for Validation: 
A full suite of unit tests covering various scenarios, including normal, boundary, and edge cases, to validate each method’s functionality and confirm that all
JWT-based authentication flows work reliably.

5. Detailed Documentation and Code Comments: 
In-depth documentation and comments would be added to each function, explaining purpose, usage, and JWT-related adjustments, aiding in code readability and future
maintenance.

== Design Principles ==
The redesign of the AuthorizationHelper module for JWT-based authentication adheres to several core design principles to ensure scalability, maintainability, security, and user-centric functionality. Below, we outline the principles and their application in the context of this project:

1. Single Responsibility Principle (SRP)
Definition: Each module or class should have one and only one reason to change.
Application:
* The AuthorizationHelper module is solely responsible for managing user authentication and authorization. By separating authentication (token verification) and authorization (privilege checking) into distinct methods, we ensure clarity and easier maintenance.
* Methods like jwt_verify_and_decode focus exclusively on token verification, while methods like check_user_privileges handle role-based privilege checks.

2. Separation of Concerns
Definition: Different concerns of a system should be managed in distinct parts of the codebase.
Application:
* JWT creation and decoding are handled by the JsonWebToken class, ensuring the AuthorizationHelper module is not overloaded with cryptographic logic.
* Business logic for determining user privileges is distinct from the logic for managing user sessions or tokens, allowing modular testing and independent updates.

3. Security by Design
Definition: Security considerations should be integral to the system's design from the outset.
Application:
* Sensitive token data (e.g., secret keys) is stored securely in environment variables.
* JWT tokens are validated for expiry and tampering before any privilege checks occur.
* Role-based access control (RBAC) ensures fine-grained control over user actions based on claims within the token.
* All communication involving JWTs is secured using HTTPS to prevent token interception.

4. Statelessness
Definition: The system should not store client-specific data on the server between requests.
Application:
* JWT-based authentication eliminates the dependency on session storage, making the system stateless and scalable.
* All necessary information about the user is encoded in the token, allowing distributed servers to authenticate and authorize users without shared session data.

5. DRY (Don’t Repeat Yourself)
Definition: Avoid duplication of code by abstracting reusable logic.
Application:
* Common operations, such as JWT decoding, privilege checks, and role comparisons, are encapsulated in reusable methods (jwt_verify_and_decode, check_user_privileges).
* This reduces redundancy and makes updates easier, as changes in logic need to be applied only once.

6. Fail Fast
Definition: Systems should detect errors early and fail predictably.
Application:
* Methods like jwt_verify_and_decode and check_user_privileges handle invalid tokens or missing claims by immediately returning error responses.
* Explicit checks for token validity, role presence, and privilege requirements ensure errors are caught before proceeding to sensitive operations.

7. Testability
Definition: Code should be designed to facilitate comprehensive and reliable testing.
Application:
* Modular methods, each with a single responsibility, make unit testing straightforward.
* Mock tokens can be used to test various scenarios, including valid, expired, and tampered tokens.
* Edge cases, such as missing roles or conflicting claims, are explicitly tested.

8. Scalability
Definition: Systems should be able to handle increased load without significant changes to the architecture.
Application:
* Stateless JWT authentication allows multiple servers to handle authentication independently, enhancing horizontal scalability.
* A revocation list stored in a distributed cache (e.g., Redis) ensures token invalidation mechanisms scale with user growth.

9. Code Readability
Definition: Code should be easy to read and understand for future developers.
Application:
* Each method is well-documented with clear comments explaining its purpose, inputs, outputs, and error handling.
* Logical naming conventions (check_user_privileges, current_user_is_a?) make the code self-explanatory.

10. Extensibility
Definition: Design should allow easy addition of new features without affecting existing functionality.
Application:
* New roles or privileges can be added by updating the role hierarchy and claims in the JWT payload without modifying core logic.
* The modular design supports the addition of new methods or extensions for custom token handling or privilege checks.

== Test Plan ==

* Unit Tests:
** Test valid JWT decoding.
** Verify behavior with invalid or expired tokens.
** Check privilege verification for various roles.

* Integration Tests:
** Simulate API requests with valid and invalid JWT tokens.
** Test behavior of endpoints using the updated AuthorizationHelper methods.

* Edge Cases:
** Tokens with missing claims.
** Users with conflicting roles or privileges.

== Team ==
===Mentor===
*Kashika Mallick (kmallick@ncsu.edu)

===Members===
*Shafa Hassan (shassa22@ncsu.edu)
*Archit Gupta (agupta85@ncsu.edu)
*Ansh Ganatra (aganatr@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2487. Reimplement authorization helper.rb

2024-11-12T15:12:50Z

Shassa22: /* Anticipated Outcomes */

== Background ==
The AuthorizationHelper module in Expertiza plays a critical role in managing user permissions and access control within the system. It provides methods to verify a user’s privileges based on their assigned roles, such as Super-Admin, Admin, Instructor, TA, or Student. These methods check if the user is authorized to perform actions like submitting assignments, reviewing work, or participating in quizzes. Additionally, it determines whether a user is involved in specific assignments, either as a participant, instructor, or through TA mappings.

==Problem Statement==

Expertiza currently uses session-based authentication in its [[https://github.com/expertiza/expertiza/blob/main/app/helpers/authorization_helper.rb| AuthorizationHelper]] module. The [[https://github.com/expertiza/reimplementation-back-end| reimplementation-back-end]] however, uses JWT (JSON Web Token) based authentication. This requires a redesign of the AuthorizationHelper module to accommodate JWT-based authentication.

The following points need to be taken care of as per the requirement

* JWT Creation : Make sure that a valid JSON Web Token is created which stores necessary details about the user and their role
* Token expiry and revocation : Token expiry and refresh mechanisms need to be implemented as well as a strategy for token revocation
* Remove dependency on session : The system has to be refactored, configured and tested thoroughly to ensure that having migrated to JWT, there is no dependency on Rails' session
* Writing rspec test cases for all JWT authentication helper methods to ensure proper exception and error handling

==Methods to implement==

* jwt_verify_and_decode(token): This method will verify and decode a JWT token and return the user's information, including role and claims. Successful verification of the token signature with the secret key will be followed by extraction of the payload which will contain important information about the user and their role for authentication and authorization.
* check_user_privileges(user_info, required_privilege): extract the user's roles or permissions from user_info (e.g., from the decoded JWT payload). Then, check if required_privilege exists within the user's permissions, returning true if it does and false otherwise to control access accordingly.

Further, the already existing methods need to be updated and need to be refactored to account for the new authentication system

== JWT Token Overview ==

A JSON Web Token (JWT) is a compact, URL-safe token format commonly used for securely transmitting information between parties. It is widely used in web applications for authentication and authorization, as it allows information to be verified and trusted. In the context of our reimplemented AuthorizationHelper module, JWT tokens will replace session-based authentication, enabling stateless and more secure access control.

Structure of a JWT
A JWT consists of three main parts:

*Header: Contains metadata about the token, such as the type (JWT) and the hashing algorithm used (e.g., HS256 or RS256).
*Payload: Includes claims, which are statements about an entity (typically, the user) and additional data like the user’s role and permissions.
*Signature: A cryptographic signature generated by encoding the header and payload with a secret key or private key, ensuring data integrity.
These three sections are separated by dots (.), forming a token that looks like this: <Header>.<Payload>.<Signature>

[[File:JWT-Workflow.png|500px|center]]]

==Anticipated Outcomes==
1. Enhanced AuthorizationHelper Module with JWT Integration: 
Updated and operational AuthorizationHelper module that would use JWT-based authentication. The module would be restructured to incorporate token-based authentication checks, replacing prior session-based methods.

2. Updated Associated Methods: 
Methods within the module will have to be updated to leverage JWT claims, ensuring authentication and authorization are handled based on token data. This will allow the module to verify user roles and permissions effectively through JWT claims.

3. Comprehensive JWT Error Handling: 
Built-in error handling to manage potential JWT-related issues, such as token expiration, tampering, or invalid claims. This ensures that unauthorized access is
blocked, and clear error messages are provided when issues arise.

4. Robust Unit Tests for Validation: 
A full suite of unit tests covering various scenarios, including normal, boundary, and edge cases, to validate each method’s functionality and confirm that all
JWT-based authentication flows work reliably.

5. Detailed Documentation and Code Comments: 
In-depth documentation and comments would be added to each function, explaining purpose, usage, and JWT-related adjustments, aiding in code readability and future
maintenance.

== Test Plan ==

== Team ==
===Mentor===
*Kashika Mallick (kmallick@ncsu.edu)

===Members===
*Shafa Hassan (shassa22@ncsu.edu)
*Archit Gupta (agupta85@ncsu.edu)
*Ansh Ganatra (aganatr@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2487. Reimplement authorization helper.rb

2024-11-12T15:11:44Z

Shassa22:

== Background ==
The AuthorizationHelper module in Expertiza plays a critical role in managing user permissions and access control within the system. It provides methods to verify a user’s privileges based on their assigned roles, such as Super-Admin, Admin, Instructor, TA, or Student. These methods check if the user is authorized to perform actions like submitting assignments, reviewing work, or participating in quizzes. Additionally, it determines whether a user is involved in specific assignments, either as a participant, instructor, or through TA mappings.

==Problem Statement==

Expertiza currently uses session-based authentication in its [[https://github.com/expertiza/expertiza/blob/main/app/helpers/authorization_helper.rb| AuthorizationHelper]] module. The [[https://github.com/expertiza/reimplementation-back-end| reimplementation-back-end]] however, uses JWT (JSON Web Token) based authentication. This requires a redesign of the AuthorizationHelper module to accommodate JWT-based authentication.

The following points need to be taken care of as per the requirement

* JWT Creation : Make sure that a valid JSON Web Token is created which stores necessary details about the user and their role
* Token expiry and revocation : Token expiry and refresh mechanisms need to be implemented as well as a strategy for token revocation
* Remove dependency on session : The system has to be refactored, configured and tested thoroughly to ensure that having migrated to JWT, there is no dependency on Rails' session
* Writing rspec test cases for all JWT authentication helper methods to ensure proper exception and error handling

==Methods to implement==

* jwt_verify_and_decode(token): This method will verify and decode a JWT token and return the user's information, including role and claims. Successful verification of the token signature with the secret key will be followed by extraction of the payload which will contain important information about the user and their role for authentication and authorization.
* check_user_privileges(user_info, required_privilege): extract the user's roles or permissions from user_info (e.g., from the decoded JWT payload). Then, check if required_privilege exists within the user's permissions, returning true if it does and false otherwise to control access accordingly.

Further, the already existing methods need to be updated and need to be refactored to account for the new authentication system

== JWT Token Overview ==

A JSON Web Token (JWT) is a compact, URL-safe token format commonly used for securely transmitting information between parties. It is widely used in web applications for authentication and authorization, as it allows information to be verified and trusted. In the context of our reimplemented AuthorizationHelper module, JWT tokens will replace session-based authentication, enabling stateless and more secure access control.

Structure of a JWT
A JWT consists of three main parts:

*Header: Contains metadata about the token, such as the type (JWT) and the hashing algorithm used (e.g., HS256 or RS256).
*Payload: Includes claims, which are statements about an entity (typically, the user) and additional data like the user’s role and permissions.
*Signature: A cryptographic signature generated by encoding the header and payload with a secret key or private key, ensuring data integrity.
These three sections are separated by dots (.), forming a token that looks like this: <Header>.<Payload>.<Signature>

[[File:JWT-Workflow.png|500px|center]]]

==Anticipated Outcomes==
1. Enhanced AuthorizationHelper Module with JWT Integration: 
Updated and operational AuthorizationHelper module that would use JWT-based authentication. The module would be restructured to incorporate token-based authentication checks, replacing prior session-based methods.

2. Updated Associated Methods: 
Methods within the module will have to be updated to leverage JWT claims, ensuring authentication and authorization are handled based on token data. This allows
the module to verify user roles and permissions effectively through JWT claims.

3. Comprehensive JWT Error Handling: 
Built-in error handling to manage potential JWT-related issues, such as token expiration, tampering, or invalid claims. This ensures that unauthorized access is
blocked, and clear error messages are provided when issues arise.

4. Robust Unit Tests for Validation: 
A full suite of unit tests covering various scenarios, including normal, boundary, and edge cases, to validate each method’s functionality and confirm that all
JWT-based authentication flows work reliably.

5. Detailed Documentation and Code Comments: 
In-depth documentation and comments would be added to each function, explaining purpose, usage, and JWT-related adjustments, aiding in code readability and future
maintenance.

== Test Plan ==

== Team ==
===Mentor===
*Kashika Mallick (kmallick@ncsu.edu)

===Members===
*Shafa Hassan (shassa22@ncsu.edu)
*Archit Gupta (agupta85@ncsu.edu)
*Ansh Ganatra (aganatr@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2487. Reimplement authorization helper.rb

2024-11-12T14:59:08Z

Shassa22:

== Background ==
The AuthorizationHelper module in Expertiza plays a critical role in managing user permissions and access control within the system. It provides methods to verify a user’s privileges based on their assigned roles, such as Super-Admin, Admin, Instructor, TA, or Student. These methods check if the user is authorized to perform actions like submitting assignments, reviewing work, or participating in quizzes. Additionally, it determines whether a user is involved in specific assignments, either as a participant, instructor, or through TA mappings.

==Problem Statement==

Expertiza currently uses session-based authentication in its [[https://github.com/expertiza/expertiza/blob/main/app/helpers/authorization_helper.rb| AuthorizationHelper]] module. The [[https://github.com/expertiza/reimplementation-back-end| reimplementation-back-end]] however, uses JWT (JSON Web Token) based authentication. This requires a redesign of the AuthorizationHelper module to accommodate JWT-based authentication.

The following points need to be taken care of as per the requirement

* JWT Creation : Make sure that a valid JSON Web Token is created which stores necessary details about the user and their role
* Token expiry and revocation : Token expiry and refresh mechanisms need to be implemented as well as a strategy for token revocation
* Remove dependency on session : The system has to be refactored, configured and tested thoroughly to ensure that having migrated to JWT, there is no dependency on Rails' session
* Writing rspec test cases for all JWT authentication helper methods to ensure proper exception and error handling

==Methods to implement==

* jwt_verify_and_decode(token): This method will verify and decode a JWT token and return the user's information, including role and claims. Successful verification of the token signature with the secret key will be followed by extraction of the payload which will contain important information about the user and their role for authentication and authorization.
* check_user_privileges(user_info, required_privilege): extract the user's roles or permissions from user_info (e.g., from the decoded JWT payload). Then, check if required_privilege exists within the user's permissions, returning true if it does and false otherwise to control access accordingly.

Further, the already existing methods need to be updated and need to be refactored to account for the new authentication system

== JWT Token Overview ==

A JSON Web Token (JWT) is a compact, URL-safe token format commonly used for securely transmitting information between parties. It is widely used in web applications for authentication and authorization, as it allows information to be verified and trusted. In the context of our reimplemented AuthorizationHelper module, JWT tokens will replace session-based authentication, enabling stateless and more secure access control.

Structure of a JWT
A JWT consists of three main parts:

*Header: Contains metadata about the token, such as the type (JWT) and the hashing algorithm used (e.g., HS256 or RS256).
*Payload: Includes claims, which are statements about an entity (typically, the user) and additional data like the user’s role and permissions.
*Signature: A cryptographic signature generated by encoding the header and payload with a secret key or private key, ensuring data integrity.
These three sections are separated by dots (.), forming a token that looks like this: <Header>.<Payload>.<Signature>

[[File:JWT-Workflow.png|500px|center]]]

== Test Plan ==

== Team ==
===Mentor===
*Kashika Mallick (kmallick@ncsu.edu)

===Members===
*Shafa Hassan (shassa22@ncsu.edu)
*Archit Gupta (agupta85@ncsu.edu)
*Ansh Ganatra (aganatr@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2487. Reimplement authorization helper.rb

2024-11-12T14:39:52Z

Shassa22:

== Background ==

==Problem Statement==

Expertiza currently uses session-based authentication in its [[https://github.com/expertiza/expertiza/blob/main/app/helpers/authorization_helper.rb| AuthorizationHelper]] module. The [[https://github.com/expertiza/reimplementation-back-end| reimplementation-back-end]] however, uses JWT (JSON Web Token) based authentication. This requires a redesign of the AuthorizationHelper module to accommodate JWT-based authentication.

The following points need to be taken care of as per the requirement

* JWT Creation : Make sure that a valid JSON Web Token is created which stores necessary details about the user and their role
* Token expiry and revocation : Token expiry and refresh mechanisms need to be implemented as well as a strategy for token revocation
* Remove dependency on session : The system has to be refactored, configured and tested thoroughly to ensure that having migrated to JWT, there is no dependency on Rails' session
* Writing rspec test cases for all JWT authentication helper methods to ensure proper exception and error handling

==Methods to implement==

* jwt_verify_and_decode(token): This method will verify and decode a JWT token and return the user's information, including role and claims. Successful verification of the token signature with the secret key will be followed by extraction of the payload which will contain important information about the user and their role for authentication and authorization.
* check_user_privileges(user_info, required_privilege): extract the user's roles or permissions from user_info (e.g., from the decoded JWT payload). Then, check if required_privilege exists within the user's permissions, returning true if it does and false otherwise to control access accordingly.

Further, the already existing methods need to be updated and need to be refactored to account for the new authentication system

== JWT Token Overview ==

A JSON Web Token (JWT) is a compact, URL-safe token format commonly used for securely transmitting information between parties. It is widely used in web applications for authentication and authorization, as it allows information to be verified and trusted. In the context of our reimplemented AuthorizationHelper module, JWT tokens will replace session-based authentication, enabling stateless and more secure access control.

Structure of a JWT
A JWT consists of three main parts:

*Header: Contains metadata about the token, such as the type (JWT) and the hashing algorithm used (e.g., HS256 or RS256).
*Payload: Includes claims, which are statements about an entity (typically, the user) and additional data like the user’s role and permissions.
*Signature: A cryptographic signature generated by encoding the header and payload with a secret key or private key, ensuring data integrity.
These three sections are separated by dots (.), forming a token that looks like this: <Header>.<Payload>.<Signature>

[[File:JWT-Workflow.png|500px|center]]]

== Test Plan ==

== Team ==
===Mentor===
*Kashika Mallick (kmallick@ncsu.edu)

===Members===
*Shafa Hassan (shassa22@ncsu.edu)
*Archit Gupta (agupta85@ncsu.edu)
*Ansh Ganatra (aganatr@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2487. Reimplement authorization helper.rb

2024-11-12T14:37:07Z

Shassa22:

File:JWT-Workflow.png

2024-11-12T14:34:12Z

Shassa22:

CSC/ECE 517 Fall 2024 - E2487. Reimplement authorization helper.rb

2024-11-12T14:32:14Z

Shassa22:

CSC/ECE 517 Fall 2024 - E2487. Reimplement authorization helper.rb

2024-11-12T14:20:05Z

Shassa22:

CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view team

2024-10-29T21:42:46Z

Shassa22:

== Background ==
Expertiza is an open-source learning management system developed with Ruby on Rails, facilitating assignment creation, team management, and a structured peer review process. Designed for educational settings, Expertiza offers instructors tools to assign topics, manage teams, and allow students to collaborate on various assignment formats, including URLs and wiki pages. Its peer review functionality encourages students to provide feedback, promoting a collaborative learning experience.

==Problem Statement ==
This project focuses on reimplementing the grades/view_team page in Expertiza. The current interface lacks modern design aesthetics and usability standards making it challenging for users to access and understand grading data efficiently. Our objective is to develop a fully functional and visually cohesive front end for the Grades View page. By enhancing visual consistency, simplifying information display, improving responsiveness, giving users freedom to select views, and intuitive layout, this redesign aims to provide an improved user experience.

== Reimplementation and Improvements ==
=== Enhanced Peer Review and Author Feedback Filtering ===
 
==== I) Existing Design ====
[[File:ShowReviews Feedback.png|500px|center]]
 
==== II) Modified Design ====
[[File:GradesView2.png|500px|center]]
 
==== III) Files Changed for this Modification ====
 
1. [https://github.com/rarchitgupta/reimplementation-front-end/blob/feature/review-table-improvements/src/pages/ViewTeamGrades/Statistics.tsx Statistics.tsx]
 
2. [https://github.com/rarchitgupta/reimplementation-front-end/blob/feature/review-table-improvements/src/pages/ViewTeamGrades/Filters.tsx Filters.tsx]
 
3. [https://github.com/rarchitgupta/reimplementation-front-end/blob/feature/review-table-improvements/src/pages/ViewTeamGrades/ShowReviews.tsx ShowReviews.tsx]
 
 
The requirement in the statistic section of the grade page was to make changes to show dropdown selection menu for "Author Feedback" or "Reviews" and further add filtering based on the rounds (Round 1 or Round 2 or All) for "Author Feedback" or "Reviews".

To carry out the changes on first selection menu, we had toggle reviews and toggle feedback event listeners defined in statistics based on which we displayed the data using ShowReviews react componenet. These event listeners were passed to Filters component and which had drop down UI component for "Author Feedback" or "Reviews". Based on the option selected either toggleShowReviews or toggleAuthorFeedback were invoked.

To do make further changes to display data according to rounds, first in the Statistics component of react application we defined the state "roundSelected" and also defined listener function to update round (selectRound). This event listener function was passed to Filter react component which had the UI element for second drop down for rounds selection. Based on the round selected from the dropdown, we invoked selectRound event listener function. When this event listener function is invoked we update the state variable "roundSelected". And then this state variable is passed as props to ShowReviews react component which is responsible for iterating over "Author Feedback" or "Reviews" data and added the logic to show data with rounds based on the prop.

 
==== IV) Rationale ====
 
The "Show Reviews" and "Show Author Feedback" link displays all the peer reviews from Round 1 and Round 2 and author's feedback from both rounds in a single view. This forces the users to scroll all the rounds' reviews and feedback sequentially which can be overwhelming when users wish to view feedback from a specific round. Also, users don't have the freedom and control to choose to view all rounds' reviews/feedbacks or specific rounds' reviews/feedbacks. Additionally, a single view adds visual clutter and increases cognitive load.

With the 2 dropdowns users have more control over which reviews they would like to view. The first dropdown lets them choose from viewing reviews or author's feedback for the reviews provided, while the second dropdown allows them to select specific rounds (Round 1, Round 2, or both). This gives users the flexibility to focus on specific rounds as needed. Separating the reviews/author feedback based on a round filter reduces clutter, creating a cleaner, more organized layout. Users can now view reviews and feedback in a more structured way, which simplifies navigation and enhances readability and improves satisfaction.

 

=== Replaced the disorganized display of scores for submitted work, author feedback, and teammate reviews with a Structured Scorecard table for clearer presentation. ===
 
==== I) Existing Design ====
[[File:OldScorecard.png|500px|center]]
 
==== II) Modified Design ====
[[File:NewScorecard.png|500px|center]]
 
==== III) [Design pattern/solid/dry][TODO] ====
 
==== IV) [Code Snippet][TODO] ====
 
==== V) Rationale ====
 
The previous display of scores for submitted work, author feedback, and teammate reviews was fragmented and lacked clarity, making it difficult for users to interpret performance metrics at a glance. By introducing a structured scorecard table, we present all relevant data in a clear, organized format, enabling users to easily compare and understand scores across different rounds. This redesign improves usability by offering a more intuitive layout and better visibility of grading information.

 
=== Removed the names of reviewers as they are supposed to remain anonymous. ===
 
==== I) Existing Design ====
[[File:ReviewerNameChange.png|500px|center]]
 
==== II) Modified Design ====
[[File:ReviewerNameChange2.png|500px|center]]
 
==== III) [Design pattern/solid/dry][TODO] ====
 
==== IV) [Code Snippet][TODO] ====
 
==== V) Rationale ====
 
The reason for this change is to shift focus more on quality and content of feedback and reviews rather than identity of reviewers. Anonymity encourages the reviewers to provide constructive criticism as reviewers will review without concern for any issues or repercussions.

 
=== Removed information that didn’t add value ===
 
==== I) Existing Design ====
[[File:Contributer RangeRemoved.png|500px|center]]
 
==== II) [Design pattern/solid/dry][TODO] ====
 
==== IV) [Code Snippet][TODO] ====
 
==== V) Rationale ====
 
Contributor Name: The displayed contributor name only indicated the team member who submitted the work, which could cause confusion, as all team members contribute to the assignment. Additionally, team members' names are already displayed at the top of the page, making this information redundant. Removing it reduces visual clutter, focusing the user's attention on relevant grading information.
Score Range: The score range provided minimal value in understanding the overall grade, as the average score alone conveys a clearer summary of performance. By removing the range, the layout is simplified, helping users to focus on meaningful metrics without unnecessary data.

 
=== Styling of Review Table ===
 
==== I) Existing Design ====
[Image to be Added]
 
==== II) Modified Design ====
[Image to be Added]
 
==== III) [Design pattern/solid/dry][TODO] ====
 
==== IV) [Code Snippet][TODO] ====
 
==== V) Rationale ====

 
=== Fixed styling Toggle Question List ===
 
==== I) Existing Design ====
[[File:ToggleChange1.png|500px|center]]
 
==== II) Modified Design ====
[[File:ToggleChange.png|500px|center]]
 
==== III) [Design pattern/solid/dry][TODO] ====
 
==== IV) [Code Snippet][TODO] ====
 
==== V) Rationale ====
 
The "Toggle Question List" styling was refined for better alignment and readability, enhancing the clarity of the page’s interactive elements.

 
=== Unified Review Rounds Button and Interface Styling Update ===
 
==== I) Existing Design ====
[[File:ReviewTableSeparateView.png|500px|center]]
 
==== II) Modified Design ====
[[File:UnifiedReviewTable.png|500px|center]]
 
==== III) [Design pattern/solid/dry][TODO] ====
 
==== IV) [Code Snippet][TODO] ====
 
==== V) Rationale ====
 
Addition of “All Rounds’’ Button: The new "All Rounds" button allows users to view reviews from multiple rounds in a single table. This eliminates the need to switch between individual rounds, giving users a comprehensive view of the feedback across all rounds at once.
Color and Style Consistency: The colors and styles of the buttons were updated to match Expertiza’s established color scheme, ensuring a cohesive and professional look across the platform. This consistency aids in navigation, making the interface feel more intuitive and visually appealing.

 
=== Expanded Submission Links Display ===
 
==== I) Existing Design ====
[[File:ToggleSubmission.png|500px|center]]
 
==== II) Modified Design ====
[[File:ExpandedSubmissions.png|500px|center]]
 
==== III) [Design pattern/solid/dry][TODO] ====
 
==== IV) [Code Snippet][TODO] ====
 
==== V) Rationale ====
 
The change enhances usability by directly presenting all relevant submission links to users without requiring additional interaction to show or hide them. This expanded view allows for quicker access to project resources and a more streamlined experience, improving efficiency and clarity in the peer review process on the grades/view_team page.
 
== Testing ==
We have conducted comprehensive manual testing to verify the functionality, usability, and visual consistency of the reimplemented features.

1. Peer Review and Feedback Filter: Tested the dropdown options to confirm that users can correctly view specific rounds of peer reviews or author feedback as selected.
 
2. Scorecard Table: Checked that the Scorecard table displays relevant scores in an organized manner and ensured that the scoring data is correctly calculated.
 
3 Submission Links: Verified that the submission links were directly displayed, without the need to toggle them. Each link was tested individually to ensure it opens the correct resource without errors.
 
4. Styling Consistency: We compared the new styling of buttons, dropdowns, and tables with the rest of Expertiza's interface to ensure a cohesive look.
 
5. Anonymity of Reviewers: Verified that reviewers’ names were properly hidden, preserving anonymity throughout the review display
 
6. All Rounds Button: Tested the "All Rounds" button by viewing multiple rounds of reviews in a single table to confirm that users can easily access and interpret cumulative feedback without toggling between views.
 
== Repository Links ==
[https://github.com/rarchitgupta/reimplementation-front-end FrontEnd]

[https://github.com/expertiza/reimplementation-back-end Backend]

[https://github.com/expertiza/reimplementation-front-end/pull/62 Pull Request]
 
== Project Mentor ==
Kashika Mallick (kmallick@ncsu.edu)

 
== Team Members ==
Shafa Hassan (shassa22@ncsu.edu)
 
Archit Gupta (agupta85@ncsu.edu)
 
Ansh Ganatra (aganatr@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view team

2024-10-29T21:39:31Z

Shassa22:

== Background ==
Expertiza is an open-source learning management system developed with Ruby on Rails, facilitating assignment creation, team management, and a structured peer review process. Designed for educational settings, Expertiza offers instructors tools to assign topics, manage teams, and allow students to collaborate on various assignment formats, including URLs and wiki pages. Its peer review functionality encourages students to provide feedback, promoting a collaborative learning experience.

==Problem Statement ==
This project focuses on reimplementing the grades/view_team page in Expertiza. The current interface lacks modern design aesthetics and usability standards making it challenging for users to access and understand grading data efficiently. Our objective is to develop a fully functional and visually cohesive front end for the Grades View page. By enhancing visual consistency, simplifying information display, improving responsiveness, giving users freedom to select views, and intuitive layout, this redesign aims to provide an improved user experience.

== Reimplementation and Improvements ==
=== Enhanced Peer Review and Author Feedback Filtering ===
 
==== I) Existing Design ====
[[File:ShowReviews Feedback.png|500px|center]]
 
==== II) Modified Design ====
[[File:GradesView2.png|500px|center]]
 
==== III) Files Changed for this Modification ====
 
1. [https://github.com/rarchitgupta/reimplementation-front-end/blob/feature/review-table-improvements/src/pages/ViewTeamGrades/Statistics.tsx Statistics.tsx]
 
2. [https://github.com/rarchitgupta/reimplementation-front-end/blob/feature/review-table-improvements/src/pages/ViewTeamGrades/Filters.tsx Filters.tsx]
 
3. [https://github.com/rarchitgupta/reimplementation-front-end/blob/feature/review-table-improvements/src/pages/ViewTeamGrades/ShowReviews.tsx ShowReviews.tsx]
 
 
The requirement in the statistic section of the grade page was to make changes to show dropdown selection menu for "Author Feedback" or "Reviews" and further add filtering based on the rounds (Round 1 or Round 2 or All) for "Author Feedback" or "Reviews".

To carry out the changes on first selection menu, we had toggle reviews and toggle feedback event listeners defined in statistics based on which we displayed the data using ShowReviews react componenet. These event listeners were passed to Filters component and which had drop down UI component for "Author Feedback" or "Reviews". Based on the option selected either toggleShowReviews or toggleAuthorFeedback were invoked.

To do make further changes to display data according to rounds, first in the Statistics component of react application we defined the state "roundSelected" and also defined listener function to update round (selectRound). This event listener function was passed to Filter react component which had the UI element for second drop down for rounds selection. Based on the round selected from the dropdown, we invoked selectRound event listener function. When this event listener function is invoked we update the state variable "roundSelected". And then this state variable is passed as props to ShowReviews react component which is responsible for iterating over "Author Feedback" or "Reviews" data and added the logic to show data with rounds based on the prop.

 
==== IV) Rationale ====
 
The "Show Reviews" and "Show Author Feedback" link displays all the peer reviews from Round 1 and Round 2 and author's feedback from both rounds in a single view. This forces the users to scroll all the rounds' reviews and feedback sequentially which can be overwhelming when users wish to view feedback from a specific round. Also, users don't have the freedom and control to choose to view all rounds' reviews/feedbacks or specific rounds' reviews/feedbacks. Additionally, a single view adds visual clutter and increases cognitive load.

With the 2 dropdowns users have more control over which reviews they would like to view. The first dropdown lets them choose from viewing reviews or author's feedback for the reviews provided, while the second dropdown allows them to select specific rounds (Round 1, Round 2, or both). This gives users the flexibility to focus on specific rounds as needed. Separating the reviews/author feedback based on a round filter reduces clutter, creating a cleaner, more organized layout. Users can now view reviews and feedback in a more structured way, which simplifies navigation and enhances readability and improves satisfaction.

 

=== Replaced the disorganized display of scores for submitted work, author feedback, and teammate reviews with a Structured Scorecard table for clearer presentation. ===
 
==== I) Existing Design ====
[[File:OldScorecard.png|500px|center]]
 
==== II) Modified Design ====
[[File:NewScorecard.png|500px|center]]
 
==== III) [Design pattern/solid/dry][TODO] ====
 
==== IV) [Code Snippet][TODO] ====
 
==== V) Rationale ====
 
The previous display of scores for submitted work, author feedback, and teammate reviews was fragmented and lacked clarity, making it difficult for users to interpret performance metrics at a glance. By introducing a structured scorecard table, we present all relevant data in a clear, organized format, enabling users to easily compare and understand scores across different rounds. This redesign improves usability by offering a more intuitive layout and better visibility of grading information.

 
=== Removed the names of reviewers as they are supposed to remain anonymous. ===
 
==== I) Existing Design ====
[[File:ReviewerNameChange.png|500px|center]]
 
==== II) Modified Design ====
[[File:ReviewerNameChange2.png|500px|center]]
 
==== III) [Design pattern/solid/dry][TODO] ====
 
==== IV) [Code Snippet][TODO] ====
 
==== V) Rationale ====
 
The reason for this change is to shift focus more on quality and content of feedback and reviews rather than identity of reviewers. Anonymity encourages the reviewers to provide constructive criticism as reviewers will review without concern for any issues or repercussions.

 
=== Removed information that didn’t add value ===
 
==== I) Existing Design ====
[[File:Contributer RangeRemoved.png|500px|center]]
 
==== II) [Design pattern/solid/dry][TODO] ====
 
==== IV) [Code Snippet][TODO] ====
 
==== V) Rationale ====
 
Contributor Name: The displayed contributor name only indicated the team member who submitted the work, which could cause confusion, as all team members contribute to the assignment. Additionally, team members' names are already displayed at the top of the page, making this information redundant. Removing it reduces visual clutter, focusing the user's attention on relevant grading information.
Score Range: The score range provided minimal value in understanding the overall grade, as the average score alone conveys a clearer summary of performance. By removing the range, the layout is simplified, helping users to focus on meaningful metrics without unnecessary data.

 
=== Styling of Review Table ===
 
==== I) Existing Design ====
[Image to be Added]
 
==== II) Modified Design ====
[Image to be Added]
 
==== III) [Design pattern/solid/dry][TODO] ====
 
==== IV) [Code Snippet][TODO] ====
 
==== V) Rationale ====

 
=== Fixed styling Toggle Question List ===
 
==== I) Existing Design ====
[[File:ToggleChange1.png|500px|center]]
 
==== II) Modified Design ====
[[File:ToggleChange.png|500px|center]]
 
==== III) [Design pattern/solid/dry][TODO] ====
 
==== IV) [Code Snippet][TODO] ====
 
==== V) Rationale ====
 
The "Toggle Question List" styling was refined for better alignment and readability, enhancing the clarity of the page’s interactive elements.

 
=== Unified Review Rounds Button and Interface Styling Update ===
 
==== I) Existing Design ====
[[File:ReviewTableSeparateView.png|500px|center]]
 
==== II) Modified Design ====
[[File:UnifiedReviewTable.png|500px|center]]
 
==== III) [Design pattern/solid/dry][TODO] ====
 
==== IV) [Code Snippet][TODO] ====
 
==== V) Rationale ====
 
Addition of “All Rounds’’ Button: The new "All Rounds" button allows users to view reviews from multiple rounds in a single table. This eliminates the need to switch between individual rounds, giving users a comprehensive view of the feedback across all rounds at once.
Color and Style Consistency: The colors and styles of the buttons were updated to match Expertiza’s established color scheme, ensuring a cohesive and professional look across the platform. This consistency aids in navigation, making the interface feel more intuitive and visually appealing.

 
=== Expanded Submission Links Display ===
 
==== I) Existing Design ====
[[File:ToggleSubmission.png|500px|center]]
 
==== II) Modified Design ====
[[File:ExpandedSubmissions.png|500px|center]]
 
==== III) [Design pattern/solid/dry][TODO] ====
 
==== IV) [Code Snippet][TODO] ====
 
==== V) Rationale ====
 
The change enhances usability by directly presenting all relevant submission links to users without requiring additional interaction to show or hide them. This expanded view allows for quicker access to project resources and a more streamlined experience, improving efficiency and clarity in the peer review process on the grades/view_team page.

 
== Testing ==
We have conducted comprehensive manual testing to verify the functionality, usability, and visual consistency of the reimplemented features.

1. Peer Review and Feedback Filter: Tested the dropdown options to confirm that users can correctly view specific rounds of peer reviews or author feedback as selected.
 
2. Scorecard Table: Checked that the Scorecard table displays relevant scores in an organized manner and ensured that the scoring data is correctly calculated.
 
3 Submission Links: Verified that the submission links were directly displayed, without the need to toggle them. Each link was tested individually to ensure it opens the correct resource without errors.
 
4. Styling Consistency: We compared the new styling of buttons, dropdowns, and tables with the rest of Expertiza's interface to ensure a cohesive look.
 
5. Anonymity of Reviewers: Verified that reviewers’ names were properly hidden, preserving anonymity throughout the review display
 
6. All Rounds Button: Tested the "All Rounds" button by viewing multiple rounds of reviews in a single table to confirm that users can easily access and interpret cumulative feedback without toggling between views.
 

== Repository Links ==
[https://github.com/rarchitgupta/reimplementation-front-end FrontEnd]

[https://github.com/expertiza/reimplementation-back-end Backend]

[https://github.com/expertiza/reimplementation-front-end/pull/62 Pull Request]

 
== Project Mentor ==

Kashika Mallick (kmallick@ncsu.edu)

 
== Team Members ==

Shafa Hassan (shassa22@ncsu.edu)

Archit Gupta (agupta85@ncsu.edu)

Ansh Ganatra (aganatr@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view team

2024-10-29T21:34:13Z

Shassa22:

== Background ==
Expertiza is an open-source learning management system developed with Ruby on Rails, facilitating assignment creation, team management, and a structured peer review process. Designed for educational settings, Expertiza offers instructors tools to assign topics, manage teams, and allow students to collaborate on various assignment formats, including URLs and wiki pages. Its peer review functionality encourages students to provide feedback, promoting a collaborative learning experience.

==Problem Statement ==
This project focuses on reimplementing the grades/view_team page in Expertiza. The current interface lacks modern design aesthetics and usability standards making it challenging for users to access and understand grading data efficiently. Our objective is to develop a fully functional and visually cohesive front end for the Grades View page. By enhancing visual consistency, simplifying information display, improving responsiveness, giving users freedom to select views, and intuitive layout, this redesign aims to provide an improved user experience.

== Reimplementation and Improvements ==
=== Enhanced Peer Review and Author Feedback Filtering ===
 
==== I) Existing Design ====
[[File:ShowReviews Feedback.png|500px|center]]
 
==== II) Modified Design ====
[[File:GradesView2.png|500px|center]]
 
==== III) Files Changed for this Modification ====
 
1. [https://github.com/rarchitgupta/reimplementation-front-end/blob/feature/review-table-improvements/src/pages/ViewTeamGrades/Statistics.tsx Statistics.tsx]
 
2. [https://github.com/rarchitgupta/reimplementation-front-end/blob/feature/review-table-improvements/src/pages/ViewTeamGrades/Filters.tsx Filters.tsx]
 
3. [https://github.com/rarchitgupta/reimplementation-front-end/blob/feature/review-table-improvements/src/pages/ViewTeamGrades/ShowReviews.tsx ShowReviews.tsx]
 
 
The requirement in the statistic section of the grade page was to make changes to show dropdown selection menu for "Author Feedback" or "Reviews" and further add filtering based on the rounds (Round 1 or Round 2 or All) for "Author Feedback" or "Reviews".

To carry out the changes on first selection menu, we had toggle reviews and toggle feedback event listeners defined in statistics based on which we displayed the data using ShowReviews react componenet. These event listeners were passed to Filters component and which had drop down UI component for "Author Feedback" or "Reviews". Based on the option selected either toggleShowReviews or toggleAuthorFeedback were invoked.

To do make further changes to display data according to rounds, first in the Statistics component of react application we defined the state "roundSelected" and also defined listener function to update round (selectRound). This event listener function was passed to Filter react component which had the UI element for second drop down for rounds selection. Based on the round selected from the dropdown, we invoked selectRound event listener function. When this event listener function is invoked we update the state variable "roundSelected". And then this state variable is passed as props to ShowReviews react component which is responsible for iterating over "Author Feedback" or "Reviews" data and added the logic to show data with rounds based on the prop.

 
==== IV) Rationale ====
 
The "Show Reviews" and "Show Author Feedback" link displays all the peer reviews from Round 1 and Round 2 and author's feedback from both rounds in a single view. This forces the users to scroll all the rounds' reviews and feedback sequentially which can be overwhelming when users wish to view feedback from a specific round. Also, users don't have the freedom and control to choose to view all rounds' reviews/feedbacks or specific rounds' reviews/feedbacks. Additionally, a single view adds visual clutter and increases cognitive load.

With the 2 dropdowns users have more control over which reviews they would like to view. The first dropdown lets them choose from viewing reviews or author's feedback for the reviews provided, while the second dropdown allows them to select specific rounds (Round 1, Round 2, or both). This gives users the flexibility to focus on specific rounds as needed. Separating the reviews/author feedback based on a round filter reduces clutter, creating a cleaner, more organized layout. Users can now view reviews and feedback in a more structured way, which simplifies navigation and enhances readability and improves satisfaction.

 

=== Replaced the disorganized display of scores for submitted work, author feedback, and teammate reviews with a Structured Scorecard table for clearer presentation. ===
 
==== I) Existing Design ====
[[File:OldScorecard.png|500px|center]]
 
==== II) Modified Design ====
[[File:NewScorecard.png|500px|center]]
 
==== III) [Design pattern/solid/dry][TODO] ====
 
==== IV) [Code Snippet][TODO] ====
 
==== V) Rationale ====
 
The previous display of scores for submitted work, author feedback, and teammate reviews was fragmented and lacked clarity, making it difficult for users to interpret performance metrics at a glance. By introducing a structured scorecard table, we present all relevant data in a clear, organized format, enabling users to easily compare and understand scores across different rounds. This redesign improves usability by offering a more intuitive layout and better visibility of grading information.

 
=== Removed the names of reviewers as they are supposed to remain anonymous. ===
 
a. Existing Design
[[File:ReviewerNameChange.png|500px|center]]
 
b. Modified Design
[[File:ReviewerNameChange2.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
The reason for this change is to shift focus more on quality and content of feedback and reviews rather than identity of reviewers. Anonymity encourages the reviewers to provide constructive criticism as reviewers will review without concern for any issues or repercussions.

 
=== Removed information that didn’t add value ===
 
a.Existing Design
[[File:Contributer RangeRemoved.png|500px|center]]
 
b.[Design pattern/solid/dry][TODO]
 
c.[Code Snippet][TODO]
 
d.Rationale
 
Contributor Name: The displayed contributor name only indicated the team member who submitted the work, which could cause confusion, as all team members contribute to the assignment. Additionally, team members' names are already displayed at the top of the page, making this information redundant. Removing it reduces visual clutter, focusing the user's attention on relevant grading information.
Score Range: The score range provided minimal value in understanding the overall grade, as the average score alone conveys a clearer summary of performance. By removing the range, the layout is simplified, helping users to focus on meaningful metrics without unnecessary data.

 
=== Styling of Review Table ===
 
a. Existing Design
[Image to be Added]
 
b. Modified Design
[Image to be Added]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale

 
=== Fixed styling Toggle Question List ===
 
a. Existing Design
[[File:ToggleChange1.png|500px|center]]
 
b. Modified Design
[[File:ToggleChange.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
The "Toggle Question List" styling was refined for better alignment and readability, enhancing the clarity of the page’s interactive elements.

 
=== Unified Review Rounds Button and Interface Styling Update ===
 
a. Existing Design
[[File:ReviewTableSeparateView.png|500px|center]]
 
b. Modified Design
[[File:UnifiedReviewTable.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
Addition of “All Rounds’’ Button: The new "All Rounds" button allows users to view reviews from multiple rounds in a single table. This eliminates the need to switch between individual rounds, giving users a comprehensive view of the feedback across all rounds at once.
Color and Style Consistency: The colors and styles of the buttons were updated to match Expertiza’s established color scheme, ensuring a cohesive and professional look across the platform. This consistency aids in navigation, making the interface feel more intuitive and visually appealing.

 
=== Expanded Submission Links Display ===
 
a. Existing Design
[[File:ToggleSubmission.png|500px|center]]
 
b. Modified Design
[[File:ExpandedSubmissions.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
The change enhances usability by directly presenting all relevant submission links to users without requiring additional interaction to show or hide them. This expanded view allows for quicker access to project resources and a more streamlined experience, improving efficiency and clarity in the peer review process on the grades/view_team page.

 
== Testing ==
We have conducted comprehensive manual testing to verify the functionality, usability, and visual consistency of the reimplemented features.

1. Peer Review and Feedback Filter: Tested the dropdown options to confirm that users can correctly view specific rounds of peer reviews or author feedback as selected.
 
2. Scorecard Table: Checked that the Scorecard table displays relevant scores in an organized manner and ensured that the scoring data is correctly calculated.
 
3 Submission Links: Verified that the submission links were directly displayed, without the need to toggle them. Each link was tested individually to ensure it opens the correct resource without errors.
 
4. Styling Consistency: We compared the new styling of buttons, dropdowns, and tables with the rest of Expertiza's interface to ensure a cohesive look.
 
5. Anonymity of Reviewers: Verified that reviewers’ names were properly hidden, preserving anonymity throughout the review display
 
6. All Rounds Button: Tested the "All Rounds" button by viewing multiple rounds of reviews in a single table to confirm that users can easily access and interpret cumulative feedback without toggling between views.
 

== Repository Links ==
[https://github.com/rarchitgupta/reimplementation-front-end FrontEnd]

[https://github.com/expertiza/reimplementation-back-end Backend]

[<Link to be Added> Pull Request]

 
== Project Mentor ==

Kashika Mallick (kmallick@ncsu.edu)

 
== Team Members ==

Shafa Hassan (shassa22@ncsu.edu)

Archit Gupta (agupta85@ncsu.edu)

Ansh Ganatra (aganatr@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view team

2024-10-29T21:28:03Z

Shassa22:

== Background ==
Expertiza is an open-source learning management system developed with Ruby on Rails, facilitating assignment creation, team management, and a structured peer review process. Designed for educational settings, Expertiza offers instructors tools to assign topics, manage teams, and allow students to collaborate on various assignment formats, including URLs and wiki pages. Its peer review functionality encourages students to provide feedback, promoting a collaborative learning experience.

==Problem Statement ==
This project focuses on reimplementing the grades/view_team page in Expertiza. The current interface lacks modern design aesthetics and usability standards making it challenging for users to access and understand grading data efficiently. Our objective is to develop a fully functional and visually cohesive front end for the Grades View page. By enhancing visual consistency, simplifying information display, improving responsiveness, giving users freedom to select views, and intuitive layout, this redesign aims to provide an improved user experience.

== Reimplementation and Improvements ==
=== Enhanced Peer Review and Author Feedback Filtering ===
 
a.Existing Design
[[File:ShowReviews Feedback.png|500px|center]]
 
b. Modified Design
[[File:GradesView2.png|500px|center]]
 
c.Files Changed for this Modification
 
1. [https://github.com/rarchitgupta/reimplementation-front-end/blob/feature/review-table-improvements/src/pages/ViewTeamGrades/Statistics.tsx Statistics.tsx]
 
2. [https://github.com/rarchitgupta/reimplementation-front-end/blob/feature/review-table-improvements/src/pages/ViewTeamGrades/Filters.tsx Filters.tsx]
 
3. [https://github.com/rarchitgupta/reimplementation-front-end/blob/feature/review-table-improvements/src/pages/ViewTeamGrades/ShowReviews.tsx ShowReviews.tsx]
 
The requirement in the statistic section of the grade page was to make changes to show dropdown selection menu for "Author Feedback" or "Reviews" and further add filtering based on the rounds (Round 1 or Round 2 or All) for "Author Feedback" or "Reviews".

To carry out the changes on first selection menu, we had toggle reviews and toggle feedback event listeners defined in statistics based on which we displayed the data using ShowReviews react componenet. These event listeners were passed to Filters component and which had drop down UI component for "Author Feedback" or "Reviews". Based on the option selected either toggleShowReviews or toggleAuthorFeedback were invoked.

To do make further changes to display data according to rounds, first in the Statistics component of react application we defined the state "roundSelected" and also defined listener function to update round (selectRound). This event listener function was passed to Filter react component which had the UI element for second drop down for rounds selection. Based on the round selected from the dropdown, we invoked selectRound event listener function. When this event listener function is invoked we update the state variable "roundSelected". And then this state variable is passed as props to ShowReviews react component which is responsible for iterating over "Author Feedback" or "Reviews" data and added the logic to show data with rounds based on the prop.

 
e.Rationale
 
The "Show Reviews" and "Show Author Feedback" link displays all the peer reviews from Round 1 and Round 2 and author's feedback from both rounds in a single view. This forces the users to scroll all the rounds' reviews and feedback sequentially which can be overwhelming when users wish to view feedback from a specific round. Also, users don't have the freedom and control to choose to view all rounds' reviews/feedbacks or specific rounds' reviews/feedbacks. Additionally, a single view adds visual clutter and increases cognitive load.

With the 2 dropdowns users have more control over which reviews they would like to view. The first dropdown lets them choose from viewing reviews or author's feedback for the reviews provided, while the second dropdown allows them to select specific rounds (Round 1, Round 2, or both). This gives users the flexibility to focus on specific rounds as needed. Separating the reviews/author feedback based on a round filter reduces clutter, creating a cleaner, more organized layout. Users can now view reviews and feedback in a more structured way, which simplifies navigation and enhances readability and improves satisfaction.

 

=== Replaced the disorganized display of scores for submitted work, author feedback, and teammate reviews with a Structured Scorecard table for clearer presentation. ===
 
a. Existing Design
[[File:OldScorecard.png|500px|center]]
 
b. Modified Design
[[File:NewScorecard.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
The previous display of scores for submitted work, author feedback, and teammate reviews was fragmented and lacked clarity, making it difficult for users to interpret performance metrics at a glance. By introducing a structured scorecard table, we present all relevant data in a clear, organized format, enabling users to easily compare and understand scores across different rounds. This redesign improves usability by offering a more intuitive layout and better visibility of grading information.

 
=== Removed the names of reviewers as they are supposed to remain anonymous. ===
 
a. Existing Design
[[File:ReviewerNameChange.png|500px|center]]
 
b. Modified Design
[[File:ReviewerNameChange2.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
The reason for this change is to shift focus more on quality and content of feedback and reviews rather than identity of reviewers. Anonymity encourages the reviewers to provide constructive criticism as reviewers will review without concern for any issues or repercussions.

 
=== Removed information that didn’t add value ===
 
a.Existing Design
[[File:Contributer RangeRemoved.png|500px|center]]
 
b.[Design pattern/solid/dry][TODO]
 
c.[Code Snippet][TODO]
 
d.Rationale
 
Contributor Name: The displayed contributor name only indicated the team member who submitted the work, which could cause confusion, as all team members contribute to the assignment. Additionally, team members' names are already displayed at the top of the page, making this information redundant. Removing it reduces visual clutter, focusing the user's attention on relevant grading information.
Score Range: The score range provided minimal value in understanding the overall grade, as the average score alone conveys a clearer summary of performance. By removing the range, the layout is simplified, helping users to focus on meaningful metrics without unnecessary data.

 
=== Styling of Review Table ===
 
a. Existing Design
[Image to be Added]
 
b. Modified Design
[Image to be Added]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale

 
=== Fixed styling Toggle Question List ===
 
a. Existing Design
[[File:ToggleChange1.png|500px|center]]
 
b. Modified Design
[[File:ToggleChange.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
The "Toggle Question List" styling was refined for better alignment and readability, enhancing the clarity of the page’s interactive elements.

 
=== Unified Review Rounds Button and Interface Styling Update ===
 
a. Existing Design
[[File:ReviewTableSeparateView.png|500px|center]]
 
b. Modified Design
[[File:UnifiedReviewTable.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
Addition of “All Rounds’’ Button: The new "All Rounds" button allows users to view reviews from multiple rounds in a single table. This eliminates the need to switch between individual rounds, giving users a comprehensive view of the feedback across all rounds at once.
Color and Style Consistency: The colors and styles of the buttons were updated to match Expertiza’s established color scheme, ensuring a cohesive and professional look across the platform. This consistency aids in navigation, making the interface feel more intuitive and visually appealing.

 
=== Expanded Submission Links Display ===
 
a. Existing Design
[[File:ToggleSubmission.png|500px|center]]
 
b. Modified Design
[[File:ExpandedSubmissions.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
The change enhances usability by directly presenting all relevant submission links to users without requiring additional interaction to show or hide them. This expanded view allows for quicker access to project resources and a more streamlined experience, improving efficiency and clarity in the peer review process on the grades/view_team page.

 
== Testing ==
We have conducted comprehensive manual testing to verify the functionality, usability, and visual consistency of the reimplemented features.

1. Peer Review and Feedback Filter: Tested the dropdown options to confirm that users can correctly view specific rounds of peer reviews or author feedback as selected.
 
2. Scorecard Table: Checked that the Scorecard table displays relevant scores in an organized manner and ensured that the scoring data is correctly calculated.
 
3 Submission Links: Verified that the submission links were directly displayed, without the need to toggle them. Each link was tested individually to ensure it opens the correct resource without errors.
 
4. Styling Consistency: We compared the new styling of buttons, dropdowns, and tables with the rest of Expertiza's interface to ensure a cohesive look.
 
5. Anonymity of Reviewers: Verified that reviewers’ names were properly hidden, preserving anonymity throughout the review display
 
6. All Rounds Button: Tested the "All Rounds" button by viewing multiple rounds of reviews in a single table to confirm that users can easily access and interpret cumulative feedback without toggling between views.
 

== Repository Links ==
[https://github.com/rarchitgupta/reimplementation-front-end FrontEnd]

[https://github.com/expertiza/reimplementation-back-end Backend]

[<Link to be Added> Pull Request]

 
== Project Mentor ==

Kashika Mallick (kmallick@ncsu.edu)

 
== Team Members ==

Shafa Hassan (shassa22@ncsu.edu)

Archit Gupta (agupta85@ncsu.edu)

Ansh Ganatra (aganatr@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view team

2024-10-29T20:22:09Z

Shassa22: /* Testing */

== Background ==
Expertiza is an open-source learning management system developed with Ruby on Rails, facilitating assignment creation, team management, and a structured peer review process. Designed for educational settings, Expertiza offers instructors tools to assign topics, manage teams, and allow students to collaborate on various assignment formats, including URLs and wiki pages. Its peer review functionality encourages students to provide feedback, promoting a collaborative learning experience.

==Problem Statement ==
This project focuses on reimplementing the grades/view_team page in Expertiza. The current interface lacks modern design aesthetics and usability standards making it challenging for users to access and understand grading data efficiently. Our objective is to develop a fully functional and visually cohesive front end for the Grades View page. By enhancing visual consistency, simplifying information display, improving responsiveness, giving users freedom to select views, and intuitive layout, this redesign aims to provide an improved user experience.

== Reimplementation and Improvements ==
=== Enhanced Peer Review and Author Feedback Filtering ===
 
a.Existing Design
[[File:ShowReviews Feedback.png|500px|center]]
 
b. Modified Design
[[File:GradesView2.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
The "Show Reviews" and "Show Author Feedback" link displays all the peer reviews from Round 1 and Round 2 and author's feedback from both rounds in a single view. This forces the users to scroll all the rounds' reviews and feedback sequentially which can be overwhelming when users wish to view feedback from a specific round. Also, users don't have the freedom and control to choose to view all rounds' reviews/feedbacks or specific rounds' reviews/feedbacks. Additionally, a single view adds visual clutter and increases cognitive load.

With the 2 dropdowns users have more control over which reviews they would like to view. The first dropdown lets them choose from viewing reviews or author's feedback for the reviews provided, while the second dropdown allows them to select specific rounds (Round 1, Round 2, or both). This gives users the flexibility to focus on specific rounds as needed. Separating the reviews/author feedback based on a round filter reduces clutter, creating a cleaner, more organized layout. Users can now view reviews and feedback in a more structured way, which simplifies navigation and enhances readability and improves satisfaction.

 

=== Replaced the disorganized display of scores for submitted work, author feedback, and teammate reviews with a Structured Scorecard table for clearer presentation. ===
 
a. Existing Design
[[File:OldScorecard.png|500px|center]]
 
b. Modified Design
[[File:NewScorecard.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
The previous display of scores for submitted work, author feedback, and teammate reviews was fragmented and lacked clarity, making it difficult for users to interpret performance metrics at a glance. By introducing a structured scorecard table, we present all relevant data in a clear, organized format, enabling users to easily compare and understand scores across different rounds. This redesign improves usability by offering a more intuitive layout and better visibility of grading information.

 
=== Removed the names of reviewers as they are supposed to remain anonymous. ===
 
a. Existing Design
[[File:ReviewerNameChange.png|500px|center]]
 
b. Modified Design
[[File:ReviewerNameChange2.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
The reason for this change is to shift focus more on quality and content of feedback and reviews rather than identity of reviewers. Anonymity encourages the reviewers to provide constructive criticism as reviewers will review without concern for any issues or repercussions.

 
=== Removed information that didn’t add value ===
 
a.Existing Design
[[File:Contributer RangeRemoved.png|500px|center]]
 
b.[Design pattern/solid/dry][TODO]
 
c.[Code Snippet][TODO]
 
d.Rationale
 
Contributor Name: The displayed contributor name only indicated the team member who submitted the work, which could cause confusion, as all team members contribute to the assignment. Additionally, team members' names are already displayed at the top of the page, making this information redundant. Removing it reduces visual clutter, focusing the user's attention on relevant grading information.
Score Range: The score range provided minimal value in understanding the overall grade, as the average score alone conveys a clearer summary of performance. By removing the range, the layout is simplified, helping users to focus on meaningful metrics without unnecessary data.

 
=== Styling of Review Table ===
 
a. Existing Design
[Image to be Added]
 
b. Modified Design
[Image to be Added]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale

 
=== Fixed styling Toggle Question List ===
 
a. Existing Design
[[File:ToggleChange1.png|500px|center]]
 
b. Modified Design
[[File:ToggleChange.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
The "Toggle Question List" styling was refined for better alignment and readability, enhancing the clarity of the page’s interactive elements.

 
=== Unified Review Rounds Button and Interface Styling Update ===
 
a. Existing Design
[[File:ReviewTableSeparateView.png|500px|center]]
 
b. Modified Design
[[File:UnifiedReviewTable.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
Addition of “All Rounds’’ Button: The new "All Rounds" button allows users to view reviews from multiple rounds in a single table. This eliminates the need to switch between individual rounds, giving users a comprehensive view of the feedback across all rounds at once.
Color and Style Consistency: The colors and styles of the buttons were updated to match Expertiza’s established color scheme, ensuring a cohesive and professional look across the platform. This consistency aids in navigation, making the interface feel more intuitive and visually appealing.

 
=== Expanded Submission Links Display ===
 
a. Existing Design
[[File:ToggleSubmission.png|500px|center]]
 
b. Modified Design
[[File:ExpandedSubmissions.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
The change enhances usability by directly presenting all relevant submission links to users without requiring additional interaction to show or hide them. This expanded view allows for quicker access to project resources and a more streamlined experience, improving efficiency and clarity in the peer review process on the grades/view_team page.

 
== Testing ==
We have conducted comprehensive manual testing to verify the functionality, usability, and visual consistency of the reimplemented features.

1. Peer Review and Feedback Filter: Tested the dropdown options to confirm that users can correctly view specific rounds of peer reviews or author feedback as selected.
 
2. Scorecard Table: Checked that the Scorecard table displays relevant scores in an organized manner and ensured that the scoring data is correctly calculated.
 
3 Submission Links: Verified that the submission links were directly displayed, without the need to toggle them. Each link was tested individually to ensure it opens the correct resource without errors.
 
4. Styling Consistency: We compared the new styling of buttons, dropdowns, and tables with the rest of Expertiza's interface to ensure a cohesive look.
 
5. Anonymity of Reviewers: Verified that reviewers’ names were properly hidden, preserving anonymity throughout the review display
 
6. All Rounds Button: Tested the "All Rounds" button by viewing multiple rounds of reviews in a single table to confirm that users can easily access and interpret cumulative feedback without toggling between views.
 

== Repository Links ==
[https://github.com/rarchitgupta/reimplementation-front-end FrontEnd]

[https://github.com/expertiza/reimplementation-back-end Backend]

[<Link to be Added> Pull Request]

 
== Project Mentor ==

Kashika Mallick (kmallick@ncsu.edu)

 
== Team Members ==

Shafa Hassan (shassa22@ncsu.edu)

Archit Gupta (agupta85@ncsu.edu)

Ansh Ganatra (aganatr@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view team

2024-10-29T20:20:26Z

Shassa22:

== Background ==
Expertiza is an open-source learning management system developed with Ruby on Rails, facilitating assignment creation, team management, and a structured peer review process. Designed for educational settings, Expertiza offers instructors tools to assign topics, manage teams, and allow students to collaborate on various assignment formats, including URLs and wiki pages. Its peer review functionality encourages students to provide feedback, promoting a collaborative learning experience.

==Problem Statement ==
This project focuses on reimplementing the grades/view_team page in Expertiza. The current interface lacks modern design aesthetics and usability standards making it challenging for users to access and understand grading data efficiently. Our objective is to develop a fully functional and visually cohesive front end for the Grades View page. By enhancing visual consistency, simplifying information display, improving responsiveness, giving users freedom to select views, and intuitive layout, this redesign aims to provide an improved user experience.

== Reimplementation and Improvements ==
=== Enhanced Peer Review and Author Feedback Filtering ===
 
a.Existing Design
[[File:ShowReviews Feedback.png|500px|center]]
 
b. Modified Design
[[File:GradesView2.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
The "Show Reviews" and "Show Author Feedback" link displays all the peer reviews from Round 1 and Round 2 and author's feedback from both rounds in a single view. This forces the users to scroll all the rounds' reviews and feedback sequentially which can be overwhelming when users wish to view feedback from a specific round. Also, users don't have the freedom and control to choose to view all rounds' reviews/feedbacks or specific rounds' reviews/feedbacks. Additionally, a single view adds visual clutter and increases cognitive load.

With the 2 dropdowns users have more control over which reviews they would like to view. The first dropdown lets them choose from viewing reviews or author's feedback for the reviews provided, while the second dropdown allows them to select specific rounds (Round 1, Round 2, or both). This gives users the flexibility to focus on specific rounds as needed. Separating the reviews/author feedback based on a round filter reduces clutter, creating a cleaner, more organized layout. Users can now view reviews and feedback in a more structured way, which simplifies navigation and enhances readability and improves satisfaction.

 

=== Replaced the disorganized display of scores for submitted work, author feedback, and teammate reviews with a Structured Scorecard table for clearer presentation. ===
 
a. Existing Design
[[File:OldScorecard.png|500px|center]]
 
b. Modified Design
[[File:NewScorecard.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
The previous display of scores for submitted work, author feedback, and teammate reviews was fragmented and lacked clarity, making it difficult for users to interpret performance metrics at a glance. By introducing a structured scorecard table, we present all relevant data in a clear, organized format, enabling users to easily compare and understand scores across different rounds. This redesign improves usability by offering a more intuitive layout and better visibility of grading information.

 
=== Removed the names of reviewers as they are supposed to remain anonymous. ===
 
a. Existing Design
[[File:ReviewerNameChange.png|500px|center]]
 
b. Modified Design
[[File:ReviewerNameChange2.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
The reason for this change is to shift focus more on quality and content of feedback and reviews rather than identity of reviewers. Anonymity encourages the reviewers to provide constructive criticism as reviewers will review without concern for any issues or repercussions.

 
=== Removed information that didn’t add value ===
 
a.Existing Design
[[File:Contributer RangeRemoved.png|500px|center]]
 
b.[Design pattern/solid/dry][TODO]
 
c.[Code Snippet][TODO]
 
d.Rationale
 
Contributor Name: The displayed contributor name only indicated the team member who submitted the work, which could cause confusion, as all team members contribute to the assignment. Additionally, team members' names are already displayed at the top of the page, making this information redundant. Removing it reduces visual clutter, focusing the user's attention on relevant grading information.
Score Range: The score range provided minimal value in understanding the overall grade, as the average score alone conveys a clearer summary of performance. By removing the range, the layout is simplified, helping users to focus on meaningful metrics without unnecessary data.

 
=== Styling of Review Table ===
 
a. Existing Design
[Image to be Added]
 
b. Modified Design
[Image to be Added]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale

 
=== Fixed styling Toggle Question List ===
 
a. Existing Design
[[File:ToggleChange1.png|500px|center]]
 
b. Modified Design
[[File:ToggleChange.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
The "Toggle Question List" styling was refined for better alignment and readability, enhancing the clarity of the page’s interactive elements.

 
=== Unified Review Rounds Button and Interface Styling Update ===
 
a. Existing Design
[[File:ReviewTableSeparateView.png|500px|center]]
 
b. Modified Design
[[File:UnifiedReviewTable.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
Addition of “All Rounds’’ Button: The new "All Rounds" button allows users to view reviews from multiple rounds in a single table. This eliminates the need to switch between individual rounds, giving users a comprehensive view of the feedback across all rounds at once.
Color and Style Consistency: The colors and styles of the buttons were updated to match Expertiza’s established color scheme, ensuring a cohesive and professional look across the platform. This consistency aids in navigation, making the interface feel more intuitive and visually appealing.

 
=== Expanded Submission Links Display ===
 
a. Existing Design
[[File:ToggleSubmission.png|500px|center]]
 
b. Modified Design
[[File:ExpandedSubmissions.png|500px|center]]
 
c.[Design pattern/solid/dry][TODO]
 
d.[Code Snippet][TODO]
 
e.Rationale
 
The change enhances usability by directly presenting all relevant submission links to users without requiring additional interaction to show or hide them. This expanded view allows for quicker access to project resources and a more streamlined experience, improving efficiency and clarity in the peer review process on the grades/view_team page.

 
== Testing ==
We have conducted comprehensive manual testing to verify the functionality, usability, and visual consistency of the reimplemented features.

1. Peer Review and Feedback Filter: Tested the dropdown options to confirm that users can correctly view specific rounds of peer reviews or author feedback as selected.
 
2. Scorecard Table: Checked that the Scorecard table displays relevant scores in an organized manner and ensured that the scoring data is correctly calculated.
 
3 Submission Links: Verified that the submission links were directly displayed, without the need to toggle them. Each link was tested individually to ensure it opens the correct resource without errors.
 
4. Styling Consistency: We compared the new styling of buttons, dropdowns, and tables with the rest of Expertiza's interface to ensure a cohesive look.
 
5. Anonymity of Reviewers: Verified that reviewers’ names were properly hidden, preserving anonymity throughout the review display
 
6. All Rounds Button: Tested the "All Rounds" button by viewing multiple rounds of reviews in a single table to confirm that users can easily access and interpret cumulative feedback without toggling between views.
 

== Repository Links ==
[https://github.com/rarchitgupta/reimplementation-front-end FrontEnd]

[https://github.com/expertiza/reimplementation-back-end Backend]

[<Link to be Added> Pull Request]

 
== Project Mentor ==

Kashika Mallick (kmallick@ncsu.edu)

 
== Team Members ==

Shafa Hassan (shassa22@ncsu.edu)

Archit Gupta (agupta85@ncsu.edu)

Ansh Ganatra (aganatr@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view team

2024-10-29T19:46:43Z

Shassa22:

CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view team

2024-10-29T16:04:00Z

Shassa22: /* Enhanced review filtering and author */

CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view team

2024-10-29T15:46:30Z

Shassa22:

CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view team

2024-10-29T15:44:48Z

Shassa22:

CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view team

2024-10-29T15:37:23Z

Shassa22:

CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view team

2024-10-29T15:36:13Z

Shassa22:

CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view team

2024-10-29T15:33:13Z

Shassa22:

File:ExpandedSubmissions.png

2024-10-29T15:32:05Z

Shassa22:

File:ToggleSubmission.png

2024-10-29T15:31:27Z

Shassa22:

File:ReviewTableSeparateView.png

2024-10-29T15:28:32Z

Shassa22:

File:UnifiedReviewTable.png

2024-10-29T15:28:00Z

Shassa22:

File:ToggleChange1.png

2024-10-29T15:26:26Z

Shassa22:

File:ToggleChange.png

2024-10-29T15:25:53Z

Shassa22:

File:Contributer RangeRemoved.png

2024-10-29T15:23:15Z

Shassa22:

CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view team

2024-10-29T15:21:16Z

Shassa22:

File:ReviewerNameChange.png

2024-10-29T15:20:41Z

Shassa22:

File:ReviewerNameChange2.png

2024-10-29T15:20:18Z

Shassa22:

File:OldScorecard.png

2024-10-29T15:17:11Z

Shassa22:

File:NewScorecard.png

2024-10-29T15:16:22Z

Shassa22:

CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view team

2024-10-29T15:10:37Z

Shassa22:

File:GradesView2.png

2024-10-29T14:57:45Z

Shassa22: Shassa22 uploaded a new version of File:GradesView2.png

File:GradesView2.png

2024-10-29T14:55:57Z

Shassa22:

CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view team

2024-10-29T14:11:21Z

Shassa22:

File:ShowReviews Feedback.png

2024-10-29T14:03:32Z

Shassa22: