Expertiza_Wiki - User contributions [en]

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

2016-12-06T05:50:37Z

Kpokhar: /* Task-4(Buttons to toggle questions/score/answers) */

== 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 (Button to show/hide all the reviews)====
* Add button/link to hide and expand all the reviews for a Round.

In student view,for a particular assignment, the UI has <code>show review</code> button for each review in a round. Adding a single button will help student view all the review of a round with single click.

Previous View:

[[File:P11.jpg]]

<br>Updated View:

[[File:Update2.png]]

<br>Implementation:
<br>
<p>Review view is rendered in app/views/grades/_reviews.html.erb. In this view, we added <code>show all reviews</code> and <code>hide all reviews</code> buttons which when clicked call <code>toggleAllElement</code> function and displays all the reviews of a round.</p>
<pre>

<a href="#" name=<%="roundshow_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','show');return false;">show all reviews</a>
<a href="#" name=<%="roundhide_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','hide');return false;">hide all reviews</a>

</pre>
<p> We added <code>toggleAllElemnet</code> function in app/assets/javascripts/tableactions.js which toggles all the review of a round using existing <code>toggleElement</code> function.</p>
<pre>
function toggleAllElement(elementIdList, mode=''){
console.log(elementIdList)
var res = elementIdList.split(",");
var childText = 'review';

for (var y = 0; y < res.length - 1; y++) {
toggleElement(res[y], childText, mode);
}
}
</pre>

====Task-3(Create a tabbed view for stats, reviews and heatmap)====
* 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(Buttons to toggle questions/score/answers)====
* Make review feedback more readable by changing UI or background color.
* Option to toggle review question or score or answers.

This task is to make feedback response more readable or more focused for user to read. Instructor suggested this can be done by graying out the question or we can change the background of the response text. The existing review also has this behavior. We added toggle button to show/hide questions/score/answers for a review based on instructor suggestion.

Previous View:<br>
[[File: Taskk44.jpg]]

<br>Update View:<br>
[[File: Updated4.png]]

<br>Implementation:
<p> The implementation of this functionality is similar to Task 2. A review is rendered in app/models/response.rb. We added <code>toggle questions,</code>
<code>toggle score and</code> <code>toggle answers</code> button in a review view, which when clicked calls <code>toggleAllElement</code> function in app/assets/javascripts/tableactions.js that toggles respective view.
</p>
<pre>
code+='<br><a href="#" name= "question_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_ques + "','review'" + ');return false;">toggle questions</a>'
code+='   <a href="#" name= "score_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_score + "','review'" + ');return false;">toggle scores</a>'
code+='   <a href="#" name= "answer_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_answer + "','review'" + ');return false;">toggle answers</a>'
</pre>

====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 if Task 2 is complete)====
* 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-06T05:49:22Z

Kpokhar: /* Task-4(Buttons to toggle questions/score/answers) */

== 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 (Button to show/hide all the reviews)====
* Add button/link to hide and expand all the reviews for a Round.

In student view,for a particular assignment, the UI has <code>show review</code> button for each review in a round. Adding a single button will help student view all the review of a round with single click.

Previous View:

[[File:P11.jpg]]

<br>Updated View:

[[File:Update2.png]]

<br>Implementation:
<br>
<p>Review view is rendered in app/views/grades/_reviews.html.erb. In this view, we added <code>show all reviews</code> and <code>hide all reviews</code> buttons which when clicked call <code>toggleAllElement</code> function and displays all the reviews of a round.</p>
<pre>

<a href="#" name=<%="roundshow_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','show');return false;">show all reviews</a>
<a href="#" name=<%="roundhide_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','hide');return false;">hide all reviews</a>

</pre>
<p> We added <code>toggleAllElemnet</code> function in app/assets/javascripts/tableactions.js which toggles all the review of a round using existing <code>toggleElement</code> function.</p>
<pre>
function toggleAllElement(elementIdList, mode=''){
console.log(elementIdList)
var res = elementIdList.split(",");
var childText = 'review';

for (var y = 0; y < res.length - 1; y++) {
toggleElement(res[y], childText, mode);
}
}
</pre>

====Task-3(Create a tabbed view for stats, reviews and heatmap)====
* 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(Buttons to toggle questions/score/answers)====
* Make review feedback more readable by changing UI or background color.
* Option to toggle review question or score or answers.

This task is to make feedback response more readable or more focused for user to read. Instructor suggested this can be done by graying out the question or we can change the background of the response text. The existing review also has this behavior. We added toggle button to show/hide questions/score/answers for a review based on instructor suggestion.

Previous View:
[[File: Taskk44.jpg]]

<br>Update View:
[[File: Updated4.png]]

<br>Implementation:
<p> The implementation of this functionality is similar to Task 2. A review is rendered in app/models/response.rb. We added <code>toggle questions,</code>
<code>toggle score and</code> <code>toggle answers</code> button in a review view, which when clicked calls <code>toggleAllElement</code> function in app/assets/javascripts/tableactions.js that toggles respective view.
</p>
<pre>
code+='<br><a href="#" name= "question_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_ques + "','review'" + ');return false;">toggle questions</a>'
code+='   <a href="#" name= "score_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_score + "','review'" + ');return false;">toggle scores</a>'
code+='   <a href="#" name= "answer_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_answer + "','review'" + ');return false;">toggle answers</a>'
</pre>

====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 if Task 2 is complete)====
* 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:Taskk44.jpg

2016-12-06T05:48:58Z

Kpokhar:

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

2016-12-06T05:47:28Z

Kpokhar: /* Task-2 (Button to show/hide all the reviews) */

== 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 (Button to show/hide all the reviews)====
* Add button/link to hide and expand all the reviews for a Round.

In student view,for a particular assignment, the UI has <code>show review</code> button for each review in a round. Adding a single button will help student view all the review of a round with single click.

Previous View:

[[File:P11.jpg]]

<br>Updated View:

[[File:Update2.png]]

<br>Implementation:
<br>
<p>Review view is rendered in app/views/grades/_reviews.html.erb. In this view, we added <code>show all reviews</code> and <code>hide all reviews</code> buttons which when clicked call <code>toggleAllElement</code> function and displays all the reviews of a round.</p>
<pre>

<a href="#" name=<%="roundshow_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','show');return false;">show all reviews</a>
<a href="#" name=<%="roundhide_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','hide');return false;">hide all reviews</a>

</pre>
<p> We added <code>toggleAllElemnet</code> function in app/assets/javascripts/tableactions.js which toggles all the review of a round using existing <code>toggleElement</code> function.</p>
<pre>
function toggleAllElement(elementIdList, mode=''){
console.log(elementIdList)
var res = elementIdList.split(",");
var childText = 'review';

for (var y = 0; y < res.length - 1; y++) {
toggleElement(res[y], childText, mode);
}
}
</pre>

====Task-3(Create a tabbed view for stats, reviews and heatmap)====
* 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(Buttons to toggle questions/score/answers)====
* Make review feedback more readable by changing UI or background color.
* Option to toggle review question or score or answers.

This task is to make feedback response more readable or more focused for user to read. Instructor suggested this can be done by graying out the question or we can change the background of the response text. The existing review also has this behavior. We added toggle button to show/hide questions/score/answers for a review based on instructor suggestion.

Previous View:
[[File: Tskk4.jpg]]

<br>Update View:
[[File: Updated4.png]]

<br>Implementation:
<p> The implementation of this functionality is similar to Task 2. A review is rendered in app/models/response.rb. We added <code>toggle questions,</code>
<code>toggle score and</code> <code>toggle answers</code> button in a review view, which when clicked calls <code>toggleAllElement</code> function in app/assets/javascripts/tableactions.js that toggles respective view.
</p>
<pre>
code+='<br><a href="#" name= "question_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_ques + "','review'" + ');return false;">toggle questions</a>'
code+='   <a href="#" name= "score_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_score + "','review'" + ');return false;">toggle scores</a>'
code+='   <a href="#" name= "answer_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_answer + "','review'" + ');return false;">toggle answers</a>'
</pre>

====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 if Task 2 is complete)====
* 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:Update2.png

2016-12-06T05:46:54Z

Kpokhar:

File:P11.jpg

2016-12-06T05:44:58Z

Kpokhar:

File:Updated2.png

2016-12-06T05:43:02Z

Kpokhar:

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

2016-12-06T05:42:14Z

Kpokhar: /* Task-4(Buttons to toggle questions/score/answers) */

== 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 (Button to show/hide all the reviews)====
* Add button/link to hide and expand all the reviews for a Round.

In student view,for a particular assignment, the UI has <code>show review</code> button for each review in a round. Adding a single button will help student view all the review of a round with single click.

Previous View:

[[File:P1.jpg]]

<br>Updated View:

[[File:P1.jpg]]

<br>Implementation:
<br>
<p>Review view is rendered in app/views/grades/_reviews.html.erb. In this view, we added <code>show all reviews</code> and <code>hide all reviews</code> buttons which when clicked call <code>toggleAllElement</code> function and displays all the reviews of a round.</p>
<pre>

<a href="#" name=<%="roundshow_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','show');return false;">show all reviews</a>
<a href="#" name=<%="roundhide_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','hide');return false;">hide all reviews</a>

</pre>
<p> We added <code>toggleAllElemnet</code> function in app/assets/javascripts/tableactions.js which toggles all the review of a round using existing <code>toggleElement</code> function.</p>
<pre>
function toggleAllElement(elementIdList, mode=''){
console.log(elementIdList)
var res = elementIdList.split(",");
var childText = 'review';

for (var y = 0; y < res.length - 1; y++) {
toggleElement(res[y], childText, mode);
}
}
</pre>

====Task-3(Create a tabbed view for stats, reviews and heatmap)====
* 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(Buttons to toggle questions/score/answers)====
* Make review feedback more readable by changing UI or background color.
* Option to toggle review question or score or answers.

This task is to make feedback response more readable or more focused for user to read. Instructor suggested this can be done by graying out the question or we can change the background of the response text. The existing review also has this behavior. We added toggle button to show/hide questions/score/answers for a review based on instructor suggestion.

Previous View:
[[File: Tskk4.jpg]]

<br>Update View:
[[File: Updated4.png]]

<br>Implementation:
<p> The implementation of this functionality is similar to Task 2. A review is rendered in app/models/response.rb. We added <code>toggle questions,</code>
<code>toggle score and</code> <code>toggle answers</code> button in a review view, which when clicked calls <code>toggleAllElement</code> function in app/assets/javascripts/tableactions.js that toggles respective view.
</p>
<pre>
code+='<br><a href="#" name= "question_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_ques + "','review'" + ');return false;">toggle questions</a>'
code+='   <a href="#" name= "score_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_score + "','review'" + ');return false;">toggle scores</a>'
code+='   <a href="#" name= "answer_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_answer + "','review'" + ');return false;">toggle answers</a>'
</pre>

====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 if Task 2 is complete)====
* 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:Updated4.png

2016-12-06T05:41:48Z

Kpokhar:

File:Update4.png

2016-12-06T05:39:21Z

Kpokhar:

File:Tskk4.jpg

2016-12-06T05:38:20Z

Kpokhar:

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

2016-12-06T03:56:43Z

Kpokhar: /* Task-6 (Optional) */

== 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 (Button to show/hide all the reviews)====
* Add button/link to hide and expand all the reviews for a Round.

In student view,for a particular assignment, the UI has <code>show review</code> button for each review in a round. Adding a single button will help student view all the review of a round with single click.

Previous View:

[[File:P1.jpg]]

<br>Updated View:

[[File:P1.jpg]]

<br>Implementation:
<br>
<p>Review view is rendered in app/views/grades/_reviews.html.erb. In this view, we added <code>show all reviews</code> and <code>hide all reviews</code> buttons which when clicked call <code>toggleAllElement</code> function and displays all the reviews of a round.</p>
<pre>

<a href="#" name=<%="roundshow_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','show');return false;">show all reviews</a>
<a href="#" name=<%="roundhide_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','hide');return false;">hide all reviews</a>

</pre>
<p> We added <code>toggleAllElemnet</code> function in app/assets/javascripts/tableactions.js which toggles all the review of a round using existing <code>toggleElement</code> function.</p>
<pre>
function toggleAllElement(elementIdList, mode=''){
console.log(elementIdList)
var res = elementIdList.split(",");
var childText = 'review';

for (var y = 0; y < res.length - 1; y++) {
toggleElement(res[y], childText, mode);
}
}
</pre>

