Expertiza_Wiki - User contributions [en]

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

2024-12-04T02:21:38Z

Ppriya2:

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

To improve the usability and visual appeal of the "Etc" tab, we integrated icons into each functional tile. These icons, primarily sourced from React Material UI, were selected to align with their respective actions:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

React Material UI offers a dynamic set of customizable icons that fit naturally into React-based projects. By incorporating these visually appealing icons, the updated tiles became more descriptive and user-friendly. The icons provide clear, intuitive visual markers, helping users navigate more efficiently. This improvement aligns with modern design standards, ensuring that even tabs like "Etc" maintain a sleek and contemporary look.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i71.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
const [activeTab, setActiveTab] = useState('Etc');
const [showBanner, setShowBanner] = useState(false);

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

// Save Button click handler
const handleSave = () => {
setShowBanner(true);
// Hide banner after 3 seconds
setTimeout(() => {
setShowBanner(false);
}, 3000);
};

// Back button click handler
const handleBack = () => {
window.location.href = '/assignments';
};

return (
<div className="etc-container">
{/* Save banner which pops up once save is clicked */}
{showBanner && (
<div className="success-banner">
The assignment was successfully saved!
</div>
)}
<h2>Editing Assignment: Meta Review Fix_1</h2>
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
// onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
// onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
// onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
// onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>
</div>

<div className="tab-content">
{/* {activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>} */}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>
</div>
</div>
)}
</div>

{/* Footer Action buttons */}
<div className="etc-actions">
<button onClick={handleSave} className="save-button">Save</button>
<button onClick={handleBack} className="back-button">Back</button>
</div>
</div>
);
};

export default EtcView;
</pre>

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

