Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2018 E1815: Improvements to review grader

2018-04-29T00:55:25Z

Cchen31: /* Test Plan */

Improvements to Review Grader

__TOC__
== Abstract ==
In this design doc, since it's clearer to explain how we are going to improve the UI design by proposing each idea with the corresponding design's current image, we aren't going to separate problems from goals because you, as a reader, will need to scroll up and down to match problems to their corresponding goals.

== Introduction ==
Expertiza is a web application that is widely used by 2 types of users: students and instructors. When a user is logged-in as an instructor, and would like to see a review report on an assignment to review a grader, he/she could reach the page via Manage > Assignments and clicking on the “'''View review report'''” icon. The page would look somewhat like this:

[[File:Rev_report2018.png]]

To get a summary review report performed by a particular student, an instructor can get to the page from the review report by clicking “'''summary'''” in the row for that student. The page would look like this one:

[[File:Summary_report2018.png]]

== Problem Statement ==

This project is focused primarily on making various improvements to the Review Report and Review Summary pages, described in detail in the previous section. Each of these pages, while functional, suffer from many UI issues which make the pages more difficult to use for instructors. That is, information which would be useful to instructors is missing in several cases. In others, large amounts of unnecessary information is present, cluttering the site. Additionally, both pages suffer from structural and design issues which, again, waste instructor time.

Finally, the Review Report page sometimes mis-categorizes students who have not updated their reviews of others, even though the project under review has not changed! This could cause students to be deducted points unfairly. By adding a new way of highlighting this special case to instructors, review grades can be assigned more fairly.

== File Changes ==
* app/helpers/review_mapping_helper.rb for Add metrics charts
* app/views/popup/view_review_scores_popup.html.erb
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss
* app/helpers/review_mapping_helper.rb
* app/views/popup/team_users_pop_up.html.haml
* config/application.rb

== Review Report Page==

=== Add metrics charts ===

Presently, this page contains a 'metrics' column, presently displaying the average review volume for a given user in text form. This method of displaying data can be difficult to interpret, and even more difficult to compare at a glance, or to notice trends. Additionally, plans for expanding the metrics column to include more data would worsen this issue if it remained in its current state.

[[File:Metrics2018.png]]

====Solution====
=====Files=====
* app/helpers/review_mapping_helper.rb

This project will replace the text in this column with easy to read bar or line graphs, which will be color-coded or otherwise made very simple and easy to read. These graphs will display the data clearly and concisely, mitigating these issues. This concise display will allow for easier comparison of data, easier interpretation of data, and will allow for more metrics to be added without simply overcrowding the page with text.

First of all, we calculate the average volume in each round and the overall average volume of all rounds.
[[File:chart_data_organize.png]]

Next, we organize all the data and their corresponding label array for the chart drawing method later.

[[File:chart_data_array.png]]

Finally, we apply an extension called chartjs-ror to help us draw horizontal bar charts. Most of the codes in this method relate to the configuration setting of the chart.
[[File:metric_chart_config_code.png]]

[[File:metric_chart_config_code1.png]]

The result of our improvement doesn't have its value explicitly showed because we want to save more space and let the chart be simpler to read. Yet, you can let your mouse points the bar, then the value will show up as seen in the figures below.

[[File:chart_no_value.png]]

[[File:metric_chart_value.png]]

=== Update alternating background color if sorted ===

In order to make the large table which dominates this page easier to read, each row has an alternating background color (between white and a yellow-green). Although this helps tremendously with readability, the alternating background colors do not update when the table is sorted. That is, if any of the sort functions are used, the background colors move with the associated rows, effectively shuffling the colors of each row. This, in fact, harms the readability of the page, and creates false groupings of visually similar rows.

[[File:AlterColors2018.png]]

Review Report sorted by metrics:

[[File:SortByMetr2018.png]]

====Solution====
=====Files=====
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss

Fixing the alternating background color involved removing the existing backgrounding mechanism in _review_report.html.erb and applying the "zebra" widget to the existing java tablesorter table. 
[[File:Alt_background.PNG]] 
Defining the colors for odd and even rows was just a style fix in the table_sorter.scss file. 
[[File:Alt_background_css.PNG]] 

Both of these changes yields a table that updates the backgrounds of each element appropriately, even when the table is sorted. 
[[File:Table_alt_bg.PNG]] 

=== Add new color to Team reviewed ===

On this page, the names of teams reviewed are color-coded, to make it easier for instructors to see common issues.
For example, if a student has not completed a review for a team in every round, the team name is colored red. If a student has completed a review for a team either in every round or not, and has not received a grade, the team name is colored blue. A brown-colored team name indicates that the review grade has been assigned. However, the current color coding scheme assigns a blue color to a team name as long as there is A review. Thus, there is no distinction between the cases when a team's work has been reviewed in the previous round, but the team has not resubmitted their work in the following round, and if the team has resubmitted a work in a round, but there is no review in that round. That is, students may be marked explicitly as having done no work when they have nothing to review in the latest round. Thus, the plan is to add new colors to refactor the case of assigning blue color to team names.

[[File:TeamReviewed2018.png]]

====Solution====
=====Files=====
* app/views/review_mapping/_review_report.html.erb
* app/helpers/review_mapping_helper.rb
* config/application.rb
* app/assets/stylesheets/redbox.scss

Once again, if a student originally completed a review during the first round, but did not update it, AND the project under review has not been changed since the initial review, the reviewer should not be penalized. Reviewers who meet these criteria will be given a green color, otherwise, purple color.

To make new colors assignment work, firstly, we needed to define both new colors in app/assets/stylesheets/redbox.scss:

<pre>
#green a{
color: #00aa00;
}
#green{
height:auto;
}

#purple a{
color: #FF00FF;
}

#purple{
height:auto;
}
</pre>

The actual implementation of refining new logic of color assignment and its supporting methods was added to app/helpers/review_mapping_helper.rb. For this project we had to extend the logic of Response.exists?(map_id: response_map.id) condition:

- assign 'blue' to team reviewed only if the review grade is not assigned, and there is a review for each round;

- assign 'purple' if a team submitted their work within a round, but a student did not review it within that round, or if the team submitted a link in the previous round, and the link was updated within the following round;

- assign 'green' if there is no work to review within a round, or if the team submitted a link in the previous round, and the link was NOT updated within the following round;

Right now the method supports only wiki links, and can return their last-modified date. In the future, it can be extended to support github links.

<pre>
if Response.exists?(map_id: response_map.id)
if !response_map.try(:reviewer).try(:review_grade).nil?
'brown'
elsif response_for_each_round?(response_map)
'blue'
else
color = []
(1..@assignment.num_review_rounds).each do |round|
if submitted_within_round?(round, response_map, assignment_created, assignment_due_dates)
color.push 'purple'
else
link = submitted_hyperlink(round, response_map, assignment_created, assignment_due_dates)
if link.nil? or (link !~ /https*:\/\/wiki(.*)/) # can be extended for github links in future
color.push 'green'
else
link_updated_at = get_link_updated_at(link)
color.push link_updated_since_last?(round, assignment_due_dates, link_updated_at) ? 'purple' : 'green'
end
end
end
color[-1]
end
else
'red'
end
</pre>

The rest of new methods definitions, such as:
* response_for_each_round?
* submitted_within_round?
* submitted_hyperlink
* get_link_updated_at
* link_updated_since_last?
can be found in app/helpers/review_mapping_helper.rb.

To support the mechanism of getting last-modified header, we had to add "require 'net/https'" to config/application.rb.

The following screen-shot represents a case when a team submitted their work within a round, but a student did not review it within that round:

[[File:Review_wasnt_subm.png]]

This screen-shot represents a case when a team submitted a link in the last round, and the link was NOT updated within the next round. Thus, to avoid penalizing a student for no submitted review, the team name is assigned green color:

[[File:No_work_to_review.png]]

To reflect new color assignments, we updated the legend from app/views/review_mapping/_review_report.html.erb:

<pre>
 **In "Team reviewed" column, text in red indicates that the review is not yet completed;
text in blue indicates that the review grade is not assigned or updated;
text in brown indicates that the review grade has been assigned;
text in green indicates that there is no work to review;
text in purple indicates that there is no review for a team's work
</pre>

This is the updated legend:

[[File:New_legend.png]]

== Review Summary page ==

=== Header ===

[[File:NoHeader_2018.png]]

* collapse (fix whitespace where possible)
* add reviewers name to easily tell who's review you are looking at, as well as course and assignment this relates to
* fix round capitalization and add space between word round and the round number

==== Solution ====
* Most changes were front end, made to the view_review_scores_popup

[[File:HeaderScreenshot01.png]]

=== Questions should span the entire row ===

[[File:Question_Span.png]]

* Add colspan attribute which would allow the question to span the entire column which would then allow the name column to be smaller and the comment column to be larger.

==== Solution ====

* As mentioned, adding the colspan=3 attribute allowed the question to span the entire column. This was a purely client-side change.

[[File:Question_Span_Sol.png]]

=== Checkbox questions ===

[[File:Check_Question.png]]

* Replace individual team members name with just the team name
* Delete the comments column since comments aren't allowed in these types of questions
* Questions should be in a column that spans the width of the table.
* The team names that the reviewer reviewed should be in the following row separated into columns.
* The index in the table will have a check if the question was answered with a check and an X if answered otherwise. Each team will be represented as a column with its answer, check or X image, underneath.
====Solution====
=====Files=====
* app/views/popup/view_review_scores_popup.html.erb
Fixing this involved mostly html changes. Representing the team names instead of individual names was simply using the team attribute instead of the individual's name. Having questions span the entire table involved adding colspan attributes where necessary. Deleting the comments column for as well as representing each team and their answers in columns involved nesting a table into the existing table based on the question type. Representing the checkbox questions as pictures of a check and an X was as easy as showing an image based on the type of questions. 
[[File:CB_Code.PNG]] 
All of the above changes resulted in a checkbox section that looks like this: 
[[File:CB_Table.PNG]] 

=== Additional comments spanning ===

[[File:AdditionalComments.png]]

* Additional comments should span across all of the columns to save vertical space

==== Solution ====

* Several front-end changes result in a cleaner Additional Comments section which saves additional space by adding the Reviewer to a new column

[[File:AdditionalComments_Sol.png]]

=== CSS / Style improvements to review scores ===
* Add addition colors for reviews that didn't do a second(third,forth,etc) round review. In other words if the review hasn't changed from the previous round, color that review(er) a different color so instructors don't have to open the review and see that it hasn't changed.

== Test Plan ==
This project would be manually tested since it's all about UI improvement. To show that it's fully tested, we will record the manual tests for each goal we plan to achieve and of course, it will include audio and video. The video would be posted on Youtube so that it's easy for everyone to watch.

Here is the link to the demo video on Youtube:
https://www.youtube.com/watch?v=HHdta64VHcY

== Optional additional improvements ==

=== User Report Page ===
Another piece of low hanging fruit that we decided to tackle was the User report page, which shows the response for an individual review instead of the summary of all of the reviews done. You get to this page by clicking on a team name in the "Team Reviewed" column of the Review Report table(shown above). The edits made on this page where reflective of the edits made on the summary page to enure consistent styles between the two different types of reviewing reviews.
====Solution====
=====Files=====
* app/views/popup/team_users_pop_up.html.haml
The fixes to this page involved adding colspan's and adjusting what is displayed in score column based on whether the question is a checkbox question or not. 
[[File:User_popup_code.PNG]] 
The changes to the code above leads to a following table: 
[[File:User_popup_table.PNG]] 

----

== References ==

