: Difference between revisions

From Expertiza_Wiki
Jump to navigation Jump to search
(Created page with "== Introduction == The Expertiza project is software to create reusable learning objects through peer review. It also supports team projects, and the submission of almost any...")
 
No edit summary
Line 34: Line 34:
== Proposed Solution ==
== Proposed Solution ==


The design presented in this iteration of the project is very similar to the high-level design proposed last year in [https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]. Since this pull request was not merged, we have included the proposed changes that are credible. Below is a comparable explanation of the previously offered remedy, as well as some new design decisions to improve upon the previous iteration of this issue.  
It was obvious from the beginning that the main changes would have to be made in the view and controller files around the issues present.


Four main objects in this application are used as the basis for expanding search functionality. These are the user, assignment, questionnaire, and review. Each of these points is 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:===
===Back Link Issue:===
In the current Manage Users view, users can search by Username, Full Name, and Email. We'll keep these three search options but rename "Username" to "User ID" to eliminate confusion with "Full Name." Users will be able to search regardless of the case of the string. Multiple filters can be applied simultaneously, and the search results will match all of them. If there are no results, an empty list will be returned.


====Sequence Diagram for User Search====
[[File:Sequence diagram.png|500px|center]]


====Implementation====
====Error Message Issue====
To improve the current functionality, we propose an advanced search functionality based on the design suggested by the 2022 improvement project with details as follows:
# To introduce "Advanced Search" functionality:
## Modify the existing list method in the controller.
## Remove the simple search in "app/views/users/list.html.erb."
## Add a new partial for the search form.
## Style the user list table with "class="table table-hover."
# To perform the search:
## Create a form input in "app/views/users/_search.html.erb."
## Style the "Search" button with "class='btn btn-primary.'"
## Style the "text blank" with "class:'form-control.'"
## The UI contains two search components: "search_field" (always displayed) and "advanced_search_fields" (displayed when "Advanced Search" is ON).
# In the "users controller.rb": Add a form input handler to parse the form and provide arguments to the model.
# In the "get_user_list" method:
## Implement advanced search in the User model.
## The method now takes three parameters (user id, full name, e-mail).
## Use regular expressions to match user fields and allow multiple inputs for comparison.
## Return results to the controller in @users for rendering in the list view with paginated users.


===Search for Courses:===
In the current system, users can search for courses on the Course page using a search box. They have the option to search by course name or use an advanced search with filters for start and end dates, creation and update dates, and the presence of quizzes. However, using multiple filters can lead to inconsistencies, and the system lacks the "Don't Repeat Yourself" (DRY) approach.


In the proposed system, we maintain a similar user interface for advanced search but implement it with a DRY approach. We centralize the reusable code and call it when needed. To search by date, users can choose between the creation date and the update date from a dropdown menu with a user-friendly calendar prompt. By applying the DRY approach, we minimize duplicate code and ensure that courses matching the user's filter preferences are returned, while an empty list is presented if there are no matching criteria.
===Back Link error from list of late policies===


====Sequence Diagram for Course Search====
[[File:Course_diagram.png|500px|center]]


