CSC/ECE 517 Spring 2025 - E2522. Enhancing UI Consistency in Expertiza 1

Introduction

The Expertiza platform is an open-source web application designed to manage peer reviews, team collaborations, and project-based learning. It provides instructors with tools to administer assignments and track student progress while also enabling students to collaborate and review each other’s work.

In this project, our focus was on refining key UI components, specifically the Student Task Table and Course Assignment Table, to improve their consistency, usability, and overall user experience. This document outlines the improvements made to the UI components, discusses the technologies and design principles employed, and details the key features implemented.

Expertiza Platform Overview and Prior Work

Expertiza Overview

Expertiza is an open-source web platform designed to support educational settings that focus on project-based learning. It facilitates various collaborative tasks, such as peer reviews, surveys, and team assignments, fostering an engaging and interactive learning environment.

• For Instructors: Expertiza provides tools to manage assignments, offer feedback, and track performance metrics, making it easier to oversee students’ progress and ensure effective learning outcomes.
• For Students: The platform allows students to engage with tasks, collaborate with peers, and evaluate each other’s work, promoting skill development in teamwork, problem-solving, and critical thinking.

The platform’s flexibility makes it suitable for a wide range of educational scenarios, from individual assignments to group projects and peer-reviewed activities.

Previous PR Highlights

Our current work builds upon significant UI improvements introduced in earlier pull requests. These changes laid the foundation for refining key areas like the Student Task List and Course Assignment View, which were essential for improving the overall user experience.

E2446: Implement Front End for Student Task List #52

1) Objective This pull request aimed to implement the front-end UI for the previously non-Typescript Student Task List page. The new interface, built using React.js and Typescript, enhances the platform’s usability by making the development experience more type-safe and reliable.

2) Features Implemented:

• Assignment Display: The Student Task List now displays all assignments the current user is involved with.

• Task Filtering: The list is filtered to show only tasks relevant to the user’s participation.

• Enhanced UI: The updated design improves the display of tasks, making it more visually appealing and easier to navigate.

E2491. View Assignments in Courses View #76

1) Objective This pull request refined the UI for displaying course assignments within the platform’s Course View. The update made it easier to manage assignments linked to a specific course.

2) Features Implemented:

• Dropdown Table: A dropdown table was added to show course assignments, making the interface cleaner and more space-efficient.
• mproved Management: Features like assignment addition, editing, and deletion were introduced, streamlining task management.
• Visual Enhancements: The update improved the overall styling and functionality with new icons, buttons, and refined layout for better user interaction. Testing ensured the stability and usability of the changes.

Problem Statement

Prior UI implementations for the Student Task Table and Course Assignment Table lacked consistency and usability, making it difficult to navigate and use effectively. The goal of this project is to:

Key Objetives

• Standardizing Table Components: Ensuring consistency and improved reusability across table components.
• Enhancing UI Functionality: Improving text formatting, pagination, and search functionality for a smoother user experience.
• Streamlining the Interface: Removing unnecessary elements to improve clarity and simplify the user interface.
• Resolving Merge Conflicts: Addressing and resolving merge conflicts between different pull requests and repositories to ensure a seamless integration and smooth project development.

These improvements aim to enhance the overall usability, navigation, and efficiency of the system for all users.

Technologies

a. Frontend: React, TypeScript

b. Student Task Component Structure:

• Main Table Component: This component will render the table strucutre, which includes all 7 columns: Assignment, Course, Topic, Current Stage, Review Grade, Stage Deadine, Puslishing Rights.
• Task Row Component: A row within the table for each assignment(student task), displaying the task's details and some action columns (Checkbox and Tooltip).
• Action Buttons: Each action button will trigger a specific function for managing student tasks.

c. Course Assignment Component Structure:

• Main Table Component: This component will render the table strucutre, which includes all 4 columns: Name, Creation Date, Updated Date and Actions
• Task Row Component: A row within the table for each assignment(course assignment), displaying the assignment's details and action column (Edit/Delete/Add Participant/Assign Reviewers/Create Teams/View Review Report/View Scores/View Submissions/Copy Assignment/Export)
• Action Buttons: Each action button will trigger a specific function for managing student tasks.

d. State Management: React’s useState for managing mocked JSON data

e. Styling: CSS (for responsive and accessible design)

Design Principles