====Task-3(Create a tabbed view for stats, reviews and heatmap)====
* 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(Buttons to toggle questions/score/answers)====
* Make review feedback more readable by changing UI or background color.
* Option to toggle review question or score or answers.

This task is to make feedback response more readable or more focused for user to read. Instructor suggested this can be done by graying out the question or we can change the background of the response text. The existing review also has this behavior. We added toggle button to show/hide questions/score/answers for a review based on instructor suggestion.

Previous View:
[[File: Taskk4.jpg]]

<br>Update View:
[[File: Taskk4.jpg]]

<br>Implementation:
<p> The implementation of this functionality is similar to Task 2. A review is rendered in app/models/response.rb. We added <code>toggle questions,</code>
<code>toggle score and</code> <code>toggle answers</code> button in a review view, which when clicked calls <code>toggleAllElement</code> function in app/assets/javascripts/tableactions.js that toggles respective view.
</p>
<pre>
code+='<br><a href="#" name= "question_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_ques + "','review'" + ');return false;">toggle questions</a>'
code+='   <a href="#" name= "score_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_score + "','review'" + ');return false;">toggle scores</a>'
code+='   <a href="#" name= "answer_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_answer + "','review'" + ');return false;">toggle answers</a>'
</pre>

====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 if Task 2 is complete)====
* 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-06T03:55:37Z

Kpokhar: /* Task-3 */

== 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 (Button to show/hide all the reviews)====
* Add button/link to hide and expand all the reviews for a Round.

In student view,for a particular assignment, the UI has <code>show review</code> button for each review in a round. Adding a single button will help student view all the review of a round with single click.

Previous View:

[[File:P1.jpg]]

<br>Updated View:

[[File:P1.jpg]]

<br>Implementation:
<br>
<p>Review view is rendered in app/views/grades/_reviews.html.erb. In this view, we added <code>show all reviews</code> and <code>hide all reviews</code> buttons which when clicked call <code>toggleAllElement</code> function and displays all the reviews of a round.</p>
<pre>

<a href="#" name=<%="roundshow_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','show');return false;">show all reviews</a>
<a href="#" name=<%="roundhide_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','hide');return false;">hide all reviews</a>

</pre>
<p> We added <code>toggleAllElemnet</code> function in app/assets/javascripts/tableactions.js which toggles all the review of a round using existing <code>toggleElement</code> function.</p>
<pre>
function toggleAllElement(elementIdList, mode=''){
console.log(elementIdList)
var res = elementIdList.split(",");
var childText = 'review';

for (var y = 0; y < res.length - 1; y++) {
toggleElement(res[y], childText, mode);
}
}
</pre>

====Task-3(Create a tabbed view for stats, reviews and heatmap)====
* 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(Buttons to toggle questions/score/answers)====
* Make review feedback more readable by changing UI or background color.
* Option to toggle review question or score or answers.

This task is to make feedback response more readable or more focused for user to read. Instructor suggested this can be done by graying out the question or we can change the background of the response text. The existing review also has this behavior. We added toggle button to show/hide questions/score/answers for a review based on instructor suggestion.

Previous View:
[[File: Taskk4.jpg]]

<br>Update View:
[[File: Taskk4.jpg]]

<br>Implementation:
<p> The implementation of this functionality is similar to Task 2. A review is rendered in app/models/response.rb. We added <code>toggle questions,</code>
<code>toggle score and</code> <code>toggle answers</code> button in a review view, which when clicked calls <code>toggleAllElement</code> function in app/assets/javascripts/tableactions.js that toggles respective view.
</p>
<pre>
code+='<br><a href="#" name= "question_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_ques + "','review'" + ');return false;">toggle questions</a>'
code+='   <a href="#" name= "score_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_score + "','review'" + ');return false;">toggle scores</a>'
code+='   <a href="#" name= "answer_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_answer + "','review'" + ');return false;">toggle answers</a>'
</pre>

====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-06T03:26:37Z

Kpokhar: /* Task-4(Buttons to toggle questions/score/answers) */

== 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 (Button to show/hide all the reviews)====
* Add button/link to hide and expand all the reviews for a Round.

In student view,for a particular assignment, the UI has <code>show review</code> button for each review in a round. Adding a single button will help student view all the review of a round with single click.

Previous View:

[[File:P1.jpg]]

<br>Updated View:

[[File:P1.jpg]]

<br>Implementation:
<br>
<p>Review view is rendered in app/views/grades/_reviews.html.erb. In this view, we added <code>show all reviews</code> and <code>hide all reviews</code> buttons which when clicked call <code>toggleAllElement</code> function and displays all the reviews of a round.</p>
<pre>

<a href="#" name=<%="roundshow_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','show');return false;">show all reviews</a>
<a href="#" name=<%="roundhide_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','hide');return false;">hide all reviews</a>

</pre>
<p> We added <code>toggleAllElemnet</code> function in app/assets/javascripts/tableactions.js which toggles all the review of a round using existing <code>toggleElement</code> function.</p>
<pre>
function toggleAllElement(elementIdList, mode=''){
console.log(elementIdList)
var res = elementIdList.split(",");
var childText = 'review';

for (var y = 0; y < res.length - 1; y++) {
toggleElement(res[y], childText, mode);
}
}
</pre>

====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(Buttons to toggle questions/score/answers)====
* Make review feedback more readable by changing UI or background color.
* Option to toggle review question or score or answers.

This task is to make feedback response more readable or more focused for user to read. Instructor suggested this can be done by graying out the question or we can change the background of the response text. The existing review also has this behavior. We added toggle button to show/hide questions/score/answers for a review based on instructor suggestion.

Previous View:
[[File: Taskk4.jpg]]

<br>Update View:
[[File: Taskk4.jpg]]

<br>Implementation:
<p> The implementation of this functionality is similar to Task 2. A review is rendered in app/models/response.rb. We added <code>toggle questions,</code>
<code>toggle score and</code> <code>toggle answers</code> button in a review view, which when clicked calls <code>toggleAllElement</code> function in app/assets/javascripts/tableactions.js that toggles respective view.
</p>
<pre>
code+='<br><a href="#" name= "question_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_ques + "','review'" + ');return false;">toggle questions</a>'
code+='   <a href="#" name= "score_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_score + "','review'" + ');return false;">toggle scores</a>'
code+='   <a href="#" name= "answer_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_answer + "','review'" + ');return false;">toggle answers</a>'
</pre>

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

File:Taskk4.jpg

2016-12-06T03:26:13Z

Kpokhar:

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

2016-12-06T03:23:46Z

Kpokhar: /* Task-4(Buttons to toggle questions/score/answers) */

== 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 (Button to show/hide all the reviews)====
* Add button/link to hide and expand all the reviews for a Round.

In student view,for a particular assignment, the UI has <code>show review</code> button for each review in a round. Adding a single button will help student view all the review of a round with single click.

Previous View:

[[File:P1.jpg]]

<br>Updated View:

[[File:P1.jpg]]

<br>Implementation:
<br>
<p>Review view is rendered in app/views/grades/_reviews.html.erb. In this view, we added <code>show all reviews</code> and <code>hide all reviews</code> buttons which when clicked call <code>toggleAllElement</code> function and displays all the reviews of a round.</p>
<pre>

<a href="#" name=<%="roundshow_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','show');return false;">show all reviews</a>
<a href="#" name=<%="roundhide_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','hide');return false;">hide all reviews</a>

</pre>
<p> We added <code>toggleAllElemnet</code> function in app/assets/javascripts/tableactions.js which toggles all the review of a round using existing <code>toggleElement</code> function.</p>
<pre>
function toggleAllElement(elementIdList, mode=''){
console.log(elementIdList)
var res = elementIdList.split(",");
var childText = 'review';

for (var y = 0; y < res.length - 1; y++) {
toggleElement(res[y], childText, mode);
}
}
</pre>

====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(Buttons to toggle questions/score/answers)====
* Make review feedback more readable by changing UI or background color.
* Option to toggle review question or score or answers.

This task is to make feedback response more readable or more focused for user to read. Instructor suggested this can be done by graying out the question or we can change the background of the response text. The existing review also has this behavior. We added toggle button to show/hide questions/score/answers for a review based on instructor suggestion.

Previous View:
[[File: Task4.jpg]]

<br>Update View:
[[File: Task4.jpg]]

<br>Implementation:
<p> The implementation of this functionality is similar to Task 2. A review is rendered in app/models/response.rb. We added <code>toggle questions,</code>
<code>toggle score and</code> <code>toggle answers</code> button in a review view, which when clicked calls <code>toggleAllElement</code> function in app/assets/javascripts/tableactions.js that toggles respective view.
</p>
<pre>
code+='<br><a href="#" name= "question_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_ques + "','review'" + ');return false;">toggle questions</a>'
code+='   <a href="#" name= "score_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_score + "','review'" + ');return false;">toggle scores</a>'
code+='   <a href="#" name= "answer_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_answer + "','review'" + ');return false;">toggle answers</a>'
</pre>

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

File:Task4.jpg

2016-12-06T03:22:51Z

Kpokhar:

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

2016-12-06T03:16:30Z

Kpokhar: /* Task-4 */ - Implementation Update

== 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 (Button to show/hide all the reviews)====
* Add button/link to hide and expand all the reviews for a Round.

In student view,for a particular assignment, the UI has <code>show review</code> button for each review in a round. Adding a single button will help student view all the review of a round with single click.

Previous View:

[[File:P1.jpg]]

<br>Updated View:

[[File:P1.jpg]]

<br>Implementation:
<br>
<p>Review view is rendered in app/views/grades/_reviews.html.erb. In this view, we added <code>show all reviews</code> and <code>hide all reviews</code> buttons which when clicked call <code>toggleAllElement</code> function and displays all the reviews of a round.</p>
<pre>

<a href="#" name=<%="roundshow_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','show');return false;">show all reviews</a>
<a href="#" name=<%="roundhide_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','hide');return false;">hide all reviews</a>

</pre>
<p> We added <code>toggleAllElemnet</code> function in app/assets/javascripts/tableactions.js which toggles all the review of a round using existing <code>toggleElement</code> function.</p>
<pre>
function toggleAllElement(elementIdList, mode=''){
console.log(elementIdList)
var res = elementIdList.split(",");
var childText = 'review';

for (var y = 0; y < res.length - 1; y++) {
toggleElement(res[y], childText, mode);
}
}
</pre>

====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(Buttons to toggle questions/score/answers)====
* Make review feedback more readable by changing UI or background color.
* Option to toggle review question or score or answers.

This task is to make feedback response more readable or more focused for user to read. Instructor suggested this can be done by graying out the question or we can change the background of the response text. The existing review also has this behavior. We added toggle button to show/hide questions/score/answers for a review based on instructor suggestion.

Previous View:
[[File: P1.jpg]]

<br>Update View:
[[File: P1.jpg]]

<br>Implementation:
<p> The implementation of this functionality is similar to Task 2. A review is rendered in app/models/response.rb. We added <code>toggle questions,</code>
<code>toggle score and</code> <code>toggle answers</code> button in a review view, which when clicked calls <code>toggleAllElement</code> function in app/assets/javascripts/tableactions.js that toggles respective view.
</p>
<pre>
code+='<br><a href="#" name= "question_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_ques + "','review'" + ');return false;">toggle questions</a>'
code+='   <a href="#" name= "score_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_score + "','review'" + ');return false;">toggle scores</a>'
code+='   <a href="#" name= "answer_' + str + 'Link" onClick="toggleAllElement(' + "'" + str_answer + "','review'" + ');return false;">toggle answers</a>'
</pre>

====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-06T02:38:02Z

Kpokhar: /* Task-2 (Button to show/hide all the reviews) */

== 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 (Button to show/hide all the reviews)====
* Add button/link to hide and expand all the reviews for a Round.

In student view,for a particular assignment, the UI has <code>show review</code> button for each review in a round. Adding a single button will help student view all the review of a round with single click.

Previous View:

[[File:P1.jpg]]

<br>Updated View:

[[File:P1.jpg]]

