Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-12-03T05:40:10Z

Nramcha: /* UI TEST */

== Introduction ==

Expertiza<ref>https://expertiza.ncsu.edu/</ref> is an open-source web application to create re-usable learning objects through peer-reviews to facilitate incremental learning. Students can submit learning objects such as articles, wiki pages, repository links and with the help of peer reviews, improve them. The project has been developed using the Ruby on Rails<ref>https://en.wikipedia.org/wiki/Ruby_on_Rails</ref> framework and is supported by the [http://www.nsf.gov National Science Foundation].

== Project Description ==

=== Purpose and Scope ===

Expertiza assignments are based on a peer review system where the instructor creates rubrics for an assignment through questionnaires which students use to review other students' submissions. The author of the submission is given an opportunity to provide feedback about these reviews. Expertiza displays reviews (i) to the team who was reviewed, and (ii) to the reviewer. A student user can see all the reviews of his/her team’s project. The instructor can see all the reviews of everyone’s project. The instructor also has access to a Review report, which shows, for each reviewer, all the reviews that (s)he wrote. Both score report and review report use different code so UI is non-orthogonal, it would be great if we can follow same UI structure for both score and review report which also reduce the DRY problems. There is no functionality for user to search between reviews of particular project, such a functionality will help user to search through all reviews for specific problem they are trying to focus on.

=== Task Description ===