The UI refinements adhere to the following design principles:

• Consistency: Maintain uniform typography, formatting, and spacing across all tables.

• Readability: Use a structured layout with clear distinctions between elements.

• Simplicity: Remove unnecessary elements to reduce visual clutter.

• Reusability Standardize table components to avoid redundancy.

UI Components and Updates

Student Task Table

a. Originally Planned View:

The Student Task table was initially intended to present tasks associated with each student, featuring columns for Assignment, Course, Topic, Current Stage, Review Grade, Stage Deadline and Publishing rights. However, due to UI inconsistencies, this layout was revised to adhere to better formatting and design principles.

b. Updated View:

• Improved Formatting: Enhanced text formatting and alignment to ensure consistency.
• Uniform Styling: Applied uniform styling to table rows for better readability.
• Enhanced Clarity: Improved date formatting and clearer row spacing.

Course Assignment Table

a. Originally Planned View:

The Course Assignment table was designed to showcase assignments within a course, with columns for assignment Name, Creation Date, Updated Date and Actions. Similar to the Student Task table, it was adjusted to improve clarity and remove unnecessary elements.

b. Updated View:

• Refined Structure: Removed redundant columns and ensured concise information display.
• Improved Date Formatting: Dates are now displayed in a standardized format for better understanding.
• Simplified Actions: Actions like editing and deleting assignments are now more clearly defined.

Implementation Details

This pull request focuses on reimplementing and addressing several UI improvements and bug fixes across two key areas: PR-76 (Course Assignment Table) and PR-52 (Student Task Table). The changes aim to enhance the UI by following the design guidelines, improving table functionality, and ensuring consistency across the application. Key adjustments include proper formatting, the removal of unnecessary elements, and layout fixes after merging.

PR-52: Student Task Table

• Standardized Table Component: Replaced the custom table compnent with a common one for consistency across pages.

• Text Formatting: Table headers and content now adhere to consistent design guidelines.

• Tooltip Integration: Added info icons with tooltips for additional context where necessary.

• Date Formatting: Improved readability of dates with clear formatting.

PR-76: Course Assignment Table

• Global Search Bar: Disabled to simplify UI.

• Date Formatting: Standardized date formatting across the table.

• Pagination Updates: Enhanced pagination for better navigation when listing multiple assignments.

• Column Removals: Removed unnecessary columns that were causing clutter.

Code Snippets

Key Component Implementations

Student Task Page: 'pages/StudentTasks/StudentTasks.tsx'

Overview

The Student Task Page displays student assignments in a table format, showing details such as course, topic, current stage, review grade, and publishing rights. It utilizes a reusable Table component and utility functions for consistency.

1) Import Dependencies: Import the Table component and utility functions for formatting data.

import Table from "components/Table/Table";
import { formatDate, capitalizeFirstWord } from "utils/dataFormatter";

2) Define RowData type: Defines the structure for student task rows, ensuring type safety.

   type RowData = {
     assignment: string;
     course: string;
     topic: string;
     currentStage: string;
     reviewGrade: { comment?: string } | "N/A";
     badges?: string;
     stageDeadline: string;
     publishingRights: boolean;
     id: string;
   };

3) Define Table Columns: configures table headers and cell rendering:

const filteredColumns = [
   {
     accessorKey: 'assignment',
     header: 'Assignment',
     // Renders the assignment name as a clickable link
     cell: (info: CellContext<RowData, string>) => (
       <Link to={`/student_task_detail/${info.row.original.id}`}>
         {info.getValue()}
       </Link>
     ),
   },
   { accessorKey: 'course', header: 'Course' },
   { accessorKey: 'topic', header: 'Topic' },
   { accessorKey: 'currentStage', header: 'Current Stage' },
   {
     accessorKey: 'reviewGrade',
     header: 'Review Grade',
     // Displays an info icon with a tooltip if review grade exists, otherwise shows "NA"
     cell: (info: CellContext<RowData, RowData['reviewGrade']>) =>
       info.getValue() === "N/A" ? "NA" : (
         <img
           src="assets/icons/info.png"
           alt="Review Grade"
           title={typeof info.row.original.reviewGrade === 'object' 
   ? info.row.original.reviewGrade.comment || '' 
   : ''}
         />
       ),
   },
   ...(showBadges ? [{ accessorKey: 'badges', header: 'Badges' }] : []),
   { accessorKey: 'stageDeadline', header: 'Stage Deadline' },
   {
     accessorKey: 'publishingRights',
     header: 'Publishing Rights',
     // Displays a checkbox to toggle publishing rights
     cell: (info: CellContext<RowData, boolean>) => (
       <input
         type="checkbox"
         checked={info.getValue()}
         onChange={() => togglePublishingRights(Number(info.row.original.id))}
       />
     ),
   },
 ];