<br>Implementation:
<br>
<p>Review view is rendered in app/views/grades/_reviews.html.erb. In this view, we added <code>show all reviews</code> and <code>hide all reviews</code> buttons which when clicked call <code>toggleAllElement</code> function and displays all the reviews of a round.</p>
<pre>

<a href="#" name=<%="roundshow_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','show');return false;">show all reviews</a>
<a href="#" name=<%="roundhide_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','hide');return false;">hide all reviews</a>

</pre>
<p> We added <code>toggleAllElemnet</code> function in app/assets/javascripts/tableactions.js which toggles all the review of a round using existing <code>toggleElement</code> function.</p>
<pre>
function toggleAllElement(elementIdList, mode=''){
console.log(elementIdList)
var res = elementIdList.split(",");
var childText = 'review';

for (var y = 0; y < res.length - 1; y++) {
toggleElement(res[y], childText, mode);
}
}
</pre>

====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-06T02:37:02Z

Kpokhar: /* Task-2 (button to show/hide all the reviews) */

== 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 (Button to show/hide all the reviews)====
* Add button/link to hide and expand all the reviews for a Round.

In student view,for a particular assignment, the UI has <code>show review</code> button for each review in a round. Adding a single button will help student view all the review of a round with single click.

Previous View:

[[File:P1.jpg]]

<br>Updated View:

[[File:P1.jpg]]

<br>Implementation:
<br>
<p>Review view is rendered in app/views/grades/_reviews.html.erb. In this view, we added <code>show all reviews</code> and <code>hide all reviews</code> buttons which when clicked call <code>toggleAllElement</code> function and displays all the reviews for a round.</p>
<pre>

<a href="#" name=<%="roundshow_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','show');return false;">show all reviews</a>
<a href="#" name=<%="roundhide_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','hide');return false;">hide all reviews</a>

</pre>
<p> We added <code>toggleAllElemnet</code> function in app/assets/javascripts/tableactions.js which toggles all the review of a round using existing <code>toggleElement</code> function.</p>
<pre>
function toggleAllElement(elementIdList, mode=''){
console.log(elementIdList)
var res = elementIdList.split(",");
var childText = 'review';

for (var y = 0; y < res.length - 1; y++) {
toggleElement(res[y], childText, mode);
}
}
</pre>

====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-06T02:36:47Z

Kpokhar: /* Task-2 (Added button to show/hide all the reviews) */

== 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 (button to show/hide all the reviews)====
* Add button/link to hide and expand all the reviews for a Round.

In student view,for a particular assignment, the UI has <code>show review</code> button for each review in a round. Adding a single button will help student view all the review of a round with single click.

Previous View:

[[File:P1.jpg]]

<br>Updated View:

[[File:P1.jpg]]

<br>Implementation:
<br>
<p>Review view is rendered in app/views/grades/_reviews.html.erb. In this view, we added <code>show all reviews</code> and <code>hide all reviews</code> buttons which when clicked call <code>toggleAllElement</code> function and displays all the reviews for a round.</p>
<pre>

<a href="#" name=<%="roundshow_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','show');return false;">show all reviews</a>
<a href="#" name=<%="roundhide_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','hide');return false;">hide all reviews</a>

</pre>
<p> We added <code>toggleAllElemnet</code> function in app/assets/javascripts/tableactions.js which toggles all the review of a round using existing <code>toggleElement</code> function.</p>
<pre>
function toggleAllElement(elementIdList, mode=''){
console.log(elementIdList)
var res = elementIdList.split(",");
var childText = 'review';

for (var y = 0; y < res.length - 1; y++) {
toggleElement(res[y], childText, mode);
}
}
</pre>

====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-06T02:36:14Z

Kpokhar: /* Task-2 */ -- Implementation Update

== 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 (Added button to show/hide all the reviews)====
* Add button/link to hide and expand all the reviews for a Round.

In student view,for a particular assignment, the UI has <code>show review</code> button for each review in a round. Adding a single button will help student view all the review of a round with single click.

Previous View:

[[File:P1.jpg]]

<br>Updated View:

[[File:P1.jpg]]

<br>Implementation:
<br>
<p>Review view is rendered in app/views/grades/_reviews.html.erb. In this view, we added <code>show all reviews</code> and <code>hide all reviews</code> buttons which when clicked call <code>toggleAllElement</code> function and displays all the reviews for a round.</p>
<pre>

<a href="#" name=<%="roundshow_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','show');return false;">show all reviews</a>
<a href="#" name=<%="roundhide_" + round.to_s + "Link" %> onClick="toggleAllElement('<%= str %>','hide');return false;">hide all reviews</a>

</pre>
<p> We added <code>toggleAllElemnet</code> function in app/assets/javascripts/tableactions.js which toggles all the review of a round using existing <code>toggleElement</code> function.</p>
<pre>
function toggleAllElement(elementIdList, mode=''){
console.log(elementIdList)
var res = elementIdList.split(",");
var childText = 'review';

for (var y = 0; y < res.length - 1; y++) {
toggleElement(res[y], childText, mode);
}
}
</pre>

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

File:P1.jpg

2016-12-06T02:15:08Z

Kpokhar:

CSC/ECE 517 Fall 2016/E1657. Introduce a Student View for instructors

2016-11-17T02:51:21Z

Kpokhar: /* Testing via UI */

__TOC__
'''NOTE: The pull request will not pass the build.Its not due to our changes but due to some unrelated test failure. '''
==Background==
[http://expertiza.ncsu.edu/ Expertiza] is a web based open source peer reviewing tool based on [http://rubyonrails.org/ Ruby on Rails] developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University], Raleigh. Students will be able to manage all their project submissions, project teamups, topic selections etc. Few of the notable features include:
* Instructor can control most of the stuff that is related to each course.
* Student can control who he/she wants to team up with etc.
* They can provide feedback to each of the topics.
* Instructor can make use of the various submission phases available.
== Introduction ==
Our project is to introduce a Student view to the instructors.The goal of this project is to provide instructor with a functionality using which an instructor can switch to student view and see how the student view looks like. The instructor will also be able to go to future date and see how student view looks like in future date.

==Project Requirements==
* Introduce a "Student View Button" on Instructors UI to switch to student view.
* Introduce a Revert to instructor View" on Instructor's Student UI
* Time travel in Student View.

==Working==
On the right top, left to the logout button , anyone having access to view as instructor gets a textbox and a button saying "Student View". in-order to view as a student you have to type in the students ID and press '''Student View''' button. You can exactly see what the student's page looks like.<br>
[[File:HomeKN6.jpg]]
<br>
If you need to revert back to instructor view you just have to leave the text box empty and press the '''Revert''' button. This takes you to the instructors view again. Else if you need another students view, just type in the students ID and press '''Revert'''.<br>
[[File:HomeKN3.jpg]]
<br>
We also have implemented a time travel feature where you can go to a particular date and see what a student see on that day. You can find this feature as soon as you go to a student ID. You have to select a day you need to travel to, type in the student ID and submit. Boom! you got he student view as on the date given.<br>
[[File:HomeKN4.jpg]]

==Implementation==
* Introduce a "Switch to Student View Button" on Instructors UI
:A 'Student View' button was added in the top right portion of menu-bar for instructor. This button allows instructor to see the student view. This button is linked to impersonate action of [https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]. The button was simply added in menu-bar view. When the button is clicked, it calls <code>impersonate</code> method in <code>impersonate controller</code> which loads new view as student for provided student id.<br>

:Required changes in 1 files :<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<pre>
<% if current_user.role.name == "Instructor" or current_user.role.name == "Administrator"%>
<%= form_for :user, url: '/impersonate/impersonate' do |f| %>
<TABLE>
<TR>
<TD><%= f.text_field :name, {:size => 10,:class => 'form-control input-sm', :autocomplete => "off",placeholder: "User ID"} %></TD>
<TD><%= f.submit 'Student View', :class=>"btn btn-primary input-sm"%></TD>
</TR>
</TABLE>
<% end %>
<% end %>
</pre>
:If student ID is not provided, the system will randomly select an student ID from all the students in the database, and impersonate the selected student view. This is useful when the instructor doesn't remember the specific student ID.
:Required changes in 1 file :<br>
:[https://github.com/chaitanya91k/expertiza/blob/master/app/controllers/impersonate_controller.rb Impersonate_controller.rb]<br>
<pre>
if params[:user][:name]==""
students = User.all.where(role_id: Role.student)
user = students[rand(students.length)]
until original_user.can_impersonate? user
user = students[rand(students.length)]
end
end
</pre>
* Introduce a Revert to instructor View" on Instructor's Student UI
:Once instructor impersonate to a student view, a Revert button appears which when clicked revert back to instructor view from impersonated student view. Once the student view is loaded by instructor,<code>session[:superuser]</code> is set and based on this flag a revert button will be displayed.<br>

* Time travel in Student View.
:Required changes in 4 files :<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<div class="field">
<%= f.date_field :goto_date, :order => [:month,:day, :year],:value => Date.today %>
</div>
:First, we introduced a date box where you can select a date from the UI.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]<br>
if !params[:impersonate][:goto_date].empty?
User.goto_date=params[:impersonate][:goto_date]
end
:In this controller, we took the value from UI and store the same in User model.<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/user.rb user.rb]<br>
attr_accessible :goto_date
def self.goto_date=(val)
@goto_date=val
end
def self.goto_date
@goto_date
end
:The value from the above controller is stored in Users model object (not instance) as goto_date. Thus you can access this date through out the sessions.<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/due_date.rb due_date.rb]<br>

def self.get_next_due_date(assignment_id, topic_id = nil)
(User.goto_date.nil?)? goto_date = Time.now : goto_date = (User.goto_date)
if Assignment.find(assignment_id).staggered_deadline?
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, Time.now]).first
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, goto_date]).first
topic_due_date_size = TopicDueDate.where(parent_id: topic_id).size
following_assignment_due_dates = AssignmentDueDate.where(parent_id: assignment_id)[topic_due_date_size..-1]
following_assignment_due_dates.each do |assignment_due_date|
if assignment_due_date.due_at >= Time.now
if assignment_due_date.due_at >= goto_date
next_due_date = assignment_due_date
break
end
end
end
else
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, Time.now]).first
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, goto_date]).first
end
next_due_date
end

:When ever the system calculates due dates, the time is taken from goto_date that we have stored above in Users model.<br>

==Testing via UI==
* Login in as Instructor.
*Create assignment.<br>I have created one with name Test_Changes with submission deadline Nov 09 and review Deadline Nov 14.<br>Add all the student in course for this assignment.<br>
[[File:Svk1.jpg]]<br>
<br>
<br>
*Switch to student view.<br> Once switched to student view you can see the assignment with submission deadline Nov 09.
[[File:Sv2N.jpg]]<br>
<br>
<br>
*Go to future date and view the assignment list.<br> I went to Nov 10 in future and we can see that the current phase for our assignment is review.<br>
[[File:Svk3N.jpg]]<br>
[[File:Svk4N.jpg]]

==Why These Changes?==
* Requirement: Add a “student view” button for instructors.
:As we were required to add a button , it makes more sense to add a similar button used across the application. Thus we choose class="btn btn-primary" for buttons and :class => 'form-control input-sm' for textboxes.

* Requirement: Introduce a revert button to go back to instructor:
:After an instructor enters a student ID of a student and enters student view, there should be a way to go back to instructors . Thus we have introduced a revert button. Also if the instructor wants to go to a different student’s view he should be able to do so as well. Making these two tasks possible with single textbox and button was better instead of an extra button to go back to instructors view. Now to go back to instructors view, instructor has to leave the textbox blank and click “revert”, if the instructor wants to go to a different student’s view he just need to enter the new student’s id and click on “revert”.

* Requirement: View on specific date:
:We decided to include a date box which on clicked on the date field a data picker pops up. We have added this picker as it makes sense to just click on which date instead of typing the whole date.