====Implementation====
In the current system, most functionalities, including the advanced search, are already implemented. We'll extend this code based on the 2022 improvement project, optimizing it using the DRY approach to remove duplicate and reused code. The code for advanced search and improved UI can be found in "app/assets/javascripts/tree_display.jsx." It follows the same format as "User Advanced Search" with components like AdditionalSearchDropDown, DatePicker, and HASQUIZ_TOGGLE. The React component FilterableTable is used for pop-up advanced search.
Key functionalities in the proposed system:
#Fetching and displaying sub-contents when the user clicks on a course:
##HTTP POST request sent by `getSubFolderData()` from the FilterableTable component.
##FilterableTable component's state is updated upon data retrieval.
##An update triggers the ContentTable component.
#Course Search: The ContentTable component handles the search method, filtering course names based on user input and selected filters.
The refactoring in the proposed system eliminates code duplication and applies the DRY approach to Course and assignment search functionalities, including advanced search.
===Search for Assignments:===
In the current system, users can search by assignment name (partial or whole). In the proposed system, pressing the Advanced Search button enables additional filters for searching assignments by creation date, update date, and quiz inclusion. Users can apply multiple filters simultaneously, and the results will match all selected criteria.
When searching by date, users can choose between creation and modification date from a dropdown menu. They can select a date from a calendar, and tasks created or updated on or before that date will be displayed. Users can apply additional filters by clicking the Advanced Search button next to the Search button, revealing a hidden div with text fields for all columns. Results will include assignments meeting the criteria, and an empty list will be provided if no matching entries are found.
====Sequence Diagram for Assignment Search====
[[File:Assignment_diagram.png|500px|center]]
====Implementation====
Since this component is exclusively defined in "app/assets/javascripts/tree display.jsx," it can only be implemented using JavaScript. The interactive dropdown search format will match that of "User Advanced Search." We have created a popup advanced search feature in the React component FilterableTable, utilizing AdditionalSearchDropDown, DatePicker, and HASQUIZ TOGGLE components.
#ContentTable manages the search functionality, filtering course titles that match the user's input.
#Course and assignment searches share the same code within the FilterableTable component.
===Search for Questionnaires:===
The existing system provides search options for the following criteria:
#Questionnaire name
#Keyword or a string in a single question within a questionnaire
#Course name
#Assignment name
Users can apply multiple filters simultaneously, with results matching all selected criteria. An empty list is returned if no results are found. For a simple search, a default search box is available for questionnaire names. To apply multiple filters, users can click the "Advanced Search" button located next to the "Search" button. Hidden fields with text boxes for all columns are rendered below. The list displays matching questionnaires.
The current system lacks the "Don't Repeat Yourself" (DRY) approach in questionnaire search. We introduce a similar system with minor enhancements to improve questionnaire search effectiveness and adhere to the DRY approach as proposed by the 2022 improvement project.
In the proposed system, the user will be able to search questionnaires in the proposed system using an advanced search option similar to the previous one; however, the back-end code for implementing this functionality is refactored by following the DRY Approach. In the file: app/assets/javascripts/tree display.jsx, code that is in common for all the searches is to be refactored.
====Sequence Diagram for Questionnaire Search====
[[File:Ques diagram.png|500px|center]]
====Implementation====
#When a user presses on a course, the FilterableTable's getSubFolderData() method sends an HTTP POST request.
#The state of the FilterableTable component is updated after retrieving data, which triggers a re-render of the ContentTable component.
#For questionnaire search, the FilterableTable handles the method. Pressing the search button filters sub-contents in each questionnaire category based on the user's input.
#The handleQuestionnaireSearchChange() method in the FilterableTable component tracks the search input field and triggers updates when the field is cleared.
Proposed Implementation:
In the proposed system, we will use the existing list method, but we'll refactor the back-end code to follow the DRY approach. Specifically, code in app/assets/javascripts/tree display.jsx that is common to all searches will be refactored.
===Search for Reviews of a Team:===
The "app/views/reports/_review_report.html.erb" file is responsible for rendering a review report table. The table is designed to display reviewer information, the number of reviews completed, the teams reviewed, scores awarded, average scores, metrics, and the ability to assign grades and write comments. It also provides the option to export the review scores to a CSV file.
In the current system, there is no existing search functionality to filter through the rows. We propose to include a search functionality to filter the results in the review report table based on team names. This feature provides users with the ability to narrow down the displayed data, making it easier to find specific teams or reviewers.
====Implementation====
#Search Input Field: A search input field with the label "Search Team Name" is included in the user interface. Users can enter a team name in this field to specify the filter criteria.
#Search Button: A "Search" button is provided next to the search input field. Clicking this button triggers the search functionality.
#JavaScript Search Function: A JavaScript function named "searchTeam()" is defined in the code. This function retrieves the user's input, converts it to lowercase for case-insensitive matching, and then iterates through the rows of the table to find matches.
#Filtering and Display: When the user initiates a search, the JavaScript function compares the search input with the team names in the table. Rows that match the search criteria are displayed, while non-matching rows are hidden, effectively filtering the results based on the entered team name.
===Search for Team (Member) Submissions:===
This section describes how the "app/views/assignments/list_submissions.html.erb" file handles sorting and searching in a table displaying team submissions in an assignment. The table showcases various details, including topic names, team names, team members, and submission links. The primary objective is to enable users to easily sort and search for specific information within the table. In the current system, there is no way to search among the teams by the team name, or to search for a particular team member.
====Implementation====
#Table Sorting: The JavaScript code initiates the table sorting functionality. It uses the "tablesorter" library to allow users to sort the table by default when the page loads. This feature provides an intuitive way to arrange data as needed.
#Table Structure: The table is structured to display topic names, team names, team members, and links. The design ensures that the displayed information is clear and organized.
#Search Input Fields: Two search input fields, labeled "Search Team Name" and "Search Team Member Name," are included to facilitate searching. Users can enter text in these fields to filter the table based on team names and team member names.
#Event Listeners: JavaScript code adds event listeners to the search input fields. When users input text, the corresponding event listener triggers the search functionality.
#Search Algorithm: The search function compares the user's input with the content in the table. It performs a case-insensitive search, making it user-friendly. The table is searched for matches in both the team name and team member name columns.
#Row Display Control: Rows in the table are dynamically displayed or hidden based on whether they match the search criteria. This feature allows users to filter and find the information they need effectively.
#User Interaction: Users can utilize the search input fields to locate specific team names and team members within the table. Additionally, the table can be sorted by clicking on column headers, offering further flexibility in data presentation.
===Search for Student in a Course (Reviews Scores):===
For all the students in a course, the app/views/assessment360/all_students_all_reviews.html.erb contains students, metareviews, and the teammate reviews. The table displays student information, teammate counts, assignment details, and aggregate scores. Additionally, it calculates and displays class averages for the assignment grades, provided certain conditions are met. There is no way to search for a student in the current system. We propose to enhance the user experience by adding a search functionality for filtering students in a table based on their names.
====Implementation====
#Event Listener: The JavaScript code is executed when the DOM (Document Object Model) content has been loaded. It adds an event listener to the input field with the ID "studentSearch" and to all rows in the table with the ID "myTable."
#Input Event Handling: When a user types in the "studentSearch" input field, the event listener triggers the input event handling function.
#Search Text: The user's input is retrieved and converted to lowercase for case-insensitive matching, making the search more user-friendly.
#Search Algorithm: The code then iterates through each row in the table, starting from the third row (index 2) to avoid affecting the table headers. It accesses the first cell in each row, which contains the student's name, and retrieves the text content in lowercase.
#Display Control: If the student's name includes the search text, the row is displayed; otherwise, it is hidden by setting the 'style.display' property to either an empty string or 'none,' effectively filtering the results based on the entered student name.
===Search for Student in a Course (Grades):===
In the "app/views/assessment360/course_student_grade_summary.html.erb" file, you can find a comprehensive table displaying information about students in a course, including peer scores, instructor grades, and final grades for various assignments. However, the current system lacks a search functionality for quickly locating specific students. To enhance user experience, we've implemented a search feature allowing users to filter students based on their names.
====Implementation====
#Table Styling: A set of styles has been applied to the table, ensuring it is visually appealing and properly formatted.
#Table Sorting: The JavaScript code includes a table sorting function, enabling users to sort the table by clicking on column headers.
#Search Input Field: An input field labeled "Search for students..." is provided, where users can enter the name of the student they want to find.
#Table Structure: The table consists of various columns, including student names, assignment details, and final grades. It is structured to accommodate the display of relevant information.
#Search Functionality: JavaScript code is included to enable the search functionality. When users type in the search input field, an event listener is triggered.
#Search Algorithm: The code searches for matches by comparing the user's input with the names displayed in the table. If a match is found, the corresponding row is displayed; otherwise, it is hidden.
#User Interaction: Users can initiate the search by typing in the input field, and the table will automatically update to display only the relevant rows.
=== ''' Lo-fi UI Example ''' ===
[[File:Lofi.jpg|1000px|center]]
=== ''' Flowchart ''' ===
[[File:Flowchart.jpg|750px|center]]