* [https://github.com/bawagne2/expertiza Our project Git Repo]

CSC/ECE 517 Spring 2018 E1815: Improvements to review grader

2018-04-26T17:27:18Z

Cchen31: /* Files */

Improvements to Review Grader

__TOC__
== Abstract ==
In this design doc, since it's clearer to explain how we are going to improve the UI design by proposing each idea with the corresponding design's current image, we aren't going to separate problems from goals because you, as a reader, will need to scroll up and down to match problems to their corresponding goals.

== Introduction ==
Expertiza is a web application that is widely used by 2 types of users: students and instructors. When a user is logged-in as an instructor, and would like to see a review report on an assignment to review a grader, he/she could reach the page via Manage > Assignments and clicking on the “'''View review report'''” icon. The page would look somewhat like this:

[[File:Rev_report2018.png]]

To get a summary review report performed by a particular student, an instructor can get to the page from the review report by clicking “'''summary'''” in the row for that student. The page would look like this one:

[[File:Summary_report2018.png]]

== Problem Statement ==

This project is focused primarily on making various improvements to the Review Report and Review Summary pages, described in detail in the previous section. Each of these pages, while functional, suffer from many UI issues which make the pages more difficult to use for instructors. That is, information which would be useful to instructors is missing in several cases. In others, large amounts of unnecessary information is present, cluttering the site. Additionally, both pages suffer from structural and design issues which, again, waste instructor time.

Finally, the Review Report page sometimes mis-categorizes students who have not updated their reviews of others, even though the project under review has not changed! This could cause students to be deducted points unfairly. By adding a new way of highlighting this special case to instructors, review grades can be assigned more fairly.

== File Changes ==
* app/helpers/review_mapping_helper.rb for Add metrics charts
* app/views/popup/view_review_scores_popup.html.erb
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss
* app/helpers/review_mapping_helper.rb
* app/views/popup/team_users_pop_up.html.haml

== Review Report Page==

=== Add metrics charts ===

Presently, this page contains a 'metrics' column, presently displaying the average review volume for a given user in text form. This method of displaying data can be difficult to interpret, and even more difficult to compare at a glance, or to notice trends. Additionally, plans for expanding the metrics column to include more data would worsen this issue if it remained in its current state.

[[File:Metrics2018.png]]

====Solution====
=====Files=====
* app/helpers/review_mapping_helper.rb

This project will replace the text in this column with easy to read bar or line graphs, which will be color-coded or otherwise made very simple and easy to read. These graphs will display the data clearly and concisely, mitigating these issues. This concise display will allow for easier comparison of data, easier interpretation of data, and will allow for more metrics to be added without simply overcrowding the page with text.

First of all, we calculate the average volume in each round and the overall average volume of all rounds.
[[File:chart_data_organize.png]]

Next, we organize all the data and their corresponding label array for the chart drawing method later.

[[File:chart_data_array.png]]

Finally, we apply an extension called chartjs-ror to help us draw horizontal bar charts. Most of the codes in this method relate to the configuration setting of the chart.
[[File:metric_chart_config_code.png]]

[[File:metric_chart_config_code1.png]]

The result of our improvement doesn't have its value explicitly showed because we want to save more space and let the chart be simpler to read. Yet, you can let your mouse points the bar, then the value will show up as seen in the figures below.

[[File:chart_no_value.png]]

[[File:metric_chart_value.png]]

=== Update alternating background color if sorted ===

In order to make the large table which dominates this page easier to read, each row has an alternating background color (between white and a yellow-green). Although this helps tremendously with readability, the alternating background colors do not update when the table is sorted. That is, if any of the sort functions are used, the background colors move with the associated rows, effectively shuffling the colors of each row. This, in fact, harms the readability of the page, and creates false groupings of visually similar rows.

[[File:AlterColors2018.png]]

Review Report sorted by metrics:

[[File:SortByMetr2018.png]]

====Solution====
=====Files=====
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss

Fixing the alternating background color involved removing the existing backgrounding mechanism in _review_report.html.erb and applying the "zebra" widget to the existing java tablesorter table. 
[[File:Alt_background.PNG]] 
Defining the colors for odd and even rows was just a style fix in the table_sorter.scss file. 
[[File:Alt_background_css.PNG]] 

Both of these changes yields a table that updates the backgrounds of each element appropriately, even when the table is sorted. 
[[File:Table_alt_bg.PNG]] 

=== Add new color to Team reviewed ===

On this page, the names of teams reviewed are color-coded, to make it easier for instructors to see common issues.
For example, if a reviewer has not completed a review for a team, the team name is colored red. If a reviewer has completed a review for a team, but has not received a grade, the team name is colored blue. A brown-colored team name indicates that the review grade has been assigned. However, as mentioned earlier, the current color coding scheme assigns a red color to a team name in the case when a reviewer has reviewed the team's work, but the team has not resubmitted. That is, students may be marked explicitly as having done no work when they have nothing to review in the latest round.

[[File:TeamReviewed2018.png]]

As part of this project, we will add a new color-code to team reviewed colomn in this case. Once again, if a student originally completed a review during the first round, but did not update it, AND the project under review has not been changed since the initial review, the reviewer should not be penalized. Reviewers who meet these criteria will be given a new color, potentially green.

== Review Summary page ==

=== Header ===

[[File:NoHeader_2018.png]]

* collapse (fix whitespace where possible)
* add reviewers name to easily tell who's review you are looking at, as well as course and assignment this relates to
* fix round capitalization and add space between word round and the round number

=== Questions should span the entire row ===

[[File:Question_Span.png]]

* Add colspan attribute which would allow the question to span the entire column which would then allow the name column to be smaller and the comment column to be larger.

=== Checkbox questions ===

[[File:Check_Question.png]]

* Replace individual team members name with just the team name
* Delete the comments column since comments aren't allowed in these types of questions
* Questions should be in a column that spans the width of the table.
* The team names that the reviewer reviewed should be in the following row separated into columns.
* The index in the table will have a check if the question was answered with a check and an X if answered otherwise. Each team will be represented as a column with its answer, check or X image, underneath.
====Solution====
=====Files=====
* app/views/popup/view_review_scores_popup.html.erb
Fixing this involved mostly html changes. Representing the team names instead of individual names was simply using the team attribute instead of the individual's name. Having questions span the entire table involved adding colspan attributes where necessary. Deleting the comments column for as well as representing each team and their answers in columns involved nesting a table into the existing table based on the question type. Representing the checkbox questions as pictures of a check and an X was as easy as showing an image based on the type of questions. 
[[File:CB_Code.PNG]] 
All of the above changes resulted in a checkbox section that looks like this: 
[[File:CB_Table.PNG]] 

=== Additional comments spanning ===

[[File:AdditionalComments.png]]

* Additional comments should span across all of the columns to save vertical space

=== CSS / Style improvements to review scores ===
* Add addition colors for reviews that didn't do a second(third,forth,etc) round review. In other words if the review hasn't changed from the previous round, color that review(er) a different color so instructors don't have to open the review and see that it hasn't changed.

== Test Plan ==
This project would be manually tested since it's all about UI improvement. To show that it's fully tested, we will record the manual tests for each goal we plan to achieve and of course, it will include audio and video. The video would be posted on Youtube so that it's easy for everyone to watch.

== Optional additional improvements ==

=== Review Report page - sort by other metrics ===

Ideally, this page would have an option to allow instructors to sort by any metric. Presently, only one metric is shown, but adding more has been planned for the future. This may require the addition of a drop-down to allow the selection of what metric to sort by. However this is implemented, it may not add too much complexity to the page.

=== User Report Page ===
Another piece of low hanging fruit that we decided to tackle was the User report page, which shows the response for an individual review instead of the summary of all of the reviews done. You get to this page by clicking on a team name in the "Team Reviewed" column of the Review Report table(shown above). The edits made on this page where reflective of the edits made on the summary page to enure consistent styles between the two different types of reviewing reviews.
====Solution====
=====Files=====
* app/views/popup/team_users_pop_up.html.haml
The fixes to this page involved adding colspan's and adjusting what is displayed in score column based on whether the question is a checkbox question or not. 
[[File:User_popup_code.PNG]] 
The changes to the code above leads to a following table: 
[[File:User_popup_table.PNG]] 

=== Review Summary page - Interpret HTML ===
Presently, users may enter HTML code to style their comments and reviews. However, this is currently not displayed properly. For example, HTML tags will themselves be displayed. The addition of a gem or potentially configuration changes will be needed to ensure this HTML will be properly displayed. Any implementation of this task should follow the DRY principle - that is, the implementation should be able to be re-used in all other pages where user-entered HTMl should be displayed

----

== References ==

* [https://github.com/bawagne2/expertiza Our project Git Repo]

File:Metric chart value.png

2018-04-26T17:25:35Z

Cchen31: uploaded a new version of "File:Metric chart value.png"

CSC/ECE 517 Spring 2018 E1815: Improvements to review grader

2018-04-26T17:25:08Z

Cchen31: /* Files */

Improvements to Review Grader

__TOC__
== Abstract ==
In this design doc, since it's clearer to explain how we are going to improve the UI design by proposing each idea with the corresponding design's current image, we aren't going to separate problems from goals because you, as a reader, will need to scroll up and down to match problems to their corresponding goals.

== Introduction ==
Expertiza is a web application that is widely used by 2 types of users: students and instructors. When a user is logged-in as an instructor, and would like to see a review report on an assignment to review a grader, he/she could reach the page via Manage > Assignments and clicking on the “'''View review report'''” icon. The page would look somewhat like this:

[[File:Rev_report2018.png]]

To get a summary review report performed by a particular student, an instructor can get to the page from the review report by clicking “'''summary'''” in the row for that student. The page would look like this one:

[[File:Summary_report2018.png]]

== Problem Statement ==

This project is focused primarily on making various improvements to the Review Report and Review Summary pages, described in detail in the previous section. Each of these pages, while functional, suffer from many UI issues which make the pages more difficult to use for instructors. That is, information which would be useful to instructors is missing in several cases. In others, large amounts of unnecessary information is present, cluttering the site. Additionally, both pages suffer from structural and design issues which, again, waste instructor time.

Finally, the Review Report page sometimes mis-categorizes students who have not updated their reviews of others, even though the project under review has not changed! This could cause students to be deducted points unfairly. By adding a new way of highlighting this special case to instructors, review grades can be assigned more fairly.

== File Changes ==
* app/helpers/review_mapping_helper.rb for Add metrics charts
* app/views/popup/view_review_scores_popup.html.erb
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss
* app/helpers/review_mapping_helper.rb
* app/views/popup/team_users_pop_up.html.haml

== Review Report Page==

=== Add metrics charts ===

Presently, this page contains a 'metrics' column, presently displaying the average review volume for a given user in text form. This method of displaying data can be difficult to interpret, and even more difficult to compare at a glance, or to notice trends. Additionally, plans for expanding the metrics column to include more data would worsen this issue if it remained in its current state.

[[File:Metrics2018.png]]

====Solution====
=====Files=====
* app/helpers/review_mapping_helper.rb

This project will replace the text in this column with easy to read bar or line graphs, which will be color-coded or otherwise made very simple and easy to read. These graphs will display the data clearly and concisely, mitigating these issues. This concise display will allow for easier comparison of data, easier interpretation of data, and will allow for more metrics to be added without simply overcrowding the page with text.

First of all, we calculate the average volume of a reviewer in each round and the overall average volume of all the reviewers.
[[File:chart_data_organize.png]]

Next, we organize all the data and their corresponding label array for the chart drawing method later.

[[File:chart_data_array.png]]

Finally, we apply an extension called chartjs-ror to help us draw horizontal bar charts. Most of the codes in this method relate to the configuration setting of the chart.
[[File:metric_chart_config_code.png]]

[[File:metric_chart_config_code1.png]]

The result of our improvement doesn't have its value explicitly showed because we want to save more space and let the chart be simpler to read. Yet, you can let your mouse points the bar, then the value will show up as seen in the figures below.

[[File:chart_no_value.png]]

[[File:metric_chart_value.png]]

=== Update alternating background color if sorted ===

In order to make the large table which dominates this page easier to read, each row has an alternating background color (between white and a yellow-green). Although this helps tremendously with readability, the alternating background colors do not update when the table is sorted. That is, if any of the sort functions are used, the background colors move with the associated rows, effectively shuffling the colors of each row. This, in fact, harms the readability of the page, and creates false groupings of visually similar rows.

[[File:AlterColors2018.png]]

Review Report sorted by metrics:

[[File:SortByMetr2018.png]]

====Solution====
=====Files=====
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss

Fixing the alternating background color involved removing the existing backgrounding mechanism in _review_report.html.erb and applying the "zebra" widget to the existing java tablesorter table. 
[[File:Alt_background.PNG]] 
Defining the colors for odd and even rows was just a style fix in the table_sorter.scss file. 
[[File:Alt_background_css.PNG]] 

Both of these changes yields a table that updates the backgrounds of each element appropriately, even when the table is sorted. 
[[File:Table_alt_bg.PNG]] 

=== Add new color to Team reviewed ===

On this page, the names of teams reviewed are color-coded, to make it easier for instructors to see common issues.
For example, if a reviewer has not completed a review for a team, the team name is colored red. If a reviewer has completed a review for a team, but has not received a grade, the team name is colored blue. A brown-colored team name indicates that the review grade has been assigned. However, as mentioned earlier, the current color coding scheme assigns a red color to a team name in the case when a reviewer has reviewed the team's work, but the team has not resubmitted. That is, students may be marked explicitly as having done no work when they have nothing to review in the latest round.

[[File:TeamReviewed2018.png]]

As part of this project, we will add a new color-code to team reviewed colomn in this case. Once again, if a student originally completed a review during the first round, but did not update it, AND the project under review has not been changed since the initial review, the reviewer should not be penalized. Reviewers who meet these criteria will be given a new color, potentially green.

== Review Summary page ==

=== Header ===

[[File:NoHeader_2018.png]]

* collapse (fix whitespace where possible)
* add reviewers name to easily tell who's review you are looking at, as well as course and assignment this relates to
* fix round capitalization and add space between word round and the round number

=== Questions should span the entire row ===

[[File:Question_Span.png]]

* Add colspan attribute which would allow the question to span the entire column which would then allow the name column to be smaller and the comment column to be larger.

=== Checkbox questions ===

[[File:Check_Question.png]]

* Replace individual team members name with just the team name
* Delete the comments column since comments aren't allowed in these types of questions
* Questions should be in a column that spans the width of the table.
* The team names that the reviewer reviewed should be in the following row separated into columns.
* The index in the table will have a check if the question was answered with a check and an X if answered otherwise. Each team will be represented as a column with its answer, check or X image, underneath.
====Solution====
=====Files=====
* app/views/popup/view_review_scores_popup.html.erb
Fixing this involved mostly html changes. Representing the team names instead of individual names was simply using the team attribute instead of the individual's name. Having questions span the entire table involved adding colspan attributes where necessary. Deleting the comments column for as well as representing each team and their answers in columns involved nesting a table into the existing table based on the question type. Representing the checkbox questions as pictures of a check and an X was as easy as showing an image based on the type of questions. 
[[File:CB_Code.PNG]] 
All of the above changes resulted in a checkbox section that looks like this: 
[[File:CB_Table.PNG]] 

=== Additional comments spanning ===

[[File:AdditionalComments.png]]

* Additional comments should span across all of the columns to save vertical space

=== CSS / Style improvements to review scores ===
* Add addition colors for reviews that didn't do a second(third,forth,etc) round review. In other words if the review hasn't changed from the previous round, color that review(er) a different color so instructors don't have to open the review and see that it hasn't changed.

== Test Plan ==
This project would be manually tested since it's all about UI improvement. To show that it's fully tested, we will record the manual tests for each goal we plan to achieve and of course, it will include audio and video. The video would be posted on Youtube so that it's easy for everyone to watch.

== Optional additional improvements ==

=== Review Report page - sort by other metrics ===

Ideally, this page would have an option to allow instructors to sort by any metric. Presently, only one metric is shown, but adding more has been planned for the future. This may require the addition of a drop-down to allow the selection of what metric to sort by. However this is implemented, it may not add too much complexity to the page.

=== User Report Page ===
Another piece of low hanging fruit that we decided to tackle was the User report page, which shows the response for an individual review instead of the summary of all of the reviews done. You get to this page by clicking on a team name in the "Team Reviewed" column of the Review Report table(shown above). The edits made on this page where reflective of the edits made on the summary page to enure consistent styles between the two different types of reviewing reviews.
====Solution====
=====Files=====
* app/views/popup/team_users_pop_up.html.haml
The fixes to this page involved adding colspan's and adjusting what is displayed in score column based on whether the question is a checkbox question or not. 
[[File:User_popup_code.PNG]] 
The changes to the code above leads to a following table: 
[[File:User_popup_table.PNG]] 

=== Review Summary page - Interpret HTML ===
Presently, users may enter HTML code to style their comments and reviews. However, this is currently not displayed properly. For example, HTML tags will themselves be displayed. The addition of a gem or potentially configuration changes will be needed to ensure this HTML will be properly displayed. Any implementation of this task should follow the DRY principle - that is, the implementation should be able to be re-used in all other pages where user-entered HTMl should be displayed

----

== References ==

* [https://github.com/bawagne2/expertiza Our project Git Repo]

File:Metric chart value.png

2018-04-26T17:24:26Z

Cchen31: uploaded a new version of "File:Metric chart value.png"

CSC/ECE 517 Spring 2018 E1815: Improvements to review grader

2018-04-26T17:23:50Z

Cchen31: /* Files */

Improvements to Review Grader

__TOC__
== Abstract ==
In this design doc, since it's clearer to explain how we are going to improve the UI design by proposing each idea with the corresponding design's current image, we aren't going to separate problems from goals because you, as a reader, will need to scroll up and down to match problems to their corresponding goals.

== Introduction ==
Expertiza is a web application that is widely used by 2 types of users: students and instructors. When a user is logged-in as an instructor, and would like to see a review report on an assignment to review a grader, he/she could reach the page via Manage > Assignments and clicking on the “'''View review report'''” icon. The page would look somewhat like this:

[[File:Rev_report2018.png]]

To get a summary review report performed by a particular student, an instructor can get to the page from the review report by clicking “'''summary'''” in the row for that student. The page would look like this one:

[[File:Summary_report2018.png]]

== Problem Statement ==

This project is focused primarily on making various improvements to the Review Report and Review Summary pages, described in detail in the previous section. Each of these pages, while functional, suffer from many UI issues which make the pages more difficult to use for instructors. That is, information which would be useful to instructors is missing in several cases. In others, large amounts of unnecessary information is present, cluttering the site. Additionally, both pages suffer from structural and design issues which, again, waste instructor time.

Finally, the Review Report page sometimes mis-categorizes students who have not updated their reviews of others, even though the project under review has not changed! This could cause students to be deducted points unfairly. By adding a new way of highlighting this special case to instructors, review grades can be assigned more fairly.

== File Changes ==
* app/helpers/review_mapping_helper.rb for Add metrics charts
* app/views/popup/view_review_scores_popup.html.erb
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss
* app/helpers/review_mapping_helper.rb
* app/views/popup/team_users_pop_up.html.haml

== Review Report Page==

=== Add metrics charts ===

Presently, this page contains a 'metrics' column, presently displaying the average review volume for a given user in text form. This method of displaying data can be difficult to interpret, and even more difficult to compare at a glance, or to notice trends. Additionally, plans for expanding the metrics column to include more data would worsen this issue if it remained in its current state.

[[File:Metrics2018.png]]

====Solution====
=====Files=====
* app/helpers/review_mapping_helper.rb

This project will replace the text in this column with easy to read bar or line graphs, which will be color-coded or otherwise made very simple and easy to read. These graphs will display the data clearly and concisely, mitigating these issues. This concise display will allow for easier comparison of data, easier interpretation of data, and will allow for more metrics to be added without simply overcrowding the page with text.

First of all, we calculate the average volume of a reviewer in each round and the overall average volume of all the reviewers.
[[File:chart_data_organize.png]]

Next, we organize all the data and their corresponding label array for the chart drawing method later.

[[File:chart_data_array.png]]

Finally, we apply an extension called chartjs-ror to help us draw horizontal bar charts. Most of the codes in this method relate to the configuration setting of the chart.
[[File:metric_chart_config_code.png]]

[[File:metric_chart_config_code1.png]]

The result of our improvement doesn't have its value explicitly showed because we want to save more space and let the chart be simpler to read. Yet, you can let your mouse points the bar, then the value will show up as seen in the figures below.
[[File:chart_no_value.png]]

[[File:metric_chart_value.png]]

=== Update alternating background color if sorted ===

In order to make the large table which dominates this page easier to read, each row has an alternating background color (between white and a yellow-green). Although this helps tremendously with readability, the alternating background colors do not update when the table is sorted. That is, if any of the sort functions are used, the background colors move with the associated rows, effectively shuffling the colors of each row. This, in fact, harms the readability of the page, and creates false groupings of visually similar rows.

[[File:AlterColors2018.png]]

Review Report sorted by metrics:

[[File:SortByMetr2018.png]]

====Solution====
=====Files=====
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss

Fixing the alternating background color involved removing the existing backgrounding mechanism in _review_report.html.erb and applying the "zebra" widget to the existing java tablesorter table. 
[[File:Alt_background.PNG]] 
Defining the colors for odd and even rows was just a style fix in the table_sorter.scss file. 
[[File:Alt_background_css.PNG]] 

Both of these changes yields a table that updates the backgrounds of each element appropriately, even when the table is sorted. 
[[File:Table_alt_bg.PNG]] 

=== Add new color to Team reviewed ===

On this page, the names of teams reviewed are color-coded, to make it easier for instructors to see common issues.
For example, if a reviewer has not completed a review for a team, the team name is colored red. If a reviewer has completed a review for a team, but has not received a grade, the team name is colored blue. A brown-colored team name indicates that the review grade has been assigned. However, as mentioned earlier, the current color coding scheme assigns a red color to a team name in the case when a reviewer has reviewed the team's work, but the team has not resubmitted. That is, students may be marked explicitly as having done no work when they have nothing to review in the latest round.

[[File:TeamReviewed2018.png]]

As part of this project, we will add a new color-code to team reviewed colomn in this case. Once again, if a student originally completed a review during the first round, but did not update it, AND the project under review has not been changed since the initial review, the reviewer should not be penalized. Reviewers who meet these criteria will be given a new color, potentially green.

== Review Summary page ==

=== Header ===

[[File:NoHeader_2018.png]]

* collapse (fix whitespace where possible)
* add reviewers name to easily tell who's review you are looking at, as well as course and assignment this relates to
* fix round capitalization and add space between word round and the round number

=== Questions should span the entire row ===

[[File:Question_Span.png]]

* Add colspan attribute which would allow the question to span the entire column which would then allow the name column to be smaller and the comment column to be larger.

=== Checkbox questions ===

[[File:Check_Question.png]]

* Replace individual team members name with just the team name
* Delete the comments column since comments aren't allowed in these types of questions
* Questions should be in a column that spans the width of the table.
* The team names that the reviewer reviewed should be in the following row separated into columns.
* The index in the table will have a check if the question was answered with a check and an X if answered otherwise. Each team will be represented as a column with its answer, check or X image, underneath.
====Solution====
=====Files=====
* app/views/popup/view_review_scores_popup.html.erb
Fixing this involved mostly html changes. Representing the team names instead of individual names was simply using the team attribute instead of the individual's name. Having questions span the entire table involved adding colspan attributes where necessary. Deleting the comments column for as well as representing each team and their answers in columns involved nesting a table into the existing table based on the question type. Representing the checkbox questions as pictures of a check and an X was as easy as showing an image based on the type of questions. 
[[File:CB_Code.PNG]] 
All of the above changes resulted in a checkbox section that looks like this: 
[[File:CB_Table.PNG]] 

=== Additional comments spanning ===

[[File:AdditionalComments.png]]

* Additional comments should span across all of the columns to save vertical space

=== CSS / Style improvements to review scores ===
* Add addition colors for reviews that didn't do a second(third,forth,etc) round review. In other words if the review hasn't changed from the previous round, color that review(er) a different color so instructors don't have to open the review and see that it hasn't changed.

== Test Plan ==
This project would be manually tested since it's all about UI improvement. To show that it's fully tested, we will record the manual tests for each goal we plan to achieve and of course, it will include audio and video. The video would be posted on Youtube so that it's easy for everyone to watch.

== Optional additional improvements ==

=== Review Report page - sort by other metrics ===

Ideally, this page would have an option to allow instructors to sort by any metric. Presently, only one metric is shown, but adding more has been planned for the future. This may require the addition of a drop-down to allow the selection of what metric to sort by. However this is implemented, it may not add too much complexity to the page.

=== User Report Page ===
Another piece of low hanging fruit that we decided to tackle was the User report page, which shows the response for an individual review instead of the summary of all of the reviews done. You get to this page by clicking on a team name in the "Team Reviewed" column of the Review Report table(shown above). The edits made on this page where reflective of the edits made on the summary page to enure consistent styles between the two different types of reviewing reviews.
====Solution====
=====Files=====
* app/views/popup/team_users_pop_up.html.haml
The fixes to this page involved adding colspan's and adjusting what is displayed in score column based on whether the question is a checkbox question or not. 
[[File:User_popup_code.PNG]] 
The changes to the code above leads to a following table: 
[[File:User_popup_table.PNG]] 

=== Review Summary page - Interpret HTML ===
Presently, users may enter HTML code to style their comments and reviews. However, this is currently not displayed properly. For example, HTML tags will themselves be displayed. The addition of a gem or potentially configuration changes will be needed to ensure this HTML will be properly displayed. Any implementation of this task should follow the DRY principle - that is, the implementation should be able to be re-used in all other pages where user-entered HTMl should be displayed

----

== References ==

* [https://github.com/bawagne2/expertiza Our project Git Repo]

File:Metric chart value.png

2018-04-26T17:22:14Z

Cchen31:

File:Chart no value.png

2018-04-26T17:22:02Z

Cchen31:

File:Metric chart config code1.png

2018-04-26T17:21:48Z

Cchen31:

File:Metric chart config code.png

2018-04-26T17:21:34Z

Cchen31: uploaded a new version of "File:Metric chart config code.png"

CSC/ECE 517 Spring 2018 E1815: Improvements to review grader

2018-04-26T17:20:21Z

Cchen31: /* Files */

Improvements to Review Grader

__TOC__
== Abstract ==
In this design doc, since it's clearer to explain how we are going to improve the UI design by proposing each idea with the corresponding design's current image, we aren't going to separate problems from goals because you, as a reader, will need to scroll up and down to match problems to their corresponding goals.

== Introduction ==
Expertiza is a web application that is widely used by 2 types of users: students and instructors. When a user is logged-in as an instructor, and would like to see a review report on an assignment to review a grader, he/she could reach the page via Manage > Assignments and clicking on the “'''View review report'''” icon. The page would look somewhat like this:

[[File:Rev_report2018.png]]

To get a summary review report performed by a particular student, an instructor can get to the page from the review report by clicking “'''summary'''” in the row for that student. The page would look like this one:

[[File:Summary_report2018.png]]

== Problem Statement ==

This project is focused primarily on making various improvements to the Review Report and Review Summary pages, described in detail in the previous section. Each of these pages, while functional, suffer from many UI issues which make the pages more difficult to use for instructors. That is, information which would be useful to instructors is missing in several cases. In others, large amounts of unnecessary information is present, cluttering the site. Additionally, both pages suffer from structural and design issues which, again, waste instructor time.

Finally, the Review Report page sometimes mis-categorizes students who have not updated their reviews of others, even though the project under review has not changed! This could cause students to be deducted points unfairly. By adding a new way of highlighting this special case to instructors, review grades can be assigned more fairly.

== File Changes ==
* app/helpers/review_mapping_helper.rb for Add metrics charts
* app/views/popup/view_review_scores_popup.html.erb
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss
* app/helpers/review_mapping_helper.rb
* app/views/popup/team_users_pop_up.html.haml

== Review Report Page==

=== Add metrics charts ===

Presently, this page contains a 'metrics' column, presently displaying the average review volume for a given user in text form. This method of displaying data can be difficult to interpret, and even more difficult to compare at a glance, or to notice trends. Additionally, plans for expanding the metrics column to include more data would worsen this issue if it remained in its current state.

[[File:Metrics2018.png]]

====Solution====
=====Files=====
* app/helpers/review_mapping_helper.rb

This project will replace the text in this column with easy to read bar or line graphs, which will be color-coded or otherwise made very simple and easy to read. These graphs will display the data clearly and concisely, mitigating these issues. This concise display will allow for easier comparison of data, easier interpretation of data, and will allow for more metrics to be added without simply overcrowding the page with text.

First of all, we calculate the average volume of a reviewer in each round and the overall average volume of all the reviewers.
[[File:chart_data_organize.png]]

Next, we organize all the data and their corresponding label array for the chart drawing method later.

[[File:chart_data_array.png]]

Finally, we apply an extension called chartjs-ror to help us draw horizontal bar charts. Most of the codes in this method relate to the configuration setting of the chart.
[[File:metric_chart_config_code.png]]

[[File:metric_chart_config_code1.png]]

The result of our improvement doesn't have its value explicitly showed because we want to save more space and let the chart simpler to read. Yet, you can let your mouse points the bar, then the value will show up as seen in the figures below.
[[File:chart_no_value.png]]

[[File:metric_chart_value.png]]

=== Update alternating background color if sorted ===

In order to make the large table which dominates this page easier to read, each row has an alternating background color (between white and a yellow-green). Although this helps tremendously with readability, the alternating background colors do not update when the table is sorted. That is, if any of the sort functions are used, the background colors move with the associated rows, effectively shuffling the colors of each row. This, in fact, harms the readability of the page, and creates false groupings of visually similar rows.

[[File:AlterColors2018.png]]

Review Report sorted by metrics:

[[File:SortByMetr2018.png]]

====Solution====
=====Files=====
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss

Fixing the alternating background color involved removing the existing backgrounding mechanism in _review_report.html.erb and applying the "zebra" widget to the existing java tablesorter table. 
[[File:Alt_background.PNG]] 
Defining the colors for odd and even rows was just a style fix in the table_sorter.scss file. 
[[File:Alt_background_css.PNG]] 

Both of these changes yields a table that updates the backgrounds of each element appropriately, even when the table is sorted. 
[[File:Table_alt_bg.PNG]] 

=== Add new color to Team reviewed ===

On this page, the names of teams reviewed are color-coded, to make it easier for instructors to see common issues.
For example, if a reviewer has not completed a review for a team, the team name is colored red. If a reviewer has completed a review for a team, but has not received a grade, the team name is colored blue. A brown-colored team name indicates that the review grade has been assigned. However, as mentioned earlier, the current color coding scheme assigns a red color to a team name in the case when a reviewer has reviewed the team's work, but the team has not resubmitted. That is, students may be marked explicitly as having done no work when they have nothing to review in the latest round.

[[File:TeamReviewed2018.png]]

As part of this project, we will add a new color-code to team reviewed colomn in this case. Once again, if a student originally completed a review during the first round, but did not update it, AND the project under review has not been changed since the initial review, the reviewer should not be penalized. Reviewers who meet these criteria will be given a new color, potentially green.

== Review Summary page ==

=== Header ===

[[File:NoHeader_2018.png]]

* collapse (fix whitespace where possible)
* add reviewers name to easily tell who's review you are looking at, as well as course and assignment this relates to
* fix round capitalization and add space between word round and the round number

=== Questions should span the entire row ===

[[File:Question_Span.png]]

* Add colspan attribute which would allow the question to span the entire column which would then allow the name column to be smaller and the comment column to be larger.

=== Checkbox questions ===

[[File:Check_Question.png]]

* Replace individual team members name with just the team name
* Delete the comments column since comments aren't allowed in these types of questions
* Questions should be in a column that spans the width of the table.
* The team names that the reviewer reviewed should be in the following row separated into columns.
* The index in the table will have a check if the question was answered with a check and an X if answered otherwise. Each team will be represented as a column with its answer, check or X image, underneath.
====Solution====
=====Files=====
* app/views/popup/view_review_scores_popup.html.erb
Fixing this involved mostly html changes. Representing the team names instead of individual names was simply using the team attribute instead of the individual's name. Having questions span the entire table involved adding colspan attributes where necessary. Deleting the comments column for as well as representing each team and their answers in columns involved nesting a table into the existing table based on the question type. Representing the checkbox questions as pictures of a check and an X was as easy as showing an image based on the type of questions. 
[[File:CB_Code.PNG]] 
All of the above changes resulted in a checkbox section that looks like this: 
[[File:CB_Table.PNG]] 

=== Additional comments spanning ===

[[File:AdditionalComments.png]]

* Additional comments should span across all of the columns to save vertical space

=== CSS / Style improvements to review scores ===
* Add addition colors for reviews that didn't do a second(third,forth,etc) round review. In other words if the review hasn't changed from the previous round, color that review(er) a different color so instructors don't have to open the review and see that it hasn't changed.

== Test Plan ==
This project would be manually tested since it's all about UI improvement. To show that it's fully tested, we will record the manual tests for each goal we plan to achieve and of course, it will include audio and video. The video would be posted on Youtube so that it's easy for everyone to watch.

== Optional additional improvements ==

=== Review Report page - sort by other metrics ===

Ideally, this page would have an option to allow instructors to sort by any metric. Presently, only one metric is shown, but adding more has been planned for the future. This may require the addition of a drop-down to allow the selection of what metric to sort by. However this is implemented, it may not add too much complexity to the page.

=== User Report Page ===
Another piece of low hanging fruit that we decided to tackle was the User report page, which shows the response for an individual review instead of the summary of all of the reviews done. You get to this page by clicking on a team name in the "Team Reviewed" column of the Review Report table(shown above). The edits made on this page where reflective of the edits made on the summary page to enure consistent styles between the two different types of reviewing reviews.
====Solution====
=====Files=====
* app/views/popup/team_users_pop_up.html.haml
The fixes to this page involved adding colspan's and adjusting what is displayed in score column based on whether the question is a checkbox question or not. 
[[File:User_popup_code.PNG]] 
The changes to the code above leads to a following table: 
[[File:User_popup_table.PNG]] 

=== Review Summary page - Interpret HTML ===
Presently, users may enter HTML code to style their comments and reviews. However, this is currently not displayed properly. For example, HTML tags will themselves be displayed. The addition of a gem or potentially configuration changes will be needed to ensure this HTML will be properly displayed. Any implementation of this task should follow the DRY principle - that is, the implementation should be able to be re-used in all other pages where user-entered HTMl should be displayed

----

== References ==

* [https://github.com/bawagne2/expertiza Our project Git Repo]

File:Chart data array.png

2018-04-26T17:20:05Z

Cchen31: uploaded a new version of "File:Chart data array.png"

File:Chart data organize.png

2018-04-26T17:18:58Z

Cchen31: uploaded a new version of "File:Chart data organize.png"

File:Metric chart config code resize.png

2018-04-26T17:03:53Z

Cchen31:

File:Metric chart config code.png

2018-04-26T17:03:17Z

Cchen31:

File:Chart data organize.png

2018-04-26T17:02:21Z

Cchen31: uploaded a new version of "File:Chart data organize.png"

File:Chart data organize.png

2018-04-26T17:01:22Z

Cchen31: uploaded a new version of "File:Chart data organize.png"

CSC/ECE 517 Spring 2018 E1815: Improvements to review grader

2018-04-26T16:59:27Z

Cchen31: /* Files */

Improvements to Review Grader

__TOC__
== Abstract ==
In this design doc, since it's clearer to explain how we are going to improve the UI design by proposing each idea with the corresponding design's current image, we aren't going to separate problems from goals because you, as a reader, will need to scroll up and down to match problems to their corresponding goals.

== Introduction ==
Expertiza is a web application that is widely used by 2 types of users: students and instructors. When a user is logged-in as an instructor, and would like to see a review report on an assignment to review a grader, he/she could reach the page via Manage > Assignments and clicking on the “'''View review report'''” icon. The page would look somewhat like this:

[[File:Rev_report2018.png]]

To get a summary review report performed by a particular student, an instructor can get to the page from the review report by clicking “'''summary'''” in the row for that student. The page would look like this one:

[[File:Summary_report2018.png]]

== Problem Statement ==

This project is focused primarily on making various improvements to the Review Report and Review Summary pages, described in detail in the previous section. Each of these pages, while functional, suffer from many UI issues which make the pages more difficult to use for instructors. That is, information which would be useful to instructors is missing in several cases. In others, large amounts of unnecessary information is present, cluttering the site. Additionally, both pages suffer from structural and design issues which, again, waste instructor time.

Finally, the Review Report page sometimes mis-categorizes students who have not updated their reviews of others, even though the project under review has not changed! This could cause students to be deducted points unfairly. By adding a new way of highlighting this special case to instructors, review grades can be assigned more fairly.

== File Changes ==
* app/helpers/review_mapping_helper.rb for Add metrics charts
* app/views/popup/view_review_scores_popup.html.erb
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss
* app/helpers/review_mapping_helper.rb
* app/views/popup/team_users_pop_up.html.haml

== Review Report Page==

=== Add metrics charts ===

Presently, this page contains a 'metrics' column, presently displaying the average review volume for a given user in text form. This method of displaying data can be difficult to interpret, and even more difficult to compare at a glance, or to notice trends. Additionally, plans for expanding the metrics column to include more data would worsen this issue if it remained in its current state.

[[File:Metrics2018.png]]

====Solution====
=====Files=====
* app/helpers/review_mapping_helper.rb

This project will replace the text in this column with easy to read bar or line graphs, which will be color-coded or otherwise made very simple and easy to read. These graphs will display the data clearly and concisely, mitigating these issues. This concise display will allow for easier comparison of data, easier interpretation of data, and will allow for more metrics to be added without simply overcrowding the page with text.

First of all, we calculate the average volume of a reviewer in each round and the overall average volume of all the reviewers.
[[File:chart_data_organize.png]]

Next, we organize all the data and their corresponding label array for the chart drawing method later.
[[File:chart_data_array.png]]

Finally, we apply an extension called chartjs-ror to help us draw horizontal bar charts. Most of the codes in this method relate to the configuration setting of the chart.
[[File:metric_chart_config_code.png]]

[[File:metric_chart_config_code1.png]]

The result of our improvement doesn't have its value explicitly showed because we want to save more space and let the chart simpler to read. Yet, you can let your mouse points the bar, then the value will show up as seen in the figures below.
[[File:chart_no_value.png]]

[[File:metric_chart_value.png]]

=== Update alternating background color if sorted ===

In order to make the large table which dominates this page easier to read, each row has an alternating background color (between white and a yellow-green). Although this helps tremendously with readability, the alternating background colors do not update when the table is sorted. That is, if any of the sort functions are used, the background colors move with the associated rows, effectively shuffling the colors of each row. This, in fact, harms the readability of the page, and creates false groupings of visually similar rows.

[[File:AlterColors2018.png]]

Review Report sorted by metrics:

[[File:SortByMetr2018.png]]

====Solution====
=====Files=====
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss

Fixing the alternating background color involved removing the existing backgrounding mechanism in _review_report.html.erb and applying the "zebra" widget to the existing java tablesorter table. 
[[File:Alt_background.PNG]] 
Defining the colors for odd and even rows was just a style fix in the table_sorter.scss file. 
[[File:Alt_background_css.PNG]] 

Both of these changes yields a table that updates the backgrounds of each element appropriately, even when the table is sorted. 
[[File:Table_alt_bg.PNG]] 

=== Add new color to Team reviewed ===

On this page, the names of teams reviewed are color-coded, to make it easier for instructors to see common issues.
For example, if a reviewer has not completed a review for a team, the team name is colored red. If a reviewer has completed a review for a team, but has not received a grade, the team name is colored blue. A brown-colored team name indicates that the review grade has been assigned. However, as mentioned earlier, the current color coding scheme assigns a red color to a team name in the case when a reviewer has reviewed the team's work, but the team has not resubmitted. That is, students may be marked explicitly as having done no work when they have nothing to review in the latest round.

[[File:TeamReviewed2018.png]]

As part of this project, we will add a new color-code to team reviewed colomn in this case. Once again, if a student originally completed a review during the first round, but did not update it, AND the project under review has not been changed since the initial review, the reviewer should not be penalized. Reviewers who meet these criteria will be given a new color, potentially green.

== Review Summary page ==

=== Header ===

[[File:NoHeader_2018.png]]

* collapse (fix whitespace where possible)
* add reviewers name to easily tell who's review you are looking at, as well as course and assignment this relates to
* fix round capitalization and add space between word round and the round number

=== Questions should span the entire row ===

[[File:Question_Span.png]]

* Add colspan attribute which would allow the question to span the entire column which would then allow the name column to be smaller and the comment column to be larger.

=== Checkbox questions ===

[[File:Check_Question.png]]

* Replace individual team members name with just the team name
* Delete the comments column since comments aren't allowed in these types of questions
* Questions should be in a column that spans the width of the table.
* The team names that the reviewer reviewed should be in the following row separated into columns.
* The index in the table will have a check if the question was answered with a check and an X if answered otherwise. Each team will be represented as a column with its answer, check or X image, underneath.
====Solution====
=====Files=====
* app/views/popup/view_review_scores_popup.html.erb
Fixing this involved mostly html changes. Representing the team names instead of individual names was simply using the team attribute instead of the individual's name. Having questions span the entire table involved adding colspan attributes where necessary. Deleting the comments column for as well as representing each team and their answers in columns involved nesting a table into the existing table based on the question type. Representing the checkbox questions as pictures of a check and an X was as easy as showing an image based on the type of questions. 
[[File:CB_Code.PNG]] 
All of the above changes resulted in a checkbox section that looks like this: 
[[File:CB_Table.PNG]] 

=== Additional comments spanning ===

[[File:AdditionalComments.png]]

* Additional comments should span across all of the columns to save vertical space

=== CSS / Style improvements to review scores ===
* Add addition colors for reviews that didn't do a second(third,forth,etc) round review. In other words if the review hasn't changed from the previous round, color that review(er) a different color so instructors don't have to open the review and see that it hasn't changed.

== Test Plan ==
This project would be manually tested since it's all about UI improvement. To show that it's fully tested, we will record the manual tests for each goal we plan to achieve and of course, it will include audio and video. The video would be posted on Youtube so that it's easy for everyone to watch.

== Optional additional improvements ==

=== Review Report page - sort by other metrics ===

Ideally, this page would have an option to allow instructors to sort by any metric. Presently, only one metric is shown, but adding more has been planned for the future. This may require the addition of a drop-down to allow the selection of what metric to sort by. However this is implemented, it may not add too much complexity to the page.

=== User Report Page ===
Another piece of low hanging fruit that we decided to tackle was the User report page, which shows the response for an individual review instead of the summary of all of the reviews done. You get to this page by clicking on a team name in the "Team Reviewed" column of the Review Report table(shown above). The edits made on this page where reflective of the edits made on the summary page to enure consistent styles between the two different types of reviewing reviews.
====Solution====
=====Files=====
* app/views/popup/team_users_pop_up.html.haml
The fixes to this page involved adding colspan's and adjusting what is displayed in score column based on whether the question is a checkbox question or not. 
[[File:User_popup_code.PNG]] 
The changes to the code above leads to a following table: 
[[File:User_popup_table.PNG]] 

=== Review Summary page - Interpret HTML ===
Presently, users may enter HTML code to style their comments and reviews. However, this is currently not displayed properly. For example, HTML tags will themselves be displayed. The addition of a gem or potentially configuration changes will be needed to ensure this HTML will be properly displayed. Any implementation of this task should follow the DRY principle - that is, the implementation should be able to be re-used in all other pages where user-entered HTMl should be displayed

----

== References ==

* [https://github.com/bawagne2/expertiza Our project Git Repo]

File:Chart data array.png

2018-04-26T16:54:51Z

Cchen31: uploaded a new version of "File:Chart data array.png"

File:Chart data array.png

2018-04-26T16:53:25Z

Cchen31:

CSC/ECE 517 Spring 2018 E1815: Improvements to review grader

2018-04-26T16:53:12Z

Cchen31: /* Files */

Improvements to Review Grader

__TOC__
== Abstract ==
In this design doc, since it's clearer to explain how we are going to improve the UI design by proposing each idea with the corresponding design's current image, we aren't going to separate problems from goals because you, as a reader, will need to scroll up and down to match problems to their corresponding goals.

== Introduction ==
Expertiza is a web application that is widely used by 2 types of users: students and instructors. When a user is logged-in as an instructor, and would like to see a review report on an assignment to review a grader, he/she could reach the page via Manage > Assignments and clicking on the “'''View review report'''” icon. The page would look somewhat like this:

[[File:Rev_report2018.png]]

To get a summary review report performed by a particular student, an instructor can get to the page from the review report by clicking “'''summary'''” in the row for that student. The page would look like this one:

[[File:Summary_report2018.png]]

== Problem Statement ==

This project is focused primarily on making various improvements to the Review Report and Review Summary pages, described in detail in the previous section. Each of these pages, while functional, suffer from many UI issues which make the pages more difficult to use for instructors. That is, information which would be useful to instructors is missing in several cases. In others, large amounts of unnecessary information is present, cluttering the site. Additionally, both pages suffer from structural and design issues which, again, waste instructor time.

Finally, the Review Report page sometimes mis-categorizes students who have not updated their reviews of others, even though the project under review has not changed! This could cause students to be deducted points unfairly. By adding a new way of highlighting this special case to instructors, review grades can be assigned more fairly.

== File Changes ==
* app/helpers/review_mapping_helper.rb for Add metrics charts
* app/views/popup/view_review_scores_popup.html.erb
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss
* app/helpers/review_mapping_helper.rb
* app/views/popup/team_users_pop_up.html.haml

== Review Report Page==

=== Add metrics charts ===

Presently, this page contains a 'metrics' column, presently displaying the average review volume for a given user in text form. This method of displaying data can be difficult to interpret, and even more difficult to compare at a glance, or to notice trends. Additionally, plans for expanding the metrics column to include more data would worsen this issue if it remained in its current state.

[[File:Metrics2018.png]]

====Solution====
=====Files=====
* app/helpers/review_mapping_helper.rb

This project will replace the text in this column with easy to read bar or line graphs, which will be color-coded or otherwise made very simple and easy to read. These graphs will display the data clearly and concisely, mitigating these issues. This concise display will allow for easier comparison of data, easier interpretation of data, and will allow for more metrics to be added without simply overcrowding the page with text.

First of all, we calculate the average volume of a reviewer in each round and the overall average volume of all the reviewers.
[[File:chart_data_organize.png]]

Next, we organize all the data and their corresponding label array for the chart drawing method later.
[[File:chart_data_array.png]]

Finally, we apply an extension called chartjs-ror to help us draw horizontal bar charts. Most of the codes in this method relate to the configuration setting of the chart.
[[File:metric_chart_config_code.png]]
[[File:metric_chart_config_code1.png]]

The result of our improvement doesn't have its value explicitly showed because we want to save more space and let the chart simpler to read. Yet, you can let your mouse points the bar, then the value will show up as seen in the figures below.
[[File:chart_no_value.png]]
[[File:metric_chart_value.png]]

=== Update alternating background color if sorted ===

In order to make the large table which dominates this page easier to read, each row has an alternating background color (between white and a yellow-green). Although this helps tremendously with readability, the alternating background colors do not update when the table is sorted. That is, if any of the sort functions are used, the background colors move with the associated rows, effectively shuffling the colors of each row. This, in fact, harms the readability of the page, and creates false groupings of visually similar rows.

[[File:AlterColors2018.png]]

Review Report sorted by metrics:

[[File:SortByMetr2018.png]]

====Solution====
=====Files=====
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss

Fixing the alternating background color involved removing the existing backgrounding mechanism in _review_report.html.erb and applying the "zebra" widget to the existing java tablesorter table. 
[[File:Alt_background.PNG]] 
Defining the colors for odd and even rows was just a style fix in the table_sorter.scss file. 
[[File:Alt_background_css.PNG]] 

Both of these changes yields a table that updates the backgrounds of each element appropriately, even when the table is sorted. 
[[File:Table_alt_bg.PNG]] 

=== Add new color to Team reviewed ===

On this page, the names of teams reviewed are color-coded, to make it easier for instructors to see common issues.
For example, if a reviewer has not completed a review for a team, the team name is colored red. If a reviewer has completed a review for a team, but has not received a grade, the team name is colored blue. A brown-colored team name indicates that the review grade has been assigned. However, as mentioned earlier, the current color coding scheme assigns a red color to a team name in the case when a reviewer has reviewed the team's work, but the team has not resubmitted. That is, students may be marked explicitly as having done no work when they have nothing to review in the latest round.

[[File:TeamReviewed2018.png]]

As part of this project, we will add a new color-code to team reviewed colomn in this case. Once again, if a student originally completed a review during the first round, but did not update it, AND the project under review has not been changed since the initial review, the reviewer should not be penalized. Reviewers who meet these criteria will be given a new color, potentially green.

== Review Summary page ==

=== Header ===

[[File:NoHeader_2018.png]]

* collapse (fix whitespace where possible)
* add reviewers name to easily tell who's review you are looking at, as well as course and assignment this relates to
* fix round capitalization and add space between word round and the round number

=== Questions should span the entire row ===

[[File:Question_Span.png]]

* Add colspan attribute which would allow the question to span the entire column which would then allow the name column to be smaller and the comment column to be larger.

=== Checkbox questions ===

[[File:Check_Question.png]]

* Replace individual team members name with just the team name
* Delete the comments column since comments aren't allowed in these types of questions
* Questions should be in a column that spans the width of the table.
* The team names that the reviewer reviewed should be in the following row separated into columns.
* The index in the table will have a check if the question was answered with a check and an X if answered otherwise. Each team will be represented as a column with its answer, check or X image, underneath.
====Solution====
=====Files=====
* app/views/popup/view_review_scores_popup.html.erb
Fixing this involved mostly html changes. Representing the team names instead of individual names was simply using the team attribute instead of the individual's name. Having questions span the entire table involved adding colspan attributes where necessary. Deleting the comments column for as well as representing each team and their answers in columns involved nesting a table into the existing table based on the question type. Representing the checkbox questions as pictures of a check and an X was as easy as showing an image based on the type of questions. 
[[File:CB_Code.PNG]] 
All of the above changes resulted in a checkbox section that looks like this: 
[[File:CB_Table.PNG]] 

=== Additional comments spanning ===

[[File:AdditionalComments.png]]

* Additional comments should span across all of the columns to save vertical space

=== CSS / Style improvements to review scores ===
* Add addition colors for reviews that didn't do a second(third,forth,etc) round review. In other words if the review hasn't changed from the previous round, color that review(er) a different color so instructors don't have to open the review and see that it hasn't changed.

== Test Plan ==
This project would be manually tested since it's all about UI improvement. To show that it's fully tested, we will record the manual tests for each goal we plan to achieve and of course, it will include audio and video. The video would be posted on Youtube so that it's easy for everyone to watch.

== Optional additional improvements ==

=== Review Report page - sort by other metrics ===

Ideally, this page would have an option to allow instructors to sort by any metric. Presently, only one metric is shown, but adding more has been planned for the future. This may require the addition of a drop-down to allow the selection of what metric to sort by. However this is implemented, it may not add too much complexity to the page.

=== User Report Page ===
Another piece of low hanging fruit that we decided to tackle was the User report page, which shows the response for an individual review instead of the summary of all of the reviews done. You get to this page by clicking on a team name in the "Team Reviewed" column of the Review Report table(shown above). The edits made on this page where reflective of the edits made on the summary page to enure consistent styles between the two different types of reviewing reviews.
====Solution====
=====Files=====
* app/views/popup/team_users_pop_up.html.haml
The fixes to this page involved adding colspan's and adjusting what is displayed in score column based on whether the question is a checkbox question or not. 
[[File:User_popup_code.PNG]] 
The changes to the code above leads to a following table: 
[[File:User_popup_table.PNG]] 

=== Review Summary page - Interpret HTML ===
Presently, users may enter HTML code to style their comments and reviews. However, this is currently not displayed properly. For example, HTML tags will themselves be displayed. The addition of a gem or potentially configuration changes will be needed to ensure this HTML will be properly displayed. Any implementation of this task should follow the DRY principle - that is, the implementation should be able to be re-used in all other pages where user-entered HTMl should be displayed

----

== References ==

* [https://github.com/bawagne2/expertiza Our project Git Repo]

CSC/ECE 517 Spring 2018 E1815: Improvements to review grader

2018-04-26T16:52:52Z

Cchen31: /* Files */

Improvements to Review Grader

__TOC__
== Abstract ==
In this design doc, since it's clearer to explain how we are going to improve the UI design by proposing each idea with the corresponding design's current image, we aren't going to separate problems from goals because you, as a reader, will need to scroll up and down to match problems to their corresponding goals.

== Introduction ==
Expertiza is a web application that is widely used by 2 types of users: students and instructors. When a user is logged-in as an instructor, and would like to see a review report on an assignment to review a grader, he/she could reach the page via Manage > Assignments and clicking on the “'''View review report'''” icon. The page would look somewhat like this:

[[File:Rev_report2018.png]]

To get a summary review report performed by a particular student, an instructor can get to the page from the review report by clicking “'''summary'''” in the row for that student. The page would look like this one:

[[File:Summary_report2018.png]]

== Problem Statement ==

This project is focused primarily on making various improvements to the Review Report and Review Summary pages, described in detail in the previous section. Each of these pages, while functional, suffer from many UI issues which make the pages more difficult to use for instructors. That is, information which would be useful to instructors is missing in several cases. In others, large amounts of unnecessary information is present, cluttering the site. Additionally, both pages suffer from structural and design issues which, again, waste instructor time.

Finally, the Review Report page sometimes mis-categorizes students who have not updated their reviews of others, even though the project under review has not changed! This could cause students to be deducted points unfairly. By adding a new way of highlighting this special case to instructors, review grades can be assigned more fairly.

== File Changes ==
* app/helpers/review_mapping_helper.rb for Add metrics charts
* app/views/popup/view_review_scores_popup.html.erb
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss
* app/helpers/review_mapping_helper.rb
* app/views/popup/team_users_pop_up.html.haml

== Review Report Page==

=== Add metrics charts ===

Presently, this page contains a 'metrics' column, presently displaying the average review volume for a given user in text form. This method of displaying data can be difficult to interpret, and even more difficult to compare at a glance, or to notice trends. Additionally, plans for expanding the metrics column to include more data would worsen this issue if it remained in its current state.

[[File:Metrics2018.png]]

====Solution====
=====Files=====
* app/helpers/review_mapping_helper.rb

This project will replace the text in this column with easy to read bar or line graphs, which will be color-coded or otherwise made very simple and easy to read. These graphs will display the data clearly and concisely, mitigating these issues. This concise display will allow for easier comparison of data, easier interpretation of data, and will allow for more metrics to be added without simply overcrowding the page with text.

First of all, we calculate the average volume of a reviewer in each round and the overall average volume of all the reviewers.
[[File:chart_data_organize.png|200px|thumb|left]]

Next, we organize all the data and their corresponding label array for the chart drawing method later.
[[File:chart_data_array.png]]

Finally, we apply an extension called chartjs-ror to help us draw horizontal bar charts. Most of the codes in this method relate to the configuration setting of the chart.
[[File:metric_chart_config_code.png]]
[[File:metric_chart_config_code1.png]]

The result of our improvement doesn't have its value explicitly showed because we want to save more space and let the chart simpler to read. Yet, you can let your mouse points the bar, then the value will show up as seen in the figures below.
[[File:chart_no_value.png]]
[[File:metric_chart_value.png]]

=== Update alternating background color if sorted ===

In order to make the large table which dominates this page easier to read, each row has an alternating background color (between white and a yellow-green). Although this helps tremendously with readability, the alternating background colors do not update when the table is sorted. That is, if any of the sort functions are used, the background colors move with the associated rows, effectively shuffling the colors of each row. This, in fact, harms the readability of the page, and creates false groupings of visually similar rows.

[[File:AlterColors2018.png]]

Review Report sorted by metrics:

[[File:SortByMetr2018.png]]

====Solution====
=====Files=====
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss

Fixing the alternating background color involved removing the existing backgrounding mechanism in _review_report.html.erb and applying the "zebra" widget to the existing java tablesorter table. 
[[File:Alt_background.PNG]] 
Defining the colors for odd and even rows was just a style fix in the table_sorter.scss file. 
[[File:Alt_background_css.PNG]] 

Both of these changes yields a table that updates the backgrounds of each element appropriately, even when the table is sorted. 
[[File:Table_alt_bg.PNG]] 

=== Add new color to Team reviewed ===

On this page, the names of teams reviewed are color-coded, to make it easier for instructors to see common issues.
For example, if a reviewer has not completed a review for a team, the team name is colored red. If a reviewer has completed a review for a team, but has not received a grade, the team name is colored blue. A brown-colored team name indicates that the review grade has been assigned. However, as mentioned earlier, the current color coding scheme assigns a red color to a team name in the case when a reviewer has reviewed the team's work, but the team has not resubmitted. That is, students may be marked explicitly as having done no work when they have nothing to review in the latest round.

[[File:TeamReviewed2018.png]]

As part of this project, we will add a new color-code to team reviewed colomn in this case. Once again, if a student originally completed a review during the first round, but did not update it, AND the project under review has not been changed since the initial review, the reviewer should not be penalized. Reviewers who meet these criteria will be given a new color, potentially green.

== Review Summary page ==

=== Header ===

[[File:NoHeader_2018.png]]

* collapse (fix whitespace where possible)
* add reviewers name to easily tell who's review you are looking at, as well as course and assignment this relates to
* fix round capitalization and add space between word round and the round number

=== Questions should span the entire row ===

[[File:Question_Span.png]]

* Add colspan attribute which would allow the question to span the entire column which would then allow the name column to be smaller and the comment column to be larger.

=== Checkbox questions ===

[[File:Check_Question.png]]

* Replace individual team members name with just the team name
* Delete the comments column since comments aren't allowed in these types of questions
* Questions should be in a column that spans the width of the table.
* The team names that the reviewer reviewed should be in the following row separated into columns.
* The index in the table will have a check if the question was answered with a check and an X if answered otherwise. Each team will be represented as a column with its answer, check or X image, underneath.
====Solution====
=====Files=====
* app/views/popup/view_review_scores_popup.html.erb
Fixing this involved mostly html changes. Representing the team names instead of individual names was simply using the team attribute instead of the individual's name. Having questions span the entire table involved adding colspan attributes where necessary. Deleting the comments column for as well as representing each team and their answers in columns involved nesting a table into the existing table based on the question type. Representing the checkbox questions as pictures of a check and an X was as easy as showing an image based on the type of questions. 
[[File:CB_Code.PNG]] 
All of the above changes resulted in a checkbox section that looks like this: 
[[File:CB_Table.PNG]] 

=== Additional comments spanning ===

[[File:AdditionalComments.png]]

* Additional comments should span across all of the columns to save vertical space

=== CSS / Style improvements to review scores ===
* Add addition colors for reviews that didn't do a second(third,forth,etc) round review. In other words if the review hasn't changed from the previous round, color that review(er) a different color so instructors don't have to open the review and see that it hasn't changed.

== Test Plan ==
This project would be manually tested since it's all about UI improvement. To show that it's fully tested, we will record the manual tests for each goal we plan to achieve and of course, it will include audio and video. The video would be posted on Youtube so that it's easy for everyone to watch.

== Optional additional improvements ==

=== Review Report page - sort by other metrics ===

Ideally, this page would have an option to allow instructors to sort by any metric. Presently, only one metric is shown, but adding more has been planned for the future. This may require the addition of a drop-down to allow the selection of what metric to sort by. However this is implemented, it may not add too much complexity to the page.

=== User Report Page ===
Another piece of low hanging fruit that we decided to tackle was the User report page, which shows the response for an individual review instead of the summary of all of the reviews done. You get to this page by clicking on a team name in the "Team Reviewed" column of the Review Report table(shown above). The edits made on this page where reflective of the edits made on the summary page to enure consistent styles between the two different types of reviewing reviews.
====Solution====
=====Files=====
* app/views/popup/team_users_pop_up.html.haml
The fixes to this page involved adding colspan's and adjusting what is displayed in score column based on whether the question is a checkbox question or not. 
[[File:User_popup_code.PNG]] 
The changes to the code above leads to a following table: 
[[File:User_popup_table.PNG]] 

=== Review Summary page - Interpret HTML ===
Presently, users may enter HTML code to style their comments and reviews. However, this is currently not displayed properly. For example, HTML tags will themselves be displayed. The addition of a gem or potentially configuration changes will be needed to ensure this HTML will be properly displayed. Any implementation of this task should follow the DRY principle - that is, the implementation should be able to be re-used in all other pages where user-entered HTMl should be displayed

----

== References ==

* [https://github.com/bawagne2/expertiza Our project Git Repo]

CSC/ECE 517 Spring 2018 E1815: Improvements to review grader

2018-04-26T16:51:55Z

Cchen31: /* Files */

Improvements to Review Grader

__TOC__
== Abstract ==
In this design doc, since it's clearer to explain how we are going to improve the UI design by proposing each idea with the corresponding design's current image, we aren't going to separate problems from goals because you, as a reader, will need to scroll up and down to match problems to their corresponding goals.

== Introduction ==
Expertiza is a web application that is widely used by 2 types of users: students and instructors. When a user is logged-in as an instructor, and would like to see a review report on an assignment to review a grader, he/she could reach the page via Manage > Assignments and clicking on the “'''View review report'''” icon. The page would look somewhat like this:

[[File:Rev_report2018.png]]

To get a summary review report performed by a particular student, an instructor can get to the page from the review report by clicking “'''summary'''” in the row for that student. The page would look like this one:

[[File:Summary_report2018.png]]

== Problem Statement ==

This project is focused primarily on making various improvements to the Review Report and Review Summary pages, described in detail in the previous section. Each of these pages, while functional, suffer from many UI issues which make the pages more difficult to use for instructors. That is, information which would be useful to instructors is missing in several cases. In others, large amounts of unnecessary information is present, cluttering the site. Additionally, both pages suffer from structural and design issues which, again, waste instructor time.

Finally, the Review Report page sometimes mis-categorizes students who have not updated their reviews of others, even though the project under review has not changed! This could cause students to be deducted points unfairly. By adding a new way of highlighting this special case to instructors, review grades can be assigned more fairly.

== File Changes ==
* app/helpers/review_mapping_helper.rb for Add metrics charts
* app/views/popup/view_review_scores_popup.html.erb
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss
* app/helpers/review_mapping_helper.rb
* app/views/popup/team_users_pop_up.html.haml

== Review Report Page==

=== Add metrics charts ===

Presently, this page contains a 'metrics' column, presently displaying the average review volume for a given user in text form. This method of displaying data can be difficult to interpret, and even more difficult to compare at a glance, or to notice trends. Additionally, plans for expanding the metrics column to include more data would worsen this issue if it remained in its current state.

[[File:Metrics2018.png]]

====Solution====
=====Files=====
* app/helpers/review_mapping_helper.rb

This project will replace the text in this column with easy to read bar or line graphs, which will be color-coded or otherwise made very simple and easy to read. These graphs will display the data clearly and concisely, mitigating these issues. This concise display will allow for easier comparison of data, easier interpretation of data, and will allow for more metrics to be added without simply overcrowding the page with text.

First of all, we calculate the average volume of a reviewer in each round and the overall average volume of all the reviewers.
[[File:chart_data_organize.png]]

Next, we organize all the data and their corresponding label array for the chart drawing method later.
[[File:chart_data_array.png]]

Finally, we apply an extension called chartjs-ror to help us draw horizontal bar charts. Most of the codes in this method relate to the configuration setting of the chart.
[[File:metric_chart_config_code.png]]
[[File:metric_chart_config_code1.png]]

The result of our improvement doesn't have its value explicitly showed because we want to save more space and let the chart simpler to read. Yet, you can let your mouse points the bar, then the value will show up as seen in the figures below.
[[File:chart_no_value.png]]
[[File:metric_chart_value.png]]

=== Update alternating background color if sorted ===

In order to make the large table which dominates this page easier to read, each row has an alternating background color (between white and a yellow-green). Although this helps tremendously with readability, the alternating background colors do not update when the table is sorted. That is, if any of the sort functions are used, the background colors move with the associated rows, effectively shuffling the colors of each row. This, in fact, harms the readability of the page, and creates false groupings of visually similar rows.

[[File:AlterColors2018.png]]

Review Report sorted by metrics:

[[File:SortByMetr2018.png]]

====Solution====
=====Files=====
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss

Fixing the alternating background color involved removing the existing backgrounding mechanism in _review_report.html.erb and applying the "zebra" widget to the existing java tablesorter table. 
[[File:Alt_background.PNG]] 
Defining the colors for odd and even rows was just a style fix in the table_sorter.scss file. 
[[File:Alt_background_css.PNG]] 

Both of these changes yields a table that updates the backgrounds of each element appropriately, even when the table is sorted. 
[[File:Table_alt_bg.PNG]] 

=== Add new color to Team reviewed ===

On this page, the names of teams reviewed are color-coded, to make it easier for instructors to see common issues.
For example, if a reviewer has not completed a review for a team, the team name is colored red. If a reviewer has completed a review for a team, but has not received a grade, the team name is colored blue. A brown-colored team name indicates that the review grade has been assigned. However, as mentioned earlier, the current color coding scheme assigns a red color to a team name in the case when a reviewer has reviewed the team's work, but the team has not resubmitted. That is, students may be marked explicitly as having done no work when they have nothing to review in the latest round.

[[File:TeamReviewed2018.png]]

As part of this project, we will add a new color-code to team reviewed colomn in this case. Once again, if a student originally completed a review during the first round, but did not update it, AND the project under review has not been changed since the initial review, the reviewer should not be penalized. Reviewers who meet these criteria will be given a new color, potentially green.

== Review Summary page ==

=== Header ===

[[File:NoHeader_2018.png]]

* collapse (fix whitespace where possible)
* add reviewers name to easily tell who's review you are looking at, as well as course and assignment this relates to
* fix round capitalization and add space between word round and the round number

=== Questions should span the entire row ===

[[File:Question_Span.png]]

* Add colspan attribute which would allow the question to span the entire column which would then allow the name column to be smaller and the comment column to be larger.

=== Checkbox questions ===

[[File:Check_Question.png]]

* Replace individual team members name with just the team name
* Delete the comments column since comments aren't allowed in these types of questions
* Questions should be in a column that spans the width of the table.
* The team names that the reviewer reviewed should be in the following row separated into columns.
* The index in the table will have a check if the question was answered with a check and an X if answered otherwise. Each team will be represented as a column with its answer, check or X image, underneath.
====Solution====
=====Files=====
* app/views/popup/view_review_scores_popup.html.erb
Fixing this involved mostly html changes. Representing the team names instead of individual names was simply using the team attribute instead of the individual's name. Having questions span the entire table involved adding colspan attributes where necessary. Deleting the comments column for as well as representing each team and their answers in columns involved nesting a table into the existing table based on the question type. Representing the checkbox questions as pictures of a check and an X was as easy as showing an image based on the type of questions. 
[[File:CB_Code.PNG]] 
All of the above changes resulted in a checkbox section that looks like this: 
[[File:CB_Table.PNG]] 

=== Additional comments spanning ===

[[File:AdditionalComments.png]]

* Additional comments should span across all of the columns to save vertical space

=== CSS / Style improvements to review scores ===
* Add addition colors for reviews that didn't do a second(third,forth,etc) round review. In other words if the review hasn't changed from the previous round, color that review(er) a different color so instructors don't have to open the review and see that it hasn't changed.

== Test Plan ==
This project would be manually tested since it's all about UI improvement. To show that it's fully tested, we will record the manual tests for each goal we plan to achieve and of course, it will include audio and video. The video would be posted on Youtube so that it's easy for everyone to watch.

== Optional additional improvements ==

=== Review Report page - sort by other metrics ===

Ideally, this page would have an option to allow instructors to sort by any metric. Presently, only one metric is shown, but adding more has been planned for the future. This may require the addition of a drop-down to allow the selection of what metric to sort by. However this is implemented, it may not add too much complexity to the page.

=== User Report Page ===
Another piece of low hanging fruit that we decided to tackle was the User report page, which shows the response for an individual review instead of the summary of all of the reviews done. You get to this page by clicking on a team name in the "Team Reviewed" column of the Review Report table(shown above). The edits made on this page where reflective of the edits made on the summary page to enure consistent styles between the two different types of reviewing reviews.
====Solution====
=====Files=====
* app/views/popup/team_users_pop_up.html.haml
The fixes to this page involved adding colspan's and adjusting what is displayed in score column based on whether the question is a checkbox question or not. 
[[File:User_popup_code.PNG]] 
The changes to the code above leads to a following table: 
[[File:User_popup_table.PNG]] 

=== Review Summary page - Interpret HTML ===
Presently, users may enter HTML code to style their comments and reviews. However, this is currently not displayed properly. For example, HTML tags will themselves be displayed. The addition of a gem or potentially configuration changes will be needed to ensure this HTML will be properly displayed. Any implementation of this task should follow the DRY principle - that is, the implementation should be able to be re-used in all other pages where user-entered HTMl should be displayed

----

== References ==

* [https://github.com/bawagne2/expertiza Our project Git Repo]

File:Chart data organize.png

2018-04-26T15:55:43Z

Cchen31:

CSC/ECE 517 Spring 2018 E1815: Improvements to review grader

2018-04-26T15:53:39Z

Cchen31: /* Review Report Page */

Improvements to Review Grader

__TOC__
== Abstract ==
In this design doc, since it's clearer to explain how we are going to improve the UI design by proposing each idea with the corresponding design's current image, we aren't going to separate problems from goals because you, as a reader, will need to scroll up and down to match problems to their corresponding goals.

== Introduction ==
Expertiza is a web application that is widely used by 2 types of users: students and instructors. When a user is logged-in as an instructor, and would like to see a review report on an assignment to review a grader, he/she could reach the page via Manage > Assignments and clicking on the “'''View review report'''” icon. The page would look somewhat like this:

[[File:Rev_report2018.png]]

To get a summary review report performed by a particular student, an instructor can get to the page from the review report by clicking “'''summary'''” in the row for that student. The page would look like this one:

[[File:Summary_report2018.png]]

== Problem Statement ==

This project is focused primarily on making various improvements to the Review Report and Review Summary pages, described in detail in the previous section. Each of these pages, while functional, suffer from many UI issues which make the pages more difficult to use for instructors. That is, information which would be useful to instructors is missing in several cases. In others, large amounts of unnecessary information is present, cluttering the site. Additionally, both pages suffer from structural and design issues which, again, waste instructor time.

Finally, the Review Report page sometimes mis-categorizes students who have not updated their reviews of others, even though the project under review has not changed! This could cause students to be deducted points unfairly. By adding a new way of highlighting this special case to instructors, review grades can be assigned more fairly.

== File Changes ==
* app/helpers/review_mapping_helper.rb for Add metrics charts
* app/views/popup/view_review_scores_popup.html.erb
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss
* app/helpers/review_mapping_helper.rb
* app/views/popup/team_users_pop_up.html.haml

== Review Report Page==

=== Add metrics charts ===

Presently, this page contains a 'metrics' column, presently displaying the average review volume for a given user in text form. This method of displaying data can be difficult to interpret, and even more difficult to compare at a glance, or to notice trends. Additionally, plans for expanding the metrics column to include more data would worsen this issue if it remained in its current state.

[[File:Metrics2018.png]]

====Solution====
=====Files=====
* app/helpers/review_mapping_helper.rb

This project will replace the text in this column with easy to read bar or line graphs, which will be color-coded or otherwise made very simple and easy to read. These graphs will display the data clearly and concisely, mitigating these issues. This concise display will allow for easier comparison of data, easier interpretation of data, and will allow for more metrics to be added without simply overcrowding the page with text.

First of all, we calculate the average volume of a reviewer in each round and the overall average volume of all the reviewers.
[[File:chart_data_organize]]

Next, we organize all the data and their corresponding label array for the chart drawing method later.
[[File:chart_data_array]]

Finally, we apply an extension called chartjs-ror to help us draw horizontal bar charts. Most of the codes in this method relate to the configuration setting of the chart.
[[File:metric_chart_config_code]]
[[File:metric_chart_config_code1]]

The result of our improvement doesn't have its value explicitly showed because we want to save more space and let the chart simpler to read. Yet, you can let your mouse points the bar, then the value will show up as seen in the figures below.
[[File:chart_no_value]]
[[File:metric_chart_value]]

=== Update alternating background color if sorted ===

In order to make the large table which dominates this page easier to read, each row has an alternating background color (between white and a yellow-green). Although this helps tremendously with readability, the alternating background colors do not update when the table is sorted. That is, if any of the sort functions are used, the background colors move with the associated rows, effectively shuffling the colors of each row. This, in fact, harms the readability of the page, and creates false groupings of visually similar rows.

[[File:AlterColors2018.png]]

Review Report sorted by metrics:

[[File:SortByMetr2018.png]]

====Solution====
=====Files=====
* app/views/review_mapping/_review_report.html.erb
* app/assets/stylesheets/table_sorter.scss

Fixing the alternating background color involved removing the existing backgrounding mechanism in _review_report.html.erb and applying the "zebra" widget to the existing java tablesorter table. 
[[File:Alt_background.PNG]] 
Defining the colors for odd and even rows was just a style fix in the table_sorter.scss file. 
[[File:Alt_background_css.PNG]] 

Both of these changes yields a table that updates the backgrounds of each element appropriately, even when the table is sorted. 
[[File:Table_alt_bg.PNG]] 

=== Add new color to Team reviewed ===

On this page, the names of teams reviewed are color-coded, to make it easier for instructors to see common issues.
For example, if a reviewer has not completed a review for a team, the team name is colored red. If a reviewer has completed a review for a team, but has not received a grade, the team name is colored blue. A brown-colored team name indicates that the review grade has been assigned. However, as mentioned earlier, the current color coding scheme assigns a red color to a team name in the case when a reviewer has reviewed the team's work, but the team has not resubmitted. That is, students may be marked explicitly as having done no work when they have nothing to review in the latest round.

[[File:TeamReviewed2018.png]]

As part of this project, we will add a new color-code to team reviewed colomn in this case. Once again, if a student originally completed a review during the first round, but did not update it, AND the project under review has not been changed since the initial review, the reviewer should not be penalized. Reviewers who meet these criteria will be given a new color, potentially green.

== Review Summary page ==

=== Header ===

[[File:NoHeader_2018.png]]

* collapse (fix whitespace where possible)
* add reviewers name to easily tell who's review you are looking at, as well as course and assignment this relates to
* fix round capitalization and add space between word round and the round number

=== Questions should span the entire row ===

[[File:Question_Span.png]]

* Add colspan attribute which would allow the question to span the entire column which would then allow the name column to be smaller and the comment column to be larger.

=== Checkbox questions ===

[[File:Check_Question.png]]

* Replace individual team members name with just the team name
* Delete the comments column since comments aren't allowed in these types of questions
* Questions should be in a column that spans the width of the table.
* The team names that the reviewer reviewed should be in the following row separated into columns.
* The index in the table will have a check if the question was answered with a check and an X if answered otherwise. Each team will be represented as a column with its answer, check or X image, underneath.
====Solution====
=====Files=====
* app/views/popup/view_review_scores_popup.html.erb
Fixing this involved mostly html changes. Representing the team names instead of individual names was simply using the team attribute instead of the individual's name. Having questions span the entire table involved adding colspan attributes where necessary. Deleting the comments column for as well as representing each team and their answers in columns involved nesting a table into the existing table based on the question type. Representing the checkbox questions as pictures of a check and an X was as easy as showing an image based on the type of questions. 
[[File:CB_Code.PNG]] 
All of the above changes resulted in a checkbox section that looks like this: 
[[File:CB_Table.PNG]] 

=== Additional comments spanning ===

[[File:AdditionalComments.png]]

* Additional comments should span across all of the columns to save vertical space

=== CSS / Style improvements to review scores ===
* Add addition colors for reviews that didn't do a second(third,forth,etc) round review. In other words if the review hasn't changed from the previous round, color that review(er) a different color so instructors don't have to open the review and see that it hasn't changed.

== Test Plan ==
This project would be manually tested since it's all about UI improvement. To show that it's fully tested, we will record the manual tests for each goal we plan to achieve and of course, it will include audio and video. The video would be posted on Youtube so that it's easy for everyone to watch.

== Optional additional improvements ==

=== Review Report page - sort by other metrics ===

Ideally, this page would have an option to allow instructors to sort by any metric. Presently, only one metric is shown, but adding more has been planned for the future. This may require the addition of a drop-down to allow the selection of what metric to sort by. However this is implemented, it may not add too much complexity to the page.

=== User Report Page ===
Another piece of low hanging fruit that we decided to tackle was the User report page, which shows the response for an individual review instead of the summary of all of the reviews done. You get to this page by clicking on a team name in the "Team Reviewed" column of the Review Report table(shown above). The edits made on this page where reflective of the edits made on the summary page to enure consistent styles between the two different types of reviewing reviews.
====Solution====
=====Files=====
* app/views/popup/team_users_pop_up.html.haml
The fixes to this page involved adding colspan's and adjusting what is displayed in score column based on whether the question is a checkbox question or not. 
[[File:User_popup_code.PNG]] 
The changes to the code above leads to a following table: 
[[File:User_popup_table.PNG]] 

=== Review Summary page - Interpret HTML ===
Presently, users may enter HTML code to style their comments and reviews. However, this is currently not displayed properly. For example, HTML tags will themselves be displayed. The addition of a gem or potentially configuration changes will be needed to ensure this HTML will be properly displayed. Any implementation of this task should follow the DRY principle - that is, the implementation should be able to be re-used in all other pages where user-entered HTMl should be displayed

----

== References ==

* [https://github.com/bawagne2/expertiza Our project Git Repo]

CSC/ECE 517 Spring 2018 E1815: Improvements to review grader

2018-04-13T22:21:20Z

Cchen31:

CSC/ECE 517 Spring 2018 E1815: Improvements to review grader

2018-04-13T22:16:30Z

Cchen31:

CSC/ECE 517 Spring 2018 E1815: Improvements to review grader

2018-04-13T22:05:10Z

Cchen31: /* Test Plan */

Improvements to Review Grader

__TOC__

== Introduction ==
Expertiza is a web application that is widely used by 2 types of users: students and instructors. When a user is logged-in as an instructor, and would like to see a review report on an assignment to review a grader, he/she could reach the page via Manage > Assignments and clicking on the “'''View review report'''” icon. The page would look somewhat like this:

[[File:Rev_report2018.png]]

To get a summary review report performed by a particular student, an instructor can get to the page from the review report by clicking “'''summary'''” in the row for that student. The page would look like this one:

[[File:Summary_report2018.png]]

== Problem Statement ==

This project is focused primarily on making various improvements to the Review Report and Review Summary pages, described in detail in the previous section. Each of these pages, while functional, suffer from many UI issues which make the pages more difficult to use for instructors. That is, information which would be useful to instructors is missing in several cases. In others, large amounts of unnecessary information is present, cluttering the site. Additionally, both pages suffer from structural and design issues which, again, waste instructor time.

Finally, the Review Report page sometimes mis-categorizes students who have not updated their reviews of others, even though the project under review has not changed! This could cause students to be deducted points unfairly. By adding a new way of highlighting this special case to instructors, review grades can be assigned more fairly.

== Review Report Page==

=== Add metrics charts ===

Presently, this page contains a 'metrics' column, presently displaying the average review volume for a given user in text form. This method of displaying data can be difficult to interpret, and even more difficult to compare at a glance, or to notice trends. Additionally, plans for expanding the metrics column to include more data would worsen this issue if it remained in its current state.

[[File:Metrics2018.png]]

This project will replace the text in this column with easy to read bar or line graphs, which will be color-coded or otherwise made very simple and easy to read. These graphs will display the data clearly and concisely, mitigating these issues. This concise display will allow for easier comparison of data, easier interpretation of data, and will allow for more metrics to be added without simply overcrowding the page with text.

=== Update alternating background color if sorted ===

In order to make the large table which dominates this page easier to read, each row has an alternating background color (between white and a yellow-green). Although this helps tremendously with readability, the alternating background colors do not update when the table is sorted. That is, if any of the sort functions are used, the background colors move with the associated rows, effectively shuffling the colors of each row. This, in fact, harms the readability of the page, and creates false groupings of visually similar rows.

[[File:AlterColors2018.png]]

Review Report sorted by metrics:

[[File:SortByMetr2018.png]]

This project will attempt to maintain the alternating background colors, even if the content of the table has been re-organized due to sorting.

=== Add new color to reviewers ===

On this page, the names of student peer reviewers are often color-coded, to make it easier for instructors to see common issues. For example, reviewers who have not submitted a review may be colored red, and reviewers who have not received a grade may be colored blue. However, as mentioned earlier, the current color coding scheme will assign a red color to students who have not updated their review of others projects, even when that project has not changed. That is, students may be marked explicitly as having done no work, when there was no work to do!

[[File:TeamReviewed2018.png]]

As part of this project, we will add a new color-code for students in this case. Once again, if a student originally completed a review during the first round, but did not update it, AND the project under review has not been changed since the initial review, the reviewer should not be penalized. Reviewers who meet these criteria will be given a new color, potentially green.

== Review Summary page ==

=== Header ===

[[File:NoHeader_2018.png]]

* collapse (fix whitespace where possible)
* add reviewers name to easily tell who's review you are looking at, as well as course and assignment this relates to

=== Questions should span the entire row ===

[[File:Question_Span.png]]

* Add colspan attribute which would allow the question to span the entire column which would then allow the name column to be smaller and the comment column to be larger.

=== Checkbox questions ===

[[File:Check_Question.png]]

* Replace individual team members name with just the team name
* Delete the comments column since comments aren't allowed in these types of questions
* Questions should be in the leftmost column and the team names that the reviewer reviewed should be in the following columns. The index in the table will have a check if the question was answered with a check and an X if answered otherwise.

=== Additional comments spanning ===

[[File:AdditionalComments.png]]

* Additional comments should span across all of the columns to save vertical space

=== CSS / Style improvements to review scores ===
* Add addition colors for reviews that didn't do a second(third,forth,etc) round review. In other words if the review hasn't changed from the previous round, color that review(er) a different color so instructors don't have to open the review and see that it hasn't changed.

== Test Plan ==
This project would be manually tested since it's all about UI improvement. To show that it's fully tested, we will record the manual tests for each goal we plan to achieve and of course, it will include audio and video. The video would be posted on Youtube so that it's easy for everyone to watch.

== Optional additional improvements ==

=== Review Report page - sort by other metrics ===

Ideally, this page would have an option to allow instructors to sort by any metric. Presently, only one metric is shown, but adding more has been planned for the future. This may require the addition of a dropdown to allow the selection of what metric to sort by. However this is implemented, it may not add too much complexity to the page.

=== Review Summary page - Interpret HTML ===
Presently, users may enter HTML code to style their comments and reviews. However, this is currently not displayed properly. For example, HTML tags will themselves be displayed. The addition of a gem or potentially configuration changes will be needed to ensure this HTML will be properly displayed. Any implementation of this task should follow the DRY principle - that is, the implementation should be able to be re-used in all other pages where user-entered HTMl should be displayed

----

CSC/ECE 517 Spring 2018 E1815: Improvements to review grader

2018-04-13T21:57:35Z

Cchen31:

Improvements to Review Grader

__TOC__

== Introduction ==
Expertiza is a web application that is widely used by 2 types of users: students and instructors. When a user is logged-in as an instructor, and would like to see a review report on an assignment to review a grader, he/she could reach the page via Manage > Assignments and clicking on the “'''View review report'''” icon. The page would look somewhat like this:

[[File:Rev_report2018.png]]

To get a summary review report performed by a particular student, an instructor can get to the page from the review report by clicking “'''summary'''” in the row for that student. The page would look like this one:

[[File:Summary_report2018.png]]

== Problem Statement ==

This project is focused primarily on making various improvements to the Review Report and Review Summary pages, described in detail in the previous section. Each of these pages, while functional, suffer from many UI issues which make the pages more difficult to use for instructors. That is, information which would be useful to instructors is missing in several cases. In others, large amounts of unnecessary information is present, cluttering the site. Additionally, both pages suffer from structural and design issues which, again, waste instructor time.

Finally, the Review Report page sometimes mis-categorizes students who have not updated their reviews of others, even though the project under review has not changed! This could cause students to be deducted points unfairly. By adding a new way of highlighting this special case to instructors, review grades can be assigned more fairly.

== Review Report Page==

=== Add metrics charts ===

Presently, this page contains a 'metrics' column, presently displaying the average review volume for a given user in text form. This method of displaying data can be difficult to interpret, and even more difficult to compare at a glance, or to notice trends. Additionally, plans for expanding the metrics column to include more data would worsen this issue if it remained in its current state.

[[File:Metrics2018.png]]

This project will replace the text in this column with easy to read bar or line graphs, which will be color-coded or otherwise made very simple and easy to read. These graphs will display the data clearly and concisely, mitigating these issues. This concise display will allow for easier comparison of data, easier interpretation of data, and will allow for more metrics to be added without simply overcrowding the page with text.

=== Update alternating background color if sorted ===

In order to make the large table which dominates this page easier to read, each row has an alternating background color (between white and a yellow-green). Although this helps tremendously with readability, the alternating background colors do not update when the table is sorted. That is, if any of the sort functions are used, the background colors move with the associated rows, effectively shuffling the colors of each row. This, in fact, harms the readability of the page, and creates false groupings of visually similar rows.

[[File:AlterColors2018.png]]

Review Report sorted by metrics:

[[File:SortByMetr2018.png]]

This project will attempt to maintain the alternating background colors, even if the content of the table has been re-organized due to sorting.

=== Add new color to reviewers ===

On this page, the names of student peer reviewers are often color-coded, to make it easier for instructors to see common issues. For example, reviewers who have not submitted a review may be colored red, and reviewers who have not received a grade may be colored blue. However, as mentioned earlier, the current color coding scheme will assign a red color to students who have not updated their review of others projects, even when that project has not changed. That is, students may be marked explicitly as having done no work, when there was no work to do!

[[File:TeamReviewed2018.png]]

As part of this project, we will add a new color-code for students in this case. Once again, if a student originally completed a review during the first round, but did not update it, AND the project under review has not been changed since the initial review, the reviewer should not be penalized. Reviewers who meet these criteria will be given a new color, potentially green.

== Review Summary page ==

=== Header ===

[[File:NoHeader_2018.png]]

* collapse (fix whitespace where possible)
* add reviewers name to easily tell who's review you are looking at, as well as course and assignment this relates to

=== Questions should span the entire row ===

[[File:Question_Span.png]]

* Add colspan attribute which would allow the question to span the entire column which would then allow the name column to be smaller and the comment column to be larger.

=== Checkbox questions ===

[[File:Check_Question.png]]

* Replace individual team members name with just the team name
* Delete the comments column since comments aren't allowed in these types of questions
* Questions should be in the leftmost column and the team names that the reviewer reviewed should be in the following columns. The index in the table will have a check if the question was answered with a check and an X if answered otherwise.

=== Additional comments spanning ===

[[File:AdditionalComments.png]]

* Additional comments should span across all of the columns to save vertical space

=== CSS / Style improvements to review scores ===
* Add addition colors for reviews that didn't do a second(third,forth,etc) round review. In other words if the review hasn't changed from the previous round, color that review(er) a different color so instructors don't have to open the review and see that it hasn't changed.

== Test Plan ==

== Optional additional improvements ==

=== Review Report page - sort by other metrics ===

Ideally, this page would have an option to allow instructors to sort by any metric. Presently, only one metric is shown, but adding more has been planned for the future. This may require the addition of a dropdown to allow the selection of what metric to sort by. However this is implemented, it may not add too much complexity to the page.

=== Review Summary page - Interpret HTML ===
Presently, users may enter HTML code to style their comments and reviews. However, this is currently not displayed properly. For example, HTML tags will themselves be displayed. The addition of a gem or potentially configuration changes will be needed to ensure this HTML will be properly displayed. Any implementation of this task should follow the DRY principle - that is, the implementation should be able to be re-used in all other pages where user-entered HTMl should be displayed

----

CSC/ECE 517 Spring 2018- Project E1805: Convolutional data extraction from Github

2018-04-04T00:54:26Z

Cchen31: /* Environment Setup */

== Introduction ==

[http://expertiza.ncsu.edu/ Expertiza] is a web based open source tool developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University]. Instructors

== Problem Statement ==
The objective for this project is: Integrate Github metrics into Expertiza. The tasks required to complete this were broken down as follows.
# Retrieve data on a Git pull request
## Calculate meaningful metrics from the data for teams and individual students
## Display metrics to instructors
# Store metrics in the Expertiza database

== Previous Design ==
[http://wiki.expertiza.ncsu.edu/index.php/CSC/ECE_517_Fall_2017/E1783_Convolutional_data_extraction_from_Github Previous] work done on this project utilized the Github statistics API, which was unable to retrieve information on individual students. The design was able to accurately fetch and display data covering a team of contributors, but could not create and display individual metrics to instructors.

== Proposed Design ==
The proposed design utilizes the new [https://developer.github.com/v4/ GraphQL Git API] which allows for simple extraction of metrics on a pull request. The API call returns information on multiple commits with only a single fetch command. The returned data is then parsed into team level information and individual level information. Next, the metrics are calculated from the data and displayed to the user.

== Improvements ==
By manipulating GraphQL API v4, we don't need to pull out all the information from GitHub, which is not customizable. Instead, we can appoint what kind of data we want to fetch so that it's much more efficient than Github Pull Requests API and also we don't need to parse bulk information in order to get the portion we need.

[[File:Screen Shot 2018-04-02 at 9.16.22 PM.png]]
[[File:Screen Shot 2018-04-02 at 9.16.40 PM.png]]
[[File:Screen Shot 2018-04-02 at 9.16.56 PM.png]]

After having the data we want, we start to divide them based on dates and users so that reviewer can understand the contribution of each member clearly.
[[File:Screen Shot 2018-04-02 at 9.17.05 PM.png]]

==Environment Setup==
To test this project manually on your local machine, you need to:

1. Clone from this repository https://github.com/rpot/expertiza/tree/E1805GithubDataExtraction

2. Go to your GitHub account -> Settings -> Developer Settings -> Personal access tokens -> Generate new token -> name the token and check the repo and admin:repo_hook option -> copy the token generated

3. Run GITHUB_ACCESS_TOKEN=<token> rails server, then you can manually test the functionality by going to Assignments as instructor6 -> view submissions -> Show Submission Records -> Show Github Data

== Testing Plan==
Tests for this project include testing two methods in app/models/github_datum.rb and one method in app/controllers/github_data_controller.rb by spec/models/github_datum_spec.rb and spec/controllers/github_data_controller_spec.rb.

CSC/ECE 517 Spring 2018- Project E1805: Convolutional data extraction from Github

2018-04-03T03:00:17Z

Cchen31:

== Introduction ==

[http://expertiza.ncsu.edu/ Expertiza] is a web based open source tool developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University]. Instructors

== Problem Statement ==
The objective for this project is: Integrate Github metrics into Expertiza. The tasks required to complete this were broken down as follows.
# Retrieve data on a Git pull request
## Calculate meaningful metrics from the data for teams and individual students
## Display metrics to instructors
# Store metrics in the Expertiza database

== Previous Design ==
[http://wiki.expertiza.ncsu.edu/index.php/CSC/ECE_517_Fall_2017/E1783_Convolutional_data_extraction_from_Github Previous] work done on this project utilized the Github statistics API, which was unable to retrieve information on individual students. The design was able to accurately fetch and display data covering a team of contributors, but could not create and display individual metrics to instructors.

== Proposed Design ==
The proposed design utilizes the new [https://developer.github.com/v4/ GraphQL Git API] which allows for simple extraction of metrics on a pull request. The API call returns information on multiple commits with only a single fetch command. The returned data is then parsed into team level information and individual level information. Next, the metrics are calculated from the data and displayed to the user.

== Improvements ==
By manipulating GraphQL API v4, we don't need to pull out all the information from GitHub, which is not customizable. Instead, we can appoint what kind of data we want to fetch so that it's much more efficient than Github Pull Requests API and also we don't need to parse bulk information in order to get the portion we need.

[[File:Screen Shot 2018-04-02 at 9.16.22 PM.png]]
[[File:Screen Shot 2018-04-02 at 9.16.40 PM.png]]
[[File:Screen Shot 2018-04-02 at 9.16.56 PM.png]]

After having the data we want, we start to divide them based on dates and users so that reviewer can understand the contribution of each member clearly.
[[File:Screen Shot 2018-04-02 at 9.17.05 PM.png]]

==Environment Setup==
To test this project manually on your local machine, you need to:
1. Clone from this repository https://github.com/rpot/expertiza/tree/E1805GithubDataExtraction
2. Go to your GitHub account -> Settings -> Developer Settings -> Personal access tokens -> Generate new token -> name the token and check the repo and admin:repo_hook option -> copy the token generated
3. Run GITHUB_ACCESS_TOKEN=<token> rails server, then you can manually test the functionality by going to Assignments as instructor6 -> view submissions -> Show Submission Records -> Show Github Data

== Testing Plan==
Tests for this project include testing two methods in app/models/github_datum.rb and one method in app/controllers/github_data_controller.rb by spec/models/github_datum_spec.rb and spec/controllers/github_data_controller_spec.rb.

CSC/ECE 517 Spring 2018- Project E1805: Convolutional data extraction from Github

2018-04-03T01:23:50Z

Cchen31: /* Improvements */

== Introduction ==

[http://expertiza.ncsu.edu/ Expertiza] is a web based open source tool developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University]. Instructors

== Problem Statement ==
The objective for this project is: Integrate Github metrics into Expertiza. The tasks required to complete this were broken down as follows.
# Retrieve data on a Git pull request
## Calculate meaningful metrics from the data for teams and individual students
## Display metrics to instructors
# Store metrics in the Expertiza database

== Previous Design ==
[http://wiki.expertiza.ncsu.edu/index.php/CSC/ECE_517_Fall_2017/E1783_Convolutional_data_extraction_from_Github Previous] work done on this project utilized the Github statistics API, which was unable to retrieve information on individual students. The design was able to accurately fetch and display data covering a team of contributors, but could not create and display individual metrics to instructors.

== Proposed Design ==
The proposed design utilizes the new [https://developer.github.com/v4/ GraphQL Git API] which allows for simple extraction of metrics on a pull request. The API call returns information on multiple commits with only a single fetch command. The returned data is then parsed into team level information and individual level information. Next, the metrics are calculated from the data and displayed to the user.

== Improvements ==
By manipulating GraphQL API v4, we don't need to pull out all the information from GitHub, which is not customizable. Instead, we can appoint what kind of data we want to fetch so that it's much more efficient than Github Pull Requests API and also we don't need to parse bulk information in order to get the portion we need.

[[File:Screen Shot 2018-04-02 at 9.16.22 PM.png]]
[[File:Screen Shot 2018-04-02 at 9.16.40 PM.png]]
[[File:Screen Shot 2018-04-02 at 9.16.56 PM.png]]

After having the data we want, we start to divide them based on dates and users so that reviewer can understand the contribution of each member clearly.
[[File:Screen Shot 2018-04-02 at 9.17.05 PM.png]]

== Testing Plan==
Tests for this project include testing two methods in app/models/github_datum.rb and one method in app/controllers/github_data_controller.rb by spec/models/github_datum_spec.rb and spec/controllers/github_data_controller_spec.rb.

File:Screen Shot 2018-04-02 at 9.17.05 PM.png

2018-04-03T01:23:36Z

Cchen31:

CSC/ECE 517 Spring 2018- Project E1805: Convolutional data extraction from Github

2018-04-03T01:23:28Z

Cchen31: /* Improvements */

== Introduction ==

[http://expertiza.ncsu.edu/ Expertiza] is a web based open source tool developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University]. Instructors

== Problem Statement ==
The objective for this project is: Integrate Github metrics into Expertiza. The tasks required to complete this were broken down as follows.
# Retrieve data on a Git pull request
## Calculate meaningful metrics from the data for teams and individual students
## Display metrics to instructors
# Store metrics in the Expertiza database

== Previous Design ==
[http://wiki.expertiza.ncsu.edu/index.php/CSC/ECE_517_Fall_2017/E1783_Convolutional_data_extraction_from_Github Previous] work done on this project utilized the Github statistics API, which was unable to retrieve information on individual students. The design was able to accurately fetch and display data covering a team of contributors, but could not create and display individual metrics to instructors.

== Proposed Design ==
The proposed design utilizes the new [https://developer.github.com/v4/ GraphQL Git API] which allows for simple extraction of metrics on a pull request. The API call returns information on multiple commits with only a single fetch command. The returned data is then parsed into team level information and individual level information. Next, the metrics are calculated from the data and displayed to the user.

== Improvements ==
By manipulating GraphQL API v4, we don't need to pull out all the information from GitHub, which is not customizable. Instead, we can appoint what kind of data we want to fetch so that it's much more efficient than Github Pull Requests API and also we don't need to parse bulk information in order to get the portion we need.
[[File:Screen Shot 2018-04-02 at 9.16.22 PM.png]]
[[File:Screen Shot 2018-04-02 at 9.16.40 PM.png]]
[[File:Screen Shot 2018-04-02 at 9.16.56 PM.png]]

After having the data we want, we start to divide them based on dates and users so that reviewer can understand the contribution of each member clearly.
[[File:Screen Shot 2018-04-02 at 9.17.05 PM.png]]

== Testing Plan==
Tests for this project include testing two methods in app/models/github_datum.rb and one method in app/controllers/github_data_controller.rb by spec/models/github_datum_spec.rb and spec/controllers/github_data_controller_spec.rb.

File:Screen Shot 2018-04-02 at 9.16.56 PM.png

2018-04-03T01:23:08Z

Cchen31:

File:Screen Shot 2018-04-02 at 9.16.40 PM.png

2018-04-03T01:22:56Z

Cchen31:

CSC/ECE 517 Spring 2018- Project E1805: Convolutional data extraction from Github

2018-04-03T01:22:47Z

Cchen31: /* Improvements */

== Introduction ==

[http://expertiza.ncsu.edu/ Expertiza] is a web based open source tool developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University]. Instructors

== Problem Statement ==
The objective for this project is: Integrate Github metrics into Expertiza. The tasks required to complete this were broken down as follows.
# Retrieve data on a Git pull request
## Calculate meaningful metrics from the data for teams and individual students
## Display metrics to instructors
# Store metrics in the Expertiza database

== Previous Design ==
[http://wiki.expertiza.ncsu.edu/index.php/CSC/ECE_517_Fall_2017/E1783_Convolutional_data_extraction_from_Github Previous] work done on this project utilized the Github statistics API, which was unable to retrieve information on individual students. The design was able to accurately fetch and display data covering a team of contributors, but could not create and display individual metrics to instructors.

== Proposed Design ==
The proposed design utilizes the new [https://developer.github.com/v4/ GraphQL Git API] which allows for simple extraction of metrics on a pull request. The API call returns information on multiple commits with only a single fetch command. The returned data is then parsed into team level information and individual level information. Next, the metrics are calculated from the data and displayed to the user.

== Improvements ==
By manipulating GraphQL API v4, we don't need to pull out all the information from GitHub, which is not customizable. Instead, we can appoint what kind of data we want to fetch so that it's much more efficient than Github Pull Requests API and also we don't need to parse bulk information in order to get the portion we need.
[[File:Screen Shot 2018-04-02 at 9.16.22 PM.png]]
[[File:Screen Shot 2018-04-02 at 9.16.40 PM.png]]
[[File:Screen Shot 2018-04-02 at 9.16.56 PM.png]]
After having the data we want, we start to divide them based on dates and users so that reviewer can understand the contribution of each member clearly.
[[File:Screen Shot 2018-04-02 at 9.17.05 PM.png]]

== Testing Plan==
Tests for this project include testing two methods in app/models/github_datum.rb and one method in app/controllers/github_data_controller.rb by spec/models/github_datum_spec.rb and spec/controllers/github_data_controller_spec.rb.

File:Screen Shot 2018-04-02 at 9.16.22 PM.png

2018-04-03T01:21:28Z

Cchen31:

CSC/ECE 517 Spring 2018- Project E1805: Convolutional data extraction from Github

2018-04-03T01:21:21Z

Cchen31: /* Improvements */

== Introduction ==

[http://expertiza.ncsu.edu/ Expertiza] is a web based open source tool developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University]. Instructors

== Problem Statement ==
The objective for this project is: Integrate Github metrics into Expertiza. The tasks required to complete this were broken down as follows.
# Retrieve data on a Git pull request
## Calculate meaningful metrics from the data for teams and individual students
## Display metrics to instructors
# Store metrics in the Expertiza database

== Previous Design ==
[http://wiki.expertiza.ncsu.edu/index.php/CSC/ECE_517_Fall_2017/E1783_Convolutional_data_extraction_from_Github Previous] work done on this project utilized the Github statistics API, which was unable to retrieve information on individual students. The design was able to accurately fetch and display data covering a team of contributors, but could not create and display individual metrics to instructors.

== Proposed Design ==
The proposed design utilizes the new [https://developer.github.com/v4/ GraphQL Git API] which allows for simple extraction of metrics on a pull request. The API call returns information on multiple commits with only a single fetch command. The returned data is then parsed into team level information and individual level information. Next, the metrics are calculated from the data and displayed to the user.

== Improvements ==
By manipulating GraphQL API v4, we don't need to pull out all the information from GitHub, which is not customizable. Instead, we can appoint what kind of data we want to fetch so that it's much more efficient than Github Pull Requests API and also we don't need to parse bulk information in order to get the portion we need.
[[File:Screen Shot 2018-04-02 at 9.16.22 PM.png]]

After having the data we want, we start to divide them based on dates and users so that reviewer can understand the contribution of each member clearly.

== Testing Plan==
Tests for this project include testing two methods in app/models/github_datum.rb and one method in app/controllers/github_data_controller.rb by spec/models/github_datum_spec.rb and spec/controllers/github_data_controller_spec.rb.

CSC/ECE 517 Spring 2018- Project E1805: Convolutional data extraction from Github

2018-04-03T01:18:34Z

Cchen31: /* Improvements */

== Introduction ==

[http://expertiza.ncsu.edu/ Expertiza] is a web based open source tool developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University]. Instructors

== Problem Statement ==
The objective for this project is: Integrate Github metrics into Expertiza. The tasks required to complete this were broken down as follows.
# Retrieve data on a Git pull request
## Calculate meaningful metrics from the data for teams and individual students
## Display metrics to instructors
# Store metrics in the Expertiza database

== Previous Design ==
[http://wiki.expertiza.ncsu.edu/index.php/CSC/ECE_517_Fall_2017/E1783_Convolutional_data_extraction_from_Github Previous] work done on this project utilized the Github statistics API, which was unable to retrieve information on individual students. The design was able to accurately fetch and display data covering a team of contributors, but could not create and display individual metrics to instructors.

== Proposed Design ==
The proposed design utilizes the new [https://developer.github.com/v4/ GraphQL Git API] which allows for simple extraction of metrics on a pull request. The API call returns information on multiple commits with only a single fetch command. The returned data is then parsed into team level information and individual level information. Next, the metrics are calculated from the data and displayed to the user.

== Improvements ==
By manipulating GraphQL API v4, we don't need to pull out all the information from GitHub, which is not customizable. Instead, we can appoint what kind of data we want to fetch so that it's much more efficient than Github Pull Requests API and also we don't need to parse bulk information in order to get the portion we need.
[[File:Screen Shot 2018-04-02 at 9.16.22 PM]]

After having the data we want, we start to divide them based on dates and users so that reviewer can understand the contribution of each member clearly.

== Testing Plan==
Tests for this project include testing two methods in app/models/github_datum.rb and one method in app/controllers/github_data_controller.rb by spec/models/github_datum_spec.rb and spec/controllers/github_data_controller_spec.rb.

CSC/ECE 517 Spring 2018- Project E1805: Convolutional data extraction from Github

2018-04-03T01:07:31Z

Cchen31: /* Improvements */

CSC/ECE 517 Spring 2018- Project E1805: Convolutional data extraction from Github

2018-04-02T20:27:42Z

Cchen31: /* Testing */

CSC/ECE 517 Spring 2018- Project E1805: Convolutional data extraction from Github

2018-04-02T19:43:29Z

Cchen31: /* Testing */

CSC/ECE 517 Spring 2018- Project E1805: Convolutional data extraction from Github

2018-04-02T19:42:21Z

Cchen31: /* Testing */