Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-22T20:12:56Z

Mmviola: /* Reference Links */

==E2538 Reimplementing Questionnaire Page==

__TOC__

==About Expertiza==
Expertiza is an open-source web application currently built using [http://rubyonrails.org/ Ruby on Rails] and led by [https://www.csc.ncsu.edu/people/efg Dr. Edward Gehringer]. Designed for educational use, it enables instructors to manage assignments, rubrics, and participants, as well as assign grades and monitor student progress. Students can submit various types of learning objects, form teams, conduct peer evaluations, and review feedback from both peers and instructors. Originally developed at NC State, Expertiza is now used in select courses there and by faculty at other institutions, offering a flexible platform to enhance active learning and feedback in academic settings.

The reimplementation of Expertiza aims to mimic and enhance the application’s existing functionality with clean, well-structured code, while transitioning to a front-end application written in React and Typescipt integrated with a Ruby on Rails back-end.

==Project Overview==
The goal of this project is to implement the Questionnaire Management Dashboard and Create/Edit Rubric pages in Expertiza by reimplementing its frontend using React with TypeScript, while integrating it with the existing Ruby on Rails backend APIs in the reimplementation backend repo. The new implementation will improve user experience, maintainability, and scalability while preserving core functionalities.

This project covers:

* Developing a React-based UI for managing questionnaire rubrics.

* Enabling navigation to a new page when clicking the "+" button to create a specific rubric for a questionnaire type.

* Ensuring seamless API integration with the reimplementation backend repo.

* Managing user sessions and authentication securely.

While adhering to the following best practices:

*Component Reusability (DRY Principle): Design reusable and modular components to avoid duplication and simplify maintenance, adhering to the "Don't Repeat Yourself" principle.

*Separation of Concerns: Keep the UI, state management, and business logic separated. Use container components for state and logic and presentational components for rendering.

*Responsive and Accessible Design: Ensure the UI adapts to different devices and meets accessibility standards (e.g., ARIA roles, keyboard navigation, and proper contrast).

*Type Safety with TypeScript: Use TypeScript interfaces and types to ensure data consistency, reduce runtime errors.

*Single Responsibility Principle: Each component or function should have a single, well-defined purpose to improve clarity, testability, and scalability.

==What Needs to be Done?==
===Questionnaire Management Dashboard===

Displays a list of questionnaire types (Review, Metareview, Author Feedback, etc.)
* Each questionnaire type has a "+" button, which, when clicked, navigates to a new page for creating a specific rubric for that questionnaire type.
* Data is fetched dynamically from the backend.

[[File:Picx1x.png | 700px]]

===Create/Edit Rubric Page===

This page is displayed when a user clicks the "+" button from the dashboard.

Allows users to:
* Enter a name for the rubric.
* Define min/max item scores.
* Set the review visibility (private/public).
* Add criteria for evaluation.
* Submit the form to create a new rubric for the selected questionnaire type.

[[File:Picx2x.png | 700px]]

==Backend Integration==

The frontend interacts with several key resources exposed by the backend through a RESTful API. The structure of each model's associated database table lets us define Typescript interfaces, transform request/response payloads and promote type safety.

===Models===

====Questionnaire====

The <code>Questionnaire</code> model forms the foundation of the Create/Edit form functionality, storing necessary attributes for each questionnaire. These fields are used to construct a form for editing or creating a rubric and to prepopulate the form when editing an existing rubric.

The backend database also includes a table of <code>questionnaire_types</code>, access to which would allow the Questionnaire Management Dashboard to dynamically render all available categories of questionnaires and enable users to initiate the creation process based on a selected type.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the questionnaire
|-
| name || The name/title of the questionnaire
|-
| instructor_id || Foreign key referencing the instructor who created it
|-
| private || Boolean indicating if the questionnaire is private
|-
| min_question_score || Minimum score that can be given to any question
|-
| max_question_score || Maximum score that can be given to any question
|-
| questionnaire_type || The type/category of questionnaire (e.g., Survey, Teammate Review)
|-
| display_type || Field for specifying how to display the questionnaire
|-
| instruction_loc || Field for custom instructions location or reference
|-
| created_at || Timestamp of questionnaire creation
|-
| updated_at || Timestamp of last update
|}

====Item====

The <code>Item</code> model represents individual items (or questions) within a questionnaire and includes attributes that should be included when adding an item to a particular questionnaire.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the item
|-
| txt || The text of the item/question
|-
| weight || The relative importance or weight of the item
|-
| seq || The sequence/order of the item in the questionnaire
|-
| question_type || Foreign key referencing the type of question
|-
| size || Size attribute for text-based answers (e.g., text area size)
|-
| alternatives || Possible answer choices (comma-separated for multiple-choice)
|-
| break_before || Boolean indicating whether to insert a page break before the item
|-
| max_label || Optional label for the maximum scale value
|-
| min_label || Optional label for the minimum scale value
|-
| created_at || Timestamp of item creation
|-
| updated_at || Timestamp of last update
|-
| questionnaire_id || Foreign key referencing the associated questionnaire
|}

===API Endpoints===

To facilitate interaction with the backend, the frontend uses a pre-configured <code>axiosClient</code>, which abstracts the base API URL and port number. This client is defined in the <code>utils/axios_client.ts</code> file and reused throughout the project for API communication. For questionnaire management, several key API routes are accessed using this client. For example, <code>GET /questionnaires/:id</code> fetches detailed data for editing a selected questionnaire. When creating or updating a questionnaire, the application uses <code>POST /questionnaires</code> and <code>PUT /questionnaires/:id</code>, respectively.

{| class="wikitable"
|+
! HTTP Method !! Endpoint !! Description
|-
| GET || /questionnaires || Fetches a list of all questionnaires
|-
| GET || /questionnaires/:id || Fetches a specific questionnaire by ID
|-
| POST || /questionnaires || Creates a new questionnaire
|-
| PUT || /questionnaires/:id || Updates an existing questionnaire
|-
| DELETE || /questionnaires/:id || Deletes a specific questionnaire
|-
| GET || /questions || Retrieves a list of all questions (items)
|-
| GET || /questions/:id || Retrieves a specific item, along with its rendered display
|-
| POST || /questions || Creates a new item for a questionnaire
|-
| PUT || /questions/:id || Updates an existing item
|}

==Implementation==
===User Interface===

====Manage Questionnaires====

To navigate to the Questionnaire Management Dashboard, Questionnaire from the Manage dropdown from any page on Expertiza.

To be consistent with other management pages (for Users, Courses, Assignements) in the reimplementation front end, a table of questionnaires belonging to the logged-in instructor is visible on the page. From this page, you may create, edit, or delete a questionnaire.

To create a new questionnaire, click on the Create button in the top left corner of the page.

[[File:ManagementDashboard.png | 700px]]

====Type Selection====

When the Create button is selected from the top of the Questionnaire Management Dashboard, a pop-up appears with the available questionnaire types. To create a questionnaire of a given type, select the "+" botton in the row of the desired type.

[[File:TypeSelection.png | 700px]]

====Questionnaire Form====

Once a type has been selected, the user is directed to the appropriate form to create a questionnaire of the selected type. The user can include a variable number of items to the questionnaire at the time of creation. The required fields for an item is determined by the item type. For example, a scale type item required minimum and maximum values for its scale.

[[File:Questionnaire Form.png | 700px]]

Once a form field has been touched, the application alerts the user of missing required fields. Failure to provide appropriate values will prevent form submission.

[[File:Screenshot 2025-04-22 at 10.12.22 AM.png | 700px]]

Upon successful submission, the newly-created questionnaire will appear in the list of questionnaires in the Questionnaire Management Dashboard.

[[File:Editquestionnaireselect.png | 700px]]

To edit a questionnaire, select the edit icon next to the questionnaire you want to edit. You will be directed to a form with the existing questionnaire and items filled in.

[[File:Editquestionnaire.png | 700px]]

===QuestionnaireUtils.ts===
The <code>QuestionnaireUtils.ts</code> file serves as a utility module for handling questionnaire-related functionality in the application, including interfaces, data transformation methods, and back-end data retrieval. This file helps maintain clear separation of concerns, type safety, and adherence to design principles such as the Single Responsibility Principle (SRP).

===QuestionnaireForm.tsx===
The <code>QuestionnaireForm.tsx</code> file is a React component that provides a form interface for creating or editing questionnaires. It integrates with Formik for form state management and validation, utilizing React Bootstrap for UI elements.

The form fields are strongly typed using Formik's <code>Field</code> components and the <code>QuestionnaireFormValues</code> interface, ensuring that the data entered by the user adheres to the correct structure.
*Name: A text field for entering the questionnaire name.
*Type: A hidden input used to specify the type of the questionnaire selected from the Questionnaire Management Dashboard and to be passed to the back-end.
*Private: A checkbox to indicate whether the questionnaire is private.
*Minimum/Maximum Question Scores: Numeric fields for setting the minimum and maximum scores for questions.

The form delegates the responsibility of handling questionnaire items to the <code>QuestionnaireItemsFieldArray</code> component, which allows users to add or remove items dynamically and keeps each component focused on a single responsibility.

===QuestionnaireTypes.tsx===
This component renders a table that displays different types of questionnaires. Each row provides an action to navigate to the corresponding creation page for the selected questionnaire type. The <code>Table</code> component from <code>components/Table/Table</code> is used in adherence with the DRY Principle and the provided design guidelines.

==Files Modified==
The following files were created or modified to implement the questionnaire dashboard and rubric management UI in React with TypeScript:

*<code>src/pages/Questionnaires/Questionnaires.tsx</code> – Implements the Questionnaire Management Dashboard UI.
*<code>src/pages/Questionnaires/QuestionnaireTypes.tsx</code> – List of questionnaire types that may be created by the user.
*<code>src/pages/Questionnaires/QuestionnaireEditor.tsx</code> – Create/Edit Rubric page that encapsultes form.
*<code>src/pages/Questionnaires/QuestionnaireForm.tsx</code> – Form component for creating or editing questionnaires.
*<code>src/pages/Questionnaires/QuestionnaireItemsFieldArray.tsx</code> – Supporting form component to dynamically create or update questionnaire items.
*<code>src/pages/Questionnaires/QuestionnaireUtils.tsx</code> – Utility functions and interfaces for questionnaires.
*<code>src/App.tsx</code> – Updated routing to include new questionnaire pages.
*<code>src/assets/icons/</code> – Added new UI icons for editing, deleting, and copying questionnaires.
*<code>src/utils/axios_client.ts</code> – Preconfigured axios instance used throughout the frontend for API calls.
*<code>package.json</code> and <code>package-lock.json</code> – Updated dependencies for icons, React Bootstrap, and Formik support.

==Test Plan - Manual Testing Strategy==
====Login Credentials====
To login to the application, use the following credentials:
* username: instructor6
* password: password

====Questionnaire Dashboard Loading====
*Visit /questionnaire and confirm that all types of questionnaires are displayed.
*"+" button next to each type should open the rubric creation form for that type.

====Form Functionality====
*Enter name, min/max scores, toggle private/public checkbox.
*Dynamically add/remove criteria.
*Submit form to create a new rubric and confirm it reflects in the backend.

====Edit Rubric====
*Click on any existing rubric to load it in the edit form.
*Edit fields and submit changes. Confirm updated data is persisted.

====Form Validation====
*Leave required fields empty and confirm validation errors appear.
*Enter invalid values (e.g., max < min) and confirm appropriate messages.

====API Communication====
*Verified POST/PUT requests are correctly formatted.
*Backend updates reflected in UI after reload.

====UI Testing====
*Confirm responsiveness across desktop, tablet, and mobile.
*Check accessibility: keyboard navigation, proper labeling.

==Team==
=====Mentor=====
*Prathyusha Kodali - pkodali

=====Members=====
*Ashwin Muniswamy - akumarm
*Michael Anderson - mwander5
*Martina Viola - mmviola

