CSC/ECE 517 Spring 2025/oss E2521: Difference between revisions

From Expertiza_Wiki
Jump to navigation Jump to search
(Created page with "==About Expertiza== Expertiza is an open-source platform built on the Ruby on Rails framework. It facilitates collaborative learning by allowing instructors to create assignments, manage peer reviews, and track submissions. The platform supports various file formats, including document uploads, URLs, and wiki pages. Students can work in teams, review each other's work, and receive feedback. Expertiza's modular architecture supports continuous improvement and adaptation t...")
 
No edit summary
 
(16 intermediate revisions by the same user not shown)
Line 5: Line 5:


==Problem Statement==
==Problem Statement==
The goal of this project is to enhance the user interface for the "View Submissions" and "Assign Grades" pages. This improvement focuses on increasing the efficiency and usability of the grading workflow while ensuring accessibility and robust data handling.
The goal of this project is to implement the user interface for the "View Submissions" and "Assign Grades" pages for the reimplementation of Expertiza in Typescript and React. This improvement focuses on increasing the efficiency and usability of the grading workflow while ensuring accessibility and robust data handling.


The following tasks were completed as part of this project:
The following tasks outlined as part of this project:


<ol>
<ol>
<li>Redesigned the "View Submissions" page to display comprehensive team information and streamline navigation.
<li>Redesigned the "View Submissions" page to display team information and streamline navigation to relevant pages.
<li>Enhanced the "Assign Grades" page to support input validation, error handling, and seamless submission of grades and comments.
<li>Design the "Assign Grades" page to support input validation, error handling, and submission of grades and comments.
<li>Improved backend integration to ensure real-time synchronization with the reimplementation backend APIs.
<li>Implement backend integration to ensure real-time synchronization with the reimplementation backend APIs.
<li>Implemented error handling and improved accessibility across devices.
<li>Implement error handling and improve accessibility across devices.
</ol>
</ol>


Line 19: Line 19:


===UI Design===
===UI Design===
The updated "View Submissions" page provides a clear and interactive interface for instructors to manage and review team submissions. Key elements include:
The reimplemented "View Submissions" page provides a clear and interactive interface for instructors to manage and review team submissions. Key elements include:


<ul>
<ul>
Line 26: Line 26:
<li>Dynamic Column Widths: Optimized table layout to prevent excessive width by adjusting the links column dynamically.
<li>Dynamic Column Widths: Optimized table layout to prevent excessive width by adjusting the links column dynamically.
</ul>
</ul>
Note that the Submission History page has not yet been implemented in the front-end reimplementation. As such, the History link currently navigates back to the assignment edit page.
The "View Submissions" page works for team and individual assignments. If assignment is an individual assignment, the Team Name category will not be displayed in the list of submissions.
[[Image:Screenshot 2025-03-28 at 6.29.08 AM.png|600px]]


===Backend Integration===
===Backend Integration===
Line 33: Line 39:
<li>Assignment information
<li>Assignment information
<li>Team member details
<li>Team member details
<li>Submission history
</ul>
</ul>
Relevant controllers and routes within the reimplementation back end. In consultation with the professor, a list_submissions method was added to the AssignmentsController (assignment_controller.rb) to enable fetching submissions data.
Though links to submitted content is intended to be displayed on the view submissions page, the relevant backend controllers have also not yet been implemented. On the instruction of the professor, retrieval of submission links was omitted for this iteration of the assignment.


===Functionality===
===Functionality===
<ul>
<ul>
<li>Navigation: Clicking the "Assign Grade" link redirects the user to the "Assign Grades" page.
<li>Navigation: Clicking the "Assign Grade" link redirects the user to the "Assign Grades" page.
<li>Data Retrieval: On page load, it fetches and displays the required data using backend APIs.
<li>Data Retrieval: On page load, it fetches and displays the assignment data using backend APIs.
</ul>
 
===Validation and Accessibility===
<ul>
<li>Responsive Design: Ensures a consistent experience across desktop and mobile devices.
<li>Accessibility Compliance: Uses semantic HTML and ARIA attributes for screen reader compatibility.
</ul>
</ul>


Line 60: Line 63:


===Backend Integration===
===Backend Integration===
API calls are used to retrieve and update the following data:
Due to missing functionality in the reimplementation backend, our project uses mock data for the following categories:
 
<ul>
<ul>
<li>Submission information
<li>Submission information
Line 68: Line 71:
</ul>
</ul>


===Functionality===
Content displayed on the Assign Grades page is particular to a participant ID specified in the page's route. Updates were made to the reimplementation back-end to enable retrieval of data for a particular user.
<ul>
<li>Grade Submission: Allows instructors to input grades and comments and submit them via API.
<li>Error Handling: Prevents submission if required fields are missing.
</ul>
 