The project requires completion of the following tasks:
====Task-1 (Update review report view in Instructor's view)====
* A single way of displaying reviews that would be visible to students (reviews that they did, and reviews that their team received), and instructors (reviews that each team received, sorted by team; and reviews that each student did, sorted by student)

For student view the UI is consistent in displaying reviews they have done and reviews they have received but for instructor's view the review report follows different UI and have different code. To make the UI consistent we have decided to choose the UI design of student view as the base and modify the UI design for review report in instructor's view. This will allow us to use the same code in both views, thereby following DRY principle.

Previous View:

[[File:review_report.png]]

Updated View:

[[File:review-report-changed.png]]

Implementation:

Review report view is rendered in app/views/popup/team_users_popup.html.haml. In this view, we populate table by iterating over each question under each round. While same approach was used previously but here we replace each row by a predefined format used for rendering question similar to student view.

<pre>
%table{:border => "1px solid #ccc"}
%tr
%th{:align => "left", :width => "50%"} Question
%th{:width => "5%"} Score
%th{:width => "45%"} Comments
- instance_variable_get('@scores_round_' + round.to_s).each do |s|
%tr
%td{:align => "left"}
= Question.find(s.question_id).txt
- if Question.find(s.question_id).is_a?(ScoredQuestion)
%td{:align => "center"}
= s.answer
\/#{instance_variable_get('@max_score_round_' + round.to_s)}
- else
%td{:align => "center"}
= s.answer
%td{:align => "left"}
= s.comments
%tr
%th Reviewer Score (Σ weighted score/Σ weighted available score)
%td{:align => "center"}
= instance_variable_get('@sum_round_' + round.to_s)
\/#{instance_variable_get('@total_possible_round_' + round.to_s)}
%td{:align => "left"}
\= #{instance_variable_get('@total_percentage_round_' + round.to_s)}
%table
</pre>

We replace the above code by code below, here in each row we invoke view_completed_question method defined in Criterion.rb for scored questions which insert the html code to render question,score,comments.

<pre>
%table{:border => "1px solid #ccc" ,:class => "table table-bordered"}
- counter = 0
- instance_variable_get('@scores_round_' + round.to_s).each do |s|
- counter += 1
- row_class = counter.even? ? "info" : "warning"
- question = Question.find(s.question_id)
%tr{:class => row_class}
%td
= question.becomes(Criterion).view_completed_question(counter,s,instance_variable_get('@max_score_round_' + round.to_s))
%tr
%td{:style => "font-weight:bold"}
= 'Reviewer Score (Σ weighted score/Σ weighted available score) = '+ instance_variable_get('@sum_round_' + round.to_s).to_s |
\/ #{instance_variable_get('@total_possible_round_' + round.to_s)} (#{instance_variable_get('@total_percentage_round_' + round.to_s)}%)
%table
</pre>

====Task-2====
* Add button/link to hide and expand all the reviews.

Below is the mock-up image of how functionality will look after implementations

[[File:show-hide.png]]

====Task-3====
* Create a tabbed view for each review view type : Statistic, Reviews and Alternate Views tabs.

Initially I weighed using TabsOnRails or Tabulous gems to create the tabs for this project but after doing some research these gems did not allow me to create tabs dynamically so Jquery UI was used to create the tabs. This was a plus since we did not need to install a new gem to the project. The review report will need to be modified to have the addition of the Statistic, Reviews and Alternate Views tabs at the top of the page. It will default to the Statistics tab which should look something like:

[[File:tabStats.png]]

And the Reviews tab should produce a view like:

[[File:tabReviews.png]]

The Alternate View tab should produce a view like:

[[File:tabAlt.png]]

=====Task 3 Implementation=====

To create the tabs on the view_my_scores view we used the following Jquery code:

<pre>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Stats</a></li>
<li><a href="#tabs-2">Reviews</a></li>
<li><a href="#tabs-3">Alternate View</a></li>
</ul>
<div id="tabs-1">
<TABLE class="grades" >
<%= render :partial => 'grades/participant_charts', :locals => {:prefix => nil} %>
<%= render :partial => 'grades/participant_title', :locals => {:prefix => nil} %>
<%= render :partial => 'grades/participant', :locals => {:prefix => 'user',
:team => false,
:participant_id => ptid = @participant.id,
:index => 0,
:team_size => 1,
:pscore => @pscore} %>

</TABLE>
<% case @assignment.reputation_algorithm %>
<% when 'Hamer' %>
<h3>Reputation</h3>
<p id = "reputation_score" class = <%= get_css_style_for_hamer_reputation(@participant.Hamer)%> style = "width:60px;"><%= @participant.Hamer %></p>
<% when 'Lauw' %>
<h3>Reputation</h3>
<p id = "reputation_score" class = <%= get_css_style_for_lauw_reputation(@participant.Lauw)%> style = "width:60px;"><%= @participant.Lauw %></p>
<%end%>
</div>
<div id="tabs-2">
<TABLE>
<TR>
<TD COLSPAN="10"><%= render :partial=>'grades/reviews', :locals => {:prefix => 'user', :participant => @pscore[:participant], :rscore => @pscore[:review]} %></TD>
</TR>
</TABLE>
</div>
<div id="tabs-3">
<%= render "view_team", :id => params[:id] %>
</div>
</div>

<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</pre>

The Stats tab was easy since we just took what was already in that view and moved it to only be displayed under the first tab.

The Review tab was created by pulling up the rendering of the review partial out of the participant partial. This just needed to point the local variables to variables that were in this View.

The Alternate View tab was a bit tricky since it was it's on view (view_team). So what was done was creating a partial named _view_team and moving all of the code that was in that view the partial and rendering the partial in the view_team view. This allowed us to access this view from the view_team and view_my_score views simultaneously while using the same code base.

We were going to add the sub tabs for the Reviewers but after implementing the "show all reviews" buttons those tabs became tricky and the page got really cluttered. So we decided that we could just keep the existing scores Review layout with the changes of toggling whether to hide or show the reviews.

=====Task 3 Testing=====

To test this feature go to the view_my_scores page for the student where you should see the 3 tabs.
Make sure that each tab gives you a similar view as described above.

====Task-4====
* Make review feedback more readable by changing UI or background color.

This task is fairly easy we are supposed to make feedback response more readable or more focused for user to read. As instructor suggested this can be done by graying out the question or we can change the background of the response text.

====Task-5 (Change view in response controller, when clicked on review link)====
When scores are view in alternate view(Heat map) it displays score received for each review in tabular format when we click on any review hyperlink it invokes view method of response controller which render unnecessary elements like submission content, upload file button,etc along with review and feedback, instead it should just show review and feedback. So we created a new view to implement this functionality and removed other unrequired elements.

Files updated:

app/controllers/response_controller.rb
app/views/grades/_view_team.html.erb
app/views/response/view_review.html.erb
config/routes.rb

We have selected the unrequired element in below mockup image.

[[File:Review_view.png]]

=====UI TEST=====
* Log-in as student.
* Go to particular assignment
* Select alternative view
* Click on any review hyperlink, to see reviews.

====Task-6 (Optional)====
* Add search box to search between reviews for particular string for a specific project(Student's view) or for specific user(Instructor's view).
This functionality will help user to readily access the required content within the reviews.<br />
Below is the mock-up image of how functionality will look after implementations

[[File:SearchFunctionality.png]]

==UI Testing==
* To Test UI for student View
** Log-in as Student.
** Go to Assignment
** Click Your scores
** Click show reviews

* To Test UI for instructor View
** Log-in as Instructor.
** Go to Manage Assignments
** Click on review report of a particular assignment
** Click on any item in team reviewed tab, to see reviews.

== Future Improvements ==

== References ==
<references/>

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-12-03T05:38:08Z

Nramcha: /* Task-5 (Change view in response controller, when clicked on review link) */

== Introduction ==

Expertiza<ref>https://expertiza.ncsu.edu/</ref> is an open-source web application to create re-usable learning objects through peer-reviews to facilitate incremental learning. Students can submit learning objects such as articles, wiki pages, repository links and with the help of peer reviews, improve them. The project has been developed using the Ruby on Rails<ref>https://en.wikipedia.org/wiki/Ruby_on_Rails</ref> framework and is supported by the [http://www.nsf.gov National Science Foundation].

== Project Description ==

=== Purpose and Scope ===

Expertiza assignments are based on a peer review system where the instructor creates rubrics for an assignment through questionnaires which students use to review other students' submissions. The author of the submission is given an opportunity to provide feedback about these reviews. Expertiza displays reviews (i) to the team who was reviewed, and (ii) to the reviewer. A student user can see all the reviews of his/her team’s project. The instructor can see all the reviews of everyone’s project. The instructor also has access to a Review report, which shows, for each reviewer, all the reviews that (s)he wrote. Both score report and review report use different code so UI is non-orthogonal, it would be great if we can follow same UI structure for both score and review report which also reduce the DRY problems. There is no functionality for user to search between reviews of particular project, such a functionality will help user to search through all reviews for specific problem they are trying to focus on.

=== Task Description ===

The project requires completion of the following tasks:
====Task-1 (Update review report view in Instructor's view)====
* A single way of displaying reviews that would be visible to students (reviews that they did, and reviews that their team received), and instructors (reviews that each team received, sorted by team; and reviews that each student did, sorted by student)

For student view the UI is consistent in displaying reviews they have done and reviews they have received but for instructor's view the review report follows different UI and have different code. To make the UI consistent we have decided to choose the UI design of student view as the base and modify the UI design for review report in instructor's view. This will allow us to use the same code in both views, thereby following DRY principle.

Previous View:

[[File:review_report.png]]

Updated View:

[[File:review-report-changed.png]]

Implementation:

Review report view is rendered in app/views/popup/team_users_popup.html.haml. In this view, we populate table by iterating over each question under each round. While same approach was used previously but here we replace each row by a predefined format used for rendering question similar to student view.

<pre>
%table{:border => "1px solid #ccc"}
%tr
%th{:align => "left", :width => "50%"} Question
%th{:width => "5%"} Score
%th{:width => "45%"} Comments
- instance_variable_get('@scores_round_' + round.to_s).each do |s|
%tr
%td{:align => "left"}
= Question.find(s.question_id).txt
- if Question.find(s.question_id).is_a?(ScoredQuestion)
%td{:align => "center"}
= s.answer
\/#{instance_variable_get('@max_score_round_' + round.to_s)}
- else
%td{:align => "center"}
= s.answer
%td{:align => "left"}
= s.comments
%tr
%th Reviewer Score (Σ weighted score/Σ weighted available score)
%td{:align => "center"}
= instance_variable_get('@sum_round_' + round.to_s)
\/#{instance_variable_get('@total_possible_round_' + round.to_s)}
%td{:align => "left"}
\= #{instance_variable_get('@total_percentage_round_' + round.to_s)}
%table
</pre>

We replace the above code by code below, here in each row we invoke view_completed_question method defined in Criterion.rb for scored questions which insert the html code to render question,score,comments.

<pre>
%table{:border => "1px solid #ccc" ,:class => "table table-bordered"}
- counter = 0
- instance_variable_get('@scores_round_' + round.to_s).each do |s|
- counter += 1
- row_class = counter.even? ? "info" : "warning"
- question = Question.find(s.question_id)
%tr{:class => row_class}
%td
= question.becomes(Criterion).view_completed_question(counter,s,instance_variable_get('@max_score_round_' + round.to_s))
%tr
%td{:style => "font-weight:bold"}
= 'Reviewer Score (Σ weighted score/Σ weighted available score) = '+ instance_variable_get('@sum_round_' + round.to_s).to_s |
\/ #{instance_variable_get('@total_possible_round_' + round.to_s)} (#{instance_variable_get('@total_percentage_round_' + round.to_s)}%)
%table
</pre>

====Task-2====
* Add button/link to hide and expand all the reviews.

Below is the mock-up image of how functionality will look after implementations

[[File:show-hide.png]]

====Task-3====
* Create a tabbed view for each review view type : Statistic, Reviews and Alternate Views tabs.

Initially I weighed using TabsOnRails or Tabulous gems to create the tabs for this project but after doing some research these gems did not allow me to create tabs dynamically so Jquery UI was used to create the tabs. This was a plus since we did not need to install a new gem to the project. The review report will need to be modified to have the addition of the Statistic, Reviews and Alternate Views tabs at the top of the page. It will default to the Statistics tab which should look something like:

[[File:tabStats.png]]

And the Reviews tab should produce a view like:

[[File:tabReviews.png]]

The Alternate View tab should produce a view like:

[[File:tabAlt.png]]

=====Task 3 Implementation=====

To create the tabs on the view_my_scores view we used the following Jquery code:

<pre>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Stats</a></li>
<li><a href="#tabs-2">Reviews</a></li>
<li><a href="#tabs-3">Alternate View</a></li>
</ul>
<div id="tabs-1">
<TABLE class="grades" >
<%= render :partial => 'grades/participant_charts', :locals => {:prefix => nil} %>
<%= render :partial => 'grades/participant_title', :locals => {:prefix => nil} %>
<%= render :partial => 'grades/participant', :locals => {:prefix => 'user',
:team => false,
:participant_id => ptid = @participant.id,
:index => 0,
:team_size => 1,
:pscore => @pscore} %>

</TABLE>
<% case @assignment.reputation_algorithm %>
<% when 'Hamer' %>
<h3>Reputation</h3>
<p id = "reputation_score" class = <%= get_css_style_for_hamer_reputation(@participant.Hamer)%> style = "width:60px;"><%= @participant.Hamer %></p>
<% when 'Lauw' %>
<h3>Reputation</h3>
<p id = "reputation_score" class = <%= get_css_style_for_lauw_reputation(@participant.Lauw)%> style = "width:60px;"><%= @participant.Lauw %></p>
<%end%>
</div>
<div id="tabs-2">
<TABLE>
<TR>
<TD COLSPAN="10"><%= render :partial=>'grades/reviews', :locals => {:prefix => 'user', :participant => @pscore[:participant], :rscore => @pscore[:review]} %></TD>
</TR>
</TABLE>
</div>
<div id="tabs-3">
<%= render "view_team", :id => params[:id] %>
</div>
</div>

<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</pre>

The Stats tab was easy since we just took what was already in that view and moved it to only be displayed under the first tab.

The Review tab was created by pulling up the rendering of the review partial out of the participant partial. This just needed to point the local variables to variables that were in this View.

The Alternate View tab was a bit tricky since it was it's on view (view_team). So what was done was creating a partial named _view_team and moving all of the code that was in that view the partial and rendering the partial in the view_team view. This allowed us to access this view from the view_team and view_my_score views simultaneously while using the same code base.

We were going to add the sub tabs for the Reviewers but after implementing the "show all reviews" buttons those tabs became tricky and the page got really cluttered. So we decided that we could just keep the existing scores Review layout with the changes of toggling whether to hide or show the reviews.

=====Task 3 Testing=====

To test this feature go to the view_my_scores page for the student where you should see the 3 tabs.
Make sure that each tab gives you a similar view as described above.

====Task-4====
* Make review feedback more readable by changing UI or background color.

This task is fairly easy we are supposed to make feedback response more readable or more focused for user to read. As instructor suggested this can be done by graying out the question or we can change the background of the response text.

====Task-5 (Change view in response controller, when clicked on review link)====
When scores are view in alternate view(Heat map) it displays score received for each review in tabular format when we click on any review hyperlink it invokes view method of response controller which render unnecessary elements like submission content, upload file button,etc along with review and feedback, instead it should just show review and feedback. So we created a new view to implement this functionality and removed other unrequired elements.

Files updated:

app/controllers/response_controller.rb
app/views/grades/_view_team.html.erb
app/views/response/view_review.html.erb
config/routes.rb

We have selected the unrequired element in below mockup image.

[[File:Review_view.png]]

=====UI TEST=====

====Task-6 (Optional)====
* Add search box to search between reviews for particular string for a specific project(Student's view) or for specific user(Instructor's view).
This functionality will help user to readily access the required content within the reviews.<br />
Below is the mock-up image of how functionality will look after implementations

[[File:SearchFunctionality.png]]

==UI Testing==
* To Test UI for student View
** Log-in as Student.
** Go to Assignment
** Click Your scores
** Click show reviews

* To Test UI for instructor View
** Log-in as Instructor.
** Go to Manage Assignments
** Click on review report of a particular assignment
** Click on any item in team reviewed tab, to see reviews.

== Future Improvements ==

== References ==
<references/>

File:Review view.png

2016-12-03T05:34:28Z

Nramcha:

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-12-03T05:30:14Z

Nramcha: /* Task-5 (Change view in response controller, when clicked on review link) */

== Introduction ==

Expertiza<ref>https://expertiza.ncsu.edu/</ref> is an open-source web application to create re-usable learning objects through peer-reviews to facilitate incremental learning. Students can submit learning objects such as articles, wiki pages, repository links and with the help of peer reviews, improve them. The project has been developed using the Ruby on Rails<ref>https://en.wikipedia.org/wiki/Ruby_on_Rails</ref> framework and is supported by the [http://www.nsf.gov National Science Foundation].

== Project Description ==

=== Purpose and Scope ===

Expertiza assignments are based on a peer review system where the instructor creates rubrics for an assignment through questionnaires which students use to review other students' submissions. The author of the submission is given an opportunity to provide feedback about these reviews. Expertiza displays reviews (i) to the team who was reviewed, and (ii) to the reviewer. A student user can see all the reviews of his/her team’s project. The instructor can see all the reviews of everyone’s project. The instructor also has access to a Review report, which shows, for each reviewer, all the reviews that (s)he wrote. Both score report and review report use different code so UI is non-orthogonal, it would be great if we can follow same UI structure for both score and review report which also reduce the DRY problems. There is no functionality for user to search between reviews of particular project, such a functionality will help user to search through all reviews for specific problem they are trying to focus on.

=== Task Description ===

The project requires completion of the following tasks:
====Task-1 (Update review report view in Instructor's view)====
* A single way of displaying reviews that would be visible to students (reviews that they did, and reviews that their team received), and instructors (reviews that each team received, sorted by team; and reviews that each student did, sorted by student)

For student view the UI is consistent in displaying reviews they have done and reviews they have received but for instructor's view the review report follows different UI and have different code. To make the UI consistent we have decided to choose the UI design of student view as the base and modify the UI design for review report in instructor's view. This will allow us to use the same code in both views, thereby following DRY principle.

Previous View:

[[File:review_report.png]]

Updated View:

[[File:review-report-changed.png]]

Implementation:

Review report view is rendered in app/views/popup/team_users_popup.html.haml. In this view, we populate table by iterating over each question under each round. While same approach was used previously but here we replace each row by a predefined format used for rendering question similar to student view.

<pre>
%table{:border => "1px solid #ccc"}
%tr
%th{:align => "left", :width => "50%"} Question
%th{:width => "5%"} Score
%th{:width => "45%"} Comments
- instance_variable_get('@scores_round_' + round.to_s).each do |s|
%tr
%td{:align => "left"}
= Question.find(s.question_id).txt
- if Question.find(s.question_id).is_a?(ScoredQuestion)
%td{:align => "center"}
= s.answer
\/#{instance_variable_get('@max_score_round_' + round.to_s)}
- else
%td{:align => "center"}
= s.answer
%td{:align => "left"}
= s.comments
%tr
%th Reviewer Score (Σ weighted score/Σ weighted available score)
%td{:align => "center"}
= instance_variable_get('@sum_round_' + round.to_s)
\/#{instance_variable_get('@total_possible_round_' + round.to_s)}
%td{:align => "left"}
\= #{instance_variable_get('@total_percentage_round_' + round.to_s)}
%table
</pre>

We replace the above code by code below, here in each row we invoke view_completed_question method defined in Criterion.rb for scored questions which insert the html code to render question,score,comments.

<pre>
%table{:border => "1px solid #ccc" ,:class => "table table-bordered"}
- counter = 0
- instance_variable_get('@scores_round_' + round.to_s).each do |s|
- counter += 1
- row_class = counter.even? ? "info" : "warning"
- question = Question.find(s.question_id)
%tr{:class => row_class}
%td
= question.becomes(Criterion).view_completed_question(counter,s,instance_variable_get('@max_score_round_' + round.to_s))
%tr
%td{:style => "font-weight:bold"}
= 'Reviewer Score (Σ weighted score/Σ weighted available score) = '+ instance_variable_get('@sum_round_' + round.to_s).to_s |
\/ #{instance_variable_get('@total_possible_round_' + round.to_s)} (#{instance_variable_get('@total_percentage_round_' + round.to_s)}%)
%table
</pre>

====Task-2====
* Add button/link to hide and expand all the reviews.

Below is the mock-up image of how functionality will look after implementations

[[File:show-hide.png]]

====Task-3====
* Create a tabbed view for each review view type : Statistic, Reviews and Alternate Views tabs.

Initially I weighed using TabsOnRails or Tabulous gems to create the tabs for this project but after doing some research these gems did not allow me to create tabs dynamically so Jquery UI was used to create the tabs. This was a plus since we did not need to install a new gem to the project. The review report will need to be modified to have the addition of the Statistic, Reviews and Alternate Views tabs at the top of the page. It will default to the Statistics tab which should look something like:

[[File:tabStats.png]]

And the Reviews tab should produce a view like:

[[File:tabReviews.png]]

The Alternate View tab should produce a view like:

[[File:tabAlt.png]]

=====Task 3 Implementation=====

To create the tabs on the view_my_scores view we used the following Jquery code:

<pre>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Stats</a></li>
<li><a href="#tabs-2">Reviews</a></li>
<li><a href="#tabs-3">Alternate View</a></li>
</ul>
<div id="tabs-1">
<TABLE class="grades" >
<%= render :partial => 'grades/participant_charts', :locals => {:prefix => nil} %>
<%= render :partial => 'grades/participant_title', :locals => {:prefix => nil} %>
<%= render :partial => 'grades/participant', :locals => {:prefix => 'user',
:team => false,
:participant_id => ptid = @participant.id,
:index => 0,
:team_size => 1,
:pscore => @pscore} %>

</TABLE>
<% case @assignment.reputation_algorithm %>
<% when 'Hamer' %>
<h3>Reputation</h3>
<p id = "reputation_score" class = <%= get_css_style_for_hamer_reputation(@participant.Hamer)%> style = "width:60px;"><%= @participant.Hamer %></p>
<% when 'Lauw' %>
<h3>Reputation</h3>
<p id = "reputation_score" class = <%= get_css_style_for_lauw_reputation(@participant.Lauw)%> style = "width:60px;"><%= @participant.Lauw %></p>
<%end%>
</div>
<div id="tabs-2">
<TABLE>
<TR>
<TD COLSPAN="10"><%= render :partial=>'grades/reviews', :locals => {:prefix => 'user', :participant => @pscore[:participant], :rscore => @pscore[:review]} %></TD>
</TR>
</TABLE>
</div>
<div id="tabs-3">
<%= render "view_team", :id => params[:id] %>
</div>
</div>

<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</pre>

The Stats tab was easy since we just took what was already in that view and moved it to only be displayed under the first tab.

The Review tab was created by pulling up the rendering of the review partial out of the participant partial. This just needed to point the local variables to variables that were in this View.

The Alternate View tab was a bit tricky since it was it's on view (view_team). So what was done was creating a partial named _view_team and moving all of the code that was in that view the partial and rendering the partial in the view_team view. This allowed us to access this view from the view_team and view_my_score views simultaneously while using the same code base.

We were going to add the sub tabs for the Reviewers but after implementing the "show all reviews" buttons those tabs became tricky and the page got really cluttered. So we decided that we could just keep the existing scores Review layout with the changes of toggling whether to hide or show the reviews.

=====Task 3 Testing=====

To test this feature go to the view_my_scores page for the student where you should see the 3 tabs.
Make sure that each tab gives you a similar view as described above.

====Task-4====
* Make review feedback more readable by changing UI or background color.

This task is fairly easy we are supposed to make feedback response more readable or more focused for user to read. As instructor suggested this can be done by graying out the question or we can change the background of the response text.

====Task-5 (Change view in response controller, when clicked on review link)====
When scores are view in alternate view(Heat map) it displays score received for each review in tabular format when we click on any review hyperlink it invokes view method of response controller which render unnecessary elements like submission content, upload file button,etc along with review and feedback, instead it should just show review and feedback. So we created a new view to implement this functionality and removed other unrequired elements.

Files updated:

app/controllers/response_controller.rb
app/views/grades/_view_team.html.erb
app/views/response/view_review.html.erb
config/routes.rb

We have selected the unrequired element in below mockup image.

[[File:Review_view.png]]

====Task-6 (Optional)====
* Add search box to search between reviews for particular string for a specific project(Student's view) or for specific user(Instructor's view).
This functionality will help user to readily access the required content within the reviews.<br />
Below is the mock-up image of how functionality will look after implementations

[[File:SearchFunctionality.png]]

==UI Testing==
* To Test UI for student View
** Log-in as Student.
** Go to Assignment
** Click Your scores
** Click show reviews

* To Test UI for instructor View
** Log-in as Instructor.
** Go to Manage Assignments
** Click on review report of a particular assignment
** Click on any item in team reviewed tab, to see reviews.

== Future Improvements ==

== References ==
<references/>

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-12-03T05:28:56Z

Nramcha: /* Task-5 (Optionally) */

== Introduction ==

Expertiza<ref>https://expertiza.ncsu.edu/</ref> is an open-source web application to create re-usable learning objects through peer-reviews to facilitate incremental learning. Students can submit learning objects such as articles, wiki pages, repository links and with the help of peer reviews, improve them. The project has been developed using the Ruby on Rails<ref>https://en.wikipedia.org/wiki/Ruby_on_Rails</ref> framework and is supported by the [http://www.nsf.gov National Science Foundation].

== Project Description ==

=== Purpose and Scope ===

Expertiza assignments are based on a peer review system where the instructor creates rubrics for an assignment through questionnaires which students use to review other students' submissions. The author of the submission is given an opportunity to provide feedback about these reviews. Expertiza displays reviews (i) to the team who was reviewed, and (ii) to the reviewer. A student user can see all the reviews of his/her team’s project. The instructor can see all the reviews of everyone’s project. The instructor also has access to a Review report, which shows, for each reviewer, all the reviews that (s)he wrote. Both score report and review report use different code so UI is non-orthogonal, it would be great if we can follow same UI structure for both score and review report which also reduce the DRY problems. There is no functionality for user to search between reviews of particular project, such a functionality will help user to search through all reviews for specific problem they are trying to focus on.

=== Task Description ===

The project requires completion of the following tasks:
====Task-1 (Update review report view in Instructor's view)====
* A single way of displaying reviews that would be visible to students (reviews that they did, and reviews that their team received), and instructors (reviews that each team received, sorted by team; and reviews that each student did, sorted by student)

For student view the UI is consistent in displaying reviews they have done and reviews they have received but for instructor's view the review report follows different UI and have different code. To make the UI consistent we have decided to choose the UI design of student view as the base and modify the UI design for review report in instructor's view. This will allow us to use the same code in both views, thereby following DRY principle.

Previous View:

[[File:review_report.png]]

Updated View:

[[File:review-report-changed.png]]

Implementation:

Review report view is rendered in app/views/popup/team_users_popup.html.haml. In this view, we populate table by iterating over each question under each round. While same approach was used previously but here we replace each row by a predefined format used for rendering question similar to student view.

<pre>
%table{:border => "1px solid #ccc"}
%tr
%th{:align => "left", :width => "50%"} Question
%th{:width => "5%"} Score
%th{:width => "45%"} Comments
- instance_variable_get('@scores_round_' + round.to_s).each do |s|
%tr
%td{:align => "left"}
= Question.find(s.question_id).txt
- if Question.find(s.question_id).is_a?(ScoredQuestion)
%td{:align => "center"}
= s.answer
\/#{instance_variable_get('@max_score_round_' + round.to_s)}
- else
%td{:align => "center"}
= s.answer
%td{:align => "left"}
= s.comments
%tr
%th Reviewer Score (Σ weighted score/Σ weighted available score)
%td{:align => "center"}
= instance_variable_get('@sum_round_' + round.to_s)
\/#{instance_variable_get('@total_possible_round_' + round.to_s)}
%td{:align => "left"}
\= #{instance_variable_get('@total_percentage_round_' + round.to_s)}
%table
</pre>

We replace the above code by code below, here in each row we invoke view_completed_question method defined in Criterion.rb for scored questions which insert the html code to render question,score,comments.

<pre>
%table{:border => "1px solid #ccc" ,:class => "table table-bordered"}
- counter = 0
- instance_variable_get('@scores_round_' + round.to_s).each do |s|
- counter += 1
- row_class = counter.even? ? "info" : "warning"
- question = Question.find(s.question_id)
%tr{:class => row_class}
%td
= question.becomes(Criterion).view_completed_question(counter,s,instance_variable_get('@max_score_round_' + round.to_s))
%tr
%td{:style => "font-weight:bold"}
= 'Reviewer Score (Σ weighted score/Σ weighted available score) = '+ instance_variable_get('@sum_round_' + round.to_s).to_s |
\/ #{instance_variable_get('@total_possible_round_' + round.to_s)} (#{instance_variable_get('@total_percentage_round_' + round.to_s)}%)
%table
</pre>

====Task-2====
* Add button/link to hide and expand all the reviews.

Below is the mock-up image of how functionality will look after implementations

[[File:show-hide.png]]

====Task-3====
* Create a tabbed view for each review view type : Statistic, Reviews and Alternate Views tabs.

Initially I weighed using TabsOnRails or Tabulous gems to create the tabs for this project but after doing some research these gems did not allow me to create tabs dynamically so Jquery UI was used to create the tabs. This was a plus since we did not need to install a new gem to the project. The review report will need to be modified to have the addition of the Statistic, Reviews and Alternate Views tabs at the top of the page. It will default to the Statistics tab which should look something like:

[[File:tabStats.png]]

And the Reviews tab should produce a view like:

[[File:tabReviews.png]]

The Alternate View tab should produce a view like:

[[File:tabAlt.png]]

=====Task 3 Implementation=====

To create the tabs on the view_my_scores view we used the following Jquery code:

<pre>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Stats</a></li>
<li><a href="#tabs-2">Reviews</a></li>
<li><a href="#tabs-3">Alternate View</a></li>
</ul>
<div id="tabs-1">
<TABLE class="grades" >
<%= render :partial => 'grades/participant_charts', :locals => {:prefix => nil} %>
<%= render :partial => 'grades/participant_title', :locals => {:prefix => nil} %>
<%= render :partial => 'grades/participant', :locals => {:prefix => 'user',
:team => false,
:participant_id => ptid = @participant.id,
:index => 0,
:team_size => 1,
:pscore => @pscore} %>

</TABLE>
<% case @assignment.reputation_algorithm %>
<% when 'Hamer' %>
<h3>Reputation</h3>
<p id = "reputation_score" class = <%= get_css_style_for_hamer_reputation(@participant.Hamer)%> style = "width:60px;"><%= @participant.Hamer %></p>
<% when 'Lauw' %>
<h3>Reputation</h3>
<p id = "reputation_score" class = <%= get_css_style_for_lauw_reputation(@participant.Lauw)%> style = "width:60px;"><%= @participant.Lauw %></p>
<%end%>
</div>
<div id="tabs-2">
<TABLE>
<TR>
<TD COLSPAN="10"><%= render :partial=>'grades/reviews', :locals => {:prefix => 'user', :participant => @pscore[:participant], :rscore => @pscore[:review]} %></TD>
</TR>
</TABLE>
</div>
<div id="tabs-3">
<%= render "view_team", :id => params[:id] %>
</div>
</div>

<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</pre>

The Stats tab was easy since we just took what was already in that view and moved it to only be displayed under the first tab.

The Review tab was created by pulling up the rendering of the review partial out of the participant partial. This just needed to point the local variables to variables that were in this View.

The Alternate View tab was a bit tricky since it was it's on view (view_team). So what was done was creating a partial named _view_team and moving all of the code that was in that view the partial and rendering the partial in the view_team view. This allowed us to access this view from the view_team and view_my_score views simultaneously while using the same code base.

We were going to add the sub tabs for the Reviewers but after implementing the "show all reviews" buttons those tabs became tricky and the page got really cluttered. So we decided that we could just keep the existing scores Review layout with the changes of toggling whether to hide or show the reviews.

=====Task 3 Testing=====

To test this feature go to the view_my_scores page for the student where you should see the 3 tabs.
Make sure that each tab gives you a similar view as described above.

====Task-4====
* Make review feedback more readable by changing UI or background color.

This task is fairly easy we are supposed to make feedback response more readable or more focused for user to read. As instructor suggested this can be done by graying out the question or we can change the background of the response text.

====Task-5 (Change view in response controller, when clicked on review link)====
When scores are view in alternate view(Heat map) it displays score received for each review in tabular format when we click on any review hyperlink it invokes view method of response controller which render unnecessary elements like submission content, upload file button,etc along with review and feedback, instead it should just show review and feedback. So we created a new view to implement this functionality and removed other unrequired elements.

We have selected the unrequired element in below mockup image.
Files updated: app/controllers/response_controller.rb
app/views/grades/_view_team.html.erb
app/views/response/view_review.html.erb
config/routes.rb

[[File:Review_view.png]]

====Task-6 (Optional)====
* Add search box to search between reviews for particular string for a specific project(Student's view) or for specific user(Instructor's view).
This functionality will help user to readily access the required content within the reviews.<br />
Below is the mock-up image of how functionality will look after implementations

[[File:SearchFunctionality.png]]

==UI Testing==
* To Test UI for student View
** Log-in as Student.
** Go to Assignment
** Click Your scores
** Click show reviews

* To Test UI for instructor View
** Log-in as Instructor.
** Go to Manage Assignments
** Click on review report of a particular assignment
** Click on any item in team reviewed tab, to see reviews.

== Future Improvements ==

== References ==
<references/>

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-12-03T03:51:17Z

Nramcha: /* Task-1(Update review report view in Instructor's report) */

== Introduction ==

Expertiza<ref>https://expertiza.ncsu.edu/</ref> is an open-source web application to create re-usable learning objects through peer-reviews to facilitate incremental learning. Students can submit learning objects such as articles, wiki pages, repository links and with the help of peer reviews, improve them. The project has been developed using the Ruby on Rails<ref>https://en.wikipedia.org/wiki/Ruby_on_Rails</ref> framework and is supported by the [http://www.nsf.gov National Science Foundation].

== Project Description ==

=== Purpose and Scope ===

Expertiza assignments are based on a peer review system where the instructor creates rubrics for an assignment through questionnaires which students use to review other students' submissions. The author of the submission is given an opportunity to provide feedback about these reviews. Expertiza displays reviews (i) to the team who was reviewed, and (ii) to the reviewer. A student user can see all the reviews of his/her team’s project. The instructor can see all the reviews of everyone’s project. The instructor also has access to a Review report, which shows, for each reviewer, all the reviews that (s)he wrote. Both score report and review report use different code so UI is non-orthogonal, it would be great if we can follow same UI structure for both score and review report which also reduce the DRY problems. There is no functionality for user to search between reviews of particular project, such a functionality will help user to search through all reviews for specific problem they are trying to focus on.

=== Task Description ===

The project requires completion of the following tasks:
====Task-1 (Update review report view in Instructor's view)====
* A single way of displaying reviews that would be visible to students (reviews that they did, and reviews that their team received), and instructors (reviews that each team received, sorted by team; and reviews that each student did, sorted by student)

For student view the UI is consistent in displaying reviews they have done and reviews they have received but for instructor's view the review report follows different UI and have different code. To make the UI consistent we have decided to choose the UI design of student view as the base and modify the UI design for review report in instructor's view. This will allow us to use the same code in both views, thereby following DRY principle.

Previous View:

[[File:review_report.png]]

Updated View:

[[File:review-report-changed.png]]

Implementation:

Review report view is rendered in app/views/popup/team_users_popup.html.haml. In this view, we populate table by iterating over each question under each round. While same approach was used previously but here we replace each row by a predefined format used for rendering question similar to student view.

<pre>
%table{:border => "1px solid #ccc"}
%tr
%th{:align => "left", :width => "50%"} Question
%th{:width => "5%"} Score
%th{:width => "45%"} Comments
- instance_variable_get('@scores_round_' + round.to_s).each do |s|
%tr
%td{:align => "left"}
= Question.find(s.question_id).txt
- if Question.find(s.question_id).is_a?(ScoredQuestion)
%td{:align => "center"}
= s.answer
\/#{instance_variable_get('@max_score_round_' + round.to_s)}
- else
%td{:align => "center"}
= s.answer
%td{:align => "left"}
= s.comments
%tr
%th Reviewer Score (Σ weighted score/Σ weighted available score)
%td{:align => "center"}
= instance_variable_get('@sum_round_' + round.to_s)
\/#{instance_variable_get('@total_possible_round_' + round.to_s)}
%td{:align => "left"}
\= #{instance_variable_get('@total_percentage_round_' + round.to_s)}
%table
</pre>

We replace the above code by code below, here in each row we invoke view_completed_question method defined in Criterion.rb for scored questions which insert the html code to render question,score,comments.

<pre>
%table{:border => "1px solid #ccc" ,:class => "table table-bordered"}
- counter = 0
- instance_variable_get('@scores_round_' + round.to_s).each do |s|
- counter += 1
- row_class = counter.even? ? "info" : "warning"
- question = Question.find(s.question_id)
%tr{:class => row_class}
%td
= question.becomes(Criterion).view_completed_question(counter,s,instance_variable_get('@max_score_round_' + round.to_s))
%tr
%td{:style => "font-weight:bold"}
= 'Reviewer Score (Σ weighted score/Σ weighted available score) = '+ instance_variable_get('@sum_round_' + round.to_s).to_s |
\/ #{instance_variable_get('@total_possible_round_' + round.to_s)} (#{instance_variable_get('@total_percentage_round_' + round.to_s)}%)
%table
</pre>

====Task-2====
* Add button/link to hide and expand all the reviews.

Below is the mock-up image of how functionality will look after implementations

[[File:show-hide.png]]

====Task-3====
* Create a tabbed view for each review view type : Heat map, Overall statistics, Individual reviews

This task will require the use of TabsOnRails to create the tabs needed. The review report will need to be modified to have the addition of the Statistics, Heatmap, and GridView tabs at the top of the page. It will default to the Statistics tab which should look something like:

[[File:Overview20.png]]

The heatmap tab should produce a view like:

[[File:heatmap.png]]

And the grid view tab should produce a view like:

[[File:gridview2.png]]

Note: for this view we can move the [Max points: 5] to the statistics page since this will be the same for every question. We can also add "view score", view question" and "view comments" in place of the show review link to see what we want to see per question. This will be modified in the response model.

To handle being able to switch between reviews you could add sub tabs underneath the main 3 tabs for each of the reviewers (The student would see a tab with the reviewers number while the instructor will see tabs with the reviewers name).

=====Task 3 Testing=====

To test this feature go to the view_my_scores page for the student where you should see the 3 tabs.
Make sure that each tab gives you a similar view as described above.

To test the tabs for each reviewer's review:
Make sure that you only see that reviewer's review when their tab is selected.
Make sure that when you select another reviewer's tab that the review you are seeing changes.
Make sure reviewers tabs only appears when the Individual reviewers tab is selected.
====Task-4====
* Make review feedback more readable by changing UI or background color.

This task is fairly easy we are supposed to make feedback response more readable or more focused for user to read. As instructor suggested this can be done by graying out the question or we can change the background of the response text.

====Task-5 (Optionally)====
* Add search box to search between reviews for particular string for a specific project(Student's view) or for specific user(Instructor's view).
This functionality will help user to readily access the required content within the reviews.<br />
Below is the mock-up image of how functionality will look after implementations

[[File:SearchFunctionality.png]]

==UI Testing==
* To Test UI for student View
** Log-in as Student.
** Go to Assignment
** Click Your scores
** Click show reviews

* To Test UI for instructor View
** Log-in as Instructor.
** Go to Manage Assignments
** Click on review report of a particular assignment
** Click on any item in team reviewed tab, to see reviews.

== Future Improvements ==

== References ==
<references/>

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-12-03T03:50:53Z

Nramcha: /* Task-1(Update Instructor's view on review report) */

== Introduction ==

Expertiza<ref>https://expertiza.ncsu.edu/</ref> is an open-source web application to create re-usable learning objects through peer-reviews to facilitate incremental learning. Students can submit learning objects such as articles, wiki pages, repository links and with the help of peer reviews, improve them. The project has been developed using the Ruby on Rails<ref>https://en.wikipedia.org/wiki/Ruby_on_Rails</ref> framework and is supported by the [http://www.nsf.gov National Science Foundation].

== Project Description ==

=== Purpose and Scope ===

Expertiza assignments are based on a peer review system where the instructor creates rubrics for an assignment through questionnaires which students use to review other students' submissions. The author of the submission is given an opportunity to provide feedback about these reviews. Expertiza displays reviews (i) to the team who was reviewed, and (ii) to the reviewer. A student user can see all the reviews of his/her team’s project. The instructor can see all the reviews of everyone’s project. The instructor also has access to a Review report, which shows, for each reviewer, all the reviews that (s)he wrote. Both score report and review report use different code so UI is non-orthogonal, it would be great if we can follow same UI structure for both score and review report which also reduce the DRY problems. There is no functionality for user to search between reviews of particular project, such a functionality will help user to search through all reviews for specific problem they are trying to focus on.

=== Task Description ===

The project requires completion of the following tasks:
====Task-1(Update review report view in Instructor's report)====
* A single way of displaying reviews that would be visible to students (reviews that they did, and reviews that their team received), and instructors (reviews that each team received, sorted by team; and reviews that each student did, sorted by student)

For student view the UI is consistent in displaying reviews they have done and reviews they have received but for instructor's view the review report follows different UI and have different code. To make the UI consistent we have decided to choose the UI design of student view as the base and modify the UI design for review report in instructor's view. This will allow us to use the same code in both views, thereby following DRY principle.

Previous View:

[[File:review_report.png]]

Updated View:

[[File:review-report-changed.png]]

Implementation:

Review report view is rendered in app/views/popup/team_users_popup.html.haml. In this view, we populate table by iterating over each question under each round. While same approach was used previously but here we replace each row by a predefined format used for rendering question similar to student view.

<pre>
%table{:border => "1px solid #ccc"}
%tr
%th{:align => "left", :width => "50%"} Question
%th{:width => "5%"} Score
%th{:width => "45%"} Comments
- instance_variable_get('@scores_round_' + round.to_s).each do |s|
%tr
%td{:align => "left"}
= Question.find(s.question_id).txt
- if Question.find(s.question_id).is_a?(ScoredQuestion)
%td{:align => "center"}
= s.answer
\/#{instance_variable_get('@max_score_round_' + round.to_s)}
- else
%td{:align => "center"}
= s.answer
%td{:align => "left"}
= s.comments
%tr
%th Reviewer Score (Σ weighted score/Σ weighted available score)
%td{:align => "center"}
= instance_variable_get('@sum_round_' + round.to_s)
\/#{instance_variable_get('@total_possible_round_' + round.to_s)}
%td{:align => "left"}
\= #{instance_variable_get('@total_percentage_round_' + round.to_s)}
%table
</pre>

We replace the above code by code below, here in each row we invoke view_completed_question method defined in Criterion.rb for scored questions which insert the html code to render question,score,comments.

<pre>
%table{:border => "1px solid #ccc" ,:class => "table table-bordered"}
- counter = 0
- instance_variable_get('@scores_round_' + round.to_s).each do |s|
- counter += 1
- row_class = counter.even? ? "info" : "warning"
- question = Question.find(s.question_id)
%tr{:class => row_class}
%td
= question.becomes(Criterion).view_completed_question(counter,s,instance_variable_get('@max_score_round_' + round.to_s))
%tr
%td{:style => "font-weight:bold"}
= 'Reviewer Score (Σ weighted score/Σ weighted available score) = '+ instance_variable_get('@sum_round_' + round.to_s).to_s |
\/ #{instance_variable_get('@total_possible_round_' + round.to_s)} (#{instance_variable_get('@total_percentage_round_' + round.to_s)}%)
%table
</pre>

====Task-2====
* Add button/link to hide and expand all the reviews.

Below is the mock-up image of how functionality will look after implementations

[[File:show-hide.png]]

====Task-3====
* Create a tabbed view for each review view type : Heat map, Overall statistics, Individual reviews

This task will require the use of TabsOnRails to create the tabs needed. The review report will need to be modified to have the addition of the Statistics, Heatmap, and GridView tabs at the top of the page. It will default to the Statistics tab which should look something like:

[[File:Overview20.png]]

The heatmap tab should produce a view like:

[[File:heatmap.png]]

And the grid view tab should produce a view like:

[[File:gridview2.png]]

Note: for this view we can move the [Max points: 5] to the statistics page since this will be the same for every question. We can also add "view score", view question" and "view comments" in place of the show review link to see what we want to see per question. This will be modified in the response model.

To handle being able to switch between reviews you could add sub tabs underneath the main 3 tabs for each of the reviewers (The student would see a tab with the reviewers number while the instructor will see tabs with the reviewers name).

=====Task 3 Testing=====

To test this feature go to the view_my_scores page for the student where you should see the 3 tabs.
Make sure that each tab gives you a similar view as described above.

To test the tabs for each reviewer's review:
Make sure that you only see that reviewer's review when their tab is selected.
Make sure that when you select another reviewer's tab that the review you are seeing changes.
Make sure reviewers tabs only appears when the Individual reviewers tab is selected.
====Task-4====
* Make review feedback more readable by changing UI or background color.

This task is fairly easy we are supposed to make feedback response more readable or more focused for user to read. As instructor suggested this can be done by graying out the question or we can change the background of the response text.

====Task-5 (Optionally)====
* Add search box to search between reviews for particular string for a specific project(Student's view) or for specific user(Instructor's view).
This functionality will help user to readily access the required content within the reviews.<br />
Below is the mock-up image of how functionality will look after implementations

[[File:SearchFunctionality.png]]

==UI Testing==
* To Test UI for student View
** Log-in as Student.
** Go to Assignment
** Click Your scores
** Click show reviews

* To Test UI for instructor View
** Log-in as Instructor.
** Go to Manage Assignments
** Click on review report of a particular assignment
** Click on any item in team reviewed tab, to see reviews.

== Future Improvements ==

== References ==
<references/>

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-12-03T03:50:17Z

Nramcha: /* Task Description */

== Introduction ==

Expertiza<ref>https://expertiza.ncsu.edu/</ref> is an open-source web application to create re-usable learning objects through peer-reviews to facilitate incremental learning. Students can submit learning objects such as articles, wiki pages, repository links and with the help of peer reviews, improve them. The project has been developed using the Ruby on Rails<ref>https://en.wikipedia.org/wiki/Ruby_on_Rails</ref> framework and is supported by the [http://www.nsf.gov National Science Foundation].

== Project Description ==

=== Purpose and Scope ===

Expertiza assignments are based on a peer review system where the instructor creates rubrics for an assignment through questionnaires which students use to review other students' submissions. The author of the submission is given an opportunity to provide feedback about these reviews. Expertiza displays reviews (i) to the team who was reviewed, and (ii) to the reviewer. A student user can see all the reviews of his/her team’s project. The instructor can see all the reviews of everyone’s project. The instructor also has access to a Review report, which shows, for each reviewer, all the reviews that (s)he wrote. Both score report and review report use different code so UI is non-orthogonal, it would be great if we can follow same UI structure for both score and review report which also reduce the DRY problems. There is no functionality for user to search between reviews of particular project, such a functionality will help user to search through all reviews for specific problem they are trying to focus on.

=== Task Description ===

The project requires completion of the following tasks:
====Task-1(Update Instructor's view on review report)====
* A single way of displaying reviews that would be visible to students (reviews that they did, and reviews that their team received), and instructors (reviews that each team received, sorted by team; and reviews that each student did, sorted by student)

For student view the UI is consistent in displaying reviews they have done and reviews they have received but for instructor's view the review report follows different UI and have different code. To make the UI consistent we have decided to choose the UI design of student view as the base and modify the UI design for review report in instructor's view. This will allow us to use the same code in both views, thereby following DRY principle.

Previous View:

[[File:review_report.png]]

Updated View:

[[File:review-report-changed.png]]

Implementation:

Review report view is rendered in app/views/popup/team_users_popup.html.haml. In this view, we populate table by iterating over each question under each round. While same approach was used previously but here we replace each row by a predefined format used for rendering question similar to student view.

<pre>
%table{:border => "1px solid #ccc"}
%tr
%th{:align => "left", :width => "50%"} Question
%th{:width => "5%"} Score
%th{:width => "45%"} Comments
- instance_variable_get('@scores_round_' + round.to_s).each do |s|
%tr
%td{:align => "left"}
= Question.find(s.question_id).txt
- if Question.find(s.question_id).is_a?(ScoredQuestion)
%td{:align => "center"}
= s.answer
\/#{instance_variable_get('@max_score_round_' + round.to_s)}
- else
%td{:align => "center"}
= s.answer
%td{:align => "left"}
= s.comments
%tr
%th Reviewer Score (Σ weighted score/Σ weighted available score)
%td{:align => "center"}
= instance_variable_get('@sum_round_' + round.to_s)
\/#{instance_variable_get('@total_possible_round_' + round.to_s)}
%td{:align => "left"}
\= #{instance_variable_get('@total_percentage_round_' + round.to_s)}
%table
</pre>

We replace the above code by code below, here in each row we invoke view_completed_question method defined in Criterion.rb for scored questions which insert the html code to render question,score,comments.

<pre>
%table{:border => "1px solid #ccc" ,:class => "table table-bordered"}
- counter = 0
- instance_variable_get('@scores_round_' + round.to_s).each do |s|
- counter += 1
- row_class = counter.even? ? "info" : "warning"
- question = Question.find(s.question_id)
%tr{:class => row_class}
%td
= question.becomes(Criterion).view_completed_question(counter,s,instance_variable_get('@max_score_round_' + round.to_s))
%tr
%td{:style => "font-weight:bold"}
= 'Reviewer Score (Σ weighted score/Σ weighted available score) = '+ instance_variable_get('@sum_round_' + round.to_s).to_s |
\/ #{instance_variable_get('@total_possible_round_' + round.to_s)} (#{instance_variable_get('@total_percentage_round_' + round.to_s)}%)
%table
</pre>

====Task-2====
* Add button/link to hide and expand all the reviews.

Below is the mock-up image of how functionality will look after implementations

[[File:show-hide.png]]

====Task-3====
* Create a tabbed view for each review view type : Heat map, Overall statistics, Individual reviews

This task will require the use of TabsOnRails to create the tabs needed. The review report will need to be modified to have the addition of the Statistics, Heatmap, and GridView tabs at the top of the page. It will default to the Statistics tab which should look something like:

[[File:Overview20.png]]

The heatmap tab should produce a view like:

[[File:heatmap.png]]

And the grid view tab should produce a view like:

[[File:gridview2.png]]

Note: for this view we can move the [Max points: 5] to the statistics page since this will be the same for every question. We can also add "view score", view question" and "view comments" in place of the show review link to see what we want to see per question. This will be modified in the response model.

To handle being able to switch between reviews you could add sub tabs underneath the main 3 tabs for each of the reviewers (The student would see a tab with the reviewers number while the instructor will see tabs with the reviewers name).

=====Task 3 Testing=====

To test this feature go to the view_my_scores page for the student where you should see the 3 tabs.
Make sure that each tab gives you a similar view as described above.

To test the tabs for each reviewer's review:
Make sure that you only see that reviewer's review when their tab is selected.
Make sure that when you select another reviewer's tab that the review you are seeing changes.
Make sure reviewers tabs only appears when the Individual reviewers tab is selected.
====Task-4====
* Make review feedback more readable by changing UI or background color.

This task is fairly easy we are supposed to make feedback response more readable or more focused for user to read. As instructor suggested this can be done by graying out the question or we can change the background of the response text.

====Task-5 (Optionally)====
* Add search box to search between reviews for particular string for a specific project(Student's view) or for specific user(Instructor's view).
This functionality will help user to readily access the required content within the reviews.<br />
Below is the mock-up image of how functionality will look after implementations

[[File:SearchFunctionality.png]]

==UI Testing==
* To Test UI for student View
** Log-in as Student.
** Go to Assignment
** Click Your scores
** Click show reviews

* To Test UI for instructor View
** Log-in as Instructor.
** Go to Manage Assignments
** Click on review report of a particular assignment
** Click on any item in team reviewed tab, to see reviews.

== Future Improvements ==

== References ==
<references/>

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-12-03T03:48:09Z

Nramcha: /* Task-1 */

== Introduction ==

Expertiza<ref>https://expertiza.ncsu.edu/</ref> is an open-source web application to create re-usable learning objects through peer-reviews to facilitate incremental learning. Students can submit learning objects such as articles, wiki pages, repository links and with the help of peer reviews, improve them. The project has been developed using the Ruby on Rails<ref>https://en.wikipedia.org/wiki/Ruby_on_Rails</ref> framework and is supported by the [http://www.nsf.gov National Science Foundation].

== Project Description ==

=== Purpose and Scope ===

Expertiza assignments are based on a peer review system where the instructor creates rubrics for an assignment through questionnaires which students use to review other students' submissions. The author of the submission is given an opportunity to provide feedback about these reviews. Expertiza displays reviews (i) to the team who was reviewed, and (ii) to the reviewer. A student user can see all the reviews of his/her team’s project. The instructor can see all the reviews of everyone’s project. The instructor also has access to a Review report, which shows, for each reviewer, all the reviews that (s)he wrote. Both score report and review report use different code so UI is non-orthogonal, it would be great if we can follow same UI structure for both score and review report which also reduce the DRY problems. There is no functionality for user to search between reviews of particular project, such a functionality will help user to search through all reviews for specific problem they are trying to focus on.

=== Task Description ===

The project requires completion of the following tasks:
====Task-1====
* A single way of displaying reviews that would be visible to students (reviews that they did, and reviews that their team received), and instructors (reviews that each team received, sorted by team; and reviews that each student did, sorted by student)

For student view the UI is consistent in displaying reviews they have done and reviews they have received but for instructor's view the review report follows different UI and have different code. To make the UI consistent we have decided to choose the UI design of student view as the base and modify the UI design for review report in instructor's view. This will allow us to use the same code in both views, thereby following DRY principle.

Previous View:

[[File:review_report.png]]

Updated View:

[[File:review-report-changed.png]]

Implementation:

Review report view is rendered in app/views/popup/team_users_popup.html.haml. In this view, we populate table by iterating over each question under each round. While same approach was used previously but here we replace each row by a predefined format used for rendering question similar to student view.

<pre>
%table{:border => "1px solid #ccc"}
%tr
%th{:align => "left", :width => "50%"} Question
%th{:width => "5%"} Score
%th{:width => "45%"} Comments
- instance_variable_get('@scores_round_' + round.to_s).each do |s|
%tr
%td{:align => "left"}
= Question.find(s.question_id).txt
- if Question.find(s.question_id).is_a?(ScoredQuestion)
%td{:align => "center"}
= s.answer
\/#{instance_variable_get('@max_score_round_' + round.to_s)}
- else
%td{:align => "center"}
= s.answer
%td{:align => "left"}
= s.comments
%tr
%th Reviewer Score (Σ weighted score/Σ weighted available score)
%td{:align => "center"}
= instance_variable_get('@sum_round_' + round.to_s)
\/#{instance_variable_get('@total_possible_round_' + round.to_s)}
%td{:align => "left"}
\= #{instance_variable_get('@total_percentage_round_' + round.to_s)}
%table
</pre>

We replace the above code by code below, here in each row we invoke view_completed_question method defined in Criterion.rb for scored questions which insert the html code to render question,score,comments.

<pre>
%table{:border => "1px solid #ccc" ,:class => "table table-bordered"}
- counter = 0
- instance_variable_get('@scores_round_' + round.to_s).each do |s|
- counter += 1
- row_class = counter.even? ? "info" : "warning"
- question = Question.find(s.question_id)
%tr{:class => row_class}
%td
= question.becomes(Criterion).view_completed_question(counter,s,instance_variable_get('@max_score_round_' + round.to_s))
%tr
%td{:style => "font-weight:bold"}
= 'Reviewer Score (Σ weighted score/Σ weighted available score) = '+ instance_variable_get('@sum_round_' + round.to_s).to_s |
\/ #{instance_variable_get('@total_possible_round_' + round.to_s)} (#{instance_variable_get('@total_percentage_round_' + round.to_s)}%)
%table
</pre>

====Task-2====
* Add button/link to hide and expand all the reviews.

Below is the mock-up image of how functionality will look after implementations

[[File:show-hide.png]]

====Task-3====
* Create a tabbed view for each review view type : Heat map, Overall statistics, Individual reviews

This task will require the use of TabsOnRails to create the tabs needed. The review report will need to be modified to have the addition of the Statistics, Heatmap, and GridView tabs at the top of the page. It will default to the Statistics tab which should look something like:

[[File:Overview20.png]]

The heatmap tab should produce a view like:

[[File:heatmap.png]]

And the grid view tab should produce a view like:

[[File:gridview2.png]]

Note: for this view we can move the [Max points: 5] to the statistics page since this will be the same for every question. We can also add "view score", view question" and "view comments" in place of the show review link to see what we want to see per question. This will be modified in the response model.

To handle being able to switch between reviews you could add sub tabs underneath the main 3 tabs for each of the reviewers (The student would see a tab with the reviewers number while the instructor will see tabs with the reviewers name).

=====Task 3 Testing=====

To test this feature go to the view_my_scores page for the student where you should see the 3 tabs.
Make sure that each tab gives you a similar view as described above.

To test the tabs for each reviewer's review:
Make sure that you only see that reviewer's review when their tab is selected.
Make sure that when you select another reviewer's tab that the review you are seeing changes.
Make sure reviewers tabs only appears when the Individual reviewers tab is selected.
====Task-4====
* Make review feedback more readable by changing UI or background color.

This task is fairly easy we are supposed to make feedback response more readable or more focused for user to read. As instructor suggested this can be done by graying out the question or we can change the background of the response text.

====Task-5 (Optionally)====
* Add search box to search between reviews for particular string for a specific project(Student's view) or for specific user(Instructor's view).
This functionality will help user to readily access the required content within the reviews.<br />
Below is the mock-up image of how functionality will look after implementations

[[File:SearchFunctionality.png]]

==UI Testing==
* To Test UI for student View
** Log-in as Student.
** Go to Assignment
** Click Your scores
** Click show reviews

* To Test UI for instructor View
** Log-in as Instructor.
** Go to Manage Assignments
** Click on review report of a particular assignment
** Click on any item in team reviewed tab, to see reviews.

== Future Improvements ==

== References ==
<references/>

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-12-03T03:08:27Z

Nramcha: /* Task-1 */

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-12-03T03:06:48Z

Nramcha: /* Task-1 */

File:Review-report-changed.png

2016-12-03T03:05:44Z

Nramcha: uploaded a new version of "File:Review-report-changed.png"

File:Review report.png

2016-12-03T03:04:50Z

Nramcha: uploaded a new version of "File:Review report.png"

File:Review-report-changed.png

2016-12-03T02:55:41Z

Nramcha:

File:Review report.png

2016-12-03T02:51:38Z

Nramcha:

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-12-03T02:51:17Z

Nramcha: /* Task-1 */

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-12-03T02:48:59Z

Nramcha: /* Task-1 */

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-12-03T02:48:12Z

Nramcha: /* Task-1 */

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-12-03T02:39:15Z

Nramcha: /* Task-1 */

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-11-15T02:44:18Z

Nramcha: /* References */

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-11-15T02:43:50Z

Nramcha: /* UI Testing */

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-11-15T02:43:23Z

Nramcha: /* Task-1 */

File:Review-report.png

2016-11-10T03:14:08Z

Nramcha: uploaded a new version of "File:Review-report.png": review report small

Review report

File:Summary.png

2016-11-10T03:12:20Z

Nramcha: uploaded a new version of "File:Summary.png": Summary report small

Summary Report

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-11-10T02:23:12Z

Nramcha: /* Task-4 */

File:Review-report.png

2016-11-10T02:19:56Z

Nramcha: Review report

Review report

File:Summary.png

2016-11-10T02:19:29Z

Nramcha: Summary Report

Summary Report

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-11-10T02:19:13Z

Nramcha: /* Task-1 */

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-11-10T02:17:28Z

Nramcha: /* Task-1 */

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-11-10T02:06:56Z

Nramcha: /* Task-2 */

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-11-10T02:05:54Z

Nramcha: /* Task-1 */

File:Show-hide.png

2016-11-10T02:04:45Z

Nramcha: Mockup image for show/hide all functionality for reviews

Mockup image for show/hide all functionality for reviews

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-11-10T02:03:58Z

Nramcha: /* Task-1 */

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-11-10T01:49:08Z

Nramcha: /* Task Description */

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-11-10T01:47:21Z

Nramcha: /* Task-1 */

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-11-10T01:46:57Z

Nramcha: /* Task Description */

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-11-10T01:36:28Z

Nramcha: /* Task Description */

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-11-10T01:24:56Z

Nramcha:

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-11-10T00:17:47Z

Nramcha:

CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

2016-11-10T00:16:50Z

Nramcha: Created page with "== Introduction == Expertiza<ref>https://expertiza.ncsu.edu/</ref> is an open-source web application to create re-usable learning objects through peer-reviews to facilitate incr..."

CSC/ECE 517 Fall 2016

2016-11-10T00:00:54Z

Nramcha: /* Final Project Design Document */

[http://www.example.com link title]==Calibration Assignment Submissions==
*[[Calibration Assignment Submission (Firebrick JS)]]
*[[Calibration Assignment Submission (Active Job)]]
==Writing Assignments 2==
*[[CSC/ECE 517 Fall 2016/E1666. Test team functionality]]
*[[CSC/ECE 517 Fall 2016/E1643. Refactor Suggestion controller]]
*[[CSC/ECE 517 Fall 2016/E1631. Refactoring Bidding Interface]]
*[[CSC/ECE 517 Fall 2016/E1674.Refactor leaderboard.rb and write unit tests]]
*[[CSC/ECE 517 Fall 2016/E1671. Unit Tests for participants.rb Hierarchy]]
*[[CSC/ECE 517 Fall 2016/E1668.Test e-mailing functionality]]
*[[CSC/ECE 517 Fall 2016/E1658. Refractor lottery_controller.rb and write integration tests]]
*[[CSC/ECE 517 Fall 2016/E1660. Review requirements and thresholds]]
*[[CSC/ECE 517 Fall 2016/E1650. Sort instructor views alphabetically by default]]
*[[CSC/ECE 517 Fall 2016/E1644. Refactor and test Teams Controller]]
*[[CSC/ECE 517 Fall 2016/E1645. Refactoring Tree Display Controller]]
*[[CSC/ECE 517 Fall 2016/E1659. Refactor on_the_fly_calc.rb]]
*[[CSC/ECE 517 Fall 2016/E1657. Introduce a Student View for instructors]]
*[[CSC/ECE 517 Fall 2016/E1653. Fix and improve rubric criteria]]
*[[CSC/ECE 517 Fall 2016/E1642. Refactor review_response_map.rb]]
*[[CSC/ECE 517 Fall 2016/E1633. Refactor different question types from quiz feature]]
*[[CSC/ECE_517_Fall_2016/E1664:_Feature_Test_Assignment_Creation]]
*[[CSC/ECE 517 Fall 2016/E1666. Test team functionality]]
*[[CSC/ECE_517_Fall_2016/E1654. Improve_date-picker_and_deadlines]]
*[[CSC/ECE_517_Fall_2016/E1652 Fix teammate advertisements and requests to join a team ]]
*[[CSC/ECE_517_Fall_2016/E1662. UI issues/fixes]]
*[[CSC/ECE_517_Fall_2016/E1673. Refactor question_type.rb]]
*[[CSC/ECE_517_Fall_2016/E1675. Timestamp for student file & hyperlink submissions]]
*[[CSC/ECE_517_Fall_2016/E1640. Refactor response.rb and response_helper.rb]]
*[[CSC/ECE 517 Fall 2016/E1634. Refactor and write unit test of due_date.rb and deadline_helper.rb]]
*[[CSC/ECE_517_Fall_2016/M1654._Improve_network_security_features]]
*[[CSC/ECE_517_Fall_2016/E1670._Unit_tests_for_answers.rb]]
*[[CSC/ECE_517_Fall_2016/E1641. Refactor review_mapping_controller.rb]]
*[[CSC/ECE_517_Fall_2016/M1652_Implement_ImageMap_Support_Servo]]
*[[CSC/ECE_517_Fall_2016/E1648/Add_past_due_assignment]]
*[[CSC/ECE 517 Fall 2016/E1656. Improve imports]]
*[[CSC/ECE_517_Fall_2016/M1653_Implement_HTML_form_validation]]
==Final Project Design Document==
*[[CSC/ECE 517 Fall 2016 E1696 Improve Self-Review]]
*[[CSC/ECE 517 Fall 2016 E1676 Role-based reviewing]]
*[[CSC/ECE 517 Fall 2016/E1680. Improve survey functionality]]
*[[CSC/ECE 517 Fall 2016/E1693. Drag-and-drop interface for creating rubrics]]
*[[CSC/ECE 517 Fall 2016/E1701. Accelerate RSpec testing]]
*[[CSC/ECE 517 Fall 2016/E1705. Tracking the time students look at the others' submissions]]
*[[CSC/ECE 517 Fall 2016/E1688. Send feedback to support + tree display improvement]]
*[[CSC/ECE 517 Fall 2016 E1707: Top trading cycles to exclude previous teammates]]
*[[CSC/ECE 517 Fall 2016 E1678: Review configuration options]]
*[[CSC/ECE 517 Fall 2016 E1682: Improve score calculation]]
*[[CSC/ECE 517 Fall 2016 E1684: Feature Test for Assignment Submission]]
*[[CSC/ECE 517 Fall 2016 E1689: Anonymous Chat Between Author and Reviewer]]
*[[CSC/ECE 517 Fall 2016 E1703: Logging for Expertiza]]
*[[CSC/ECE 517 Fall 2016 E1708: Improvements to staggered-deadline assignments]]
*[[CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports]]