==Repository==
[https://github.com/chaitanya91k/expertiza Expertiza Github link]
==Screencast==
Screencast [https://youtu.be/WrJm6csM3mo link] to our demonstration

File:Svk4N.jpg

2016-11-17T02:50:37Z

Kpokhar:

File:Svk3N.jpg

2016-11-17T02:50:20Z

Kpokhar:

File:Sv2N.jpg

2016-11-17T02:48:03Z

Kpokhar: uploaded a new version of "File:Sv2N.jpg"

File:Sv2N.jpg

2016-11-17T02:47:33Z

Kpokhar: uploaded a new version of "File:Sv2N.jpg"

File:Sv2N.jpg

2016-11-17T02:47:19Z

Kpokhar:

File:Svk1N.jpg

2016-11-17T02:45:15Z

Kpokhar:

CSC/ECE 517 Fall 2016/E1657. Introduce a Student View for instructors

2016-11-17T02:40:54Z

Kpokhar: /* Working */

__TOC__
'''NOTE: The pull request will not pass the build.Its not due to our changes but due to some unrelated test failure. '''
==Background==
[http://expertiza.ncsu.edu/ Expertiza] is a web based open source peer reviewing tool based on [http://rubyonrails.org/ Ruby on Rails] developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University], Raleigh. Students will be able to manage all their project submissions, project teamups, topic selections etc. Few of the notable features include:
* Instructor can control most of the stuff that is related to each course.
* Student can control who he/she wants to team up with etc.
* They can provide feedback to each of the topics.
* Instructor can make use of the various submission phases available.
== Introduction ==
Our project is to introduce a Student view to the instructors.The goal of this project is to provide instructor with a functionality using which an instructor can switch to student view and see how the student view looks like. The instructor will also be able to go to future date and see how student view looks like in future date.

==Project Requirements==
* Introduce a "Student View Button" on Instructors UI to switch to student view.
* Introduce a Revert to instructor View" on Instructor's Student UI
* Time travel in Student View.

==Working==
On the right top, left to the logout button , anyone having access to view as instructor gets a textbox and a button saying "Student View". in-order to view as a student you have to type in the students ID and press '''Student View''' button. You can exactly see what the student's page looks like.<br>
[[File:HomeKN6.jpg]]
<br>
If you need to revert back to instructor view you just have to leave the text box empty and press the '''Revert''' button. This takes you to the instructors view again. Else if you need another students view, just type in the students ID and press '''Revert'''.<br>
[[File:HomeKN3.jpg]]
<br>
We also have implemented a time travel feature where you can go to a particular date and see what a student see on that day. You can find this feature as soon as you go to a student ID. You have to select a day you need to travel to, type in the student ID and submit. Boom! you got he student view as on the date given.<br>
[[File:HomeKN4.jpg]]

==Implementation==
* Introduce a "Switch to Student View Button" on Instructors UI
:A 'Student View' button was added in the top right portion of menu-bar for instructor. This button allows instructor to see the student view. This button is linked to impersonate action of [https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]. The button was simply added in menu-bar view. When the button is clicked, it calls <code>impersonate</code> method in <code>impersonate controller</code> which loads new view as student for provided student id.<br>

:Required changes in 1 files :<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<pre>
<% if current_user.role.name == "Instructor" or current_user.role.name == "Administrator"%>
<%= form_for :user, url: '/impersonate/impersonate' do |f| %>
<TABLE>
<TR>
<TD><%= f.text_field :name, {:size => 10,:class => 'form-control input-sm', :autocomplete => "off",placeholder: "User ID"} %></TD>
<TD><%= f.submit 'Student View', :class=>"btn btn-primary input-sm"%></TD>
</TR>
</TABLE>
<% end %>
<% end %>
</pre>
:If student ID is not provided, the system will randomly select an student ID from all the students in the database, and impersonate the selected student view. This is useful when the instructor doesn't remember the specific student ID.
:Required changes in 1 file :<br>
:[https://github.com/chaitanya91k/expertiza/blob/master/app/controllers/impersonate_controller.rb Impersonate_controller.rb]<br>
<pre>
if params[:user][:name]==""
students = User.all.where(role_id: Role.student)
user = students[rand(students.length)]
until original_user.can_impersonate? user
user = students[rand(students.length)]
end
end
</pre>
* Introduce a Revert to instructor View" on Instructor's Student UI
:Once instructor impersonate to a student view, a Revert button appears which when clicked revert back to instructor view from impersonated student view. Once the student view is loaded by instructor,<code>session[:superuser]</code> is set and based on this flag a revert button will be displayed.<br>

* Time travel in Student View.
:Required changes in 4 files :<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<div class="field">
<%= f.date_field :goto_date, :order => [:month,:day, :year],:value => Date.today %>
</div>
:First, we introduced a date box where you can select a date from the UI.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]<br>
if !params[:impersonate][:goto_date].empty?
User.goto_date=params[:impersonate][:goto_date]
end
:In this controller, we took the value from UI and store the same in User model.<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/user.rb user.rb]<br>
attr_accessible :goto_date
def self.goto_date=(val)
@goto_date=val
end
def self.goto_date
@goto_date
end
:The value from the above controller is stored in Users model object (not instance) as goto_date. Thus you can access this date through out the sessions.<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/due_date.rb due_date.rb]<br>

def self.get_next_due_date(assignment_id, topic_id = nil)
(User.goto_date.nil?)? goto_date = Time.now : goto_date = (User.goto_date)
if Assignment.find(assignment_id).staggered_deadline?
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, Time.now]).first
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, goto_date]).first
topic_due_date_size = TopicDueDate.where(parent_id: topic_id).size
following_assignment_due_dates = AssignmentDueDate.where(parent_id: assignment_id)[topic_due_date_size..-1]
following_assignment_due_dates.each do |assignment_due_date|
if assignment_due_date.due_at >= Time.now
if assignment_due_date.due_at >= goto_date
next_due_date = assignment_due_date
break
end
end
end
else
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, Time.now]).first
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, goto_date]).first
end
next_due_date
end

:When ever the system calculates due dates, the time is taken from goto_date that we have stored above in Users model.<br>

==Testing via UI==
* Login in as Instructor.
*Create assignment.<br>I have created one with name Test_Changes with submission deadline Nov 09 and review Deadline Nov 14.<br>Add all the student in course for this assignment
[[File:Svk1.jpg]]<br>
<br>
<br>
*Switch to student view.<br> Once switched to student view you can see the assignment with submission deadline Nov 09.
[[File:Sv2.jpg]]<br>
<br>
<br>
*Go to future date and view the assignment list.<br> I went to Nov 10 in future and we can see that the current phase for our assignment is review.
[[File:Svk3.jpg]]<br>
[[File:Svk4.jpg]]

==Why These Changes?==
* Requirement: Add a “student view” button for instructors.
:As we were required to add a button , it makes more sense to add a similar button used across the application. Thus we choose class="btn btn-primary" for buttons and :class => 'form-control input-sm' for textboxes.

* Requirement: Introduce a revert button to go back to instructor:
:After an instructor enters a student ID of a student and enters student view, there should be a way to go back to instructors . Thus we have introduced a revert button. Also if the instructor wants to go to a different student’s view he should be able to do so as well. Making these two tasks possible with single textbox and button was better instead of an extra button to go back to instructors view. Now to go back to instructors view, instructor has to leave the textbox blank and click “revert”, if the instructor wants to go to a different student’s view he just need to enter the new student’s id and click on “revert”.

* Requirement: View on specific date:
:We decided to include a date box which on clicked on the date field a data picker pops up. We have added this picker as it makes sense to just click on which date instead of typing the whole date.

==Repository==
[https://github.com/chaitanya91k/expertiza Expertiza Github link]
==Screencast==
Screencast [https://youtu.be/WrJm6csM3mo link] to our demonstration

File:HomeKN6.jpg

2016-11-17T02:40:29Z

Kpokhar:

File:HomeKN3.jpg

2016-11-17T02:40:14Z

Kpokhar:

File:HomeKN4.jpg

2016-11-17T02:36:42Z

Kpokhar:

File:HomeK4N.jpg

2016-11-17T02:30:30Z

Kpokhar:

CSC/ECE 517 Fall 2016/E1657. Introduce a Student View for instructors

2016-11-04T22:49:10Z

Kpokhar: /* Testing via UI */

Note: The pull request will not pass the build.Its not due to our changes but due to some unrelated test failure.
__TOC__

==Background==
[http://expertiza.ncsu.edu/ Expertiza] is a web based open source peer reviewing tool based on [http://rubyonrails.org/ Ruby on Rails] developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University], Raleigh. Students will be able to manage all their project submissions, project teamups, topic selections etc. Few of the notable features include:
* Instructor can control most of the stuff that is related to each course.
* Student can control who he/she wants to team up with etc.
* They can provide feedback to each of the topics.
* Instructor can make use of the various submission phases available.
== Introduction ==
Our project is to introduce a Student view to the instructors.The goal of this project is to provide instructor with a functionality using which an instructor can switch to student view and see how the student view looks like. The instructor will also be able to go to future date and see how student view looks like in future date.

==Project Requirements==
* Introduce a "Student View Button" on Instructors UI to switch to student view.
* Introduce a Revert to instructor View" on Instructor's Student UI
* Time travel in Student View.

==Working==
On the right top, left to the logout button , anyone having access to view as instructor gets a textbox and a button saying "Student View". in-order to view as a student you have to type in the students ID and press '''Student View''' button. You can exactly see what the student's page looks like.
[[File:HomeK6.jpg]]
<br>
If you need to revert back to instructor view you just have to leave the text box empty and press the '''Revert''' button. This takes you to the instructors view again. Else if you need another students view, just type in the students ID and press '''Revert'''.
[[File:HomeK3.jpg]]
<br>
We also have implemented a time travel feature where you can go to a particular date and see what a student see on that day. You can find this feature as soon as you go to a student ID. You have to select a day you need to travel to, type in the student ID and submit. Boom! you got he student view as on the date given.
[[File:HomeK4.jpg]]

==Implementation==
* Introduce a "Switch to Student View Button" on Instructors UI
:A 'Student View' button was added in the top right portion of menu-bar for instructor. This button allows instructor to see the student view. This button is linked to impersonate action of [https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]. The button was simply added in menu-bar view. When the button is clicked, it calls <code>impersonate</code> method in <code>impersonate controller</code> which loads new view as student for provided student id.<br>

:Required changes in 1 files :<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<pre>
<% if current_user.role.name == "Instructor" or current_user.role.name == "Administrator"%>
<%= form_for :user, url: '/impersonate/impersonate' do |f| %>
<TABLE>
<TR>
<TD><%= f.text_field :name, {:size => 10,:class => 'form-control input-sm', :autocomplete => "off",placeholder: "User ID"} %></TD>
<TD><%= f.submit 'Student View', :class=>"btn btn-primary input-sm"%></TD>
</TR>
</TABLE>
<% end %>
<% end %>
</pre>
* Introduce a Revert to instructor View" on Instructor's Student UI
:Once instructor impersonate to a student view, a Revert button appears which when clicked revert back to instructor view from impersonated student view. Once the student view is loaded by instructor,<code>session[:superuser]</code> is set and based on this flag a revert button will be displayed.<br>

* Time travel in Student View.
:Required changes in 4 files :<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<div class="field">
<%= f.date_field :goto_date, :order => [:month,:day, :year],:value => Date.today %>
</div>
:First, we introduced a date box where you can select a date from the UI.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]<br>
if !params[:impersonate][:goto_date].empty?
User.goto_date=params[:impersonate][:goto_date]
end
:In this controller, we took the value from UI and store the same in User model.<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/user.rb user.rb]<br>
attr_accessible :goto_date
def self.goto_date=(val)
@goto_date=val
end
def self.goto_date
@goto_date
end
:The value from the above controller is stored in Users model object (not instance) as goto_date. Thus you can access this date through out the sessions.<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/due_date.rb due_date.rb]<br>

def self.get_next_due_date(assignment_id, topic_id = nil)
(User.goto_date.nil?)? goto_date = Time.now : goto_date = (User.goto_date)
if Assignment.find(assignment_id).staggered_deadline?
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, Time.now]).first
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, goto_date]).first
topic_due_date_size = TopicDueDate.where(parent_id: topic_id).size
following_assignment_due_dates = AssignmentDueDate.where(parent_id: assignment_id)[topic_due_date_size..-1]
following_assignment_due_dates.each do |assignment_due_date|
if assignment_due_date.due_at >= Time.now
if assignment_due_date.due_at >= goto_date
next_due_date = assignment_due_date
break
end
end
end
else
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, Time.now]).first
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, goto_date]).first
end
next_due_date
end