===Error Handling===
===Error Handling===
Line 84: Line 82:
</ul>
</ul>


==Testing==
To log in to the deployed version of the project, use the following credentials:


<ul>
<li><b>username:</b> instructor6
<li><b>password:</b> password
</ul>


==Future Improvements==
==Future Improvements==
Line 90: Line 94:
<li>Implement bulk grading functionality for large classes.
<li>Implement bulk grading functionality for large classes.
<li>Enhance search and filter options for the "View Submissions" page.
<li>Enhance search and filter options for the "View Submissions" page.
<il>Optimize performance with larger datasets.
<li>Optimize performance with larger datasets.
</ul>
</ul>



Latest revision as of 10:36, 28 March 2025

About Expertiza

Expertiza is an open-source platform built on the Ruby on Rails framework. It facilitates collaborative learning by allowing instructors to create assignments, manage peer reviews, and track submissions. The platform supports various file formats, including document uploads, URLs, and wiki pages. Students can work in teams, review each other's work, and receive feedback. Expertiza's modular architecture supports continuous improvement and adaptation to new educational needs.

The current implementation of Expertiza uses Ruby on Rails for both the frontend and backend. The reimplementation of Expertiza adopts a modernized stack, utilizing Ruby on Rails for the backend and TypeScript with React for the frontend.

Problem Statement

The goal of this project is to implement the user interface for the "View Submissions" and "Assign Grades" pages for the reimplementation of Expertiza in Typescript and React. This improvement focuses on increasing the efficiency and usability of the grading workflow while ensuring accessibility and robust data handling.

The following tasks outlined as part of this project:

  1. Redesigned the "View Submissions" page to display team information and streamline navigation to relevant pages.
  2. Design the "Assign Grades" page to support input validation, error handling, and submission of grades and comments.
  3. Implement backend integration to ensure real-time synchronization with the reimplementation backend APIs.
  4. Implement error handling and improve accessibility across devices.

View Submissions Page

UI Design

The reimplemented "View Submissions" page provides a clear and interactive interface for instructors to manage and review team submissions. Key elements include:

  • Team Details: Displays team names, participants, resource links, and submission history.
  • Action Links: Includes interactive options such as "Assign Grade" and "History" for each team.
  • Dynamic Column Widths: Optimized table layout to prevent excessive width by adjusting the links column dynamically.

Note that the Submission History page has not yet been implemented in the front-end reimplementation. As such, the History link currently navigates back to the assignment edit page.

The "View Submissions" page works for team and individual assignments. If assignment is an individual assignment, the Team Name category will not be displayed in the list of submissions.

Backend Integration

The page fetches data from the reimplementation backend and dynamically updates the following details:

  • Assignment information
  • Team member details

Relevant controllers and routes within the reimplementation back end. In consultation with the professor, a list_submissions method was added to the AssignmentsController (assignment_controller.rb) to enable fetching submissions data.

Though links to submitted content is intended to be displayed on the view submissions page, the relevant backend controllers have also not yet been implemented. On the instruction of the professor, retrieval of submission links was omitted for this iteration of the assignment.

Functionality

  • Navigation: Clicking the "Assign Grade" link redirects the user to the "Assign Grades" page.
  • Data Retrieval: On page load, it fetches and displays the assignment data using backend APIs.

Assign Grades Page

UI Design

The "Assign Grades" page is designed to facilitate accurate and efficient grading. Features include:

  • Team Information: Displays team details, submission summaries, and peer review scores.
  • Grade Input: Input fields for grades and comments with a submit button.
  • Error Indicators: Highlights missing peer reviews and incomplete fields.

Backend Integration

Due to missing functionality in the reimplementation backend, our project uses mock data for the following categories:

  • Submission information
  • Peer review scores
  • Missing reviews

Content displayed on the Assign Grades page is particular to a participant ID specified in the page's route. Updates were made to the reimplementation back-end to enable retrieval of data for a particular user.

Error Handling

Comprehensive error handling is implemented to manage:

  • Failed API requests
  • Invalid inputs
  • Submission errors

Testing

To log in to the deployed version of the project, use the following credentials:

  • username: instructor6
  • password: password

Future Improvements

  • Implement bulk grading functionality for large classes.
  • Enhance search and filter options for the "View Submissions" page.
  • Optimize performance with larger datasets.

References

  1. [Expertiza Platform](https://expertiza.ncsu.edu/)
  2. [GitHub Pull Request (Unmerged)](https://github.com/expertiza/reimplementation-front-end/pull/87)