CSC/ECE 517 Spring 2024 - E2426. Create a UI for Assignment Edit page "Etc" tab in ReactJS

Expertiza

Expertiza is a web application designed to facilitate collaborative learning and peer review in educational settings. Built on the Ruby on Rails framework, it offers a versatile platform for both instructors and students. Instructors can seamlessly create and manage assignments and projects, edit them as needed, and review as well as grade student submissions. Students, on the other hand, use Expertiza to form teams, collaborate on various assignments and projects, submit their work, and engage in peer reviews of other students' submissions. This interactive approach not only streamlines the educational process but also actively encourages critical thinking, collaboration, and constructive feedback among students, making it a valuable tool in modern education.

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 primary objective of "Expertiza ETC Tab Reimplementation" project is to design and implement an enhanced "Etc" page within the Expertiza platform, focusing on user-friendliness and intuitive navigation while displaying all miscellaneous tasks associated with the Editing Assignment option. This new page, accessible through the path Manage -> Assignment -> Edit -> Etc, aims to streamline the process of managing various ancillary tasks related to assignment editing. The project will retain the essence of the current UI's effectiveness but infuse it with creative improvements to enhance the overall user experience. Key goals include simplifying the interface for easy understanding, ensuring efficient task management, and fostering a more engaging and less cluttered environment for both instructors and students. This endeavor seeks not just to augment the existing functionality but also to provide a more coherent and visually appealing layout that intuitively guides users through their editing tasks.

Current Implementation

The current implementation for managing assignments in the Expertiza platform is a table with assignment details and options for filtering and pagination, emphasizing functional simplicity. The Edit Assignment section presents a modal form for updating an assignment, with clear input fields for essential details. The design prioritizes functionality and easy navigation, utilizing a straightforward color scheme and layout that allows for quick edits without leaving the main page.

This has several disadvantages such as:

Limited styling options: Basic HTML tables have limited styling options compared to modern CSS frameworks. This can make it difficult to create visually appealing and responsive designs.

Lack of Dedicated "Etc" Section: There's no visible, dedicated "Etc" section in the current screenshots. Users might find it challenging to locate miscellaneous tasks relevant to editing assignments.

Unclear Task Grouping: Without a specific section or clear grouping, miscellaneous tasks could be scattered or mixed with primary tasks, making it difficult for users to prioritize their actions or find less common functionalities.

Aesthetics and Creativity: While the current design is functional, it may lack the creativity that could make the interface more engaging. Aesthetics play a role in the user's experience, and a utilitarian design might not inspire or facilitate the most efficient workflow.

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>