CSC/ECE 517 Fall 2021 - E2153. Improving search facility in Expertiza

From Expertiza_Wiki
Revision as of 23:55, 29 November 2021 by Ylo (talk | contribs) (→‎User Search UI)
Jump to navigation Jump to search

Introduction

The Expertiza project takes advantage of peer-review among students to allow them to learn from each other. It is an open-source application running on Ruby on Rails. It is used for the management of courses and the assignments for respective courses, by the faculties and the students. The manage content section of the application has different views that display information about the users, courses, assignments, questionnaires, and reviews.

The application should have a fully functional search functionality throughout the views, so that a user can search any type of data with ease, on the basis of any number of parameters depending on his requirements. Users should be searched on the basis of one more parameter which includes name, full name, email, etc. Similarly, assignments should be searched on the basis of name, created date, updated date, etc.

However, the search functionality in the existing application is constrained to just a single parameter for users and assignments. Questionnaires management does not have a search functionality implemented as yet. This project works on improving the search functionality of Expertiza, by adding search bars if not present, introducing an advanced search feature where user can search on the basis of more than one parameters, and making the search functionality appear more elegant.

Problem Statement

  1. An instructor or administrator can search for a user by name, user-ID, or other characteristics.
  2. An instructor should be able to search for assignments by name, due date, or other characteristics.
  3. An instructor should be able to search for rubrics (or other questionnaires) by name, or by the courses or assignments they have been used in.
    1. For the instructor, there also needs to be a way to quickly find rubrics (and other questionnaires) that have been used in a single course. It should be possible to search or click somewhere to bring up a list of questionnaires used in the course, expanding only the applicable questionnaires in the list of questionnaires.
    2. One should also be able to search for questionnaires by words used in questions that belong to the questionnaires.
  4. There should be a way to search all reviews of a particular team’s work for particular scores or text strings. Reviews should be able to be filtered by score, text comment length, reviewer, and reviewee.
  5. An instructor or administrator should be able to search for all the assignments that a particular user has participated in.
  6. If more than one criterion needs to be specified, there should be an 'Advanced Search' button.

E2079 Previous Implementation

  1. E2079 Github Repository
  2. E2079 Pull Request
  3. Video Link

Issue With Previous Implementation

  1. All implementation are working on javascript inside tree_display.jsx.
  2. With compatibility issue, these work can't be check-in currently.
  3. Format are not aligned between course search/assignment search and user search/rubric search.
  4. Questionnaire search is not straightforward and the list is not working.
  5. Searching of user with "name" and "full name" is confusing.
  6. Searching criteria can't be accumulated.
  7. Instructors and administrators can't find assignments with participants.

Proposed Solution

The design proposed in this iteration of the project is not much different from a high level than the design proposed form last year in Fall 2020 Design. Below you will see a similar description of the solution previously proposed and some additional design choices added to improve upon the previous iteration of this issue. Changes from the previous design will be denoted by clear statements indicating the revision.

Three main objects in this application are used as the basis for expanding search functionality. These are the user, assignment and questionnaire. Each of these points are searchable by the title of the object or not searchable at all. The remaining sections note the current situation and propose a tentative solution.

Search for User:

In the current system workflow, the Manage Users view can search users by Username, Full name, and email. We will remain these 3 searching criteria, except changing "Username" into "User ID" to avoid confusion with "Full name". We will allow searching for fields irrespective of the case of the searched string. The user will be able to apply multiple filters at a time and the output of the query will match all filters applied. If no results are found, an empty list will be returned.

Implementation

User has its own "list" controller, so it will directly implemented in list form with a "_search" html form after apply the search result. Since only this class has rails list, so only this file will implement in ruby code. Our goal is to maintain the logic and search alike.

  1. Add a form in "app/views/users/_search.html.erb"
  2. Add a advanced search to modify the "users_controller.rb" list input
  3. The interactive dropdown part will still implement by javascript

Search for Courses:

In the current system implementation, searching via the name of the course is supported with a partial or complete course name. In the proposed system, the user will be able to search for a course using additional filters after they press the Advanced Search button. The filters will have creation date, updated date and a checkbox represent whether it include a quiz. The user could apply multiple filters at a time and the output of the query would match all filters applied.

To search for a course by Date, the user will have a drop down list to choose search by created or updated date. The following will prompt with a calendar where he can select a date and all the courses created/update on or before the selected date will be displayed.

To apply multiple filters, the user can tap on the Advanced Search button available, adjacent to the Search button; a hidden div will then be rendered below-containing text boxes for all the columns. All courses that match the filters will be returned. An empty list will be returned if the search criteria don't match any records in the database.nce.

Implementation

