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

From Expertiza_Wiki
Jump to navigation Jump to search

Expertiza

Expertiza is a 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:

  1. 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.
  2. Min Score and Max Score inputs should only accept numerical values to ensure data integrity and prevent incorrect data entry.
  3. 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:

  1. 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.
  2. 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.
  3. The "Seq" field, which represents the sequence of questions, should be disabled for editing to prevent unintentional changes.
  4. The "Type" field should be transformed into a dropdown menu, allowing users to select the question type during the question creation process.
  5. The "Weight" field should only accept numeric values to ensure data accuracy and prevent incorrect data entry.
  6. The alignment of the "Edit/View Advice" button needs to be adjusted for improved visual consistency.
  7. The "Edit/View Advice" page can remain as it is, without any significant changes.
  8. 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.
  9. 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.
  10. 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:

Image : 500 pixels

Tasks that were accomplished:


Part 1

  1. Created a UI Page for editing Questionnaire
  2. 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)
  3. Min Score, Max Score can now only be numbers
  4. Review private field is now a checkbox instead of dropdown.

Part 2

  1. Add button is now at the bottom of the questionnaire
  2. Remove button for a Question is now at the end of that row and not at the start
  3. Seq field is now disabled for edit
  4. Type field is now a dropdown and the user can select the type while creating the Question
  5. Weight field is now numeric
  6. Edit/View Advice button is now aligned properly
  7. Edit/View Advice page is as it is.
  8. Import and Export buttons at the bottom now display a Modal instead of showing a new page.
  9. 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.
Image : 1000 pixels

Implemented the UI according to requirements given under task 1:
Image : 600 pixels

Implemented the UI according to requirements given under task 2:
Image : 800 pixels
Image : 1000 pixels

Implemented import modal:
Image : 1000 pixels

Implemented export modal:
Image : 1000 pixels

The final implementation :
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.

  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

References

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2023_-_E2361._Create_a_page_to_create_and_update_a_Questionnaire_in_ReactJS&oldid=151208"