p.s.

• assignment: Clickable link for task details.
• reviewGrade: Shows "NA" if unavailable; otherwise, displays an info icon with tooltip.
• publishingRights: Checkbox to toggle rights.
• badges (optional): Only displayed if showBadges is true.

4) Transform Raw Data for Table Display: Transforms raw task data into the required structure before rendering.

const filteredAssignments = tasks.map(task => ({
   id: task.id, // Unique identifier
   assignment: task.assignment, // Assignment name
   course: task.course, // Course name
   topic: task.topic || '-', // Default to '-' if no topic is provided
   currentStage: task.currentStage || 'Pending', // Default to "Pending"
   reviewGrade: task.reviewGrade || 'N/A', // Default to "N/A"
   badges: task.badges || '', // Default to empty string 
   stageDeadline: task.stageDeadline || 'No deadline', // Default to "No deadline"
   publishingRights: task.publishingRights || false, // Default to "false"
 }));

• Provides default values for missing data.

5) Use Helper Functions to Ensure Consistency: Apply formatting functions to ensure uniform data representation.

// Formats the deadline date or defaults to "No deadline"
stageDeadline: task.stage_deadline ? formatDate(task.stage_deadline) : "No deadline"

// Capitalizes the first word of table headers for consistent display
 header: capitalizeFirstWord(header as string)

6) Update checkbox and info icon as column data

 const filteredColumns = [
    {
      accessorKey: "assignment",
      header: "Assignment",
      cell: (info: CellContext<RowData, string>) => (
        <Link to={`/student_task_detail/${info.row.original.id}`}>{info.getValue()}</Link>
      ),
    },
    { accessorKey: "course", header: "Course" },

      cell: (info: CellContext<RowData, boolean>) => (
        <input
          type="checkbox"
          checked={info.getValue()}
          onChange={() => togglePublishingRights(Number(info.row.original.id))}
        />
      ),

7) Render Common Table Componnet

      <div className={styles.mainContent}>
          <div className={styles.tableWrapper}>
            <Table
              data={filteredAssignments}
              columns={filteredColumns}
              showGlobalFilter={false}
              showColumnFilter={false}
              showPagination={false}
              tableSize={{ span: 12, offset: 0 }}
              headingComments={{
                "Stage deadline": "You can change 'Preferred Time Zone' in 'Profile' in the banner.",
                "Publishing rights": "Grant publishing rights",
              }}
            />
         </div>
      </div>

Course Assignment Table: 'pages/Courses/CourseAssignments.tsx'

1) Import Common Table Component and Formatters

import Table from "components/Table/Table";
import { capitalizeFirstWord, formatDate } from "utils/dataFormatter";

2) Format Heading and Column Data

  // Format all heading data fields. 
  const filteredColumns = columns.map(({ header, ...rest }) => ({
    ...rest,
    header: capitalizeFirstWord(header as string),
  }));

  // Format some assignment data fields.
  const filteredAssignments = assignments.map(({ name, created_at, updated_at, ...rest }) => ({
    ...rest,
    name: capitalizeFirstWord(name),
    created_at: formatDate(created_at), // Format 'created_at' date
    updated_at: formatDate(updated_at), // Format 'updated_at' date
  }));

3) Render Table and Set to disable Gobal Search Bar

    <div className="px-4 py-2 bg-light">
      <h5 className="mb-3">Assignments for {courseName}</h5>
      <Table
        data={filteredAssignments}
        columns={filteredColumns}
        showGlobalFilter={false}
        showColumnFilter={false}
        showPagination={false}
        disableGlobalFilter={true}
        tableSize={{ span: 12, offset: 0 }}
      />
    </div>

Common Table Component: 'components/Table.tsx'

1) Add new props disableGlobalFilter to disable the global search

 disableGlobalFilter?: boolean;

