CSC/ECE 517 Fall 2024 - E2464 UI for Project Topics (was: Sign up Topics)

From Expertiza_Wiki
Jump to navigation Jump to search

Background

Expertiza is an open-source course management web application, built with Ruby on Rails, that is maintained by students and teaching staff across NC State and other universities. Additionally, Expertiza is used as a platform to help students learn how to work collaboratively and contribute to large applications concurrent with best practices and object oriented design and development.

For our project in particular, we were tasked with building a new user interface for a new Project Topics page with React.js and Typescript. The page's main function is to display all the project topics for an assignment, with relevant information displayed with respect to the user, student or administrators/instructor. This was previously implemented as a Sign up Topics page, which we use as a template for our current implementation. If you would like to learn more about Expertiza, please check the Expertiza wiki[1], or the GitHub pages [2],[3].

Previous: Sign up Topics

Previously, the user interface display for assignment topics was implemented as a Sign up Topics page. The main component of the display included a table showing all topics for a particular assignment. The student view displayed the topics id, the number of available slots, and number of teams of the waitlist as table columns: Topic ID, Topic name(s), Available Slots, and Num. on waitlist. The student view also implemented a display for a signed in student's current selected or assigned topic by an indication of a yellow highlight over their topic in the associated row in the topics table, and in text at the top of the page under the page header.

  • Student View:

The admin/instructor view also displayed all topics for an associated project, with two additional columns, one indicating the number of slots available: Num. of slots, and another: Checkbox which allowed topics to be selected. Additionally, admin/instructors were able to view the teams associated with a given topic in the Topic name(s) column by the usernames of the team's members in smaller text under the topic name. The admin/instructor page also displayed a list of checkboxes above the table with fields associated with the assignment topic features. The checkboxes indicate attributes of the assignment settings attribute.

  • Instructor View:

Design

For our implementation, we were tasked with creating a new user interface for assignment topics using the dynamic rendering capabilities of React.js and Typescript. We used the previous implementation as a model for our design.

Specifications

  • Intuitive Design:
    • User-friendly interface
    • Easy to navigate
    • Enough spacing to ensure all the fetched information is being displayed in an orderly and clean fashion
  • Responsive Design:
    • Hold design across multiple devices (mobile, laptop, tablet) and screen sizes (fullscreen, windowed)
  • Error Handling:
    • Take in consideration of possible data errors (invalid data, missing data)
  • Testing:
    • All the components of the UI are functioning
    • Error handling
    • Reliability of the UI is maintained

Overview

For our design, we used test data in order to simulate the responsiveness and integration with real data. The test data is set up following the Assignments and Topics specifications, from [4]. We also used modular React styling components to keep the number of files we modified minimal and aimed to restrict the impact of our implementation to other parts of the application small. Because the current Expertiza front end has components and pages that are being developed, we added our new Project Topics page as a new link on the application header, labled Topics, which can be accessed at all times.

Files Changed

To provide access to our new Project Topics page, we added a new route and header to the following files, as well as updated the README.md file with instructions to add a user. We use the added user to view and test the student view. The current Expertiza application already has an admin user implemented which we used to test the admin/instructor display.

  • src/App.tsx
  • src/layout/Header.tsx
  • README.md

Files Created

Our main implementation can be found in the following files, which we created for the new Project Topics page.

  • src/pages/ProjectTopics
  • src/pages/ProjectTopics/ProjectTopics/testData.js
  • src/pages/ProjectTopics/ProjectTopics.module.css
  • src/pages/ProjectTopics/ProjectTopics.tsx

Implementation

The main component of our design is a table, resembling the display of the previous implementation, which serves as the component for which students and admin/instructors can view all topics. Additionally, due to parts of the current Expertiza front-end being developed, we also included an Assignment select component, so that our implementation and UI could be well tested within realistic assignment conditions and easily integrated to the current application.

Student Display

Additionally, for the student display, we implemented a feature which allows for students to view their selected and/or assigned topics. We implemented this with a visual indicator and a selection checkbox. Following the previous Sign up Topics page, we added a visual indicator in the topics table and we chose to implement this with a gold star next to the Topic ID. We made this choice following the design specifications and with the aim of clarifying the intent of the visual marker. We designed the student selection checkbox to enhance the previously implemented text describing the student's current topic. This implementation enables the student user to more clearly obtain their current topic selection and provides a more engaging experience.

Admin/instructor Display

For the Admin/instructor display, we also implemented an Assignment Topic Settings feature as a set of checkboxes, as in the previous implementation. This component is auto-filled with the set attributes of the Assignment settings in the test data, which allows for further testing. As such, we ensure that this feature can be integrated with the current structure of Assignments and displays the associated features in a user friendly way for admin/instructors. We also allow for the display of selected teams for each topic by the associated team members, below the Topic Name(s) column, much like the previous implementation. This component can be further integrated with the back-end development of ProjectTopics.

Team

Mentor

  • Sahil Sawant

Members

  • Arlee Shelby (ashelby@ncsu.edu)
  • Aryan Tapkire (atapkir@ncsu.edu)
  • Haojie Zhou (hzhou33@ncsu.edu)

Links

References

[1]https://wiki.expertiza.ncsu.edu/index.php?title=Main_Page

[2]https://github.com/expertiza/reimplementation-front-end

[3]https://github.com/expertiza/reimplementation-back-end

[4]https://wiki.expertiza.ncsu.edu/index.php?title=Sign_up_topics

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2464_UI_for_Project_Topics_(was:_Sign_up_Topics)&oldid=159766"