== Test Plan ==
== Test Plan ==
Line 261: Line 129:
# Type the student name that you want to search for to filter out the results.
# Type the student name that you want to search for to filter out the results.


== Resulting Snapshots ==
You can watch this [https://www.youtube.com/watch?v=vmjD78GvuOw demo] video for a rough idea of the UI pages.
=== User Search UI ===
<li>Before Change</li>
[[File:User_BeforeEdit.png|700px]]
<li>After Change</li>
The first image depicts the USER search UI page. The second image depicts the USER page, which allows users to search by userid, name, and e-mail.
It's worth noting that not all parameters are required for a successful search. You can search using one, two, or all of the options.
[[File:Users 1.png|700px]]
[[File:Users 2.png|700px]]
=== Course Search UI ===
<li>Before Change</li>
[[File:Course-origin.JPG|700px]]
<li>After Change</li>
The first picture shows the main page of COURSE searching UI. The second picture shows the searching result that search by created date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.
[[File:Courses_1.png|700px]]
[[File:Courses_2.png|700px]]
=== Assignment Search UI ===
<li>Before Change</li>
[[File:Assignment-origin.JPG|700px]]
<li>After Change</li>
The first picture shows the main page of ASSIGNMENT searching UI. The second picture shows the searching result that search by updated date.
Note that it doesn't necessarily need all parameters to search. One can search with one or two or all parameters.
[[File:Assignments_1.png|700px]]
[[File:Assignments_2.png|700px]]
=== Questionnaire Search UI ===
<li>Before Change</li>
[[File:Questionnaire-origin.JPG|700px]]


<li>After Change</li>
The first picture shows the main page of the questionnaire searching UI. The second picture shows the questionnaire search page with advanced search and details of the review questionnaire. Note that it doesn't necessarily need all parameters to search. One can search with one, two, or all parameters.


[[File:Questionaires_1.png|700px]]
[[File:Questionaries_2.png|700px]]


=== Review Search UI ===
<li>Before Change</li>
[[File:Rev1.png|700px]]
<li>After Change</li>
[[File:Rev2.png|700px]]
=== Team (Member) Search UI ===
<li>Before Change</li>
[[File:Tm1.png|700px]]
<li>After Change</li>
[[File:Tm2.png|700px]]
[[File:Tm3.png|700px]]
=== Student Review Scores Search UI ===
<li>Before Change</li>
[[File:Rs1.png|700px]]
<li>After Change</li>
[[File:Rs2.png|700px]]
=== Student Grades Search UI ===
<li>Before Change</li>
[[File:Gs1.png|700px]]
<li>After Change</li>
[[File:Gs2.png|700px]]


== Project Mentor ==
== Project Mentor ==
Line 343: Line 139:
== Team Members ==
== Team Members ==


Ananya Mantravadi (amantra@ncsu.edu)
Arul Sharma (asharm52@ncsu.edu)
 
Anvitha Reddy Gutha (agutha@ncsu.edu)
 
Nainisha Bhallamudi (nbhalla@ncsu.edu)
 
==References==


#[https://wiki-expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2022_-_E2233._Improving_search_facility_in_Expertiza Spring 2022 Design]
Sarvesh Somasundaram (ssomasu@ncsu.edu)
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2153._Improving_search_facility_in_Expertiza Fall 2021 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2020_-_E2079._Improve_Search_Facility_In_Expertiza Fall 2020 Design]
#[https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Fall_2019_-_E1987._Improving_search_facility_in_Expertiza Fall 2019 Design]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://relishapp.com/rspec RSpec Documentation]