This part is solely listed within the file "app/assets/javascripts/tree_display.jsx", so we can only implement this part with javascript. The interactive dropdown advanced search code will maintain the same format as "User Advanced Search".

Search for Assignments:

In the current system implementation, searching via the name of the assignment is supported with a partial or complete assignment name. In the proposed system, the user will be able to search for an assignment using additional filters after they press the Advanced Search button. The filters will have creation date, updated date and a checkbox represent whether it include a quiz. The user could apply multiple filters at a time and the output of the query would match all filters applied.

To search for an assignment by Date, the user will have a drop down list to choose search by created or updated date. The following will prompt with a calendar where he can select a date and all the assignments created/update on or before the selected date will be displayed.

To apply multiple filters, the user can tap on the Advanced Search button available, adjacent to the Search button; a hidden div will then be rendered below-containing text boxes for all the columns. All assignments that match the filters will be returned. An empty list will be returned if the search criteria don't match any records in the database.

Implementation

This part is solely listed within the file "app/assets/javascripts/tree_display.jsx", so we can only implement this part with javascript. The interactive dropdown advanced search code will maintain the same format as "User Advanced Search".

Search for Questionnaires:

The proposed system will implement search functionality for searching via below criteria:

  1. Keyword within Name of Questionnaire: A text field
  2. Keyword or a string in a single question within a questionnaire: A text field
  3. Course Name: A text field for the course name
  4. Assignment Name: A text field for the assignment

The user will be able to apply multiple filters at a time and the output of the query will match all the filters applied. If no results are found, an empty list will be returned.

There will be a default search box of the name of questionnaire as a simple search, and if a user want to apply multiple filters, the user can tap on the "Advanced Search" button which is adjacent to the "Search" button, and a hidden field will be rendered below-containing text boxes for all the columns. All the matched questionnaires will be listed at once.

Implementation

This part is solely listed within the file "app/assets/javascripts/tree_display.jsx", so we can only implement this part with javascript. The interactive dropdown advanced search code will maintain the same format as "User Advanced Search".

Lo-fi UI Example

Flowchart

Test Plan

Rspec Unit Tests

Automated tests can be written to test the following functionalities:

  1. Given an unfiltered search result which should show all
  2. Given a filtered search, the result renders a list of objects containing the filtered search item
  3. Given an invalid search, an empty list returns

RSpec tests will be written to cover the depth of each test point above for all four search objects mentioned in the proposed solution.

Manual UI Testing

UI tests will be performed to reproduce the behavior previously mentioned. These steps were reproduced from the previously proposed solution for this issue.

Search for User

  1. Log into expertiza to view the home page
  2. Go to Manage > Users
  3. Type the search string in the search box available on the UI and select the column to search for from the dropdown.
  4. To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
  5. All the entries that match the specified criteria will be returned.
  6. An empty list is returned if the search criteria don't match any valid records in the database.

Search for Assignment

  1. Log into expertiza to view the home page
  2. Go to Manage > Assignments
  3. Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
  4. To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
  5. All the entries that match the given criteria will be returned.
  6. An empty list is returned if the search criteria don't match any valid records in the database.

Search for Questionnaire

  1. Log into expertiza to view the home page
  2. Go to Manage > Questionnaires
  3. Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
  4. To perform a search based on multiple filters, the user can tap on the Advanced Search button adjacent to the Search button, the view renders a hidden div containing text boxes for all the columns, allowing the user to search based on multiple columns.
  5. All the entries that match the given criteria will be returned.
  6. An empty list is returned if the search criteria don't match any valid records in the database.

Resulting Snapshots

The following screenshots show before and after an advanced search for courses, assignments, and users.

User Search UI

  • Before Change
  • After Change
  • The left picture shows the page of course search UI. While the right picture shows the course page that search by created date. Note that it doesn't need all parameter to search. One can search with one or two or all parameters.

    Course Search UI

    The top left picture shows the main page of course searching UI. The top right picture shows the course searching page with advance search. The bottom picture shows the searching result that search by created date.

    Assignment Search UI

    The top left picture shows the main page of assignment searching UI. The top right picture shows the assignment searching page with advance search. The bottom picture shows the searching result that search by updated date.

    Questionnaire Search UI

    The top left picture shows the main page of questionnaire searching UI. The top right picture shows the questionnaire searching page with advance search. The bottom picture shows the detail of review questionnaire.

    Project Mentor

    Ed Gehringer (efg@ncsu.edu)

    Team Members

    Yu-Hsuan Lo (ylo@ncsu.edu)

    Fu-Jen Yen (fyen@ncsu.edu)

    Shao-Yo Chao (schao2@ncsu.edu)

    References

    1. Fall 2019 Design
    2. Fall 2020 Design
    3. Expertiza on GitHub
    4. RSpec Documentation