E1929 Visualizations for Instructors: Difference between revisions

From Expertiza_Wiki
Jump to navigation Jump to search
No edit summary
 
(42 intermediate revisions by 3 users not shown)
Line 10: Line 10:


__TOC__
__TOC__


== Problem Statement ==
== Problem Statement ==
Line 21: Line 22:
=== Old Charts ===
=== Old Charts ===
[[File:Existing_Assignment_Grades_Wed.png|frame|centre|'''Figure 1: Existing assignment grade charts - '''The existing assignment grade charts show the average grade for the assignment and the grade distribution. During this project, we aimed to add a third chart which shows the distribution for specific rubric criteria within the assignment.]]
[[File:Existing_Assignment_Grades_Wed.png|frame|centre|'''Figure 1: Existing assignment grade charts - '''The existing assignment grade charts show the average grade for the assignment and the grade distribution. During this project, we aimed to add a third chart which shows the distribution for specific rubric criteria within the assignment.]]


== Accomplished ==
== Accomplished ==


=== Executed on Plans ===
=== Executed on Plans ===
We successfully executed all of the ideas we had during the planning phase:
* Add new feature to show mean and median data for rubric criteria in a given assignment
* Add new feature to show comparison
* Performed UI testing to ensure features were operational, including edge cases
* Added and ran RSpec and Capybara automated tests


=== New Charts Inserted ===
=== New Charts Inserted ===
Line 31: Line 39:


[[File:CompareAssignmentsWed.png|frame|centre|'''Figure 3: New Rubric Cross-Assignment Comparison Visualization - '''The instructor can see a comparison between selected criteria between the current assignment and the selected assignment. The rubric criteria must be compatible in order for it to even show up in the selection list. This comparison visualization is done on the "Compare Assignments" tab which must be selected after the "View Scores" page has been loaded.]]
[[File:CompareAssignmentsWed.png|frame|centre|'''Figure 3: New Rubric Cross-Assignment Comparison Visualization - '''The instructor can see a comparison between selected criteria between the current assignment and the selected assignment. The rubric criteria must be compatible in order for it to even show up in the selection list. This comparison visualization is done on the "Compare Assignments" tab which must be selected after the "View Scores" page has been loaded.]]


=== Extra Issues Fixed ===
=== Extra Issues Fixed ===


