CSC/ECE 517 Spring 2024 - E2426. Create a UI for Assignment Edit page "Etc" tab 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

Create an Etc page that displays all the miscellaneous tasks for the Editing Assignment option. Path: Go to Manage -> Assignment -> Edit (pencil icon) -> Etc This UI is good and can be reconstructed similarly but feel free to exercise your creativity while making this page easy to understand and navigate.

Aim

The "Expertiza ETC Tab Reimplementation" project aims to create a comprehensive Etc page that consolidates all miscellaneous tasks related to editing assignments within the Expertiza platform. The journey to this interface is through the pathway: Manage -> Assignment -> Edit (pencil icon) -> Etc. This Etc page is designed with a focus on usability, aiming to deliver a user-friendly and navigable interface while allowing room for creative design enhancements.

ETC Tab Functionality

The Etc tab is an integral part of the assignment editing process, designed to host various administrative tasks in an organized manner. The goal is to present these tasks in a layout that is both aesthetically pleasing and functional. The tab is structured into several key sections, each providing access to different assignment-related operations:

1. Add Participant 2. Create Teams 3. Assign Reviewer 4. View Submissions 5. View Scores 6. View Delayed Jobs 7. View Reports

The design approach for the Etc page embraces both clarity and efficiency, ensuring that each section is distinct and accessible with minimal navigation.

Add Participant

The "Add Participant" section is a direct entry point to include new members in the assignment process. It utilizes pre-existing components, offering a seamless transition from the Etc tab to the actual functionality of adding participants.

For the other sections, each is represented by a newly created JavaScript file. These files currently hold placeholder messages indicating their development status. Once completed, they will offer a variety of functionalities, tailored to meet the specific needs of assignment editing and management.

In-Progress

The remaining sections in the Etc Tab are under development, with placeholder JavaScript files indicating their status. These sections will eventually enable comprehensive management of assignment-related tasks, enhancing the administrative capabilities within Expertiza.

Test Cases

Below are detailed test cases for the ETC Tab sections that have been implemented or are in progress. These tests ensure functionality, usability, and interface consistency.

TC1: Accessing Add Participant

Objective: Verify that the Add Participant section can be accessed from the ETC tab. Steps: Log in as an administrator. Navigate to Manage -> Assignment -> Edit -> ETC Tab. Click on the 'Add Participant' section. Expected Result: The 'Add Participant' page should load successfully.

TC2: Adding a New Participant

Objective: Ensure that new participants can be added through the interface. Steps: Access the 'Add Participant' section. Fill in all required fields with valid data. Submit the form. Expected Result: A new participant is added, and a success message is displayed.

TC3: Validation Check for Participant Information

Objective: Check that the system validates input fields when adding a new participant. Steps: Access the 'Add Participant' section. Enter invalid data (e.g., wrong email format) in the form fields. Attempt to submit the form. Expected Result: An error message is displayed, and the participant is not added until the errors are corrected.

TC4: Cancel Adding Participant

Objective: Verify the cancellation process when adding a new participant. Steps: Access the 'Add Participant' section. Begin filling out the form. Click on the 'Cancel' or 'Close' button. Expected Result: The action is canceled, and no new participant is added.

TC5: Placeholder Visibility Check for In-Progress Sections

Objective: Confirm that the placeholders for in-progress sections are visible and informative. Steps: Navigate to each in-progress section from the ETC tab. Expected Result: Each in-progress section displays a message indicating that the page is under construction.

TC6: Attempting to Access In-Progress Features

Objective: Ensure that in-progress features are not accessible and do not lead to any active functionality. Steps: Click on each in-progress section. Expected Result: There is no response or redirection to a functional page, reinforcing the in-progress status.

TC7: Interface Consistency Check Across Sections

Objective: Evaluate the consistency of interface design elements across all sections. Steps: Review the interface of the Add Participant section. Compare it with the placeholder interfaces of in-progress sections. Expected Result: All sections should share a consistent design language and layout as per the new UI/UX standards.

TC8: Accessibility and Responsiveness Check

Objective: Test the accessibility and responsiveness of the implemented sections. Steps: Access the ETC tab on various devices and browsers. Use accessibility tools to check for WCAG compliance. Expected Result: The interface should be fully functional and display correctly on different screen sizes, and it should comply with accessibility standards.

TC9: ETC Tab Load Performance

Objective: Check that the ETC tab and its sections load within an acceptable time frame. Steps: Access the ETC tab and its different sections. Expected Result: Each section loads in under 5 seconds (or a predefined acceptable time frame).

TC10: User Role-Based Access

Objective: Confirm that access to sections is role-based. Steps: Log in with different user roles and try to access various sections. Expected Result: Users see options based on their role permissions.

TC11: Consistent UI Elements

Objective: Ensure that UI elements are consistent across all sections. Steps: Compare UI elements like buttons, input fields, and tables across sections. Expected Result: UI elements have a consistent look and feel.

Note for Future Testing

As development progresses and more sections of the ETC tab are completed, new test cases will need to be created to ensure the functionality, integration, and usability of the newly implemented features. It's crucial to revisit and update the test plan regularly to align with the current state of the project development.

Team

Mentor

• Kalyan Karnati <kkarnat@ncsu.edu>

Members

• Sreenitya Mandava <smandav@ncsu.edu>
• Sree Tulasi Shevva <sshevva@ncsu.edu>
• Yogitha Seela <yseela@ncsu.edu>