2) Add new props headingComments to add info icon next to heading

 headingComments?: Record<string, string>;

Utility Components and Functions

Data Formatter Functions('src/utils/dataFormatter.ts'):

1) capitalizeFirstWord()

export const capitalizeFirstWord = (str: string) => {
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
};

2) formatDate()

export const formatDate = (dateString: string): string => {
    const date = new Date(dateString);
    const options: Intl.DateTimeFormatOptions = {
        month: "short",
        day: "numeric",
        year: "numeric",
        hour: "numeric",
        minute: "numeric",
        hour12: true,
    };
    return date.toLocaleString("en-US", options);
};

List of Files Edited/Added

Frontend Component Files

• Implements the main UI for view student task: `src/pages/StudentTasks/StudentTasks.tsx`

• Updates the CSS styles for view student task: `src/pages/StudentTasks/StudentTasks.css`:

• Implements the main UI for view course assignment: `src/pages/Courses/CourseAssignments.tsx`:

• Updates the common Table component: `src/components/Table/Table.tsx`:

Core Functionalities

Data Formatter Functions within `src/utils/dataFormatter.ts`:

• `capitalizeFirstWord `
• `formatDate`

Test Plan

Test Plan for E2522: Enhancing UI Consistency in Expertiza

Test ID	Test Case	Description	Precondition	Expected Results	Actual Results
1	Sign In and Navigate to Courses	Verify that an admin can sign in and navigate to the Courses page.	The admin is logged in using the credentials: username `admin` and password `password123`.	The admin should successfully navigate to the Courses page, and the dropdown should function correctly.	**Passed**: The admin successfully signed in and navigated to the Courses page.
2	Verify Removal of Course Name Column	Verify that the "Course Name" column has been removed from the Assignments table.	The user is on the Assignments page.	The "Course Name" column should no longer be visible in the Assignments table.	**Passed**: The "Course Name" column was successfully removed and is no longer visible in the Assignments table.
3	Table Styling and Layout	Verify that the table styling (fonts, spacing, headers) matches design guidelines.	The latest code is deployed, and the frontend is running.	The table should match the design guidelines for fonts, spacing, and alignment.	**Passed**: The table matched the design guidelines for fonts, spacing, and alignment.
4	Date Formatting	Verify that dates in the table are displayed in the correct format (yyyy-mm-dd).	The table contains date fields.	Dates should be displayed in the format yyyy-mm-dd.	**Passed**: Dates were displayed in the correct format (yyyy-mm-dd).
5	Column Data Types	Verify that each column in the table displays the correct data type.	The table is populated with data.	Each column should display data of the correct type (e.g., text, numbers, dates).	**Passed**: Each column displayed data of the correct type.
6	Test the Search Bar on the Courses Page	Verify that the search bar can be shown/hidden and filters or sorts the courses.	The user is on the Courses page.	The search bar should appear when clicked, filter or sort the courses, and hide when clicked again.	**Passed**: The search bar appeared, filtered/sorted the courses, and hid correctly.
7	Navigate to Assignments and Test Responsiveness	Verify that the table columns adjust to fit the screen on smaller devices.	The user is on the Assignments page.	The table columns should resize to fit the screen without horizontal scrolling.	**Passed**: The table columns resized correctly to fit the screen on a simulated mobile device.
8	Test the Search Bar on the Assignments Page	Verify that the search bar can be shown/hidden and filters or sorts the assignments.	The user is on the Assignments page.	The search bar should appear when clicked, filter or sort the assignments, and hide when clicked again.	**Passed**: The search bar appeared, filtered/sorted the assignments, and hid correctly.
9	Sort the Table by Headers	Verify that the table can be sorted by clicking on the headers (e.g., Name).	The table is displayed on the screen and contains sortable headers.	Clicking on a header should sort the table in ascending or descending order based on the column data.	**Passed**: The table sorted correctly in ascending and descending order when headers were clicked.
10	Test Keyboard Navigation	Verify that the user can navigate the table using the keyboard.	The user is on the Assignments page.	The user should be able to navigate through the table using the Tab key.	**Passed**: The user successfully navigated through the table using the keyboard.
11	Test the Info Icon Pop-Out Comment	Verify that hovering over the Info Icon displays a pop-out comment.	The user is on the Assignments page.	A pop-out comment should appear when hovering over the Info Icon.	**Passed**: The pop-out comment appeared correctly when hovering over the Info Icon.
12	Checkbox Functionality for Publishing Rights	Verify that the checkbox for publishing rights in Assignments works correctly.	The user is on the Assignments page, and the checkbox is present.	The checkbox should toggle publishing rights for assignments when clicked.	**Passed**: The checkbox toggled publishing rights correctly.
13	Sort Course Assignment Table by Name	Verify that the table can be sorted by the "Name" column.	Backend and frontend are running; the table is populated with data.	The table should sort rows alphabetically by the "Name" column.	**Passed**: The table sorted rows alphabetically by the "Name" column.
14	View Info Icon Comment	Verify that hovering over the info icon displays a pop-out comment.	The info icon is present in the UI.	A pop-out comment with the correct message should appear.	**Passed**: The pop-out comment appeared with the correct message.
15	Responsive UI	Verify that the UI adapts correctly to different screen sizes (mobile, tablet, desktop).	Frontend is running.	The UI should resize and reorganize appropriately without layout issues.	**Passed**: The UI resized and reorganized correctly across different screen sizes.
16	Pagination	Verify that pagination works correctly when the table has more rows than fit on one page.	The table contains more rows than fit on one page.	Pagination controls should allow navigation between pages, and the correct rows should be displayed.	**Passed**: Pagination controls worked correctly, and the correct rows were displayed.
17	Accessibility	Verify that the UI meets accessibility standards (e.g., ARIA roles, keyboard navigation).	The frontend is running.	The UI should be navigable using a keyboard, and ARIA roles should be properly implemented.	**Passed**: The UI met accessibility standards, including keyboard navigation and ARIA roles.

