Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Fall 2023 - E2385. Create a Courses User interface in ReactJS

2023-12-04T16:26:35Z

Sboorla:

== About ==
The page will display a comprehensive list of courses, showcasing essential details like course name, institution name, creation and update dates, along with associated actions.

Each course will provide information about assignments and relevant actions. The goal is to design an intuitive and interactive interface for users to easily navigate and manage course-related information.

==Design==

This is the main page that allows the user to manage course information. All the other pages like manage questionnaires and manage assignments can be accessed from this page. The consolidated accessibility of these features in a singular location eliminates the need for users to navigate through multiple menus or pages, resulting in a more efficient and streamlined process for managing course content. It will display a table with course details such as name, institution, creation date, updated date and actions. There will be a plus icon button above the top right corner of the table to create a course and for each course, there are several buttons such as edit, delete and duplicate.

The Manage Courses page:

[[File:Manage_Courses_1.PNG | 1000px]]

When the user clicks on any course in the table, they will see all the information related to the course including assignment name, institution, creation date, updated date and actions.

[[File:Manage_Courses_2.PNG | 1000px]]

When the user clicks on edit action for a particular row, a modal with existing row information is displayed.

[[File:Manage_Courses_3.PNG | 1000px]]

When the user clicks on delete action for a particular row, an alert confirming whether the user wants to move forward with the deletion is displayed.

[[File:Manage_Courses_4.PNG | 1000px]]

When the user clicks on copy action for a particular row, the information for that row is duplicated and added in the row below the existing row.

[[File:Manage_Courses_5.PNG | 1000px]]