:When ever the system calculates due dates, the time is taken from goto_date that we have stored above in Users model.<br>

==Testing via UI==
* Login in as Instructor.
*Create assignment.<br>I have created one with name Test_Changes with submission deadline Nov 09 and review Deadline Nov 14.<br>Add all the student in course for this assignment
[[File:Svk1.jpg]]<br>
<br>
<br>
*Switch to student view.<br> Once switched to student view you can see the assignment with submission deadline Nov 09.
[[File:Sv2.jpg]]<br>
<br>
<br>
*Go to future date and view the assignment list.<br> I went to Nov 10 in future and we can see that the current phase for our assignment is review.
[[File:Svk3.jpg]]<br>
[[File:Svk4.jpg]]

==Repository==
[https://github.com/chaitanya91k/expertiza Expertiza Github link]

CSC/ECE 517 Fall 2016/E1657. Introduce a Student View for instructors

2016-11-04T22:48:27Z

Kpokhar: /* Testing via UI */

Note: The pull request will not pass the build.Its not due to our changes but due to some unrelated test failure.
__TOC__

==Background==
[http://expertiza.ncsu.edu/ Expertiza] is a web based open source peer reviewing tool based on [http://rubyonrails.org/ Ruby on Rails] developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University], Raleigh. Students will be able to manage all their project submissions, project teamups, topic selections etc. Few of the notable features include:
* Instructor can control most of the stuff that is related to each course.
* Student can control who he/she wants to team up with etc.
* They can provide feedback to each of the topics.
* Instructor can make use of the various submission phases available.
== Introduction ==
Our project is to introduce a Student view to the instructors.The goal of this project is to provide instructor with a functionality using which an instructor can switch to student view and see how the student view looks like. The instructor will also be able to go to future date and see how student view looks like in future date.

==Project Requirements==
* Introduce a "Student View Button" on Instructors UI to switch to student view.
* Introduce a Revert to instructor View" on Instructor's Student UI
* Time travel in Student View.

==Working==
On the right top, left to the logout button , anyone having access to view as instructor gets a textbox and a button saying "Student View". in-order to view as a student you have to type in the students ID and press '''Student View''' button. You can exactly see what the student's page looks like.
[[File:HomeK6.jpg]]
<br>
If you need to revert back to instructor view you just have to leave the text box empty and press the '''Revert''' button. This takes you to the instructors view again. Else if you need another students view, just type in the students ID and press '''Revert'''.
[[File:HomeK3.jpg]]
<br>
We also have implemented a time travel feature where you can go to a particular date and see what a student see on that day. You can find this feature as soon as you go to a student ID. You have to select a day you need to travel to, type in the student ID and submit. Boom! you got he student view as on the date given.
[[File:HomeK4.jpg]]

==Implementation==
* Introduce a "Switch to Student View Button" on Instructors UI
:A 'Student View' button was added in the top right portion of menu-bar for instructor. This button allows instructor to see the student view. This button is linked to impersonate action of [https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]. The button was simply added in menu-bar view. When the button is clicked, it calls <code>impersonate</code> method in <code>impersonate controller</code> which loads new view as student for provided student id.<br>

:Required changes in 1 files :<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<pre>
<% if current_user.role.name == "Instructor" or current_user.role.name == "Administrator"%>
<%= form_for :user, url: '/impersonate/impersonate' do |f| %>
<TABLE>
<TR>
<TD><%= f.text_field :name, {:size => 10,:class => 'form-control input-sm', :autocomplete => "off",placeholder: "User ID"} %></TD>
<TD><%= f.submit 'Student View', :class=>"btn btn-primary input-sm"%></TD>
</TR>
</TABLE>
<% end %>
<% end %>
</pre>
* Introduce a Revert to instructor View" on Instructor's Student UI
:Once instructor impersonate to a student view, a Revert button appears which when clicked revert back to instructor view from impersonated student view. Once the student view is loaded by instructor,<code>session[:superuser]</code> is set and based on this flag a revert button will be displayed.<br>

* Time travel in Student View.
:Required changes in 4 files :<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<div class="field">
<%= f.date_field :goto_date, :order => [:month,:day, :year],:value => Date.today %>
</div>
:First, we introduced a date box where you can select a date from the UI.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]<br>
if !params[:impersonate][:goto_date].empty?
User.goto_date=params[:impersonate][:goto_date]
end
:In this controller, we took the value from UI and store the same in User model.<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/user.rb user.rb]<br>
attr_accessible :goto_date
def self.goto_date=(val)
@goto_date=val
end
def self.goto_date
@goto_date
end
:The value from the above controller is stored in Users model object (not instance) as goto_date. Thus you can access this date through out the sessions.<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/due_date.rb due_date.rb]<br>

def self.get_next_due_date(assignment_id, topic_id = nil)
(User.goto_date.nil?)? goto_date = Time.now : goto_date = (User.goto_date)
if Assignment.find(assignment_id).staggered_deadline?
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, Time.now]).first
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, goto_date]).first
topic_due_date_size = TopicDueDate.where(parent_id: topic_id).size
following_assignment_due_dates = AssignmentDueDate.where(parent_id: assignment_id)[topic_due_date_size..-1]
following_assignment_due_dates.each do |assignment_due_date|
if assignment_due_date.due_at >= Time.now
if assignment_due_date.due_at >= goto_date
next_due_date = assignment_due_date
break
end
end
end
else
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, Time.now]).first
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, goto_date]).first
end
next_due_date
end

:When ever the system calculates due dates, the time is taken from goto_date that we have stored above in Users model.<br>

==Testing via UI==
* Login in as Instructor.
*Create assignment.<br>I have created one with name Test_Changes with submission deadline Nov 09 and review Deadline Nov 14.<br>Add all the student in course for this assignment
[[File:Svk1.jpg]]<br>
*Switch to student view.<br> Once switched to student view you can see the assignment with submission deadline Nov 09.
[[File:Sv2.jpg]]<br>
*Go to future date and view the assignment list.<br> I went to Nov 10 in future and we can see that the current phase for our assignment is review.
[[File:Svk3.jpg]]<br>
[[File:Svk4.jpg]]

==Repository==
[https://github.com/chaitanya91k/expertiza Expertiza Github link]

File:Svk4.jpg

2016-11-04T22:47:22Z

Kpokhar:

File:Svk3.jpg

2016-11-04T22:46:58Z

Kpokhar:

File:Sv2.jpg

2016-11-04T22:46:32Z

Kpokhar:

File:Svk1.jpg

2016-11-04T22:45:30Z

Kpokhar:

CSC/ECE 517 Fall 2016/E1657. Introduce a Student View for instructors

2016-11-04T22:40:24Z

Kpokhar: /* Testing via UI */

Note: The pull request will not pass the build.Its not due to our changes but due to some unrelated test failure.
__TOC__

==Background==
[http://expertiza.ncsu.edu/ Expertiza] is a web based open source peer reviewing tool based on [http://rubyonrails.org/ Ruby on Rails] developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University], Raleigh. Students will be able to manage all their project submissions, project teamups, topic selections etc. Few of the notable features include:
* Instructor can control most of the stuff that is related to each course.
* Student can control who he/she wants to team up with etc.
* They can provide feedback to each of the topics.
* Instructor can make use of the various submission phases available.
== Introduction ==
Our project is to introduce a Student view to the instructors.The goal of this project is to provide instructor with a functionality using which an instructor can switch to student view and see how the student view looks like. The instructor will also be able to go to future date and see how student view looks like in future date.

==Project Requirements==
* Introduce a "Student View Button" on Instructors UI to switch to student view.
* Introduce a Revert to instructor View" on Instructor's Student UI
* Time travel in Student View.

==Working==
On the right top, left to the logout button , anyone having access to view as instructor gets a textbox and a button saying "Student View". in-order to view as a student you have to type in the students ID and press '''Student View''' button. You can exactly see what the student's page looks like.
[[File:HomeK6.jpg]]
<br>
If you need to revert back to instructor view you just have to leave the text box empty and press the '''Revert''' button. This takes you to the instructors view again. Else if you need another students view, just type in the students ID and press '''Revert'''.
[[File:HomeK3.jpg]]
<br>
We also have implemented a time travel feature where you can go to a particular date and see what a student see on that day. You can find this feature as soon as you go to a student ID. You have to select a day you need to travel to, type in the student ID and submit. Boom! you got he student view as on the date given.
[[File:HomeK4.jpg]]

==Implementation==
* Introduce a "Switch to Student View Button" on Instructors UI
:A 'Student View' button was added in the top right portion of menu-bar for instructor. This button allows instructor to see the student view. This button is linked to impersonate action of [https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]. The button was simply added in menu-bar view. When the button is clicked, it calls <code>impersonate</code> method in <code>impersonate controller</code> which loads new view as student for provided student id.<br>

:Required changes in 1 files :<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<pre>
<% if current_user.role.name == "Instructor" or current_user.role.name == "Administrator"%>
<%= form_for :user, url: '/impersonate/impersonate' do |f| %>
<TABLE>
<TR>
<TD><%= f.text_field :name, {:size => 10,:class => 'form-control input-sm', :autocomplete => "off",placeholder: "User ID"} %></TD>
<TD><%= f.submit 'Student View', :class=>"btn btn-primary input-sm"%></TD>
</TR>
</TABLE>
<% end %>
<% end %>
</pre>
* Introduce a Revert to instructor View" on Instructor's Student UI
:Once instructor impersonate to a student view, a Revert button appears which when clicked revert back to instructor view from impersonated student view. Once the student view is loaded by instructor,<code>session[:superuser]</code> is set and based on this flag a revert button will be displayed.<br>

* Time travel in Student View.
:Required changes in 4 files :<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<div class="field">
<%= f.date_field :goto_date, :order => [:month,:day, :year],:value => Date.today %>
</div>
:First, we introduced a date box where you can select a date from the UI.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]<br>
if !params[:impersonate][:goto_date].empty?
User.goto_date=params[:impersonate][:goto_date]
end
:In this controller, we took the value from UI and store the same in User model.<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/user.rb user.rb]<br>
attr_accessible :goto_date
def self.goto_date=(val)
@goto_date=val
end
def self.goto_date
@goto_date
end
:The value from the above controller is stored in Users model object (not instance) as goto_date. Thus you can access this date through out the sessions.<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/due_date.rb due_date.rb]<br>

def self.get_next_due_date(assignment_id, topic_id = nil)
(User.goto_date.nil?)? goto_date = Time.now : goto_date = (User.goto_date)
if Assignment.find(assignment_id).staggered_deadline?
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, Time.now]).first
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, goto_date]).first
topic_due_date_size = TopicDueDate.where(parent_id: topic_id).size
following_assignment_due_dates = AssignmentDueDate.where(parent_id: assignment_id)[topic_due_date_size..-1]
following_assignment_due_dates.each do |assignment_due_date|
if assignment_due_date.due_at >= Time.now
if assignment_due_date.due_at >= goto_date
next_due_date = assignment_due_date
break
end
end
end
else
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, Time.now]).first
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, goto_date]).first
end
next_due_date
end

:When ever the system calculates due dates, the time is taken from goto_date that we have stored above in Users model.<br>

==Testing via UI==
* Login in as Instructor.
*Create assignment.<br>I have created one with name Test_Changes with submission deadline Nov 09 and review Deadline Nov 14.<br>Add all the student in course for this assignment
*Switch to student view.<br> Once switched to student view you can see the assignment with submission deadline Nov 09.
*Go to future date and view the assignment list.<br> I went to Nov 10 in future and we can see that the current phase for our assignment is review.

