CSC/ECE 517 Fall 2020 - E2071. Improve assessment360 controller.rb: Difference between revisions

From Expertiza_Wiki
Jump to navigation Jump to search
No edit summary
 
(31 intermediate revisions by 2 users not shown)
Line 5: Line 5:
=='''Problem Statement'''==
=='''Problem Statement'''==
As an instructor, you are able to view tables with information on student performance across the various courses they are taking and their assignments. Currently, these tables always show the same information and you are not able to specify if you only want to see certain data. Furthermore, the source code has some variables names that are not clear to what their purpose is in the code.
As an instructor, you are able to view tables with information on student performance across the various courses they are taking and their assignments. Currently, these tables always show the same information and you are not able to specify if you only want to see certain data. Furthermore, the source code has some variables names that are not clear to what their purpose is in the code.
===To fix the problem:===
===To fix the problem:===
1.There should be a dialog that appears before navigating to the pages where the table views are that contain a list of checkboxes to allow the user to choose which columns they would like to see.
1.There should be a dialog that appears before navigating to the pages where the table views are that contain a list of checkboxes to allow the user to choose which columns they would like to see.
====Course Grade Summary====
====Course Grade Summary====
Selectable columns:
Selectable columns:
Instructor Assigned Scores
*Instructor Assigned Scores
Peer Grades
*Peer Grades
Topics
*Topics
====View Aggregated Teammates and Meta Reviews====
Selectable columns:
*Teammate Review Scores
*Meta Review Scores
*Number Of Teammates


=='''Solution'''==


2.Variable names that are unclear should be refactored in the code to names that help readers understand their purpose.
===1.Modify View===
File: app/views/tree_display/_dialog.html.erb


3.There should be a button/link alongside “delete selected topics” by the name “Select all” so that a user can select all and delete them in one go after clicking on “delete selected topics”.
This file is a ruby view partial that contains the html for the checkbox dialogs.


=='''How to manually test our function'''==
<pre>
1. Beside "Home", click "Manage...", then click "Assignments".
<div id="dialog_course_summary" title="Select Columns" hidden="true">
    <%= form_tag('/assessment360/course_student_grade_summary', method: :get) do %>
        <div class="form-group row" style="margin-bottom: 0px !important;">
            <%= label_tag('InstructorAssignedScores', "Instuctor Assigned Scores") %>
            <%= check_box_tag 'fields[]', 'InstructorAssignedScores'%>
        </div>
        <div class="form-group row" style="margin-bottom: 0px !important;">
            <%= label_tag('PeerGrades', "Peer Grades") %>
            <%= check_box_tag 'fields[]', 'PeerGrades'%>
        </div>
        <div class="form-group row" style="margin-bottom: 0px !important;">
            <%= label_tag('Topics', "Topics") %>
            <%= check_box_tag 'fields[]', 'Topics'%>
        </div>
        <%= hidden_field_tag('course_id', '', :id => 'course_summary_course_id')%>
        <%= submit_tag("Submit") %>
        <button type="button" id='closeCourseSummaryDialog'>Close</button>
    <% end %>
</div>
<div id="dialog" title="Select Columns" hidden="true">
    <%= form_tag('/assessment360/all_students_all_reviews', method: :get) do %>
        <div class="form-group row" style="margin-bottom: 0px !important;">
            <%= label_tag('TeammateReviewScores', "Teammate Review Scores") %>
            <%= check_box_tag 'fields[]', 'TeammateReviewScores'%>
        </div>
        <div class="form-group row" style="margin-bottom: 0px !important;">
            <%= label_tag('MetaReviewScores', "Meta-Review Scores") %>
            <%= check_box_tag 'fields[]', 'MetaReviewScores'%>
        </div>
        <div class="form-group row" style="margin-bottom: 0px !important;">
            <%= label_tag('NumberOfTeammates', "Number Of Teammates") %>
            <%= check_box_tag 'fields[]', 'NumberOfTeammates'%>
        </div>
        <%= hidden_field_tag 'course_id'%>
        <%= submit_tag("Submit") %>
        <button type="button" id='closeDialog'>Close</button>
    <% end %>
</div>
</pre>


2. Choose an Assignment (  Final project (and design doc) is recommended).Then click "Edit" below Actions.


3. Click "Topic" tab.
File: app/assets/javascripts/tree_display.jsx