Revision as of 05:05, 7 November 2023

Introduction

The Expertiza project is software to create reusable learning objects through peer review. It also supports team projects, and the submission of almost any document type, including URLs and wiki pages.

Test Login Credentials

  • UserId: instructor6
  • Password: password

    • Problem Statement

    ISSUE 1

    Background: An instructor can create late policies for any assignment, where the instructor can specify the points per unit and the maximum penalty that can be applied for any assignment submission. One way to reach late policy creation link is as follows:

    1. Log into Expertiza as an Instructor.
    2. Edit an assignment by clicking on edit logo under the “Action” column.
    3. Under the “Due Date” tab click on the "New late policy" link
    4. In “New late policy” fill in the required details.
    5. Clicks “Create” to save the policy, to go to page which shows all late policies.

    ISSUE 2

    FAILED TO SAVE THE ASSIGNMENT error message shows up unexpectedly

    Determine why this error message shows up, and fix this error so that it doesn’t occur when clicking on “New Late Policy” in “due date” tab. Add a test case that verifies the error doesn’t occur.

    ISSUE 3

    On the “New Late Policy” page, once you click “Create”, it shows you a list of late policies. The “back” link on this page should go to the “Due Date” page of the assignment which was being edited when clicked. Currently it gives error as it can’t find an assignment number. Add a test case to check the above issues and verify it passes.


    Proposed Solution

    It was obvious from the beginning that the main changes would have to be made in the view and controller files around the issues present.


    Back Link Issue:

    Error Message Issue

    Back Link error from list of late policies

    Test Plan

    Rspec Unit Tests

    Functionalities to be tested:

    1. Given an unfiltered search result, everything should be included.
    2. The filtered search produces a list of items that include the filtered search item.
    3. When a search is invalid, an empty list is returned.

    Code Snippet Modified

    Here are some improvements on previously implemented test cases:

    1. The "it" clause is going to be more specific with respect to each test.
    2. We will be introducing fixtures in the tests to modularize the common code in each test.
    3. We will try to add more tests if possible to increase the code coverage of the controllers and models.

    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. Please pair with our Demo Video to confirm our testing

    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 Courses

    1. Log into Expertiza to view the home page
    2. Go to Manage > Courses
    3. Type the search criteria for the course (name, institution, etc) in the available search box 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 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.

    Search for Reviews of a Team

    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. All the entries that match the given criteria will be returned.
    5. Select the "View Reports" Icon corresponding to the assignment you select.
    6. Select Review Report (default option) from the dropdown and click on View.
    7. Type the Team Name that you want to search for in the reviews given by different students.

    Search for Team (Member) Submissions

    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. All the entries that match the given criteria will be returned.
    5. Select the "View Submissions" Icon corresponding to the assignment you select.
    6. Type the Team Name and the Team Member Name that you want to search by to filter out the results.

    Search for Student in a Course (Reviews Scores)

    1. Log into Expertiza to view the home page
    2. Go to Manage > Courses
    3. Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
    4. All the entries that match the given criteria will be returned.
    5. Select the "View aggregated teammate & meta reviews" Icon corresponding to the course you select.
    6. Type the student name that you want to search for to filter out the results.

    Search for Student in a Course (Grades)

    1. Log into Expertiza to view the home page
    2. Go to Manage > Courses
    3. Type the search criteria in the available search criteria and select the appropriate field from the dropdown.
    4. All the entries that match the given criteria will be returned.
    5. Select the "View grade summary by student" Icon corresponding to the course you select.
    6. Type the student name that you want to search for to filter out the results.



    Project Mentor

    Srilekha Gudipati (sngudipa@ncsu.edu)

    Team Members

    Arul Sharma (asharm52@ncsu.edu)

    Sarvesh Somasundaram (ssomasu@ncsu.edu)

    Retrieved from ""