==Reference Links==
*[https://expertiza.ncsu.edu/tree_display/list?currCtlr=Questionnaires, Questionnaire Management Dashboard]
*[https://expertiza.ncsu.edu/questionnaires/new?model=ReviewQuestionnaire&private=1, Create/Edit Rubric Page]
*[https://github.com/mmviola1/reimplementation-front-end-E2538 Project Repo]
*[http://152.7.176.255:8080 VCL Deployment]

=====Demo Video=====
*[https://youtu.be/eVViM9_Gg80, Demo Video]

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-22T16:15:26Z

Mmviola: /* Reference Links */

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-22T14:50:46Z

Mmviola: /* QuestionnaireType.tsx */

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-22T14:37:52Z

Mmviola: /* Files Modified */

==E2538 Reimplementing Questionnaire Page==

__TOC__

==About Expertiza==
Expertiza is an open-source web application currently built using [http://rubyonrails.org/ Ruby on Rails] and led by [https://www.csc.ncsu.edu/people/efg Dr. Edward Gehringer]. Designed for educational use, it enables instructors to manage assignments, rubrics, and participants, as well as assign grades and monitor student progress. Students can submit various types of learning objects, form teams, conduct peer evaluations, and review feedback from both peers and instructors. Originally developed at NC State, Expertiza is now used in select courses there and by faculty at other institutions, offering a flexible platform to enhance active learning and feedback in academic settings.

The reimplementation of Expertiza aims to mimic and enhance the application’s existing functionality with clean, well-structured code, while transitioning to a front-end application written in React and Typescipt integrated with a Ruby on Rails back-end.

==Project Overview==
The goal of this project is to implement the Questionnaire Management Dashboard and Create/Edit Rubric pages in Expertiza by reimplementing its frontend using React with TypeScript, while integrating it with the existing Ruby on Rails backend APIs in the reimplementation backend repo. The new implementation will improve user experience, maintainability, and scalability while preserving core functionalities.

This project covers:

* Developing a React-based UI for managing questionnaire rubrics.

* Enabling navigation to a new page when clicking the "+" button to create a specific rubric for a questionnaire type.

* Ensuring seamless API integration with the reimplementation backend repo.

* Managing user sessions and authentication securely.

While adhering to the following best practices:

*Component Reusability (DRY Principle): Design reusable and modular components to avoid duplication and simplify maintenance, adhering to the "Don't Repeat Yourself" principle.

*Separation of Concerns: Keep the UI, state management, and business logic separated. Use container components for state and logic and presentational components for rendering.

*Responsive and Accessible Design: Ensure the UI adapts to different devices and meets accessibility standards (e.g., ARIA roles, keyboard navigation, and proper contrast).

*Type Safety with TypeScript: Use TypeScript interfaces and types to ensure data consistency, reduce runtime errors.

*Single Responsibility Principle: Each component or function should have a single, well-defined purpose to improve clarity, testability, and scalability.

==What Needs to be Done?==
===Questionnaire Management Dashboard===

Displays a list of questionnaire types (Review, Metareview, Author Feedback, etc.)
* Each questionnaire type has a "+" button, which, when clicked, navigates to a new page for creating a specific rubric for that questionnaire type.
* Data is fetched dynamically from the backend.

[[File:Picx1x.png | 700px]]

===Create/Edit Rubric Page===

This page is displayed when a user clicks the "+" button from the dashboard.

Allows users to:
* Enter a name for the rubric.
* Define min/max item scores.
* Set the review visibility (private/public).
* Add criteria for evaluation.
* Submit the form to create a new rubric for the selected questionnaire type.

[[File:Picx2x.png | 700px]]

==Backend Integration==

The frontend interacts with several key resources exposed by the backend through a RESTful API. The structure of each model's associated database table lets us define Typescript interfaces, transform request/response payloads and promote type safety.

===Models===

====Questionnaire====

The <code>Questionnaire</code> model forms the foundation of the Create/Edit form functionality, storing necessary attributes for each questionnaire. These fields are used to construct a form for editing or creating a rubric and to prepopulate the form when editing an existing rubric.

The backend database also includes a table of <code>questionnaire_types</code>, access to which would allow the Questionnaire Management Dashboard to dynamically render all available categories of questionnaires and enable users to initiate the creation process based on a selected type.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the questionnaire
|-
| name || The name/title of the questionnaire
|-
| instructor_id || Foreign key referencing the instructor who created it
|-
| private || Boolean indicating if the questionnaire is private
|-
| min_question_score || Minimum score that can be given to any question
|-
| max_question_score || Maximum score that can be given to any question
|-
| questionnaire_type || The type/category of questionnaire (e.g., Survey, Teammate Review)
|-
| display_type || Field for specifying how to display the questionnaire
|-
| instruction_loc || Field for custom instructions location or reference
|-
| created_at || Timestamp of questionnaire creation
|-
| updated_at || Timestamp of last update
|}

====Item====

The <code>Item</code> model represents individual items (or questions) within a questionnaire and includes attributes that should be included when adding an item to a particular questionnaire.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the item
|-
| txt || The text of the item/question
|-
| weight || The relative importance or weight of the item
|-
| seq || The sequence/order of the item in the questionnaire
|-
| question_type || Foreign key referencing the type of question
|-
| size || Size attribute for text-based answers (e.g., text area size)
|-
| alternatives || Possible answer choices (comma-separated for multiple-choice)
|-
| break_before || Boolean indicating whether to insert a page break before the item
|-
| max_label || Optional label for the maximum scale value
|-
| min_label || Optional label for the minimum scale value
|-
| created_at || Timestamp of item creation
|-
| updated_at || Timestamp of last update
|-
| questionnaire_id || Foreign key referencing the associated questionnaire
|}

===API Endpoints===

To facilitate interaction with the backend, the frontend uses a pre-configured <code>axiosClient</code>, which abstracts the base API URL and port number. This client is defined in the <code>utils/axios_client.ts</code> file and reused throughout the project for API communication. For questionnaire management, several key API routes are accessed using this client. For example, <code>GET /questionnaires/:id</code> fetches detailed data for editing a selected questionnaire. When creating or updating a questionnaire, the application uses <code>POST /questionnaires</code> and <code>PUT /questionnaires/:id</code>, respectively.

{| class="wikitable"
|+
! HTTP Method !! Endpoint !! Description
|-
| GET || /questionnaires || Fetches a list of all questionnaires
|-
| GET || /questionnaires/:id || Fetches a specific questionnaire by ID
|-
| POST || /questionnaires || Creates a new questionnaire
|-
| PUT || /questionnaires/:id || Updates an existing questionnaire
|-
| DELETE || /questionnaires/:id || Deletes a specific questionnaire
|-
| GET || /questions || Retrieves a list of all questions (items)
|-
| GET || /questions/:id || Retrieves a specific item, along with its rendered display
|-
| POST || /questions || Creates a new item for a questionnaire
|-
| PUT || /questions/:id || Updates an existing item
|}

==Implementation==
===User Interface===

====Manage Questionnaires====

To navigate to the Questionnaire Management Dashboard, Questionnaire from the Manage dropdown from any page on Expertiza.

To be consistent with other management pages (for Users, Courses, Assignements) in the reimplementation front end, a table of questionnaires belonging to the logged-in instructor is visible on the page. From this page, you may create, edit, or delete a questionnaire.

To create a new questionnaire, click on the Create button in the top left corner of the page.

[[File:ManagementDashboard.png | 700px]]

====Type Selection====

When the Create button is selected from the top of the Questionnaire Management Dashboard, a pop-up appears with the available questionnaire types. To create a questionnaire of a given type, select the "+" botton in the row of the desired type.

[[File:TypeSelection.png | 700px]]

====Questionnaire Form====

Once a type has been selected, the user is directed to the appropriate form to create a questionnaire of the selected type. The user can include a variable number of items to the questionnaire at the time of creation. The required fields for an item is determined by the item type. For example, a scale type item required minimum and maximum values for its scale.

[[File:Questionnaire Form.png | 700px]]

Once a form field has been touched, the application alerts the user of missing required fields. Failure to provide appropriate values will prevent form submission.

[[File:Screenshot 2025-04-22 at 10.12.22 AM.png | 700px]]

Upon successful submission, the newly-created questionnaire will appear in the list of questionnaires in the Questionnaire Management Dashboard.

[[File:Editquestionnaireselect.png | 700px]]

To edit a questionnaire, select the edit icon next to the questionnaire you want to edit. You will be directed to a form with the existing questionnaire and items filled in.

[[File:Editquestionnaire.png | 700px]]

===QuestionnaireUtils.ts===
The <code>QuestionnaireUtils.ts</code> file serves as a utility module for handling questionnaire-related functionality in the application, including interfaces, data transformation methods, and back-end data retrieval. This file helps maintain clear separation of concerns, type safety, and adherence to design principles such as the Single Responsibility Principle (SRP).

===QuestionnaireForm.tsx===
The <code>QuestionnaireForm.tsx</code> file is a React component that provides a form interface for creating or editing questionnaires. It integrates with Formik for form state management and validation, utilizing React Bootstrap for UI elements.

The form fields are strongly typed using Formik's <code>Field</code> components and the <code>QuestionnaireFormValues</code> interface, ensuring that the data entered by the user adheres to the correct structure.
*Name: A text field for entering the questionnaire name.
*Type: A hidden input used to specify the type of the questionnaire selected from the Questionnaire Management Dashboard and to be passed to the back-end.
*Private: A checkbox to indicate whether the questionnaire is private.
*Minimum/Maximum Question Scores: Numeric fields for setting the minimum and maximum scores for questions.

The form delegates the responsibility of handling questionnaire items to the <code>QuestionnaireItemsFieldArray</code> component, which allows users to add or remove items dynamically and keeps each component focused on a single responsibility.

===QuestionnaireType.tsx===
This component renders a table that displays different types of questionnaires. Each row provides an action to navigate to the corresponding creation page for the selected questionnaire type. The <code>Table</code> component from <code>components/Table/Table</code> is used in adherence with the DRY Principle and the provided design guidelines.

==Files Modified==
The following files were created or modified to implement the questionnaire dashboard and rubric management UI in React with TypeScript:

*<code>src/pages/Questionnaires/Questionnaires.tsx</code> – Implements the Questionnaire Management Dashboard UI.
*<code>src/pages/Questionnaires/QuestionnaireTypes.tsx</code> – List of questionnaire types that may be created by the user.
*<code>src/pages/Questionnaires/QuestionnaireEditor.tsx</code> – Create/Edit Rubric page that encapsultes form.
*<code>src/pages/Questionnaires/QuestionnaireForm.tsx</code> – Form component for creating or editing questionnaires.
*<code>src/pages/Questionnaires/QuestionnaireItemsFieldArray.tsx</code> – Supporting form component to dynamically create or update questionnaire items.
*<code>src/pages/Questionnaires/QuestionnaireUtils.tsx</code> – Utility functions and interfaces for questionnaires.
*<code>src/App.tsx</code> – Updated routing to include new questionnaire pages.
*<code>src/assets/icons/</code> – Added new UI icons for editing, deleting, and copying questionnaires.
*<code>src/utils/axios_client.ts</code> – Preconfigured axios instance used throughout the frontend for API calls.
*<code>package.json</code> and <code>package-lock.json</code> – Updated dependencies for icons, React Bootstrap, and Formik support.

==Test Plan - Manual Testing Strategy==
====Login Credentials====
To login to the application, use the following credentials:
* username: instructor6
* password: password

====Questionnaire Dashboard Loading====
*Visit /questionnaire and confirm that all types of questionnaires are displayed.
*"+" button next to each type should open the rubric creation form for that type.

====Form Functionality====
*Enter name, min/max scores, toggle private/public checkbox.
*Dynamically add/remove criteria.
*Submit form to create a new rubric and confirm it reflects in the backend.

====Edit Rubric====
*Click on any existing rubric to load it in the edit form.
*Edit fields and submit changes. Confirm updated data is persisted.

====Form Validation====
*Leave required fields empty and confirm validation errors appear.
*Enter invalid values (e.g., max < min) and confirm appropriate messages.

====API Communication====
*Verified POST/PUT requests are correctly formatted.
*Backend updates reflected in UI after reload.

====UI Testing====
*Confirm responsiveness across desktop, tablet, and mobile.
*Check accessibility: keyboard navigation, proper labeling.

==Team==
=====Mentor=====
*Prathyusha Kodali - pkodali

=====Members=====
*Ashwin Muniswamy - akumarm
*Michael Anderson - mwander5
*Martina Viola - mmviola

==Reference Links==
*[https://expertiza.ncsu.edu/tree_display/list?currCtlr=Questionnaires, Questionnaire Management Dashboard]
*[https://expertiza.ncsu.edu/questionnaires/new?model=ReviewQuestionnaire&private=1, Create/Edit Rubric Page]
*[https://github.com/mmviola1/reimplementation-front-end-E2538 Project Repo]
=====Demo Video=====
*[, Demo Video]

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-22T14:25:27Z

Mmviola: /* Test Plan - Manual Testing Strategy */

==E2538 Reimplementing Questionnaire Page==

__TOC__

==About Expertiza==
Expertiza is an open-source web application currently built using [http://rubyonrails.org/ Ruby on Rails] and led by [https://www.csc.ncsu.edu/people/efg Dr. Edward Gehringer]. Designed for educational use, it enables instructors to manage assignments, rubrics, and participants, as well as assign grades and monitor student progress. Students can submit various types of learning objects, form teams, conduct peer evaluations, and review feedback from both peers and instructors. Originally developed at NC State, Expertiza is now used in select courses there and by faculty at other institutions, offering a flexible platform to enhance active learning and feedback in academic settings.

The reimplementation of Expertiza aims to mimic and enhance the application’s existing functionality with clean, well-structured code, while transitioning to a front-end application written in React and Typescipt integrated with a Ruby on Rails back-end.

==Project Overview==
The goal of this project is to implement the Questionnaire Management Dashboard and Create/Edit Rubric pages in Expertiza by reimplementing its frontend using React with TypeScript, while integrating it with the existing Ruby on Rails backend APIs in the reimplementation backend repo. The new implementation will improve user experience, maintainability, and scalability while preserving core functionalities.

This project covers:

* Developing a React-based UI for managing questionnaire rubrics.

* Enabling navigation to a new page when clicking the "+" button to create a specific rubric for a questionnaire type.

* Ensuring seamless API integration with the reimplementation backend repo.

* Managing user sessions and authentication securely.

While adhering to the following best practices:

*Component Reusability (DRY Principle): Design reusable and modular components to avoid duplication and simplify maintenance, adhering to the "Don't Repeat Yourself" principle.

*Separation of Concerns: Keep the UI, state management, and business logic separated. Use container components for state and logic and presentational components for rendering.

*Responsive and Accessible Design: Ensure the UI adapts to different devices and meets accessibility standards (e.g., ARIA roles, keyboard navigation, and proper contrast).

*Type Safety with TypeScript: Use TypeScript interfaces and types to ensure data consistency, reduce runtime errors.

*Single Responsibility Principle: Each component or function should have a single, well-defined purpose to improve clarity, testability, and scalability.

==What Needs to be Done?==
===Questionnaire Management Dashboard===

Displays a list of questionnaire types (Review, Metareview, Author Feedback, etc.)
* Each questionnaire type has a "+" button, which, when clicked, navigates to a new page for creating a specific rubric for that questionnaire type.
* Data is fetched dynamically from the backend.

[[File:Picx1x.png | 700px]]

===Create/Edit Rubric Page===

This page is displayed when a user clicks the "+" button from the dashboard.

Allows users to:
* Enter a name for the rubric.
* Define min/max item scores.
* Set the review visibility (private/public).
* Add criteria for evaluation.
* Submit the form to create a new rubric for the selected questionnaire type.

[[File:Picx2x.png | 700px]]

==Backend Integration==

The frontend interacts with several key resources exposed by the backend through a RESTful API. The structure of each model's associated database table lets us define Typescript interfaces, transform request/response payloads and promote type safety.

===Models===

====Questionnaire====

The <code>Questionnaire</code> model forms the foundation of the Create/Edit form functionality, storing necessary attributes for each questionnaire. These fields are used to construct a form for editing or creating a rubric and to prepopulate the form when editing an existing rubric.

The backend database also includes a table of <code>questionnaire_types</code>, access to which would allow the Questionnaire Management Dashboard to dynamically render all available categories of questionnaires and enable users to initiate the creation process based on a selected type.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the questionnaire
|-
| name || The name/title of the questionnaire
|-
| instructor_id || Foreign key referencing the instructor who created it
|-
| private || Boolean indicating if the questionnaire is private
|-
| min_question_score || Minimum score that can be given to any question
|-
| max_question_score || Maximum score that can be given to any question
|-
| questionnaire_type || The type/category of questionnaire (e.g., Survey, Teammate Review)
|-
| display_type || Field for specifying how to display the questionnaire
|-
| instruction_loc || Field for custom instructions location or reference
|-
| created_at || Timestamp of questionnaire creation
|-
| updated_at || Timestamp of last update
|}

====Item====

The <code>Item</code> model represents individual items (or questions) within a questionnaire and includes attributes that should be included when adding an item to a particular questionnaire.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the item
|-
| txt || The text of the item/question
|-
| weight || The relative importance or weight of the item
|-
| seq || The sequence/order of the item in the questionnaire
|-
| question_type || Foreign key referencing the type of question
|-
| size || Size attribute for text-based answers (e.g., text area size)
|-
| alternatives || Possible answer choices (comma-separated for multiple-choice)
|-
| break_before || Boolean indicating whether to insert a page break before the item
|-
| max_label || Optional label for the maximum scale value
|-
| min_label || Optional label for the minimum scale value
|-
| created_at || Timestamp of item creation
|-
| updated_at || Timestamp of last update
|-
| questionnaire_id || Foreign key referencing the associated questionnaire
|}

===API Endpoints===

To facilitate interaction with the backend, the frontend uses a pre-configured <code>axiosClient</code>, which abstracts the base API URL and port number. This client is defined in the <code>utils/axios_client.ts</code> file and reused throughout the project for API communication. For questionnaire management, several key API routes are accessed using this client. For example, <code>GET /questionnaires/:id</code> fetches detailed data for editing a selected questionnaire. When creating or updating a questionnaire, the application uses <code>POST /questionnaires</code> and <code>PUT /questionnaires/:id</code>, respectively.

{| class="wikitable"
|+
! HTTP Method !! Endpoint !! Description
|-
| GET || /questionnaires || Fetches a list of all questionnaires
|-
| GET || /questionnaires/:id || Fetches a specific questionnaire by ID
|-
| POST || /questionnaires || Creates a new questionnaire
|-
| PUT || /questionnaires/:id || Updates an existing questionnaire
|-
| DELETE || /questionnaires/:id || Deletes a specific questionnaire
|-
| GET || /questions || Retrieves a list of all questions (items)
|-
| GET || /questions/:id || Retrieves a specific item, along with its rendered display
|-
| POST || /questions || Creates a new item for a questionnaire
|-
| PUT || /questions/:id || Updates an existing item
|}

==Implementation==
===User Interface===

====Manage Questionnaires====

To navigate to the Questionnaire Management Dashboard, Questionnaire from the Manage dropdown from any page on Expertiza.

To be consistent with other management pages (for Users, Courses, Assignements) in the reimplementation front end, a table of questionnaires belonging to the logged-in instructor is visible on the page. From this page, you may create, edit, or delete a questionnaire.

To create a new questionnaire, click on the Create button in the top left corner of the page.

[[File:ManagementDashboard.png | 700px]]

====Type Selection====

When the Create button is selected from the top of the Questionnaire Management Dashboard, a pop-up appears with the available questionnaire types. To create a questionnaire of a given type, select the "+" botton in the row of the desired type.

[[File:TypeSelection.png | 700px]]

====Questionnaire Form====

Once a type has been selected, the user is directed to the appropriate form to create a questionnaire of the selected type. The user can include a variable number of items to the questionnaire at the time of creation. The required fields for an item is determined by the item type. For example, a scale type item required minimum and maximum values for its scale.

[[File:Questionnaire Form.png | 700px]]

Once a form field has been touched, the application alerts the user of missing required fields. Failure to provide appropriate values will prevent form submission.

[[File:Screenshot 2025-04-22 at 10.12.22 AM.png | 700px]]

Upon successful submission, the newly-created questionnaire will appear in the list of questionnaires in the Questionnaire Management Dashboard.

[[File:Editquestionnaireselect.png | 700px]]

To edit a questionnaire, select the edit icon next to the questionnaire you want to edit. You will be directed to a form with the existing questionnaire and items filled in.

[[File:Editquestionnaire.png | 700px]]

===QuestionnaireUtils.ts===
The <code>QuestionnaireUtils.ts</code> file serves as a utility module for handling questionnaire-related functionality in the application, including interfaces, data transformation methods, and back-end data retrieval. This file helps maintain clear separation of concerns, type safety, and adherence to design principles such as the Single Responsibility Principle (SRP).

===QuestionnaireForm.tsx===
The <code>QuestionnaireForm.tsx</code> file is a React component that provides a form interface for creating or editing questionnaires. It integrates with Formik for form state management and validation, utilizing React Bootstrap for UI elements.

The form fields are strongly typed using Formik's <code>Field</code> components and the <code>QuestionnaireFormValues</code> interface, ensuring that the data entered by the user adheres to the correct structure.
*Name: A text field for entering the questionnaire name.
*Type: A hidden input used to specify the type of the questionnaire selected from the Questionnaire Management Dashboard and to be passed to the back-end.
*Private: A checkbox to indicate whether the questionnaire is private.
*Minimum/Maximum Question Scores: Numeric fields for setting the minimum and maximum scores for questions.

The form delegates the responsibility of handling questionnaire items to the <code>QuestionnaireItemsFieldArray</code> component, which allows users to add or remove items dynamically and keeps each component focused on a single responsibility.

===QuestionnaireType.tsx===
This component renders a table that displays different types of questionnaires. Each row provides an action to navigate to the corresponding creation page for the selected questionnaire type. The <code>Table</code> component from <code>components/Table/Table</code> is used in adherence with the DRY Principle and the provided design guidelines.

==Files Modified==
The following files were created or modified to implement the questionnaire dashboard and rubric management UI in React with TypeScript:

*<code>src/pages/Questionnaire/questionnaire.tsx</code> – Implements the Questionnaire Management Dashboard UI.
*<code>src/pages/EditQuestionnaire/Questionnaire.tsx</code> – Implements the Create/Edit Rubric page with full form support.
*<code>src/App.tsx</code> – Updated routing to include new questionnaire pages.
*<code>src/assets/icons/</code> – Added new UI icons for editing, deleting, and copying questionnaires.
*<code>src/utils/axios_client.ts</code> – Preconfigured axios instance used throughout the frontend for API calls.
*<code>package.json</code> and <code>package-lock.json</code> – Updated dependencies for icons, React Bootstrap, and Formik support.

==Test Plan - Manual Testing Strategy==
====Login Credentials====
To login to the application, use the following credentials:
* username: instructor6
* password: password

====Questionnaire Dashboard Loading====
*Visit /questionnaire and confirm that all types of questionnaires are displayed.
*"+" button next to each type should open the rubric creation form for that type.

====Form Functionality====
*Enter name, min/max scores, toggle private/public checkbox.
*Dynamically add/remove criteria.
*Submit form to create a new rubric and confirm it reflects in the backend.

====Edit Rubric====
*Click on any existing rubric to load it in the edit form.
*Edit fields and submit changes. Confirm updated data is persisted.

====Form Validation====
*Leave required fields empty and confirm validation errors appear.
*Enter invalid values (e.g., max < min) and confirm appropriate messages.

====API Communication====
*Verified POST/PUT requests are correctly formatted.
*Backend updates reflected in UI after reload.

====UI Testing====
*Confirm responsiveness across desktop, tablet, and mobile.
*Check accessibility: keyboard navigation, proper labeling.

==Team==
=====Mentor=====
*Prathyusha Kodali - pkodali

=====Members=====
*Ashwin Muniswamy - akumarm
*Michael Anderson - mwander5
*Martina Viola - mmviola

==Reference Links==
*[https://expertiza.ncsu.edu/tree_display/list?currCtlr=Questionnaires, Questionnaire Management Dashboard]
*[https://expertiza.ncsu.edu/questionnaires/new?model=ReviewQuestionnaire&private=1, Create/Edit Rubric Page]
*[https://github.com/mmviola1/reimplementation-front-end-E2538 Project Repo]
=====Demo Video=====
*[, Demo Video]

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-22T14:21:33Z

Mmviola: /* Questionnaire Form */

==E2538 Reimplementing Questionnaire Page==

__TOC__

==About Expertiza==
Expertiza is an open-source web application currently built using [http://rubyonrails.org/ Ruby on Rails] and led by [https://www.csc.ncsu.edu/people/efg Dr. Edward Gehringer]. Designed for educational use, it enables instructors to manage assignments, rubrics, and participants, as well as assign grades and monitor student progress. Students can submit various types of learning objects, form teams, conduct peer evaluations, and review feedback from both peers and instructors. Originally developed at NC State, Expertiza is now used in select courses there and by faculty at other institutions, offering a flexible platform to enhance active learning and feedback in academic settings.

The reimplementation of Expertiza aims to mimic and enhance the application’s existing functionality with clean, well-structured code, while transitioning to a front-end application written in React and Typescipt integrated with a Ruby on Rails back-end.

==Project Overview==
The goal of this project is to implement the Questionnaire Management Dashboard and Create/Edit Rubric pages in Expertiza by reimplementing its frontend using React with TypeScript, while integrating it with the existing Ruby on Rails backend APIs in the reimplementation backend repo. The new implementation will improve user experience, maintainability, and scalability while preserving core functionalities.

This project covers:

* Developing a React-based UI for managing questionnaire rubrics.

* Enabling navigation to a new page when clicking the "+" button to create a specific rubric for a questionnaire type.

* Ensuring seamless API integration with the reimplementation backend repo.

* Managing user sessions and authentication securely.

While adhering to the following best practices:

*Component Reusability (DRY Principle): Design reusable and modular components to avoid duplication and simplify maintenance, adhering to the "Don't Repeat Yourself" principle.

*Separation of Concerns: Keep the UI, state management, and business logic separated. Use container components for state and logic and presentational components for rendering.

*Responsive and Accessible Design: Ensure the UI adapts to different devices and meets accessibility standards (e.g., ARIA roles, keyboard navigation, and proper contrast).

*Type Safety with TypeScript: Use TypeScript interfaces and types to ensure data consistency, reduce runtime errors.

*Single Responsibility Principle: Each component or function should have a single, well-defined purpose to improve clarity, testability, and scalability.

==What Needs to be Done?==
===Questionnaire Management Dashboard===

Displays a list of questionnaire types (Review, Metareview, Author Feedback, etc.)
* Each questionnaire type has a "+" button, which, when clicked, navigates to a new page for creating a specific rubric for that questionnaire type.
* Data is fetched dynamically from the backend.

[[File:Picx1x.png | 700px]]

===Create/Edit Rubric Page===

This page is displayed when a user clicks the "+" button from the dashboard.

Allows users to:
* Enter a name for the rubric.
* Define min/max item scores.
* Set the review visibility (private/public).
* Add criteria for evaluation.
* Submit the form to create a new rubric for the selected questionnaire type.

[[File:Picx2x.png | 700px]]

==Backend Integration==

The frontend interacts with several key resources exposed by the backend through a RESTful API. The structure of each model's associated database table lets us define Typescript interfaces, transform request/response payloads and promote type safety.

===Models===

====Questionnaire====

The <code>Questionnaire</code> model forms the foundation of the Create/Edit form functionality, storing necessary attributes for each questionnaire. These fields are used to construct a form for editing or creating a rubric and to prepopulate the form when editing an existing rubric.

The backend database also includes a table of <code>questionnaire_types</code>, access to which would allow the Questionnaire Management Dashboard to dynamically render all available categories of questionnaires and enable users to initiate the creation process based on a selected type.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the questionnaire
|-
| name || The name/title of the questionnaire
|-
| instructor_id || Foreign key referencing the instructor who created it
|-
| private || Boolean indicating if the questionnaire is private
|-
| min_question_score || Minimum score that can be given to any question
|-
| max_question_score || Maximum score that can be given to any question
|-
| questionnaire_type || The type/category of questionnaire (e.g., Survey, Teammate Review)
|-
| display_type || Field for specifying how to display the questionnaire
|-
| instruction_loc || Field for custom instructions location or reference
|-
| created_at || Timestamp of questionnaire creation
|-
| updated_at || Timestamp of last update
|}

====Item====

The <code>Item</code> model represents individual items (or questions) within a questionnaire and includes attributes that should be included when adding an item to a particular questionnaire.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the item
|-
| txt || The text of the item/question
|-
| weight || The relative importance or weight of the item
|-
| seq || The sequence/order of the item in the questionnaire
|-
| question_type || Foreign key referencing the type of question
|-
| size || Size attribute for text-based answers (e.g., text area size)
|-
| alternatives || Possible answer choices (comma-separated for multiple-choice)
|-
| break_before || Boolean indicating whether to insert a page break before the item
|-
| max_label || Optional label for the maximum scale value
|-
| min_label || Optional label for the minimum scale value
|-
| created_at || Timestamp of item creation
|-
| updated_at || Timestamp of last update
|-
| questionnaire_id || Foreign key referencing the associated questionnaire
|}

===API Endpoints===

To facilitate interaction with the backend, the frontend uses a pre-configured <code>axiosClient</code>, which abstracts the base API URL and port number. This client is defined in the <code>utils/axios_client.ts</code> file and reused throughout the project for API communication. For questionnaire management, several key API routes are accessed using this client. For example, <code>GET /questionnaires/:id</code> fetches detailed data for editing a selected questionnaire. When creating or updating a questionnaire, the application uses <code>POST /questionnaires</code> and <code>PUT /questionnaires/:id</code>, respectively.

{| class="wikitable"
|+
! HTTP Method !! Endpoint !! Description
|-
| GET || /questionnaires || Fetches a list of all questionnaires
|-
| GET || /questionnaires/:id || Fetches a specific questionnaire by ID
|-
| POST || /questionnaires || Creates a new questionnaire
|-
| PUT || /questionnaires/:id || Updates an existing questionnaire
|-
| DELETE || /questionnaires/:id || Deletes a specific questionnaire
|-
| GET || /questions || Retrieves a list of all questions (items)
|-
| GET || /questions/:id || Retrieves a specific item, along with its rendered display
|-
| POST || /questions || Creates a new item for a questionnaire
|-
| PUT || /questions/:id || Updates an existing item
|}

==Implementation==
===User Interface===

====Manage Questionnaires====

To navigate to the Questionnaire Management Dashboard, Questionnaire from the Manage dropdown from any page on Expertiza.

To be consistent with other management pages (for Users, Courses, Assignements) in the reimplementation front end, a table of questionnaires belonging to the logged-in instructor is visible on the page. From this page, you may create, edit, or delete a questionnaire.

To create a new questionnaire, click on the Create button in the top left corner of the page.

[[File:ManagementDashboard.png | 700px]]

====Type Selection====

When the Create button is selected from the top of the Questionnaire Management Dashboard, a pop-up appears with the available questionnaire types. To create a questionnaire of a given type, select the "+" botton in the row of the desired type.

[[File:TypeSelection.png | 700px]]

====Questionnaire Form====

Once a type has been selected, the user is directed to the appropriate form to create a questionnaire of the selected type. The user can include a variable number of items to the questionnaire at the time of creation. The required fields for an item is determined by the item type. For example, a scale type item required minimum and maximum values for its scale.

[[File:Questionnaire Form.png | 700px]]

Once a form field has been touched, the application alerts the user of missing required fields. Failure to provide appropriate values will prevent form submission.

[[File:Screenshot 2025-04-22 at 10.12.22 AM.png | 700px]]

Upon successful submission, the newly-created questionnaire will appear in the list of questionnaires in the Questionnaire Management Dashboard.

[[File:Editquestionnaireselect.png | 700px]]

To edit a questionnaire, select the edit icon next to the questionnaire you want to edit. You will be directed to a form with the existing questionnaire and items filled in.

[[File:Editquestionnaire.png | 700px]]

===QuestionnaireUtils.ts===
The <code>QuestionnaireUtils.ts</code> file serves as a utility module for handling questionnaire-related functionality in the application, including interfaces, data transformation methods, and back-end data retrieval. This file helps maintain clear separation of concerns, type safety, and adherence to design principles such as the Single Responsibility Principle (SRP).

===QuestionnaireForm.tsx===
The <code>QuestionnaireForm.tsx</code> file is a React component that provides a form interface for creating or editing questionnaires. It integrates with Formik for form state management and validation, utilizing React Bootstrap for UI elements.

The form fields are strongly typed using Formik's <code>Field</code> components and the <code>QuestionnaireFormValues</code> interface, ensuring that the data entered by the user adheres to the correct structure.
*Name: A text field for entering the questionnaire name.
*Type: A hidden input used to specify the type of the questionnaire selected from the Questionnaire Management Dashboard and to be passed to the back-end.
*Private: A checkbox to indicate whether the questionnaire is private.
*Minimum/Maximum Question Scores: Numeric fields for setting the minimum and maximum scores for questions.

The form delegates the responsibility of handling questionnaire items to the <code>QuestionnaireItemsFieldArray</code> component, which allows users to add or remove items dynamically and keeps each component focused on a single responsibility.

===QuestionnaireType.tsx===
This component renders a table that displays different types of questionnaires. Each row provides an action to navigate to the corresponding creation page for the selected questionnaire type. The <code>Table</code> component from <code>components/Table/Table</code> is used in adherence with the DRY Principle and the provided design guidelines.

==Files Modified==
The following files were created or modified to implement the questionnaire dashboard and rubric management UI in React with TypeScript:

*<code>src/pages/Questionnaire/questionnaire.tsx</code> – Implements the Questionnaire Management Dashboard UI.
*<code>src/pages/EditQuestionnaire/Questionnaire.tsx</code> – Implements the Create/Edit Rubric page with full form support.
*<code>src/App.tsx</code> – Updated routing to include new questionnaire pages.
*<code>src/assets/icons/</code> – Added new UI icons for editing, deleting, and copying questionnaires.
*<code>src/utils/axios_client.ts</code> – Preconfigured axios instance used throughout the frontend for API calls.
*<code>package.json</code> and <code>package-lock.json</code> – Updated dependencies for icons, React Bootstrap, and Formik support.

==Test Plan - Manual Testing Strategy==

====Questionnaire Dashboard Loading====
*Visit /questionnaire and confirm that all types of questionnaires are displayed.
*"+" button next to each type should open the rubric creation form for that type.

====Form Functionality====
*Enter name, min/max scores, toggle private/public checkbox.
*Dynamically add/remove criteria.
*Submit form to create a new rubric and confirm it reflects in the backend.

====Edit Rubric====
*Click on any existing rubric to load it in the edit form.
*Edit fields and submit changes. Confirm updated data is persisted.

====Form Validation====
*Leave required fields empty and confirm validation errors appear.
*Enter invalid values (e.g., max < min) and confirm appropriate messages.

====API Communication====
*Verified POST/PUT requests are correctly formatted.
*Backend updates reflected in UI after reload.

====UI Testing====
*Confirm responsiveness across desktop, tablet, and mobile.
*Check accessibility: keyboard navigation, proper labeling.

==Team==
=====Mentor=====
*Prathyusha Kodali - pkodali

=====Members=====
*Ashwin Muniswamy - akumarm
*Michael Anderson - mwander5
*Martina Viola - mmviola

==Reference Links==
*[https://expertiza.ncsu.edu/tree_display/list?currCtlr=Questionnaires, Questionnaire Management Dashboard]
*[https://expertiza.ncsu.edu/questionnaires/new?model=ReviewQuestionnaire&private=1, Create/Edit Rubric Page]
*[https://github.com/mmviola1/reimplementation-front-end-E2538 Project Repo]
=====Demo Video=====
*[, Demo Video]

File:Editquestionnaire.png

2025-04-22T14:20:54Z

Mmviola:

File:Editquestionnaireselect.png

2025-04-22T14:17:52Z

Mmviola:

File:Createdquestionnaire.png

2025-04-22T14:15:56Z

Mmviola:

File:Screenshot 2025-04-22 at 10.12.22 AM.png

2025-04-22T14:12:53Z

Mmviola:

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-22T14:11:20Z

Mmviola: /* QuestionnaireUtils.ts */

==E2538 Reimplementing Questionnaire Page==

__TOC__

==About Expertiza==
Expertiza is an open-source web application currently built using [http://rubyonrails.org/ Ruby on Rails] and led by [https://www.csc.ncsu.edu/people/efg Dr. Edward Gehringer]. Designed for educational use, it enables instructors to manage assignments, rubrics, and participants, as well as assign grades and monitor student progress. Students can submit various types of learning objects, form teams, conduct peer evaluations, and review feedback from both peers and instructors. Originally developed at NC State, Expertiza is now used in select courses there and by faculty at other institutions, offering a flexible platform to enhance active learning and feedback in academic settings.

The reimplementation of Expertiza aims to mimic and enhance the application’s existing functionality with clean, well-structured code, while transitioning to a front-end application written in React and Typescipt integrated with a Ruby on Rails back-end.

==Project Overview==
The goal of this project is to implement the Questionnaire Management Dashboard and Create/Edit Rubric pages in Expertiza by reimplementing its frontend using React with TypeScript, while integrating it with the existing Ruby on Rails backend APIs in the reimplementation backend repo. The new implementation will improve user experience, maintainability, and scalability while preserving core functionalities.

This project covers:

* Developing a React-based UI for managing questionnaire rubrics.

* Enabling navigation to a new page when clicking the "+" button to create a specific rubric for a questionnaire type.

* Ensuring seamless API integration with the reimplementation backend repo.

* Managing user sessions and authentication securely.

While adhering to the following best practices:

*Component Reusability (DRY Principle): Design reusable and modular components to avoid duplication and simplify maintenance, adhering to the "Don't Repeat Yourself" principle.

*Separation of Concerns: Keep the UI, state management, and business logic separated. Use container components for state and logic and presentational components for rendering.

*Responsive and Accessible Design: Ensure the UI adapts to different devices and meets accessibility standards (e.g., ARIA roles, keyboard navigation, and proper contrast).

*Type Safety with TypeScript: Use TypeScript interfaces and types to ensure data consistency, reduce runtime errors.

*Single Responsibility Principle: Each component or function should have a single, well-defined purpose to improve clarity, testability, and scalability.

==What Needs to be Done?==
===Questionnaire Management Dashboard===

Displays a list of questionnaire types (Review, Metareview, Author Feedback, etc.)
* Each questionnaire type has a "+" button, which, when clicked, navigates to a new page for creating a specific rubric for that questionnaire type.
* Data is fetched dynamically from the backend.

[[File:Picx1x.png | 700px]]

===Create/Edit Rubric Page===

This page is displayed when a user clicks the "+" button from the dashboard.

Allows users to:
* Enter a name for the rubric.
* Define min/max item scores.
* Set the review visibility (private/public).
* Add criteria for evaluation.
* Submit the form to create a new rubric for the selected questionnaire type.

[[File:Picx2x.png | 700px]]

==Backend Integration==

The frontend interacts with several key resources exposed by the backend through a RESTful API. The structure of each model's associated database table lets us define Typescript interfaces, transform request/response payloads and promote type safety.

===Models===

====Questionnaire====

The <code>Questionnaire</code> model forms the foundation of the Create/Edit form functionality, storing necessary attributes for each questionnaire. These fields are used to construct a form for editing or creating a rubric and to prepopulate the form when editing an existing rubric.

The backend database also includes a table of <code>questionnaire_types</code>, access to which would allow the Questionnaire Management Dashboard to dynamically render all available categories of questionnaires and enable users to initiate the creation process based on a selected type.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the questionnaire
|-
| name || The name/title of the questionnaire
|-
| instructor_id || Foreign key referencing the instructor who created it
|-
| private || Boolean indicating if the questionnaire is private
|-
| min_question_score || Minimum score that can be given to any question
|-
| max_question_score || Maximum score that can be given to any question
|-
| questionnaire_type || The type/category of questionnaire (e.g., Survey, Teammate Review)
|-
| display_type || Field for specifying how to display the questionnaire
|-
| instruction_loc || Field for custom instructions location or reference
|-
| created_at || Timestamp of questionnaire creation
|-
| updated_at || Timestamp of last update
|}

====Item====

The <code>Item</code> model represents individual items (or questions) within a questionnaire and includes attributes that should be included when adding an item to a particular questionnaire.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the item
|-
| txt || The text of the item/question
|-
| weight || The relative importance or weight of the item
|-
| seq || The sequence/order of the item in the questionnaire
|-
| question_type || Foreign key referencing the type of question
|-
| size || Size attribute for text-based answers (e.g., text area size)
|-
| alternatives || Possible answer choices (comma-separated for multiple-choice)
|-
| break_before || Boolean indicating whether to insert a page break before the item
|-
| max_label || Optional label for the maximum scale value
|-
| min_label || Optional label for the minimum scale value
|-
| created_at || Timestamp of item creation
|-
| updated_at || Timestamp of last update
|-
| questionnaire_id || Foreign key referencing the associated questionnaire
|}

===API Endpoints===

To facilitate interaction with the backend, the frontend uses a pre-configured <code>axiosClient</code>, which abstracts the base API URL and port number. This client is defined in the <code>utils/axios_client.ts</code> file and reused throughout the project for API communication. For questionnaire management, several key API routes are accessed using this client. For example, <code>GET /questionnaires/:id</code> fetches detailed data for editing a selected questionnaire. When creating or updating a questionnaire, the application uses <code>POST /questionnaires</code> and <code>PUT /questionnaires/:id</code>, respectively.

{| class="wikitable"
|+
! HTTP Method !! Endpoint !! Description
|-
| GET || /questionnaires || Fetches a list of all questionnaires
|-
| GET || /questionnaires/:id || Fetches a specific questionnaire by ID
|-
| POST || /questionnaires || Creates a new questionnaire
|-
| PUT || /questionnaires/:id || Updates an existing questionnaire
|-
| DELETE || /questionnaires/:id || Deletes a specific questionnaire
|-
| GET || /questions || Retrieves a list of all questions (items)
|-
| GET || /questions/:id || Retrieves a specific item, along with its rendered display
|-
| POST || /questions || Creates a new item for a questionnaire
|-
| PUT || /questions/:id || Updates an existing item
|}

==Implementation==
===User Interface===

====Manage Questionnaires====

To navigate to the Questionnaire Management Dashboard, Questionnaire from the Manage dropdown from any page on Expertiza.

To be consistent with other management pages (for Users, Courses, Assignements) in the reimplementation front end, a table of questionnaires belonging to the logged-in instructor is visible on the page. From this page, you may create, edit, or delete a questionnaire.

To create a new questionnaire, click on the Create button in the top left corner of the page.

[[File:ManagementDashboard.png | 700px]]

====Type Selection====

When the Create button is selected from the top of the Questionnaire Management Dashboard, a pop-up appears with the available questionnaire types. To create a questionnaire of a given type, select the "+" botton in the row of the desired type.

[[File:TypeSelection.png | 700px]]

====Questionnaire Form====

Once a type has been selected, the user is directed to the appropriate form to create a questionnaire of the selected type. The user can include a variable number of items to the questionnaire at the time of creation. The required fields for an item is determined by the item type. For example, a scale type item required minimum and maximum values for its scale.

[[File:Questionnaire Form.png | 700px]]

===QuestionnaireUtils.ts===
The <code>QuestionnaireUtils.ts</code> file serves as a utility module for handling questionnaire-related functionality in the application, including interfaces, data transformation methods, and back-end data retrieval. This file helps maintain clear separation of concerns, type safety, and adherence to design principles such as the Single Responsibility Principle (SRP).

===QuestionnaireForm.tsx===
The <code>QuestionnaireForm.tsx</code> file is a React component that provides a form interface for creating or editing questionnaires. It integrates with Formik for form state management and validation, utilizing React Bootstrap for UI elements.

The form fields are strongly typed using Formik's <code>Field</code> components and the <code>QuestionnaireFormValues</code> interface, ensuring that the data entered by the user adheres to the correct structure.
*Name: A text field for entering the questionnaire name.
*Type: A hidden input used to specify the type of the questionnaire selected from the Questionnaire Management Dashboard and to be passed to the back-end.
*Private: A checkbox to indicate whether the questionnaire is private.
*Minimum/Maximum Question Scores: Numeric fields for setting the minimum and maximum scores for questions.

The form delegates the responsibility of handling questionnaire items to the <code>QuestionnaireItemsFieldArray</code> component, which allows users to add or remove items dynamically and keeps each component focused on a single responsibility.

===QuestionnaireType.tsx===
This component renders a table that displays different types of questionnaires. Each row provides an action to navigate to the corresponding creation page for the selected questionnaire type. The <code>Table</code> component from <code>components/Table/Table</code> is used in adherence with the DRY Principle and the provided design guidelines.

==Files Modified==
The following files were created or modified to implement the questionnaire dashboard and rubric management UI in React with TypeScript:

*<code>src/pages/Questionnaire/questionnaire.tsx</code> – Implements the Questionnaire Management Dashboard UI.
*<code>src/pages/EditQuestionnaire/Questionnaire.tsx</code> – Implements the Create/Edit Rubric page with full form support.
*<code>src/App.tsx</code> – Updated routing to include new questionnaire pages.
*<code>src/assets/icons/</code> – Added new UI icons for editing, deleting, and copying questionnaires.
*<code>src/utils/axios_client.ts</code> – Preconfigured axios instance used throughout the frontend for API calls.
*<code>package.json</code> and <code>package-lock.json</code> – Updated dependencies for icons, React Bootstrap, and Formik support.

==Test Plan - Manual Testing Strategy==

====Questionnaire Dashboard Loading====
*Visit /questionnaire and confirm that all types of questionnaires are displayed.
*"+" button next to each type should open the rubric creation form for that type.

====Form Functionality====
*Enter name, min/max scores, toggle private/public checkbox.
*Dynamically add/remove criteria.
*Submit form to create a new rubric and confirm it reflects in the backend.

====Edit Rubric====
*Click on any existing rubric to load it in the edit form.
*Edit fields and submit changes. Confirm updated data is persisted.

====Form Validation====
*Leave required fields empty and confirm validation errors appear.
*Enter invalid values (e.g., max < min) and confirm appropriate messages.

====API Communication====
*Verified POST/PUT requests are correctly formatted.
*Backend updates reflected in UI after reload.

====UI Testing====
*Confirm responsiveness across desktop, tablet, and mobile.
*Check accessibility: keyboard navigation, proper labeling.

==Team==
=====Mentor=====
*Prathyusha Kodali - pkodali

=====Members=====
*Ashwin Muniswamy - akumarm
*Michael Anderson - mwander5
*Martina Viola - mmviola

==Reference Links==
*[https://expertiza.ncsu.edu/tree_display/list?currCtlr=Questionnaires, Questionnaire Management Dashboard]
*[https://expertiza.ncsu.edu/questionnaires/new?model=ReviewQuestionnaire&private=1, Create/Edit Rubric Page]
*[https://github.com/mmviola1/reimplementation-front-end-E2538 Project Repo]
=====Demo Video=====
*[, Demo Video]

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-22T14:11:12Z

Mmviola: /* Questionnaire Form */

==E2538 Reimplementing Questionnaire Page==

__TOC__

==About Expertiza==
Expertiza is an open-source web application currently built using [http://rubyonrails.org/ Ruby on Rails] and led by [https://www.csc.ncsu.edu/people/efg Dr. Edward Gehringer]. Designed for educational use, it enables instructors to manage assignments, rubrics, and participants, as well as assign grades and monitor student progress. Students can submit various types of learning objects, form teams, conduct peer evaluations, and review feedback from both peers and instructors. Originally developed at NC State, Expertiza is now used in select courses there and by faculty at other institutions, offering a flexible platform to enhance active learning and feedback in academic settings.

The reimplementation of Expertiza aims to mimic and enhance the application’s existing functionality with clean, well-structured code, while transitioning to a front-end application written in React and Typescipt integrated with a Ruby on Rails back-end.

==Project Overview==
The goal of this project is to implement the Questionnaire Management Dashboard and Create/Edit Rubric pages in Expertiza by reimplementing its frontend using React with TypeScript, while integrating it with the existing Ruby on Rails backend APIs in the reimplementation backend repo. The new implementation will improve user experience, maintainability, and scalability while preserving core functionalities.

This project covers:

* Developing a React-based UI for managing questionnaire rubrics.

* Enabling navigation to a new page when clicking the "+" button to create a specific rubric for a questionnaire type.

* Ensuring seamless API integration with the reimplementation backend repo.

* Managing user sessions and authentication securely.

While adhering to the following best practices:

*Component Reusability (DRY Principle): Design reusable and modular components to avoid duplication and simplify maintenance, adhering to the "Don't Repeat Yourself" principle.

*Separation of Concerns: Keep the UI, state management, and business logic separated. Use container components for state and logic and presentational components for rendering.

*Responsive and Accessible Design: Ensure the UI adapts to different devices and meets accessibility standards (e.g., ARIA roles, keyboard navigation, and proper contrast).

*Type Safety with TypeScript: Use TypeScript interfaces and types to ensure data consistency, reduce runtime errors.

*Single Responsibility Principle: Each component or function should have a single, well-defined purpose to improve clarity, testability, and scalability.

==What Needs to be Done?==
===Questionnaire Management Dashboard===

Displays a list of questionnaire types (Review, Metareview, Author Feedback, etc.)
* Each questionnaire type has a "+" button, which, when clicked, navigates to a new page for creating a specific rubric for that questionnaire type.
* Data is fetched dynamically from the backend.

[[File:Picx1x.png | 700px]]

===Create/Edit Rubric Page===

This page is displayed when a user clicks the "+" button from the dashboard.

Allows users to:
* Enter a name for the rubric.
* Define min/max item scores.
* Set the review visibility (private/public).
* Add criteria for evaluation.
* Submit the form to create a new rubric for the selected questionnaire type.

[[File:Picx2x.png | 700px]]

==Backend Integration==

The frontend interacts with several key resources exposed by the backend through a RESTful API. The structure of each model's associated database table lets us define Typescript interfaces, transform request/response payloads and promote type safety.

===Models===

====Questionnaire====

The <code>Questionnaire</code> model forms the foundation of the Create/Edit form functionality, storing necessary attributes for each questionnaire. These fields are used to construct a form for editing or creating a rubric and to prepopulate the form when editing an existing rubric.

The backend database also includes a table of <code>questionnaire_types</code>, access to which would allow the Questionnaire Management Dashboard to dynamically render all available categories of questionnaires and enable users to initiate the creation process based on a selected type.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the questionnaire
|-
| name || The name/title of the questionnaire
|-
| instructor_id || Foreign key referencing the instructor who created it
|-
| private || Boolean indicating if the questionnaire is private
|-
| min_question_score || Minimum score that can be given to any question
|-
| max_question_score || Maximum score that can be given to any question
|-
| questionnaire_type || The type/category of questionnaire (e.g., Survey, Teammate Review)
|-
| display_type || Field for specifying how to display the questionnaire
|-
| instruction_loc || Field for custom instructions location or reference
|-
| created_at || Timestamp of questionnaire creation
|-
| updated_at || Timestamp of last update
|}

====Item====

The <code>Item</code> model represents individual items (or questions) within a questionnaire and includes attributes that should be included when adding an item to a particular questionnaire.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the item
|-
| txt || The text of the item/question
|-
| weight || The relative importance or weight of the item
|-
| seq || The sequence/order of the item in the questionnaire
|-
| question_type || Foreign key referencing the type of question
|-
| size || Size attribute for text-based answers (e.g., text area size)
|-
| alternatives || Possible answer choices (comma-separated for multiple-choice)
|-
| break_before || Boolean indicating whether to insert a page break before the item
|-
| max_label || Optional label for the maximum scale value
|-
| min_label || Optional label for the minimum scale value
|-
| created_at || Timestamp of item creation
|-
| updated_at || Timestamp of last update
|-
| questionnaire_id || Foreign key referencing the associated questionnaire
|}

===API Endpoints===

To facilitate interaction with the backend, the frontend uses a pre-configured <code>axiosClient</code>, which abstracts the base API URL and port number. This client is defined in the <code>utils/axios_client.ts</code> file and reused throughout the project for API communication. For questionnaire management, several key API routes are accessed using this client. For example, <code>GET /questionnaires/:id</code> fetches detailed data for editing a selected questionnaire. When creating or updating a questionnaire, the application uses <code>POST /questionnaires</code> and <code>PUT /questionnaires/:id</code>, respectively.

{| class="wikitable"
|+
! HTTP Method !! Endpoint !! Description
|-
| GET || /questionnaires || Fetches a list of all questionnaires
|-
| GET || /questionnaires/:id || Fetches a specific questionnaire by ID
|-
| POST || /questionnaires || Creates a new questionnaire
|-
| PUT || /questionnaires/:id || Updates an existing questionnaire
|-
| DELETE || /questionnaires/:id || Deletes a specific questionnaire
|-
| GET || /questions || Retrieves a list of all questions (items)
|-
| GET || /questions/:id || Retrieves a specific item, along with its rendered display
|-
| POST || /questions || Creates a new item for a questionnaire
|-
| PUT || /questions/:id || Updates an existing item
|}

==Implementation==
===User Interface===

====Manage Questionnaires====

To navigate to the Questionnaire Management Dashboard, Questionnaire from the Manage dropdown from any page on Expertiza.

To be consistent with other management pages (for Users, Courses, Assignements) in the reimplementation front end, a table of questionnaires belonging to the logged-in instructor is visible on the page. From this page, you may create, edit, or delete a questionnaire.

To create a new questionnaire, click on the Create button in the top left corner of the page.

[[File:ManagementDashboard.png | 700px]]

====Type Selection====

When the Create button is selected from the top of the Questionnaire Management Dashboard, a pop-up appears with the available questionnaire types. To create a questionnaire of a given type, select the "+" botton in the row of the desired type.

[[File:TypeSelection.png | 700px]]

====Questionnaire Form====

Once a type has been selected, the user is directed to the appropriate form to create a questionnaire of the selected type. The user can include a variable number of items to the questionnaire at the time of creation. The required fields for an item is determined by the item type. For example, a scale type item required minimum and maximum values for its scale.

[[File:Questionnaire Form.png | 700px]]

===QuestionnaireUtils.ts===
The <code>QuestionnaireUtils.ts</code> file serves as a utility module for handling questionnaire-related functionality in the application, including interfaces, data transformation methods, and back-end data retrieval. This file helps maintain clear separation of concerns, type safety, and adherence to design principles such as the Single Responsibility Principle (SRP).

===QuestionnaireForm.tsx===
The <code>QuestionnaireForm.tsx</code> file is a React component that provides a form interface for creating or editing questionnaires. It integrates with Formik for form state management and validation, utilizing React Bootstrap for UI elements.

The form fields are strongly typed using Formik's <code>Field</code> components and the <code>QuestionnaireFormValues</code> interface, ensuring that the data entered by the user adheres to the correct structure.
*Name: A text field for entering the questionnaire name.
*Type: A hidden input used to specify the type of the questionnaire selected from the Questionnaire Management Dashboard and to be passed to the back-end.
*Private: A checkbox to indicate whether the questionnaire is private.
*Minimum/Maximum Question Scores: Numeric fields for setting the minimum and maximum scores for questions.

The form delegates the responsibility of handling questionnaire items to the <code>QuestionnaireItemsFieldArray</code> component, which allows users to add or remove items dynamically and keeps each component focused on a single responsibility.

===QuestionnaireType.tsx===
This component renders a table that displays different types of questionnaires. Each row provides an action to navigate to the corresponding creation page for the selected questionnaire type. The <code>Table</code> component from <code>components/Table/Table</code> is used in adherence with the DRY Principle and the provided design guidelines.

==Files Modified==
The following files were created or modified to implement the questionnaire dashboard and rubric management UI in React with TypeScript:

*<code>src/pages/Questionnaire/questionnaire.tsx</code> – Implements the Questionnaire Management Dashboard UI.
*<code>src/pages/EditQuestionnaire/Questionnaire.tsx</code> – Implements the Create/Edit Rubric page with full form support.
*<code>src/App.tsx</code> – Updated routing to include new questionnaire pages.
*<code>src/assets/icons/</code> – Added new UI icons for editing, deleting, and copying questionnaires.
*<code>src/utils/axios_client.ts</code> – Preconfigured axios instance used throughout the frontend for API calls.
*<code>package.json</code> and <code>package-lock.json</code> – Updated dependencies for icons, React Bootstrap, and Formik support.

==Test Plan - Manual Testing Strategy==

====Questionnaire Dashboard Loading====
*Visit /questionnaire and confirm that all types of questionnaires are displayed.
*"+" button next to each type should open the rubric creation form for that type.

====Form Functionality====
*Enter name, min/max scores, toggle private/public checkbox.
*Dynamically add/remove criteria.
*Submit form to create a new rubric and confirm it reflects in the backend.

====Edit Rubric====
*Click on any existing rubric to load it in the edit form.
*Edit fields and submit changes. Confirm updated data is persisted.

====Form Validation====
*Leave required fields empty and confirm validation errors appear.
*Enter invalid values (e.g., max < min) and confirm appropriate messages.

====API Communication====
*Verified POST/PUT requests are correctly formatted.
*Backend updates reflected in UI after reload.

====UI Testing====
*Confirm responsiveness across desktop, tablet, and mobile.
*Check accessibility: keyboard navigation, proper labeling.

==Team==
=====Mentor=====
*Prathyusha Kodali - pkodali

=====Members=====
*Ashwin Muniswamy - akumarm
*Michael Anderson - mwander5
*Martina Viola - mmviola

==Reference Links==
*[https://expertiza.ncsu.edu/tree_display/list?currCtlr=Questionnaires, Questionnaire Management Dashboard]
*[https://expertiza.ncsu.edu/questionnaires/new?model=ReviewQuestionnaire&private=1, Create/Edit Rubric Page]
*[https://github.com/mmviola1/reimplementation-front-end-E2538 Project Repo]
=====Demo Video=====
*[, Demo Video]

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-22T14:08:28Z

Mmviola: /* Type Selection */

==E2538 Reimplementing Questionnaire Page==

__TOC__

==About Expertiza==
Expertiza is an open-source web application currently built using [http://rubyonrails.org/ Ruby on Rails] and led by [https://www.csc.ncsu.edu/people/efg Dr. Edward Gehringer]. Designed for educational use, it enables instructors to manage assignments, rubrics, and participants, as well as assign grades and monitor student progress. Students can submit various types of learning objects, form teams, conduct peer evaluations, and review feedback from both peers and instructors. Originally developed at NC State, Expertiza is now used in select courses there and by faculty at other institutions, offering a flexible platform to enhance active learning and feedback in academic settings.

The reimplementation of Expertiza aims to mimic and enhance the application’s existing functionality with clean, well-structured code, while transitioning to a front-end application written in React and Typescipt integrated with a Ruby on Rails back-end.

==Project Overview==
The goal of this project is to implement the Questionnaire Management Dashboard and Create/Edit Rubric pages in Expertiza by reimplementing its frontend using React with TypeScript, while integrating it with the existing Ruby on Rails backend APIs in the reimplementation backend repo. The new implementation will improve user experience, maintainability, and scalability while preserving core functionalities.

This project covers:

* Developing a React-based UI for managing questionnaire rubrics.

* Enabling navigation to a new page when clicking the "+" button to create a specific rubric for a questionnaire type.

* Ensuring seamless API integration with the reimplementation backend repo.

* Managing user sessions and authentication securely.

While adhering to the following best practices:

*Component Reusability (DRY Principle): Design reusable and modular components to avoid duplication and simplify maintenance, adhering to the "Don't Repeat Yourself" principle.

*Separation of Concerns: Keep the UI, state management, and business logic separated. Use container components for state and logic and presentational components for rendering.

*Responsive and Accessible Design: Ensure the UI adapts to different devices and meets accessibility standards (e.g., ARIA roles, keyboard navigation, and proper contrast).

*Type Safety with TypeScript: Use TypeScript interfaces and types to ensure data consistency, reduce runtime errors.

*Single Responsibility Principle: Each component or function should have a single, well-defined purpose to improve clarity, testability, and scalability.

==What Needs to be Done?==
===Questionnaire Management Dashboard===

Displays a list of questionnaire types (Review, Metareview, Author Feedback, etc.)
* Each questionnaire type has a "+" button, which, when clicked, navigates to a new page for creating a specific rubric for that questionnaire type.
* Data is fetched dynamically from the backend.

[[File:Picx1x.png | 700px]]

===Create/Edit Rubric Page===

This page is displayed when a user clicks the "+" button from the dashboard.

Allows users to:
* Enter a name for the rubric.
* Define min/max item scores.
* Set the review visibility (private/public).
* Add criteria for evaluation.
* Submit the form to create a new rubric for the selected questionnaire type.

[[File:Picx2x.png | 700px]]

==Backend Integration==

The frontend interacts with several key resources exposed by the backend through a RESTful API. The structure of each model's associated database table lets us define Typescript interfaces, transform request/response payloads and promote type safety.

===Models===

====Questionnaire====

The <code>Questionnaire</code> model forms the foundation of the Create/Edit form functionality, storing necessary attributes for each questionnaire. These fields are used to construct a form for editing or creating a rubric and to prepopulate the form when editing an existing rubric.

The backend database also includes a table of <code>questionnaire_types</code>, access to which would allow the Questionnaire Management Dashboard to dynamically render all available categories of questionnaires and enable users to initiate the creation process based on a selected type.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the questionnaire
|-
| name || The name/title of the questionnaire
|-
| instructor_id || Foreign key referencing the instructor who created it
|-
| private || Boolean indicating if the questionnaire is private
|-
| min_question_score || Minimum score that can be given to any question
|-
| max_question_score || Maximum score that can be given to any question
|-
| questionnaire_type || The type/category of questionnaire (e.g., Survey, Teammate Review)
|-
| display_type || Field for specifying how to display the questionnaire
|-
| instruction_loc || Field for custom instructions location or reference
|-
| created_at || Timestamp of questionnaire creation
|-
| updated_at || Timestamp of last update
|}

====Item====

The <code>Item</code> model represents individual items (or questions) within a questionnaire and includes attributes that should be included when adding an item to a particular questionnaire.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the item
|-
| txt || The text of the item/question
|-
| weight || The relative importance or weight of the item
|-
| seq || The sequence/order of the item in the questionnaire
|-
| question_type || Foreign key referencing the type of question
|-
| size || Size attribute for text-based answers (e.g., text area size)
|-
| alternatives || Possible answer choices (comma-separated for multiple-choice)
|-
| break_before || Boolean indicating whether to insert a page break before the item
|-
| max_label || Optional label for the maximum scale value
|-
| min_label || Optional label for the minimum scale value
|-
| created_at || Timestamp of item creation
|-
| updated_at || Timestamp of last update
|-
| questionnaire_id || Foreign key referencing the associated questionnaire
|}

===API Endpoints===

To facilitate interaction with the backend, the frontend uses a pre-configured <code>axiosClient</code>, which abstracts the base API URL and port number. This client is defined in the <code>utils/axios_client.ts</code> file and reused throughout the project for API communication. For questionnaire management, several key API routes are accessed using this client. For example, <code>GET /questionnaires/:id</code> fetches detailed data for editing a selected questionnaire. When creating or updating a questionnaire, the application uses <code>POST /questionnaires</code> and <code>PUT /questionnaires/:id</code>, respectively.

{| class="wikitable"
|+
! HTTP Method !! Endpoint !! Description
|-
| GET || /questionnaires || Fetches a list of all questionnaires
|-
| GET || /questionnaires/:id || Fetches a specific questionnaire by ID
|-
| POST || /questionnaires || Creates a new questionnaire
|-
| PUT || /questionnaires/:id || Updates an existing questionnaire
|-
| DELETE || /questionnaires/:id || Deletes a specific questionnaire
|-
| GET || /questions || Retrieves a list of all questions (items)
|-
| GET || /questions/:id || Retrieves a specific item, along with its rendered display
|-
| POST || /questions || Creates a new item for a questionnaire
|-
| PUT || /questions/:id || Updates an existing item
|}

==Implementation==
===User Interface===

====Manage Questionnaires====

To navigate to the Questionnaire Management Dashboard, Questionnaire from the Manage dropdown from any page on Expertiza.

To be consistent with other management pages (for Users, Courses, Assignements) in the reimplementation front end, a table of questionnaires belonging to the logged-in instructor is visible on the page. From this page, you may create, edit, or delete a questionnaire.

To create a new questionnaire, click on the Create button in the top left corner of the page.

[[File:ManagementDashboard.png | 700px]]

====Type Selection====

When the Create button is selected from the top of the Questionnaire Management Dashboard, a pop-up appears with the available questionnaire types. To create a questionnaire of a given type, select the "+" botton in the row of the desired type.

[[File:TypeSelection.png | 700px]]

====Questionnaire Form====

[[File:Questionnaire Form.png | 700px]]

===QuestionnaireUtils.ts===
The <code>QuestionnaireUtils.ts</code> file serves as a utility module for handling questionnaire-related functionality in the application, including interfaces, data transformation methods, and back-end data retrieval. This file helps maintain clear separation of concerns, type safety, and adherence to design principles such as the Single Responsibility Principle (SRP).

===QuestionnaireForm.tsx===
The <code>QuestionnaireForm.tsx</code> file is a React component that provides a form interface for creating or editing questionnaires. It integrates with Formik for form state management and validation, utilizing React Bootstrap for UI elements.

The form fields are strongly typed using Formik's <code>Field</code> components and the <code>QuestionnaireFormValues</code> interface, ensuring that the data entered by the user adheres to the correct structure.
*Name: A text field for entering the questionnaire name.
*Type: A hidden input used to specify the type of the questionnaire selected from the Questionnaire Management Dashboard and to be passed to the back-end.
*Private: A checkbox to indicate whether the questionnaire is private.
*Minimum/Maximum Question Scores: Numeric fields for setting the minimum and maximum scores for questions.

The form delegates the responsibility of handling questionnaire items to the <code>QuestionnaireItemsFieldArray</code> component, which allows users to add or remove items dynamically and keeps each component focused on a single responsibility.

===QuestionnaireType.tsx===
This component renders a table that displays different types of questionnaires. Each row provides an action to navigate to the corresponding creation page for the selected questionnaire type. The <code>Table</code> component from <code>components/Table/Table</code> is used in adherence with the DRY Principle and the provided design guidelines.

==Files Modified==
The following files were created or modified to implement the questionnaire dashboard and rubric management UI in React with TypeScript:

*<code>src/pages/Questionnaire/questionnaire.tsx</code> – Implements the Questionnaire Management Dashboard UI.
*<code>src/pages/EditQuestionnaire/Questionnaire.tsx</code> – Implements the Create/Edit Rubric page with full form support.
*<code>src/App.tsx</code> – Updated routing to include new questionnaire pages.
*<code>src/assets/icons/</code> – Added new UI icons for editing, deleting, and copying questionnaires.
*<code>src/utils/axios_client.ts</code> – Preconfigured axios instance used throughout the frontend for API calls.
*<code>package.json</code> and <code>package-lock.json</code> – Updated dependencies for icons, React Bootstrap, and Formik support.

==Test Plan - Manual Testing Strategy==

====Questionnaire Dashboard Loading====
*Visit /questionnaire and confirm that all types of questionnaires are displayed.
*"+" button next to each type should open the rubric creation form for that type.

====Form Functionality====
*Enter name, min/max scores, toggle private/public checkbox.
*Dynamically add/remove criteria.
*Submit form to create a new rubric and confirm it reflects in the backend.

====Edit Rubric====
*Click on any existing rubric to load it in the edit form.
*Edit fields and submit changes. Confirm updated data is persisted.

====Form Validation====
*Leave required fields empty and confirm validation errors appear.
*Enter invalid values (e.g., max < min) and confirm appropriate messages.

====API Communication====
*Verified POST/PUT requests are correctly formatted.
*Backend updates reflected in UI after reload.

====UI Testing====
*Confirm responsiveness across desktop, tablet, and mobile.
*Check accessibility: keyboard navigation, proper labeling.

==Team==
=====Mentor=====
*Prathyusha Kodali - pkodali

=====Members=====
*Ashwin Muniswamy - akumarm
*Michael Anderson - mwander5
*Martina Viola - mmviola

==Reference Links==
*[https://expertiza.ncsu.edu/tree_display/list?currCtlr=Questionnaires, Questionnaire Management Dashboard]
*[https://expertiza.ncsu.edu/questionnaires/new?model=ReviewQuestionnaire&private=1, Create/Edit Rubric Page]
*[https://github.com/mmviola1/reimplementation-front-end-E2538 Project Repo]
=====Demo Video=====
*[, Demo Video]

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-22T14:06:23Z

Mmviola: /* Manage Questionnaires */

==E2538 Reimplementing Questionnaire Page==

__TOC__

==About Expertiza==
Expertiza is an open-source web application currently built using [http://rubyonrails.org/ Ruby on Rails] and led by [https://www.csc.ncsu.edu/people/efg Dr. Edward Gehringer]. Designed for educational use, it enables instructors to manage assignments, rubrics, and participants, as well as assign grades and monitor student progress. Students can submit various types of learning objects, form teams, conduct peer evaluations, and review feedback from both peers and instructors. Originally developed at NC State, Expertiza is now used in select courses there and by faculty at other institutions, offering a flexible platform to enhance active learning and feedback in academic settings.

The reimplementation of Expertiza aims to mimic and enhance the application’s existing functionality with clean, well-structured code, while transitioning to a front-end application written in React and Typescipt integrated with a Ruby on Rails back-end.

==Project Overview==
The goal of this project is to implement the Questionnaire Management Dashboard and Create/Edit Rubric pages in Expertiza by reimplementing its frontend using React with TypeScript, while integrating it with the existing Ruby on Rails backend APIs in the reimplementation backend repo. The new implementation will improve user experience, maintainability, and scalability while preserving core functionalities.

This project covers:

* Developing a React-based UI for managing questionnaire rubrics.

* Enabling navigation to a new page when clicking the "+" button to create a specific rubric for a questionnaire type.

* Ensuring seamless API integration with the reimplementation backend repo.

* Managing user sessions and authentication securely.

While adhering to the following best practices:

*Component Reusability (DRY Principle): Design reusable and modular components to avoid duplication and simplify maintenance, adhering to the "Don't Repeat Yourself" principle.

*Separation of Concerns: Keep the UI, state management, and business logic separated. Use container components for state and logic and presentational components for rendering.

*Responsive and Accessible Design: Ensure the UI adapts to different devices and meets accessibility standards (e.g., ARIA roles, keyboard navigation, and proper contrast).

*Type Safety with TypeScript: Use TypeScript interfaces and types to ensure data consistency, reduce runtime errors.

*Single Responsibility Principle: Each component or function should have a single, well-defined purpose to improve clarity, testability, and scalability.

==What Needs to be Done?==
===Questionnaire Management Dashboard===

Displays a list of questionnaire types (Review, Metareview, Author Feedback, etc.)
* Each questionnaire type has a "+" button, which, when clicked, navigates to a new page for creating a specific rubric for that questionnaire type.
* Data is fetched dynamically from the backend.

[[File:Picx1x.png | 700px]]

===Create/Edit Rubric Page===

This page is displayed when a user clicks the "+" button from the dashboard.

Allows users to:
* Enter a name for the rubric.
* Define min/max item scores.
* Set the review visibility (private/public).
* Add criteria for evaluation.
* Submit the form to create a new rubric for the selected questionnaire type.

[[File:Picx2x.png | 700px]]

==Backend Integration==

The frontend interacts with several key resources exposed by the backend through a RESTful API. The structure of each model's associated database table lets us define Typescript interfaces, transform request/response payloads and promote type safety.

===Models===

====Questionnaire====

The <code>Questionnaire</code> model forms the foundation of the Create/Edit form functionality, storing necessary attributes for each questionnaire. These fields are used to construct a form for editing or creating a rubric and to prepopulate the form when editing an existing rubric.

The backend database also includes a table of <code>questionnaire_types</code>, access to which would allow the Questionnaire Management Dashboard to dynamically render all available categories of questionnaires and enable users to initiate the creation process based on a selected type.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the questionnaire
|-
| name || The name/title of the questionnaire
|-
| instructor_id || Foreign key referencing the instructor who created it
|-
| private || Boolean indicating if the questionnaire is private
|-
| min_question_score || Minimum score that can be given to any question
|-
| max_question_score || Maximum score that can be given to any question
|-
| questionnaire_type || The type/category of questionnaire (e.g., Survey, Teammate Review)
|-
| display_type || Field for specifying how to display the questionnaire
|-
| instruction_loc || Field for custom instructions location or reference
|-
| created_at || Timestamp of questionnaire creation
|-
| updated_at || Timestamp of last update
|}

====Item====

The <code>Item</code> model represents individual items (or questions) within a questionnaire and includes attributes that should be included when adding an item to a particular questionnaire.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the item
|-
| txt || The text of the item/question
|-
| weight || The relative importance or weight of the item
|-
| seq || The sequence/order of the item in the questionnaire
|-
| question_type || Foreign key referencing the type of question
|-
| size || Size attribute for text-based answers (e.g., text area size)
|-
| alternatives || Possible answer choices (comma-separated for multiple-choice)
|-
| break_before || Boolean indicating whether to insert a page break before the item
|-
| max_label || Optional label for the maximum scale value
|-
| min_label || Optional label for the minimum scale value
|-
| created_at || Timestamp of item creation
|-
| updated_at || Timestamp of last update
|-
| questionnaire_id || Foreign key referencing the associated questionnaire
|}

===API Endpoints===

To facilitate interaction with the backend, the frontend uses a pre-configured <code>axiosClient</code>, which abstracts the base API URL and port number. This client is defined in the <code>utils/axios_client.ts</code> file and reused throughout the project for API communication. For questionnaire management, several key API routes are accessed using this client. For example, <code>GET /questionnaires/:id</code> fetches detailed data for editing a selected questionnaire. When creating or updating a questionnaire, the application uses <code>POST /questionnaires</code> and <code>PUT /questionnaires/:id</code>, respectively.

{| class="wikitable"
|+
! HTTP Method !! Endpoint !! Description
|-
| GET || /questionnaires || Fetches a list of all questionnaires
|-
| GET || /questionnaires/:id || Fetches a specific questionnaire by ID
|-
| POST || /questionnaires || Creates a new questionnaire
|-
| PUT || /questionnaires/:id || Updates an existing questionnaire
|-
| DELETE || /questionnaires/:id || Deletes a specific questionnaire
|-
| GET || /questions || Retrieves a list of all questions (items)
|-
| GET || /questions/:id || Retrieves a specific item, along with its rendered display
|-
| POST || /questions || Creates a new item for a questionnaire
|-
| PUT || /questions/:id || Updates an existing item
|}

==Implementation==
===User Interface===

====Manage Questionnaires====

To navigate to the Questionnaire Management Dashboard, Questionnaire from the Manage dropdown from any page on Expertiza.

To be consistent with other management pages (for Users, Courses, Assignements) in the reimplementation front end, a table of questionnaires belonging to the logged-in instructor is visible on the page. From this page, you may create, edit, or delete a questionnaire.

To create a new questionnaire, click on the Create button in the top left corner of the page.

[[File:ManagementDashboard.png | 700px]]

====Type Selection====

[[File:TypeSelection.png | 700px]]

====Questionnaire Form====

[[File:Questionnaire Form.png | 700px]]

===QuestionnaireUtils.ts===
The <code>QuestionnaireUtils.ts</code> file serves as a utility module for handling questionnaire-related functionality in the application, including interfaces, data transformation methods, and back-end data retrieval. This file helps maintain clear separation of concerns, type safety, and adherence to design principles such as the Single Responsibility Principle (SRP).

===QuestionnaireForm.tsx===
The <code>QuestionnaireForm.tsx</code> file is a React component that provides a form interface for creating or editing questionnaires. It integrates with Formik for form state management and validation, utilizing React Bootstrap for UI elements.

The form fields are strongly typed using Formik's <code>Field</code> components and the <code>QuestionnaireFormValues</code> interface, ensuring that the data entered by the user adheres to the correct structure.
*Name: A text field for entering the questionnaire name.
*Type: A hidden input used to specify the type of the questionnaire selected from the Questionnaire Management Dashboard and to be passed to the back-end.
*Private: A checkbox to indicate whether the questionnaire is private.
*Minimum/Maximum Question Scores: Numeric fields for setting the minimum and maximum scores for questions.

The form delegates the responsibility of handling questionnaire items to the <code>QuestionnaireItemsFieldArray</code> component, which allows users to add or remove items dynamically and keeps each component focused on a single responsibility.

===QuestionnaireType.tsx===
This component renders a table that displays different types of questionnaires. Each row provides an action to navigate to the corresponding creation page for the selected questionnaire type. The <code>Table</code> component from <code>components/Table/Table</code> is used in adherence with the DRY Principle and the provided design guidelines.

==Files Modified==
The following files were created or modified to implement the questionnaire dashboard and rubric management UI in React with TypeScript:

*<code>src/pages/Questionnaire/questionnaire.tsx</code> – Implements the Questionnaire Management Dashboard UI.
*<code>src/pages/EditQuestionnaire/Questionnaire.tsx</code> – Implements the Create/Edit Rubric page with full form support.
*<code>src/App.tsx</code> – Updated routing to include new questionnaire pages.
*<code>src/assets/icons/</code> – Added new UI icons for editing, deleting, and copying questionnaires.
*<code>src/utils/axios_client.ts</code> – Preconfigured axios instance used throughout the frontend for API calls.
*<code>package.json</code> and <code>package-lock.json</code> – Updated dependencies for icons, React Bootstrap, and Formik support.

==Test Plan - Manual Testing Strategy==

====Questionnaire Dashboard Loading====
*Visit /questionnaire and confirm that all types of questionnaires are displayed.
*"+" button next to each type should open the rubric creation form for that type.

====Form Functionality====
*Enter name, min/max scores, toggle private/public checkbox.
*Dynamically add/remove criteria.
*Submit form to create a new rubric and confirm it reflects in the backend.

====Edit Rubric====
*Click on any existing rubric to load it in the edit form.
*Edit fields and submit changes. Confirm updated data is persisted.

====Form Validation====
*Leave required fields empty and confirm validation errors appear.
*Enter invalid values (e.g., max < min) and confirm appropriate messages.

====API Communication====
*Verified POST/PUT requests are correctly formatted.
*Backend updates reflected in UI after reload.

====UI Testing====
*Confirm responsiveness across desktop, tablet, and mobile.
*Check accessibility: keyboard navigation, proper labeling.

==Team==
=====Mentor=====
*Prathyusha Kodali - pkodali

=====Members=====
*Ashwin Muniswamy - akumarm
*Michael Anderson - mwander5
*Martina Viola - mmviola

==Reference Links==
*[https://expertiza.ncsu.edu/tree_display/list?currCtlr=Questionnaires, Questionnaire Management Dashboard]
*[https://expertiza.ncsu.edu/questionnaires/new?model=ReviewQuestionnaire&private=1, Create/Edit Rubric Page]
*[https://github.com/mmviola1/reimplementation-front-end-E2538 Project Repo]
=====Demo Video=====
*[, Demo Video]

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-22T14:00:33Z

Mmviola: /* Implementation */

==E2538 Reimplementing Questionnaire Page==

__TOC__

==About Expertiza==
Expertiza is an open-source web application currently built using [http://rubyonrails.org/ Ruby on Rails] and led by [https://www.csc.ncsu.edu/people/efg Dr. Edward Gehringer]. Designed for educational use, it enables instructors to manage assignments, rubrics, and participants, as well as assign grades and monitor student progress. Students can submit various types of learning objects, form teams, conduct peer evaluations, and review feedback from both peers and instructors. Originally developed at NC State, Expertiza is now used in select courses there and by faculty at other institutions, offering a flexible platform to enhance active learning and feedback in academic settings.

The reimplementation of Expertiza aims to mimic and enhance the application’s existing functionality with clean, well-structured code, while transitioning to a front-end application written in React and Typescipt integrated with a Ruby on Rails back-end.

==Project Overview==
The goal of this project is to implement the Questionnaire Management Dashboard and Create/Edit Rubric pages in Expertiza by reimplementing its frontend using React with TypeScript, while integrating it with the existing Ruby on Rails backend APIs in the reimplementation backend repo. The new implementation will improve user experience, maintainability, and scalability while preserving core functionalities.

This project covers:

* Developing a React-based UI for managing questionnaire rubrics.

* Enabling navigation to a new page when clicking the "+" button to create a specific rubric for a questionnaire type.

* Ensuring seamless API integration with the reimplementation backend repo.

* Managing user sessions and authentication securely.

While adhering to the following best practices:

*Component Reusability (DRY Principle): Design reusable and modular components to avoid duplication and simplify maintenance, adhering to the "Don't Repeat Yourself" principle.

*Separation of Concerns: Keep the UI, state management, and business logic separated. Use container components for state and logic and presentational components for rendering.

*Responsive and Accessible Design: Ensure the UI adapts to different devices and meets accessibility standards (e.g., ARIA roles, keyboard navigation, and proper contrast).

*Type Safety with TypeScript: Use TypeScript interfaces and types to ensure data consistency, reduce runtime errors.

*Single Responsibility Principle: Each component or function should have a single, well-defined purpose to improve clarity, testability, and scalability.

==What Needs to be Done?==
===Questionnaire Management Dashboard===

Displays a list of questionnaire types (Review, Metareview, Author Feedback, etc.)
* Each questionnaire type has a "+" button, which, when clicked, navigates to a new page for creating a specific rubric for that questionnaire type.
* Data is fetched dynamically from the backend.

[[File:Picx1x.png | 700px]]

===Create/Edit Rubric Page===

This page is displayed when a user clicks the "+" button from the dashboard.

Allows users to:
* Enter a name for the rubric.
* Define min/max item scores.
* Set the review visibility (private/public).
* Add criteria for evaluation.
* Submit the form to create a new rubric for the selected questionnaire type.

[[File:Picx2x.png | 700px]]

==Backend Integration==

The frontend interacts with several key resources exposed by the backend through a RESTful API. The structure of each model's associated database table lets us define Typescript interfaces, transform request/response payloads and promote type safety.

===Models===

====Questionnaire====

The <code>Questionnaire</code> model forms the foundation of the Create/Edit form functionality, storing necessary attributes for each questionnaire. These fields are used to construct a form for editing or creating a rubric and to prepopulate the form when editing an existing rubric.

The backend database also includes a table of <code>questionnaire_types</code>, access to which would allow the Questionnaire Management Dashboard to dynamically render all available categories of questionnaires and enable users to initiate the creation process based on a selected type.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the questionnaire
|-
| name || The name/title of the questionnaire
|-
| instructor_id || Foreign key referencing the instructor who created it
|-
| private || Boolean indicating if the questionnaire is private
|-
| min_question_score || Minimum score that can be given to any question
|-
| max_question_score || Maximum score that can be given to any question
|-
| questionnaire_type || The type/category of questionnaire (e.g., Survey, Teammate Review)
|-
| display_type || Field for specifying how to display the questionnaire
|-
| instruction_loc || Field for custom instructions location or reference
|-
| created_at || Timestamp of questionnaire creation
|-
| updated_at || Timestamp of last update
|}

====Item====

The <code>Item</code> model represents individual items (or questions) within a questionnaire and includes attributes that should be included when adding an item to a particular questionnaire.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the item
|-
| txt || The text of the item/question
|-
| weight || The relative importance or weight of the item
|-
| seq || The sequence/order of the item in the questionnaire
|-
| question_type || Foreign key referencing the type of question
|-
| size || Size attribute for text-based answers (e.g., text area size)
|-
| alternatives || Possible answer choices (comma-separated for multiple-choice)
|-
| break_before || Boolean indicating whether to insert a page break before the item
|-
| max_label || Optional label for the maximum scale value
|-
| min_label || Optional label for the minimum scale value
|-
| created_at || Timestamp of item creation
|-
| updated_at || Timestamp of last update
|-
| questionnaire_id || Foreign key referencing the associated questionnaire
|}

===API Endpoints===

To facilitate interaction with the backend, the frontend uses a pre-configured <code>axiosClient</code>, which abstracts the base API URL and port number. This client is defined in the <code>utils/axios_client.ts</code> file and reused throughout the project for API communication. For questionnaire management, several key API routes are accessed using this client. For example, <code>GET /questionnaires/:id</code> fetches detailed data for editing a selected questionnaire. When creating or updating a questionnaire, the application uses <code>POST /questionnaires</code> and <code>PUT /questionnaires/:id</code>, respectively.

{| class="wikitable"
|+
! HTTP Method !! Endpoint !! Description
|-
| GET || /questionnaires || Fetches a list of all questionnaires
|-
| GET || /questionnaires/:id || Fetches a specific questionnaire by ID
|-
| POST || /questionnaires || Creates a new questionnaire
|-
| PUT || /questionnaires/:id || Updates an existing questionnaire
|-
| DELETE || /questionnaires/:id || Deletes a specific questionnaire
|-
| GET || /questions || Retrieves a list of all questions (items)
|-
| GET || /questions/:id || Retrieves a specific item, along with its rendered display
|-
| POST || /questions || Creates a new item for a questionnaire
|-
| PUT || /questions/:id || Updates an existing item
|}

==Implementation==
===User Interface===

====Manage Questionnaires====

[[File:ManagementDashboard.png | 700px]]

====Type Selection====

[[File:TypeSelection.png | 700px]]

====Questionnaire Form====

[[File:Questionnaire Form.png | 700px]]

===QuestionnaireUtils.ts===
The <code>QuestionnaireUtils.ts</code> file serves as a utility module for handling questionnaire-related functionality in the application, including interfaces, data transformation methods, and back-end data retrieval. This file helps maintain clear separation of concerns, type safety, and adherence to design principles such as the Single Responsibility Principle (SRP).

===QuestionnaireForm.tsx===
The <code>QuestionnaireForm.tsx</code> file is a React component that provides a form interface for creating or editing questionnaires. It integrates with Formik for form state management and validation, utilizing React Bootstrap for UI elements.

The form fields are strongly typed using Formik's <code>Field</code> components and the <code>QuestionnaireFormValues</code> interface, ensuring that the data entered by the user adheres to the correct structure.
*Name: A text field for entering the questionnaire name.
*Type: A hidden input used to specify the type of the questionnaire selected from the Questionnaire Management Dashboard and to be passed to the back-end.
*Private: A checkbox to indicate whether the questionnaire is private.
*Minimum/Maximum Question Scores: Numeric fields for setting the minimum and maximum scores for questions.

The form delegates the responsibility of handling questionnaire items to the <code>QuestionnaireItemsFieldArray</code> component, which allows users to add or remove items dynamically and keeps each component focused on a single responsibility.

===QuestionnaireType.tsx===
This component renders a table that displays different types of questionnaires. Each row provides an action to navigate to the corresponding creation page for the selected questionnaire type. The <code>Table</code> component from <code>components/Table/Table</code> is used in adherence with the DRY Principle and the provided design guidelines.

==Files Modified==
The following files were created or modified to implement the questionnaire dashboard and rubric management UI in React with TypeScript:

*<code>src/pages/Questionnaire/questionnaire.tsx</code> – Implements the Questionnaire Management Dashboard UI.
*<code>src/pages/EditQuestionnaire/Questionnaire.tsx</code> – Implements the Create/Edit Rubric page with full form support.
*<code>src/App.tsx</code> – Updated routing to include new questionnaire pages.
*<code>src/assets/icons/</code> – Added new UI icons for editing, deleting, and copying questionnaires.
*<code>src/utils/axios_client.ts</code> – Preconfigured axios instance used throughout the frontend for API calls.
*<code>package.json</code> and <code>package-lock.json</code> – Updated dependencies for icons, React Bootstrap, and Formik support.

==Test Plan - Manual Testing Strategy==

====Questionnaire Dashboard Loading====
*Visit /questionnaire and confirm that all types of questionnaires are displayed.
*"+" button next to each type should open the rubric creation form for that type.

====Form Functionality====
*Enter name, min/max scores, toggle private/public checkbox.
*Dynamically add/remove criteria.
*Submit form to create a new rubric and confirm it reflects in the backend.

====Edit Rubric====
*Click on any existing rubric to load it in the edit form.
*Edit fields and submit changes. Confirm updated data is persisted.

====Form Validation====
*Leave required fields empty and confirm validation errors appear.
*Enter invalid values (e.g., max < min) and confirm appropriate messages.

====API Communication====
*Verified POST/PUT requests are correctly formatted.
*Backend updates reflected in UI after reload.

====UI Testing====
*Confirm responsiveness across desktop, tablet, and mobile.
*Check accessibility: keyboard navigation, proper labeling.

==Team==
=====Mentor=====
*Prathyusha Kodali - pkodali

=====Members=====
*Ashwin Muniswamy - akumarm
*Michael Anderson - mwander5
*Martina Viola - mmviola

==Reference Links==
*[https://expertiza.ncsu.edu/tree_display/list?currCtlr=Questionnaires, Questionnaire Management Dashboard]
*[https://expertiza.ncsu.edu/questionnaires/new?model=ReviewQuestionnaire&private=1, Create/Edit Rubric Page]
*[https://github.com/mmviola1/reimplementation-front-end-E2538 Project Repo]
=====Demo Video=====
*[, Demo Video]

File:TypeSelection.png

2025-04-22T13:58:55Z

Mmviola:

File:ManagementDashboard.png

2025-04-22T13:57:41Z

Mmviola:

File:Questionnaire Form.png

2025-04-22T13:54:11Z

Mmviola:

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-08T01:44:53Z

Mmviola: /* Test Coverage */

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-08T01:36:27Z

Mmviola: /* Implementation */

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-08T01:25:43Z

Mmviola: /* QuestionnaireForm.tsx */

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-08T01:07:03Z

Mmviola: /* Implementation */

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-08T00:58:13Z

Mmviola: /* Implementation */

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-08T00:17:14Z

Mmviola: /* Implementation */

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-08T00:13:24Z

Mmviola:

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-08T00:06:47Z

Mmviola: /* Expertiza */

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-08T00:04:59Z

Mmviola: /* Test Plan */

==E2538 Reimplementing Questionnaire Page==

__TOC__

==Expertiza==
Expertiza is an open-source web application currently built using [http://rubyonrails.org/ Ruby on Rails] and led by [https://www.csc.ncsu.edu/people/efg Dr. Edward Gehringer]. Designed for educational use, it enables instructors to manage assignments, rubrics, and participants, as well as assign grades and monitor student progress. Students can submit various types of learning objects, form teams, conduct peer evaluations, and review feedback from both peers and instructors. Originally developed at NC State, Expertiza is now used in select courses there and by faculty at other institutions, offering a flexible platform to enhance active learning and feedback in academic settings.

The reimplementation of Expertiza aims to mimic and enhance the application’s existing functionality with clean, well-structured code, while transitioning to a front-end application written in React and Typescipt integrated with a Ruby on Rails back-end.

==Project Overview==
The goal of this project is to implement the Questionnaire Management Dashboard and Create/Edit Rubric pages in Expertiza by reimplementing its frontend using React with TypeScript, while integrating it with the existing Ruby on Rails backend APIs in the reimplementation backend repo. The new implementation will improve user experience, maintainability, and scalability while preserving core functionalities.

This project covers:

* Developing a React-based UI for managing questionnaire rubrics.

* Enabling navigation to a new page when clicking the "+" button to create a specific rubric for a questionnaire type.

* Ensuring seamless API integration with the reimplementation backend repo.

* Managing user sessions and authentication securely.

==Best Practices==
*Component Reusability (DRY Principle): Design reusable and modular components to avoid duplication and simplify maintenance, adhering to the "Don't Repeat Yourself" principle.

*Separation of Concerns: Keep the UI, state management, and business logic separated. Use container components for state and logic and presentational components for rendering.

*Responsive and Accessible Design: Ensure the UI adapts to different devices and meets accessibility standards (e.g., ARIA roles, keyboard navigation, and proper contrast).

*Type Safety with TypeScript: Use TypeScript interfaces and types to ensure data consistency, reduce runtime errors.

*Single Responsibility Principle: Each component or function should have a single, well-defined purpose to improve clarity, testability, and scalability.

==What Needs to be Done?==
===Questionnaire Management Dashboard===

Displays a list of questionnaire types (Review, Metareview, Author Feedback, etc.)
* Each questionnaire type has a "+" button, which, when clicked, navigates to a new page for creating a specific rubric for that questionnaire type.
* Data is fetched dynamically from the backend.

[[File:Picx1x.png | 700px]]

===Create/Edit Rubric Page===

This page is displayed when a user clicks the "+" button from the dashboard.

Allows users to:
* Enter a name for the rubric.
* Define min/max item scores.
* Set the review visibility (private/public).
* Add criteria for evaluation.
* Submit the form to create a new rubric for the selected questionnaire type.

[[File:Picx2x.png | 700px]]

==Backend Integration==

The frontend interacts with several key resources exposed by the backend through a RESTful API. The structure of each model's associated database table lets us define Typescript interfaces, transform request/response payloads and promote type safety.

===Models===

====Questionnaire====

The <code>Questionnaire</code> model forms the foundation of the Create/Edit form functionality, storing necessary attributes for each questionnaire. These fields are used to construct a form for editing or creating a rubric and to prepopulate the form when editing an existing rubric.

The backend database also includes a table of <code>questionnaire_types</code>, access to which would allow the Questionnaire Management Dashboard to dynamically render all available categories of questionnaires and enable users to initiate the creation process based on a selected type.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the questionnaire
|-
| name || The name/title of the questionnaire
|-
| instructor_id || Foreign key referencing the instructor who created it
|-
| private || Boolean indicating if the questionnaire is private
|-
| min_question_score || Minimum score that can be given to any question
|-
| max_question_score || Maximum score that can be given to any question
|-
| questionnaire_type || The type/category of questionnaire (e.g., Survey, Teammate Review)
|-
| display_type || Field for specifying how to display the questionnaire
|-
| instruction_loc || Field for custom instructions location or reference
|-
| created_at || Timestamp of questionnaire creation
|-
| updated_at || Timestamp of last update
|}

====Item====

The <code>Item</code> model represents individual items (or questions) within a questionnaire and includes attributes that should be included when adding an item to a particular questionnaire.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the item
|-
| txt || The text of the item/question
|-
| weight || The relative importance or weight of the item
|-
| seq || The sequence/order of the item in the questionnaire
|-
| question_type || Foreign key referencing the type of question
|-
| size || Size attribute for text-based answers (e.g., text area size)
|-
| alternatives || Possible answer choices (comma-separated for multiple-choice)
|-
| break_before || Boolean indicating whether to insert a page break before the item
|-
| max_label || Optional label for the maximum scale value
|-
| min_label || Optional label for the minimum scale value
|-
| created_at || Timestamp of item creation
|-
| updated_at || Timestamp of last update
|-
| questionnaire_id || Foreign key referencing the associated questionnaire
|}

===API Endpoints===

To facilitate interaction with the backend, the frontend uses a pre-configured <code>axiosClient</code>, which abstracts the base API URL and port number. This client is defined in the <code>utils/axios_client.ts</code> file and reused throughout the project for API communication. For questionnaire management, several key API routes are accessed using this client. For example, <code>GET /questionnaires/:id</code> fetches detailed data for editing a selected questionnaire. When creating or updating a questionnaire, the application uses <code>POST /questionnaires</code> and <code>PUT /questionnaires/:id</code>, respectively.

{| class="wikitable"
|+
! HTTP Method !! Endpoint !! Description
|-
| GET || /questionnaires || Fetches a list of all questionnaires
|-
| GET || /questionnaires/:id || Fetches a specific questionnaire by ID
|-
| POST || /questionnaires || Creates a new questionnaire
|-
| PUT || /questionnaires/:id || Updates an existing questionnaire
|-
| DELETE || /questionnaires/:id || Deletes a specific questionnaire
|-
| GET || /questions || Retrieves a list of all questions (items)
|-
| GET || /questions/:id || Retrieves a specific item, along with its rendered display
|-
| POST || /questions || Creates a new item for a questionnaire
|-
| PUT || /questions/:id || Updates an existing item
|}

==Implementation==

==Files Modified==

==Test Plan==

==Test Coverage==

==Team==
=====Mentor=====
*Prathyusha Kodali - pkodali

=====Members=====
*Ashwin Muniswamy - akumarm
*Michael Anderson - mwander5
*Martina Viola - mmviola

==Reference Links==
*[https://expertiza.ncsu.edu/tree_display/list?currCtlr=Questionnaires, Questionnaire Management Dashboard]
*[https://expertiza.ncsu.edu/questionnaires/new?model=ReviewQuestionnaire&private=1, Create/Edit Rubric Page]
*[https://github.com/mmviola1/reimplementation-front-end-E2538 Project Repo]

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-08T00:04:52Z

Mmviola: /* Implementation */

==E2538 Reimplementing Questionnaire Page==

__TOC__

==Expertiza==
Expertiza is an open-source web application currently built using [http://rubyonrails.org/ Ruby on Rails] and led by [https://www.csc.ncsu.edu/people/efg Dr. Edward Gehringer]. Designed for educational use, it enables instructors to manage assignments, rubrics, and participants, as well as assign grades and monitor student progress. Students can submit various types of learning objects, form teams, conduct peer evaluations, and review feedback from both peers and instructors. Originally developed at NC State, Expertiza is now used in select courses there and by faculty at other institutions, offering a flexible platform to enhance active learning and feedback in academic settings.

The reimplementation of Expertiza aims to mimic and enhance the application’s existing functionality with clean, well-structured code, while transitioning to a front-end application written in React and Typescipt integrated with a Ruby on Rails back-end.

==Project Overview==
The goal of this project is to implement the Questionnaire Management Dashboard and Create/Edit Rubric pages in Expertiza by reimplementing its frontend using React with TypeScript, while integrating it with the existing Ruby on Rails backend APIs in the reimplementation backend repo. The new implementation will improve user experience, maintainability, and scalability while preserving core functionalities.

This project covers:

* Developing a React-based UI for managing questionnaire rubrics.

* Enabling navigation to a new page when clicking the "+" button to create a specific rubric for a questionnaire type.

* Ensuring seamless API integration with the reimplementation backend repo.

* Managing user sessions and authentication securely.

==Best Practices==
*Component Reusability (DRY Principle): Design reusable and modular components to avoid duplication and simplify maintenance, adhering to the "Don't Repeat Yourself" principle.

*Separation of Concerns: Keep the UI, state management, and business logic separated. Use container components for state and logic and presentational components for rendering.

*Responsive and Accessible Design: Ensure the UI adapts to different devices and meets accessibility standards (e.g., ARIA roles, keyboard navigation, and proper contrast).

*Type Safety with TypeScript: Use TypeScript interfaces and types to ensure data consistency, reduce runtime errors.

*Single Responsibility Principle: Each component or function should have a single, well-defined purpose to improve clarity, testability, and scalability.

==What Needs to be Done?==
===Questionnaire Management Dashboard===

Displays a list of questionnaire types (Review, Metareview, Author Feedback, etc.)
* Each questionnaire type has a "+" button, which, when clicked, navigates to a new page for creating a specific rubric for that questionnaire type.
* Data is fetched dynamically from the backend.

[[File:Picx1x.png | 700px]]

===Create/Edit Rubric Page===

This page is displayed when a user clicks the "+" button from the dashboard.

Allows users to:
* Enter a name for the rubric.
* Define min/max item scores.
* Set the review visibility (private/public).
* Add criteria for evaluation.
* Submit the form to create a new rubric for the selected questionnaire type.

[[File:Picx2x.png | 700px]]

==Backend Integration==

The frontend interacts with several key resources exposed by the backend through a RESTful API. The structure of each model's associated database table lets us define Typescript interfaces, transform request/response payloads and promote type safety.

===Models===

====Questionnaire====

The <code>Questionnaire</code> model forms the foundation of the Create/Edit form functionality, storing necessary attributes for each questionnaire. These fields are used to construct a form for editing or creating a rubric and to prepopulate the form when editing an existing rubric.

The backend database also includes a table of <code>questionnaire_types</code>, access to which would allow the Questionnaire Management Dashboard to dynamically render all available categories of questionnaires and enable users to initiate the creation process based on a selected type.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the questionnaire
|-
| name || The name/title of the questionnaire
|-
| instructor_id || Foreign key referencing the instructor who created it
|-
| private || Boolean indicating if the questionnaire is private
|-
| min_question_score || Minimum score that can be given to any question
|-
| max_question_score || Maximum score that can be given to any question
|-
| questionnaire_type || The type/category of questionnaire (e.g., Survey, Teammate Review)
|-
| display_type || Field for specifying how to display the questionnaire
|-
| instruction_loc || Field for custom instructions location or reference
|-
| created_at || Timestamp of questionnaire creation
|-
| updated_at || Timestamp of last update
|}

====Item====

The <code>Item</code> model represents individual items (or questions) within a questionnaire and includes attributes that should be included when adding an item to a particular questionnaire.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the item
|-
| txt || The text of the item/question
|-
| weight || The relative importance or weight of the item
|-
| seq || The sequence/order of the item in the questionnaire
|-
| question_type || Foreign key referencing the type of question
|-
| size || Size attribute for text-based answers (e.g., text area size)
|-
| alternatives || Possible answer choices (comma-separated for multiple-choice)
|-
| break_before || Boolean indicating whether to insert a page break before the item
|-
| max_label || Optional label for the maximum scale value
|-
| min_label || Optional label for the minimum scale value
|-
| created_at || Timestamp of item creation
|-
| updated_at || Timestamp of last update
|-
| questionnaire_id || Foreign key referencing the associated questionnaire
|}

===API Endpoints===

To facilitate interaction with the backend, the frontend uses a pre-configured <code>axiosClient</code>, which abstracts the base API URL and port number. This client is defined in the <code>utils/axios_client.ts</code> file and reused throughout the project for API communication. For questionnaire management, several key API routes are accessed using this client. For example, <code>GET /questionnaires/:id</code> fetches detailed data for editing a selected questionnaire. When creating or updating a questionnaire, the application uses <code>POST /questionnaires</code> and <code>PUT /questionnaires/:id</code>, respectively.

{| class="wikitable"
|+
! HTTP Method !! Endpoint !! Description
|-
| GET || /questionnaires || Fetches a list of all questionnaires
|-
| GET || /questionnaires/:id || Fetches a specific questionnaire by ID
|-
| POST || /questionnaires || Creates a new questionnaire
|-
| PUT || /questionnaires/:id || Updates an existing questionnaire
|-
| DELETE || /questionnaires/:id || Deletes a specific questionnaire
|-
| GET || /questions || Retrieves a list of all questions (items)
|-
| GET || /questions/:id || Retrieves a specific item, along with its rendered display
|-
| POST || /questions || Creates a new item for a questionnaire
|-
| PUT || /questions/:id || Updates an existing item
|}

==Implementation==

==Files Modified==

==Test Plan==
===Testing Views===
===Testing Model===
===Testing Controller===

==Test Coverage==

==Team==
=====Mentor=====
*Prathyusha Kodali - pkodali

=====Members=====
*Ashwin Muniswamy - akumarm
*Michael Anderson - mwander5
*Martina Viola - mmviola

==Reference Links==
*[https://expertiza.ncsu.edu/tree_display/list?currCtlr=Questionnaires, Questionnaire Management Dashboard]
*[https://expertiza.ncsu.edu/questionnaires/new?model=ReviewQuestionnaire&private=1, Create/Edit Rubric Page]
*[https://github.com/mmviola1/reimplementation-front-end-E2538 Project Repo]

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-08T00:03:16Z

Mmviola: /* API Endpoints */

==E2538 Reimplementing Questionnaire Page==

__TOC__

==Expertiza==
Expertiza is an open-source web application currently built using [http://rubyonrails.org/ Ruby on Rails] and led by [https://www.csc.ncsu.edu/people/efg Dr. Edward Gehringer]. Designed for educational use, it enables instructors to manage assignments, rubrics, and participants, as well as assign grades and monitor student progress. Students can submit various types of learning objects, form teams, conduct peer evaluations, and review feedback from both peers and instructors. Originally developed at NC State, Expertiza is now used in select courses there and by faculty at other institutions, offering a flexible platform to enhance active learning and feedback in academic settings.

The reimplementation of Expertiza aims to mimic and enhance the application’s existing functionality with clean, well-structured code, while transitioning to a front-end application written in React and Typescipt integrated with a Ruby on Rails back-end.

==Project Overview==
The goal of this project is to implement the Questionnaire Management Dashboard and Create/Edit Rubric pages in Expertiza by reimplementing its frontend using React with TypeScript, while integrating it with the existing Ruby on Rails backend APIs in the reimplementation backend repo. The new implementation will improve user experience, maintainability, and scalability while preserving core functionalities.

This project covers:

* Developing a React-based UI for managing questionnaire rubrics.

* Enabling navigation to a new page when clicking the "+" button to create a specific rubric for a questionnaire type.

* Ensuring seamless API integration with the reimplementation backend repo.

* Managing user sessions and authentication securely.

==Best Practices==
*Component Reusability (DRY Principle): Design reusable and modular components to avoid duplication and simplify maintenance, adhering to the "Don't Repeat Yourself" principle.

*Separation of Concerns: Keep the UI, state management, and business logic separated. Use container components for state and logic and presentational components for rendering.

*Responsive and Accessible Design: Ensure the UI adapts to different devices and meets accessibility standards (e.g., ARIA roles, keyboard navigation, and proper contrast).

*Type Safety with TypeScript: Use TypeScript interfaces and types to ensure data consistency, reduce runtime errors.

*Single Responsibility Principle: Each component or function should have a single, well-defined purpose to improve clarity, testability, and scalability.

==What Needs to be Done?==
===Questionnaire Management Dashboard===

Displays a list of questionnaire types (Review, Metareview, Author Feedback, etc.)
* Each questionnaire type has a "+" button, which, when clicked, navigates to a new page for creating a specific rubric for that questionnaire type.
* Data is fetched dynamically from the backend.

[[File:Picx1x.png | 700px]]

===Create/Edit Rubric Page===

This page is displayed when a user clicks the "+" button from the dashboard.

Allows users to:
* Enter a name for the rubric.
* Define min/max item scores.
* Set the review visibility (private/public).
* Add criteria for evaluation.
* Submit the form to create a new rubric for the selected questionnaire type.

[[File:Picx2x.png | 700px]]

==Backend Integration==

The frontend interacts with several key resources exposed by the backend through a RESTful API. The structure of each model's associated database table lets us define Typescript interfaces, transform request/response payloads and promote type safety.

===Models===

====Questionnaire====

The <code>Questionnaire</code> model forms the foundation of the Create/Edit form functionality, storing necessary attributes for each questionnaire. These fields are used to construct a form for editing or creating a rubric and to prepopulate the form when editing an existing rubric.

The backend database also includes a table of <code>questionnaire_types</code>, access to which would allow the Questionnaire Management Dashboard to dynamically render all available categories of questionnaires and enable users to initiate the creation process based on a selected type.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the questionnaire
|-
| name || The name/title of the questionnaire
|-
| instructor_id || Foreign key referencing the instructor who created it
|-
| private || Boolean indicating if the questionnaire is private
|-
| min_question_score || Minimum score that can be given to any question
|-
| max_question_score || Maximum score that can be given to any question
|-
| questionnaire_type || The type/category of questionnaire (e.g., Survey, Teammate Review)
|-
| display_type || Field for specifying how to display the questionnaire
|-
| instruction_loc || Field for custom instructions location or reference
|-
| created_at || Timestamp of questionnaire creation
|-
| updated_at || Timestamp of last update
|}

====Item====

The <code>Item</code> model represents individual items (or questions) within a questionnaire and includes attributes that should be included when adding an item to a particular questionnaire.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the item
|-
| txt || The text of the item/question
|-
| weight || The relative importance or weight of the item
|-
| seq || The sequence/order of the item in the questionnaire
|-
| question_type || Foreign key referencing the type of question
|-
| size || Size attribute for text-based answers (e.g., text area size)
|-
| alternatives || Possible answer choices (comma-separated for multiple-choice)
|-
| break_before || Boolean indicating whether to insert a page break before the item
|-
| max_label || Optional label for the maximum scale value
|-
| min_label || Optional label for the minimum scale value
|-
| created_at || Timestamp of item creation
|-
| updated_at || Timestamp of last update
|-
| questionnaire_id || Foreign key referencing the associated questionnaire
|}

===API Endpoints===

To facilitate interaction with the backend, the frontend uses a pre-configured <code>axiosClient</code>, which abstracts the base API URL and port number. This client is defined in the <code>utils/axios_client.ts</code> file and reused throughout the project for API communication. For questionnaire management, several key API routes are accessed using this client. For example, <code>GET /questionnaires/:id</code> fetches detailed data for editing a selected questionnaire. When creating or updating a questionnaire, the application uses <code>POST /questionnaires</code> and <code>PUT /questionnaires/:id</code>, respectively.

{| class="wikitable"
|+
! HTTP Method !! Endpoint !! Description
|-
| GET || /questionnaires || Fetches a list of all questionnaires
|-
| GET || /questionnaires/:id || Fetches a specific questionnaire by ID
|-
| POST || /questionnaires || Creates a new questionnaire
|-
| PUT || /questionnaires/:id || Updates an existing questionnaire
|-
| DELETE || /questionnaires/:id || Deletes a specific questionnaire
|-
| GET || /questions || Retrieves a list of all questions (items)
|-
| GET || /questions/:id || Retrieves a specific item, along with its rendered display
|-
| POST || /questions || Creates a new item for a questionnaire
|-
| PUT || /questions/:id || Updates an existing item
|}

==Implementation==
===Views===
===Model===
===Controller===

==Files Modified==

==Test Plan==
===Testing Views===
===Testing Model===
===Testing Controller===

==Test Coverage==

==Team==
=====Mentor=====
*Prathyusha Kodali - pkodali

=====Members=====
*Ashwin Muniswamy - akumarm
*Michael Anderson - mwander5
*Martina Viola - mmviola

==Reference Links==
*[https://expertiza.ncsu.edu/tree_display/list?currCtlr=Questionnaires, Questionnaire Management Dashboard]
*[https://expertiza.ncsu.edu/questionnaires/new?model=ReviewQuestionnaire&private=1, Create/Edit Rubric Page]
*[https://github.com/mmviola1/reimplementation-front-end-E2538 Project Repo]

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-08T00:02:55Z

Mmviola: /* API Endpoints */

==E2538 Reimplementing Questionnaire Page==

__TOC__

==Expertiza==
Expertiza is an open-source web application currently built using [http://rubyonrails.org/ Ruby on Rails] and led by [https://www.csc.ncsu.edu/people/efg Dr. Edward Gehringer]. Designed for educational use, it enables instructors to manage assignments, rubrics, and participants, as well as assign grades and monitor student progress. Students can submit various types of learning objects, form teams, conduct peer evaluations, and review feedback from both peers and instructors. Originally developed at NC State, Expertiza is now used in select courses there and by faculty at other institutions, offering a flexible platform to enhance active learning and feedback in academic settings.

The reimplementation of Expertiza aims to mimic and enhance the application’s existing functionality with clean, well-structured code, while transitioning to a front-end application written in React and Typescipt integrated with a Ruby on Rails back-end.

==Project Overview==
The goal of this project is to implement the Questionnaire Management Dashboard and Create/Edit Rubric pages in Expertiza by reimplementing its frontend using React with TypeScript, while integrating it with the existing Ruby on Rails backend APIs in the reimplementation backend repo. The new implementation will improve user experience, maintainability, and scalability while preserving core functionalities.

This project covers:

* Developing a React-based UI for managing questionnaire rubrics.

* Enabling navigation to a new page when clicking the "+" button to create a specific rubric for a questionnaire type.

* Ensuring seamless API integration with the reimplementation backend repo.

* Managing user sessions and authentication securely.

==Best Practices==
*Component Reusability (DRY Principle): Design reusable and modular components to avoid duplication and simplify maintenance, adhering to the "Don't Repeat Yourself" principle.

*Separation of Concerns: Keep the UI, state management, and business logic separated. Use container components for state and logic and presentational components for rendering.

*Responsive and Accessible Design: Ensure the UI adapts to different devices and meets accessibility standards (e.g., ARIA roles, keyboard navigation, and proper contrast).

*Type Safety with TypeScript: Use TypeScript interfaces and types to ensure data consistency, reduce runtime errors.

*Single Responsibility Principle: Each component or function should have a single, well-defined purpose to improve clarity, testability, and scalability.

==What Needs to be Done?==
===Questionnaire Management Dashboard===

Displays a list of questionnaire types (Review, Metareview, Author Feedback, etc.)
* Each questionnaire type has a "+" button, which, when clicked, navigates to a new page for creating a specific rubric for that questionnaire type.
* Data is fetched dynamically from the backend.

[[File:Picx1x.png | 700px]]

===Create/Edit Rubric Page===

This page is displayed when a user clicks the "+" button from the dashboard.

Allows users to:
* Enter a name for the rubric.
* Define min/max item scores.
* Set the review visibility (private/public).
* Add criteria for evaluation.
* Submit the form to create a new rubric for the selected questionnaire type.

[[File:Picx2x.png | 700px]]

==Backend Integration==

The frontend interacts with several key resources exposed by the backend through a RESTful API. The structure of each model's associated database table lets us define Typescript interfaces, transform request/response payloads and promote type safety.

===Models===

====Questionnaire====

The <code>Questionnaire</code> model forms the foundation of the Create/Edit form functionality, storing necessary attributes for each questionnaire. These fields are used to construct a form for editing or creating a rubric and to prepopulate the form when editing an existing rubric.

The backend database also includes a table of <code>questionnaire_types</code>, access to which would allow the Questionnaire Management Dashboard to dynamically render all available categories of questionnaires and enable users to initiate the creation process based on a selected type.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the questionnaire
|-
| name || The name/title of the questionnaire
|-
| instructor_id || Foreign key referencing the instructor who created it
|-
| private || Boolean indicating if the questionnaire is private
|-
| min_question_score || Minimum score that can be given to any question
|-
| max_question_score || Maximum score that can be given to any question
|-
| questionnaire_type || The type/category of questionnaire (e.g., Survey, Teammate Review)
|-
| display_type || Field for specifying how to display the questionnaire
|-
| instruction_loc || Field for custom instructions location or reference
|-
| created_at || Timestamp of questionnaire creation
|-
| updated_at || Timestamp of last update
|}

====Item====

The <code>Item</code> model represents individual items (or questions) within a questionnaire and includes attributes that should be included when adding an item to a particular questionnaire.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the item
|-
| txt || The text of the item/question
|-
| weight || The relative importance or weight of the item
|-
| seq || The sequence/order of the item in the questionnaire
|-
| question_type || Foreign key referencing the type of question
|-
| size || Size attribute for text-based answers (e.g., text area size)
|-
| alternatives || Possible answer choices (comma-separated for multiple-choice)
|-
| break_before || Boolean indicating whether to insert a page break before the item
|-
| max_label || Optional label for the maximum scale value
|-
| min_label || Optional label for the minimum scale value
|-
| created_at || Timestamp of item creation
|-
| updated_at || Timestamp of last update
|-
| questionnaire_id || Foreign key referencing the associated questionnaire
|}

===API Endpoints===

To facilitate interaction with the backend, the frontend uses a pre-configured <code>axiosClient</code>, which abstracts the base API URL and port number. This client is defined in the <code>utils/axios_client.ts</code> file and reused throughout the project for consistent API communication. For questionnaire management, several key API routes are accessed using this client. For example, <code>GET /questionnaires/:id</code> fetches detailed data for editing a selected questionnaire. When creating or updating a questionnaire, the application uses <code>POST /questionnaires</code> and <code>PUT /questionnaires/:id</code>, respectively.

{| class="wikitable"
|+
! HTTP Method !! Endpoint !! Description
|-
| GET || /questionnaires || Fetches a list of all questionnaires
|-
| GET || /questionnaires/:id || Fetches a specific questionnaire by ID
|-
| POST || /questionnaires || Creates a new questionnaire
|-
| PUT || /questionnaires/:id || Updates an existing questionnaire
|-
| DELETE || /questionnaires/:id || Deletes a specific questionnaire
|-
| GET || /questions || Retrieves a list of all questions (items)
|-
| GET || /questions/:id || Retrieves a specific item, along with its rendered display
|-
| POST || /questions || Creates a new item for a questionnaire
|-
| PUT || /questions/:id || Updates an existing item
|}

==Implementation==
===Views===
===Model===
===Controller===

==Files Modified==

==Test Plan==
===Testing Views===
===Testing Model===
===Testing Controller===

==Test Coverage==

==Team==
=====Mentor=====
*Prathyusha Kodali - pkodali

=====Members=====
*Ashwin Muniswamy - akumarm
*Michael Anderson - mwander5
*Martina Viola - mmviola

==Reference Links==
*[https://expertiza.ncsu.edu/tree_display/list?currCtlr=Questionnaires, Questionnaire Management Dashboard]
*[https://expertiza.ncsu.edu/questionnaires/new?model=ReviewQuestionnaire&private=1, Create/Edit Rubric Page]
*[https://github.com/mmviola1/reimplementation-front-end-E2538 Project Repo]

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-08T00:01:35Z

Mmviola: /* Project Requirement */

==E2538 Reimplementing Questionnaire Page==

__TOC__

==Expertiza==
Expertiza is an open-source web application currently built using [http://rubyonrails.org/ Ruby on Rails] and led by [https://www.csc.ncsu.edu/people/efg Dr. Edward Gehringer]. Designed for educational use, it enables instructors to manage assignments, rubrics, and participants, as well as assign grades and monitor student progress. Students can submit various types of learning objects, form teams, conduct peer evaluations, and review feedback from both peers and instructors. Originally developed at NC State, Expertiza is now used in select courses there and by faculty at other institutions, offering a flexible platform to enhance active learning and feedback in academic settings.

The reimplementation of Expertiza aims to mimic and enhance the application’s existing functionality with clean, well-structured code, while transitioning to a front-end application written in React and Typescipt integrated with a Ruby on Rails back-end.

==Project Overview==
The goal of this project is to implement the Questionnaire Management Dashboard and Create/Edit Rubric pages in Expertiza by reimplementing its frontend using React with TypeScript, while integrating it with the existing Ruby on Rails backend APIs in the reimplementation backend repo. The new implementation will improve user experience, maintainability, and scalability while preserving core functionalities.

This project covers:

* Developing a React-based UI for managing questionnaire rubrics.

* Enabling navigation to a new page when clicking the "+" button to create a specific rubric for a questionnaire type.

* Ensuring seamless API integration with the reimplementation backend repo.

* Managing user sessions and authentication securely.

==Best Practices==
*Component Reusability (DRY Principle): Design reusable and modular components to avoid duplication and simplify maintenance, adhering to the "Don't Repeat Yourself" principle.

*Separation of Concerns: Keep the UI, state management, and business logic separated. Use container components for state and logic and presentational components for rendering.

*Responsive and Accessible Design: Ensure the UI adapts to different devices and meets accessibility standards (e.g., ARIA roles, keyboard navigation, and proper contrast).

*Type Safety with TypeScript: Use TypeScript interfaces and types to ensure data consistency, reduce runtime errors.

*Single Responsibility Principle: Each component or function should have a single, well-defined purpose to improve clarity, testability, and scalability.

==What Needs to be Done?==
===Questionnaire Management Dashboard===

Displays a list of questionnaire types (Review, Metareview, Author Feedback, etc.)
* Each questionnaire type has a "+" button, which, when clicked, navigates to a new page for creating a specific rubric for that questionnaire type.
* Data is fetched dynamically from the backend.

[[File:Picx1x.png | 700px]]

===Create/Edit Rubric Page===

This page is displayed when a user clicks the "+" button from the dashboard.

Allows users to:
* Enter a name for the rubric.
* Define min/max item scores.
* Set the review visibility (private/public).
* Add criteria for evaluation.
* Submit the form to create a new rubric for the selected questionnaire type.

[[File:Picx2x.png | 700px]]

==Backend Integration==

The frontend interacts with several key resources exposed by the backend through a RESTful API. The structure of each model's associated database table lets us define Typescript interfaces, transform request/response payloads and promote type safety.

===Models===

====Questionnaire====

The <code>Questionnaire</code> model forms the foundation of the Create/Edit form functionality, storing necessary attributes for each questionnaire. These fields are used to construct a form for editing or creating a rubric and to prepopulate the form when editing an existing rubric.

The backend database also includes a table of <code>questionnaire_types</code>, access to which would allow the Questionnaire Management Dashboard to dynamically render all available categories of questionnaires and enable users to initiate the creation process based on a selected type.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the questionnaire
|-
| name || The name/title of the questionnaire
|-
| instructor_id || Foreign key referencing the instructor who created it
|-
| private || Boolean indicating if the questionnaire is private
|-
| min_question_score || Minimum score that can be given to any question
|-
| max_question_score || Maximum score that can be given to any question
|-
| questionnaire_type || The type/category of questionnaire (e.g., Survey, Teammate Review)
|-
| display_type || Field for specifying how to display the questionnaire
|-
| instruction_loc || Field for custom instructions location or reference
|-
| created_at || Timestamp of questionnaire creation
|-
| updated_at || Timestamp of last update
|}

====Item====

The <code>Item</code> model represents individual items (or questions) within a questionnaire and includes attributes that should be included when adding an item to a particular questionnaire.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the item
|-
| txt || The text of the item/question
|-
| weight || The relative importance or weight of the item
|-
| seq || The sequence/order of the item in the questionnaire
|-
| question_type || Foreign key referencing the type of question
|-
| size || Size attribute for text-based answers (e.g., text area size)
|-
| alternatives || Possible answer choices (comma-separated for multiple-choice)
|-
| break_before || Boolean indicating whether to insert a page break before the item
|-
| max_label || Optional label for the maximum scale value
|-
| min_label || Optional label for the minimum scale value
|-
| created_at || Timestamp of item creation
|-
| updated_at || Timestamp of last update
|-
| questionnaire_id || Foreign key referencing the associated questionnaire
|}

===API Endpoints===

To facilitate interaction with the backend, the frontend uses a pre-configured <code>axiosClient</code>, which abstracts the base API URL and port number. This client is defined in the utils/axios_client.ts file and reused throughout the project for consistent API communication. For questionnaire management, several key API routes are accessed using this client. For example, <code>GET /questionnaires/:id</code> fetches detailed data for editing a selected questionnaire. When creating or updating a questionnaire, the application uses <code>POST /questionnaires</code> and <code>PUT /questionnaires/:id</code>, respectively.

{| class="wikitable"
|+
! HTTP Method !! Endpoint !! Description
|-
| GET || /questionnaires || Fetches a list of all questionnaires
|-
| GET || /questionnaires/:id || Fetches a specific questionnaire by ID
|-
| POST || /questionnaires || Creates a new questionnaire
|-
| PUT || /questionnaires/:id || Updates an existing questionnaire
|-
| DELETE || /questionnaires/:id || Deletes a specific questionnaire
|-
| GET || /questions || Retrieves a list of all questions (items)
|-
| GET || /questions/:id || Retrieves a specific item, along with its rendered display
|-
| POST || /questions || Creates a new item for a questionnaire
|-
| PUT || /questions/:id || Updates an existing item
|}

==Implementation==
===Views===
===Model===
===Controller===

==Files Modified==

==Test Plan==
===Testing Views===
===Testing Model===
===Testing Controller===

==Test Coverage==

==Team==
=====Mentor=====
*Prathyusha Kodali - pkodali

=====Members=====
*Ashwin Muniswamy - akumarm
*Michael Anderson - mwander5
*Martina Viola - mmviola

==Reference Links==
*[https://expertiza.ncsu.edu/tree_display/list?currCtlr=Questionnaires, Questionnaire Management Dashboard]
*[https://expertiza.ncsu.edu/questionnaires/new?model=ReviewQuestionnaire&private=1, Create/Edit Rubric Page]
*[https://github.com/mmviola1/reimplementation-front-end-E2538 Project Repo]

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-07T22:15:50Z

Mmviola: /* API Endpoints */

==E2538 Reimplementing Questionnaire Page==

__TOC__

==Expertiza==
Expertiza is an open-source web application currently built using [http://rubyonrails.org/ Ruby on Rails] and led by [https://www.csc.ncsu.edu/people/efg Dr. Edward Gehringer]. Designed for educational use, it enables instructors to manage assignments, rubrics, and participants, as well as assign grades and monitor student progress. Students can submit various types of learning objects, form teams, conduct peer evaluations, and review feedback from both peers and instructors. Originally developed at NC State, Expertiza is now used in select courses there and by faculty at other institutions, offering a flexible platform to enhance active learning and feedback in academic settings.

The reimplementation of Expertiza aims to mimic and enhance the application’s existing functionality with clean, well-structured code, while transitioning to a front-end application written in React and Typescipt integrated with a Ruby on Rails back-end.

==Project Requirement==
The goal of this project is to implement the Questionnaire Management Dashboard and Create/Edit Rubric pages in Expertiza by reimplementing its frontend using React with TypeScript, while integrating it with the existing Ruby on Rails backend APIs in the reimplementation backend repo. The new implementation will improve user experience, maintainability, and scalability while preserving core functionalities.

This project covers:

* Developing a React-based UI for managing questionnaire rubrics.

* Enabling navigation to a new page when clicking the "+" button to create a specific rubric for a questionnaire type.

* Ensuring seamless API integration with the reimplementation backend repo.

* Managing user sessions and authentication securely.

==Best Practices==
*Component Reusability (DRY Principle): Design reusable and modular components to avoid duplication and simplify maintenance, adhering to the "Don't Repeat Yourself" principle.

*Separation of Concerns: Keep the UI, state management, and business logic separated. Use container components for state and logic and presentational components for rendering.

*Responsive and Accessible Design: Ensure the UI adapts to different devices and meets accessibility standards (e.g., ARIA roles, keyboard navigation, and proper contrast).

*Type Safety with TypeScript: Use TypeScript interfaces and types to ensure data consistency, reduce runtime errors.

*Single Responsibility Principle: Each component or function should have a single, well-defined purpose to improve clarity, testability, and scalability.

==What Needs to be Done?==
===Questionnaire Management Dashboard===

Displays a list of questionnaire types (Review, Metareview, Author Feedback, etc.)
* Each questionnaire type has a "+" button, which, when clicked, navigates to a new page for creating a specific rubric for that questionnaire type.
* Data is fetched dynamically from the backend.

[[File:Picx1x.png | 700px]]

===Create/Edit Rubric Page===

This page is displayed when a user clicks the "+" button from the dashboard.

Allows users to:
* Enter a name for the rubric.
* Define min/max item scores.
* Set the review visibility (private/public).
* Add criteria for evaluation.
* Submit the form to create a new rubric for the selected questionnaire type.

[[File:Picx2x.png | 700px]]

==Backend Integration==

The frontend interacts with several key resources exposed by the backend through a RESTful API. The structure of each model's associated database table lets us define Typescript interfaces, transform request/response payloads and promote type safety.

===Models===

====Questionnaire====

The <code>Questionnaire</code> model forms the foundation of the Create/Edit form functionality, storing necessary attributes for each questionnaire. These fields are used to construct a form for editing or creating a rubric and to prepopulate the form when editing an existing rubric.

The backend database also includes a table of <code>questionnaire_types</code>, access to which would allow the Questionnaire Management Dashboard to dynamically render all available categories of questionnaires and enable users to initiate the creation process based on a selected type.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the questionnaire
|-
| name || The name/title of the questionnaire
|-
| instructor_id || Foreign key referencing the instructor who created it
|-
| private || Boolean indicating if the questionnaire is private
|-
| min_question_score || Minimum score that can be given to any question
|-
| max_question_score || Maximum score that can be given to any question
|-
| questionnaire_type || The type/category of questionnaire (e.g., Survey, Teammate Review)
|-
| display_type || Field for specifying how to display the questionnaire
|-
| instruction_loc || Field for custom instructions location or reference
|-
| created_at || Timestamp of questionnaire creation
|-
| updated_at || Timestamp of last update
|}

====Item====

The <code>Item</code> model represents individual items (or questions) within a questionnaire and includes attributes that should be included when adding an item to a particular questionnaire.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the item
|-
| txt || The text of the item/question
|-
| weight || The relative importance or weight of the item
|-
| seq || The sequence/order of the item in the questionnaire
|-
| question_type || Foreign key referencing the type of question
|-
| size || Size attribute for text-based answers (e.g., text area size)
|-
| alternatives || Possible answer choices (comma-separated for multiple-choice)
|-
| break_before || Boolean indicating whether to insert a page break before the item
|-
| max_label || Optional label for the maximum scale value
|-
| min_label || Optional label for the minimum scale value
|-
| created_at || Timestamp of item creation
|-
| updated_at || Timestamp of last update
|-
| questionnaire_id || Foreign key referencing the associated questionnaire
|}

===API Endpoints===

To facilitate interaction with the backend, the frontend uses a pre-configured <code>axiosClient</code>, which abstracts the base API URL and port number. This client is defined in the utils/axios_client.ts file and reused throughout the project for consistent API communication. For questionnaire management, several key API routes are accessed using this client. For example, <code>GET /questionnaires/:id</code> fetches detailed data for editing a selected questionnaire. When creating or updating a questionnaire, the application uses <code>POST /questionnaires</code> and <code>PUT /questionnaires/:id</code>, respectively.

{| class="wikitable"
|+
! HTTP Method !! Endpoint !! Description
|-
| GET || /questionnaires || Fetches a list of all questionnaires
|-
| GET || /questionnaires/:id || Fetches a specific questionnaire by ID
|-
| POST || /questionnaires || Creates a new questionnaire
|-
| PUT || /questionnaires/:id || Updates an existing questionnaire
|-
| DELETE || /questionnaires/:id || Deletes a specific questionnaire
|-
| GET || /questions || Retrieves a list of all questions (items)
|-
| GET || /questions/:id || Retrieves a specific item, along with its rendered display
|-
| POST || /questions || Creates a new item for a questionnaire
|-
| PUT || /questions/:id || Updates an existing item
|}

==Implementation==
===Views===
===Model===
===Controller===

==Files Modified==

==Test Plan==
===Testing Views===
===Testing Model===
===Testing Controller===

==Test Coverage==

==Team==
=====Mentor=====
*Prathyusha Kodali - pkodali

=====Members=====
*Ashwin Muniswamy - akumarm
*Michael Anderson - mwander5
*Martina Viola - mmviola

==Reference Links==
*[https://expertiza.ncsu.edu/tree_display/list?currCtlr=Questionnaires, Questionnaire Management Dashboard]
*[https://expertiza.ncsu.edu/questionnaires/new?model=ReviewQuestionnaire&private=1, Create/Edit Rubric Page]
*[https://github.com/mmviola1/reimplementation-front-end-E2538 Project Repo]

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-07T22:09:17Z

Mmviola: /* Class UML Diagram */

==E2538 Reimplementing Questionnaire Page==

__TOC__

==Expertiza==
Expertiza is an open-source web application currently built using [http://rubyonrails.org/ Ruby on Rails] and led by [https://www.csc.ncsu.edu/people/efg Dr. Edward Gehringer]. Designed for educational use, it enables instructors to manage assignments, rubrics, and participants, as well as assign grades and monitor student progress. Students can submit various types of learning objects, form teams, conduct peer evaluations, and review feedback from both peers and instructors. Originally developed at NC State, Expertiza is now used in select courses there and by faculty at other institutions, offering a flexible platform to enhance active learning and feedback in academic settings.

The reimplementation of Expertiza aims to mimic and enhance the application’s existing functionality with clean, well-structured code, while transitioning to a front-end application written in React and Typescipt integrated with a Ruby on Rails back-end.

==Project Requirement==
The goal of this project is to implement the Questionnaire Management Dashboard and Create/Edit Rubric pages in Expertiza by reimplementing its frontend using React with TypeScript, while integrating it with the existing Ruby on Rails backend APIs in the reimplementation backend repo. The new implementation will improve user experience, maintainability, and scalability while preserving core functionalities.

This project covers:

* Developing a React-based UI for managing questionnaire rubrics.

* Enabling navigation to a new page when clicking the "+" button to create a specific rubric for a questionnaire type.

* Ensuring seamless API integration with the reimplementation backend repo.

* Managing user sessions and authentication securely.

==Best Practices==
*Component Reusability (DRY Principle): Design reusable and modular components to avoid duplication and simplify maintenance, adhering to the "Don't Repeat Yourself" principle.

*Separation of Concerns: Keep the UI, state management, and business logic separated. Use container components for state and logic and presentational components for rendering.

*Responsive and Accessible Design: Ensure the UI adapts to different devices and meets accessibility standards (e.g., ARIA roles, keyboard navigation, and proper contrast).

*Type Safety with TypeScript: Use TypeScript interfaces and types to ensure data consistency, reduce runtime errors.

*Single Responsibility Principle: Each component or function should have a single, well-defined purpose to improve clarity, testability, and scalability.

==What Needs to be Done?==
===Questionnaire Management Dashboard===

Displays a list of questionnaire types (Review, Metareview, Author Feedback, etc.)
* Each questionnaire type has a "+" button, which, when clicked, navigates to a new page for creating a specific rubric for that questionnaire type.
* Data is fetched dynamically from the backend.

[[File:Picx1x.png | 700px]]

===Create/Edit Rubric Page===

This page is displayed when a user clicks the "+" button from the dashboard.

Allows users to:
* Enter a name for the rubric.
* Define min/max item scores.
* Set the review visibility (private/public).
* Add criteria for evaluation.
* Submit the form to create a new rubric for the selected questionnaire type.

[[File:Picx2x.png | 700px]]

==Backend Integration==

The frontend interacts with several key resources exposed by the backend through a RESTful API. The structure of each model's associated database table lets us define Typescript interfaces, transform request/response payloads and promote type safety.

===Models===

====Questionnaire====

The <code>Questionnaire</code> model forms the foundation of the Create/Edit form functionality, storing necessary attributes for each questionnaire. These fields are used to construct a form for editing or creating a rubric and to prepopulate the form when editing an existing rubric.

The backend database also includes a table of <code>questionnaire_types</code>, access to which would allow the Questionnaire Management Dashboard to dynamically render all available categories of questionnaires and enable users to initiate the creation process based on a selected type.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the questionnaire
|-
| name || The name/title of the questionnaire
|-
| instructor_id || Foreign key referencing the instructor who created it
|-
| private || Boolean indicating if the questionnaire is private
|-
| min_question_score || Minimum score that can be given to any question
|-
| max_question_score || Maximum score that can be given to any question
|-
| questionnaire_type || The type/category of questionnaire (e.g., Survey, Teammate Review)
|-
| display_type || Field for specifying how to display the questionnaire
|-
| instruction_loc || Field for custom instructions location or reference
|-
| created_at || Timestamp of questionnaire creation
|-
| updated_at || Timestamp of last update
|}

====Item====

The <code>Item</code> model represents individual items (or questions) within a questionnaire and includes attributes that should be included when adding an item to a particular questionnaire.

{| class="wikitable"
! Attribute !! Description
|-
| id || Unique identifier for the item
|-
| txt || The text of the item/question
|-
| weight || The relative importance or weight of the item
|-
| seq || The sequence/order of the item in the questionnaire
|-
| question_type || Foreign key referencing the type of question
|-
| size || Size attribute for text-based answers (e.g., text area size)
|-
| alternatives || Possible answer choices (comma-separated for multiple-choice)
|-
| break_before || Boolean indicating whether to insert a page break before the item
|-
| max_label || Optional label for the maximum scale value
|-
| min_label || Optional label for the minimum scale value
|-
| created_at || Timestamp of item creation
|-
| updated_at || Timestamp of last update
|-
| questionnaire_id || Foreign key referencing the associated questionnaire
|}

===API Endpoints===

To facilitate interaction with the backend, the frontend uses a pre-configured <code>axiosClient</code>, which abstracts the base API URL and port number. This client is defined in the utils/axios_client.ts file and reused throughout the project for consistent API communication. For questionnaire management, several key API routes are accessed using this client. For example, <code>GET /questionnaires/:id</code> fetches detailed data for editing a selected questionnaire. When creating or updating a questionnaire, the application uses <code>POST /questionnaires</code> and <code>PUT /questionnaires/:id</code>, respectively.

{| class="wikitable"
|+
! HTTP Method !! Endpoint !! Description
|-
| GET || /questionnaires || Fetches a list of all questionnaires
|-
| GET || /questionnaires/:id || Fetches a specific questionnaire by ID
|-
| POST || /questionnaires || Creates a new questionnaire
|-
| PUT || /questionnaires/:id || Updates an existing questionnaire
|-
| DELETE || /questionnaires/:id || Deletes a specific questionnaire
|}

==Implementation==
===Views===
===Model===
===Controller===

==Files Modified==

==Test Plan==
===Testing Views===
===Testing Model===
===Testing Controller===

==Test Coverage==

==Team==
=====Mentor=====
*Prathyusha Kodali - pkodali

=====Members=====
*Ashwin Muniswamy - akumarm
*Michael Anderson - mwander5
*Martina Viola - mmviola

==Reference Links==
*[https://expertiza.ncsu.edu/tree_display/list?currCtlr=Questionnaires, Questionnaire Management Dashboard]
*[https://expertiza.ncsu.edu/questionnaires/new?model=ReviewQuestionnaire&private=1, Create/Edit Rubric Page]
*[https://github.com/mmviola1/reimplementation-front-end-E2538 Project Repo]

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-07T20:35:04Z

Mmviola: /* Reference Links */

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-07T19:55:37Z

Mmviola: /* Project Requirement */

CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza

2025-04-07T19:46:21Z

Mmviola: /* Expertiza */

CSC/ECE 517 Spring 2025/oss E2521

2025-03-28T10:36:50Z

Mmviola:

==About Expertiza==
Expertiza is an open-source platform built on the Ruby on Rails framework. It facilitates collaborative learning by allowing instructors to create assignments, manage peer reviews, and track submissions. The platform supports various file formats, including document uploads, URLs, and wiki pages. Students can work in teams, review each other's work, and receive feedback. Expertiza's modular architecture supports continuous improvement and adaptation to new educational needs.

The current implementation of Expertiza uses Ruby on Rails for both the frontend and backend. The reimplementation of Expertiza adopts a modernized stack, utilizing Ruby on Rails for the backend and TypeScript with React for the frontend.

==Problem Statement==
The goal of this project is to implement the user interface for the "View Submissions" and "Assign Grades" pages for the reimplementation of Expertiza in Typescript and React. This improvement focuses on increasing the efficiency and usability of the grading workflow while ensuring accessibility and robust data handling.

The following tasks outlined as part of this project:

<ol>
<li>Redesigned the "View Submissions" page to display team information and streamline navigation to relevant pages.
<li>Design the "Assign Grades" page to support input validation, error handling, and submission of grades and comments.
<li>Implement backend integration to ensure real-time synchronization with the reimplementation backend APIs.
<li>Implement error handling and improve accessibility across devices.
</ol>

==View Submissions Page==

===UI Design===
The reimplemented "View Submissions" page provides a clear and interactive interface for instructors to manage and review team submissions. Key elements include:

<ul>
<li>Team Details: Displays team names, participants, resource links, and submission history.
<li>Action Links: Includes interactive options such as "Assign Grade" and "History" for each team.
<li>Dynamic Column Widths: Optimized table layout to prevent excessive width by adjusting the links column dynamically.
</ul>

Note that the Submission History page has not yet been implemented in the front-end reimplementation. As such, the History link currently navigates back to the assignment edit page.

The "View Submissions" page works for team and individual assignments. If assignment is an individual assignment, the Team Name category will not be displayed in the list of submissions.

[[Image:Screenshot 2025-03-28 at 6.29.08 AM.png|600px]]

===Backend Integration===
The page fetches data from the reimplementation backend and dynamically updates the following details:

<ul>
<li>Assignment information
<li>Team member details
</ul>

Relevant controllers and routes within the reimplementation back end. In consultation with the professor, a list_submissions method was added to the AssignmentsController (assignment_controller.rb) to enable fetching submissions data.

Though links to submitted content is intended to be displayed on the view submissions page, the relevant backend controllers have also not yet been implemented. On the instruction of the professor, retrieval of submission links was omitted for this iteration of the assignment.

===Functionality===
<ul>
<li>Navigation: Clicking the "Assign Grade" link redirects the user to the "Assign Grades" page.
<li>Data Retrieval: On page load, it fetches and displays the assignment data using backend APIs.
</ul>

==Assign Grades Page==

===UI Design===
The "Assign Grades" page is designed to facilitate accurate and efficient grading. Features include:

<ul>
<li>Team Information: Displays team details, submission summaries, and peer review scores.
<li>Grade Input: Input fields for grades and comments with a submit button.
<li>Error Indicators: Highlights missing peer reviews and incomplete fields.
</ul>

===Backend Integration===
Due to missing functionality in the reimplementation backend, our project uses mock data for the following categories:

<ul>
<li>Submission information
<li>Peer review scores
<li>Missing reviews
</ul>

Content displayed on the Assign Grades page is particular to a participant ID specified in the page's route. Updates were made to the reimplementation back-end to enable retrieval of data for a particular user.

===Error Handling===
Comprehensive error handling is implemented to manage:

<ul>
<li>Failed API requests
<li>Invalid inputs
<li>Submission errors
</ul>

==Testing==
To log in to the deployed version of the project, use the following credentials:

<ul>
<li>username: instructor6
<li>password: password
</ul>

==Future Improvements==
<ul>
<li>Implement bulk grading functionality for large classes.
<li>Enhance search and filter options for the "View Submissions" page.
<li>Optimize performance with larger datasets.
</ul>

==References==
<ol>
<li>[Expertiza Platform](https://expertiza.ncsu.edu/)
<li>[GitHub Pull Request (Unmerged)](https://github.com/expertiza/reimplementation-front-end/pull/87)
</ol>

File:Screenshot 2025-03-28 at 6.29.08 AM.png

2025-03-28T10:31:26Z

Mmviola:

CSC/ECE 517 Spring 2025/oss E2521

2025-03-28T10:30:41Z

Mmviola: /* UI Design */

==About Expertiza==
Expertiza is an open-source platform built on the Ruby on Rails framework. It facilitates collaborative learning by allowing instructors to create assignments, manage peer reviews, and track submissions. The platform supports various file formats, including document uploads, URLs, and wiki pages. Students can work in teams, review each other's work, and receive feedback. Expertiza's modular architecture supports continuous improvement and adaptation to new educational needs.

The current implementation of Expertiza uses Ruby on Rails for both the frontend and backend. The reimplementation of Expertiza adopts a modernized stack, utilizing Ruby on Rails for the backend and TypeScript with React for the frontend.

==Problem Statement==
The goal of this project is to implement the user interface for the "View Submissions" and "Assign Grades" pages for the reimplementation of Expertiza in Typescript and React. This improvement focuses on increasing the efficiency and usability of the grading workflow while ensuring accessibility and robust data handling.

The following tasks outlined as part of this project:

<ol>
<li>Redesigned the "View Submissions" page to display team information and streamline navigation to relevant pages.
<li>Design the "Assign Grades" page to support input validation, error handling, and submission of grades and comments.
<li>Implement backend integration to ensure real-time synchronization with the reimplementation backend APIs.
<li>Implement error handling and improve accessibility across devices.
</ol>

==View Submissions Page==

===UI Design===
The reimplemented "View Submissions" page provides a clear and interactive interface for instructors to manage and review team submissions. Key elements include:

<ul>
<li>Team Details: Displays team names, participants, resource links, and submission history.
<li>Action Links: Includes interactive options such as "Assign Grade" and "History" for each team.
<li>Dynamic Column Widths: Optimized table layout to prevent excessive width by adjusting the links column dynamically.
</ul>

Note that the Submission History page has not yet been implemented in the front-end reimplementation. As such, the History link currently navigates back to the assignment edit page.

The "View Submissions" page works for team and individual assignments. If assignment is an individual assignment, the Team Name category will not be displayed in the list of submissions.

===Backend Integration===
The page fetches data from the reimplementation backend and dynamically updates the following details:

<ul>
<li>Assignment information
<li>Team member details
</ul>

Relevant controllers and routes within the reimplementation back end. In consultation with the professor, a list_submissions method was added to the AssignmentsController (assignment_controller.rb) to enable fetching submissions data.

Though links to submitted content is intended to be displayed on the view submissions page, the relevant backend controllers have also not yet been implemented. On the instruction of the professor, retrieval of submission links was omitted for this iteration of the assignment.

===Functionality===
<ul>
<li>Navigation: Clicking the "Assign Grade" link redirects the user to the "Assign Grades" page.
<li>Data Retrieval: On page load, it fetches and displays the required data using backend APIs.
</ul>

==Assign Grades Page==

===UI Design===
The "Assign Grades" page is designed to facilitate accurate and efficient grading. Features include:

<ul>
<li>Team Information: Displays team details, submission summaries, and peer review scores.
<li>Grade Input: Input fields for grades and comments with a submit button.
<li>Error Indicators: Highlights missing peer reviews and incomplete fields.
</ul>

===Backend Integration===
Due to missing functionality in the reimplementation backend, our project uses mock data for the following categories:

<ul>
<li>Submission information
<li>Peer review scores
<li>Missing reviews
</ul>

Content displayed on the Assign Grades page is particular to a participant ID specified in the page's route. Updates were made to the reimplementation back-end to enable retrieval of data for a particular user.

===Error Handling===
Comprehensive error handling is implemented to manage:

<ul>
<li>Failed API requests
<li>Invalid inputs
<li>Submission errors
</ul>

==Testing==
To log in to the deployed version of the project, use the following credentials:

<ul>
<li>username: instructor6
<li>password: password
</ul>

==Future Improvements==
<ul>
<li>Implement bulk grading functionality for large classes.
<li>Enhance search and filter options for the "View Submissions" page.
<li>Optimize performance with larger datasets.
</ul>

==References==
<ol>
<li>[Expertiza Platform](https://expertiza.ncsu.edu/)
<li>[GitHub Pull Request (Unmerged)](https://github.com/expertiza/reimplementation-front-end/pull/87)
</ol>

CSC/ECE 517 Spring 2025/oss E2521

2025-03-27T18:14:23Z

Mmviola:

==About Expertiza==
Expertiza is an open-source platform built on the Ruby on Rails framework. It facilitates collaborative learning by allowing instructors to create assignments, manage peer reviews, and track submissions. The platform supports various file formats, including document uploads, URLs, and wiki pages. Students can work in teams, review each other's work, and receive feedback. Expertiza's modular architecture supports continuous improvement and adaptation to new educational needs.

The current implementation of Expertiza uses Ruby on Rails for both the frontend and backend. The reimplementation of Expertiza adopts a modernized stack, utilizing Ruby on Rails for the backend and TypeScript with React for the frontend.

==Problem Statement==
The goal of this project is to implement the user interface for the "View Submissions" and "Assign Grades" pages for the reimplementation of Expertiza in Typescript and React. This improvement focuses on increasing the efficiency and usability of the grading workflow while ensuring accessibility and robust data handling.

The following tasks outlined as part of this project:

<ol>
<li>Redesigned the "View Submissions" page to display team information and streamline navigation to relevant pages.
<li>Design the "Assign Grades" page to support input validation, error handling, and submission of grades and comments.
<li>Implement backend integration to ensure real-time synchronization with the reimplementation backend APIs.
<li>Implement error handling and improve accessibility across devices.
</ol>

==View Submissions Page==

===UI Design===
The reimplemented "View Submissions" page provides a clear and interactive interface for instructors to manage and review team submissions. Key elements include:

<ul>
<li>Team Details: Displays team names, participants, resource links, and submission history.
<li>Action Links: Includes interactive options such as "Assign Grade" and "History" for each team.
<li>Dynamic Column Widths: Optimized table layout to prevent excessive width by adjusting the links column dynamically.
</ul>

Note that the Submission History page has not yet been implemented in the front-end reimplementation. As such, the History link currently navigates back to the assignment edit page.

===Backend Integration===
The page fetches data from the reimplementation backend and dynamically updates the following details:

<ul>
<li>Assignment information
<li>Team member details
</ul>

Relevant controllers and routes within the reimplementation back end. In consultation with the professor, a list_submissions method was added to the AssignmentsController (assignment_controller.rb) to enable fetching submissions data.

Though links to submitted content is intended to be displayed on the view submissions page, the relevant backend controllers have also not yet been implemented. On the instruction of the professor, retrieval of submission links was omitted for this iteration of the assignment.

===Functionality===
<ul>
<li>Navigation: Clicking the "Assign Grade" link redirects the user to the "Assign Grades" page.
<li>Data Retrieval: On page load, it fetches and displays the required data using backend APIs.
</ul>

==Assign Grades Page==

===UI Design===
The "Assign Grades" page is designed to facilitate accurate and efficient grading. Features include:

<ul>
<li>Team Information: Displays team details, submission summaries, and peer review scores.
<li>Grade Input: Input fields for grades and comments with a submit button.
<li>Error Indicators: Highlights missing peer reviews and incomplete fields.
</ul>

===Backend Integration===
Due to missing functionality in the reimplementation backend, our project uses mock data for the following categories:

<ul>
<li>Submission information
<li>Peer review scores
<li>Missing reviews
</ul>

Content displayed on the Assign Grades page is particular to a participant ID specified in the page's route. Updates were made to the reimplementation back-end to enable retrieval of data for a particular user.

===Error Handling===
Comprehensive error handling is implemented to manage:

<ul>
<li>Failed API requests
<li>Invalid inputs
<li>Submission errors
</ul>

==Testing==
To log in to the deployed version of the project, use the following credentials:

<ul>
<li>username: instructor6
<li>password: password
</ul>

==Future Improvements==
<ul>
<li>Implement bulk grading functionality for large classes.
<li>Enhance search and filter options for the "View Submissions" page.
<li>Optimize performance with larger datasets.
</ul>

==References==
<ol>
<li>[Expertiza Platform](https://expertiza.ncsu.edu/)
<li>[GitHub Pull Request (Unmerged)](https://github.com/expertiza/reimplementation-front-end/pull/87)
</ol>

CSC/ECE 517 Spring 2025/oss E2521

2025-03-27T18:13:44Z

Mmviola: /* Future Improvements */

==About Expertiza==
Expertiza is an open-source platform built on the Ruby on Rails framework. It facilitates collaborative learning by allowing instructors to create assignments, manage peer reviews, and track submissions. The platform supports various file formats, including document uploads, URLs, and wiki pages. Students can work in teams, review each other's work, and receive feedback. Expertiza's modular architecture supports continuous improvement and adaptation to new educational needs.

The current implementation of Expertiza uses Ruby on Rails for both the frontend and backend. The reimplementation of Expertiza adopts a modernized stack, utilizing Ruby on Rails for the backend and TypeScript with React for the frontend.

==Problem Statement==
The goal of this project is to implement the user interface for the "View Submissions" and "Assign Grades" pages for the reimplementation of Expertiza in Typescript and React. This improvement focuses on increasing the efficiency and usability of the grading workflow while ensuring accessibility and robust data handling.

The following tasks outlined as part of this project:

<ol>
<li>Redesigned the "View Submissions" page to display team information and streamline navigation to relevant pages.
<li>Design the "Assign Grades" page to support input validation, error handling, and submission of grades and comments.
<li>Implement backend integration to ensure real-time synchronization with the reimplementation backend APIs.
<li>Implement error handling and improve accessibility across devices.
</ol>

==View Submissions Page==

===UI Design===
The reimplemented "View Submissions" page provides a clear and interactive interface for instructors to manage and review team submissions. Key elements include:

<ul>
<li>Team Details: Displays team names, participants, resource links, and submission history.
<li>Action Links: Includes interactive options such as "Assign Grade" and "History" for each team.
<li>Dynamic Column Widths: Optimized table layout to prevent excessive width by adjusting the links column dynamically.
</ul>

Note that the Submission History page has not yet been implemented in the front-end reimplementation. As such, the History link currently navigates back to the assignment edit page.

===Backend Integration===
The page fetches data from the reimplementation backend and dynamically updates the following details:

<ul>
<li>Assignment information
<li>Team member details
</ul>

Relevant controllers and routes within the reimplementation back end. In consultation with the professor, a list_submissions method was added to the AssignmentsController (assignment_controller.rb) to enable fetching submissions data.

Though links to submitted content is intended to be displayed on the view submissions page, the relevant backend controllers have also not yet been implemented. On the instruction of the professor, retrieval of submission links was omitted for this iteration of the assignment.

===Functionality===
<ul>
<li>Navigation: Clicking the "Assign Grade" link redirects the user to the "Assign Grades" page.
<li>Data Retrieval: On page load, it fetches and displays the required data using backend APIs.
</ul>

==Assign Grades Page==

===UI Design===
The "Assign Grades" page is designed to facilitate accurate and efficient grading. Features include:

<ul>
<li>Team Information: Displays team details, submission summaries, and peer review scores.
<li>Grade Input: Input fields for grades and comments with a submit button.
<li>Error Indicators: Highlights missing peer reviews and incomplete fields.
</ul>

===Backend Integration===
Due to missing functionality in the reimplementation backend, our project uses mock data for the following categories:

<ul>
<li>Submission information
<li>Peer review scores
<li>Missing reviews
</ul>

Content displayed on the Assign Grades page is particular to a participant ID specified in the page's route. Updates were made to the reimplementation back-end to enable retrieval of data for a particular user.

===Error Handling===
Comprehensive error handling is implemented to manage:

<ul>
<li>Failed API requests
<li>Invalid inputs
<li>Submission errors
</ul>

==Testing==
To log in to the deployed version of the project, use the following credentials:

<ul>
<li>username: instructor6
<li>password: password
</ul>

==Future Improvements==
<ul>
<li>Implement bulk grading functionality for large classes.
<li>Enhance search and filter options for the "View Submissions" page.
<li>Optimize performance with larger datasets.
</ul>

==References==
<ol>
<li>[Expertiza Platform](https://expertiza.ncsu.edu/)
<li>[GitHub Pull Request (Unmerged)](https://github.com/expertiza/reimplementation-front-end/pull/87)
</ol>

CSC/ECE 517 Spring 2025/oss E2521

2025-03-27T18:13:38Z

Mmviola: /* Testing */

==About Expertiza==
Expertiza is an open-source platform built on the Ruby on Rails framework. It facilitates collaborative learning by allowing instructors to create assignments, manage peer reviews, and track submissions. The platform supports various file formats, including document uploads, URLs, and wiki pages. Students can work in teams, review each other's work, and receive feedback. Expertiza's modular architecture supports continuous improvement and adaptation to new educational needs.

The current implementation of Expertiza uses Ruby on Rails for both the frontend and backend. The reimplementation of Expertiza adopts a modernized stack, utilizing Ruby on Rails for the backend and TypeScript with React for the frontend.

==Problem Statement==
The goal of this project is to implement the user interface for the "View Submissions" and "Assign Grades" pages for the reimplementation of Expertiza in Typescript and React. This improvement focuses on increasing the efficiency and usability of the grading workflow while ensuring accessibility and robust data handling.

The following tasks outlined as part of this project:

<ol>
<li>Redesigned the "View Submissions" page to display team information and streamline navigation to relevant pages.
<li>Design the "Assign Grades" page to support input validation, error handling, and submission of grades and comments.
<li>Implement backend integration to ensure real-time synchronization with the reimplementation backend APIs.
<li>Implement error handling and improve accessibility across devices.
</ol>

==View Submissions Page==

===UI Design===
The reimplemented "View Submissions" page provides a clear and interactive interface for instructors to manage and review team submissions. Key elements include:

<ul>
<li>Team Details: Displays team names, participants, resource links, and submission history.
<li>Action Links: Includes interactive options such as "Assign Grade" and "History" for each team.
<li>Dynamic Column Widths: Optimized table layout to prevent excessive width by adjusting the links column dynamically.
</ul>

Note that the Submission History page has not yet been implemented in the front-end reimplementation. As such, the History link currently navigates back to the assignment edit page.

===Backend Integration===
The page fetches data from the reimplementation backend and dynamically updates the following details:

<ul>
<li>Assignment information
<li>Team member details
</ul>

Relevant controllers and routes within the reimplementation back end. In consultation with the professor, a list_submissions method was added to the AssignmentsController (assignment_controller.rb) to enable fetching submissions data.

Though links to submitted content is intended to be displayed on the view submissions page, the relevant backend controllers have also not yet been implemented. On the instruction of the professor, retrieval of submission links was omitted for this iteration of the assignment.

===Functionality===
<ul>
<li>Navigation: Clicking the "Assign Grade" link redirects the user to the "Assign Grades" page.
<li>Data Retrieval: On page load, it fetches and displays the required data using backend APIs.
</ul>

==Assign Grades Page==

===UI Design===
The "Assign Grades" page is designed to facilitate accurate and efficient grading. Features include:

<ul>
<li>Team Information: Displays team details, submission summaries, and peer review scores.
<li>Grade Input: Input fields for grades and comments with a submit button.
<li>Error Indicators: Highlights missing peer reviews and incomplete fields.
</ul>

===Backend Integration===
Due to missing functionality in the reimplementation backend, our project uses mock data for the following categories:

<ul>
<li>Submission information
<li>Peer review scores
<li>Missing reviews
</ul>

Content displayed on the Assign Grades page is particular to a participant ID specified in the page's route. Updates were made to the reimplementation back-end to enable retrieval of data for a particular user.

===Error Handling===
Comprehensive error handling is implemented to manage:

<ul>
<li>Failed API requests
<li>Invalid inputs
<li>Submission errors
</ul>

==Testing==
To log in to the deployed version of the project, use the following credentials:

<ul>
<li>username: instructor6
<li>password: password
</ul>

==Future Improvements==
<ul>
<li>Implement bulk grading functionality for large classes.
<li>Enhance search and filter options for the "View Submissions" page.
<li>Optimize performance with larger datasets.
</ul>

==References==
<ol>
<li>[Expertiza Platform](https://expertiza.ncsu.edu/)
<li>[GitHub Pull Request (Unmerged)](https://github.com/expertiza/reimplementation-front-end/pull/87)
</ol>

CSC/ECE 517 Spring 2025/oss E2521

2025-03-27T18:13:22Z

Mmviola: /* Error Handling */

==About Expertiza==
Expertiza is an open-source platform built on the Ruby on Rails framework. It facilitates collaborative learning by allowing instructors to create assignments, manage peer reviews, and track submissions. The platform supports various file formats, including document uploads, URLs, and wiki pages. Students can work in teams, review each other's work, and receive feedback. Expertiza's modular architecture supports continuous improvement and adaptation to new educational needs.

The current implementation of Expertiza uses Ruby on Rails for both the frontend and backend. The reimplementation of Expertiza adopts a modernized stack, utilizing Ruby on Rails for the backend and TypeScript with React for the frontend.

==Problem Statement==
The goal of this project is to implement the user interface for the "View Submissions" and "Assign Grades" pages for the reimplementation of Expertiza in Typescript and React. This improvement focuses on increasing the efficiency and usability of the grading workflow while ensuring accessibility and robust data handling.

The following tasks outlined as part of this project:

<ol>
<li>Redesigned the "View Submissions" page to display team information and streamline navigation to relevant pages.
<li>Design the "Assign Grades" page to support input validation, error handling, and submission of grades and comments.
<li>Implement backend integration to ensure real-time synchronization with the reimplementation backend APIs.
<li>Implement error handling and improve accessibility across devices.
</ol>

==View Submissions Page==

===UI Design===
The reimplemented "View Submissions" page provides a clear and interactive interface for instructors to manage and review team submissions. Key elements include:

<ul>
<li>Team Details: Displays team names, participants, resource links, and submission history.
<li>Action Links: Includes interactive options such as "Assign Grade" and "History" for each team.
<li>Dynamic Column Widths: Optimized table layout to prevent excessive width by adjusting the links column dynamically.
</ul>

Note that the Submission History page has not yet been implemented in the front-end reimplementation. As such, the History link currently navigates back to the assignment edit page.

===Backend Integration===
The page fetches data from the reimplementation backend and dynamically updates the following details:

<ul>
<li>Assignment information
<li>Team member details
</ul>

Relevant controllers and routes within the reimplementation back end. In consultation with the professor, a list_submissions method was added to the AssignmentsController (assignment_controller.rb) to enable fetching submissions data.

Though links to submitted content is intended to be displayed on the view submissions page, the relevant backend controllers have also not yet been implemented. On the instruction of the professor, retrieval of submission links was omitted for this iteration of the assignment.

===Functionality===
<ul>
<li>Navigation: Clicking the "Assign Grade" link redirects the user to the "Assign Grades" page.
<li>Data Retrieval: On page load, it fetches and displays the required data using backend APIs.
</ul>

==Assign Grades Page==

===UI Design===
The "Assign Grades" page is designed to facilitate accurate and efficient grading. Features include:

<ul>
<li>Team Information: Displays team details, submission summaries, and peer review scores.
<li>Grade Input: Input fields for grades and comments with a submit button.
<li>Error Indicators: Highlights missing peer reviews and incomplete fields.
</ul>

===Backend Integration===
Due to missing functionality in the reimplementation backend, our project uses mock data for the following categories:

<ul>
<li>Submission information
<li>Peer review scores
<li>Missing reviews
</ul>

Content displayed on the Assign Grades page is particular to a participant ID specified in the page's route. Updates were made to the reimplementation back-end to enable retrieval of data for a particular user.

===Error Handling===
Comprehensive error handling is implemented to manage:

<ul>
<li>Failed API requests
<li>Invalid inputs
<li>Submission errors
</ul>

==Testing==
To log in to the deployed version of the project, use the following credentials:

<ul>
<li>username: instructor6
<li>password: password
</ul>

==Future Improvements==
<ul>
<li>Implement bulk grading functionality for large classes.
<li>Enhance search and filter options for the "View Submissions" page.
<li>Optimize performance with larger datasets.
</ul>

==References==
<ol>
<li>[Expertiza Platform](https://expertiza.ncsu.edu/)
<li>[GitHub Pull Request (Unmerged)](https://github.com/expertiza/reimplementation-front-end/pull/87)
</ol>

CSC/ECE 517 Spring 2025/oss E2521

2025-03-27T18:13:11Z

Mmviola: /* Backend Integration */

==About Expertiza==
Expertiza is an open-source platform built on the Ruby on Rails framework. It facilitates collaborative learning by allowing instructors to create assignments, manage peer reviews, and track submissions. The platform supports various file formats, including document uploads, URLs, and wiki pages. Students can work in teams, review each other's work, and receive feedback. Expertiza's modular architecture supports continuous improvement and adaptation to new educational needs.

The current implementation of Expertiza uses Ruby on Rails for both the frontend and backend. The reimplementation of Expertiza adopts a modernized stack, utilizing Ruby on Rails for the backend and TypeScript with React for the frontend.

==Problem Statement==
The goal of this project is to implement the user interface for the "View Submissions" and "Assign Grades" pages for the reimplementation of Expertiza in Typescript and React. This improvement focuses on increasing the efficiency and usability of the grading workflow while ensuring accessibility and robust data handling.

The following tasks outlined as part of this project:

<ol>
<li>Redesigned the "View Submissions" page to display team information and streamline navigation to relevant pages.
<li>Design the "Assign Grades" page to support input validation, error handling, and submission of grades and comments.
<li>Implement backend integration to ensure real-time synchronization with the reimplementation backend APIs.
<li>Implement error handling and improve accessibility across devices.
</ol>

==View Submissions Page==

===UI Design===
The reimplemented "View Submissions" page provides a clear and interactive interface for instructors to manage and review team submissions. Key elements include:

<ul>
<li>Team Details: Displays team names, participants, resource links, and submission history.
<li>Action Links: Includes interactive options such as "Assign Grade" and "History" for each team.
<li>Dynamic Column Widths: Optimized table layout to prevent excessive width by adjusting the links column dynamically.
</ul>

Note that the Submission History page has not yet been implemented in the front-end reimplementation. As such, the History link currently navigates back to the assignment edit page.

===Backend Integration===
The page fetches data from the reimplementation backend and dynamically updates the following details:

<ul>
<li>Assignment information
<li>Team member details
</ul>

Relevant controllers and routes within the reimplementation back end. In consultation with the professor, a list_submissions method was added to the AssignmentsController (assignment_controller.rb) to enable fetching submissions data.

Though links to submitted content is intended to be displayed on the view submissions page, the relevant backend controllers have also not yet been implemented. On the instruction of the professor, retrieval of submission links was omitted for this iteration of the assignment.

===Functionality===
<ul>
<li>Navigation: Clicking the "Assign Grade" link redirects the user to the "Assign Grades" page.
<li>Data Retrieval: On page load, it fetches and displays the required data using backend APIs.
</ul>

==Assign Grades Page==

===UI Design===
The "Assign Grades" page is designed to facilitate accurate and efficient grading. Features include:

<ul>
<li>Team Information: Displays team details, submission summaries, and peer review scores.
<li>Grade Input: Input fields for grades and comments with a submit button.
<li>Error Indicators: Highlights missing peer reviews and incomplete fields.
</ul>

===Backend Integration===
Due to missing functionality in the reimplementation backend, our project uses mock data for the following categories:

<ul>
<li>Submission information
<li>Peer review scores
<li>Missing reviews
</ul>

Content displayed on the Assign Grades page is particular to a participant ID specified in the page's route. Updates were made to the reimplementation back-end to enable retrieval of data for a particular user.

===Error Handling===
Comprehensive error handling is implemented to manage:

<ul>
<li>Failed API requests
<li>Invalid inputs
<li>Submission errors
</ul>

==Testing==
To log in to the deployed version of the project, use the following credentials:

<ul>
<li>username: instructor6
<li>password: password
</ul>

==Future Improvements==
<ul>
<li>Implement bulk grading functionality for large classes.
<li>Enhance search and filter options for the "View Submissions" page.
<li>Optimize performance with larger datasets.
</ul>

==References==
<ol>
<li>[Expertiza Platform](https://expertiza.ncsu.edu/)
<li>[GitHub Pull Request (Unmerged)](https://github.com/expertiza/reimplementation-front-end/pull/87)
</ol>

CSC/ECE 517 Spring 2025/oss E2521

2025-03-27T18:09:20Z

Mmviola: /* Functionality */

==About Expertiza==
Expertiza is an open-source platform built on the Ruby on Rails framework. It facilitates collaborative learning by allowing instructors to create assignments, manage peer reviews, and track submissions. The platform supports various file formats, including document uploads, URLs, and wiki pages. Students can work in teams, review each other's work, and receive feedback. Expertiza's modular architecture supports continuous improvement and adaptation to new educational needs.

The current implementation of Expertiza uses Ruby on Rails for both the frontend and backend. The reimplementation of Expertiza adopts a modernized stack, utilizing Ruby on Rails for the backend and TypeScript with React for the frontend.

==Problem Statement==
The goal of this project is to implement the user interface for the "View Submissions" and "Assign Grades" pages for the reimplementation of Expertiza in Typescript and React. This improvement focuses on increasing the efficiency and usability of the grading workflow while ensuring accessibility and robust data handling.

The following tasks outlined as part of this project:

<ol>
<li>Redesigned the "View Submissions" page to display team information and streamline navigation to relevant pages.
<li>Design the "Assign Grades" page to support input validation, error handling, and submission of grades and comments.
<li>Implement backend integration to ensure real-time synchronization with the reimplementation backend APIs.
<li>Implement error handling and improve accessibility across devices.
</ol>

==View Submissions Page==

===UI Design===
The reimplemented "View Submissions" page provides a clear and interactive interface for instructors to manage and review team submissions. Key elements include:

<ul>
<li>Team Details: Displays team names, participants, resource links, and submission history.
<li>Action Links: Includes interactive options such as "Assign Grade" and "History" for each team.
<li>Dynamic Column Widths: Optimized table layout to prevent excessive width by adjusting the links column dynamically.
</ul>

Note that the Submission History page has not yet been implemented in the front-end reimplementation. As such, the History link currently navigates back to the assignment edit page.

===Backend Integration===
The page fetches data from the reimplementation backend and dynamically updates the following details:

<ul>
<li>Assignment information
<li>Team member details
</ul>

Relevant controllers and routes within the reimplementation back end. In consultation with the professor, a list_submissions method was added to the AssignmentsController (assignment_controller.rb) to enable fetching submissions data.

Though links to submitted content is intended to be displayed on the view submissions page, the relevant backend controllers have also not yet been implemented. On the instruction of the professor, retrieval of submission links was omitted for this iteration of the assignment.

===Functionality===
<ul>
<li>Navigation: Clicking the "Assign Grade" link redirects the user to the "Assign Grades" page.
<li>Data Retrieval: On page load, it fetches and displays the required data using backend APIs.
</ul>

==Assign Grades Page==

===UI Design===
The "Assign Grades" page is designed to facilitate accurate and efficient grading. Features include:

<ul>
<li>Team Information: Displays team details, submission summaries, and peer review scores.
<li>Grade Input: Input fields for grades and comments with a submit button.
<li>Error Indicators: Highlights missing peer reviews and incomplete fields.
</ul>

===Backend Integration===
API calls are used to retrieve and update the following data:

<ul>
<li>Submission information
<li>Peer review scores
<li>Missing reviews
</ul>

===Error Handling===
Comprehensive error handling is implemented to manage:

<ul>
<li>Failed API requests
<li>Invalid inputs
<li>Submission errors
</ul>

==Testing==
To log in to the deployed version of the project, use the following credentials:

<ul>
<li>username: instructor6
<li>password: password
</ul>

==Future Improvements==
<ul>
<li>Implement bulk grading functionality for large classes.
<li>Enhance search and filter options for the "View Submissions" page.
<li>Optimize performance with larger datasets.
</ul>

==References==
<ol>
<li>[Expertiza Platform](https://expertiza.ncsu.edu/)
<li>[GitHub Pull Request (Unmerged)](https://github.com/expertiza/reimplementation-front-end/pull/87)
</ol>

CSC/ECE 517 Spring 2025/oss E2521

2025-03-27T18:09:08Z

Mmviola: /* Backend Integration */

==About Expertiza==
Expertiza is an open-source platform built on the Ruby on Rails framework. It facilitates collaborative learning by allowing instructors to create assignments, manage peer reviews, and track submissions. The platform supports various file formats, including document uploads, URLs, and wiki pages. Students can work in teams, review each other's work, and receive feedback. Expertiza's modular architecture supports continuous improvement and adaptation to new educational needs.

The current implementation of Expertiza uses Ruby on Rails for both the frontend and backend. The reimplementation of Expertiza adopts a modernized stack, utilizing Ruby on Rails for the backend and TypeScript with React for the frontend.

==Problem Statement==
The goal of this project is to implement the user interface for the "View Submissions" and "Assign Grades" pages for the reimplementation of Expertiza in Typescript and React. This improvement focuses on increasing the efficiency and usability of the grading workflow while ensuring accessibility and robust data handling.

The following tasks outlined as part of this project:

<ol>
<li>Redesigned the "View Submissions" page to display team information and streamline navigation to relevant pages.
<li>Design the "Assign Grades" page to support input validation, error handling, and submission of grades and comments.
<li>Implement backend integration to ensure real-time synchronization with the reimplementation backend APIs.
<li>Implement error handling and improve accessibility across devices.
</ol>

==View Submissions Page==

===UI Design===
The reimplemented "View Submissions" page provides a clear and interactive interface for instructors to manage and review team submissions. Key elements include:

<ul>
<li>Team Details: Displays team names, participants, resource links, and submission history.
<li>Action Links: Includes interactive options such as "Assign Grade" and "History" for each team.
<li>Dynamic Column Widths: Optimized table layout to prevent excessive width by adjusting the links column dynamically.
</ul>

Note that the Submission History page has not yet been implemented in the front-end reimplementation. As such, the History link currently navigates back to the assignment edit page.

===Backend Integration===
The page fetches data from the reimplementation backend and dynamically updates the following details:

<ul>
<li>Assignment information
<li>Team member details
</ul>

Relevant controllers and routes within the reimplementation back end. In consultation with the professor, a list_submissions method was added to the AssignmentsController (assignment_controller.rb) to enable fetching submissions data.

Though links to submitted content is intended to be displayed on the view submissions page, the relevant backend controllers have also not yet been implemented. On the instruction of the professor, retrieval of submission links was omitted for this iteration of the assignment.

===Functionality===
<ul>
<li>Navigation: Clicking the "Assign Grade" link redirects the user to the "Assign Grades" page.
<li>Data Retrieval: On page load, it fetches and displays the required data using backend APIs.
</ul>

==Assign Grades Page==

===UI Design===
The "Assign Grades" page is designed to facilitate accurate and efficient grading. Features include:

<ul>
<li>Team Information: Displays team details, submission summaries, and peer review scores.
<li>Grade Input: Input fields for grades and comments with a submit button.
<li>Error Indicators: Highlights missing peer reviews and incomplete fields.
</ul>

===Backend Integration===
API calls are used to retrieve and update the following data:

<ul>
<li>Submission information
<li>Peer review scores
<li>Missing reviews
</ul>

===Functionality===
<ul>
<li>Grade Submission: Allows instructors to input grades and comments and submit them via API.
<li>Error Handling: Prevents submission if required fields are missing.
</ul>

===Error Handling===
Comprehensive error handling is implemented to manage:

<ul>
<li>Failed API requests
<li>Invalid inputs
<li>Submission errors
</ul>

==Testing==
To log in to the deployed version of the project, use the following credentials:

<ul>
<li>username: instructor6
<li>password: password
</ul>

==Future Improvements==
<ul>
<li>Implement bulk grading functionality for large classes.
<li>Enhance search and filter options for the "View Submissions" page.
<li>Optimize performance with larger datasets.
</ul>

==References==
<ol>
<li>[Expertiza Platform](https://expertiza.ncsu.edu/)
<li>[GitHub Pull Request (Unmerged)](https://github.com/expertiza/reimplementation-front-end/pull/87)
</ol>

CSC/ECE 517 Spring 2025/oss E2521

2025-03-27T18:08:54Z

Mmviola: /* Testing */

==About Expertiza==
Expertiza is an open-source platform built on the Ruby on Rails framework. It facilitates collaborative learning by allowing instructors to create assignments, manage peer reviews, and track submissions. The platform supports various file formats, including document uploads, URLs, and wiki pages. Students can work in teams, review each other's work, and receive feedback. Expertiza's modular architecture supports continuous improvement and adaptation to new educational needs.

The current implementation of Expertiza uses Ruby on Rails for both the frontend and backend. The reimplementation of Expertiza adopts a modernized stack, utilizing Ruby on Rails for the backend and TypeScript with React for the frontend.

==Problem Statement==
The goal of this project is to implement the user interface for the "View Submissions" and "Assign Grades" pages for the reimplementation of Expertiza in Typescript and React. This improvement focuses on increasing the efficiency and usability of the grading workflow while ensuring accessibility and robust data handling.

The following tasks outlined as part of this project:

<ol>
<li>Redesigned the "View Submissions" page to display team information and streamline navigation to relevant pages.
<li>Design the "Assign Grades" page to support input validation, error handling, and submission of grades and comments.
<li>Implement backend integration to ensure real-time synchronization with the reimplementation backend APIs.
<li>Implement error handling and improve accessibility across devices.
</ol>

==View Submissions Page==

===UI Design===
The reimplemented "View Submissions" page provides a clear and interactive interface for instructors to manage and review team submissions. Key elements include:

<ul>
<li>Team Details: Displays team names, participants, resource links, and submission history.
<li>Action Links: Includes interactive options such as "Assign Grade" and "History" for each team.
<li>Dynamic Column Widths: Optimized table layout to prevent excessive width by adjusting the links column dynamically.
</ul>

Note that the Submission History page has not yet been implemented in the front-end reimplementation. As such, the History link currently navigates back to the assignment edit page.

===Backend Integration===
The page fetches data from the reimplementation backend and dynamically updates the following details:

<ul>
<li>Assignment information
<li>Team member details
</ul>

Relevant controllers and routes within the reimplementation back end. In consultation with the professor, a list_submissions method was added to the AssignmentsController (assignment_controller.rb) to enable fetching submissions data.

Though links to submitted content is intended to be displayed on the view submissions page, the relevant backend controllers have also not yet been implemented. On the instruction of the professor, retrieval of submission links was omitted for this iteration of the assignment.

===Functionality===
<ul>
<li>Navigation: Clicking the "Assign Grade" link redirects the user to the "Assign Grades" page.
<li>Data Retrieval: On page load, it fetches and displays the required data using backend APIs.
</ul>

==Assign Grades Page==

===UI Design===
The "Assign Grades" page is designed to facilitate accurate and efficient grading. Features include:

<ul>
<li>Team Information: Displays team details, submission summaries, and peer review scores.
<li>Grade Input: Input fields for grades and comments with a submit button.
<li>Error Indicators: Highlights missing peer reviews and incomplete fields.
</ul>

===Backend Integration===
API calls are used to retrieve and update the following data:

<ul>
<li>Submission information
<li>Peer review scores
<li>Missing reviews
</ul>

===Functionality===
<ul>
<li>Grade Submission: Allows instructors to input grades and comments and submit them via API.
<li>Error Handling: Prevents submission if required fields are missing.
</ul>

===Error Handling===
Comprehensive error handling is implemented to manage:

<ul>
<li>Failed API requests
<li>Invalid inputs
<li>Submission errors
</ul>

==Testing==
To log in to the deployed version of the project, use the following credentials:

<ul>
<li>username: instructor6
<li>password: password
</ul>

==Future Improvements==
<ul>
<li>Implement bulk grading functionality for large classes.
<li>Enhance search and filter options for the "View Submissions" page.
<li>Optimize performance with larger datasets.
</ul>

==References==
<ol>
<li>[Expertiza Platform](https://expertiza.ncsu.edu/)
<li>[GitHub Pull Request (Unmerged)](https://github.com/expertiza/reimplementation-front-end/pull/87)
</ol>

CSC/ECE 517 Spring 2025/oss E2521

2025-03-27T18:08:41Z

Mmviola: /* Future Improvements */

==About Expertiza==
Expertiza is an open-source platform built on the Ruby on Rails framework. It facilitates collaborative learning by allowing instructors to create assignments, manage peer reviews, and track submissions. The platform supports various file formats, including document uploads, URLs, and wiki pages. Students can work in teams, review each other's work, and receive feedback. Expertiza's modular architecture supports continuous improvement and adaptation to new educational needs.

The current implementation of Expertiza uses Ruby on Rails for both the frontend and backend. The reimplementation of Expertiza adopts a modernized stack, utilizing Ruby on Rails for the backend and TypeScript with React for the frontend.

==Problem Statement==
The goal of this project is to implement the user interface for the "View Submissions" and "Assign Grades" pages for the reimplementation of Expertiza in Typescript and React. This improvement focuses on increasing the efficiency and usability of the grading workflow while ensuring accessibility and robust data handling.

The following tasks outlined as part of this project:

<ol>
<li>Redesigned the "View Submissions" page to display team information and streamline navigation to relevant pages.
<li>Design the "Assign Grades" page to support input validation, error handling, and submission of grades and comments.
<li>Implement backend integration to ensure real-time synchronization with the reimplementation backend APIs.
<li>Implement error handling and improve accessibility across devices.
</ol>

==View Submissions Page==

===UI Design===
The reimplemented "View Submissions" page provides a clear and interactive interface for instructors to manage and review team submissions. Key elements include:

<ul>
<li>Team Details: Displays team names, participants, resource links, and submission history.
<li>Action Links: Includes interactive options such as "Assign Grade" and "History" for each team.
<li>Dynamic Column Widths: Optimized table layout to prevent excessive width by adjusting the links column dynamically.
</ul>

Note that the Submission History page has not yet been implemented in the front-end reimplementation. As such, the History link currently navigates back to the assignment edit page.

===Backend Integration===
The page fetches data from the reimplementation backend and dynamically updates the following details:

<ul>
<li>Assignment information
<li>Team member details
</ul>

Relevant controllers and routes within the reimplementation back end. In consultation with the professor, a list_submissions method was added to the AssignmentsController (assignment_controller.rb) to enable fetching submissions data.

Though links to submitted content is intended to be displayed on the view submissions page, the relevant backend controllers have also not yet been implemented. On the instruction of the professor, retrieval of submission links was omitted for this iteration of the assignment.

===Functionality===
<ul>
<li>Navigation: Clicking the "Assign Grade" link redirects the user to the "Assign Grades" page.
<li>Data Retrieval: On page load, it fetches and displays the required data using backend APIs.
</ul>

==Assign Grades Page==

===UI Design===
The "Assign Grades" page is designed to facilitate accurate and efficient grading. Features include:

<ul>
<li>Team Information: Displays team details, submission summaries, and peer review scores.
<li>Grade Input: Input fields for grades and comments with a submit button.
<li>Error Indicators: Highlights missing peer reviews and incomplete fields.
</ul>

===Backend Integration===
API calls are used to retrieve and update the following data:

<ul>
<li>Submission information
<li>Peer review scores
<li>Missing reviews
</ul>

===Functionality===
<ul>
<li>Grade Submission: Allows instructors to input grades and comments and submit them via API.
<li>Error Handling: Prevents submission if required fields are missing.
</ul>

===Error Handling===
Comprehensive error handling is implemented to manage:

<ul>
<li>Failed API requests
<li>Invalid inputs
<li>Submission errors
</ul>

==Testing==
To log in to the deployed version of the project, use the following credentials:

<ul>
<li>username: instructor6
<li>password: password
</ul>

==Future Improvements==
<ul>
<li>Implement bulk grading functionality for large classes.
<li>Enhance search and filter options for the "View Submissions" page.
<li>Optimize performance with larger datasets.
</ul>

==References==
<ol>
<li>[Expertiza Platform](https://expertiza.ncsu.edu/)
<li>[GitHub Pull Request (Unmerged)](https://github.com/expertiza/reimplementation-front-end/pull/87)
</ol>

CSC/ECE 517 Spring 2025/oss E2521

2025-03-27T18:07:12Z

Mmviola: /* UI Design */

==About Expertiza==
Expertiza is an open-source platform built on the Ruby on Rails framework. It facilitates collaborative learning by allowing instructors to create assignments, manage peer reviews, and track submissions. The platform supports various file formats, including document uploads, URLs, and wiki pages. Students can work in teams, review each other's work, and receive feedback. Expertiza's modular architecture supports continuous improvement and adaptation to new educational needs.

The current implementation of Expertiza uses Ruby on Rails for both the frontend and backend. The reimplementation of Expertiza adopts a modernized stack, utilizing Ruby on Rails for the backend and TypeScript with React for the frontend.

==Problem Statement==
The goal of this project is to implement the user interface for the "View Submissions" and "Assign Grades" pages for the reimplementation of Expertiza in Typescript and React. This improvement focuses on increasing the efficiency and usability of the grading workflow while ensuring accessibility and robust data handling.

The following tasks outlined as part of this project:

<ol>
<li>Redesigned the "View Submissions" page to display team information and streamline navigation to relevant pages.
<li>Design the "Assign Grades" page to support input validation, error handling, and submission of grades and comments.
<li>Implement backend integration to ensure real-time synchronization with the reimplementation backend APIs.
<li>Implement error handling and improve accessibility across devices.
</ol>

==View Submissions Page==

===UI Design===
The reimplemented "View Submissions" page provides a clear and interactive interface for instructors to manage and review team submissions. Key elements include:

<ul>
<li>Team Details: Displays team names, participants, resource links, and submission history.
<li>Action Links: Includes interactive options such as "Assign Grade" and "History" for each team.
<li>Dynamic Column Widths: Optimized table layout to prevent excessive width by adjusting the links column dynamically.
</ul>

Note that the Submission History page has not yet been implemented in the front-end reimplementation. As such, the History link currently navigates back to the assignment edit page.

===Backend Integration===
The page fetches data from the reimplementation backend and dynamically updates the following details:

<ul>
<li>Assignment information
<li>Team member details
</ul>

Relevant controllers and routes within the reimplementation back end. In consultation with the professor, a list_submissions method was added to the AssignmentsController (assignment_controller.rb) to enable fetching submissions data.

Though links to submitted content is intended to be displayed on the view submissions page, the relevant backend controllers have also not yet been implemented. On the instruction of the professor, retrieval of submission links was omitted for this iteration of the assignment.

===Functionality===
<ul>
<li>Navigation: Clicking the "Assign Grade" link redirects the user to the "Assign Grades" page.
<li>Data Retrieval: On page load, it fetches and displays the required data using backend APIs.
</ul>

==Assign Grades Page==

===UI Design===
The "Assign Grades" page is designed to facilitate accurate and efficient grading. Features include:

<ul>
<li>Team Information: Displays team details, submission summaries, and peer review scores.
<li>Grade Input: Input fields for grades and comments with a submit button.
<li>Error Indicators: Highlights missing peer reviews and incomplete fields.
</ul>

===Backend Integration===
API calls are used to retrieve and update the following data:

<ul>
<li>Submission information
<li>Peer review scores
<li>Missing reviews
</ul>

===Functionality===
<ul>
<li>Grade Submission: Allows instructors to input grades and comments and submit them via API.
<li>Error Handling: Prevents submission if required fields are missing.
</ul>

===Error Handling===
Comprehensive error handling is implemented to manage:

<ul>
<li>Failed API requests
<li>Invalid inputs
<li>Submission errors
</ul>

==Future Improvements==
<ul>
<li>Implement bulk grading functionality for large classes.
<li>Enhance search and filter options for the "View Submissions" page.
<li>Optimize performance with larger datasets.
</ul>

==References==
<ol>
<li>[Expertiza Platform](https://expertiza.ncsu.edu/)
<li>[GitHub Pull Request (Unmerged)](https://github.com/expertiza/reimplementation-front-end/pull/87)
</ol>

CSC/ECE 517 Spring 2025/oss E2521

2025-03-27T18:05:03Z

Mmviola: /* Backend Integration */

==About Expertiza==
Expertiza is an open-source platform built on the Ruby on Rails framework. It facilitates collaborative learning by allowing instructors to create assignments, manage peer reviews, and track submissions. The platform supports various file formats, including document uploads, URLs, and wiki pages. Students can work in teams, review each other's work, and receive feedback. Expertiza's modular architecture supports continuous improvement and adaptation to new educational needs.

The current implementation of Expertiza uses Ruby on Rails for both the frontend and backend. The reimplementation of Expertiza adopts a modernized stack, utilizing Ruby on Rails for the backend and TypeScript with React for the frontend.

==Problem Statement==
The goal of this project is to implement the user interface for the "View Submissions" and "Assign Grades" pages for the reimplementation of Expertiza in Typescript and React. This improvement focuses on increasing the efficiency and usability of the grading workflow while ensuring accessibility and robust data handling.

The following tasks outlined as part of this project:

<ol>
<li>Redesigned the "View Submissions" page to display team information and streamline navigation to relevant pages.
<li>Design the "Assign Grades" page to support input validation, error handling, and submission of grades and comments.
<li>Implement backend integration to ensure real-time synchronization with the reimplementation backend APIs.
<li>Implement error handling and improve accessibility across devices.
</ol>

==View Submissions Page==

===UI Design===
The updated "View Submissions" page provides a clear and interactive interface for instructors to manage and review team submissions. Key elements include:

<ul>
<li>Team Details: Displays team names, participants, resource links, and submission history.
<li>Action Links: Includes interactive options such as "Assign Grade" and "History" for each team.
<li>Dynamic Column Widths: Optimized table layout to prevent excessive width by adjusting the links column dynamically.
</ul>

===Backend Integration===
The page fetches data from the reimplementation backend and dynamically updates the following details:

<ul>
<li>Assignment information
<li>Team member details
</ul>

Relevant controllers and routes within the reimplementation back end. In consultation with the professor, a list_submissions method was added to the AssignmentsController (assignment_controller.rb) to enable fetching submissions data.

Though links to submitted content is intended to be displayed on the view submissions page, the relevant backend controllers have also not yet been implemented. On the instruction of the professor, retrieval of submission links was omitted for this iteration of the assignment.

===Functionality===
<ul>
<li>Navigation: Clicking the "Assign Grade" link redirects the user to the "Assign Grades" page.
<li>Data Retrieval: On page load, it fetches and displays the required data using backend APIs.
</ul>

==Assign Grades Page==

===UI Design===
The "Assign Grades" page is designed to facilitate accurate and efficient grading. Features include:

<ul>
<li>Team Information: Displays team details, submission summaries, and peer review scores.
<li>Grade Input: Input fields for grades and comments with a submit button.
<li>Error Indicators: Highlights missing peer reviews and incomplete fields.
</ul>

===Backend Integration===
API calls are used to retrieve and update the following data:

<ul>
<li>Submission information
<li>Peer review scores
<li>Missing reviews
</ul>

===Functionality===
<ul>
<li>Grade Submission: Allows instructors to input grades and comments and submit them via API.
<li>Error Handling: Prevents submission if required fields are missing.
</ul>

===Error Handling===
Comprehensive error handling is implemented to manage:

<ul>
<li>Failed API requests
<li>Invalid inputs
<li>Submission errors
</ul>

==Future Improvements==
<ul>
<li>Implement bulk grading functionality for large classes.
<li>Enhance search and filter options for the "View Submissions" page.
<li>Optimize performance with larger datasets.
</ul>

==References==
<ol>
<li>[Expertiza Platform](https://expertiza.ncsu.edu/)
<li>[GitHub Pull Request (Unmerged)](https://github.com/expertiza/reimplementation-front-end/pull/87)
</ol>