Expertiza_Wiki - User contributions [en]

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

2016-12-03T04:55:06Z

Arcox2:

== 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 (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/>

File:TabAlt.png

2016-12-03T04:47:11Z

Arcox2:

File:TabReviews.png

2016-12-03T04:46:50Z

Arcox2:

File:TabStats.png

2016-12-03T04:45:55Z

Arcox2:

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

2016-12-03T04:45:18Z

Arcox2:

== 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

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 Statistics, Heatmap, and GridView tabs at the top of the page. It will default to the Statistics tab which should look something like:

[[File:tabStats.png]]

And the grid view tab should produce a view like:

[[File:tabReviews.png]]

The heatmap 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 (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-03T04:20:35Z

Arcox2:

== 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.

====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:18:28Z

Arcox2:

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

2016-11-15T01:51:02Z

Arcox2:

File:Gridview2.png

2016-11-15T01:18:22Z

Arcox2: updated grid view

updated grid view

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

2016-11-15T01:17:09Z

Arcox2:

File:Gridview.png

2016-11-15T01:15:42Z

Arcox2: uploaded a new version of "File:Gridview.png"

File:Gridview.png

2016-11-15T01:13:58Z

Arcox2: uploaded a new version of "File:Gridview.png"

File:Gridview.png

2016-11-15T01:11:53Z

Arcox2: uploaded a new version of "File:Gridview.png"

File:Gridview.png

2016-11-10T03:12:34Z

Arcox2:

File:Heatmap.png

2016-11-10T03:12:15Z

Arcox2: uploaded a new version of "File:Heatmap.png"

File:Overview20.png

2016-11-10T03:11:34Z

Arcox2: uploaded a new version of "File:Overview20.png"

File:Heatmap.png

2016-11-10T03:07:20Z

Arcox2:

File:Overview20.png

2016-11-10T03:03:48Z

Arcox2:

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

2016-11-10T03:03:01Z

Arcox2:

CSC/ECE 517 Fall 2016/E1674.Refactor leaderboard.rb and write unit tests

2016-11-05T02:32:25Z

Arcox2:

This page give a description of the changes made for the leaderboard.rb of Expertiza based OSS project.

==Expertiza Background ==
Expertiza is a web application where students can submit and peer-review learning objects (articles, codes, websites, etc). Instructors add and edit assignments to Expertiza. Students can be assigned in teams based on their selection of the topics. The Expertiza project is supported by the National Science Foundation.

Currently in this web application the leaderboard page does not work. As the guide of the director, we need to do the refactor and test only in this project, and the next step is to make the page work.

== Problem Statement ==
The task of the project is to refactor leaderboard.rb and write unit tests for it. As the name of the methods are not in a standard style, we use snake_case for method names. There are also some useless assignments to several variables.

== Modified File ==
* Refactor the leaderboard.rb
* Create a RSpec file in /spec/models/ foler which contains unit test for leaderboard.rb

== Thoughts ==
What we need to do is to deal with problems listed by the code climate. And we also need to write a new test file to test the functionality of leaderboard.rb. However, the leaderboard itself has some problems and IDE will report some problems when we want to run it. So we need to know which method in this file is broken first and just test others instead.

== Tools==
As for this project, we use the code climate plugin to test if our code is good enough. This plugin will obviously help us with the refactor part because it can show which part of the original codes have some problems. We also search through the internet and get to know how to write the Rspec files. We also ended up using the 'rspec/collection_matchers' class of rspec which allows us to match the number of items in a collection for an object.

== Refactor ==
We will list each kind of problems we solved below.

=== Use snake_case for method names. ===
As we all know the snake_case means we need to name the methods and variables in which elements are separated with one underscore character and no spaces. Each element's initial letter is usually lowercased within the compound and the first letter is either upper or lower case.
For example, we changed this method.

def self.getIndependantAssignments(user_id)
assignmentIds = AssignmentParticipant.where(user_id: user_id).pluck(:parent_id)
end
Both variable names and method names are not in a good manner. We changed it to the version below.

def self.get_independant_assignments(user_id)
assignment_ids = AssignmentParticipant.where(user_id: user_id).pluck(:parent_id)
end

=== Useless assignment to variable.===
We deleted those variables since we only wanted what was being assigned to them.

Before:

noCourseAssignments = Assignment.where(id: assignmentIds, course_id: nil)

After:

Assignment.where(id: assignmentIds, course_id: nil)

=== Prefer `each` over `for`. ===
We know that 'each' function is more in ruby style for loops. So we would like to change all our 'for' to 'each'.
for scoreEntry in scores
...
end
We changed this loop to:
scores.each do |scoreEntry|
...
end

And the problem would be fixed.

=== Avoid more than 3 levels of block nesting.===
if qTypeHash.fetch(questionnaireType, {}).fetch(courseId, nil).nil?
if qTypeHash.fetch(questionnaireType, nil).nil?
...
end
...
end

This is the third and fourth level of the block nesting. We need to merge them together.

if q_type_hash.fetch(questionnaire_type, {}).fetch(course_id, nil).nil? && q_type_hash.fetch(questionnaire_type, nil).nil?
...
elseif q_type_hash.fetch(questionnaire_type, {}).fetch(course_id, nil).nil? && !q_type_hash.fetch(questionnaire_type, nil).nil?
...
end
Then the 4-levels loop has been changed to 3-levels one.

=== `end` at 148, 1 is not aligned with `def` at 129, 2.''' ===
A space is needed to be added in the line of 148.

== Rspec Test ==
The Leaderboard Class did not have any unit tests associated with it coming into this project so we have to create unit tests from scratch. Upon analysis of this class, we noticed that Leaderboard did not hold any variables and was only made up of static methods. So the first round of unit tests that were created made sure that each method could be called from the Leaderboard class with the correct number of arguments.

it "Leaderboard responds to get_assignment_mapping" do
expect(Leaderboard).to respond_to(:get_assignment_mapping).with(3).argument
end

Next we needed to go through the methods and create tests for them. But in order to do this we had to make objects that this class depended on since this class takes the values from other classes to output arrays and hashes. Factories were used to create these objects with a few variables being overridden

before(:each) do
@student1 = create(:student, name: "Student1", fullname: "Student1 Test", email: "student1@mail.com" )
@student2 = create(:student, name: "Student2", fullname: "Student2 Test", email: "student2@mail.com" )
@instructor = create(:instructor)
@course = create(:course)
@assignment = create(:assignment, name: "Assign1", course: nil)
@assignment2 = create(:assignment, name: "Assign2")
@participant = create(:participant, parent_id: @assignment.id, user_id: @student1.id)
@participant2 = create(:participant, parent_id: @assignment2.id, user_id: @student2.id)
@questionnaire=create(:questionnaire)
@assignment_questionnaire1 =create(:assignment_questionnaire, user_id: @student1.id, assignment: @assignment)
@assignment_questionnaire2 =create(:assignment_questionnaire, user_id: @student2.id, assignment: @assignment2)
@assignment_team = create(:assignment_team, name: "TestTeam", parent_id: @assignment2.id)
@team_user = create(:team_user, team_id: @assignment_team.id, user_id: @student2.id)
end

We tested the methods by seeing whether if we got the right amount of elements in our arrays/hashes like the following.

it "getAssignmentsInCourses should return an assignment" do
expect(Leaderboard.get_assignments_in_courses(1)).to have(1).items
end

We also tested whether the code could handle invalid arguments like such.

it "leaderboard_heading should return No Entry with invalid input" do
expect(Leaderboard.leaderboard_heading("Invalid")).to eq("No Entry")
end

We did face situations where methods were being called that were not defined anywhere so we had to use stubs to imitate their expected behavior.

it "leaderboard_heading should return name" do
allow(Leaderboard).to receive(:find_by_qtype).and_return(@questionnaire).with(@questionnaire.id)
expect(Leaderboard.leaderboard_heading(@questionnaire.id)).to eq("Test questionaire")
end

== Additional ==
To explain our work in a further step, we did a video on Youtube to show the broken leaderboard page, why we did work in this way and our work for the unit tests and the refactor part.

There are still some problems we need to figure out.
For the code revising part, there are some methods with this problem: Assignment Branch Condition size for get_participants_score is too high.

I think we cannot make too many functions in one method so that we need to make some of these be executed outside of this method.
Also, some of the code lines are too long so that it is not clear enough.

During the rspec testing we noticed that the methods get_participant_entries_in_assignment_list and find_by_qtype were being called but where not created in the program. To cover these tests we had to use stubs for these methods for the expected outputs.

There was also no declaration of ScoreCache anywhere in the program which caused other methods to fail. Trying to stub this was a problem since we were not sure of how it was laid out.

==References ==
1. https://en.wikipedia.org/wiki/Snake_case

CSC/ECE 517 Fall 2016/E1674.Refactor leaderboard.rb and write unit tests

2016-11-05T02:31:03Z

Arcox2:

This page give a description of the changes made for the leaderboard.rb of Expertiza based OSS project.

==Expertiza Background ==
Expertiza is a web application where students can submit and peer-review learning objects (articles, codes, websites, etc). Instructors add and edit assignments to Expertiza. Students can be assigned in teams based on their selection of the topics. The Expertiza project is supported by the National Science Foundation.

Currently in this web application the leaderboard page does not work. As the guide of the director, we need to do the refactor and test only in this project, and the next step is to make the page work.

== Problem Statement ==
The task of the project is to refactor leaderboard.rb and write unit tests for it. As the name of the methods are not in a standard style, we use snake_case for method names. There are also some useless assignments to several variables.

== Modified File ==
* Refactor the leaderboard.rb
* Create a RSpec file in /spec/models/ foler which contains unit test for leaderboard.rb

== Thoughts ==
What we need to do is to deal with problems listed by the code climate. And we also need to write a new test file to test the functionality of leaderboard.rb. However, the leaderboard itself has some problems and IDE will report some problems when we want to run it. So we need to know which method in this file is broken first and just test others instead.

== Tools==
As for this project, we use the code climate plugin to test if our code is good enough. This plugin will obviously help us with the refactor part because it can show which part of the original codes have some problems. We also search through the internet and get to know how to write the Rspec files. We also ended up using the 'rspec/collection_matchers' class of rspec which allows us to match the number of items in a collection for an object.

== Refactor ==
We will list each kind of problems we solved below.

=== Use snake_case for method names. ===
As we all know the snake_case means we need to name the methods and variables in which elements are separated with one underscore character and no spaces. Each element's initial letter is usually lowercased within the compound and the first letter is either upper or lower case.
For example, we changed this method.

def self.getIndependantAssignments(user_id)
assignmentIds = AssignmentParticipant.where(user_id: user_id).pluck(:parent_id)
end
Both variable names and method names are not in a good manner. We changed it to the version below.

def self.get_independant_assignments(user_id)
assignment_ids = AssignmentParticipant.where(user_id: user_id).pluck(:parent_id)
end

=== Useless assignment to variable.===
We deleted those variables since we only wanted what was being assigned to them.

Before:

noCourseAssignments = Assignment.where(id: assignmentIds, course_id: nil)

After:

Assignment.where(id: assignmentIds, course_id: nil)

=== Prefer `each` over `for`. ===
We know that 'each' function is more in ruby style for loops. So we would like to change all our 'for' to 'each'.
for scoreEntry in scores
...
end
We changed this loop to:
scores.each do |scoreEntry|
...
end

And the problem would be fixed.

=== Avoid more than 3 levels of block nesting.===
if qTypeHash.fetch(questionnaireType, {}).fetch(courseId, nil).nil?
if qTypeHash.fetch(questionnaireType, nil).nil?
...
end
...
end

This is the third and fourth level of the block nesting. We need to merge them together.

if q_type_hash.fetch(questionnaire_type, {}).fetch(course_id, nil).nil? && q_type_hash.fetch(questionnaire_type, nil).nil?
...
elseif q_type_hash.fetch(questionnaire_type, {}).fetch(course_id, nil).nil? && !q_type_hash.fetch(questionnaire_type, nil).nil?
...
end
Then the 4-levels loop has been changed to 3-levels one.

=== `end` at 148, 1 is not aligned with `def` at 129, 2.''' ===
A space is needed to be added in the line of 148.

== Rspec Test ==
The Leaderboard Class did not have any unit tests associated with it coming into this project so we have to create unit tests from scratch. Upon analysis of this class, we noticed that Leaderboard did not hold any variables and was only made up of static methods. So the first round of unit tests that were created made sure that each method could be called from the Leaderboard class with the correct number of arguments.

it "Leaderboard responds to get_assignment_mapping" do
expect(Leaderboard).to respond_to(:get_assignment_mapping).with(3).argument
end

Next we needed to go through the methods and create tests for them. But in order to do this we had to make objects that this class depended on since this class takes the values from other classes to output arrays and hashes. Factories were used to create these objects with a few variables being overridden

before(:each) do
@student1 = create(:student, name: "Student1", fullname: "Student1 Test", email: "student1@mail.com" )
@student2 = create(:student, name: "Student2", fullname: "Student2 Test", email: "student2@mail.com" )
@instructor = create(:instructor)
@course = create(:course)
@assignment = create(:assignment, name: "Assign1", course: nil)
@assignment2 = create(:assignment, name: "Assign2")
@participant = create(:participant, parent_id: @assignment.id, user_id: @student1.id)
@participant2 = create(:participant, parent_id: @assignment2.id, user_id: @student2.id)
@questionnaire=create(:questionnaire)
@assignment_questionnaire1 =create(:assignment_questionnaire, user_id: @student1.id, assignment: @assignment)
@assignment_questionnaire2 =create(:assignment_questionnaire, user_id: @student2.id, assignment: @assignment2)
@assignment_team = create(:assignment_team, name: "TestTeam", parent_id: @assignment2.id)
@team_user = create(:team_user, team_id: @assignment_team.id, user_id: @student2.id)
end

We tested the methods by seeing whether if we got the right amount of elements in our arrays/hashes like the following.

it "getAssignmentsInCourses should return an assignment" do
expect(Leaderboard.get_assignments_in_courses(1)).to have(1).items
end

We also tested whether the code could handle invalid arguments like such.

it "leaderboard_heading should return No Entry with invalid input" do
expect(Leaderboard.leaderboard_heading("Invalid")).to eq("No Entry")
end

We did face situations where methods were being called that were not defined anywhere so we had to use stubs to imitate their expected behavior.

it "leaderboard_heading should return name" do
allow(Leaderboard).to receive(:find_by_qtype).and_return(@questionnaire).with(@questionnaire.id)
expect(Leaderboard.leaderboard_heading(@questionnaire.id)).to eq("Test questionaire")
end

== Additional ==
To explain our work in a further step, we did a video on Youtube to show the broken leaderboard page, why we did work in this way and our work for the unit tests and the refactor part.

There are still some problems we need to figure out.
For the code revising part, there are some methods with this problem: Assignment Branch Condition size for get_participants_score is too high.

I think we cannot make too many functions in one method so that we need to make some of these be executed outside of this method.
Also, some of the code lines are too long so that it is not clear enough.

During the rspec testing we noticed that the methods get_participant_entries_in_assignment_list and find_by_qtype were being called but where not created in the program. To cover these tests we had to use stubs for these methods for the expected outputs.

There was also no declaration of ScoreCache anywhere in the program which caused other methods to fail.

==References ==
1. https://en.wikipedia.org/wiki/Snake_case

CSC/ECE 517 Fall 2016/E1674.Refactor leaderboard.rb and write unit tests

2016-10-29T01:54:00Z

Arcox2:

This page give a description of the changes made for the leaderboard.rb of Expertiza based OSS project.

==Expertiza Background ==
Expertiza is a web application where students can submit and peer-review learning objects (articles, codes, websites, etc). Instructors add and edit assignments to Expertiza. And students can be assigned in teams based on their selection of the topics. The Expertiza project is supported by the National Science Foundation.

Currently in this web application the leaderboard page does not work.

== Problem Statement ==
The task of the project is to refactor leaderboard.rb and write unit tests for it. As the name of the methods are not in a standard style, we use snake_case for method names. There are also some useless assignments to several variables. The rate of leaderboard.rb is D, which is needed to be improved.

== Modified File ==
* Refactor the leaderboard.rb
* Create a RSpec file in /spec/models/ foler which contains unit test for leaderboard.rb

== Thoughts ==
What we need to do is to deal with problems listed by the code climate. And we also need to write a new test file to test the functionality of leaderboard.rb. However, the leaderboard itself has some problems and IDE will report some problems when we want to run it. So we need to know which method in this file is broken first and just test others instead.

== Tools==
As for this project, we use the code climate plugin to test if our code is good enough. This plugin will obviously help us with the refactor part because it can show which part of the original codes have some problems. We also search through the internet and get to know how to write the Rspec files. We also ended up using the 'rspec/collection_matchers' class of rspec which allows us to match the number of items in a collection for an object.

== Refactor ==
We will list each kind of problems we solved below.

=== Use snake_case for method names. ===
As we all know the snake_case means we need to name the methods and variables in this way.
For example, we changed this method.

def self.getIndependantAssignments(user_id)
assignmentIds = AssignmentParticipant.where(user_id: user_id).pluck(:parent_id)
end
Both variable names and method names are not in a good manner. We changed it to the version below.

def self.get_independant_assignments(user_id)
assignment_ids = AssignmentParticipant.where(user_id: user_id).pluck(:parent_id)
end

=== Useless assignment to variable.===
We just commented these useless variables.

=== Prefer `each` over `for`. ===
We know that 'each' function is more in ruby style for loops. So we would like to change all our 'for' to 'each'.
for scoreEntry in scores
...
end
We changed this loop to:
scores.each do |scoreEntry|
...
end

And the problem would be fixed.

=== Avoid more than 3 levels of block nesting.===
if qTypeHash.fetch(questionnaireType, {}).fetch(courseId, nil).nil?
if qTypeHash.fetch(questionnaireType, nil).nil?
...
end
...
end

This is the third and fourth level of the block nesting. We need to merge them together.

if q_type_hash.fetch(questionnaire_type, {}).fetch(course_id, nil).nil? && q_type_hash.fetch(questionnaire_type, nil).nil?
...
elseif q_type_hash.fetch(questionnaire_type, {}).fetch(course_id, nil).nil? && !q_type_hash.fetch(questionnaire_type, nil).nil?
...
end
Then the 4-levels loop has been changed to 3-levels one.

=== `end` at 148, 1 is not aligned with `def` at 129, 2.''' ===
We just need to add a space in 148 line.

== Rspec Test ==
The Leaderboard Class did not have any unit tests associated with it coming into this project so we have to create unit tests from scratch. Upon analysis of this class, we noticed that Leaderboard did not hold any variables and was only made up of static methods. So the first round of unit tests that were created made sure that each method could be called from the Leaderboard class with the correct number of arguments.

it "Leaderboard responds to get_assignment_mapping" do
expect(Leaderboard).to respond_to(:get_assignment_mapping).with(3).argument
end

Next we needed to go through the methods and create tests for them. But in order to do this we had to make objects that this class depended on since this class takes the values from other classes to output arrays and hashes. Factories were used to create these objects with a few variables being overridden

before(:each) do
@student1 = create(:student, name: "Student1", fullname: "Student1 Test", email: "student1@mail.com" )
@student2 = create(:student, name: "Student2", fullname: "Student2 Test", email: "student2@mail.com" )
@instructor = create(:instructor)
@course = create(:course)
@assignment = create(:assignment, name: "Assign1", course: nil)
@assignment2 = create(:assignment, name: "Assign2")
@participant = create(:participant, parent_id: @assignment.id, user_id: @student1.id)
@participant2 = create(:participant, parent_id: @assignment2.id, user_id: @student2.id)
@questionnaire=create(:questionnaire)
@assignment_questionnaire1 =create(:assignment_questionnaire, user_id: @student1.id, assignment: @assignment)
@assignment_questionnaire2 =create(:assignment_questionnaire, user_id: @student2.id, assignment: @assignment2)
@assignment_team = create(:assignment_team, name: "TestTeam", parent_id: @assignment2.id)
@team_user = create(:team_user, team_id: @assignment_team.id, user_id: @student2.id)
end

We tested the methods by seeing whether if we got the right amount of elements in our arrays/hashes like the following.

it "getAssignmentsInCourses should return an assignment" do
expect(Leaderboard.get_assignments_in_courses(1)).to have(1).items
end

We also tested whether the code could handle invalid arguments like such.

it "leaderboard_heading should return No Entry with invalid input" do
expect(Leaderboard.leaderboard_heading("Invalid")).to eq("No Entry")
end

== Additional ==
There are still some problems we need to figure out.
For the code revising part, there are some methods with this problem: Assignment Branch Condition size for get_participants_score is too high.

I think we cannot make too many functions in one method so that we need to make some of these be executed outside of this method.
Also, some of the code lines are too long so that it is not clear enough.

During the rspec testing we noticed that the methods get_participant_entries_in_assignment_list and find_by_qtype were being called but where not created in the program.

There was also no declaration of ScoreCache anywhere in the program which caused other methods to fail.

CSC/ECE 517 Fall 2016/E1674.Refactor leaderboard.rb and write unit tests

2016-10-28T22:06:02Z

Arcox2:

This page give a description of the changes made for the leaderboard.rb of Expertiza based OSS project.

==Expertiza Background ==
Expertiza is a web application where students can submit and peer-review learning objects (articles, codes, websites, etc). Instructors add and edit assignments to Expertiza. And students can be assigned in teams based on their selection of the topics. The Expertiza project is supported by the National Science Foundation.

== Problem Statement ==
The task of the project is to refactor leaderboard.rb and write unit tests for it. As the name of the methods are not in a standard style, we use snake_case for method names. There are also some useless assignments to several variables. The rate of leaderboard.rb is D, which is needed to be improved.

== Modified File ==
* Refactor the leaderboard.rb
* Create a RSpec file in /spec/models/ foler which contains unit test for leaderboard.rb

== Thoughts ==
What we need to do is to deal with problems listed by the code climate. And we also need to write a new test file to test the functionality of leaderboard.rb. However, the leaderboard itself has some problems and IDE will report some problems when we want to run it. So we need to know which method in this file is broken first and just test others instead.

== Tools==
As for this project, we use the code climate plugin to test if our code is good enough. This plugin will obviously help us with the refactor part because it can show which part of the original codes have some problems. We also search through the internet and get to know how to write the Rspec files.

== Refactor ==
We will list each kind of problems we solved below.

=== Use snake_case for method names. ===
As we all know the snake_case means we need to name the methods and variables in this way.
For example, we changed this method.

def self.getIndependantAssignments(user_id)
assignmentIds = AssignmentParticipant.where(user_id: user_id).pluck(:parent_id)
end
Both variable names and method names are not in a good manner. We changed it to the version below.

def self.get_independant_assignments(user_id)
assignment_ids = AssignmentParticipant.where(user_id: user_id).pluck(:parent_id)
end

=== Useless assignment to variable.===
We just commented these useless variables.

=== Prefer `each` over `for`. ===
We know that 'each' function is more in ruby style for loops. So we would like to change all our 'for' to 'each'.
for scoreEntry in scores
...
end
We changed this loop to:
scores.each do |scoreEntry|
...
end

And the problem would be fixed.

=== Avoid more than 3 levels of block nesting.===
if qTypeHash.fetch(questionnaireType, {}).fetch(courseId, nil).nil?
if qTypeHash.fetch(questionnaireType, nil).nil?
...
end
...
end

This is the third and fourth level of the block nesting. We need to merge them together.

if q_type_hash.fetch(questionnaire_type, {}).fetch(course_id, nil).nil? && q_type_hash.fetch(questionnaire_type, nil).nil?
...
elseif q_type_hash.fetch(questionnaire_type, {}).fetch(course_id, nil).nil? && !q_type_hash.fetch(questionnaire_type, nil).nil?
...
end
Then the 4-levels loop has been changed to 3-levels one.

=== `end` at 148, 1 is not aligned with `def` at 129, 2.''' ===
We just need to add a space in 148 line.

== Rspec Test ==
The Leaderboard Class did not have any unit tests associated with it coming into this project so we have to create unit tests from scratch. Upon analysis of this class, we noticed that Leaderboard did not hold any variables and was only made up of static methods. So the first round of unit tests that were created made sure that each method could be called from the Leaderboard class with the correct number of arguments.

it "Leaderboard responds to get_assignment_mapping" do
expect(Leaderboard).to respond_to(:get_assignment_mapping).with(3).argument
end

Next we needed to go through the methods and create tests for them. But in order to do this we had to make objects that this class depended on since this class takes the values from other classes to output arrays and hashes. Factories were used to create these objects with a few variables being overridden

before(:each) do
@student1 = create(:student, name: "Student1", fullname: "Student1 Test", email: "student1@mail.com" )
@student2 = create(:student, name: "Student2", fullname: "Student2 Test", email: "student2@mail.com" )
@instructor = create(:instructor)
@course = create(:course)
@assignment = create(:assignment, name: "Assign1", course: nil)
@assignment2 = create(:assignment, name: "Assign2")
@participant = create(:participant, parent_id: @assignment.id, user_id: @student1.id)
@participant2 = create(:participant, parent_id: @assignment2.id, user_id: @student2.id)
@questionnaire=create(:questionnaire)
@assignment_questionnaire1 =create(:assignment_questionnaire, user_id: @student1.id, assignment: @assignment)
@assignment_questionnaire2 =create(:assignment_questionnaire, user_id: @student2.id, assignment: @assignment2)
@assignment_team = create(:assignment_team, name: "TestTeam", parent_id: @assignment2.id)
@team_user = create(:team_user, team_id: @assignment_team.id, user_id: @student2.id)
end

We tested the methods by seeing whether if we got the right amount of elements in our arrays/hashes like the following.

it "getAssignmentsInCourses should return an assignment" do
expect(Leaderboard.get_assignments_in_courses(1)).to have(1).items
end

We also tested whether the code could handle invalid arguments like such.

it "leaderboard_heading should return No Entry with invalid input" do
expect(Leaderboard.leaderboard_heading("Invalid")).to eq("No Entry")
end

== Additional ==
There are still some problems we need to figure out.
For the code revising part, there are some methods with this problem: Assignment Branch Condition size for get_participants_score is too high.

I think we cannot make too many functions in one method so that we need to make some of these be executed outside of this method.
Also, some of the code lines are too long so that it is not clear enough.

During the rspec testing we noticed that the methods get_participant_entries_in_assignment_list and find_by_qtype were being called but where not created in the program.

There was also no declaration of ScoreCache anywhere in the program which caused other methods to fail.