* Refactored [https://github.com/gshugh/expertiza/blob/OSS-HW4/app/views/grades/_team_charts.html.erb _team_charts.html.erb] partial view to use partials for each graphic. Previously both charts were defined together in _team_charts.html.erb, but now each graphic has its own partial view ([https://github.com/gshugh/expertiza/blob/OSS-HW4/app/views/grades/_team_charts_averages.html.erb _team_charts_averages.html.erb], [https://github.com/gshugh/expertiza/blob/OSS-HW4/app/views/grades/_team_charts_distribution.html.erb _team_charts_distribution.html.erb], [https://github.com/gshugh/expertiza/blob/OSS-HW4/app/views/grades/_team_charts_rubric_stats.html.erb _team_charts_rubric_stats.html.erb]). This allows more flexibility going forward, if it's decided one chart should move to a new place on the page, or to a new page.
* Refactored [https://github.com/gshugh/expertiza/blob/OSS-HW4/app/views/grades/_team_charts.html.erb _team_charts.html.erb] partial view to use partials for each graphic. Previously both charts were defined together in _team_charts.html.erb, but now each graphic has its own partial view ([https://github.com/gshugh/expertiza/blob/OSS-HW4/app/views/grades/_team_charts_averages.html.erb _team_charts_averages.html.erb], [https://github.com/gshugh/expertiza/blob/OSS-HW4/app/views/grades/_team_charts_distribution.html.erb _team_charts_distribution.html.erb], [https://github.com/gshugh/expertiza/blob/OSS-HW4/app/views/grades/_team_charts_rubric_stats.html.erb _team_charts_rubric_stats.html.erb]). This allows more flexibility going forward, if it's decided one chart should move to a new place on the page, or to a new page.
* Updated [https://github.com/gshugh/expertiza/blob/OSS-HW4/app/views/grades/_team_charts.html.erb _team_charts.html.erb] so the "Hide stats" button on the View Scores page properly changes to "Show stats" when the statistic charts are hidden.
 
 
=== Code Changes ===
[https://github.com/expertiza/expertiza/pull/1440/files Files Added/Modified]
 
Added: 10 + Modified: 11 = Total: 21
 
* app/assets/javascripts/rubric_stats.js '''(new)'''
* app/controllers/grades_controller.rb
* app/helpers/assignment_stats_helper.rb '''(new)'''
* app/models/assignment.rb
* app/models/assignment_questionnaire.rb
* app/models/assignment_stats.rb '''(new)'''
* app/models/criterion_stats.rb '''(new)'''
* app/models/question.rb
* app/models/questionnaire.rb
* app/models/review_round_stats.rb '''(new)'''
* app/models/score_view.rb
* app/views/grades/_team_charts.html.erb
* app/views/grades/_team_charts_averages.html.erb '''(new)'''
* app/views/grades/_team_charts_distribution.html.erb '''(new)'''
* app/views/grades/_team_charts_rubric_stats.html.erb '''(new)'''
* spec/controllers/grades_controller_spec.rb
* spec/factories/factories.rb
* spec/features/grade_interface_spec.rb '''(new)'''
* spec/features/helpers/grade_interface_helper.rb '''(new)'''
* spec/models/assignment_spec.rb
* spec/models/questionnaire_spec.rb
 


== Testing ==
== Testing ==
Line 41: Line 78:


=== RSpec Framework Tests ===
=== RSpec Framework Tests ===
The RSpec Testing Framework, automated testing, was used to verify the models of the Expertiza web application feature set. Since this feature is dealing with visualizations (charts) that are intimately tied with Active Record models, we seeded the testing database with known data via RSpec. These changes were automatically rolled-back once the testing was complete.
The RSpec Testing Framework, automated testing, was used to verify the models of the Expertiza web application feature set. Since this feature is dealing with visualizations (charts) that are intimately tied with Active Record models, we seeded the testing database with known data via FactoryBot gem. These changes were automatically rolled-back once the testing was complete.
 
RSpec was used to increase/maintain automated test coverage for the methods that we added into assignment and questionnaire models. Mocks and stubs were utilized in order to decouple the model under test from dependencies of other models. This will allow us to identify easily if our model updates are causing an issue.


=== Capybara Tests ===
=== Capybara Tests ===
Another automated testing framework that was used is Capybara. Capybara is a browser type test to simulate a user clicking through your site. We used this testing framework to verify that our charting object was present on the page and contained the seeded data that we had loaded.
RSpec Capybara was used to provide integration testing of the charts. The Test Database was seeded with the appropriate information for executing the results of the charts. An additional GEM was needed, webdrivers, to utilize the predefined drivers of Selenium. The default web driver, Rack-Test, does not execute java scripts. Since the graphs that we are using require java script, thus soliciting the necessity of Selenium with its predefined web driver, selenium_chrome_headless. This provides the required functionality to process the java scripts and to automatically ensure that they exist in the DOM.
 
In order to use the headless web driver with the seeded Test Database, a different database strategy was required. As a result, for this test only, the database strategy was changed to truncation. Ruby 2.2.7 is used in the current version of Expertiza. This version does not allow for sharing of the database thread, and thus requires the to be written to the database outside of a transaction block. This allows for the headless web driver to see that the data is persisted the Test Database and is able to run as normal. Once the test is completed, the database tables are truncated and all data is removed.


=== UI Tests ===
=== UI Tests ===
In addition to the automated tests above we also performed manual testing of the newly added features to include:
In addition to the automated tests above we also performed manual testing of the newly added features to include:


'''SHOULD UPDATE TO SAY WHAT WE ACTUALLY TESTED'''
* The new feature properly initializes
* Chart is displaying correctly
*# Analyze Assignment tab is loaded by default
*# Chart is in between the other two existing charts
*# Round 1, all Criteria selected, and Mean are selected by default
* Analyze Assignment tab operating correctly
*# Bars are showing up where expected
*# Bars are showing up where expected
*# Bar annotations are showing the expected value
*# Bar annotations are showing the expected value
Line 56: Line 100:
*# Hover text is displaying the correct values
*# Hover text is displaying the correct values
*# Null values are not present on the chart
*# Null values are not present on the chart
*# Correct colors are used for the multi-round view
* Show Labels checkbox works as expected
* Round Criteria is displaying correctly
*# Round dropdown menu shows all rounds for the assignment
*# Round dropdown menu shows all rounds for the assignment
*# Selecting a round changes the criteria checkboxes
*# Selecting a round changes the criteria checkboxes
*# All checkboxes are displayed with appropriate text
*# All checkboxes are displayed with appropriate text
*# Checkboxes correctly remove or add criterion bars to the chart
*# Checkboxes correctly remove or add criterion bars to the chart
* Compare Assignments tab operating correctly
*# Compare Assignments tab is only displayed if compatible assignments exist
*# Clicking Compare Assignments tab loads that tab
*# (All tests from Analyze Assignment tab apply to this tab as well)
*# The two colors for assignment comparison are correct
=== Testing Issues ===
Using the Ubuntu image, one issue was discovered was with the ScoreView view. The migration files is building the view out as a table instead of a view as required, this can be seen in the schema file. The Development database shows the ScoreView as a view, but the Test database shows it as an table. It appears that the Development database was altered outside of migrations to force the ScoreView to be a view instead of table. With this scenario, the automated integration testing was forced to seed the ScoreView as a table. Further gems are available to alleviate this issue.


== Shortcomings ==
== Shortcomings ==
* We were unable to find two compatible assignments in the Expertiza test database to fully test our Compare Assignments feature. We did test all the functionality by seeding the database, but it technically wasn't using real data.


== Decisions ==
== Decisions ==
* Placement of _____, ______ code in helper methods rather than in the models or controllers.
1. Put our new chart on the View Scores page, rather than on a new page
* The decision to add the *Stat models
* Since it was able to fit on the existing page while displaying all the necessary info, we figured it'd be beneficial to have all grade statistics charts together.
* The exposure of mean data and median data to the outside world
2. Use GoogleCharts for our new charts
* Encapsulation of the data within the new models
* The group who previously attempted this project chose GoogleCharts because it has a high compatibility and its charts look of similar quality to those already existing in Expertiza. We agreed with this, and determined GoogleCharts had all of the features we would need.
3. Added the AssignmentStats, CriterionStats, and ReviewRoundStats models
* This was a logical, structured way to organize the various data and methods we needed.
4. Encapsulation of the data within the new models
* Since the various statistics we needed to form our chart were stored in multiple models, there would be no good place to put the new methods we'd need. The way we did it promotes cohesion, since the new classes have the sole focus of computing statistics. This also allows for future refactoring of other sporadic statistics methods.
5. Placed AssignmentStats methods in assignment_stats_helper.rb rather than in the model or controller.
* The methods of interest were really not business logic, but more like massaging of data. For that reason it belonged more in the controller than the model. However, to keep things neat and clean in the controller, the methods were moved out to the helper file.
6. The exposure of mean and median as the metric_names in grades_controller.rb
* Since we are explicitly calling the avg_data and med_data methods in the controller, we thought it made sense to name the metric_names nearby, within the controller, rather than hidden off in the helper file.
7. Moved most of the javascript code in _team_charts_rubric_stats.html.erb into app/assets/javascripts/rubric_stats.js. We had to keep our dynamic references of Ruby code in the view.
* This keeps the view more clean and concise. Also, in the previous semester, one of the reasons the team's pull request was rejected was because they had too much javascript code in their views.
 


== Documentation ==
== Documentation ==
Line 76: Line 139:


[https://github.com/gshugh/expertiza/tree/OSS-HW4 GitHub Repo]
[https://github.com/gshugh/expertiza/tree/OSS-HW4 GitHub Repo]
[https://drive.google.com/file/d/1jmOYfbNOlXQObtsK4MoIti-LsjJ_Y88P/view Demo Video]


[https://docs.google.com/document/d/1Ozw2Bj2u_LyeKUdDqAyQtz1stEIKrxkmRnwmNyUgmzw/edit#heading=h.5kwrelqdnewh Problem Statement]
[https://docs.google.com/document/d/1Ozw2Bj2u_LyeKUdDqAyQtz1stEIKrxkmRnwmNyUgmzw/edit#heading=h.5kwrelqdnewh Problem Statement]


== Team ==
== Team ==
* Akshay Ravichandran ('''Mentor''' )
* Akshay Ravichandran '''(Mentor)'''
* Chris Adkins
* Chris Adkins
* Bobby DeMarco
* Bobby DeMarco
* George Hugh
* George Hugh
* John Warren
* John Warren
== old Introduction ==
It is the desire of all instructors to emphasize course material that students have trouble understanding and de-emphasize those aspects of the course material which students readily grasp. One method used by instructors is the creation of questionnaires, or rubrics. A rubric consists of a number of questions, or criterion, that give instructors a glimpse into student understanding of course materials. Use of rubrics and their association with a course assignment allow instructors to fine-tune their lesson plans to their students' understanding.
Creation of assignments, and their associated rubrics, can be a daunting task that can be made easier through the use of online platforms. Expertiza is one such online assignment grading platform. Within Expertiza, instructors create courses and assignments. For each assignment, instructors create one or more peer review rubrics for students to complete. After each round of rubrics, students can submit changes to their assignment based on these rubrics, with each submission and rubric considered a round. Hence, assignments have multiple rounds with each round associated with a rubric.
Instructors use the association between the assignment and the submitted rubric(s) associated with the assignment to understand what subjects need more focus. For example, a low average score on a rubric's particular question, or criterion, can indicate that the class has issues with a particular part of the assignment. Currently, instructors using Expertiza display assignment scores on one pages, but need to visit a completely separate page to display rubric scores. This separation of information hinders the instructor's ability to fully comprehend the associations between the assignment scores and the rubric scores. This, in turn, minimizes the likelihood that instructors will integrate this information to fine-tune their course material.
This project proposes to overcome this weakness in Expertiza by integrating the display of assignment scores and rubric scores onto a single page. This integration will allow instructors to more easily associate low rubric average scores with assignment scores. The ability to visualize assignment scores and rubric scores in a single location will reduce the workload on instructors when the scores. This, in turn, will increase the likelihood that instructors will change their lesson plans to reflect the students' understanding of the course material.
__TOC__
== old Proposed Changes ==
To help instructors understand the relationship between assignment scores and rubric scores, this project proposes two types of visualizations. The first type of visualization allows instructors to examine the rubric statistics for a single assignment. The second type of visualization allows instructors to compare the rubric statistics between two different assignments when the criteria for each assignment is the same.
=== Existing Views ===
In both cases, the project will add rubric statistics to the assignment grade view. The current assignment grade view consists of a header containing grade statistics followed by a table of the individual grades. In the assignment grade view header, the left side fo the header shows the average assignment grade as a circle, while the right side of the assignment grade view header shows the assignment grade distribution. Figure 1 shows the current header in the grade assignment view page.
[[File:Existing_Assignment_Grades.JPG|frame|centre|'''Figure 1: Existing assignment grade page header - '''The existing assignment grade page header has both the average grade for the assignment and the grade distribution for the assignment. The left side shows the average as the percentage of a circle. The right side of the header shows the grade distribution for the assignment. The grade distribution shows the minimum and maximum grade for the assignment. Under the header is a list of the grades for each student.]]
The changes proposed by this project integrate rubric statistics to the above assignment grade view. Rubric statistic integration into the assignment grade view allow two types of visualizations. The first visualization allows the instructor to display rubric statistics within a single assignment. The second visualization allows the instructor to display rubric statistics between different assignments in the same course.
=== Proposed Assignment Grade Visualization ===
This project proposes the integration of rubric statistic visualization for both single assignments and multiple assignments into the assignment grade view. The integration occurs with a single change to the header of the assignment grade view, and retains the list of student grades. The following HTML mock-up shows the proposed changes to the header. The list of student grades is not changed and therefore not shown.
==== Interactive Example ====
  https://jwarren3.github.io/expertiza/tabs.html
The upper part of the rubric statistic visualization displays a set of tabs that allow the instructor to analyze the rubric within a single assignment or to compare the rubric statistics between multiple assignments. The middle part of the rubric statistic visualization displays the statistics for each selected criteria as a bar graph. The heights of the bars are shown as a percentage of the maximum value for each criteria. The bottom part of the rubric statistic visualization displays a set of options that allow the instructor to filter the statistics shown in the bar graph. The left side (assignment average) and right side (assignment distribution) of the assignment grade view header are not changed.
In the integration of the rubric statistic visualization mock-up within a single assignment, there are two rounds of rubrics for the students to fill out. The rubric in round 1 consisted of five criteria, while the rubric in round 2 consisted of 4 criteria. The round of interest is selected using the drop-down menu on the left side. The criteria shown in the bar graph are selected using radio buttons next to each criterion. Finally, the type of statistic shown is selected using a drop-down menu on the right side of the options. Currently, the statistic is limited to either mean or median. Hovering the mouse over each of the bars in the bar graph shows the numerical value of the chosen statistic.
Visualizing the rubric statistics within a single assignment starts by selecting the left tab titled "Analyze Assignment". The default displays the mean of all criteria from the first round. Changing the round, the type of statistic, and the particular criteria are controlled from the drop-down menus and radio buttons below the bar graph.
Visualizing the rubric statistics between assignments starts by selecting the right tab titled "Compare Assignments". The default displays the comparisons between round one and all criteria of an assignment in the same course. The default assignment is the chronologically earliest assignment. The current assignment is shown in red while the rubric being compared is shown in blue.
==== New View Examples ====
[[File:AnalyzeAssignmentNew.png|frame|centre|'''Figure 2: New Rubric Statistic Visualization - '''Added in the center of the existing two charts is an interactive chart the instructor can use to see the mean or median scores for whichever criteria they select. This is done on the "Analyze Assignment" tab, which is selected by default when the "View Scores" page is loaded.]]
[[File:CompareAssignmentsNew.png|frame|centre|'''Figure 3: New Rubric Cross-Assignment Comparison Visualization - '''The instructor can see a comparison between selected criteria between the current assignment and the selected assignment. The rubric criteria must be compatible in order for it to even show up in the selection list. This comparison visualization is done on the "Compare Assignments" tab which must be selected after the "View Scores" page has been loaded.]]
== old Project Design ==
During the integration of rubric statistics and assignment grade statistics, this project expects to change controller files, view files and JavaScript files. For methods that are modified by this project, the team will also ensure that Code Climate (an automated code quality checker) issues are resolved. This project will also refactor changed methods to reflect common Ruby and Rails practices.
=== Proposed Code Changes ===
The amount of methods and files to be changed during the integration of rubric statistics and assignment grade statistics is minimal. The team proposes changing a controller file, a view file, a JavaScript file, and an RSpec files. The team does not expect to change the database nor do we expect to change the model files. Other files will be changed as required to support the integration. A preliminary list of files to be changed is given below:
    [https://github.com/gshugh/expertiza/blob/OSS-HW4/app/controllers/grades_controller.rb grades_controller.rb]
    [https://github.com/gshugh/expertiza/blob/OSS-HW4/app/assets/javascripts/grading.js grading.js]
    [https://github.com/gshugh/expertiza/blob/OSS-HW4/app/views/grades/_participant_charts.html.erb _participant_charts.html.erb]
    [https://github.com/gshugh/expertiza/blob/OSS-HW4/spec/controllers/grades_controller_spec.rb grades_controllers_spec.rb]
=== Design Flow ===
[[File:DesignFlowSingle.png|frame|center|'''Figure 4: Rubric Statistic Design Flow - '''Instructor wants to view student scores on individual rubric criteria.]]
[[File:DesignFlowCompare.png|frame|center|'''Figure 5: Cross-Assignment Comparison Design Flow - '''Instructor wants to compare student scores on individual rubric criteria between two compatible rounds of two different assignments.]]
=== Tools and Design Choices ===
This project proposes using a third party JavaScript library for rendering the rubric statistics. This project proposes two requirements for the visualization library. The first requirement is to use a visualization library that performs client-side rendering. Using a client-side rendering library will minimize the number of server interactions as the instructor changes which rubric statistics to display. This minimization of server interaction will maximize the response time of Expertiza.
The second requirement for the visualization library is compatibility with current Expertiza graphics. The compatibility requirement implies that the visualization library is one that is already being used in Expertiza or a visualization library that could be used to render the current graphics.
Examples of client-side visualization libraries are given below:
    [http://www.highcharts.com/ Highcharts]
    [http://g.raphaeljs.com/ RaphaelJS]
    [http://dygraphs.com/ dygraphs]
    [http://vis.stanford.edu/protovis/ Protovis]
    [http://grafico.kilianvalkhof.com/ Grafico]
    [https://chartkick.com/ ChartKick]
    [http://www.vancharts.com/ VanCharts]
    [https://developers.google.com/chart/ GoogleCharts]
== old Test Plan ==
The team plans to perform automated tests using frameworks RSpec and Capybara. In addition, we will perform manual tests of the user interface (UI), by using the app.
=== RSpec Framework Tests ===
The RSpec Testing Framework, automated testing, will be used to verify the Models of the Expertiza Rails Web application feature set. Since this feature is dealing with Visualizations (charts) that is intimately tied with an Active Record Models, we will seed the Testing Database with known data via RSpec. These changes will be automatically rolled-back once the testing is complete. 
=== Capybara Tests ===
Another automated testing framework that will be used is Capybara. Capybara is an browser type test to simulate a user clicking through your site. We will use this testing framework to verify that our charting object is present on the page and contains the seeded data that we had loaded.
=== UI Tests ===
In addition to the automated tests above we will also perform manual testing of the newly added features to include:
* Chart is displaying correctly
*# Bars are showing up where expected
*# Bar annotations are showing the expected value
*# Criteria labels are for the correct bar and displaying correct values
*# Hover text is displaying the correct values
*# Null values are not present on the chart
*# Correct colors are used for the multi-round view
* Show Labels checkbox works as expected
* Round Criteria is displaying correctly
*# Round dropdown menu shows all rounds for the assignment
*# Selecting a round changes the criteria checkboxes
*# All checkboxes are displayed with appropriate text
*# Checkboxes correctly remove or add criterion bars to the chart

Latest revision as of 03:21, 3 May 2019

Introduction

This Expertiza project, completed in the Spring of 2019, aimed to improve the charts instructors could view to see the grade statistics for a given assignment. Two charts already existed, one showing the grade distribution for all teams, and another simply showing the class average grade. Our goal for this project was to add a third chart, using Google Charts, which would show grade statistics for the various rubric grades within that assignment. The chart is interactive so the user (instructor) can toggle which rubric criteria, and which statistics, to display.


Along with displaying the rubric criteria for a single assignment, we aimed to add a feature which would allow the comparison of compatible rubric grades from two different assignments. Again, this functionality is interactive, allowing the instructor to choose which statistics will be populated in the chart.


By viewing our new visualization of rubric grades, an instructor can better judge which aspects of the course are well-understood, and which may need a bit more attention.



Problem Statement

E1929 - Visualizations for Instructors - Class performance on specific rubrics

An interactive visualization or table that shows how a class performed on selected rubric criteria would be immensely helpful. It would show the instructor what he / she will need to focus more attention on. For example, could you create a graph showing the range and clustering of scores for the 5 main rubric criteria? And, if these same 5 criteria are used in the preliminary and final assignments, it would be nice to be able to compare performance between assignments in a visualization that showed the class results on 3 separate artifacts.

Webpage: login as instructor -> Manage -> Assignments -> View scores


Old Charts

Figure 1: Existing assignment grade charts - The existing assignment grade charts show the average grade for the assignment and the grade distribution. During this project, we aimed to add a third chart which shows the distribution for specific rubric criteria within the assignment.


Accomplished

Executed on Plans

We successfully executed all of the ideas we had during the planning phase:

  • Add new feature to show mean and median data for rubric criteria in a given assignment
  • Add new feature to show comparison
  • Performed UI testing to ensure features were operational, including edge cases
  • Added and ran RSpec and Capybara automated tests


New Charts Inserted

Figure 2: New Rubric Statistic Visualization - Added in the center of the existing two charts is an interactive chart the instructor can use to see the mean or median scores for whichever criteria they select. This is done on the "Analyze Assignment" tab, which is selected by default when the "View Scores" page is loaded.


Figure 3: New Rubric Cross-Assignment Comparison Visualization - The instructor can see a comparison between selected criteria between the current assignment and the selected assignment. The rubric criteria must be compatible in order for it to even show up in the selection list. This comparison visualization is done on the "Compare Assignments" tab which must be selected after the "View Scores" page has been loaded.


Extra Issues Fixed


Code Changes

Files Added/Modified

Added: 10 + Modified: 11 = Total: 21

  • app/assets/javascripts/rubric_stats.js (new)
  • app/controllers/grades_controller.rb
  • app/helpers/assignment_stats_helper.rb (new)
  • app/models/assignment.rb
  • app/models/assignment_questionnaire.rb
  • app/models/assignment_stats.rb (new)
  • app/models/criterion_stats.rb (new)
  • app/models/question.rb
  • app/models/questionnaire.rb
  • app/models/review_round_stats.rb (new)
  • app/models/score_view.rb
  • app/views/grades/_team_charts.html.erb
  • app/views/grades/_team_charts_averages.html.erb (new)
  • app/views/grades/_team_charts_distribution.html.erb (new)
  • app/views/grades/_team_charts_rubric_stats.html.erb (new)
  • spec/controllers/grades_controller_spec.rb
  • spec/factories/factories.rb
  • spec/features/grade_interface_spec.rb (new)
  • spec/features/helpers/grade_interface_helper.rb (new)
  • spec/models/assignment_spec.rb
  • spec/models/questionnaire_spec.rb


Testing

We performed automated tests using RSpec Framework and Capybara. In addition, we performed manual tests of the user interface (UI), by using the app.

RSpec Framework Tests

The RSpec Testing Framework, automated testing, was used to verify the models of the Expertiza web application feature set. Since this feature is dealing with visualizations (charts) that are intimately tied with Active Record models, we seeded the testing database with known data via FactoryBot gem. These changes were automatically rolled-back once the testing was complete.

RSpec was used to increase/maintain automated test coverage for the methods that we added into assignment and questionnaire models. Mocks and stubs were utilized in order to decouple the model under test from dependencies of other models. This will allow us to identify easily if our model updates are causing an issue.

Capybara Tests

RSpec Capybara was used to provide integration testing of the charts. The Test Database was seeded with the appropriate information for executing the results of the charts. An additional GEM was needed, webdrivers, to utilize the predefined drivers of Selenium. The default web driver, Rack-Test, does not execute java scripts. Since the graphs that we are using require java script, thus soliciting the necessity of Selenium with its predefined web driver, selenium_chrome_headless. This provides the required functionality to process the java scripts and to automatically ensure that they exist in the DOM.

In order to use the headless web driver with the seeded Test Database, a different database strategy was required. As a result, for this test only, the database strategy was changed to truncation. Ruby 2.2.7 is used in the current version of Expertiza. This version does not allow for sharing of the database thread, and thus requires the to be written to the database outside of a transaction block. This allows for the headless web driver to see that the data is persisted the Test Database and is able to run as normal. Once the test is completed, the database tables are truncated and all data is removed.

UI Tests

In addition to the automated tests above we also performed manual testing of the newly added features to include:

  • The new feature properly initializes
    1. Analyze Assignment tab is loaded by default
    2. Chart is in between the other two existing charts
    3. Round 1, all Criteria selected, and Mean are selected by default
  • Analyze Assignment tab operating correctly
    1. Bars are showing up where expected
    2. Bar annotations are showing the expected value
    3. Criteria labels are for the correct bar and displaying correct values
    4. Hover text is displaying the correct values
    5. Null values are not present on the chart
    6. Round dropdown menu shows all rounds for the assignment
    7. Selecting a round changes the criteria checkboxes
    8. All checkboxes are displayed with appropriate text
    9. Checkboxes correctly remove or add criterion bars to the chart
  • Compare Assignments tab operating correctly
    1. Compare Assignments tab is only displayed if compatible assignments exist
    2. Clicking Compare Assignments tab loads that tab
    3. (All tests from Analyze Assignment tab apply to this tab as well)
    4. The two colors for assignment comparison are correct

Testing Issues

Using the Ubuntu image, one issue was discovered was with the ScoreView view. The migration files is building the view out as a table instead of a view as required, this can be seen in the schema file. The Development database shows the ScoreView as a view, but the Test database shows it as an table. It appears that the Development database was altered outside of migrations to force the ScoreView to be a view instead of table. With this scenario, the automated integration testing was forced to seed the ScoreView as a table. Further gems are available to alleviate this issue.


Shortcomings

  • We were unable to find two compatible assignments in the Expertiza test database to fully test our Compare Assignments feature. We did test all the functionality by seeding the database, but it technically wasn't using real data.


Decisions

1. Put our new chart on the View Scores page, rather than on a new page

  • Since it was able to fit on the existing page while displaying all the necessary info, we figured it'd be beneficial to have all grade statistics charts together.

2. Use GoogleCharts for our new charts

  • The group who previously attempted this project chose GoogleCharts because it has a high compatibility and its charts look of similar quality to those already existing in Expertiza. We agreed with this, and determined GoogleCharts had all of the features we would need.

3. Added the AssignmentStats, CriterionStats, and ReviewRoundStats models

  • This was a logical, structured way to organize the various data and methods we needed.

4. Encapsulation of the data within the new models

  • Since the various statistics we needed to form our chart were stored in multiple models, there would be no good place to put the new methods we'd need. The way we did it promotes cohesion, since the new classes have the sole focus of computing statistics. This also allows for future refactoring of other sporadic statistics methods.

5. Placed AssignmentStats methods in assignment_stats_helper.rb rather than in the model or controller.

  • The methods of interest were really not business logic, but more like massaging of data. For that reason it belonged more in the controller than the model. However, to keep things neat and clean in the controller, the methods were moved out to the helper file.

6. The exposure of mean and median as the metric_names in grades_controller.rb

  • Since we are explicitly calling the avg_data and med_data methods in the controller, we thought it made sense to name the metric_names nearby, within the controller, rather than hidden off in the helper file.

7. Moved most of the javascript code in _team_charts_rubric_stats.html.erb into app/assets/javascripts/rubric_stats.js. We had to keep our dynamic references of Ruby code in the view.

  • This keeps the view more clean and concise. Also, in the previous semester, one of the reasons the team's pull request was rejected was because they had too much javascript code in their views.


Documentation

Pull Request

GitHub Repo

Demo Video

Problem Statement


Team

  • Akshay Ravichandran (Mentor)
  • Chris Adkins
  • Bobby DeMarco
  • George Hugh
  • John Warren
Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=E1929_Visualizations_for_Instructors&oldid=124828"