Expertiza_Wiki - User contributions [en]

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

2023-11-15T23:34:14Z

Sbhide: /* Test plan */

== 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:Courses_ui.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:courses_ui1.png | 1000px]]

==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.

==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-15T23:33:40Z

Sbhide: /* Test plan */

== 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:Courses_ui.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:courses_ui1.png | 1000px]]

==Test plan==
We tested 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.

==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 - E2361. Create a page to create and update a Questionnaire in ReactJS

2023-11-07T01:29:26Z

Sbhide:

==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|500px|Image : 500 pixels]]

== 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|600px|Image : 600 pixels]]
 
Implemented the UI according to requirements given under task 2:
 
[[File:EditQuestionnaire_section2.PNG|800px|Image : 800 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]]
 

== Test Plan ==
We tested the pages manually.

=====Edit Questionnaire=====
We will have to ensure that view of this appears properly, with all the necessary options for the questionnaire. We will have to also make sure that the details are displayed in table format as shown in the figure. The import / export questionnaire and other options should also be verified accordingly.

# Verify that the import questionnaire modal is displayed when the user clicks on the "Import Questionnaire" link in the bottom left corner.
# Verify that the export questionnaire modal is displayed when the user clicks on the "Export Questionnaire" link in the bottom left corner.
# Verify that the import questionnaire modal closes after clicking on cross icon button in the modal.
# Verify that the export questionnaire modal closes after clicking on cross icon button in the modal.

==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-11-07T01:27:26Z

Sbhide:

==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|500px|Image : 500 pixels]]

== 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|600px|Image : 600 pixels]]
 
Implemented the UI according to requirements given under task 2:
 
[[File:EditQuestionnaire_section2.PNG|800px|Image : 800 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]]
 

== TestPlan ==
We tested the pages manually.

Edit Questionnaire
We will have to ensure that view of this appears properly, with all the necessary options for the questionnaire. We will have to also make sure that the details are displayed in table format as shown in the figure. The import / export questionnaire and other options should also be verified accordingly.

# Verify that the import questionnaire modal is displayed when the user clicks on the "Import Questionnaire" link in the bottom left corner.
# Verify that the export questionnaire modal is displayed when the user clicks on the "Export Questionnaire" link in the bottom left corner.
# Verify that the import questionnaire modal closes after clicking on cross icon button in the modal.
# Verify that the export questionnaire modal closes after clicking on cross icon button in the modal.

==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-11-07T01:26:31Z

Sbhide:

==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|500px|Image : 500 pixels]]

== 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|600px|Image : 600 pixels]]
 
Implemented the UI according to requirements given under task 2:
 
[[File:EditQuestionnaire_section2.PNG|800px|Image : 800 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]]
 

== TestPlan ==
We tested the pages manually.

Edit Questionnaire
We will have to ensure that view of this appears properly, with all the necessary options for the questionnaire. We will have to also make sure that the details are displayed in table format as shown in the figure. The import / export questionnaire and other options should also be verified accordingly.

1. Verify that the import questionnaire modal is displayed when the user clicks on the "Import Questionnaire" link in the bottom left corner.
2. Verify that the export questionnaire modal is displayed when the user clicks on the "Export Questionnaire" link in the bottom left corner.
3. Verify that the import questionnaire modal closes after clicking on cross icon button in the modal.
4. Verify that the export questionnaire modal closes after clicking on cross icon button in the modal.

==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-30T18:12:10Z

Sbhide:

==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|500px|Image : 500 pixels]]

== 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|600px|Image : 600 pixels]]
 
Implemented the UI according to requirements given under task 2:
 
[[File:EditQuestionnaire_section2.PNG|800px|Image : 800 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-30T18:09:16Z

Sbhide:

==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|500px|Image : 500 pixels]]

== 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|600px|Image : 600 pixels]]
 
Tmplemented the UI according to rquirements given under task 2:
 
[[File:EditQuestionnaire_section2.PNG|800px|Image : 800 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-30T18:08:43Z

Sbhide:

==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|800px|Image : 800 pixels]]

== 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|600px|Image : 600 pixels]]
 
Tmplemented the UI according to rquirements given under task 2:
 
[[File:EditQuestionnaire_section2.PNG|800px|Image : 800 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-30T18:07:42Z

Sbhide:

==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|500px|Image : 500 pixels]]
 
Tmplemented the UI according to rquirements given under task 2:
 
[[File:EditQuestionnaire_section2.PNG|800px|Image : 800 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-30T18:04:28Z

Sbhide:

==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>

==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-30T18:02:59Z

Sbhide:

==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]]
 
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]]

The final implementation :
[[File:EditQuestionnaire_full.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-30T18:02:13Z

Sbhide:

==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|500px|Image : 500 pixels]]
 
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]]

The final implementation :
[[File:EditQuestionnaire_full.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-30T18:01:27Z

Sbhide:

==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|100px|Image : 100 pixels]]
 
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]]

The final implementation :
[[File:EditQuestionnaire_full.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:52:22Z

Sbhide:

==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]]

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

2023-10-30T17:46:56Z

Sbhide:

==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.

==Features Implemented==

Added a new option in manage tab to route the user to our edit questionnaire page.
[[File:EditQuestionnaire_link.PNG]]

File:EditQuestionnaire full.PNG

2023-10-30T17:42:55Z

Sbhide:

File:EditQuestionnaire export.PNG

2023-10-30T17:42:34Z

Sbhide:

File:EditQuestionnaire section3.PNG

2023-10-30T17:42:17Z

Sbhide:

File:EditQuestionnaire section2.PNG

2023-10-30T17:41:57Z

Sbhide:

File:EditQuestionnaire import.PNG

2023-10-30T17:41:37Z

Sbhide:

File:EditQuestionnaire section1.PNG

2023-10-30T17:41:22Z

Sbhide:

File:EditQuestionnaire link.PNG

2023-10-30T17:41:04Z

Sbhide:

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

2023-10-30T17:32:31Z

Sbhide: /* Database */

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

2023-10-30T17:31:58Z

Sbhide: /* Database */

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

2023-10-30T17:31:25Z

Sbhide: /* Database */

File:Screenshot 2023-10-30 133028.png

2023-10-30T17:31:02Z

Sbhide: data format

data format

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

2023-10-30T17:29:51Z

Sbhide: added data implementation

CSC/ECE 517 Fall 2023

2023-10-30T17:19:54Z

Sbhide: Adding 2361 link

* [[CSC/ECE 517 Fall 2023 - E2358. Refactor student_quizzes_controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2351. Finish mentor management for assignments without topics]]
* [[CSC/ECE 517 Fall 2023 - E2359. Refactor user_controller.rb, user.rb, and its child classes]]
* [[CSC/ECE 517 Fall 2023 - E2367. Reimplement participants_controller.rb, participants.rb and its child classes]]
* [[CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza]]
* [[CSC/ECE 517 Fall 2023 - E2365. Create a user interface for Questionnaire in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2364. Create a UI for Course's & Assignment's "Add Participants" page]]
* [[CSC/ECE 517 Fall 2023 - E2361. Create a page to create and update a Questionnaire in ReactJS]]