CSC/ECE 517 Spring 2025/oss E2521

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 updated "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.

Backend Integration

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

• Assignment information
• Team member details
• Submission history

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 required data using backend APIs.

Validation and Accessibility

• Responsive Design: Ensures a consistent experience across desktop and mobile devices.
• Accessibility Compliance: Uses semantic HTML and ARIA attributes for screen reader compatibility.

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

API calls are used to retrieve and update the following data:

• Submission information
• Peer review scores
• Missing reviews

Functionality

• Grade Submission: Allows instructors to input grades and comments and submit them via API.
• Error Handling: Prevents submission if required fields are missing.

Error Handling

Comprehensive error handling is implemented to manage:

• Failed API requests
• Invalid inputs
• Submission errors

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)