CSC/ECE 517 Spring 2020 - E2018 sort instructor reports by name ID score etc
Introduction
Expertiza is an open source web application project developed using Ruby on Rails framework. Let us list some of the functionalities that Expertiza allows us to do under different roles:
As an Instructor: We can create new assignments, edit the existing assignments, copy the assignments and also delete the assignment. The instructor can also add participants, reviewers to a particular assignment.
As a Student: They can form teams to work on various projects and also bid for the projects they would like to work on. They can also review other student's work and can give feedback on them. They can also submit various types of documents including the URLs and wiki pages for their project or assignment submission.
Problem Statement
Expertiza allows instructors to view kinds of reports of assignments in their courses such as submissions, scores, and review reports. To improve the report views, some table columns such as team name, score, average should be made sortable by using the same existing sort library.
What needs to be done
Sort Headers in View Review Report
For the "View Review Report" table, the columns "Reviewer" and "Metric" are sortable. Our goal is to make the remaining columns sortable."Reviews done" should be sorted by the first number and then the second number, "Team Reviewed" should be sorted alphabetically and "Score awarded / Average Score" should be sorted in both ascending and design manner. Another issue with the current sorting method is that the sort buttons should be visible in all browsers.
Sort/Modify Headers in Author Feedback report
For the "Author Feedback report" table, the header names "Review response rejoined" and "Last rejoined to" should be changed to "Review responded to" and "Last responded at" respectively. Then all the columns in the table should be made sortable. Columns "Rejoinder" and "Review responded to" should be sorted as strings, "# author feedbacks done" as first number and second number and "Last responded at" as date.
Sort Teammate Review report
For the "Teammate Review report" table, the first 3 columns should be sorted as strings and the last column as date.
Add Header to View Reports
When a user clicks on "View Reports" for a particular assignment a page appears with a dropdown, however the page does not say what assignments reports are being viewed. We should add a header indicating the assignment name at the top.
Fix formatting in Author Feedback Reports
For "Author feedback reports" table when no feedback has been submitted, the names of students appear in a strange horizontal format. This formatting should be fixed.
Verify dropdown performance in dropdown
In Chrome on Windows 10, the dropdown has a tendency to freeze up especially after one report has been viewed. This issue needs to be reproduced and fixed
Design
Files Requiring Modification
- app/views/reports/_review_report.html.erb (issue 1)
This file contains the code which generates the review reports table. We will add a script which makes the columns in the table sortable.
- app/views/reports/_feedback_report.html.erb (issue 2)
This file contains the code which generates the Feedback reports table. This gives us access to the column names which require change. Making the columns sortable will be done in this file.
- app/helpers/review_mapping_helper.rb (issue 2)
This file has code which generates the instance variables used by the Feedback reports table and it also creates the headers used by the reports table. Changes may be needed to the header to make the columns sortable.
- app/views/reports/_teammate_review_report.html.erb (issue 3)
This file contains the code which generates the Teammates review reports table. We will add a script which makes the columns in the table sortable.
- app/views/reports/_review_report.html.erb (issue 4)
This issue requires the assignment name to be displayed for the particular review report. We will use the set instance variables to display the assignment name.
- app/views/reports/_feedback_report.html.erb(issue 5)
This file contains the code which generates the Feedback reports table. We will inspect the code to check what is causing the formatting issues.
Issue 6 has to be reproduced and the point of error is yet to be determined
Design Patterns aren't applicable to our project since all it involves is to make columns sortable and some isolated issues.
UML Design
Solution
We will be using tablesorter jQuery to sort the table. For table columns which have constraints on them for sorting, we will be creating custom scripts which tablesorter library supports to sort those columns. According to the problem type, we are supposed to perform three kinds of sorting. All these have one thing in common. Adding up the tablesorter script in the body before using them. After including the script, we are supposed to do some modifications in the table tag by including the class. Three types of scenario may arise:
1) Sorting by columns alphabetically - To sort the columns alphabetically, the table-head attribute must include sorter-true class with it to enable the sorting alphabetically.
2) Sorting by date - It includes adding of a date default format in the script to denote the sorter type that must be used to sort the column of the date.
3) Sorting by the first number followed by the second number - It will require splitting up of the data into two parts separated by '/' and then sorting the first part, followed by the second part.
jQuery tablesorter 2.0
- Multi-column sorting
- Multi-tbody sorting
- Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
- Support secondary "hidden" sorting (e.g., maintain alphabetical sort when sorting on other criteria)
- Extensibility via widget system
- Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
- Small code size
Solution Implemented
Sort Headers in View Review Report
All changes for this issue were made in the files:
- /views/reports/review_report.html.erb
- /views/reports/_team_score_score_awarded.html.erb
The changes required for the Review Report table were:
- Make the "Reviews Done", "Team Reviewed", and "Score Awarded/Average Score" columns sortable.
In most cases, the only real changes that needed to be made was modifying the class associated with some of the table headers in order to provide the respective column with sorting functionality, as displayed in the following code (added to review_report.html.erb:
Reviewer Reviews done Reviews done Team reviewed Team reviewed Scores Metrics Metrics Assign grade and write comments Assign grade and write comments Score Awarded AVG Score
Implementing the sort on the score columns was a bit more involved, however, requiring some reworking of the HTML in order to have each bisection of the column sorted separately. The code added appears as follows:
review_report.html.erb
<% @response_maps.each_with_index do |ri, index| %>
<% if Team.where(id: ri.reviewee_id).length > 0 %>
<% @team = Team.find(ri.reviewee_id) %>
<%= render partial: 'team_score_score_awarded', locals: {bgcolor: @bgcolor, team_id: @team.id, reviewer_id: r.id} %>
<% end %>
<% end %>
_team_score_score_awarded.html.erb <% if !@assignment.varying_rubrics_by_round? %> <\!--Score awarded--> <\div> <% if @review_scores[reviewer_id][team_id] != -1%> <%= @review_scores[reviewer_id][team_id].inspect %>% <% else %> -- <% end %> <%else%> <\!--Assignments have vary_rubric_by_rounds--> <\!--Score awarded--> <% get_awarded_review_score(reviewer_id, team_id) %> <\div> <% (1..@assignment.num_review_rounds).each do |round| %> <% get_review_metrics(round, team_id) %> <%= @score_awarded = instance_variable_get("@score_awarded_round_" + round.to_s) %> <%= @score_awarded.tr('%',).to_i %> <%end%> <\/div> <%end%> (Backslashes were added in order to keep the editor from parsing the HTML tags as actual tags)
Sort/Modify Headers in Author Feedback report
All changes for this issue were make in the file /views/reports/_feedback_report.html.erb
The changes required for Author Feedback table were -
- Changing the header name “Review response rejoined” to “Review responded to” and “Last rejoined at” to “Last responded at”.
This was easily fixed by renaming the Headers in the Authors Feedback Table.
<thead>
<tr>
<!-- class value decides whether the column should be sortable or not -->
<th width="16%" class="sorter-true">Rejoinder <span></span></th>
<th width="14%" class="sorter-true"># author feedbacks done<span></span></th>
<th width="20%" class="sorter-true">Review responded to <span></span></th>
<th width="20%" class="sorter-true">Last responded at<span></span></th>
</tr>
</thead>
- Sort “Rejoinder” and “Review responded to” as string (alphabetically), sort “#author feedbacks done” by the first number then the second number, and sort “Last responded at” as a date.
As mentioned above, sorting tables was done using the table sorter plugin. In order to sort the columns 'Rejoinder', 'Review responded to' and 'Last responded at' no manual manual modification was required since tablesorter automatically detects strings and dates. For the column '#author feedbacks done' we used a manual sorting function, which splits the string into two numbers and compares them for sort. The following script was added for the custom sort -
$("#feedbackReportTable").tablesorter({
textSorter: {
1: function (a, b) {
// Checks for comparison when input is empty (no feedback has been given)
if (a.length == 0 && b.length == 0){
return 0;
}
if (a.length == 0){
return -1;
}
if (b.length == 0){
return 1;
}
if (a === b) {
return 0;
}
//E1877: values split by "/", to get the digits before and after it.
var res1 = a.split("/");
var res2 = b.split("/");
res1[1] = res1[1].split(" ")[0];
res2[1] = res2[1].split(" ")[0];
//E1877: comparison of int values
if(parseInt(res1[0])>parseInt(res2[0])){
return 1;
}
else if(parseInt(res1[0])<parseInt(res2[0])){
return -1;
}
else{
if(parseInt(res1[1])>parseInt(res2[1])){
return 1;
}
else if(parseInt(res1[1])<parseInt(res2[1])){
return -1;
}
else{
return 0;
}
}
}
}
});
});
Even after the above changes, for some tables, the sort function did not work on any off the columns. This was because tablesorter by default is not compatible with rowspan (Having more than one element in a cell), which is the case for many tables. To solve this issue we made all the rows within a row the children rows of the first row. In this manner tablesorter only looks at the first value in a row when sorting a column. An example of this is presented below -
<!--Last responded at-->
<td bgcolor=<%= @bgcolor %> style="color:#A90201" align = 'left'>No</td></tr><tr class="tablesorter-childRow">
In the above snippet 'Last responded at' is the last column in the table, and after filling that column we open a new row to accommodate more values if present. We have made that new row a child row so that table sorter does not use that row in its sorting logic.
Sort Teammate Review report
All changes for this issue were made in the file /views/reports/_teammate_review_report.html.erb
Changes needed for these issue were -
- We have to sort the first 3 columns as a string and sort the last column as a date in the “Teammate Reviews” table
Teamsorter is used to make the table sortable. Since it automatically detects dats and strings, no manual code was required.
<script>
$(function () {
/*Function for sorting the table */
$("#teammateReviewTable").tablesorter({
dateFormat : "mmddyyyy", // set the default date format
sortList: [[0,0]] // sort First Column by default when page loads
});
});
</script>
As seen in author feedbacks table, even after the above changes, for some tables, the sort function did not work on any off the columns. This was because tablesorter by default is not compatible with rowspan (Having more than one element in a cell), which is the case for many tables. To solve this issue we made all the rows within a row the children rows of the first row. In this manner tablesorter only looks at the first value in a row when sorting a column. An example of this is presented below -
<!--Last reviewed at-->
<td bgcolor=<%= @bgcolor %> style="color:#DD3300" align = 'left'>No</td> </tr><tr class="tablesorter-childRow">
In the above snippet 'Last reviewed at' is the last column in the table, and after filling that column we open a new row to accommodate more values if present. We have made that new row a child row so that table sorter does not use that row in its sorting logic.
Add Header to View Reports
All changes for this issue were made in the file /views/reports/response_report.html.haml
Changes needed for this issue were:
- Add a header to the top of the "View Reports" page for each assignment
This issue was trivial to resolve. It came down to adding the following three lines of haml to the top of the aforementioned file:
%h1 Reports for = @assignment.name
This added a header to the top of the "View Reports" page reading "Reports for <name of assignment>".
Fix formatting in Author Feedback Reports
All changes for this issue were make in the file /views/reports/_feedback_report.html.erb
The issues presented were -
- For "Author feedback reports" table when no feedback has been submitted, the names of students appear in a strange horizontal format. This formatting should be fixed.
We found that this problem arose from the fact that when users haven't submitted any feedback, they have their rowspan set to 0. This makes them all appear in a horizontal fashion. To fix this issue we added a condition where if the rowspan is seen to 0 then we manually set it to 1 so that it takes up its own row. This is shown in the following code.
<!--Rejoinder-->
<% ['one', 'two', 'three'].each do |round| %>
<% if @first_col_identifier == true %>
<% @reviewer_name = r.user.fullname(session[:ip]) %>
<%row_span = @assignment.varying_rubrics_by_round? ? (@rspan_round_one + @rspan_round_two + @rspan_round_three) : @rspan %>
<%if row_span == 0 %>
<tr><td rowspan = <% 1 %>>
<%= link_to @reviewer_name, :controller => 'popup', :action => 'reviewer_details_popup', :id => r.id, :assignment_id => @id %>
</td>
<td></td>
<td></td>
<td></td>
<%else %>
<tr><td rowspan= <%= @assignment.varying_rubrics_by_round? ? (@rspan_round_one + @rspan_round_two + @rspan_round_three) : @rspan %>>
<%= link_to @reviewer_name, :controller => 'popup', :action => 'reviewer_details_popup', :id => r.id, :assignment_id => @id %>
</td>
<%end %>
<% @first_col_identifier = false %>
<% end %>
Verify dropdown performance in dropdown
No changes were made for this issue.
The issues presented were:
- In Chrome on Windows 10, the dropdown has a tendency to freeze up especially after one report has been viewed. This issue needs to be reproduced and fixed
The "freezing dropdown" bug described in this issue was unable to be reproduced as described. Supposedly, there existed an issue with the "View Reports" page's dropdown menu freezing when accessing it from a Chrome browser on Windows 10; however, all attempts to achieve this same behavior were met with failure, and only the expected, normal behavior was observed. For the sake of thoroughness, attempts to reproduce the bug were carried out on three different machines all running Chrome on Windows 10, and on each machine, the environment was created in two different ways: First by running the Expertiza server from a local VM using VirtualBox, and then by running it from an NCSU VCL instance. In none of the described cases did the dropdown ever freeze or otherwise malfunction; therefore, it has been decided that this bug will be dismissed.
Test Plan
Functional Testing
Sort Headers in View Review Report
- Login as a instructor.
- Click Assignments tab next to Courses
- Select the "View reports" icon for the assignment for which you want to see the report of
- Select "Review Report" from the dropdown
- Sort the table by clicking on headers, ensure all headers are sorted properly.
Sort/Modify Headers in Author Feedback report
- Login as a instructor.
- Click Assignments tab next to Courses
- Select the "View Reports" icon for the assignment for which you want to see the report of
- Select "Author Feedback Report" from the dropdown
- Sort the table by clicking on headers, ensure all headers are sorted properly and header names have been changed to appropriate values.
Sort Teammate Review report
- Login as a instructor.
- Click Assignments tab next to Courses
- Select the "View Reports" icon for the assignment for which you want to see the report of
- Select "Teammate Review Report" from the dropdown
- Sort the table by clicking on headers, ensure all headers are sorted properly.
Add Header to View Reports
- Login as a instructor.
- Click Assignments tab next to Courses
- Select the "View Reports" icon for the assignment for which you want to see the report of
- Ensure the header is present on the page for the assignment name.
Fix formatting in Author Feedback Reports
- Login as a instructor.
- Click Assignments tab next to Courses
- Select the "View Reports" icon for the assignment for which you want to see the report of
- Select "Author feedback reports" from the dropdown
- Verify format for student names when no feedback has been submitted.
Verify dropdown performance in dropdown
- Login as a instructor.
- Click Assignments tab next to Courses
- Select the "View Reports" icon for the assignment for which you want to see the report of
- Verify drop down does not freeze up in any scenario.
Team Information
Jamie Gachie
Juan Martinez
Koushik Shankar
Anfernee Hubbert