==Files Modified==
* [https://github.com/shreyavaidya2311/reimplementation-front-end/blob/main/src/App.tsx src/App.tsx]
* [https://github.com/shreyavaidya2311/reimplementation-front-end/blob/main/src/pages/Manage/Courses.jsx src/pages/Manage/Courses.jsx]
* [https://github.com/shreyavaidya2311/reimplementation-front-end/blob/main/src/pages/Manage/utils/Tooltip.jsx src/pages/Manage/utils/Tooltip.jsx]
* [https://github.com/shreyavaidya2311/reimplementation-front-end/blob/main/src/pages/Manage/utils/Modal.jsx src/pages/Manage/utils/Modal.jsx]
* [https://github.com/shreyavaidya2311/reimplementation-front-end/blob/main/src/pages/Manage/utils/data.js src/pages/Manage/utils/data.js]
* [https://github.com/shreyavaidya2311/reimplementation-front-end/blob/main/tsconfig.json tsconfig.json]

==Components==

'''Courses.jsx'''

It is a React component that defines a course management interface.

''State Management:''

* The component uses the useState hook to manage various state variables, including tableData, innerrowData, showModal, showInnerModal, editRowData, editInnerRowData, editedData, editedRowIndex, and editedInnerRowIndex.
Navigation:

* The useNavigate hook is utilized for programmatic navigation.

''Theme Styling:''

* The component uses the Material-UI library and defines a custom theme using the createTheme function.

''Modal Handling:''

* The component utilizes two custom modal components (EditModal) for editing course data and inner data.

''Table Configuration:''

* The component configures a Material-UI DataTable (MUIDataTable) to display the course data.

* Custom styling is applied to the DataTable and its cells using the custom theme.

''Data Operations:''

* There are functions to handle editing, saving edits, and closing the modals.

* Functions for handling input changes in the edit modals (handleInputChange, handleInnerInputChange).

* Functions for copying rows (handleCopy, handleCopy_inner) and deleting rows (handleDelete, handleDelete_inner).

* Functions for handling various actions related to courses and inner data.

''Rendering:''

* The component renders a container (Container) with a heading, a button for adding a new course, and two instances of the EditModal component.

* The DataTable is rendered inside a centered container, and the theme is applied to it.

''Actions:''

* The component defines actions for each row in the table, including editing, deleting, copying, and performing other specific actions.

''Nested Table:''

* The DataTable has an expandable feature to display additional details (inner data) for each course.

''Icons:''

* Various icons from React-icons and local assets are used for actions and tooltips.

'''Modal.jsx'''

The EditModal component is a modal used for editing rows in the course management interface.

''Bootstrap Components:''

* The component imports various Bootstrap components, including Button, Col, Container, Modal, Row, and Form.

''Modal Structure:''

* The component renders a Bootstrap Modal component with a title ("Edit Row").

* The modal has a close button in the header.

''Form Inputs:''

* The modal contains a Form with several Form.Group components.

* Each Form.Group represents a different field (Name, Institution, Creation Date, Updated Date).

* Each field has a corresponding Form.Control input element.

* The defaultValue attribute is set based on the values of the corresponding row data from the props.editRowData.

''Input Change Handlers:''

* The onChange event of each Form.Control input is connected to a corresponding props.handleInputChange function, passing the event and the index of the field.

''Modal Footer:''

* The modal has a footer containing two buttons: "Close" and "Save Changes."

* Clicking the "Close" button triggers the props.handleCloseModal function.

* Clicking the "Save Changes" button triggers the props.handleSaveEdit function.

''Dynamic Content:''

* The content of the modal is dynamically populated with data from the props.editRowData, allowing for the editing of course details.

''Integration with Parent Component:''

* The modal receives various props from its parent component (showModal, handleCloseModal, handleSaveEdit, handleInputChange, editRowData).

* These props are used to control the modal's visibility, handle actions, and manage the data being edited.

'''Tooltip.jsx'''

''Imported Libraries:''

* The component imports React, the Tooltip component from the Material-UI library (@mui/material/Tooltip), and a Bootstrap Button.

''Component Structure:''

* The component renders a Tooltip component from Material-UI, wrapping around a Bootstrap Button.

* The Tooltip component displays a tooltip with a title provided via the props.title attribute.

''Button Styling:''

* The Bootstrap Button is styled with inline CSS to have specific padding, color, background color, and no border.

''Event Handling:''

* The onClick event of the button is connected to a function (props.handler) that is passed via the props object.

* The function is called with parameters props.rowData and props.index when the button is clicked.

''Image Display:''

* Inside the button, there's an img element displaying an image sourced from the URL provided in props.src. The image has a fixed width and height.

''Dynamic Content:''

* The content of the button, including the image and tooltip, is dynamic and depends on the props passed to the component.

''Integration with Parent Component:''

* The component receives various props (key, title, handler, rowData, index, src, alt) from its parent component.

* These props are used to customize the appearance, behavior, and content of the button with the tooltip.

==Design Patterns==

'''Composite Design Pattern:'''

* The Composite Design Pattern is a structural pattern in software design that allows you to compose objects into tree-like structures to represent part-whole hierarchies. In the context of React, this pattern can be applied when creating complex components by nesting and composing simpler components together.

* In the scenario of building a Course component, you can use the Composite Design Pattern to structure it as a composition of smaller components like Table, Modal, and others. For example, the Course component may consist of a Table component to display course information, a Modal component for additional details, and potentially other components for various functionalities.

* This approach promotes a modular and scalable architecture, making it easier to manage and extend the functionality of your application.

'''DRY Principle:'''

* DRY, which stands for "Don't Repeat Yourself," is a software development principle that encourages the reduction of redundancy in code. In the context of React, one of the significant advantages is the ability to create reusable components.

* By adhering to the DRY Principle in React development, you leverage the component-based architecture to create modular, self-contained components. For example, if you have a Table component that displays data, you can reuse it across different parts of your application without duplicating code.

* This not only improves code maintainability but also enhances the consistency of your application, as changes made to a reusable component automatically reflect across all instances where it's used.

'''Provider Pattern:'''

* The Provider Pattern in React is closely associated with the Context API. It allows you to share data, such as state or configuration, across the component tree without passing props explicitly at each level.

* By using the Provider Pattern, you can create a central point (a provider) that holds and provides the necessary data to the components in its subtree. This eliminates the need to pass props through each intermediate component manually.

* For instance, if your application has a theme configuration, you can use the Provider Pattern to set the theme at the top level of your component tree, and all components within that tree can access and apply the theme without explicit prop passing.

'''Observer Pattern:'''

* In React, the Observer Pattern can be implemented using the Context API along with hooks like useEffect and useState. The Observer Pattern involves a subject (observable) and observers. When the state of the subject changes, all observers are notified and updated accordingly.

* In React, the subject can be represented by the state held in a context provider, and components that consume this context become observers. The useEffect hook allows components to react to changes in the observed state, and useState is used to manage local state within components.

* This pattern is particularly useful for scenarios where multiple components need to react to changes in a shared state, such as updating UI elements when data is fetched or modified.

'''HOC Pattern:'''

* The Higher-Order Component (HOC) Pattern is a design pattern in React where a function takes a component and returns a new component with additional features or props. It's a way to reuse component logic.

* For example, you might create an HOC that adds routing capabilities to a component. This HOC can handle the navigation logic and provide routing-related props to the wrapped component. This allows you to reuse the same routing logic across different parts of your application.

* HOCs enhance code modularity and reusability by encapsulating specific functionalities in separate functions, making it easier to manage and extend the capabilities of your components.

==Test plan==
We will be testing the pages manually.

We will have to ensure that the view of this appears properly, with all the necessary options for each course. We will have to also make sure that the details are displayed in table format as shown in the figure. The search bar, sort page and other options should also be verified accordingly.

1. Verify that the search option appears in the proper position and add a button to search.

2. Check that the search functionality works properly where it can search for words from all the columns.

3. Verify that the table is populated with correct data. We will be displaying hard-coded data to check this functionality.

4. Verify if the checkbox to include other items is working correctly.

5. Verify that the details of a course are displayed when clicking on a row in the table.

6. Verify if the sorting functionality is working for each column.

7. Verify whether the details of the icon are visible when hovering over each icon in the row.

The test results are presented in [https://www.youtube.com/watch?v=juo7aEv9Ax0 Demo Link]

==Important links==
*[https://www.youtube.com/watch?v=juo7aEv9Ax0 Demo Link]
*[https://github.com/shreyavaidya2311/reimplementation-front-end Git Repository]
*[https://github.com/expertiza/reimplementation-front-end/pull/26 Pull request]

==Team==
=====Mentor=====
* Kartiki Bhandakkar

=====Members=====
* Shreya Vaidya <svaidya6@ncsu.edu>
* Shonil Bhide <sbhide@ncsu.edu>
* Subhang Boorlagadda <sboorla@ncsu.edu>

CSC/ECE 517 Fall 2023 - E2385. Create a Courses User interface in ReactJS

2023-11-15T18:00:50Z

Sboorla:

File:Courses ui1.png

2023-11-15T17:58:05Z

Sboorla:

File:Courses ui.png

2023-11-15T17:57:46Z

Sboorla:

CSC/ECE 517 Fall 2023

2023-11-15T17:38:33Z

Sboorla:

* [[CSC/ECE 517 Fall 2023 - E2350. Allow reviewers to bid on what to review]]
* [[CSC/ECE 517 Fall 2023 - E2351. Finish mentor management for assignments without topics]]
* [[CSC/ECE 517 Fall 2023 - E2352. Fix "Back" link on “New Late Policy” page]]
* [[CSC/ECE 517 Fall 2023 - E2353. Further refactoring and improvement of review mapping helper]]
* [[CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza]]
* [[CSC/ECE 517 Fall 2023 - E2356. Refactor review_mapping_controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2357. Refactor sign_up_sheet_controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2358. Refactor student_quizzes_controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2359. Refactor user_controller.rb, user.rb, and its child classes]]
* [[CSC/ECE 517 Fall 2023 - E2360. View for Results of Bidding]]
* [[CSC/ECE 517 Fall 2023 - E2361. Create a page to create and update a Questionnaire in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2362. Create a page to edit an Assignment's due date in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2363. Create a UI for Assignment Edit page "Etc" tab in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2364. Create a UI for Course's & Assignment's "Add Participants" page]]
* [[CSC/ECE 517 Fall 2023 - E2365. Create a user interface for Questionnaire in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2363. Create a UI for Assignment Edit page "Etc" tab in ReactJS(Phase 2)]]
* [[CSC/ECE 517 Fall 2023 - E2366. Reimplement assignment model and assignment controller]]
* [[CSC/ECE 517 Fall 2023 - E2367. Reimplement participants_controller.rb, participants.rb and its child classes]]
* [[CSC/ECE 517 Fall 2023 - E2368. Reimplement of due_date.rb]]
* [[CSC/ECE 517 Fall 2023 - E2369. Reimplement duties controller.rb and badges controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2370. Reimplement join team requests controller]]
* [[CSC/ECE 517 Fall 2023 - E2371. Reimplement quiz_questionnaires_controller]]
* [[CSC/ECE 517 Fall 2023 - E2373. Reimplementation of teams controller]]
* [[CSC/ECE 517 Fall 2023 - E2374. Reimplement the Question hierarchy]]
* [[CSC/ECE 517 Fall 2023 - E2375. Reimplement Waitlists]]
* [[CSC/ECE 517 Fall 2023 - E2376. Reimplement student_quizzes_controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2379. Reimplement authorization_helper.rb]]
* [[CSC/ECE 517 Fall 2023 - E2380. Reimplement frontend for Courses]]
* [[CSC/ECE 517 Fall 2023 - E2382. Optimizing the LatePoliciesController]]
* [[CSC/ECE 517 Fall 2023 - E2383. Grading Audit Trail]]
* [[CSC/ECE 517 Fall 2023 - E2384. Reimplement user_controller.rb, user.rb and its child classes]]
* [[CSC/ECE 517 Fall 2023 - E2385. Create a Courses User interface in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2377. Reimplement impersonating users (functionality within impersonate_controller.rb)]]
* [[CSC/ECE 517 Fall 2023 - NTX-2 Observability and Debuggability]]
* [[CSC/ECE 517 Fall 2023 - NTX-3 Usability and Security]]
* [[CSC/ECE 517 Fall 2023 - NTX-4 Extend NDB Operator capabilities to support Postgres HA]]
* [[CSC/ECE 517 Fall 2023 - G2350. Add GitLab support for using GraphQL to query user metrics 1]]
* [[CSC/ECE 517 Fall 2023 - G2352. Add GitLab support for using GraphQL to query repository information]]

CSC/ECE 517 Fall 2023 - E2385. Create a Courses User interface in ReactJS

2023-11-15T17:30:46Z

Sboorla: Created page with "== About == The page will display a comprehensive list of courses, showcasing essential details like course name, institution name, creation and update dates, along with assoc..."

CSC/ECE 517 Fall 2023 - E2361. Create a page to create and update a Questionnaire in ReactJS

2023-10-30T18:05:53Z

Sboorla:

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is a [http://rubyonrails.org/ Ruby on Rails] based open source project. Instructors have the ability to add new projects, assignments, etc., as well as edit existing ones. Later on, they can view student submissions and grade them. Students can also use Expertiza to organize into teams to work on different projects and assignments and submit their work. They can also review other students' submissions.

==Problem Statement==
The current user interface for the page that encompasses Questionnaire metadata and associated Questions presents several usability and functionality issues. To enhance the user experience and streamline the interface, the following problems need to be addressed:

For the Questionnaire Metadata Section:

#The current layout displays fields in a row format, which is not user-friendly. All fields (Min Score, Max Score, and Private) should be arranged in a single column for improved clarity and usability.
#Min Score and Max Score inputs should only accept numerical values to ensure data integrity and prevent incorrect data entry.
#The "Is this Review private" field, currently presented as a dropdown, should be converted into a checkbox for a more intuitive and straightforward selection.
For the Associated Questions Section:
#The process of adding a new question involves an unnecessary sequence of input fields, including an "Add" button. This should be simplified by placing the "Add" button at the bottom of the list of available questions for a more streamlined user experience.
#The "Remove" button for each question should be relocated to the end of the row to avoid accidental deletion and enhance the user interface's consistency.
#The "Seq" field, which represents the sequence of questions, should be disabled for editing to prevent unintentional changes.
#The "Type" field should be transformed into a dropdown menu, allowing users to select the question type during the question creation process.
#The "Weight" field should only accept numeric values to ensure data accuracy and prevent incorrect data entry.
#The alignment of the "Edit/View Advice" button needs to be adjusted for improved visual consistency.
#The "Edit/View Advice" page can remain as it is, without any significant changes.
#The "Import" and "Export" buttons at the bottom of the page should trigger a modal dialog instead of opening a new page, as referenced in UserEditor.tsx of the repository.
#The Import and Export functionalities should handle data in the required format, without the need to add data to the backend. This simplifies data management and improves overall usability.
#It is also suggested to remove the "Add question weight" button as it does not serve a practical purpose, and the "text area size" field should be pre-populated with default values (e.g., 80 and 1) to enhance user convenience.

== Database ==

Since we do not have a database to implement in the reimplementation_front_end GitHub repo, we had to mock the databases and the API.
Firstly, we created a new JSON object.
For these we created a dictionary having the relevant data and appropriate structure.
We added dummy data for each question and passed this list of dictionary to our front-end application.

The structure is as follows:

[[File:Screenshot 2023-10-30 133028.png]]

== Tasks that were accomplished:==
 Part 1
#Created a UI Page for editing Questionnaire
#All the fields should be are displayed in row format instead of column format as is the case in the old UI (Min Score, Max Score, and Private)
#Min Score, Max Score can now only be numbers
#Review private field is now a checkbox instead of dropdown.

Part 2
#Add button is now at the bottom of the questionnaire
#Remove button for a Question is now at the end of that row and not at the start
#Seq field is now disabled for edit
#Type field is now a dropdown and the user can select the type while creating the Question
#Weight field is now numeric
#Edit/View Advice button is now aligned properly
#Edit/View Advice page is as it is.
#Import and Export buttons at the bottom now display a Modal instead of showing a new page.
#Import and Export functionality now get or export the data in a format that is required.

==Features Implemented==

Added a new option in manage tab to route the user to our edit questionnaire page.
 
[[File:EditQuestionnaire_link.PNG|1000px|Image : 1000 pixels]]
 
Implemented the UI according to requirements given under task 1:
 
[[File:EditQuestionnaire_section1.PNG|1000px|Image : 1000 pixels]]
 
Tmplemented the UI according to rquirements given under task 2:
 
[[File:EditQuestionnaire_section2.PNG|1000px|Image : 1000 pixels]]
 
[[File:EditQuestionnaire_section3.PNG|1000px|Image : 1000 pixels]]
 
Implemented import modal:
 
[[File:EditQuestionnaire_import.PNG|1000px|Image : 1000 pixels]]
 
Implemented export modal:
 
[[File:EditQuestionnaire_export.PNG|1000px|Image : 1000 pixels]]
 
The final implementation :
 
[[File:EditQuestionnaire_full.PNG|1000px|Image : 1000 pixels]]
 
==Team==
=====Mentor=====
* Kartiki Bhandakkar

=====Members=====
* Shreya Vaidya <svaidya6@ncsu.edu>
* Shonil Bhide <sbhide@ncsu.edu>
* Subhang Boorlagadda <sboorla@ncsu.edu>

==Important links==
*[https://github.com/subhang51011/reimplementation-front-end Git Repository]
*[https://github.com/expertiza/reimplementation-front-end/pull/22 Pull request]

==References==

*[https://github.com/expertiza/reimplementation-front-end/issues/11 Project Instructions]

CSC/ECE 517 Fall 2023 - E2361. Create a page to create and update a Questionnaire in ReactJS

2023-10-30T17:56:55Z

Sboorla:

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is a [http://rubyonrails.org/ Ruby on Rails] based open source project. Instructors have the ability to add new projects, assignments, etc., as well as edit existing ones. Later on, they can view student submissions and grade them. Students can also use Expertiza to organize into teams to work on different projects and assignments and submit their work. They can also review other students' submissions.

==Problem Statement==
The current user interface for the page that encompasses Questionnaire metadata and associated Questions presents several usability and functionality issues. To enhance the user experience and streamline the interface, the following problems need to be addressed:

For the Questionnaire Metadata Section:

#The current layout displays fields in a row format, which is not user-friendly. All fields (Min Score, Max Score, and Private) should be arranged in a single column for improved clarity and usability.
#Min Score and Max Score inputs should only accept numerical values to ensure data integrity and prevent incorrect data entry.
#The "Is this Review private" field, currently presented as a dropdown, should be converted into a checkbox for a more intuitive and straightforward selection.
For the Associated Questions Section:
#The process of adding a new question involves an unnecessary sequence of input fields, including an "Add" button. This should be simplified by placing the "Add" button at the bottom of the list of available questions for a more streamlined user experience.
#The "Remove" button for each question should be relocated to the end of the row to avoid accidental deletion and enhance the user interface's consistency.
#The "Seq" field, which represents the sequence of questions, should be disabled for editing to prevent unintentional changes.
#The "Type" field should be transformed into a dropdown menu, allowing users to select the question type during the question creation process.
#The "Weight" field should only accept numeric values to ensure data accuracy and prevent incorrect data entry.
#The alignment of the "Edit/View Advice" button needs to be adjusted for improved visual consistency.
#The "Edit/View Advice" page can remain as it is, without any significant changes.
#The "Import" and "Export" buttons at the bottom of the page should trigger a modal dialog instead of opening a new page, as referenced in UserEditor.tsx of the repository.
#The Import and Export functionalities should handle data in the required format, without the need to add data to the backend. This simplifies data management and improves overall usability.
#It is also suggested to remove the "Add question weight" button as it does not serve a practical purpose, and the "text area size" field should be pre-populated with default values (e.g., 80 and 1) to enhance user convenience.

== Database ==

Since we do not have a database to implement in the reimplementation_front_end GitHub repo, we had to mock the databases and the API.
Firstly, we created a new JSON object.
For these we created a dictionary having the relevant data and appropriate structure.
We added dummy data for each question and passed this list of dictionary to our front-end application.

The structure is as follows:

[[File:Screenshot 2023-10-30 133028.png]]

== Tasks that were accomplished:==
 Part 1
#Created a UI Page for editing Questionnaire
#All the fields should be are displayed in row format instead of column format as is the case in the old UI (Min Score, Max Score, and Private)
#Min Score, Max Score can now only be numbers
#Review private field is now a checkbox instead of dropdown.

Part 2
#Add button is now at the bottom of the questionnaire
#Remove button for a Question is now at the end of that row and not at the start
#Seq field is now disabled for edit
#Type field is now a dropdown and the user can select the type while creating the Question
#Weight field is now numeric
#Edit/View Advice button is now aligned properly
#Edit/View Advice page is as it is.
#Import and Export buttons at the bottom now display a Modal instead of showing a new page.
#Import and Export functionality now get or export the data in a format that is required.

==Features Implemented==

Added a new option in manage tab to route the user to our edit questionnaire page.
[[File:EditQuestionnaire_link.PNG]]
 
Implemented the UI according to requirements given under task 1:
[[File:EditQuestionnaire_section1.PNG]]
 
Tmplemented the UI according to rquirements given under task 2:
[[File:EditQuestionnaire_section2.PNG]]
 
[[File:EditQuestionnaire_section3.PNG]]
 

Implemented import modal:
[[File:EditQuestionnaire_import.PNG]]

Implemented export modal:
[[File:EditQuestionnaire_export.PNG]]

==Team==
=====Mentor=====
* Kartiki Bhandakkar

=====Members=====
* Shreya Vaidya <svaidya6@ncsu.edu>
* Shonil Bhide <sbhide@ncsu.edu>
* Subhang Boorlagadda <sboorla@ncsu.edu>

==References==

*[https://github.com/expertiza/reimplementation-front-end/issues/11 Project Instructions]

CSC/ECE 517 Fall 2023 - E2361. Create a page to create and update a Questionnaire in ReactJS

2023-10-30T17:55:50Z

Sboorla:

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is a [http://rubyonrails.org/ Ruby on Rails] based open source project. Instructors have the ability to add new projects, assignments, etc., as well as edit existing ones. Later on, they can view student submissions and grade them. Students can also use Expertiza to organize into teams to work on different projects and assignments and submit their work. They can also review other students' submissions.

==Problem Statement==
The current user interface for the page that encompasses Questionnaire metadata and associated Questions presents several usability and functionality issues. To enhance the user experience and streamline the interface, the following problems need to be addressed:

For the Questionnaire Metadata Section:

#The current layout displays fields in a row format, which is not user-friendly. All fields (Min Score, Max Score, and Private) should be arranged in a single column for improved clarity and usability.
#Min Score and Max Score inputs should only accept numerical values to ensure data integrity and prevent incorrect data entry.
#The "Is this Review private" field, currently presented as a dropdown, should be converted into a checkbox for a more intuitive and straightforward selection.
For the Associated Questions Section:
#The process of adding a new question involves an unnecessary sequence of input fields, including an "Add" button. This should be simplified by placing the "Add" button at the bottom of the list of available questions for a more streamlined user experience.
#The "Remove" button for each question should be relocated to the end of the row to avoid accidental deletion and enhance the user interface's consistency.
#The "Seq" field, which represents the sequence of questions, should be disabled for editing to prevent unintentional changes.
#The "Type" field should be transformed into a dropdown menu, allowing users to select the question type during the question creation process.
#The "Weight" field should only accept numeric values to ensure data accuracy and prevent incorrect data entry.
#The alignment of the "Edit/View Advice" button needs to be adjusted for improved visual consistency.
#The "Edit/View Advice" page can remain as it is, without any significant changes.
#The "Import" and "Export" buttons at the bottom of the page should trigger a modal dialog instead of opening a new page, as referenced in UserEditor.tsx of the repository.
#The Import and Export functionalities should handle data in the required format, without the need to add data to the backend. This simplifies data management and improves overall usability.
#It is also suggested to remove the "Add question weight" button as it does not serve a practical purpose, and the "text area size" field should be pre-populated with default values (e.g., 80 and 1) to enhance user convenience.

== Database ==

Since we do not have a database to implement in the reimplementation_front_end GitHub repo, we had to mock the databases and the API.
Firstly, we created a new JSON object.
For these we created a dictionary having the relevant data and appropriate structure.
We added dummy data for each question and passed this list of dictionary to our front-end application.

The structure is as follows:

[[File:Screenshot 2023-10-30 133028.png]]

== Tasks that were accomplished:==
 Part 1
#Created a UI Page for editing Questionnaire
#All the fields should be are displayed in row format instead of column format as is the case in the old UI (Min Score, Max Score, and Private)
#Min Score, Max Score can now only be numbers
#Review private field is now a checkbox instead of dropdown.

Part 2
#Add button is now at the bottom of the questionnaire
#Remove button for a Question is now at the end of that row and not at the start
#Seq field is now disabled for edit
#Type field is now a dropdown and the user can select the type while creating the Question
#Weight field is now numeric
#Edit/View Advice button is now aligned properly
#Edit/View Advice page is as it is.
#Import and Export buttons at the bottom now display a Modal instead of showing a new page.
#Import and Export functionality now get or export the data in a format that is required.

==Features Implemented==

Added a new option in manage tab to route the user to our edit questionnaire page.
[[File:EditQuestionnaire_link.PNG]]
 
Implemented the UI according to requirements given under task 1:
[[File:EditQuestionnaire_section1.PNG]]
 
Tmplemented the UI according to rquirements given under task 2:
[[File:EditQuestionnaire_section2.PNG]]
 
[[File:EditQuestionnaire_section3.PNG]]
 

Implemented import modal:
[[File:EditQuestionnaire_import.PNG]]

Implemented export modal:
[[File:EditQuestionnaire_export.PNG]]

==Team==
=====Mentor=====
* Kartiki Bhandakkar

=====Members=====
* Shreya Vaidya <svaidya6@ncsu.edu>
* Shonil Bhide <sbhide@ncsu.edu>
* Subhang Boorlagadda <sboorla@ncsu.edu>

==References==

*[https://github.com/expertiza/reimplementation-front-end/issues/11]

CSC/ECE 517 Fall 2023 - E2361. Create a page to create and update a Questionnaire in ReactJS

2023-10-30T17:47:37Z

Sboorla:

CSC/ECE 517 Fall 2023 - E2361. Create a page to create and update a Questionnaire in ReactJS

2023-10-30T17:43:43Z

Sboorla:

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is a [http://rubyonrails.org/ Ruby on Rails] based open source project. Instructors have the ability to add new projects, assignments, etc., as well as edit existing ones. Later on, they can view student submissions and grade them. Students can also use Expertiza to organize into teams to work on different projects and assignments and submit their work. They can also review other students' submissions.

==Problem Statement==
The current user interface for the page that encompasses Questionnaire metadata and associated Questions presents several usability and functionality issues. To enhance the user experience and streamline the interface, the following problems need to be addressed:

For the Questionnaire Metadata Section:

The current layout displays fields in a row format, which is not user-friendly. All fields (Min Score, Max Score, and Private) should be arranged in a single column for improved clarity and usability.

Min Score and Max Score inputs should only accept numerical values to ensure data integrity and prevent incorrect data entry.

The "Is this Review private" field, currently presented as a dropdown, should be converted into a checkbox for a more intuitive and straightforward selection.

For the Associated Questions Section:
The process of adding a new question involves an unnecessary sequence of input fields, including an "Add" button. This should be simplified by placing the "Add" button at the bottom of the list of available questions for a more streamlined user experience.

The "Remove" button for each question should be relocated to the end of the row to avoid accidental deletion and enhance the user interface's consistency.

The "Seq" field, which represents the sequence of questions, should be disabled for editing to prevent unintentional changes.

The "Type" field should be transformed into a dropdown menu, allowing users to select the question type during the question creation process.

The "Weight" field should only accept numeric values to ensure data accuracy and prevent incorrect data entry.

The alignment of the "Edit/View Advice" button needs to be adjusted for improved visual consistency.

The "Edit/View Advice" page can remain as it is, without any significant changes.

The "Import" and "Export" buttons at the bottom of the page should trigger a modal dialog instead of opening a new page, as referenced in UserEditor.tsx of the repository.

The Import and Export functionalities should handle data in the required format, without the need to add data to the backend. This simplifies data management and improves overall usability.

Additionally, it is suggested to remove the "Add question weight" button as it does not serve a practical purpose, and the "text area size" field should be pre-populated with default values (e.g., 80 and 1) to enhance user convenience. Finally, while addressing these issues, creativity can be exercised in redesigning the user interface, provided that it remains simple and easy to navigate.

== Database ==

Since we do not have a database to implement in the reimplementation_front_end GitHub repo, we had to mock the databases and the API.
Firstly, we created a new JSON object.
For these we created a dictionary having the relevant data and appropriate structure.
We added dummy data for each question and passed this list of dictionary to our front-end application.

The structure is as follows:

[[File:Screenshot 2023-10-30 133028.png]]

== Tasks that were accomplished:==
 Part 1
#Created a UI Page for editing Questionnaire
#All the fields should be are displayed in row format instead of column format as is the case in the old UI (Min Score, Max Score, and Private)
#Min Score, Max Score can now only be numbers
#Review private field is now a checkbox instead of dropdown.

Part 2
#Add button is now at the bottom of the questionnaire
#Remove button for a Question is now at the end of that row and not at the start
#Seq field is now disabled for edit
#Type field is now a dropdown and the user can select the type while creating the Question
#Weight field is now numeric
#Edit/View Advice button is now aligned properly
#Edit/View Advice page is as it is.
#Import and Export buttons at the bottom now display a Modal instead of showing a new page.
#Import and Export functionality now get or export the data in a format that is required.

CSC/ECE 517 Fall 2023 - E2361. Create a page to create and update a Questionnaire in ReactJS

2023-10-30T17:39:43Z

Sboorla:

CSC/ECE 517 Fall 2023 - E2361. Create a page to create and update a Questionnaire in ReactJS

2023-10-30T17:39:24Z

Sboorla:

CSC/ECE 517 Fall 2023 - E2361. Create a page to create and update a Questionnaire in ReactJS

2023-10-30T17:37:36Z

Sboorla:

CSC/ECE 517 Fall 2023 - E2361. Create a page to create and update a Questionnaire in ReactJS

2023-10-30T17:33:29Z

Sboorla:

CSC/ECE 517 Fall 2023 - E2361. Create a page to create and update a Questionnaire in ReactJS

2023-10-30T17:33:00Z

Sboorla:

CSC/ECE 517 Fall 2023 - E2361. Create a page to create and update a Questionnaire in ReactJS

2023-10-30T17:21:41Z

Sboorla: Created page with "==Expertiza== [http://expertiza.ncsu.edu/ Expertiza] is a [http://rubyonrails.org/ Ruby on Rails] based open source project. Instructors have the ability to add new projects,..."

CSC/ECE 517 Fall 2023/E2361.Create a page to create and update a Questionnaire in ReactJS

2023-10-30T17:17:09Z