==Repository==
[https://github.com/chaitanya91k/expertiza Expertiza Github link]

CSC/ECE 517 Fall 2016/E1657. Introduce a Student View for instructors

2016-11-04T22:37:46Z

Kpokhar:

Note: The pull request will not pass the build.Its not due to our changes but due to some unrelated test failure.
__TOC__

==Background==
[http://expertiza.ncsu.edu/ Expertiza] is a web based open source peer reviewing tool based on [http://rubyonrails.org/ Ruby on Rails] developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University], Raleigh. Students will be able to manage all their project submissions, project teamups, topic selections etc. Few of the notable features include:
* Instructor can control most of the stuff that is related to each course.
* Student can control who he/she wants to team up with etc.
* They can provide feedback to each of the topics.
* Instructor can make use of the various submission phases available.
== Introduction ==
Our project is to introduce a Student view to the instructors.The goal of this project is to provide instructor with a functionality using which an instructor can switch to student view and see how the student view looks like. The instructor will also be able to go to future date and see how student view looks like in future date.

==Project Requirements==
* Introduce a "Student View Button" on Instructors UI to switch to student view.
* Introduce a Revert to instructor View" on Instructor's Student UI
* Time travel in Student View.

==Working==
On the right top, left to the logout button , anyone having access to view as instructor gets a textbox and a button saying "Student View". in-order to view as a student you have to type in the students ID and press '''Student View''' button. You can exactly see what the student's page looks like.
[[File:HomeK6.jpg]]
<br>
If you need to revert back to instructor view you just have to leave the text box empty and press the '''Revert''' button. This takes you to the instructors view again. Else if you need another students view, just type in the students ID and press '''Revert'''.
[[File:HomeK3.jpg]]
<br>
We also have implemented a time travel feature where you can go to a particular date and see what a student see on that day. You can find this feature as soon as you go to a student ID. You have to select a day you need to travel to, type in the student ID and submit. Boom! you got he student view as on the date given.
[[File:HomeK4.jpg]]

==Implementation==
* Introduce a "Switch to Student View Button" on Instructors UI
:A 'Student View' button was added in the top right portion of menu-bar for instructor. This button allows instructor to see the student view. This button is linked to impersonate action of [https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]. The button was simply added in menu-bar view. When the button is clicked, it calls <code>impersonate</code> method in <code>impersonate controller</code> which loads new view as student for provided student id.<br>

:Required changes in 1 files :<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<pre>
<% if current_user.role.name == "Instructor" or current_user.role.name == "Administrator"%>
<%= form_for :user, url: '/impersonate/impersonate' do |f| %>
<TABLE>
<TR>
<TD><%= f.text_field :name, {:size => 10,:class => 'form-control input-sm', :autocomplete => "off",placeholder: "User ID"} %></TD>
<TD><%= f.submit 'Student View', :class=>"btn btn-primary input-sm"%></TD>
</TR>
</TABLE>
<% end %>
<% end %>
</pre>
* Introduce a Revert to instructor View" on Instructor's Student UI
:Once instructor impersonate to a student view, a Revert button appears which when clicked revert back to instructor view from impersonated student view. Once the student view is loaded by instructor,<code>session[:superuser]</code> is set and based on this flag a revert button will be displayed.<br>

* Time travel in Student View.
:Required changes in 4 files :<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<div class="field">
<%= f.date_field :goto_date, :order => [:month,:day, :year],:value => Date.today %>
</div>
:First, we introduced a date box where you can select a date from the UI.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]<br>
if !params[:impersonate][:goto_date].empty?
User.goto_date=params[:impersonate][:goto_date]
end
:In this controller, we took the value from UI and store the same in User model.<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/user.rb user.rb]<br>
attr_accessible :goto_date
def self.goto_date=(val)
@goto_date=val
end
def self.goto_date
@goto_date
end
:The value from the above controller is stored in Users model object (not instance) as goto_date. Thus you can access this date through out the sessions.<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/due_date.rb due_date.rb]<br>

def self.get_next_due_date(assignment_id, topic_id = nil)
(User.goto_date.nil?)? goto_date = Time.now : goto_date = (User.goto_date)
if Assignment.find(assignment_id).staggered_deadline?
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, Time.now]).first
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, goto_date]).first
topic_due_date_size = TopicDueDate.where(parent_id: topic_id).size
following_assignment_due_dates = AssignmentDueDate.where(parent_id: assignment_id)[topic_due_date_size..-1]
following_assignment_due_dates.each do |assignment_due_date|
if assignment_due_date.due_at >= Time.now
if assignment_due_date.due_at >= goto_date
next_due_date = assignment_due_date
break
end
end
end
else
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, Time.now]).first
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, goto_date]).first
end
next_due_date
end

:When ever the system calculates due dates, the time is taken from goto_date that we have stored above in Users model.<br>

==Testing via UI==
* Login in as Instructor.
*Create and assignment.
Create assignment. I have created one with name ''Test_Changes'' with submission deadline Nov 09 and review Deadline Nov 14.
Add all the student in course for this assignment
*Switch to student view.
*Go to future date and view the assignment list.

==Repository==
[https://github.com/chaitanya91k/expertiza Expertiza Github link]

CSC/ECE 517 Fall 2016/E1657. Introduce a Student View for instructors

2016-11-04T22:36:15Z

Kpokhar: /* Testing via UI */

Note: The pull request will not pass the build.Its not due to our changes but due to some unrelated test failure.
__TOC__

==Background==
[http://expertiza.ncsu.edu/ Expertiza] is a web based open source peer reviewing tool based on [http://rubyonrails.org/ Ruby on Rails] developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University], Raleigh. Students will be able to manage all their project submissions, project teamups, topic selections etc. Few of the notable features include:
* Instructor can control most of the stuff that is related to each course.
* Student can control who he/she wants to team up with etc.
* They can provide feedback to each of the topics.
* Instructor can make use of the various submission phases available.
== Introduction ==
Our project is to introduce a Student view to the instructors.The goal of this project is to provide instructor with a functionality using which an instructor can switch to student view and see how the student view looks like. The instructor will also be able to go to future date and see how student view looks like in future date.

==Project Requirements==
* Introduce a "Student View Button" on Instructors UI to switch to student view.
* Introduce a Revert to instructor View" on Instructor's Student UI
* Time travel in Student View.

==Working==
On the right top, left to the logout button , anyone having access to view as instructor gets a textbox and a button saying "Student View". in-order to view as a student you have to type in the students ID and press '''Student View''' button. You can exactly see what the student's page looks like.
[[File:HomeK6.jpg]]
<br>
If you need to revert back to instructor view you just have to leave the text box empty and press the '''Revert''' button. This takes you to the instructors view again. Else if you need another students view, just type in the students ID and press '''Revert'''.
[[File:HomeK3.jpg]]
<br>
We also have implemented a time travel feature where you can go to a particular date and see what a student see on that day. You can find this feature as soon as you go to a student ID. You have to select a day you need to travel to, type in the student ID and submit. Boom! you got he student view as on the date given.
[[File:HomeK4.jpg]]

==Implementation==
* Introduce a "Switch to Student View Button" on Instructors UI
:A 'Student View' button was added in the top right portion of menu-bar for instructor. This button allows instructor to see the student view. This button is linked to impersonate action of [https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]. The button was simply added in menu-bar view. When the button is clicked, it calls <code>impersonate</code> method in <code>impersonate controller</code> which loads new view as student for provided student id.<br>

:Required changes in 1 files :<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<pre>
<% if current_user.role.name == "Instructor" or current_user.role.name == "Administrator"%>
<%= form_for :user, url: '/impersonate/impersonate' do |f| %>
<TABLE>
<TR>
<TD><%= f.text_field :name, {:size => 10,:class => 'form-control input-sm', :autocomplete => "off",placeholder: "User ID"} %></TD>
<TD><%= f.submit 'Student View', :class=>"btn btn-primary input-sm"%></TD>
</TR>
</TABLE>
<% end %>
<% end %>
</pre>
* Introduce a Revert to instructor View" on Instructor's Student UI
:Once instructor impersonate to a student view, a Revert button appears which when clicked revert back to instructor view from impersonated student view. Once the student view is loaded by instructor,<code>session[:superuser]</code> is set and based on this flag a revert button will be displayed.<br>

* Time travel in Student View.
:Required changes in 4 files :<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<div class="field">
<%= f.date_field :goto_date, :order => [:month,:day, :year],:value => Date.today %>
</div>
:First, we introduced a date box where you can select a date from the UI.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]<br>
if !params[:impersonate][:goto_date].empty?
User.goto_date=params[:impersonate][:goto_date]
end
:In this controller, we took the value from UI and store the same in User model.<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/user.rb user.rb]<br>
attr_accessible :goto_date
def self.goto_date=(val)
@goto_date=val
end
def self.goto_date
@goto_date
end
:The value from the above controller is stored in Users model object (not instance) as goto_date. Thus you can access this date through out the sessions.<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/due_date.rb due_date.rb]<br>

def self.get_next_due_date(assignment_id, topic_id = nil)
(User.goto_date.nil?)? goto_date = Time.now : goto_date = (User.goto_date)
if Assignment.find(assignment_id).staggered_deadline?
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, Time.now]).first
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, goto_date]).first
topic_due_date_size = TopicDueDate.where(parent_id: topic_id).size
following_assignment_due_dates = AssignmentDueDate.where(parent_id: assignment_id)[topic_due_date_size..-1]
following_assignment_due_dates.each do |assignment_due_date|
if assignment_due_date.due_at >= Time.now
if assignment_due_date.due_at >= goto_date
next_due_date = assignment_due_date
break
end
end
end
else
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, Time.now]).first
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, goto_date]).first
end
next_due_date
end

:When ever the system calculates due dates, the time is taken from goto_date that we have stored above in Users model.<br>

==Testing via UI==
* Login in as Instructor.
*Create and assignment.
: Create assignment with name ''Test_Changes'' with submission deadline Nov 09 and review Deadline Nov 14.
*Switch to student view.
*Go to future date and view the assignment list.

==Repository==
[https://github.com/chaitanya91k/expertiza Expertiza Github link]

CSC/ECE 517 Fall 2016/E1657. Introduce a Student View for instructors

2016-11-04T22:29:50Z

Kpokhar: /* Repository */

Note: The pull request will not pass the build.Its not due to our changes but due to some unrelated test failure.
__TOC__

==Background==
[http://expertiza.ncsu.edu/ Expertiza] is a web based open source peer reviewing tool based on [http://rubyonrails.org/ Ruby on Rails] developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University], Raleigh. Students will be able to manage all their project submissions, project teamups, topic selections etc. Few of the notable features include:
* Instructor can control most of the stuff that is related to each course.
* Student can control who he/she wants to team up with etc.
* They can provide feedback to each of the topics.
* Instructor can make use of the various submission phases available.
== Introduction ==
Our project is to introduce a Student view to the instructors.The goal of this project is to provide instructor with a functionality using which an instructor can switch to student view and see how the student view looks like. The instructor will also be able to go to future date and see how student view looks like in future date.

==Project Requirements==
* Introduce a "Student View Button" on Instructors UI to switch to student view.
* Introduce a Revert to instructor View" on Instructor's Student UI
* Time travel in Student View.

==Working==
On the right top, left to the logout button , anyone having access to view as instructor gets a textbox and a button saying "Student View". in-order to view as a student you have to type in the students ID and press '''Student View''' button. You can exactly see what the student's page looks like.
[[File:HomeK6.jpg]]
<br>
If you need to revert back to instructor view you just have to leave the text box empty and press the '''Revert''' button. This takes you to the instructors view again. Else if you need another students view, just type in the students ID and press '''Revert'''.
[[File:HomeK3.jpg]]
<br>
We also have implemented a time travel feature where you can go to a particular date and see what a student see on that day. You can find this feature as soon as you go to a student ID. You have to select a day you need to travel to, type in the student ID and submit. Boom! you got he student view as on the date given.
[[File:HomeK4.jpg]]

==Implementation==
* Introduce a "Switch to Student View Button" on Instructors UI
:A 'Student View' button was added in the top right portion of menu-bar for instructor. This button allows instructor to see the student view. This button is linked to impersonate action of [https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]. The button was simply added in menu-bar view. When the button is clicked, it calls <code>impersonate</code> method in <code>impersonate controller</code> which loads new view as student for provided student id.<br>

:Required changes in 1 files :<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<pre>
<% if current_user.role.name == "Instructor" or current_user.role.name == "Administrator"%>
<%= form_for :user, url: '/impersonate/impersonate' do |f| %>
<TABLE>
<TR>
<TD><%= f.text_field :name, {:size => 10,:class => 'form-control input-sm', :autocomplete => "off",placeholder: "User ID"} %></TD>
<TD><%= f.submit 'Student View', :class=>"btn btn-primary input-sm"%></TD>
</TR>
</TABLE>
<% end %>
<% end %>
</pre>
* Introduce a Revert to instructor View" on Instructor's Student UI
:Once instructor impersonate to a student view, a Revert button appears which when clicked revert back to instructor view from impersonated student view. Once the student view is loaded by instructor,<code>session[:superuser]</code> is set and based on this flag a revert button will be displayed.<br>

* Time travel in Student View.
:Required changes in 4 files :<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<div class="field">
<%= f.date_field :goto_date, :order => [:month,:day, :year],:value => Date.today %>
</div>
:First, we introduced a date box where you can select a date from the UI.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]<br>
if !params[:impersonate][:goto_date].empty?
User.goto_date=params[:impersonate][:goto_date]
end
:In this controller, we took the value from UI and store the same in User model.<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/user.rb user.rb]<br>
attr_accessible :goto_date
def self.goto_date=(val)
@goto_date=val
end
def self.goto_date
@goto_date
end
:The value from the above controller is stored in Users model object (not instance) as goto_date. Thus you can access this date through out the sessions.<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/due_date.rb due_date.rb]<br>