* '''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/pankhuri03/reimplementation-front-end]

'''These changes can be viewed in this pull request''' [https://github.com/expertiza/reimplementation-front-end/pull/78].

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024

2024-11-13T04:48:30Z

Ppriya2:

* [[CSC/ECE 517 Fall 2024 - E2450. Refactor assignments_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2451. Reimplement feedback_response_map.rb]]
* [[CSC/ECE 517 Fall 2024 - E2452. Refactor review_mapping_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2453. Refactor review_mapping_helper.rb]]
* [[CSC/ECE 517 Fall 2024 - E2454. Refactor student_task.rb]]
* [[CSC/ECE 517 Fall 2024 - E2455. Refactor sign_up_sheet_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2456. Refactor teams_user.rb]]
* [[CSC/ECE 517 Fall 2024 - E2456. Refactor teams_user.rb (Phase 2 - Design Document)]]
* [[CSC/ECE 517 Fall 2024 - E2457. GitHub metrics integration]]
* [[CSC/ECE 517 Fall 2024 - E2458. User management and users table]]
* [[CSC/ECE 517 Fall 2024 - E2459. View for results of bidding]]
* [[CSC/ECE 517 Fall 2024 - E2460 Mentor-Meeting Management]]
* [[CSC/ECE 517 Fall 2024 - E2461. UI for Courses]]
* [[CSC/ECE 517 Fall 2024 - E2461. UI and Backend for Courses]]
* [https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2462._UI_for_Questionnaires CSC/ECE 517 Fall 2024 - E2462. UI for Questionnaire.rb]
* [https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2463_Implement_Front_End_for_Student_Task_List CSC/ECE 517 Fall 2024 - E2463. UI for Student Task List]
* [[CSC/ECE 517 Fall 2024 - E2464 UI for Project Topics (was: Sign_up_Topics)]]
* [[CSC/ECE 517 Fall 2024 - E2465. UI for Institutions and Notification]]
* [[CSC/ECE 517 Fall 2024 - E2466. UI for Impersonate User]]
* [[CSC/ECE 517 Fall 2024 - E2467. UI for View Submissions]]
* [[CSC/ECE 517 Fall 2024 - E2468. Reimplement due_date]]
* [[CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view_team]]
* [[CSC/ECE 517 Fall 2024 - E2470. Reimplement grades_controller]]
* [[CSC/ECE 517 Fall 2024 - E2471. Reimplement logger]]
* [[CSC/ECE 517 Fall 2024 - E2472. Reimplement responses_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2473. Reimplement sign up topic.rb as project topic.rb]]
* [[CSC/ECE 517 Fall 2024 - E2474. Reimplement student_quizzes_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2475. Reimplement student_task view]]
* [[CSC/ECE 517 Fall 2024 - E2476. Reimplement student_teams_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2477. Reimplement suggestion_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2478. Reimplement the Question hierarchy as Item hierarchy]]
* [[CSC/ECE 517 Fall 2024 - E2479. Reimplement teams_users_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2480. Implement testing for new Bookmarks Controller]]
* [[CSC/ECE 517 Fall 2024 - E2481 Reimplement response_map.rb]]
* [[CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews]]
* [[CSC/ECE 517 Fall 2024 - E2483. Reimplement Notification Controller and Model]]
* [[CSC/ECE 517 Fall 2024 - E2484. Reimplement participants_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2485. Allow reviewers to bid on what to review]]
* [[CSC/ECE 517 Fall 2024 - E2487. Reimplement authorization_helper.rb]]
* [[CSC/ECE 517 Fall 2024 - E2488 Reimplementation of Add TA to course]]
* [[CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS]]
* [[CSC/ECE 517 Fall 2024 - E2491.UI for View assignments in Courses view]]
* [[CSC/ECE 517 Fall 2024 - E2492. UI for View submissions/assign grades (except heatgrid)]]
* [[CSC/ECE 517 Fall 2024 - E2493. UI for Assign Reviewers]]
* [[CSC/ECE 517 Fall 2024 - G2401 Refactor Graphql API endpoint for contribution metrics]]
* [[CSC/ECE 517 Fall 2024 - G2402 Refactor Graphql API endpoint for repositories]]

CSC/ECE 517 Fall 2024 - E2475. Reimplement student task view

2024-11-02T19:05:24Z

Ppriya2:

__TOC__

== Expertiza Background ==
[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

== Project Description ==

In the Expertiza application, the student task view acts as a central hub where students can access crucial assignment information, manage submissions, and monitor their progress. This feature consolidates all assignment details in one place, including the assignment title, stage deadlines (for submission, review, and feedback), and individual progress updates. By organizing information clearly, the task view helps students stay on top of their responsibilities, making it an essential aspect of the Expertiza experience.

Our goal with this reimplementation is to redesign the student task view using modern frontend technologies like React JS and TypeScript, enhancing the app’s performance and responsiveness. These technologies will enable us to build a more intuitive, interactive interface with real-time updates, allowing students to see any changes in deadlines, submission statuses, or feedback availability instantly. This upgrade focuses on usability, aiming to deliver a smooth, user-friendly experience that helps students efficiently manage their academic tasks.

The project highlights three key features to meet this goal:

* Task Details View: This feature will present key assignment details such as the title, submission and review due dates, progress status, and any earned badges. By providing a straightforward overview, students can quickly understand their current status and tasks without navigating through multiple pages.

* Task Interaction: Aiming to simplify task interactions, the new design will feature accessible options for submitting work, requesting revisions, and accessing feedback from instructors or peers. Actions will be streamlined to minimize steps, making assignment management easier for students. Improved navigation will also allow students to switch seamlessly between different sections within the task view.

* Timeline Visualization: The new design will integrate a visual timeline, clearly marking assignment deadlines and review stages. This timeline will highlight key due dates and milestones, enabling students to track their progress visually and plan for upcoming tasks. By seeing the assignment flow in a visual format, students can better manage their time and stay on track throughout the assignment cycle.

This reimplementation not only improves the student task view’s design and usability but also creates a more organized and supportive environment, ultimately enhancing the overall student experience in Expertiza.

== Reimplementation ==

The [https://github.com/ntummal3/reimplementation-front-end/blob/pankhuri_v1/src/pages/StudentTasks/StudentTask.tsx StudentTaskView.tsx] file includes a React component called StudentTask. This component handles the display of the student task view, showing assignment information, deadlines, and interactive options that vary depending on user permissions. It imports essential modules and functions from React along with custom utility files.

* At the top of the page, a bold title welcomes the user with the assignment name, "OSS Project & Documentation." Just below it, a green notification bar provides students with straightforward instructions on their next steps.

[[File:wiki i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* In the second image, the view expands to show various options available for students to manage their assignments. Links such as "Your Team," "Your Work," "Others' Work," and "Your Scores" are listed, each accompanied by a brief description to clarify available actions. This layout enables students to navigate easily between sections in their assignment workflow, enhancing the platform’s usability.
[[File:wiki i2.png |1000px|center]]
<p style="text-align: center;"></p>

* In this image, alongside the activity navigation links, there's a new option titled "Send Email to Reviewers." This feature allows students to easily connect with their reviewers, streamlining communication. Its strategic placement ensures quick access, making the process more efficient.
[[File:Wiki i3.jpg|1000px|center]]
<p style="text-align: center;"></p>

* This shows the same layout but also includes a visual timeline of past deadlines at the bottom. Key dates, like submission and review deadlines, are marked with red dots and labeled for clarity. This timeline feature gives students an easy, visual way to track their progress and stay on top of important deadlines, enhancing the overall user experience.
[[File:Wiki i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* The timeline includes additional checkpoints showing approaching deadlines for submission and peer review rounds, with each milestone clearly labeled by due date and type, like "Submission Deadline" or "Round 1 Peer Review." This setup lets students easily see their upcoming tasks at a glance.
[[File:Wiki i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* In this image, the layout includes the footer, i.e., navigation links at the bottom for "Back," "Help," and "Papers on Expertiza," giving students quick access to extra resources. This extended timeline supports assignment management across a full semester or project cycle, improving both clarity and usability.
[[File:Wiki i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

== List of files added/updated ==

# src/App.tsx
# src/pages/StudentTasks/DummyData.json
# src/pages/StudentTasks/StudentTask.css
# src/pages/StudentTasks/StudentTask.tsx

== Code Snippets ==

* '''DummyData.json :'''

The DummyData.json file supplies mock data for the StudentTask component, outlining the assignment name and key timeline milestones. The "assignmentName" field holds a string with the assignment title, "OSS project & documentation." The "timeline" field is an array of milestone objects, each featuring a "date" field for the deadline date and time, along with a "label" field indicating its purpose, such as "Submission deadline" or "Round 1 peer review." This data is essential for visualizing assignment milestones within the StudentTask component, providing users with a clear view of important deadlines.

<pre>
{
"assignmentName": "OSS project & documentation",
"timeline": [
{ "date": "Fri, 27 Sep 2024 23:59", "label": "Submission deadline" },
{ "date": "Mon, 30 Sep 2024 23:59", "label": "Review deadline" },
{ "date": "Thu, 03 Oct 2024 23:59", "label": "Submission deadline" },
{ "date": "Sat, 15 Nov 2024 14:34", "label": "Round 1 peer review" },
{ "date": "Tue, 10 Dec 2024 23:59", "label": "Review deadline" }
]
}
</pre>

* '''StudentTask.tsx :'''

The StudentTask.tsx file is a functional React component that serves as the main interface for managing student assignments within the app. Built with TypeScript to improve type safety, it starts by importing essential dependencies, including React, relevant CSS for styling, and a DummyData.json file containing sample assignment and timeline data. Key interfaces, such as TimelineItem, are defined to enforce a consistent structure and validate the data types used.

Within the component's logic, it retrieves the assignment name and timeline details, sets the current date, and includes a function called getStatusClass that determines the status of each timeline item based on its deadline. Additionally, it provides an email feature that lets users send reminders to reviewers. The render method outputs a well-structured layout with a header, user instructions, an email button, a list of assignment-related actions, and an organized timeline showing each deadline alongside its status. The footer offers navigation links for further support. In essence, StudentTask.tsx enhances user experience by integrating interactivity with a clear presentation, allowing students to effectively keep track of their assignments and deadlines.

<pre>
import React from 'react';
import './StudentTask.css';
import dummyData from './DummyData.json';

interface StudentTaskProps {
assignmentName: string;
}

interface TimelineItem {
date: string;
label: string;
}

const StudentTask: React.FC = () => {
const assignmentName = dummyData.assignmentName;
const items: TimelineItem[] = dummyData.timeline;
const currentDate = new Date();

const getStatusClass = (date: string) => {
const deadline = new Date(date);
if (currentDate > deadline) return 'past-deadline';
else return 'approaching-deadline';
};
const handleSendEmail = () => {
window.location.href = "mailto:reviewers@example.com?subject=Review Reminder&body=Please review the submission for Program 2.";
};

return (
<div className="student-task-container">
<h1>Submit or Review work for {assignmentName}</h1>
<div className="instruction">
Next: Click the activity you wish to perform on the assignment titled: {assignmentName}
</div>

<div style={{ position: 'relative'}}>
<button
onClick={handleSendEmail}
style={{
position: 'absolute',
right: '20px',
backgroundColor: 'transparent',
color: '#986633',
border: 'none',
cursor: 'pointer',
textDecoration: 'underline'
}}
>
Send Email To Reviewers
</button>
</div>

<ul className="actions">
<li><a href="#">Your team</a> (View and manage your team)</li>
<li><a href="#">Your work</a> (View your work)</li>
<li><a href="#">Others' work</a> (Give feedback to others on their work)</li>
<li>
<a href="#">Your scores</a> (View feedback on your work)
<span> | </span>
<a href="#">Alternate View</a>
</li>
<li><a href="#">Change your handle</a> (Provide a different handle for this assignment)</li>
</ul>

<div className="timeline">
{items.map((item, index) => (
<div key={index} className={`timeline-item ${getStatusClass(item.date)}`}>
<li>
<div className="timeline-circle"></div>
<span className="timeline-date">{item.date}</span>
<span className="timeline-label">{item.label}</span>
</li>
</div>

))}
</div>

<div className="footer">
<a href="javascript:window.history.back()">Back</a> |
<a href="http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation" target="_blank">Help</a> |
<a href="http://research.csc.ncsu.edu/efg/expertiza/papers" target="_blank">Papers on Expertiza</a>
</div>
</div>
);
};

export default StudentTask;
</pre>

* '''App.tsx :'''

In App.tsx, we added routing code to integrate the StudentTask component, enabling users to navigate directly to the student task interface through a specific route. By importing StudentTask from ./pages/StudentTasks/StudentTask, the component becomes accessible within the main application.

The routing setup defines an object that specifies the path and its associated component:

<pre>
import StudentTask from "./pages/StudentTasks/StudentTask";
{
path: "/student_tasks",
element: <StudentTask />
}
</pre>

This code snippet creates a new route at /student_tasks, which renders the StudentTask component whenever that path is accessed. This setup provides smooth navigation to the student tasks page, where students can easily view and manage their assignments, actions, and timelines directly from this route.

== Usage of SOLID Principles ==

* '''Single Responsibility Principle :'''

The StudentTask.tsx component follows the Single Responsibility Principle by concentrating on one main task: managing the interface for viewing and interacting with student assignment tasks. Each function within the component, such as getStatusClass or handleSendEmail, serves a specific purpose, all working together to present assignment-related information and actions seamlessly.

Here’s a code snippet illustrating SRP:

<pre>
const getStatusClass = (date: string) => {
const deadline = new Date(date);
if (currentDate > deadline) return 'past-deadline';
else return 'approaching-deadline';
};

const handleSendEmail = () => {
window.location.href = "mailto:reviewers@example.com?subject=Review Reminder&body=Please review the submission for Program 2.";
};
</pre>

Each function here has one specific task, whether it’s determining the status class of a deadline or handling an email action, ensuring the component remains modular and focused.

* '''Interface Segregation Principle (ISP):'''

The Interface Segregation Principle suggests using smaller, more focused interfaces rather than large, general ones. In StudentTask.tsx, this principle is partially implemented by defining distinct interfaces like StudentTaskProps and TimelineItem, each with minimal, specific responsibilities. This approach makes each type easier to manage and use where needed without unnecessary complexity.

Here’s a code snippet illustrating isp:

<pre>
interface StudentTaskProps {
assignmentName: string;
}

interface TimelineItem {
date: string;
label: string;
}
</pre>

Keeping interfaces small and focused allows us to change or extend each one without impacting unrelated parts of the application.

== Improvements ==

In our reimplementation, we've significantly improved the user interface, prioritizing clarity, usability, and an enhanced user experience. By tackling the main challenges found in the original Expertiza website, we set out to develop a design that is both more intuitive and visually appealing.

=== Timeline Alignment ===

In our redesigned interface, we’ve significantly improved the alignment of timeline deadlines to boost the user experience. By arranging deadlines in a clear, sequential format, users can effortlessly follow the flow of submission and review stages, lowering the chance of missing any crucial dates.

This structured layout allows users to distinguish between different phases at a glance, making it clear when specific actions need to be taken. Unlike the original Expertiza site, where deadlines might feel cluttered and challenging to track, our design displays each milestone within a cohesive, easy-to-navigate timeline.

Aligning the timeline properly results in a cleaner interface with reduced mental effort for the user. They can quickly scan through and understand the chronological order without struggling through scattered elements. Each deadline is visibly linked to its relevant tasks, which strengthens overall comprehension.

Additionally, this organized view aids users in planning their activities more efficiently. Seeing how deadlines are interconnected at a glance enables them to prioritize and manage their time more effectively. This streamlined setup simplifies deadline management, fostering proactive interaction with the platform and offering a more intuitive experience compared to the original Expertiza layout.

=== Navigation Links ===

In our redesign, the navigation links have been strategically improved to enhance usability. By grouping the "Back," "Help," and "Papers on Expertiza" links at the bottom of the interface, we’ve created a more intuitive navigation experience. This setup streamlines access to essential resources, which simplifies the overall workflow.

With these links consolidated in one area, users can easily find what they need without being distracted by scattered options. This design enables users to move back in their tasks, seek help, or access relevant papers quickly and easily—all in one click. Ultimately, this organized layout fosters a smoother user experience, minimizing frustration and encouraging more productive engagement with the platform.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Scope for future improvement ==

=== Database Integration ===

This change will allow dynamic data retrieval, ensuring the application always shows the latest information. Also, some tables might require adjustments—such as adding or removing columns—to keep the structure in sync with any updates or changes.

=== Notification System Integration ===

Implementing real-time notifications would enable students to receive instant alerts on upcoming deadlines, new peer review requests, and task updates, keeping them proactively informed. Notifications could appear within the app, as well as via optional email or SMS alerts, ensuring critical information is accessible even outside the platform. This feature would reduce the need for students to constantly check for updates, streamlining task management and supporting timely completion of assignments.

=== Search and Filter Functionality ===

Adding search and filter features allows users to quickly find specific tables or records in the database. User-friendly tools like keyword search, criteria-based filters, and instant suggestions enhance the experience, while persistent filters and robust error handling support smooth navigation and efficient access to relevant information.

== Testing ==

Testing was initially outside the scope of our project, as the main focus was frontend development. However, validating the functionality and user experience of the interface remains essential. Therefore, manual testing procedures will be implemented to confirm the correct operation of UI components. These procedures include:

* Ensuring that timeline items display with the correct status indicators based on deadlines.
* Ensuring that the status colors (e.g., past-deadline vs. approaching-deadline) update accurately based on the current date, clearly indicating the urgency of each deadline.
* Verifying all added buttons and links to ensure they function as expected.

== Peer Review Information ==
For those who wish to access the Expertiza application linked to this assignment, the login details are provided below:

'''Admin credentials:''' Username -> admin, Password -> password123

The expertiza application can be accessed by running the front end and back end simultaneously on your local laptop. The instructions on how to run the application is on the respective repositories.

== Github repository ==

Here are the links to the front-end and back-end reimplementations:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

'''These changes can be viewed in this pull request''' [https://github.com/expertiza/reimplementation-front-end/pull/71].

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2475. Reimplement student task view

2024-10-30T02:17:08Z

Ppriya2:

CSC/ECE 517 Fall 2024

2024-10-29T20:50:42Z

Ppriya2:

* [[CSC/ECE 517 Fall 2024 - E2452. Refactor review_mapping_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2454. Refactor student_task.rb]]
* [[CSC/ECE 517 Fall 2024 - E2456. Refactor teams_user.rb]]
* [[CSC/ECE 517 Fall 2024 - E2455. Refactor sign_up_sheet_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2459. View for results of bidding]]
* [[CSC/ECE 517 Fall 2024 - E2460 Mentor-Meeting Management]]
* [[CSC/ECE 517 Fall 2024 - E2461. UI for Courses]]
* [[CSC/ECE 517 Fall 2024 - E2464 UI for Project Topics (was: Sign_up_Topics)]]
* [[CSC/ECE 517 Fall 2024 - E2465. UI for Institutions and Notification]]
* [[CSC/ECE 517 Fall 2024 - E2466. UI for Impersonate User]]
* [[CSC/ECE 517 Fall 2024 - E2467. UI for View Submissions]]
* [[CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view_team]]
* [[CSC/ECE 517 Fall 2024 - E2470. Reimplement grades_controller]]
* [[CSC/ECE 517 Fall 2024 - E2471. Reimplement logger]]
* [[CSC/ECE 517 Fall 2024 - E2475. Reimplement student_task view]]
* [[CSC/ECE 517 Fall 2024 - E2478. Reimplement the Question hierarchy as Item hierarchy]]
* [[CSC/ECE 517 Fall 2024 - E2480. Implement testing for new Bookmarks Controller]]
* [[CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews]]
* [[CSC/ECE 517 Fall 2024 - E2481 Reimplement response_map.rb]]
* [[CSC/ECE 517 Fall 2024 - G2401 Refactor Graphql API endpoint for contribution metrics]]
* [[CSC/ECE 517 Fall 2024 - G2402 Refactor Graphql API endpoint for repositories]]

User:Snukara

2024-10-29T20:49:24Z

Ppriya2: Ppriya2 moved page User:Snukara to CSC/ECE 517 Fall 2024 - E2475. Reimplement student task view

#REDIRECT [[CSC/ECE 517 Fall 2024 - E2475. Reimplement student task view]]

CSC/ECE 517 Fall 2024 - E2475. Reimplement student task view

2024-10-29T20:49:24Z

Ppriya2: Ppriya2 moved page User:Snukara to CSC/ECE 517 Fall 2024 - E2475. Reimplement student task view

__TOC__

== Expertiza Background ==
[http://expertiza.ncsu.edu/ Expertiza] is a free, open-source web app developed with Ruby on Rails. It offers instructors a way to design unique assignments that students can select from a list of topics. The platform supports team formation, allowing students to work together on projects and assignments, and it includes a peer review feature where students can evaluate each other's work. This review system accepts different file types, URLs, and even content from wiki pages, making Expertiza a versatile solution for handling assignments, teamwork, and peer evaluations.

== Project Description ==
Redesign the student task view in Expertiza by developing a new front-end using React JS and TypeScript. The main goals are to enhance responsiveness, usability, provide real-time updates, and create an improved student experience.

This project will focus on these core features:
# Task Details View: Display essential information about assignments, including the title, due date, progress, review status, and any earned badges.
# Task Interaction: Simplify actions for students, allowing them to submit work, request revisions, and access feedback. Enable easy navigation through various task sections.
# Timeline Visualization: Present a clear visual timeline that highlights due dates, helping students understand their progress within the task.
# Lazy Loading: Optimize page load speeds by loading only the necessary elements, ensuring a seamless experience.

== Files modified in current project ==

[[File:wiki i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

[[File:1.png |1000px|center]]
<p style="text-align: center;"></p>

[[File:Wiki i3.jpg|1000px|center]]
<p style="text-align: center;"></p>

[[File:Wiki i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

[[File:Wiki i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

[[File:Wiki i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Scope for future improvement ==

=== Database Integration ===

=== Search and Filter Functionality ===

== Peer Review Information ==
For those who wish to access the Expertiza application linked to this assignment, the login details are provided below:

Admin credentials: Username -> admin, Password -> password123

The expertiza application can be accessed by running the front end and back end simultaneously on your local laptop. The instructions on how to run the application is on the respective repositories.

== Github repository ==

Here are the links to the front-end and back-end reimplementations:</br>

Front end: </br> github[https://github.com/ntummal3/reimplementation-front-end]

These changes can be viewed in this pull request[https://github.com/expertiza/reimplementation-front-end/compare/main...ntummal3:reimplementation-front-end:main].

== Team ==

Mentor:

Kashika Malick (kmalick@ncsu.edu)

Students:

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)