CSC/ECE 517 Fall 2023 - E2362. Create a page to edit an Assignment's due date in ReactJS

Expertiza

Expertiza is a Ruby on Rails based open source project. Instructors have the ability to add new projects, assignments, etc., as well as edit existing ones. Later on, they can view student submissions and grade them. Students can also use Expertiza to organize into teams to work on different projects and assignments and submit their work. They can also review other students' submissions.

Problem Statement

Program 3: The task involves creating a page to edit an assignment's Due Date in ReactJS. A Due Dates page will display all the assignments with their corresponding due dates. It contains a table which displays data regarding an assignment such as - Deadline type, Date & time, Submission and Review Allowed, Reminders (hrs.)

Tasks that were accomplished:

1. Create a UI Page to edit an assignment's Due Date:
   • Design a user-friendly page that lists all the assignments with their corresponding due dates.
   • Implement the necessary React components for displaying the due dates page.

Implemented below updates which were required to be done from previous version:

1. Remove the "Number of review rounds" input tab.
2. Align the "Timezone" field in the same column as the checkboxes.
3. Remove the "Show/Hide Date Updater" button.
4. Remove the "Use Date Updater" column from the table.
5. Change the "Apply late policy" field to say, ~ "Use the late policy for this assignment".
6. Add a space between "Due date reminder" and "(hrs.)".

Program 4: The task involves updating front-end of the page to edit an assignment's Due Date in ReactJS. A Due Dates page will display all the assignments with their corresponding due dates. It contains a table which displays data regarding an assignment such as - Deadline type, Date & time, Submission and Review Allowed, Reminders (hrs.) - Include dummy data.

Tasks that were accomplished:

1. Update the UI Page to edit an assignment's Due Date:
   • Included dummy data
   • Enhanced the front-end of the page

Files added / modified

• reimplementation-front-end/src/App.tsx
• reimplementation-front-end/src/pages/DueDate/dueDate.tsx
• reimplementation-front-end/src/pages/DueDate/DueDate.css

Implementation

• The current implementation can be found here

Test Plan

• The frontend has been implemented according to requirements, with no mandated automated test cases. Manual testing is performed, involving human interaction to validate functionality. This approach emphasizes thorough testing through user actions and scenarios.

Results (Screenshots)

• Below is the image of the older version for comparison:

• Program 3 - Updated page to edit assignment's due dates:

• Program 4 - Enhanced page to edit assignment's due dates:

Team

Mentor

• Kartiki Bhandakkar

Members

• Sourabh Wattamwar
• Nirav Shah
• Mohit Soni

Important Links

• GitHub Repository
• Pull Request
• [Demo Video]
• Project Instructions