def self.get_next_due_date(assignment_id, topic_id = nil)
(User.goto_date.nil?)? goto_date = Time.now : goto_date = (User.goto_date)
if Assignment.find(assignment_id).staggered_deadline?
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, Time.now]).first
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, goto_date]).first
topic_due_date_size = TopicDueDate.where(parent_id: topic_id).size
following_assignment_due_dates = AssignmentDueDate.where(parent_id: assignment_id)[topic_due_date_size..-1]
following_assignment_due_dates.each do |assignment_due_date|
if assignment_due_date.due_at >= Time.now
if assignment_due_date.due_at >= goto_date
next_due_date = assignment_due_date
break
end
end
end
else
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, Time.now]).first
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, goto_date]).first
end
next_due_date
end

:When ever the system calculates due dates, the time is taken from goto_date that we have stored above in Users model.<br>

==Testing via UI==
* Login in as Instructor.
*Create and assignment.
*Switch to student view.
*Go to future date and view the assignment list.

==Repository==
[https://github.com/chaitanya91k/expertiza Expertiza Github link]

CSC/ECE 517 Fall 2016/E1657. Introduce a Student View for instructors

2016-11-04T22:27:54Z

Kpokhar:

Note: The pull request will not pass the build.Its not due to our changes but due to some unrelated test failure.
__TOC__

==Background==
[http://expertiza.ncsu.edu/ Expertiza] is a web based open source peer reviewing tool based on [http://rubyonrails.org/ Ruby on Rails] developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University], Raleigh. Students will be able to manage all their project submissions, project teamups, topic selections etc. Few of the notable features include:
* Instructor can control most of the stuff that is related to each course.
* Student can control who he/she wants to team up with etc.
* They can provide feedback to each of the topics.
* Instructor can make use of the various submission phases available.
== Introduction ==
Our project is to introduce a Student view to the instructors.The goal of this project is to provide instructor with a functionality using which an instructor can switch to student view and see how the student view looks like. The instructor will also be able to go to future date and see how student view looks like in future date.

==Project Requirements==
* Introduce a "Student View Button" on Instructors UI to switch to student view.
* Introduce a Revert to instructor View" on Instructor's Student UI
* Time travel in Student View.

==Working==
On the right top, left to the logout button , anyone having access to view as instructor gets a textbox and a button saying "Student View". in-order to view as a student you have to type in the students ID and press '''Student View''' button. You can exactly see what the student's page looks like.
[[File:HomeK6.jpg]]
<br>
If you need to revert back to instructor view you just have to leave the text box empty and press the '''Revert''' button. This takes you to the instructors view again. Else if you need another students view, just type in the students ID and press '''Revert'''.
[[File:HomeK3.jpg]]
<br>
We also have implemented a time travel feature where you can go to a particular date and see what a student see on that day. You can find this feature as soon as you go to a student ID. You have to select a day you need to travel to, type in the student ID and submit. Boom! you got he student view as on the date given.
[[File:HomeK4.jpg]]

==Implementation==
* Introduce a "Switch to Student View Button" on Instructors UI
:A 'Student View' button was added in the top right portion of menu-bar for instructor. This button allows instructor to see the student view. This button is linked to impersonate action of [https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]. The button was simply added in menu-bar view. When the button is clicked, it calls <code>impersonate</code> method in <code>impersonate controller</code> which loads new view as student for provided student id.<br>

:Required changes in 1 files :<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<pre>
<% if current_user.role.name == "Instructor" or current_user.role.name == "Administrator"%>
<%= form_for :user, url: '/impersonate/impersonate' do |f| %>
<TABLE>
<TR>
<TD><%= f.text_field :name, {:size => 10,:class => 'form-control input-sm', :autocomplete => "off",placeholder: "User ID"} %></TD>
<TD><%= f.submit 'Student View', :class=>"btn btn-primary input-sm"%></TD>
</TR>
</TABLE>
<% end %>
<% end %>
</pre>
* Introduce a Revert to instructor View" on Instructor's Student UI
:Once instructor impersonate to a student view, a Revert button appears which when clicked revert back to instructor view from impersonated student view. Once the student view is loaded by instructor,<code>session[:superuser]</code> is set and based on this flag a revert button will be displayed.<br>

* Time travel in Student View.
:Required changes in 4 files :<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<div class="field">
<%= f.date_field :goto_date, :order => [:month,:day, :year],:value => Date.today %>
</div>
:First, we introduced a date box where you can select a date from the UI.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]<br>
if !params[:impersonate][:goto_date].empty?
User.goto_date=params[:impersonate][:goto_date]
end
:In this controller, we took the value from UI and store the same in User model.<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/user.rb user.rb]<br>
attr_accessible :goto_date
def self.goto_date=(val)
@goto_date=val
end
def self.goto_date
@goto_date
end
:The value from the above controller is stored in Users model object (not instance) as goto_date. Thus you can access this date through out the sessions.<br>
:[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/due_date.rb due_date.rb]<br>

def self.get_next_due_date(assignment_id, topic_id = nil)
(User.goto_date.nil?)? goto_date = Time.now : goto_date = (User.goto_date)
if Assignment.find(assignment_id).staggered_deadline?
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, Time.now]).first
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, goto_date]).first
topic_due_date_size = TopicDueDate.where(parent_id: topic_id).size
following_assignment_due_dates = AssignmentDueDate.where(parent_id: assignment_id)[topic_due_date_size..-1]
following_assignment_due_dates.each do |assignment_due_date|
if assignment_due_date.due_at >= Time.now
if assignment_due_date.due_at >= goto_date
next_due_date = assignment_due_date
break
end
end
end
else
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, Time.now]).first
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, goto_date]).first
end
next_due_date
end

:When ever the system calculates due dates, the time is taken from goto_date that we have stored above in Users model.<br>

==Repository==
[https://github.com/chaitanya91k/expertiza Expertiza Github link]

==Repository==
[https://github.com/chaitanya91k/expertiza Expertiza Github link]

CSC/ECE 517 Fall 2016/E1657. Introduce a Student View for instructors

2016-11-04T22:19:21Z

Kpokhar: /* Introduction */

Note: The pull request will not pass the build.Its not due to our changes but due to some unrelated test failure.
__TOC__

==Background==
[http://expertiza.ncsu.edu/ Expertiza] is a web based open source peer reviewing tool based on [http://rubyonrails.org/ Ruby on Rails] developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University], Raleigh. Students will be able to manage all their project submissions, project teamups, topic selections etc. Few of the notable features include:
* Instructor can control most of the stuff that is related to each course.
* Student can control who he/she wants to team up with etc.
* They can provide feedback to each of the topics.
* Instructor can make use of the various submission phases available.
== Introduction ==
Our project is to introduce a Student view to the instructors.The goal of this project is to provide instructor with a functionality using which an instructor can switch to student view and see how the student view looks like. The instructor will also be able to go to future date and see how student view looks like in future date.

==Project Requirements==
* Introduce a "Student View Button" on Instructors UI to switch to student view.
* Introduce a Revert to instructor View" on Instructor's Student UI
* Time travel in Student View.

==Working==
On the right top, left to the logout button , anyone having access to view as instructor gets a textbox and a button saying "Student View". in-order to view as a student you have to type in the students ID and press '''Student View''' button. You can exactly see what the student's page looks like.
[[File:HomeK6.jpg]]
<br>
If you need to revert back to instructor view you just have to leave the text box empty and press the '''Revert''' button. This takes you to the instructors view again. Else if you need another students view, just type in the students ID and press '''Revert'''.
[[File:HomeK3.jpg]]
<br>
We also have implemented a time travel feature where you can go to a particular date and see what a student see on that day. You can find this feature as soon as you go to a student ID. You have to select a day you need to travel to, type in the student ID and submit. Boom! you got he student view as on the date given.
[[File:HomeK4.jpg]]

==Implementation==
* Introduce a "Switch to Student View Button" on Instructors UI
A 'Student View' button was added in the top right portion of menu-bar for instructor. This button allows instructor to see the student view. This button
is linked to impersonate action of [https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]. The button was simply added in menu-bar view. When the button is clicked, it calls <code>impersonate</code> method in <code>impersonate controller</code> which loads new view as student for provided student id.<br>
Required changes in 1 files :<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
'''''/app/views/shared/_navigation.html'''''
<pre>
<% if current_user.role.name == "Instructor" or current_user.role.name == "Administrator"%>
<%= form_for :user, url: '/impersonate/impersonate' do |f| %>
<TABLE>
<TR>
<TD><%= f.text_field :name, {:size => 10,:class => 'form-control input-sm', :autocomplete => "off",placeholder: "User ID"} %></TD>
<TD><%= f.submit 'Student View', :class=>"btn btn-primary input-sm"%></TD>
</TR>
</TABLE>
<% end %>
<% end %>
</pre>
* Introduce a Revert to instructor View" on Instructor's Student UI
Once instructor impersonate to a student view, a Revert button appears which when clicked revert back to instructor view from impersonated student view. Once the student view is loaded by instructor,<code>session[:superuser]</code> is set and based on this flag a revert button will be displayed.<br>

* Time travel in Student View.
Required changes in 4 files :<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<div class="field">
<%= f.date_field :goto_date, :order => [:month,:day, :year],:value => Date.today %>
</div>
First, we introduced a date box where you can select a date from the UI.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]<br>
if !params[:impersonate][:goto_date].empty?
User.goto_date=params[:impersonate][:goto_date]
end
In this controller, we took the value from UI and store the same in User model.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/user.rb user.rb]<br>
class User < ActiveRecord::Base
attr_accessible :goto_date
def self.goto_date=(val)
@goto_date=val
end
def self.goto_date
@goto_date
end
The value from the above controller is stored in Users model object (not instance) as goto_date. Thus you can access this date through out the sessions.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/due_date.rb due_date.rb]<br>

def self.get_next_due_date(assignment_id, topic_id = nil)
(User.goto_date.nil?)? goto_date = Time.now : goto_date = (User.goto_date)
if Assignment.find(assignment_id).staggered_deadline?
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, Time.now]).first
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, goto_date]).first
topic_due_date_size = TopicDueDate.where(parent_id: topic_id).size
following_assignment_due_dates = AssignmentDueDate.where(parent_id: assignment_id)[topic_due_date_size..-1]
following_assignment_due_dates.each do |assignment_due_date|
if assignment_due_date.due_at >= Time.now
if assignment_due_date.due_at >= goto_date
next_due_date = assignment_due_date
break
end
end
end
else
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, Time.now]).first
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, goto_date]).first
end
next_due_date
end

When ever the system calculates due dates, the time is taken from goto_date that we have stored above in Users model.<br>