Demo Video

You can watch this demo video for a detailed demonstration of the changes we made in the UI.

Conclusion

This project successfully enhances the UI consistency and usability of the Expertiza system by refining the Student Task Table (PR-52) and the Course Assignment Table (PR-76). By aligning the components with standardized design guidelines, we have achieved the following improvements: improved text formatting by ensuring consistent font styles, sizes, and alignment across all tables; enhanced table structure by streamlining the layout for better readability and usability; pagination implementation to handle large datasets efficiently; removal of unnecessary elements by eliminating redundant columns (e.g., “Course Name”) to simplify the interface; responsive design optimization for various screen sizes, ensuring a seamless experience on mobile, tablet, and desktop devices; and accessibility improvements by implementing ARIA roles and keyboard navigation to meet accessibility standards. These changes contribute to a cleaner, more intuitive, and user-friendly interface, making navigation and interaction more efficient for all users. The project not only addresses current usability challenges but also sets a foundation for future enhancements.

The broader impact includes an enhanced user experience, allowing students, instructors, and administrators to interact with the system more effectively, reducing confusion and improving productivity. The standardized design and improved structure increase scalability, making it easier to add new features or modify existing ones in the future. Additionally, accessibility compliance ensures that the system better supports users with disabilities, aligning with modern accessibility standards. For future considerations, continuous user feedback should be gathered to identify areas for further improvement, additional features such as advanced filtering, sorting, and customization options for tables should be explored, and performance optimization should be monitored, particularly when handling large datasets.

Future Scope

• Dynamic Table Customization: Allow users to customize table views by enabling or disabling specific columns based on their preferences.

• Advanced Filtering & Sorting: Implement more robust filtering options and multi-column sorting to improve data organization.

• Real-time Data Updates: Integrate WebSocket or polling mechanisms to update table data in real-time without requiring page refreshes.

• Mobile Responsiveness: Improve the UI layout to provide a better experience on mobile and tablet devices.

Relevant Links

Our Frontend Repositories on GitHub: Explore our project’s repository for more details and code implementation.

Our Pull Request: Detailed changes we made in the UI.

Other links:

• Pull Request #76: E2491. View Assignments in Courses View

• Pull Request #52: E2446. Implement Front End for Student Task List

• OSS Projects on Expertiza for Spring 2025

• Design Guidelines

• Demo Video

Project Mentor

• Anvitha Reddy Gutha <agutha@ncsu.edu>

Team Members

• Chinmay Nayak <cnayak@ncsu.edu>
• Joannes Koomson <jokoomso@ncsu.edu>
• Jing Huang <jhuang42@ncsu.edu>