4. Create some topics by click "New topic" on the bottom line.
Added functions to toggle dialog.
<pre>
 
  if (document.getElementById('closeDialog')) {
    document.getElementById('closeDialog').onclick = () => {jQuery('#dialog').dialog('close')};
  }
  if (document.getElementById('closeCourseSummaryDialog')) {
    document.getElementById('closeCourseSummaryDialog').onclick = () => {jQuery('#dialog_course_summary').dialog('close')};
  }


5. Select them and click "Delete selected topics". Then click "Yes". (It may take a while!)


6. Then you shall see they are deleted. (For some reason we don't know, it failed when editing a staggered deadline assignment.)
  toggleModal: function() {
    jQuery( "#dialog" ).dialog();
    document.getElementById('course_id').value = parseInt(this.props.id/2).toString();
  }
  toggleCourseSummaryModal: function() {
    jQuery( "#dialog_course_summary" ).dialog();
    document.getElementById('course_summary_course_id').value = parseInt(this.props.id/2).toString();
  }


</pre>


=='''Solution'''==
Added buttons to replace links that trigged dialog popups.
 
===1.Modify view===
File: app/views/sign_up_sheet/_add_topics.html.erb


Add bottoms of 'Delete select topics' and 'Select All'
We have also written a custom function 'deleteTopics' inside of <script> tag. This will collect all the topic id that we select via the checkbox and will send it to the sign_up_sheet controller for further processing.
<pre>
<pre>
  <input type="button" value="Delete selected topics" onclick="deleteTopics()" />|
    <input id='select_all' type="checkbox" onClick="selectAll(this)" />Select All |


<button title="View grade summary by student" onClick={this.toggleCourseSummaryModal}
style={{"padding": "0px", "margin": "0px", "border": "0px", "width": "24px", "height": "24px", "top": "8px"}} >
  <img src="/assets/tree_view/360-dashboard-24.png" />
</button>


<button title="View aggregated teammate & meta reviews" onClick={this.toggleModal}
style={{"padding": "0px", "margin": "0px", "border": "0px", "width": "24px", "height": "24px", "top": "8px"}} >
  <span style={{"fontSize": "22px", "top": "8px"}} className="glyphicon glyphicon-list-alt"></span>
</button>


<script>
</pre>
    function deleteTopics() {
        var msg = 'Are you sure? It will delete all selected topics';
        if (confirm(msg)) {
            var topic_identifiers = []
            $("#topics input[type=checkbox]:checked").each(function() {
                var topic_id = $(this).closest('tr').find('#topic_id').text();
                topic_identifiers.push(topic_id);


            });
            jQuery.ajax({
                url: '/sign_up_sheet/delete_all_selected_topics',
                method: 'POST',
                data: {
                    topic_ids: topic_identifiers,
                    assignment_id: <%= @assignment.id %> 
                },
                success: function() {
                    location.reload();
                }
            });
        } else {
            window.location.href = '<%= edit_assignment_path(@assignment.id) + "#tabs-2" %>';
        }
    }
</script>
</pre>


File: app/views/assessment360/all_students_all_reviews.html.erb, app/views/assessment360/course_student_grade_summary.html.erb


File: app/views/sign_up_sheet/_table_header.html.erb
Added conditionals to show selected columns for the html tables


Add 'Select' and 'Topic ID' header
<pre>
<pre>
    
   <% if @show_meta_reviews%><% total_meta_review_count = @overall_meta_review_count.inject(0) {|sum, (k, v)| sum + v } %><%end%>
   <th width="5%">Topic ID</th>
   <% if @show_meta_reviews%><td><%= "#{total_meta_review_grade / total_meta_review_count}%" %></td> <%end%>
   <th width="5%">Select</th>
  <% if @show_teammate_reviews%><% total_teammate_review_grade = @overall_teammate_review_grades.inject(0) {|sum, (k, v)| sum + v } %><%end%>
 
   <% if @show_teammate_reviews%><% total_teammate_review_count = @overall_teammate_review_count.inject(0) {|sum, (k, v)| sum + v } %><%end%>
  <% if @show_teammate_reviews%> <td><%= "#{total_teammate_review_grade / total_teammate_review_count}%" %></td> <%end%>
</pre>
</pre>


File: app/views/sign_up_sheet/_add_signup_topics.html.erb
===2.Modify Controller===
 
File: app/controllers/assessment360_controller.rb
We have changed one line of code in this file to add the 'id' parameter in the table tag


Added Variables to check if corresponding columns should be shown.
<pre>
<pre>
 
    fields = params[:fields]
  <table class="table table-striped" id="topics">
    @show_meta_reviews = fields.include? 'MetaReviewScores'
 
    @show_teammate_reviews = fields.include? 'TeammateReviewScores'
    @show_teammate_count = fields.include? 'NumberOfTeammates'
    @colspan_count = 2
    if !@show_teammate_reviews
      @colspan_count -= 1
    end
    if !@show_meta_reviews
      @colspan_count -= 1
    end
</pre>
</pre>


===3.'Updated Variable Names===
File: app/controllers/assessment360_controller.rb


Renamed @teamed_count to @total_unique_teammates


File: app/views/sign_up_sheet/_table_line.html.erb
Add selected checkbox
<pre>
<pre>


   <td id='topic_id'><%= topic.topic_identifier %></td>
   @total_unique_teammates = {}
  <td><input id='topic_check' type="checkbox" name="Selected-Box"></td>


</pre>
</pre>


===2.'Select All' function===
====Modify course_student_grade_summary ====
File: app/assets/javascripts/signup.js


selectAll function checks all checkbox of topics in the table.
File: app/controllers/assessment360_controller.rb
<pre>


  function selectAll(source) {
Added ability to calculate average peer review score for each student in a course.
    checkboxes = document.getElementsByName('Selected-Box');
    for (var i = 0, n = checkboxes.length; i < n; i++) {
        checkboxes[i].checked = source.checked;
    }
}


<pre>
  @average_peer_review_score = {}
</pre>
</pre>
===3.'Delete' function===
File: app/controllers/sign_up_sheet_controller.rb
It defines the following functions:
delete_all_selected_topics : This function deletes all the selected topics
load_all_selected_topics : This function loads all the rows ( tuples ) from sign up topics which have the mentioned topic ids.


<pre>
<pre>
 
...
def delete_all_selected_topics
        next if peer_review_score.nil?
    load_all_selected_topics
        next if peer_review_score[:total_score].nil?
    @stopics.each(&:destroy)
        @average_peer_review_score[cp.id] += peer_review_score[:total_score].round(2)
    flash[:success] = "All selected topics have been deleted successfully."
       end
    respond_to do |format|
      if @assignments.count > 0
      format.html { redirect_to edit_assignment_path(params[:assignment_id]) + "#tabs-2"}
        @average_peer_review_score[cp.id] = (@average_peer_review_score[cp.id] / @assignments.count()).round(2)
       format.js {}
      end
    end
  end 
  def load_all_selected_topics
    @stopics = SignUpTopic.where(assignment_id: params[:assignment_id], topic_identifier: params[:topic_ids])
  end
 
</pre>
</pre>


=='''Result'''==


Before navigating to aggregated teammate and meta reviews, a dialog shows to allow the user select which columns they would like to see.


File: config/routes.rb
[[File:Aggregated_teammate_meta_reviews.png|1000px]]


Add url.
<pre>
  post :delete_all_selected_topics
</pre>


=='''Result'''==


We can see that we have a check-box coloumn in the table. We also have a 'Select All' option at the end of the table.
Similarly, before navigating to course grade summary, another dialog shows to allow the user select their columns.


[[File:First_issue.jpg]]
[[File:Course_grade_summary.png|1000px]]


[[File:Two_columns_UI.png|1000px]]


We can select a few topics in the table by clicking on the appropriate check-box
[[File:Dialog_joined_options.png |1000px]]


[[File:Few_selected.jpg]]
== Testing Details==


=== RSpec ===
There was an existing test case for the assesment360 controller. We have added the test scenarios for our implementation of the average_peer_review_grades and all_students_all_reviews_all_grades. We tested url parameters as well as the average score pertaining the peer review of a student.


We can select all topics in the table by clicking on the 'Select All' option
=== How to run the test ===


[[File:All_selected.jpg]]
Following steps needs to be performed to test this code:<br/>
1. cd expertiza <br>
2. rspec spec/controllers/assessment360_controller_spec.rb


== Team Information ==
When we click on the 'Delete Selected Topics' button , we get a popup asking for conformation.
'''Project Mentor:'''
[[File:confirm_msg.jpg]]
<br>Dr. Gehringer


=='''Test'''==
'''Project Members:'''<br>
File: spec/controllers/sign_up_sheet_controller_spec.rb
Javier Sanchez<br>
Jack Macdonald<br>
Andrew Hirasawa<br>


Select assignment  with id '834' and topic with id ['E1732'] as params. Post params to delete_all_selected_topics. Expect success flash with 'All selected topics have been deleted successfully.' and redirect to '/assignments/834/edit#tabs-2'.
== Repository ==
<pre>
[https://github.com/salmonandrew/expertiza GitHub Repo]
  describe '#delete_all_selected_topics' do
    it 'delete_all_selected_topics and redirects to edit assignment page' do
      allow(SignUpTopic).to receive(:find).with(assignment_id: '834',topic_identifier: ['E1732']).and_return(topic)
      params = {assignment_id: 834, idents: ['E1732']}
      post :delete_all_selected_topics, params
      expect(flash[:success]).to eq('All selected topics have been deleted successfully.')
      expect(response).to redirect_to('/assignments/834/edit#tabs-2')
    end
  end
</pre>

Latest revision as of 01:36, 20 October 2020

This wiki page is for the description of E2071. Improve assessment360 controller.

Introduction

The Expertiza project is software to create reusable learning objects through peer review. It also supports team projects, and the submission of almost any document type, including URLs and wiki pages.

Problem Statement

As an instructor, you are able to view tables with information on student performance across the various courses they are taking and their assignments. Currently, these tables always show the same information and you are not able to specify if you only want to see certain data. Furthermore, the source code has some variables names that are not clear to what their purpose is in the code.

To fix the problem:

1.There should be a dialog that appears before navigating to the pages where the table views are that contain a list of checkboxes to allow the user to choose which columns they would like to see.

Course Grade Summary

Selectable columns:

  • Instructor Assigned Scores
  • Peer Grades
  • Topics

View Aggregated Teammates and Meta Reviews

Selectable columns:

  • Teammate Review Scores
  • Meta Review Scores
  • Number Of Teammates

Solution

1.Modify View

File: app/views/tree_display/_dialog.html.erb

This file is a ruby view partial that contains the html for the checkbox dialogs.

<div id="dialog_course_summary" title="Select Columns" hidden="true"> 
    <%= form_tag('/assessment360/course_student_grade_summary', method: :get) do %>
        <div class="form-group row" style="margin-bottom: 0px !important;">
            <%= label_tag('InstructorAssignedScores', "Instuctor Assigned Scores") %>
            <%= check_box_tag 'fields[]', 'InstructorAssignedScores'%>
        </div>
        <div class="form-group row" style="margin-bottom: 0px !important;">
            <%= label_tag('PeerGrades', "Peer Grades") %>
            <%= check_box_tag 'fields[]', 'PeerGrades'%>
        </div>
        <div class="form-group row" style="margin-bottom: 0px !important;">
            <%= label_tag('Topics', "Topics") %>
            <%= check_box_tag 'fields[]', 'Topics'%>
        </div>
        <%= hidden_field_tag('course_id', '', :id => 'course_summary_course_id')%>
        <%= submit_tag("Submit") %>
        <button type="button" id='closeCourseSummaryDialog'>Close</button>
    <% end %>
</div>
<div id="dialog" title="Select Columns" hidden="true"> 
    <%= form_tag('/assessment360/all_students_all_reviews', method: :get) do %>
        <div class="form-group row" style="margin-bottom: 0px !important;">
            <%= label_tag('TeammateReviewScores', "Teammate Review Scores") %>
            <%= check_box_tag 'fields[]', 'TeammateReviewScores'%>
        </div>
        <div class="form-group row" style="margin-bottom: 0px !important;">
            <%= label_tag('MetaReviewScores', "Meta-Review Scores") %>
            <%= check_box_tag 'fields[]', 'MetaReviewScores'%>
        </div>
        <div class="form-group row" style="margin-bottom: 0px !important;">
            <%= label_tag('NumberOfTeammates', "Number Of Teammates") %>
            <%= check_box_tag 'fields[]', 'NumberOfTeammates'%>
        </div>
        <%= hidden_field_tag 'course_id'%>
        <%= submit_tag("Submit") %>
        <button type="button" id='closeDialog'>Close</button>
    <% end %>
</div>


File: app/assets/javascripts/tree_display.jsx

Added functions to toggle dialog.

  
  if (document.getElementById('closeDialog')) {
    document.getElementById('closeDialog').onclick = () => {jQuery('#dialog').dialog('close')};
  }
  if (document.getElementById('closeCourseSummaryDialog')) {
    document.getElementById('closeCourseSummaryDialog').onclick = () => {jQuery('#dialog_course_summary').dialog('close')};
  }


   toggleModal: function() {
     jQuery( "#dialog" ).dialog();
     document.getElementById('course_id').value = parseInt(this.props.id/2).toString();
   }
   toggleCourseSummaryModal: function() {
     jQuery( "#dialog_course_summary" ).dialog();
     document.getElementById('course_summary_course_id').value = parseInt(this.props.id/2).toString();
   }

Added buttons to replace links that trigged dialog popups.


<button title="View grade summary by student" onClick={this.toggleCourseSummaryModal} 
style={{"padding": "0px", "margin": "0px", "border": "0px", "width": "24px", "height": "24px", "top": "8px"}} >
  <img src="/assets/tree_view/360-dashboard-24.png" />
</button>

<button title="View aggregated teammate & meta reviews" onClick={this.toggleModal} 
style={{"padding": "0px", "margin": "0px", "border": "0px", "width": "24px", "height": "24px", "top": "8px"}} >
  <span style={{"fontSize": "22px", "top": "8px"}} className="glyphicon glyphicon-list-alt"></span>
</button>


File: app/views/assessment360/all_students_all_reviews.html.erb, app/views/assessment360/course_student_grade_summary.html.erb

Added conditionals to show selected columns for the html tables

  <% if @show_meta_reviews%><% total_meta_review_count = @overall_meta_review_count.inject(0) {|sum, (k, v)| sum + v } %><%end%>
  <% if @show_meta_reviews%><td><%= "#{total_meta_review_grade / total_meta_review_count}%" %></td> <%end%>
  <% if @show_teammate_reviews%><% total_teammate_review_grade = @overall_teammate_review_grades.inject(0) {|sum, (k, v)| sum + v } %><%end%>
  <% if @show_teammate_reviews%><% total_teammate_review_count = @overall_teammate_review_count.inject(0) {|sum, (k, v)| sum + v } %><%end%>
  <% if @show_teammate_reviews%> <td><%= "#{total_teammate_review_grade / total_teammate_review_count}%" %></td> <%end%>

2.Modify Controller

File: app/controllers/assessment360_controller.rb

Added Variables to check if corresponding columns should be shown.

    fields = params[:fields]
    @show_meta_reviews = fields.include? 'MetaReviewScores'
    @show_teammate_reviews = fields.include? 'TeammateReviewScores'
    @show_teammate_count = fields.include? 'NumberOfTeammates'
    @colspan_count = 2
    if !@show_teammate_reviews
      @colspan_count -= 1
    end
    if !@show_meta_reviews
      @colspan_count -= 1
    end

3.'Updated Variable Names

File: app/controllers/assessment360_controller.rb

Renamed @teamed_count to @total_unique_teammates


  @total_unique_teammates = {}

Modify course_student_grade_summary

File: app/controllers/assessment360_controller.rb

Added ability to calculate average peer review score for each student in a course.

   @average_peer_review_score = {}
...
        next if peer_review_score.nil? 
        next if peer_review_score[:total_score].nil?
        @average_peer_review_score[cp.id] += peer_review_score[:total_score].round(2)
      end
      if @assignments.count > 0
        @average_peer_review_score[cp.id] = (@average_peer_review_score[cp.id] / @assignments.count()).round(2)
      end

Result

Before navigating to aggregated teammate and meta reviews, a dialog shows to allow the user select which columns they would like to see.


Similarly, before navigating to course grade summary, another dialog shows to allow the user select their columns.

Testing Details

RSpec

There was an existing test case for the assesment360 controller. We have added the test scenarios for our implementation of the average_peer_review_grades and all_students_all_reviews_all_grades. We tested url parameters as well as the average score pertaining the peer review of a student.

How to run the test

Following steps needs to be performed to test this code:
1. cd expertiza
2. rspec spec/controllers/assessment360_controller_spec.rb

Team Information

Project Mentor:
Dr. Gehringer

Project Members:
Javier Sanchez
Jack Macdonald
Andrew Hirasawa

Repository

GitHub Repo