==Repository==
[https://github.com/chaitanya91k/expertiza Expertiza Github link]

CSC/ECE 517 Fall 2016/E1657. Introduce a Student View for instructors

2016-11-04T22:19:06Z

Kpokhar: /* Project Requirements */

Note: The pull request will not pass the build.Its not due to our changes but due to some unrelated test failure.
__TOC__

==Background==
[http://expertiza.ncsu.edu/ Expertiza] is a web based open source peer reviewing tool based on [http://rubyonrails.org/ Ruby on Rails] developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University], Raleigh. Students will be able to manage all their project submissions, project teamups, topic selections etc. Few of the notable features include:
* Instructor can control most of the stuff that is related to each course.
* Student can control who he/she wants to team up with etc.
* They can provide feedback to each of the topics.
* Instructor can make use of the various submission phases available.
== Introduction ==
Our project is to introduce a Student view to the instructors.
==Project Requirements==
* Introduce a "Student View Button" on Instructors UI to switch to student view.
* Introduce a Revert to instructor View" on Instructor's Student UI
* Time travel in Student View.

==Working==
On the right top, left to the logout button , anyone having access to view as instructor gets a textbox and a button saying "Student View". in-order to view as a student you have to type in the students ID and press '''Student View''' button. You can exactly see what the student's page looks like.
[[File:HomeK6.jpg]]
<br>
If you need to revert back to instructor view you just have to leave the text box empty and press the '''Revert''' button. This takes you to the instructors view again. Else if you need another students view, just type in the students ID and press '''Revert'''.
[[File:HomeK3.jpg]]
<br>
We also have implemented a time travel feature where you can go to a particular date and see what a student see on that day. You can find this feature as soon as you go to a student ID. You have to select a day you need to travel to, type in the student ID and submit. Boom! you got he student view as on the date given.
[[File:HomeK4.jpg]]

==Implementation==
* Introduce a "Switch to Student View Button" on Instructors UI
A 'Student View' button was added in the top right portion of menu-bar for instructor. This button allows instructor to see the student view. This button
is linked to impersonate action of [https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]. The button was simply added in menu-bar view. When the button is clicked, it calls <code>impersonate</code> method in <code>impersonate controller</code> which loads new view as student for provided student id.<br>
Required changes in 1 files :<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
'''''/app/views/shared/_navigation.html'''''
<pre>
<% if current_user.role.name == "Instructor" or current_user.role.name == "Administrator"%>
<%= form_for :user, url: '/impersonate/impersonate' do |f| %>
<TABLE>
<TR>
<TD><%= f.text_field :name, {:size => 10,:class => 'form-control input-sm', :autocomplete => "off",placeholder: "User ID"} %></TD>
<TD><%= f.submit 'Student View', :class=>"btn btn-primary input-sm"%></TD>
</TR>
</TABLE>
<% end %>
<% end %>
</pre>
* Introduce a Revert to instructor View" on Instructor's Student UI
Once instructor impersonate to a student view, a Revert button appears which when clicked revert back to instructor view from impersonated student view. Once the student view is loaded by instructor,<code>session[:superuser]</code> is set and based on this flag a revert button will be displayed.<br>

* Time travel in Student View.
Required changes in 4 files :<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
<div class="field">
<%= f.date_field :goto_date, :order => [:month,:day, :year],:value => Date.today %>
</div>
First, we introduced a date box where you can select a date from the UI.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]<br>
if !params[:impersonate][:goto_date].empty?
User.goto_date=params[:impersonate][:goto_date]
end
In this controller, we took the value from UI and store the same in User model.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/user.rb user.rb]<br>
class User < ActiveRecord::Base
attr_accessible :goto_date
def self.goto_date=(val)
@goto_date=val
end
def self.goto_date
@goto_date
end
The value from the above controller is stored in Users model object (not instance) as goto_date. Thus you can access this date through out the sessions.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/due_date.rb due_date.rb]<br>

def self.get_next_due_date(assignment_id, topic_id = nil)
(User.goto_date.nil?)? goto_date = Time.now : goto_date = (User.goto_date)
if Assignment.find(assignment_id).staggered_deadline?
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, Time.now]).first
next_due_date = TopicDueDate.where(['parent_id = ? and due_at >= ?', topic_id, goto_date]).first
topic_due_date_size = TopicDueDate.where(parent_id: topic_id).size
following_assignment_due_dates = AssignmentDueDate.where(parent_id: assignment_id)[topic_due_date_size..-1]
following_assignment_due_dates.each do |assignment_due_date|
if assignment_due_date.due_at >= Time.now
if assignment_due_date.due_at >= goto_date
next_due_date = assignment_due_date
break
end
end
end
else
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, Time.now]).first
next_due_date = AssignmentDueDate.where(['parent_id = ? && due_at >= ?', assignment_id, goto_date]).first
end
next_due_date
end

When ever the system calculates due dates, the time is taken from goto_date that we have stored above in Users model.<br>

==Repository==
[https://github.com/chaitanya91k/expertiza Expertiza Github link]

CSC/ECE 517 Fall 2016/E1657. Introduce a Student View for instructors

2016-11-04T22:14:54Z

Kpokhar: /* Working */

Note: The pull request will not pass the build.Its not due to our changes but due to some unrelated test failure.
__TOC__

==Background==
[http://expertiza.ncsu.edu/ Expertiza] is a web based open source peer reviewing tool based on [http://rubyonrails.org/ Ruby on Rails] developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University], Raleigh. Students will be able to manage all their project submissions, project teamups, topic selections etc. Few of the notable features include:
* Instructor can control most of the stuff that is related to each course.
* Student can control who he/she wants to team up with etc.
* They can provide feedback to each of the topics.
* Instructor can make use of the various submission phases available.
== Introduction ==
Our project is to introduce a Student view to the instructors.
==Project Requirements==
* Introduce a "Student View Button" on Instructors UI to switch to student view.
* Introduce a Revert to instructor View" on Instructor's Student UI
* Time travel in Student View.
<br> The goal of this project is to provide instructor with a functionality using which an instructor can switch to student view and see how the student view looks like. The instructor will also be able to go to future date and see how student view looks like in future date.

==Working==
On the right top, left to the logout button , anyone having access to view as instructor gets a textbox and a button saying "Student View". in-order to view as a student you have to type in the students ID and press '''Student View''' button. You can exactly see what the student's page looks like.
[[File:HomeK6.jpg]]
<br>
If you need to revert back to instructor view you just have to leave the text box empty and press the '''Revert''' button. This takes you to the instructors view again. Else if you need another students view, just type in the students ID and press '''Revert'''.
[[File:HomeK3.jpg]]
<br>
We also have implemented a time travel feature where you can go to a particular date and see what a student see on that day. You can find this feature as soon as you go to a student ID. You have to select a day you need to travel to, type in the student ID and submit. Boom! you got he student view as on the date given.
[[File:HomeK4.jpg]]

==Implementation==
* Introduce a "Switch to Student View Button" on Instructors UI
A 'Student View' button was added in the top right portion of menu-bar for instructor. This button allows instructor to see the student view. This button
is linked to impersonate action of [https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]. The button was simply added in menu-bar view. When the button is clicked, it calls <code>impersonate</code> method in <code>impersonate controller</code> which loads new view as student for provided student id.<br>
Required changes in 1 files :<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
'''''/app/views/shared/_navigation.html'''''
<% if current_user.role.name == "Instructor" or current_user.role.name == "Administrator"%>
<%= form_for :user, url: '/impersonate/impersonate' do |f| %>
<TABLE>
<TR>
<TD><%= f.text_field :name, {:size => 10,:class => 'form-control input-sm', :autocomplete => "off",placeholder: "User ID"} %></TD>
<TD><%= f.submit 'Student View', :class=>"btn btn-primary input-sm"%></TD>
</TR>
</TABLE>
<% end %>
<% end %>

* Introduce a Revert to instructor View" on Instructor's Student UI
Once instructor impersonate to a student view, a Revert button appears which when clicked revert back to instructor view from impersonated student view. Once the student view is loaded by instructor,<code>session[:superuser]</code> is set and based on this flag a revert button will be displayed.<br>

* Time travel in Student View.
Required changes in 4 files :<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
First, we introduced a date box where you can select a date from the UI.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]<br>
In this controller, we took the value from UI and store the same in User model.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/user.rb user.rb]<br>
The value from the above controller is stored in Users model object (not instance) as goto_date. Thus you can access this date through out the sessions.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/due_date.rb due_date.rb]<br>
When ever the system calculates due dates, the time is taken from goto_date that we have stored above in Users model.<br>

==Repository==
[https://github.com/chaitanya91k/expertiza Expertiza Github link]

CSC/ECE 517 Fall 2016/E1657. Introduce a Student View for instructors

2016-11-04T22:14:14Z

Kpokhar: /* Working */

Note: The pull request will not pass the build.Its not due to our changes but due to some unrelated test failure.
__TOC__

==Background==
[http://expertiza.ncsu.edu/ Expertiza] is a web based open source peer reviewing tool based on [http://rubyonrails.org/ Ruby on Rails] developed and maintained by current and past students of [https://en.wikipedia.org/wiki/North_Carolina_State_University North Carolina State University], Raleigh. Students will be able to manage all their project submissions, project teamups, topic selections etc. Few of the notable features include:
* Instructor can control most of the stuff that is related to each course.
* Student can control who he/she wants to team up with etc.
* They can provide feedback to each of the topics.
* Instructor can make use of the various submission phases available.
== Introduction ==
Our project is to introduce a Student view to the instructors.
==Project Requirements==
* Introduce a "Student View Button" on Instructors UI to switch to student view.
* Introduce a Revert to instructor View" on Instructor's Student UI
* Time travel in Student View.
<br> The goal of this project is to provide instructor with a functionality using which an instructor can switch to student view and see how the student view looks like. The instructor will also be able to go to future date and see how student view looks like in future date.

==Working==
On the right top, left to the logout button , anyone having access to view as instructor gets a textbox and a button saying "Student View". in-order to view as a student you have to type in the students ID and press ''Student View'' button. You can exactly see what the student's page looks like.
[[File:HomeK6.jpg]]
<br>
If you need to revert back to instructor view you just have to leave the text box empty and press the ''revert'' button. This takes you to the instructors view again. Else if you need another students view, just type in the students ID and press ''revert''.
[[File:HomeK3.jpg]]
<br>
We also have implemented a time travel feature where you can go to a particular date and see what a student see on that day. You can find this feature as soon as you go to a student ID. You have to select a day you need to travel to, type in the student ID and submit. Boom! you got he student view as on the date given.
[[File:HomeK4.jpg]]

==Implementation==
* Introduce a "Switch to Student View Button" on Instructors UI
A 'Student View' button was added in the top right portion of menu-bar for instructor. This button allows instructor to see the student view. This button
is linked to impersonate action of [https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]. The button was simply added in menu-bar view. When the button is clicked, it calls <code>impersonate</code> method in <code>impersonate controller</code> which loads new view as student for provided student id.<br>
Required changes in 1 files :<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
'''''/app/views/shared/_navigation.html'''''
<% if current_user.role.name == "Instructor" or current_user.role.name == "Administrator"%>
<%= form_for :user, url: '/impersonate/impersonate' do |f| %>
<TABLE>
<TR>
<TD><%= f.text_field :name, {:size => 10,:class => 'form-control input-sm', :autocomplete => "off",placeholder: "User ID"} %></TD>
<TD><%= f.submit 'Student View', :class=>"btn btn-primary input-sm"%></TD>
</TR>
</TABLE>
<% end %>
<% end %>

* Introduce a Revert to instructor View" on Instructor's Student UI
Once instructor impersonate to a student view, a Revert button appears which when clicked revert back to instructor view from impersonated student view. Once the student view is loaded by instructor,<code>session[:superuser]</code> is set and based on this flag a revert button will be displayed.<br>

* Time travel in Student View.
Required changes in 4 files :<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/views/shared/_navigation.html.erb navigation.html]<br>
First, we introduced a date box where you can select a date from the UI.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/controllers/impersonate_controller.rb Impersonate_controller]<br>
In this controller, we took the value from UI and store the same in User model.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/user.rb user.rb]<br>
The value from the above controller is stored in Users model object (not instance) as goto_date. Thus you can access this date through out the sessions.<br>
[https://github.com/chaitanya91k/expertiza/blob/93a9cd0a77a40383e26e90784d368e5d236ad74e/app/models/due_date.rb due_date.rb]<br>
When ever the system calculates due dates, the time is taken from goto_date that we have stored above in Users model.<br>

==Repository==
[https://github.com/chaitanya91k/expertiza Expertiza Github link]