Expertiza_Wiki - User contributions [en]

E1859 Visualizations for Instructors

2018-12-07T01:55:33Z

Ntripat: /* Files Involved */

== Introduction ==
Expertiza is an online assignment grading platform. Instructors can create assignments and implement peer reviews for submitted assignments. This project concerns the creation of a system for visualizing student performance on those assignments, primarily as graded in peer reviews. Graphs will be made to show various rubric criteria and the class' performance on the criteria. If the criteria are the same for multiple stages of review, an instructor should be able to compare performance over time or between reviews.

__TOC__

== Project Purpose ==
Our task is to provide an interactive visualization or a table for instructors that shows how their class performed on selected rubric criteria. Such feature would be immensely helpful for instructors as it would assist them to identify what they need to focus more attention on. For example, creating a graph showing the average scores for all or a certain subset of main rubric criteria (questionnaire). If the average score of the class on selected criteria (question) is low means the instructor can emphasize more on the learning materials related to it.

== Proposed Changes ==
The visualizations will be implemented as either a single or stacked bar chart with a bar for each of the selected criteria to be observed. If a single bar, then the height of the bar will be the total class average, but a stacked bar chart may be better to show the percentage of the class that received each score. The changes made to the expertiza project will primarily include HTML/ERB changes to the view files to accommodate the added charts on the page and the necessary javascript to allow responsive design. Brief controller modifications will be made to facilitate database filtering to get the displayed data.

1. On clicking Manage and then on assignments, following page appears.

[[File:S1.JPG]]

2. Click on 'view score' icon of an assignment. The summary report page of the selected assignment comes up.

[[File:A0.jpg]]

3. Following are mockup screens which we wish to create:

a) Instructor would select the round and rubric criteria of the assignment for which he/she wants to view the class performance.

[[File:A1.jpg]]

b) The bar graph of the class performance for those criteria would be displayed.

[[File:Try.jpg]]

== Project Design ==

==== Design Flow ====

The flowchart representing graphical flow of an instructor visiting view scores under assignments is given below:

[[File:A3.png]]

==== Tools and Design Choice ====

We plan to use the lightweight [https://developers.google.com/chart/ Google Charts] library for displaying the chart data on the page, with standard HTML for all of the options and dropdowns for option selection. Google Charts was chosen because of its high compatibility, full option set, and comparable graphical quality to the rest of expertiza while keeping a small JS footprint, which should help prevent slow page responsiveness.

==== Visualization ====

The following graph shows the expected view of the 'view scores' page. The instructor selects a subset of rubric criteria for which he/she wants to know how a class performed. A bar graph of the average score of the class for that subset of criteria would be displayed.

[[File:1859_Chart_Preview.png]]

The above graph shows average score of the class for 5 rubric criteria in Round 1 selected by the instructor. A live demo with randomly generated data can be found on [https://jsfiddle.net/Jereman/5uxqr92y/ JSFiddle]

== Files Involved ==
We plan to work on the files that the previous team were involved with such as controllers of grade and assignment and the view of grade and review_mapping. Hopefully there is only slight controller modifications necessary, as the chart can use the existing information collected by controller methods to display the raw details on the existing page.

Proposed files:
<div style="display: inline-block">
<pre>
app/controllers/grades_controller.rb

app/views/grades/_teams.html.erb

app/views/grades/_criteria_charts.html.erb

app/views/grades/_team_charts.html.erb

</pre>
</div>

=== Code ===

== app/views/grades/_criteria_charts.html.erb ==
<html>
<head>
<%= content_tag :div, class: "chartdata_information", data: {chartdata: @chartdata} do %>
<% end %>
<%= content_tag :div, class: "text_information", data: {text: @text} do %>
<% end %>
<%= content_tag :div, class: "minmax_information", data: {minmax: @minmax} do %>
<% end %>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
//Display Options
var showLabels = true;
var barColors = [ // Other colors generated from the expertiza base red
'#A90201', // using paletton.com
'#018701',
'#016565',
'#A94D01'
];
function getData(){ //Loads all chart data from the page
chartData = $('.chartdata_information').data('chartdata');
chartText = $('.text_information').data('text');
chartRange = $('.minmax_information').data('minmax');
for (var i = 0; i < chartData.length; i++){ //Set all the criteriaSelected to true
var criteria = [];
for (var j = 0; j < chartData[i].length; j++){
criteria.push(true);
}
criteriaSelected.push(criteria);
}
}
function generateData() { //Generates random data for testing
var rounds = 3;
for(var i = 0; i < rounds; i++) {
var criteriaNum = Math.floor(Math.random() * 5 + 5); //Random number of criteria
var round = [];
var criteria = [];
for(var j = 0; j < criteriaNum; j++) {
round.push(Math.floor(Math.random() * 101)); //Random score for each criterion
criteria.push(true); //Everything starts out true
}
chartData.push(round);
criteriaSelected.push(criteria);

chartOptions = { //Render options for the chart
title: 'Class Average on Criteria',
titleTextStyle: {
fontName: 'arial',
fontSize: 18,
italic: false,
bold: true
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var checkBox = document.getElementById("labelCheck");
checkBox.checked = true;
checkBox.style.display = "inline";
updateChart(currentRound);
loadRounds(); }
function updateChart(roundNum) { //Updates the chart with a new round number and renders
currentRound = roundNum;
renderChart();
loadCriteria();
function renderChart() { //Renders the chart if changes have been made
var data = loadData();
chartOptions.vAxis.viewWindow.max = 5;
chartOptions.vAxis.viewWindow.min = 0;
if (chartRange[currentRound]) { //Set axis ranges if they exist
if (chartRange[currentRound][1])
chartOptions.vAxis.viewWindow.max = chartRange[currentRound][1];
if (chartRange[currentRound][0])
chartOptions.vAxis.viewWindow.min = chartRange[currentRound][0];
}
chart.draw(data, chartOptions);
}

chartOptions.hAxis.ticks = [];
var rowCount = 1;
for(var i = 0; i < chartData[currentRound].length; i++) { //Add a chart row for each criterion if not null
if (criteriaSelected[currentRound][i] && chartData[currentRound][i]) {
data.addRow([rowCount, chartData[currentRound][i], barColors[0], (showLabels) ? chartData[currentRound][i].toFixed(1).toString() : ""]);
chartOptions.hAxis.ticks.push({v: rowCount++, f: (i+1).toString()});
}
}

var data = new google.visualization.DataTable();
data.addColumn('number', 'Criterion');
var i;
for(i = 0; i < roundNum; i++) { //Add all columns for the data
data.addColumn('number', 'Round ' + (i+1).toString());
data.addColumn({type: 'string', role: 'style'}); //column for specifying the bar color
data.addColumn({type: 'string', role: 'annotation'});

var newRow = [];
var elementsAdded = false;
newRow.push(rowCount);
for(var j = 0; j < roundNum; j++) { //If the round has the criterion, add it
if (chartData[j][i]) {
newRow.push(chartData[j][i]);
elementsAdded = true;
} else {
newRow.push(null);
}
newRow.push(barColors[j % barColors.length]); //Add column color
if (chartData[j] && chartData[j][i] && showLabels)
newRow.push(chartData[j][i].toFixed(1).toString()); //Add column annotations
else
newRow.push("");
}
function loadCriteria() { //Creates the criteria check boxes
var form = document.getElementById("chartCriteria");
while (form.firstChild) //Clear out the old check boxes
form.removeChild(form.firstChild);
if (currentRound == -1) //Don't show criteria for 'all rounds'
return;
chartData[currentRound].forEach(function(dat, i) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.id = "checkboxoption" + i;
checkbox.onclick = function() { //Register callback to toggle the criterion
checkboxUpdate(i);
}
var label = document.createElement('label')

<form id="chartOptions" name="chartOptions">
<select id="chartRounds" name="rounds"
onChange="updateChart(document.chartOptions.chartRounds.options[document.chartOptions.chartRounds.options.selectedIndex].value)" style = "display: none">
</select>
<label><input type="checkbox" id = "labelCheck" checked="checked" style="display: none" onclick="showLabels = !showLabels; renderChart();">Show
Labels</label>
</form>
<div id="chartCriteria" name="chartCriteria">
</div>

== app/controllers/grades_controller.rb ==

def action_allowed?
case params[:action]
when 'view_my_scores'
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator',
'Student'].include? current_role_name and
are_needed_authorizations_present?(params[:id], "reader", "reviewer") and
check_self_review_status
when 'view_team'
if ['Student'].include? current_role_name # students can only see the head map for their own team
participant = AssignmentParticipant.find(params[:id])
session[:user].id == participant.user_id
else
true
end
else
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator'].include? current_role_name
end
end
# collects the question text for display on the chart
# Added as part of E1859
def assign_chart_text
@text = []
(1..@assignment.num_review_rounds).to_a.each do |round|
question = @questions[('review' + round.to_s).to_sym]
@text[round - 1] = []
next if question.nil?
(0..(question.length - 1)).to_a.each do |q|
@text[round - 1][q] = question[q].txt
end
end
end

# find the maximum and minimum scores for each questionnaire round
# Added as part of E1859
def assign_minmax(questionnaires)
@minmax = []
questionnaires.each do |questionnaire|
next if questionnaire.symbol != :review
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
next if round.nil?
@minmax[round - 1] = []
@minmax[round - 1][0] = if !questionnaire.min_question_score.nil? and questionnaire.min_question_score < 0
questionnaire.min_question_score
else
0
end
@minmax[round - 1][1] = if !questionnaire.max_question_score.nil?
questionnaire.max_question_score
else
5
end
end
end
# this method collects and averages all the review scores across teams
# Added as part of E1859
def assign_chart_data
@rounds = @assignment.num_review_rounds
@chartdata = []
(1..@rounds).to_a.each do |round|
@teams = AssignmentTeam.where(parent_id: @assignment.id)
@teamids = []
@result = []
@responseids = []
@scoreviews = []
(0..(@teams.length - 1)).to_a.each do |t|
@teamids[t] = @teams[t].id
@result[t] = ResponseMap.find_by_sql ["SELECT id FROM response_maps
WHERE type = 'ReviewResponseMap' AND reviewee_id = ?", @teamids[t]]
@responseids[t] = []
@scoreviews[t] = []
(0..(@result[t].length - 1)).to_a.each do |r|
@responseids[t][r] = Response.find_by_sql ["SELECT id FROM responses
WHERE round = ? AND map_id = ?", round, @result[t][r]]
@scoreviews[t][r] = Answer.where(response_id: @responseids[t][r][0]) unless @responseids[t][r].empty?
end
end
@chartdata[round - 1] = []
# because the nth first elements could be nil
# iterate until a non-nil value is found or move to next round
t = 0
r = 0
t += 1 while @scoreviews[t].nil?
while t < @scoreviews.length and @scoreviews[t][r].nil?
if r < @scoreviews[t].length - 1
r += 1
else
def assign_chart_data
end
end
next if t >= @scoreviews.length
(0..(@scoreviews[t][r].length - 1)).to_a.each do |q|
sum = 0
counter = 0
def retrieve_questions(questionnaires)
questionnaires.each do |questionnaire|
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
questionnaire_symbol = if !round.nil?
(questionnaire.symbol.to_s + round.to_s).to_sym
else
questionnaire.symbol
end
@questions[questionnaire_symbol] = questionnaire.questions
end
end
def update
if format("%.2f", total_score) != params[:participant][:grade]
participant.update_attribute(:grade, params[:participant][:grade])
message = if participant.grade.nil?
"The computed score will be used for " + participant.user.name + "."
else
"A score of " + params[:participant][:grade] + "% has been saved for " + participant.user.name + "."
end
end
flash[:note] = message
redirect_to action: 'edit', id: params[:id]

== app/views/grades/_team_charts.html.erb ==

<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
var chart;
var chartOptions;
var chartData = []; //Stores all data for the chart to display
var currentRound = 0; //Stores the current displayed round
var criteriaSelected = []; //Stores selected criteria to display
function generateData() { //Generates random data for testing
var rounds = 3;
for(var i = 0; i < rounds; i++) {
var criteriaNum = Math.floor(Math.random() * 5 + 5);
var round = [];
var criteria = [];
for(var j = 0; j < criteriaNum; j++) {
round.push(Math.floor(Math.random() * 101));
criteria.push(true);
}
chartData.push(round);
criteriaSelected.push(criteria);
}
}
function drawBasic() { //Initializes all google chart information
generateData();
chartOptions = { //Render options for the chart
title: 'Average Scores',
titleTextStyle: {
fontName: 'arial', //Fonts to be changed to Helvetica when implemented
fontSize: 18,
italic: false,
bold: true
},
legend: 'none',
bar: {
groupWidth: 'default'
},
hAxis: {
title: 'Criterion',
titleTextStyle: {
fontName: 'arial',
fontSize: 14,
italic: false,
bold: false,
},
viewWindow: {
min: 0.5
}
},
vAxis: {
title: 'Average Score',
titleTextStyle: {
fontName: 'arial',
fontSize: 14,
italic: false,
bold: false
},
viewWindow: {
min: 0,
max: 100
}
}
};
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
updateChart(currentRound);
loadRounds();
}
function updateChart(roundNum) { //Updates the chart with a new round number
currentRound = roundNum;
renderChart();
loadCriteria();
}
function renderChart() { //Renders the chart if changes have been made
var data = loadData();
chart.draw(data, chartOptions);
}
function loadData() { //Pulls data from the page and renders the chart with it
var data = new google.visualization.DataTable();
data.addColumn('number', 'Criterion');
data.addColumn('number', 'Average Score');
data.addColumn({type: 'string', role: 'style'}); //column for specifying the bar color
data.addColumn({type: 'number', role: 'annotation'});
var rowCount = 1;
for(var i = 0; i < chartData[currentRound].length; i++) {
if (criteriaSelected[currentRound][i]) {
data.addRow([rowCount++, chartData[currentRound][i], '#a90201', i+1]);
}
}
return data;
}
function loadRounds() { //Creates the Rounds in the dropdown menu
var rounds = document.getElementById("chartRounds");
for(var i = 0; i < chartData.length; i++) {
var option = document.createElement('option');
option.value = i;
option.text = "Round " + (i+1);
rounds.add(option);
}
rounds.style.display = "inline";
}
function loadCriteria() { //Creates the criteria check boxes
var form = document.getElementById("chartCriteria");
while (form.firstChild)
form.removeChild(form.firstChild);
chartData[currentRound].forEach(function(dat, i) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = "value";
checkbox.id = "checkboxoption" + i;
checkbox.onclick = function() {
checkboxUpdate(i);
}
var label = document.createElement('label')
label.htmlFor = checkbox.id;
label.appendChild(document.createTextNode("Criteria " + (i+1)));
form.appendChild(checkbox);
form.appendChild(label);
form.appendChild(document.createElement("BR"));
checkbox.checked = criteriaSelected[currentRound][i];
});
}
function checkboxUpdate(checkid) { //Update function to change the displayed criteria
var check = document.getElementById("checkboxoption" + checkid);
criteriaSelected[currentRound][checkid] = check.checked;
renderChart();
}
</script>
</head>
<body>
function checkboxUpdate(checkid) {
<select id="chartRounds" name="rounds"
onChange="updateChart(document.chartOptions.chartRounds.options[document.chartOptions.chartRounds.options.selectedIndex].value)" style = "display: none">
</select>
</form>
<div id="chartCriteria" name="chartCriteria"></div>
</body>
</html>

== Test Plan ==
The specification of the project does not require us to use automated tests. However, we plan to test the modified ruby code or the new features that will be added to the grades_controller. We will be approaching [http://rspec.info/ RSpec] testing framework. For the javascript, the tests will be conducted manually.

===JavaScript Chart===
To validate all functionality of the chart when adding new features or fixing old ones, the following criteria were tested manually for expected functionality:

# 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

===RSpec Tests===
RSpec tests were added to validate functionality of the helper methods that were added to the grades controller.

== spec/controllers/grades_controller_spec.rb ==
context 'when current assignment does not vary rubric by round' do
it 'calculates scores and renders grades#view page' do
allow(AssignmentQuestionnaire).to receive(:where).with(assignment_id: 1, used_in_round: 2).and_return([])
# added AssignmentQuestionnaire 'allow' below to handle chart functionality added in E1859
allow(AssignmentQuestionnaire).to receive(:where).with(assignment_id: 1, questionnaire_id: 1).and_return([assignment_questionnaire])
allow(ReviewResponseMap).to receive(:get_assessments_for).with(team).and_return([review_response])
params = {id: 1}
get :view, params

E1859 Visualizations for Instructors

2018-12-07T01:51:25Z

Ntripat: /* app/views/grades/_team_charts.html.erb */

== Introduction ==
Expertiza is an online assignment grading platform. Instructors can create assignments and implement peer reviews for submitted assignments. This project concerns the creation of a system for visualizing student performance on those assignments, primarily as graded in peer reviews. Graphs will be made to show various rubric criteria and the class' performance on the criteria. If the criteria are the same for multiple stages of review, an instructor should be able to compare performance over time or between reviews.

__TOC__

== Project Purpose ==
Our task is to provide an interactive visualization or a table for instructors that shows how their class performed on selected rubric criteria. Such feature would be immensely helpful for instructors as it would assist them to identify what they need to focus more attention on. For example, creating a graph showing the average scores for all or a certain subset of main rubric criteria (questionnaire). If the average score of the class on selected criteria (question) is low means the instructor can emphasize more on the learning materials related to it.

== Proposed Changes ==
The visualizations will be implemented as either a single or stacked bar chart with a bar for each of the selected criteria to be observed. If a single bar, then the height of the bar will be the total class average, but a stacked bar chart may be better to show the percentage of the class that received each score. The changes made to the expertiza project will primarily include HTML/ERB changes to the view files to accommodate the added charts on the page and the necessary javascript to allow responsive design. Brief controller modifications will be made to facilitate database filtering to get the displayed data.

1. On clicking Manage and then on assignments, following page appears.

[[File:S1.JPG]]

2. Click on 'view score' icon of an assignment. The summary report page of the selected assignment comes up.

[[File:A0.jpg]]

3. Following are mockup screens which we wish to create:

a) Instructor would select the round and rubric criteria of the assignment for which he/she wants to view the class performance.

[[File:A1.jpg]]

b) The bar graph of the class performance for those criteria would be displayed.

[[File:Try.jpg]]

== Project Design ==

==== Design Flow ====

The flowchart representing graphical flow of an instructor visiting view scores under assignments is given below:

[[File:A3.png]]

==== Tools and Design Choice ====

We plan to use the lightweight [https://developers.google.com/chart/ Google Charts] library for displaying the chart data on the page, with standard HTML for all of the options and dropdowns for option selection. Google Charts was chosen because of its high compatibility, full option set, and comparable graphical quality to the rest of expertiza while keeping a small JS footprint, which should help prevent slow page responsiveness.

==== Visualization ====

The following graph shows the expected view of the 'view scores' page. The instructor selects a subset of rubric criteria for which he/she wants to know how a class performed. A bar graph of the average score of the class for that subset of criteria would be displayed.

[[File:1859_Chart_Preview.png]]

The above graph shows average score of the class for 5 rubric criteria in Round 1 selected by the instructor. A live demo with randomly generated data can be found on [https://jsfiddle.net/Jereman/5uxqr92y/ JSFiddle]

== Files Involved ==
We plan to work on the files that the previous team were involved with such as controllers of grade and assignment and the view of grade and review_mapping. Hopefully there is only slight controller modifications necessary, as the chart can use the existing information collected by controller methods to display the raw details on the existing page.

Proposed files:
<div style="display: inline-block">
<pre>
app/controllers/assignments_controller.rb

app/views/grades/view.html.erb

app/views/grades/_teams.html.erb

app/views/grades/_team_title.html.erb

app/views/grades/_team_charts.html.erb

app/view/review_mapping/_review_report.html.erb
</pre>
</div>

=== Code ===
== app/views/grades/_criteria_charts.html.erb ==
<html>
<head>
<%= content_tag :div, class: "chartdata_information", data: {chartdata: @chartdata} do %>
<% end %>
<%= content_tag :div, class: "text_information", data: {text: @text} do %>
<% end %>
<%= content_tag :div, class: "minmax_information", data: {minmax: @minmax} do %>
<% end %>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
//Display Options
var showLabels = true;
var barColors = [ // Other colors generated from the expertiza base red
'#A90201', // using paletton.com
'#018701',
'#016565',
'#A94D01'
];
function getData(){ //Loads all chart data from the page
chartData = $('.chartdata_information').data('chartdata');
chartText = $('.text_information').data('text');
chartRange = $('.minmax_information').data('minmax');
for (var i = 0; i < chartData.length; i++){ //Set all the criteriaSelected to true
var criteria = [];
for (var j = 0; j < chartData[i].length; j++){
criteria.push(true);
}
criteriaSelected.push(criteria);
}
}
function generateData() { //Generates random data for testing
var rounds = 3;
for(var i = 0; i < rounds; i++) {
var criteriaNum = Math.floor(Math.random() * 5 + 5); //Random number of criteria
var round = [];
var criteria = [];
for(var j = 0; j < criteriaNum; j++) {
round.push(Math.floor(Math.random() * 101)); //Random score for each criterion
criteria.push(true); //Everything starts out true
}
chartData.push(round);
criteriaSelected.push(criteria);

chartOptions = { //Render options for the chart
title: 'Class Average on Criteria',
titleTextStyle: {
fontName: 'arial',
fontSize: 18,
italic: false,
bold: true
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var checkBox = document.getElementById("labelCheck");
checkBox.checked = true;
checkBox.style.display = "inline";
updateChart(currentRound);
loadRounds(); }
function updateChart(roundNum) { //Updates the chart with a new round number and renders
currentRound = roundNum;
renderChart();
loadCriteria();
function renderChart() { //Renders the chart if changes have been made
var data = loadData();
chartOptions.vAxis.viewWindow.max = 5;
chartOptions.vAxis.viewWindow.min = 0;
if (chartRange[currentRound]) { //Set axis ranges if they exist
if (chartRange[currentRound][1])
chartOptions.vAxis.viewWindow.max = chartRange[currentRound][1];
if (chartRange[currentRound][0])
chartOptions.vAxis.viewWindow.min = chartRange[currentRound][0];
}
chart.draw(data, chartOptions);
}

chartOptions.hAxis.ticks = [];
var rowCount = 1;
for(var i = 0; i < chartData[currentRound].length; i++) { //Add a chart row for each criterion if not null
if (criteriaSelected[currentRound][i] && chartData[currentRound][i]) {
data.addRow([rowCount, chartData[currentRound][i], barColors[0], (showLabels) ? chartData[currentRound][i].toFixed(1).toString() : ""]);
chartOptions.hAxis.ticks.push({v: rowCount++, f: (i+1).toString()});
}
}

var data = new google.visualization.DataTable();
data.addColumn('number', 'Criterion');
var i;
for(i = 0; i < roundNum; i++) { //Add all columns for the data
data.addColumn('number', 'Round ' + (i+1).toString());
data.addColumn({type: 'string', role: 'style'}); //column for specifying the bar color
data.addColumn({type: 'string', role: 'annotation'});

var newRow = [];
var elementsAdded = false;
newRow.push(rowCount);
for(var j = 0; j < roundNum; j++) { //If the round has the criterion, add it
if (chartData[j][i]) {
newRow.push(chartData[j][i]);
elementsAdded = true;
} else {
newRow.push(null);
}
newRow.push(barColors[j % barColors.length]); //Add column color
if (chartData[j] && chartData[j][i] && showLabels)
newRow.push(chartData[j][i].toFixed(1).toString()); //Add column annotations
else
newRow.push("");
}
function loadCriteria() { //Creates the criteria check boxes
var form = document.getElementById("chartCriteria");
while (form.firstChild) //Clear out the old check boxes
form.removeChild(form.firstChild);
if (currentRound == -1) //Don't show criteria for 'all rounds'
return;
chartData[currentRound].forEach(function(dat, i) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.id = "checkboxoption" + i;
checkbox.onclick = function() { //Register callback to toggle the criterion
checkboxUpdate(i);
}
var label = document.createElement('label')

<form id="chartOptions" name="chartOptions">
<select id="chartRounds" name="rounds"
onChange="updateChart(document.chartOptions.chartRounds.options[document.chartOptions.chartRounds.options.selectedIndex].value)" style = "display: none">
</select>
<label><input type="checkbox" id = "labelCheck" checked="checked" style="display: none" onclick="showLabels = !showLabels; renderChart();">Show
Labels</label>
</form>
<div id="chartCriteria" name="chartCriteria">
</div>

== app/controllers/grades_controller.rb ==

def action_allowed?
case params[:action]
when 'view_my_scores'
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator',
'Student'].include? current_role_name and
are_needed_authorizations_present?(params[:id], "reader", "reviewer") and
check_self_review_status
when 'view_team'
if ['Student'].include? current_role_name # students can only see the head map for their own team
participant = AssignmentParticipant.find(params[:id])
session[:user].id == participant.user_id
else
true
end
else
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator'].include? current_role_name
end
end
# collects the question text for display on the chart
# Added as part of E1859
def assign_chart_text
@text = []
(1..@assignment.num_review_rounds).to_a.each do |round|
question = @questions[('review' + round.to_s).to_sym]
@text[round - 1] = []
next if question.nil?
(0..(question.length - 1)).to_a.each do |q|
@text[round - 1][q] = question[q].txt
end
end
end

# find the maximum and minimum scores for each questionnaire round
# Added as part of E1859
def assign_minmax(questionnaires)
@minmax = []
questionnaires.each do |questionnaire|
next if questionnaire.symbol != :review
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
next if round.nil?
@minmax[round - 1] = []
@minmax[round - 1][0] = if !questionnaire.min_question_score.nil? and questionnaire.min_question_score < 0
questionnaire.min_question_score
else
0
end
@minmax[round - 1][1] = if !questionnaire.max_question_score.nil?
questionnaire.max_question_score
else
5
end
end
end
# this method collects and averages all the review scores across teams
# Added as part of E1859
def assign_chart_data
@rounds = @assignment.num_review_rounds
@chartdata = []
(1..@rounds).to_a.each do |round|
@teams = AssignmentTeam.where(parent_id: @assignment.id)
@teamids = []
@result = []
@responseids = []
@scoreviews = []
(0..(@teams.length - 1)).to_a.each do |t|
@teamids[t] = @teams[t].id
@result[t] = ResponseMap.find_by_sql ["SELECT id FROM response_maps
WHERE type = 'ReviewResponseMap' AND reviewee_id = ?", @teamids[t]]
@responseids[t] = []
@scoreviews[t] = []
(0..(@result[t].length - 1)).to_a.each do |r|
@responseids[t][r] = Response.find_by_sql ["SELECT id FROM responses
WHERE round = ? AND map_id = ?", round, @result[t][r]]
@scoreviews[t][r] = Answer.where(response_id: @responseids[t][r][0]) unless @responseids[t][r].empty?
end
end
@chartdata[round - 1] = []
# because the nth first elements could be nil
# iterate until a non-nil value is found or move to next round
t = 0
r = 0
t += 1 while @scoreviews[t].nil?
while t < @scoreviews.length and @scoreviews[t][r].nil?
if r < @scoreviews[t].length - 1
r += 1
else
def assign_chart_data
end
end
next if t >= @scoreviews.length
(0..(@scoreviews[t][r].length - 1)).to_a.each do |q|
sum = 0
counter = 0
def retrieve_questions(questionnaires)
questionnaires.each do |questionnaire|
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
questionnaire_symbol = if !round.nil?
(questionnaire.symbol.to_s + round.to_s).to_sym
else
questionnaire.symbol
end
@questions[questionnaire_symbol] = questionnaire.questions
end
end
def update
if format("%.2f", total_score) != params[:participant][:grade]
participant.update_attribute(:grade, params[:participant][:grade])
message = if participant.grade.nil?
"The computed score will be used for " + participant.user.name + "."
else
"A score of " + params[:participant][:grade] + "% has been saved for " + participant.user.name + "."
end
end
flash[:note] = message
redirect_to action: 'edit', id: params[:id]

== app/views/grades/_team_charts.html.erb ==

<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
var chart;
var chartOptions;
var chartData = []; //Stores all data for the chart to display
var currentRound = 0; //Stores the current displayed round
var criteriaSelected = []; //Stores selected criteria to display
function generateData() { //Generates random data for testing
var rounds = 3;
for(var i = 0; i < rounds; i++) {
var criteriaNum = Math.floor(Math.random() * 5 + 5);
var round = [];
var criteria = [];
for(var j = 0; j < criteriaNum; j++) {
round.push(Math.floor(Math.random() * 101));
criteria.push(true);
}
chartData.push(round);
criteriaSelected.push(criteria);
}
}
function drawBasic() { //Initializes all google chart information
generateData();
chartOptions = { //Render options for the chart
title: 'Average Scores',
titleTextStyle: {
fontName: 'arial', //Fonts to be changed to Helvetica when implemented
fontSize: 18,
italic: false,
bold: true
},
legend: 'none',
bar: {
groupWidth: 'default'
},
hAxis: {
title: 'Criterion',
titleTextStyle: {
fontName: 'arial',
fontSize: 14,
italic: false,
bold: false,
},
viewWindow: {
min: 0.5
}
},
vAxis: {
title: 'Average Score',
titleTextStyle: {
fontName: 'arial',
fontSize: 14,
italic: false,
bold: false
},
viewWindow: {
min: 0,
max: 100
}
}
};
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
updateChart(currentRound);
loadRounds();
}
function updateChart(roundNum) { //Updates the chart with a new round number
currentRound = roundNum;
renderChart();
loadCriteria();
}
function renderChart() { //Renders the chart if changes have been made
var data = loadData();
chart.draw(data, chartOptions);
}
function loadData() { //Pulls data from the page and renders the chart with it
var data = new google.visualization.DataTable();
data.addColumn('number', 'Criterion');
data.addColumn('number', 'Average Score');
data.addColumn({type: 'string', role: 'style'}); //column for specifying the bar color
data.addColumn({type: 'number', role: 'annotation'});
var rowCount = 1;
for(var i = 0; i < chartData[currentRound].length; i++) {
if (criteriaSelected[currentRound][i]) {
data.addRow([rowCount++, chartData[currentRound][i], '#a90201', i+1]);
}
}
return data;
}
function loadRounds() { //Creates the Rounds in the dropdown menu
var rounds = document.getElementById("chartRounds");
for(var i = 0; i < chartData.length; i++) {
var option = document.createElement('option');
option.value = i;
option.text = "Round " + (i+1);
rounds.add(option);
}
rounds.style.display = "inline";
}
function loadCriteria() { //Creates the criteria check boxes
var form = document.getElementById("chartCriteria");
while (form.firstChild)
form.removeChild(form.firstChild);
chartData[currentRound].forEach(function(dat, i) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = "value";
checkbox.id = "checkboxoption" + i;
checkbox.onclick = function() {
checkboxUpdate(i);
}
var label = document.createElement('label')
label.htmlFor = checkbox.id;
label.appendChild(document.createTextNode("Criteria " + (i+1)));
form.appendChild(checkbox);
form.appendChild(label);
form.appendChild(document.createElement("BR"));
checkbox.checked = criteriaSelected[currentRound][i];
});
}
function checkboxUpdate(checkid) { //Update function to change the displayed criteria
var check = document.getElementById("checkboxoption" + checkid);
criteriaSelected[currentRound][checkid] = check.checked;
renderChart();
}
</script>
</head>
<body>
function checkboxUpdate(checkid) {
<select id="chartRounds" name="rounds"
onChange="updateChart(document.chartOptions.chartRounds.options[document.chartOptions.chartRounds.options.selectedIndex].value)" style = "display: none">
</select>
</form>
<div id="chartCriteria" name="chartCriteria"></div>
</body>
</html>

== Test Plan ==
The specification of the project does not require us to use automated tests. However, we plan to test the modified ruby code or the new features that will be added to the grades_controller. We will be approaching [http://rspec.info/ RSpec] testing framework. For the javascript, the tests will be conducted manually.

===JavaScript Chart===
To validate all functionality of the chart when adding new features or fixing old ones, the following criteria were tested manually for expected functionality:

# 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

===RSpec Tests===
RSpec tests were added to validate functionality of the helper methods that were added to the grades controller.

== spec/controllers/grades_controller_spec.rb ==
context 'when current assignment does not vary rubric by round' do
it 'calculates scores and renders grades#view page' do
allow(AssignmentQuestionnaire).to receive(:where).with(assignment_id: 1, used_in_round: 2).and_return([])
# added AssignmentQuestionnaire 'allow' below to handle chart functionality added in E1859
allow(AssignmentQuestionnaire).to receive(:where).with(assignment_id: 1, questionnaire_id: 1).and_return([assignment_questionnaire])
allow(ReviewResponseMap).to receive(:get_assessments_for).with(team).and_return([review_response])
params = {id: 1}
get :view, params

E1859 Visualizations for Instructors

2018-12-07T01:50:42Z

Ntripat: /* app/views/grades/_team_charts.html.erb */

== Introduction ==
Expertiza is an online assignment grading platform. Instructors can create assignments and implement peer reviews for submitted assignments. This project concerns the creation of a system for visualizing student performance on those assignments, primarily as graded in peer reviews. Graphs will be made to show various rubric criteria and the class' performance on the criteria. If the criteria are the same for multiple stages of review, an instructor should be able to compare performance over time or between reviews.

__TOC__

== Project Purpose ==
Our task is to provide an interactive visualization or a table for instructors that shows how their class performed on selected rubric criteria. Such feature would be immensely helpful for instructors as it would assist them to identify what they need to focus more attention on. For example, creating a graph showing the average scores for all or a certain subset of main rubric criteria (questionnaire). If the average score of the class on selected criteria (question) is low means the instructor can emphasize more on the learning materials related to it.

== Proposed Changes ==
The visualizations will be implemented as either a single or stacked bar chart with a bar for each of the selected criteria to be observed. If a single bar, then the height of the bar will be the total class average, but a stacked bar chart may be better to show the percentage of the class that received each score. The changes made to the expertiza project will primarily include HTML/ERB changes to the view files to accommodate the added charts on the page and the necessary javascript to allow responsive design. Brief controller modifications will be made to facilitate database filtering to get the displayed data.

1. On clicking Manage and then on assignments, following page appears.

[[File:S1.JPG]]

2. Click on 'view score' icon of an assignment. The summary report page of the selected assignment comes up.

[[File:A0.jpg]]

3. Following are mockup screens which we wish to create:

a) Instructor would select the round and rubric criteria of the assignment for which he/she wants to view the class performance.

[[File:A1.jpg]]

b) The bar graph of the class performance for those criteria would be displayed.

[[File:Try.jpg]]

== Project Design ==

==== Design Flow ====

The flowchart representing graphical flow of an instructor visiting view scores under assignments is given below:

[[File:A3.png]]

==== Tools and Design Choice ====

We plan to use the lightweight [https://developers.google.com/chart/ Google Charts] library for displaying the chart data on the page, with standard HTML for all of the options and dropdowns for option selection. Google Charts was chosen because of its high compatibility, full option set, and comparable graphical quality to the rest of expertiza while keeping a small JS footprint, which should help prevent slow page responsiveness.

==== Visualization ====

The following graph shows the expected view of the 'view scores' page. The instructor selects a subset of rubric criteria for which he/she wants to know how a class performed. A bar graph of the average score of the class for that subset of criteria would be displayed.

[[File:1859_Chart_Preview.png]]

The above graph shows average score of the class for 5 rubric criteria in Round 1 selected by the instructor. A live demo with randomly generated data can be found on [https://jsfiddle.net/Jereman/5uxqr92y/ JSFiddle]

== Files Involved ==
We plan to work on the files that the previous team were involved with such as controllers of grade and assignment and the view of grade and review_mapping. Hopefully there is only slight controller modifications necessary, as the chart can use the existing information collected by controller methods to display the raw details on the existing page.

Proposed files:
<div style="display: inline-block">
<pre>
app/controllers/assignments_controller.rb

app/views/grades/view.html.erb

app/views/grades/_teams.html.erb

app/views/grades/_team_title.html.erb

app/views/grades/_team_charts.html.erb

app/view/review_mapping/_review_report.html.erb
</pre>
</div>

=== Code ===
== app/views/grades/_criteria_charts.html.erb ==
<html>
<head>
<%= content_tag :div, class: "chartdata_information", data: {chartdata: @chartdata} do %>
<% end %>
<%= content_tag :div, class: "text_information", data: {text: @text} do %>
<% end %>
<%= content_tag :div, class: "minmax_information", data: {minmax: @minmax} do %>
<% end %>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
//Display Options
var showLabels = true;
var barColors = [ // Other colors generated from the expertiza base red
'#A90201', // using paletton.com
'#018701',
'#016565',
'#A94D01'
];
function getData(){ //Loads all chart data from the page
chartData = $('.chartdata_information').data('chartdata');
chartText = $('.text_information').data('text');
chartRange = $('.minmax_information').data('minmax');
for (var i = 0; i < chartData.length; i++){ //Set all the criteriaSelected to true
var criteria = [];
for (var j = 0; j < chartData[i].length; j++){
criteria.push(true);
}
criteriaSelected.push(criteria);
}
}
function generateData() { //Generates random data for testing
var rounds = 3;
for(var i = 0; i < rounds; i++) {
var criteriaNum = Math.floor(Math.random() * 5 + 5); //Random number of criteria
var round = [];
var criteria = [];
for(var j = 0; j < criteriaNum; j++) {
round.push(Math.floor(Math.random() * 101)); //Random score for each criterion
criteria.push(true); //Everything starts out true
}
chartData.push(round);
criteriaSelected.push(criteria);

chartOptions = { //Render options for the chart
title: 'Class Average on Criteria',
titleTextStyle: {
fontName: 'arial',
fontSize: 18,
italic: false,
bold: true
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var checkBox = document.getElementById("labelCheck");
checkBox.checked = true;
checkBox.style.display = "inline";
updateChart(currentRound);
loadRounds(); }
function updateChart(roundNum) { //Updates the chart with a new round number and renders
currentRound = roundNum;
renderChart();
loadCriteria();
function renderChart() { //Renders the chart if changes have been made
var data = loadData();
chartOptions.vAxis.viewWindow.max = 5;
chartOptions.vAxis.viewWindow.min = 0;
if (chartRange[currentRound]) { //Set axis ranges if they exist
if (chartRange[currentRound][1])
chartOptions.vAxis.viewWindow.max = chartRange[currentRound][1];
if (chartRange[currentRound][0])
chartOptions.vAxis.viewWindow.min = chartRange[currentRound][0];
}
chart.draw(data, chartOptions);
}

chartOptions.hAxis.ticks = [];
var rowCount = 1;
for(var i = 0; i < chartData[currentRound].length; i++) { //Add a chart row for each criterion if not null
if (criteriaSelected[currentRound][i] && chartData[currentRound][i]) {
data.addRow([rowCount, chartData[currentRound][i], barColors[0], (showLabels) ? chartData[currentRound][i].toFixed(1).toString() : ""]);
chartOptions.hAxis.ticks.push({v: rowCount++, f: (i+1).toString()});
}
}

var data = new google.visualization.DataTable();
data.addColumn('number', 'Criterion');
var i;
for(i = 0; i < roundNum; i++) { //Add all columns for the data
data.addColumn('number', 'Round ' + (i+1).toString());
data.addColumn({type: 'string', role: 'style'}); //column for specifying the bar color
data.addColumn({type: 'string', role: 'annotation'});

var newRow = [];
var elementsAdded = false;
newRow.push(rowCount);
for(var j = 0; j < roundNum; j++) { //If the round has the criterion, add it
if (chartData[j][i]) {
newRow.push(chartData[j][i]);
elementsAdded = true;
} else {
newRow.push(null);
}
newRow.push(barColors[j % barColors.length]); //Add column color
if (chartData[j] && chartData[j][i] && showLabels)
newRow.push(chartData[j][i].toFixed(1).toString()); //Add column annotations
else
newRow.push("");
}
function loadCriteria() { //Creates the criteria check boxes
var form = document.getElementById("chartCriteria");
while (form.firstChild) //Clear out the old check boxes
form.removeChild(form.firstChild);
if (currentRound == -1) //Don't show criteria for 'all rounds'
return;
chartData[currentRound].forEach(function(dat, i) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.id = "checkboxoption" + i;
checkbox.onclick = function() { //Register callback to toggle the criterion
checkboxUpdate(i);
}
var label = document.createElement('label')

<form id="chartOptions" name="chartOptions">
<select id="chartRounds" name="rounds"
onChange="updateChart(document.chartOptions.chartRounds.options[document.chartOptions.chartRounds.options.selectedIndex].value)" style = "display: none">
</select>
<label><input type="checkbox" id = "labelCheck" checked="checked" style="display: none" onclick="showLabels = !showLabels; renderChart();">Show
Labels</label>
</form>
<div id="chartCriteria" name="chartCriteria">
</div>

== app/controllers/grades_controller.rb ==

def action_allowed?
case params[:action]
when 'view_my_scores'
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator',
'Student'].include? current_role_name and
are_needed_authorizations_present?(params[:id], "reader", "reviewer") and
check_self_review_status
when 'view_team'
if ['Student'].include? current_role_name # students can only see the head map for their own team
participant = AssignmentParticipant.find(params[:id])
session[:user].id == participant.user_id
else
true
end
else
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator'].include? current_role_name
end
end
# collects the question text for display on the chart
# Added as part of E1859
def assign_chart_text
@text = []
(1..@assignment.num_review_rounds).to_a.each do |round|
question = @questions[('review' + round.to_s).to_sym]
@text[round - 1] = []
next if question.nil?
(0..(question.length - 1)).to_a.each do |q|
@text[round - 1][q] = question[q].txt
end
end
end

# find the maximum and minimum scores for each questionnaire round
# Added as part of E1859
def assign_minmax(questionnaires)
@minmax = []
questionnaires.each do |questionnaire|
next if questionnaire.symbol != :review
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
next if round.nil?
@minmax[round - 1] = []
@minmax[round - 1][0] = if !questionnaire.min_question_score.nil? and questionnaire.min_question_score < 0
questionnaire.min_question_score
else
0
end
@minmax[round - 1][1] = if !questionnaire.max_question_score.nil?
questionnaire.max_question_score
else
5
end
end
end
# this method collects and averages all the review scores across teams
# Added as part of E1859
def assign_chart_data
@rounds = @assignment.num_review_rounds
@chartdata = []
(1..@rounds).to_a.each do |round|
@teams = AssignmentTeam.where(parent_id: @assignment.id)
@teamids = []
@result = []
@responseids = []
@scoreviews = []
(0..(@teams.length - 1)).to_a.each do |t|
@teamids[t] = @teams[t].id
@result[t] = ResponseMap.find_by_sql ["SELECT id FROM response_maps
WHERE type = 'ReviewResponseMap' AND reviewee_id = ?", @teamids[t]]
@responseids[t] = []
@scoreviews[t] = []
(0..(@result[t].length - 1)).to_a.each do |r|
@responseids[t][r] = Response.find_by_sql ["SELECT id FROM responses
WHERE round = ? AND map_id = ?", round, @result[t][r]]
@scoreviews[t][r] = Answer.where(response_id: @responseids[t][r][0]) unless @responseids[t][r].empty?
end
end
@chartdata[round - 1] = []
# because the nth first elements could be nil
# iterate until a non-nil value is found or move to next round
t = 0
r = 0
t += 1 while @scoreviews[t].nil?
while t < @scoreviews.length and @scoreviews[t][r].nil?
if r < @scoreviews[t].length - 1
r += 1
else
def assign_chart_data
end
end
next if t >= @scoreviews.length
(0..(@scoreviews[t][r].length - 1)).to_a.each do |q|
sum = 0
counter = 0
def retrieve_questions(questionnaires)
questionnaires.each do |questionnaire|
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
questionnaire_symbol = if !round.nil?
(questionnaire.symbol.to_s + round.to_s).to_sym
else
questionnaire.symbol
end
@questions[questionnaire_symbol] = questionnaire.questions
end
end
def update
if format("%.2f", total_score) != params[:participant][:grade]
participant.update_attribute(:grade, params[:participant][:grade])
message = if participant.grade.nil?
"The computed score will be used for " + participant.user.name + "."
else
"A score of " + params[:participant][:grade] + "% has been saved for " + participant.user.name + "."
end
end
flash[:note] = message
redirect_to action: 'edit', id: params[:id]

== app/views/grades/_team_charts.html.erb ==

<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
var chart;
var chartOptions;
var chartData = []; //Stores all data for the chart to display
var currentRound = 0; //Stores the current displayed round
var criteriaSelected = []; //Stores selected criteria to display
function generateData() { //Generates random data for testing
var rounds = 3;
for(var i = 0; i < rounds; i++) {
var criteriaNum = Math.floor(Math.random() * 5 + 5);
var round = [];
var criteria = [];
for(var j = 0; j < criteriaNum; j++) {
round.push(Math.floor(Math.random() * 101));
criteria.push(true);
}
chartData.push(round);
criteriaSelected.push(criteria);
}
}
function drawBasic() { //Initializes all google chart information
generateData();
chartOptions = { //Render options for the chart
title: 'Average Scores',
titleTextStyle: {
fontName: 'arial', //Fonts to be changed to Helvetica when implemented
fontSize: 18,
italic: false,
bold: true
},
legend: 'none',
bar: {
groupWidth: 'default'
},
hAxis: {
title: 'Criterion',
titleTextStyle: {
fontName: 'arial',
fontSize: 14,
italic: false,
bold: false,
},
viewWindow: {
min: 0.5
}
},
vAxis: {
title: 'Average Score',
titleTextStyle: {
fontName: 'arial',
fontSize: 14,
italic: false,
bold: false
},
viewWindow: {
min: 0,
max: 100
}
}
};
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
updateChart(currentRound);
loadRounds();
}
function updateChart(roundNum) { //Updates the chart with a new round number
currentRound = roundNum;
renderChart();
loadCriteria();
}
function renderChart() { //Renders the chart if changes have been made
var data = loadData();
chart.draw(data, chartOptions);
}
function loadData() { //Pulls data from the page and renders the chart with it
var data = new google.visualization.DataTable();
data.addColumn('number', 'Criterion');
data.addColumn('number', 'Average Score');
data.addColumn({type: 'string', role: 'style'}); //column for specifying the bar color
data.addColumn({type: 'number', role: 'annotation'});
var rowCount = 1;
for(var i = 0; i < chartData[currentRound].length; i++) {
if (criteriaSelected[currentRound][i]) {
data.addRow([rowCount++, chartData[currentRound][i], '#a90201', i+1]);
}
}
return data;
}
function loadRounds() { //Creates the Rounds in the dropdown menu
var rounds = document.getElementById("chartRounds");
for(var i = 0; i < chartData.length; i++) {
var option = document.createElement('option');
option.value = i;
option.text = "Round " + (i+1);
rounds.add(option);
}
rounds.style.display = "inline";
}
function loadCriteria() { //Creates the criteria check boxes
var form = document.getElementById("chartCriteria");
while (form.firstChild)
form.removeChild(form.firstChild);
chartData[currentRound].forEach(function(dat, i) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = "value";
checkbox.id = "checkboxoption" + i;
checkbox.onclick = function() {
checkboxUpdate(i);
}
var label = document.createElement('label')
label.htmlFor = checkbox.id;
label.appendChild(document.createTextNode("Criteria " + (i+1)));
form.appendChild(checkbox);
form.appendChild(label);
form.appendChild(document.createElement("BR"));
checkbox.checked = criteriaSelected[currentRound][i];
});
}
function checkboxUpdate(checkid) { //Update function to change the displayed criteria
var check = document.getElementById("checkboxoption" + checkid);
criteriaSelected[currentRound][checkid] = check.checked;
renderChart();
}
</script>
</head>
<body>
function checkboxUpdate(checkid) {
<select id="chartRounds" name="rounds"
onChange="updateChart(document.chartOptions.chartRounds.options[document.chartOptions.chartRounds.options.selectedIndex].value)" style = "display: none">
</select>
</form>
<div id="chartCriteria" name="chartCriteria">
</div>
</body>
</html>

== Test Plan ==
The specification of the project does not require us to use automated tests. However, we plan to test the modified ruby code or the new features that will be added to the grades_controller. We will be approaching [http://rspec.info/ RSpec] testing framework. For the javascript, the tests will be conducted manually.

===JavaScript Chart===
To validate all functionality of the chart when adding new features or fixing old ones, the following criteria were tested manually for expected functionality:

# 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

===RSpec Tests===
RSpec tests were added to validate functionality of the helper methods that were added to the grades controller.

== spec/controllers/grades_controller_spec.rb ==
context 'when current assignment does not vary rubric by round' do
it 'calculates scores and renders grades#view page' do
allow(AssignmentQuestionnaire).to receive(:where).with(assignment_id: 1, used_in_round: 2).and_return([])
# added AssignmentQuestionnaire 'allow' below to handle chart functionality added in E1859
allow(AssignmentQuestionnaire).to receive(:where).with(assignment_id: 1, questionnaire_id: 1).and_return([assignment_questionnaire])
allow(ReviewResponseMap).to receive(:get_assessments_for).with(team).and_return([review_response])
params = {id: 1}
get :view, params

E1859 Visualizations for Instructors

2018-12-07T01:48:52Z

Ntripat:

== Introduction ==
Expertiza is an online assignment grading platform. Instructors can create assignments and implement peer reviews for submitted assignments. This project concerns the creation of a system for visualizing student performance on those assignments, primarily as graded in peer reviews. Graphs will be made to show various rubric criteria and the class' performance on the criteria. If the criteria are the same for multiple stages of review, an instructor should be able to compare performance over time or between reviews.

__TOC__

== Project Purpose ==
Our task is to provide an interactive visualization or a table for instructors that shows how their class performed on selected rubric criteria. Such feature would be immensely helpful for instructors as it would assist them to identify what they need to focus more attention on. For example, creating a graph showing the average scores for all or a certain subset of main rubric criteria (questionnaire). If the average score of the class on selected criteria (question) is low means the instructor can emphasize more on the learning materials related to it.

== Proposed Changes ==
The visualizations will be implemented as either a single or stacked bar chart with a bar for each of the selected criteria to be observed. If a single bar, then the height of the bar will be the total class average, but a stacked bar chart may be better to show the percentage of the class that received each score. The changes made to the expertiza project will primarily include HTML/ERB changes to the view files to accommodate the added charts on the page and the necessary javascript to allow responsive design. Brief controller modifications will be made to facilitate database filtering to get the displayed data.

1. On clicking Manage and then on assignments, following page appears.

[[File:S1.JPG]]

2. Click on 'view score' icon of an assignment. The summary report page of the selected assignment comes up.

[[File:A0.jpg]]

3. Following are mockup screens which we wish to create:

a) Instructor would select the round and rubric criteria of the assignment for which he/she wants to view the class performance.

[[File:A1.jpg]]

b) The bar graph of the class performance for those criteria would be displayed.

[[File:Try.jpg]]

== Project Design ==

==== Design Flow ====

The flowchart representing graphical flow of an instructor visiting view scores under assignments is given below:

[[File:A3.png]]

==== Tools and Design Choice ====

We plan to use the lightweight [https://developers.google.com/chart/ Google Charts] library for displaying the chart data on the page, with standard HTML for all of the options and dropdowns for option selection. Google Charts was chosen because of its high compatibility, full option set, and comparable graphical quality to the rest of expertiza while keeping a small JS footprint, which should help prevent slow page responsiveness.

==== Visualization ====

The following graph shows the expected view of the 'view scores' page. The instructor selects a subset of rubric criteria for which he/she wants to know how a class performed. A bar graph of the average score of the class for that subset of criteria would be displayed.

[[File:1859_Chart_Preview.png]]

The above graph shows average score of the class for 5 rubric criteria in Round 1 selected by the instructor. A live demo with randomly generated data can be found on [https://jsfiddle.net/Jereman/5uxqr92y/ JSFiddle]

== Files Involved ==
We plan to work on the files that the previous team were involved with such as controllers of grade and assignment and the view of grade and review_mapping. Hopefully there is only slight controller modifications necessary, as the chart can use the existing information collected by controller methods to display the raw details on the existing page.

Proposed files:
<div style="display: inline-block">
<pre>
app/controllers/assignments_controller.rb

app/views/grades/view.html.erb

app/views/grades/_teams.html.erb

app/views/grades/_team_title.html.erb

app/views/grades/_team_charts.html.erb

app/view/review_mapping/_review_report.html.erb
</pre>
</div>

=== Code ===
== app/views/grades/_criteria_charts.html.erb ==
<html>
<head>
<%= content_tag :div, class: "chartdata_information", data: {chartdata: @chartdata} do %>
<% end %>
<%= content_tag :div, class: "text_information", data: {text: @text} do %>
<% end %>
<%= content_tag :div, class: "minmax_information", data: {minmax: @minmax} do %>
<% end %>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
//Display Options
var showLabels = true;
var barColors = [ // Other colors generated from the expertiza base red
'#A90201', // using paletton.com
'#018701',
'#016565',
'#A94D01'
];
function getData(){ //Loads all chart data from the page
chartData = $('.chartdata_information').data('chartdata');
chartText = $('.text_information').data('text');
chartRange = $('.minmax_information').data('minmax');
for (var i = 0; i < chartData.length; i++){ //Set all the criteriaSelected to true
var criteria = [];
for (var j = 0; j < chartData[i].length; j++){
criteria.push(true);
}
criteriaSelected.push(criteria);
}
}
function generateData() { //Generates random data for testing
var rounds = 3;
for(var i = 0; i < rounds; i++) {
var criteriaNum = Math.floor(Math.random() * 5 + 5); //Random number of criteria
var round = [];
var criteria = [];
for(var j = 0; j < criteriaNum; j++) {
round.push(Math.floor(Math.random() * 101)); //Random score for each criterion
criteria.push(true); //Everything starts out true
}
chartData.push(round);
criteriaSelected.push(criteria);

chartOptions = { //Render options for the chart
title: 'Class Average on Criteria',
titleTextStyle: {
fontName: 'arial',
fontSize: 18,
italic: false,
bold: true
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var checkBox = document.getElementById("labelCheck");
checkBox.checked = true;
checkBox.style.display = "inline";
updateChart(currentRound);
loadRounds(); }
function updateChart(roundNum) { //Updates the chart with a new round number and renders
currentRound = roundNum;
renderChart();
loadCriteria();
function renderChart() { //Renders the chart if changes have been made
var data = loadData();
chartOptions.vAxis.viewWindow.max = 5;
chartOptions.vAxis.viewWindow.min = 0;
if (chartRange[currentRound]) { //Set axis ranges if they exist
if (chartRange[currentRound][1])
chartOptions.vAxis.viewWindow.max = chartRange[currentRound][1];
if (chartRange[currentRound][0])
chartOptions.vAxis.viewWindow.min = chartRange[currentRound][0];
}
chart.draw(data, chartOptions);
}

chartOptions.hAxis.ticks = [];
var rowCount = 1;
for(var i = 0; i < chartData[currentRound].length; i++) { //Add a chart row for each criterion if not null
if (criteriaSelected[currentRound][i] && chartData[currentRound][i]) {
data.addRow([rowCount, chartData[currentRound][i], barColors[0], (showLabels) ? chartData[currentRound][i].toFixed(1).toString() : ""]);
chartOptions.hAxis.ticks.push({v: rowCount++, f: (i+1).toString()});
}
}

var data = new google.visualization.DataTable();
data.addColumn('number', 'Criterion');
var i;
for(i = 0; i < roundNum; i++) { //Add all columns for the data
data.addColumn('number', 'Round ' + (i+1).toString());
data.addColumn({type: 'string', role: 'style'}); //column for specifying the bar color
data.addColumn({type: 'string', role: 'annotation'});

var newRow = [];
var elementsAdded = false;
newRow.push(rowCount);
for(var j = 0; j < roundNum; j++) { //If the round has the criterion, add it
if (chartData[j][i]) {
newRow.push(chartData[j][i]);
elementsAdded = true;
} else {
newRow.push(null);
}
newRow.push(barColors[j % barColors.length]); //Add column color
if (chartData[j] && chartData[j][i] && showLabels)
newRow.push(chartData[j][i].toFixed(1).toString()); //Add column annotations
else
newRow.push("");
}
function loadCriteria() { //Creates the criteria check boxes
var form = document.getElementById("chartCriteria");
while (form.firstChild) //Clear out the old check boxes
form.removeChild(form.firstChild);
if (currentRound == -1) //Don't show criteria for 'all rounds'
return;
chartData[currentRound].forEach(function(dat, i) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.id = "checkboxoption" + i;
checkbox.onclick = function() { //Register callback to toggle the criterion
checkboxUpdate(i);
}
var label = document.createElement('label')

<form id="chartOptions" name="chartOptions">
<select id="chartRounds" name="rounds"
onChange="updateChart(document.chartOptions.chartRounds.options[document.chartOptions.chartRounds.options.selectedIndex].value)" style = "display: none">
</select>
<label><input type="checkbox" id = "labelCheck" checked="checked" style="display: none" onclick="showLabels = !showLabels; renderChart();">Show
Labels</label>
</form>
<div id="chartCriteria" name="chartCriteria">
</div>

== app/controllers/grades_controller.rb ==

def action_allowed?
case params[:action]
when 'view_my_scores'
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator',
'Student'].include? current_role_name and
are_needed_authorizations_present?(params[:id], "reader", "reviewer") and
check_self_review_status
when 'view_team'
if ['Student'].include? current_role_name # students can only see the head map for their own team
participant = AssignmentParticipant.find(params[:id])
session[:user].id == participant.user_id
else
true
end
else
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator'].include? current_role_name
end
end
# collects the question text for display on the chart
# Added as part of E1859
def assign_chart_text
@text = []
(1..@assignment.num_review_rounds).to_a.each do |round|
question = @questions[('review' + round.to_s).to_sym]
@text[round - 1] = []
next if question.nil?
(0..(question.length - 1)).to_a.each do |q|
@text[round - 1][q] = question[q].txt
end
end
end

# find the maximum and minimum scores for each questionnaire round
# Added as part of E1859
def assign_minmax(questionnaires)
@minmax = []
questionnaires.each do |questionnaire|
next if questionnaire.symbol != :review
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
next if round.nil?
@minmax[round - 1] = []
@minmax[round - 1][0] = if !questionnaire.min_question_score.nil? and questionnaire.min_question_score < 0
questionnaire.min_question_score
else
0
end
@minmax[round - 1][1] = if !questionnaire.max_question_score.nil?
questionnaire.max_question_score
else
5
end
end
end
# this method collects and averages all the review scores across teams
# Added as part of E1859
def assign_chart_data
@rounds = @assignment.num_review_rounds
@chartdata = []
(1..@rounds).to_a.each do |round|
@teams = AssignmentTeam.where(parent_id: @assignment.id)
@teamids = []
@result = []
@responseids = []
@scoreviews = []
(0..(@teams.length - 1)).to_a.each do |t|
@teamids[t] = @teams[t].id
@result[t] = ResponseMap.find_by_sql ["SELECT id FROM response_maps
WHERE type = 'ReviewResponseMap' AND reviewee_id = ?", @teamids[t]]
@responseids[t] = []
@scoreviews[t] = []
(0..(@result[t].length - 1)).to_a.each do |r|
@responseids[t][r] = Response.find_by_sql ["SELECT id FROM responses
WHERE round = ? AND map_id = ?", round, @result[t][r]]
@scoreviews[t][r] = Answer.where(response_id: @responseids[t][r][0]) unless @responseids[t][r].empty?
end
end
@chartdata[round - 1] = []
# because the nth first elements could be nil
# iterate until a non-nil value is found or move to next round
t = 0
r = 0
t += 1 while @scoreviews[t].nil?
while t < @scoreviews.length and @scoreviews[t][r].nil?
if r < @scoreviews[t].length - 1
r += 1
else
def assign_chart_data
end
end
next if t >= @scoreviews.length
(0..(@scoreviews[t][r].length - 1)).to_a.each do |q|
sum = 0
counter = 0
def retrieve_questions(questionnaires)
questionnaires.each do |questionnaire|
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
questionnaire_symbol = if !round.nil?
(questionnaire.symbol.to_s + round.to_s).to_sym
else
questionnaire.symbol
end
@questions[questionnaire_symbol] = questionnaire.questions
end
end
def update
if format("%.2f", total_score) != params[:participant][:grade]
participant.update_attribute(:grade, params[:participant][:grade])
message = if participant.grade.nil?
"The computed score will be used for " + participant.user.name + "."
else
"A score of " + params[:participant][:grade] + "% has been saved for " + participant.user.name + "."
end
end
flash[:note] = message
redirect_to action: 'edit', id: params[:id]

== app/views/grades/_team_charts.html.erb ==

<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
var chart;
var chartOptions;
var chartData = []; //Stores all data for the chart to display
var currentRound = 0; //Stores the current displayed round
var criteriaSelected = []; //Stores selected criteria to display
function generateData() { //Generates random data for testing
var rounds = 3;
for(var i = 0; i < rounds; i++) {
var criteriaNum = Math.floor(Math.random() * 5 + 5);
var round = [];
var criteria = [];
for(var j = 0; j < criteriaNum; j++) {
round.push(Math.floor(Math.random() * 101));
criteria.push(true);
}
chartData.push(round);
criteriaSelected.push(criteria);
}
}
function drawBasic() { //Initializes all google chart information
generateData();
chartOptions = { //Render options for the chart
title: 'Average Scores',
titleTextStyle: {
fontName: 'arial', //Fonts to be changed to Helvetica when implemented
fontSize: 18,
italic: false,
bold: true
},
legend: 'none',
bar: {
groupWidth: 'default'
},
hAxis: {
title: 'Criterion',
titleTextStyle: {
fontName: 'arial',
fontSize: 14,
italic: false,
bold: false,
},
viewWindow: {
min: 0.5
}
},
vAxis: {
title: 'Average Score',
titleTextStyle: {
fontName: 'arial',
fontSize: 14,
italic: false,
bold: false
},
viewWindow: {
min: 0,
max: 100
}
}
};
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
updateChart(currentRound);
loadRounds();
}
function updateChart(roundNum) { //Updates the chart with a new round number
currentRound = roundNum;
renderChart();
loadCriteria();
}
function renderChart() { //Renders the chart if changes have been made
var data = loadData();
chart.draw(data, chartOptions);
}
function loadData() { //Pulls data from the page and renders the chart with it
var data = new google.visualization.DataTable();
data.addColumn('number', 'Criterion');
data.addColumn('number', 'Average Score');
data.addColumn({type: 'string', role: 'style'}); //column for specifying the bar color
data.addColumn({type: 'number', role: 'annotation'});
var rowCount = 1;
for(var i = 0; i < chartData[currentRound].length; i++) {
if (criteriaSelected[currentRound][i]) {
data.addRow([rowCount++, chartData[currentRound][i], '#a90201', i+1]);
}
}
return data;
}
function loadRounds() { //Creates the Rounds in the dropdown menu
var rounds = document.getElementById("chartRounds");
for(var i = 0; i < chartData.length; i++) {
var option = document.createElement('option');
option.value = i;
option.text = "Round " + (i+1);
rounds.add(option);
}
rounds.style.display = "inline";
}
function loadCriteria() { //Creates the criteria check boxes
var form = document.getElementById("chartCriteria");
while (form.firstChild)
form.removeChild(form.firstChild);
chartData[currentRound].forEach(function(dat, i) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = "value";
checkbox.id = "checkboxoption" + i;
checkbox.onclick = function() {
checkboxUpdate(i);
}
var label = document.createElement('label')
label.htmlFor = checkbox.id;
label.appendChild(document.createTextNode("Criteria " + (i+1)));
form.appendChild(checkbox);
form.appendChild(label);
form.appendChild(document.createElement("BR"));
checkbox.checked = criteriaSelected[currentRound][i];
});
}
function checkboxUpdate(checkid) { //Update function to change the displayed criteria
var check = document.getElementById("checkboxoption" + checkid);
criteriaSelected[currentRound][checkid] = check.checked;
renderChart();
}
</script>
</head>
<body>
function checkboxUpdate(checkid) {
<select id="chartRounds" name="rounds"
onChange="updateChart(document.chartOptions.chartRounds.options[document.chartOptions.chartRounds.options.selectedIndex].value)" style = "display: none">
</select>
</form>
<div id="chartCriteria" name="chartCriteria">
</div>
</body>
</html>

== Test Plan ==
The specification of the project does not require us to use automated tests. However, we plan to test the modified ruby code or the new features that will be added to the grades_controller. We will be approaching [http://rspec.info/ RSpec] testing framework. For the javascript, the tests will be conducted manually.

===JavaScript Chart===
To validate all functionality of the chart when adding new features or fixing old ones, the following criteria were tested manually for expected functionality:

# 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

===RSpec Tests===
RSpec tests were added to validate functionality of the helper methods that were added to the grades controller.

== spec/controllers/grades_controller_spec.rb ==
context 'when current assignment does not vary rubric by round' do
it 'calculates scores and renders grades#view page' do
allow(AssignmentQuestionnaire).to receive(:where).with(assignment_id: 1, used_in_round: 2).and_return([])
# added AssignmentQuestionnaire 'allow' below to handle chart functionality added in E1859
allow(AssignmentQuestionnaire).to receive(:where).with(assignment_id: 1, questionnaire_id: 1).and_return([assignment_questionnaire])
allow(ReviewResponseMap).to receive(:get_assessments_for).with(team).and_return([review_response])
params = {id: 1}
get :view, params

E1859 Visualizations for Instructors

2018-12-07T01:05:01Z

Ntripat: /* RSpec Tests */

== Introduction ==
Expertiza is an online assignment grading platform. Instructors can create assignments and implement peer reviews for submitted assignments. This project concerns the creation of a system for visualizing student performance on those assignments, primarily as graded in peer reviews. Graphs will be made to show various rubric criteria and the class' performance on the criteria. If the criteria are the same for multiple stages of review, an instructor should be able to compare performance over time or between reviews.

__TOC__

== Project Purpose ==
Our task is to provide an interactive visualization or a table for instructors that shows how their class performed on selected rubric criteria. Such feature would be immensely helpful for instructors as it would assist them to identify what they need to focus more attention on. For example, creating a graph showing the average scores for all or a certain subset of main rubric criteria (questionnaire). If the average score of the class on selected criteria (question) is low means the instructor can emphasize more on the learning materials related to it.

== Proposed Changes ==
The visualizations will be implemented as either a single or stacked bar chart with a bar for each of the selected criteria to be observed. If a single bar, then the height of the bar will be the total class average, but a stacked bar chart may be better to show the percentage of the class that received each score. The changes made to the expertiza project will primarily include HTML/ERB changes to the view files to accommodate the added charts on the page and the necessary javascript to allow responsive design. Brief controller modifications will be made to facilitate database filtering to get the displayed data.

1. On clicking Manage and then on assignments, following page appears.

[[File:S1.JPG]]

2. Click on 'view score' icon of an assignment. The summary report page of the selected assignment comes up.

[[File:A0.jpg]]

3. Following are mockup screens which we wish to create:

a) Instructor would select the round and rubric criteria of the assignment for which he/she wants to view the class performance.

[[File:A1.jpg]]

b) The bar graph of the class performance for those criteria would be displayed.

[[File:Try.jpg]]

== Project Design ==

==== Design Flow ====

The flowchart representing graphical flow of an instructor visiting view scores under assignments is given below:

[[File:A3.png]]

==== Tools and Design Choice ====

We plan to use the lightweight [https://developers.google.com/chart/ Google Charts] library for displaying the chart data on the page, with standard HTML for all of the options and dropdowns for option selection. Google Charts was chosen because of its high compatibility, full option set, and comparable graphical quality to the rest of expertiza while keeping a small JS footprint, which should help prevent slow page responsiveness.

==== Visualization ====

The following graph shows the expected view of the 'view scores' page. The instructor selects a subset of rubric criteria for which he/she wants to know how a class performed. A bar graph of the average score of the class for that subset of criteria would be displayed.

[[File:1859_Chart_Preview.png]]

The above graph shows average score of the class for 5 rubric criteria in Round 1 selected by the instructor. A live demo with randomly generated data can be found on [https://jsfiddle.net/Jereman/5uxqr92y/ JSFiddle]

== Files Involved ==
We plan to work on the files that the previous team were involved with such as controllers of grade and assignment and the view of grade and review_mapping. Hopefully there is only slight controller modifications necessary, as the chart can use the existing information collected by controller methods to display the raw details on the existing page.

Proposed files:
<div style="display: inline-block">
<pre>
app/controllers/assignments_controller.rb

app/views/grades/view.html.erb

app/views/grades/_teams.html.erb

app/views/grades/_team_title.html.erb

app/views/grades/_team_charts.html.erb

app/view/review_mapping/_review_report.html.erb
</pre>
</div>

=== Code ===
== app/views/grades/_criteria_charts.html.erb ==
<html>
<head>
<%= content_tag :div, class: "chartdata_information", data: {chartdata: @chartdata} do %>
<% end %>
<%= content_tag :div, class: "text_information", data: {text: @text} do %>
<% end %>
<%= content_tag :div, class: "minmax_information", data: {minmax: @minmax} do %>
<% end %>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
//Display Options
var showLabels = true;
var barColors = [ // Other colors generated from the expertiza base red
'#A90201', // using paletton.com
'#018701',
'#016565',
'#A94D01'
];
function getData(){ //Loads all chart data from the page
chartData = $('.chartdata_information').data('chartdata');
chartText = $('.text_information').data('text');
chartRange = $('.minmax_information').data('minmax');
for (var i = 0; i < chartData.length; i++){ //Set all the criteriaSelected to true
var criteria = [];
for (var j = 0; j < chartData[i].length; j++){
criteria.push(true);
}
criteriaSelected.push(criteria);
}
}
function generateData() { //Generates random data for testing
var rounds = 3;
for(var i = 0; i < rounds; i++) {
var criteriaNum = Math.floor(Math.random() * 5 + 5); //Random number of criteria
var round = [];
var criteria = [];
for(var j = 0; j < criteriaNum; j++) {
round.push(Math.floor(Math.random() * 101)); //Random score for each criterion
criteria.push(true); //Everything starts out true
}
chartData.push(round);
criteriaSelected.push(criteria);

chartOptions = { //Render options for the chart
title: 'Class Average on Criteria',
titleTextStyle: {
fontName: 'arial',
fontSize: 18,
italic: false,
bold: true
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var checkBox = document.getElementById("labelCheck");
checkBox.checked = true;
checkBox.style.display = "inline";
updateChart(currentRound);
loadRounds(); }
function updateChart(roundNum) { //Updates the chart with a new round number and renders
currentRound = roundNum;
renderChart();
loadCriteria();
function renderChart() { //Renders the chart if changes have been made
var data = loadData();
chartOptions.vAxis.viewWindow.max = 5;
chartOptions.vAxis.viewWindow.min = 0;
if (chartRange[currentRound]) { //Set axis ranges if they exist
if (chartRange[currentRound][1])
chartOptions.vAxis.viewWindow.max = chartRange[currentRound][1];
if (chartRange[currentRound][0])
chartOptions.vAxis.viewWindow.min = chartRange[currentRound][0];
}
chart.draw(data, chartOptions);
}

chartOptions.hAxis.ticks = [];
var rowCount = 1;
for(var i = 0; i < chartData[currentRound].length; i++) { //Add a chart row for each criterion if not null
if (criteriaSelected[currentRound][i] && chartData[currentRound][i]) {
data.addRow([rowCount, chartData[currentRound][i], barColors[0], (showLabels) ? chartData[currentRound][i].toFixed(1).toString() : ""]);
chartOptions.hAxis.ticks.push({v: rowCount++, f: (i+1).toString()});
}
}

var data = new google.visualization.DataTable();
data.addColumn('number', 'Criterion');
var i;
for(i = 0; i < roundNum; i++) { //Add all columns for the data
data.addColumn('number', 'Round ' + (i+1).toString());
data.addColumn({type: 'string', role: 'style'}); //column for specifying the bar color
data.addColumn({type: 'string', role: 'annotation'});

var newRow = [];
var elementsAdded = false;
newRow.push(rowCount);
for(var j = 0; j < roundNum; j++) { //If the round has the criterion, add it
if (chartData[j][i]) {
newRow.push(chartData[j][i]);
elementsAdded = true;
} else {
newRow.push(null);
}
newRow.push(barColors[j % barColors.length]); //Add column color
if (chartData[j] && chartData[j][i] && showLabels)
newRow.push(chartData[j][i].toFixed(1).toString()); //Add column annotations
else
newRow.push("");
}
function loadCriteria() { //Creates the criteria check boxes
var form = document.getElementById("chartCriteria");
while (form.firstChild) //Clear out the old check boxes
form.removeChild(form.firstChild);
if (currentRound == -1) //Don't show criteria for 'all rounds'
return;
chartData[currentRound].forEach(function(dat, i) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.id = "checkboxoption" + i;
checkbox.onclick = function() { //Register callback to toggle the criterion
checkboxUpdate(i);
}
var label = document.createElement('label')

<form id="chartOptions" name="chartOptions">
<select id="chartRounds" name="rounds"
onChange="updateChart(document.chartOptions.chartRounds.options[document.chartOptions.chartRounds.options.selectedIndex].value)" style = "display: none">
</select>
<label><input type="checkbox" id = "labelCheck" checked="checked" style="display: none" onclick="showLabels = !showLabels; renderChart();">Show
Labels</label>
</form>
<div id="chartCriteria" name="chartCriteria">
</div>

== app/controllers/grades_controller.rb ==

def action_allowed?
case params[:action]
when 'view_my_scores'
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator',
'Student'].include? current_role_name and
are_needed_authorizations_present?(params[:id], "reader", "reviewer") and
check_self_review_status
when 'view_team'
if ['Student'].include? current_role_name # students can only see the head map for their own team
participant = AssignmentParticipant.find(params[:id])
session[:user].id == participant.user_id
else
true
end
else
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator'].include? current_role_name
end
end
# collects the question text for display on the chart
# Added as part of E1859
def assign_chart_text
@text = []
(1..@assignment.num_review_rounds).to_a.each do |round|
question = @questions[('review' + round.to_s).to_sym]
@text[round - 1] = []
next if question.nil?
(0..(question.length - 1)).to_a.each do |q|
@text[round - 1][q] = question[q].txt
end
end
end

# find the maximum and minimum scores for each questionnaire round
# Added as part of E1859
def assign_minmax(questionnaires)
@minmax = []
questionnaires.each do |questionnaire|
next if questionnaire.symbol != :review
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
next if round.nil?
@minmax[round - 1] = []
@minmax[round - 1][0] = if !questionnaire.min_question_score.nil? and questionnaire.min_question_score < 0
questionnaire.min_question_score
else
0
end
@minmax[round - 1][1] = if !questionnaire.max_question_score.nil?
questionnaire.max_question_score
else
5
end
end
end
# this method collects and averages all the review scores across teams
# Added as part of E1859
def assign_chart_data
@rounds = @assignment.num_review_rounds
@chartdata = []
(1..@rounds).to_a.each do |round|
@teams = AssignmentTeam.where(parent_id: @assignment.id)
@teamids = []
@result = []
@responseids = []
@scoreviews = []
(0..(@teams.length - 1)).to_a.each do |t|
@teamids[t] = @teams[t].id
@result[t] = ResponseMap.find_by_sql ["SELECT id FROM response_maps
WHERE type = 'ReviewResponseMap' AND reviewee_id = ?", @teamids[t]]
@responseids[t] = []
@scoreviews[t] = []
(0..(@result[t].length - 1)).to_a.each do |r|
@responseids[t][r] = Response.find_by_sql ["SELECT id FROM responses
WHERE round = ? AND map_id = ?", round, @result[t][r]]
@scoreviews[t][r] = Answer.where(response_id: @responseids[t][r][0]) unless @responseids[t][r].empty?
end
end
@chartdata[round - 1] = []
# because the nth first elements could be nil
# iterate until a non-nil value is found or move to next round
t = 0
r = 0
t += 1 while @scoreviews[t].nil?
while t < @scoreviews.length and @scoreviews[t][r].nil?
if r < @scoreviews[t].length - 1
r += 1
else
def assign_chart_data
end
end
next if t >= @scoreviews.length
(0..(@scoreviews[t][r].length - 1)).to_a.each do |q|
sum = 0
counter = 0
def retrieve_questions(questionnaires)
questionnaires.each do |questionnaire|
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
questionnaire_symbol = if !round.nil?
(questionnaire.symbol.to_s + round.to_s).to_sym
else
questionnaire.symbol
end
@questions[questionnaire_symbol] = questionnaire.questions
end
end
def update
if format("%.2f", total_score) != params[:participant][:grade]
participant.update_attribute(:grade, params[:participant][:grade])
message = if participant.grade.nil?
"The computed score will be used for " + participant.user.name + "."
else
"A score of " + params[:participant][:grade] + "% has been saved for " + participant.user.name + "."
end
end
flash[:note] = message
redirect_to action: 'edit', id: params[:id]

== Test Plan ==
The specification of the project does not require us to use automated tests. However, we plan to test the modified ruby code or the new features that will be added to the grades_controller. We will be approaching [http://rspec.info/ RSpec] testing framework. For the javascript, the tests will be conducted manually.

===JavaScript Chart===
To validate all functionality of the chart when adding new features or fixing old ones, the following criteria were tested manually for expected functionality:

# 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

===RSpec Tests===
RSpec tests were added to validate functionality of the helper methods that were added to the grades controller.

== spec/controllers/grades_controller_spec.rb ==
context 'when current assignment does not vary rubric by round' do
it 'calculates scores and renders grades#view page' do
allow(AssignmentQuestionnaire).to receive(:where).with(assignment_id: 1, used_in_round: 2).and_return([])
# added AssignmentQuestionnaire 'allow' below to handle chart functionality added in E1859
allow(AssignmentQuestionnaire).to receive(:where).with(assignment_id: 1, questionnaire_id: 1).and_return([assignment_questionnaire])
allow(ReviewResponseMap).to receive(:get_assessments_for).with(team).and_return([review_response])
params = {id: 1}
get :view, params

E1859 Visualizations for Instructors

2018-12-07T01:00:36Z

Ntripat: /* app/views/grades/_criteria_charts.html.erb */

== Introduction ==
Expertiza is an online assignment grading platform. Instructors can create assignments and implement peer reviews for submitted assignments. This project concerns the creation of a system for visualizing student performance on those assignments, primarily as graded in peer reviews. Graphs will be made to show various rubric criteria and the class' performance on the criteria. If the criteria are the same for multiple stages of review, an instructor should be able to compare performance over time or between reviews.

__TOC__

== Project Purpose ==
Our task is to provide an interactive visualization or a table for instructors that shows how their class performed on selected rubric criteria. Such feature would be immensely helpful for instructors as it would assist them to identify what they need to focus more attention on. For example, creating a graph showing the average scores for all or a certain subset of main rubric criteria (questionnaire). If the average score of the class on selected criteria (question) is low means the instructor can emphasize more on the learning materials related to it.

== Proposed Changes ==
The visualizations will be implemented as either a single or stacked bar chart with a bar for each of the selected criteria to be observed. If a single bar, then the height of the bar will be the total class average, but a stacked bar chart may be better to show the percentage of the class that received each score. The changes made to the expertiza project will primarily include HTML/ERB changes to the view files to accommodate the added charts on the page and the necessary javascript to allow responsive design. Brief controller modifications will be made to facilitate database filtering to get the displayed data.

1. On clicking Manage and then on assignments, following page appears.

[[File:S1.JPG]]

2. Click on 'view score' icon of an assignment. The summary report page of the selected assignment comes up.

[[File:A0.jpg]]

3. Following are mockup screens which we wish to create:

a) Instructor would select the round and rubric criteria of the assignment for which he/she wants to view the class performance.

[[File:A1.jpg]]

b) The bar graph of the class performance for those criteria would be displayed.

[[File:Try.jpg]]

== Project Design ==

==== Design Flow ====

The flowchart representing graphical flow of an instructor visiting view scores under assignments is given below:

[[File:A3.png]]

==== Tools and Design Choice ====

We plan to use the lightweight [https://developers.google.com/chart/ Google Charts] library for displaying the chart data on the page, with standard HTML for all of the options and dropdowns for option selection. Google Charts was chosen because of its high compatibility, full option set, and comparable graphical quality to the rest of expertiza while keeping a small JS footprint, which should help prevent slow page responsiveness.

==== Visualization ====

The following graph shows the expected view of the 'view scores' page. The instructor selects a subset of rubric criteria for which he/she wants to know how a class performed. A bar graph of the average score of the class for that subset of criteria would be displayed.

[[File:1859_Chart_Preview.png]]

The above graph shows average score of the class for 5 rubric criteria in Round 1 selected by the instructor. A live demo with randomly generated data can be found on [https://jsfiddle.net/Jereman/5uxqr92y/ JSFiddle]

== Files Involved ==
We plan to work on the files that the previous team were involved with such as controllers of grade and assignment and the view of grade and review_mapping. Hopefully there is only slight controller modifications necessary, as the chart can use the existing information collected by controller methods to display the raw details on the existing page.

Proposed files:
<div style="display: inline-block">
<pre>
app/controllers/assignments_controller.rb

app/views/grades/view.html.erb

app/views/grades/_teams.html.erb

app/views/grades/_team_title.html.erb

app/views/grades/_team_charts.html.erb

app/view/review_mapping/_review_report.html.erb
</pre>
</div>

=== Code ===
== app/views/grades/_criteria_charts.html.erb ==
<html>
<head>
<%= content_tag :div, class: "chartdata_information", data: {chartdata: @chartdata} do %>
<% end %>
<%= content_tag :div, class: "text_information", data: {text: @text} do %>
<% end %>
<%= content_tag :div, class: "minmax_information", data: {minmax: @minmax} do %>
<% end %>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
//Display Options
var showLabels = true;
var barColors = [ // Other colors generated from the expertiza base red
'#A90201', // using paletton.com
'#018701',
'#016565',
'#A94D01'
];
function getData(){ //Loads all chart data from the page
chartData = $('.chartdata_information').data('chartdata');
chartText = $('.text_information').data('text');
chartRange = $('.minmax_information').data('minmax');
for (var i = 0; i < chartData.length; i++){ //Set all the criteriaSelected to true
var criteria = [];
for (var j = 0; j < chartData[i].length; j++){
criteria.push(true);
}
criteriaSelected.push(criteria);
}
}
function generateData() { //Generates random data for testing
var rounds = 3;
for(var i = 0; i < rounds; i++) {
var criteriaNum = Math.floor(Math.random() * 5 + 5); //Random number of criteria
var round = [];
var criteria = [];
for(var j = 0; j < criteriaNum; j++) {
round.push(Math.floor(Math.random() * 101)); //Random score for each criterion
criteria.push(true); //Everything starts out true
}
chartData.push(round);
criteriaSelected.push(criteria);

chartOptions = { //Render options for the chart
title: 'Class Average on Criteria',
titleTextStyle: {
fontName: 'arial',
fontSize: 18,
italic: false,
bold: true
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var checkBox = document.getElementById("labelCheck");
checkBox.checked = true;
checkBox.style.display = "inline";
updateChart(currentRound);
loadRounds(); }
function updateChart(roundNum) { //Updates the chart with a new round number and renders
currentRound = roundNum;
renderChart();
loadCriteria();
function renderChart() { //Renders the chart if changes have been made
var data = loadData();
chartOptions.vAxis.viewWindow.max = 5;
chartOptions.vAxis.viewWindow.min = 0;
if (chartRange[currentRound]) { //Set axis ranges if they exist
if (chartRange[currentRound][1])
chartOptions.vAxis.viewWindow.max = chartRange[currentRound][1];
if (chartRange[currentRound][0])
chartOptions.vAxis.viewWindow.min = chartRange[currentRound][0];
}
chart.draw(data, chartOptions);
}

chartOptions.hAxis.ticks = [];
var rowCount = 1;
for(var i = 0; i < chartData[currentRound].length; i++) { //Add a chart row for each criterion if not null
if (criteriaSelected[currentRound][i] && chartData[currentRound][i]) {
data.addRow([rowCount, chartData[currentRound][i], barColors[0], (showLabels) ? chartData[currentRound][i].toFixed(1).toString() : ""]);
chartOptions.hAxis.ticks.push({v: rowCount++, f: (i+1).toString()});
}
}

var data = new google.visualization.DataTable();
data.addColumn('number', 'Criterion');
var i;
for(i = 0; i < roundNum; i++) { //Add all columns for the data
data.addColumn('number', 'Round ' + (i+1).toString());
data.addColumn({type: 'string', role: 'style'}); //column for specifying the bar color
data.addColumn({type: 'string', role: 'annotation'});

var newRow = [];
var elementsAdded = false;
newRow.push(rowCount);
for(var j = 0; j < roundNum; j++) { //If the round has the criterion, add it
if (chartData[j][i]) {
newRow.push(chartData[j][i]);
elementsAdded = true;
} else {
newRow.push(null);
}
newRow.push(barColors[j % barColors.length]); //Add column color
if (chartData[j] && chartData[j][i] && showLabels)
newRow.push(chartData[j][i].toFixed(1).toString()); //Add column annotations
else
newRow.push("");
}
function loadCriteria() { //Creates the criteria check boxes
var form = document.getElementById("chartCriteria");
while (form.firstChild) //Clear out the old check boxes
form.removeChild(form.firstChild);
if (currentRound == -1) //Don't show criteria for 'all rounds'
return;
chartData[currentRound].forEach(function(dat, i) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.id = "checkboxoption" + i;
checkbox.onclick = function() { //Register callback to toggle the criterion
checkboxUpdate(i);
}
var label = document.createElement('label')

<form id="chartOptions" name="chartOptions">
<select id="chartRounds" name="rounds"
onChange="updateChart(document.chartOptions.chartRounds.options[document.chartOptions.chartRounds.options.selectedIndex].value)" style = "display: none">
</select>
<label><input type="checkbox" id = "labelCheck" checked="checked" style="display: none" onclick="showLabels = !showLabels; renderChart();">Show
Labels</label>
</form>
<div id="chartCriteria" name="chartCriteria">
</div>

== app/controllers/grades_controller.rb ==

def action_allowed?
case params[:action]
when 'view_my_scores'
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator',
'Student'].include? current_role_name and
are_needed_authorizations_present?(params[:id], "reader", "reviewer") and
check_self_review_status
when 'view_team'
if ['Student'].include? current_role_name # students can only see the head map for their own team
participant = AssignmentParticipant.find(params[:id])
session[:user].id == participant.user_id
else
true
end
else
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator'].include? current_role_name
end
end
# collects the question text for display on the chart
# Added as part of E1859
def assign_chart_text
@text = []
(1..@assignment.num_review_rounds).to_a.each do |round|
question = @questions[('review' + round.to_s).to_sym]
@text[round - 1] = []
next if question.nil?
(0..(question.length - 1)).to_a.each do |q|
@text[round - 1][q] = question[q].txt
end
end
end

# find the maximum and minimum scores for each questionnaire round
# Added as part of E1859
def assign_minmax(questionnaires)
@minmax = []
questionnaires.each do |questionnaire|
next if questionnaire.symbol != :review
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
next if round.nil?
@minmax[round - 1] = []
@minmax[round - 1][0] = if !questionnaire.min_question_score.nil? and questionnaire.min_question_score < 0
questionnaire.min_question_score
else
0
end
@minmax[round - 1][1] = if !questionnaire.max_question_score.nil?
questionnaire.max_question_score
else
5
end
end
end
# this method collects and averages all the review scores across teams
# Added as part of E1859
def assign_chart_data
@rounds = @assignment.num_review_rounds
@chartdata = []
(1..@rounds).to_a.each do |round|
@teams = AssignmentTeam.where(parent_id: @assignment.id)
@teamids = []
@result = []
@responseids = []
@scoreviews = []
(0..(@teams.length - 1)).to_a.each do |t|
@teamids[t] = @teams[t].id
@result[t] = ResponseMap.find_by_sql ["SELECT id FROM response_maps
WHERE type = 'ReviewResponseMap' AND reviewee_id = ?", @teamids[t]]
@responseids[t] = []
@scoreviews[t] = []
(0..(@result[t].length - 1)).to_a.each do |r|
@responseids[t][r] = Response.find_by_sql ["SELECT id FROM responses
WHERE round = ? AND map_id = ?", round, @result[t][r]]
@scoreviews[t][r] = Answer.where(response_id: @responseids[t][r][0]) unless @responseids[t][r].empty?
end
end
@chartdata[round - 1] = []
# because the nth first elements could be nil
# iterate until a non-nil value is found or move to next round
t = 0
r = 0
t += 1 while @scoreviews[t].nil?
while t < @scoreviews.length and @scoreviews[t][r].nil?
if r < @scoreviews[t].length - 1
r += 1
else
def assign_chart_data
end
end
next if t >= @scoreviews.length
(0..(@scoreviews[t][r].length - 1)).to_a.each do |q|
sum = 0
counter = 0
def retrieve_questions(questionnaires)
questionnaires.each do |questionnaire|
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
questionnaire_symbol = if !round.nil?
(questionnaire.symbol.to_s + round.to_s).to_sym
else
questionnaire.symbol
end
@questions[questionnaire_symbol] = questionnaire.questions
end
end
def update
if format("%.2f", total_score) != params[:participant][:grade]
participant.update_attribute(:grade, params[:participant][:grade])
message = if participant.grade.nil?
"The computed score will be used for " + participant.user.name + "."
else
"A score of " + params[:participant][:grade] + "% has been saved for " + participant.user.name + "."
end
end
flash[:note] = message
redirect_to action: 'edit', id: params[:id]

== Test Plan ==
The specification of the project does not require us to use automated tests. However, we plan to test the modified ruby code or the new features that will be added to the grades_controller. We will be approaching [http://rspec.info/ RSpec] testing framework. For the javascript, the tests will be conducted manually.

===JavaScript Chart===
To validate all functionality of the chart when adding new features or fixing old ones, the following criteria were tested manually for expected functionality:

# 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

===RSpec Tests===
RSpec tests were added to validate functionality of the helper methods that were added to the grades controller.

E1859 Visualizations for Instructors

2018-12-07T01:00:20Z

Ntripat: /* app/views/grades/_criteria_charts.html.erb */

== Introduction ==
Expertiza is an online assignment grading platform. Instructors can create assignments and implement peer reviews for submitted assignments. This project concerns the creation of a system for visualizing student performance on those assignments, primarily as graded in peer reviews. Graphs will be made to show various rubric criteria and the class' performance on the criteria. If the criteria are the same for multiple stages of review, an instructor should be able to compare performance over time or between reviews.

__TOC__

== Project Purpose ==
Our task is to provide an interactive visualization or a table for instructors that shows how their class performed on selected rubric criteria. Such feature would be immensely helpful for instructors as it would assist them to identify what they need to focus more attention on. For example, creating a graph showing the average scores for all or a certain subset of main rubric criteria (questionnaire). If the average score of the class on selected criteria (question) is low means the instructor can emphasize more on the learning materials related to it.

== Proposed Changes ==
The visualizations will be implemented as either a single or stacked bar chart with a bar for each of the selected criteria to be observed. If a single bar, then the height of the bar will be the total class average, but a stacked bar chart may be better to show the percentage of the class that received each score. The changes made to the expertiza project will primarily include HTML/ERB changes to the view files to accommodate the added charts on the page and the necessary javascript to allow responsive design. Brief controller modifications will be made to facilitate database filtering to get the displayed data.

1. On clicking Manage and then on assignments, following page appears.

[[File:S1.JPG]]

2. Click on 'view score' icon of an assignment. The summary report page of the selected assignment comes up.

[[File:A0.jpg]]

3. Following are mockup screens which we wish to create:

a) Instructor would select the round and rubric criteria of the assignment for which he/she wants to view the class performance.

[[File:A1.jpg]]

b) The bar graph of the class performance for those criteria would be displayed.

[[File:Try.jpg]]

== Project Design ==

==== Design Flow ====

The flowchart representing graphical flow of an instructor visiting view scores under assignments is given below:

[[File:A3.png]]

==== Tools and Design Choice ====

We plan to use the lightweight [https://developers.google.com/chart/ Google Charts] library for displaying the chart data on the page, with standard HTML for all of the options and dropdowns for option selection. Google Charts was chosen because of its high compatibility, full option set, and comparable graphical quality to the rest of expertiza while keeping a small JS footprint, which should help prevent slow page responsiveness.

==== Visualization ====

The following graph shows the expected view of the 'view scores' page. The instructor selects a subset of rubric criteria for which he/she wants to know how a class performed. A bar graph of the average score of the class for that subset of criteria would be displayed.

[[File:1859_Chart_Preview.png]]

The above graph shows average score of the class for 5 rubric criteria in Round 1 selected by the instructor. A live demo with randomly generated data can be found on [https://jsfiddle.net/Jereman/5uxqr92y/ JSFiddle]

== Files Involved ==
We plan to work on the files that the previous team were involved with such as controllers of grade and assignment and the view of grade and review_mapping. Hopefully there is only slight controller modifications necessary, as the chart can use the existing information collected by controller methods to display the raw details on the existing page.

Proposed files:
<div style="display: inline-block">
<pre>
app/controllers/assignments_controller.rb

app/views/grades/view.html.erb

app/views/grades/_teams.html.erb

app/views/grades/_team_title.html.erb

app/views/grades/_team_charts.html.erb

app/view/review_mapping/_review_report.html.erb
</pre>
</div>

=== Code ===
== app/views/grades/_criteria_charts.html.erb ==
<html>
<head>
<%= content_tag :div, class: "chartdata_information", data: {chartdata: @chartdata} do %>
<% end %>
<%= content_tag :div, class: "text_information", data: {text: @text} do %>
<% end %>
<%= content_tag :div, class: "minmax_information", data: {minmax: @minmax} do %>
<% end %>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});

//Display Options
var showLabels = true;
var barColors = [ // Other colors generated from the expertiza base red
'#A90201', // using paletton.com
'#018701',
'#016565',
'#A94D01'
];
function getData(){ //Loads all chart data from the page
chartData = $('.chartdata_information').data('chartdata');
chartText = $('.text_information').data('text');
chartRange = $('.minmax_information').data('minmax');
for (var i = 0; i < chartData.length; i++){ //Set all the criteriaSelected to true
var criteria = [];
for (var j = 0; j < chartData[i].length; j++){
criteria.push(true);
}
criteriaSelected.push(criteria);
}
}
function generateData() { //Generates random data for testing
var rounds = 3;
for(var i = 0; i < rounds; i++) {
var criteriaNum = Math.floor(Math.random() * 5 + 5); //Random number of criteria
var round = [];
var criteria = [];
for(var j = 0; j < criteriaNum; j++) {
round.push(Math.floor(Math.random() * 101)); //Random score for each criterion
criteria.push(true); //Everything starts out true
}
chartData.push(round);
criteriaSelected.push(criteria);

chartOptions = { //Render options for the chart
title: 'Class Average on Criteria',
titleTextStyle: {
fontName: 'arial',
fontSize: 18,
italic: false,
bold: true
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var checkBox = document.getElementById("labelCheck");
checkBox.checked = true;
checkBox.style.display = "inline";
updateChart(currentRound);
loadRounds(); }
function updateChart(roundNum) { //Updates the chart with a new round number and renders
currentRound = roundNum;
renderChart();
loadCriteria();
function renderChart() { //Renders the chart if changes have been made
var data = loadData();
chartOptions.vAxis.viewWindow.max = 5;
chartOptions.vAxis.viewWindow.min = 0;
if (chartRange[currentRound]) { //Set axis ranges if they exist
if (chartRange[currentRound][1])
chartOptions.vAxis.viewWindow.max = chartRange[currentRound][1];
if (chartRange[currentRound][0])
chartOptions.vAxis.viewWindow.min = chartRange[currentRound][0];
}
chart.draw(data, chartOptions);
}

chartOptions.hAxis.ticks = [];
var rowCount = 1;
for(var i = 0; i < chartData[currentRound].length; i++) { //Add a chart row for each criterion if not null
if (criteriaSelected[currentRound][i] && chartData[currentRound][i]) {
data.addRow([rowCount, chartData[currentRound][i], barColors[0], (showLabels) ? chartData[currentRound][i].toFixed(1).toString() : ""]);
chartOptions.hAxis.ticks.push({v: rowCount++, f: (i+1).toString()});
}
}

var data = new google.visualization.DataTable();
data.addColumn('number', 'Criterion');
var i;
for(i = 0; i < roundNum; i++) { //Add all columns for the data
data.addColumn('number', 'Round ' + (i+1).toString());
data.addColumn({type: 'string', role: 'style'}); //column for specifying the bar color
data.addColumn({type: 'string', role: 'annotation'});

var newRow = [];
var elementsAdded = false;
newRow.push(rowCount);
for(var j = 0; j < roundNum; j++) { //If the round has the criterion, add it
if (chartData[j][i]) {
newRow.push(chartData[j][i]);
elementsAdded = true;
} else {
newRow.push(null);
}
newRow.push(barColors[j % barColors.length]); //Add column color
if (chartData[j] && chartData[j][i] && showLabels)
newRow.push(chartData[j][i].toFixed(1).toString()); //Add column annotations
else
newRow.push("");
}
function loadCriteria() { //Creates the criteria check boxes
var form = document.getElementById("chartCriteria");
while (form.firstChild) //Clear out the old check boxes
form.removeChild(form.firstChild);
if (currentRound == -1) //Don't show criteria for 'all rounds'
return;
chartData[currentRound].forEach(function(dat, i) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.id = "checkboxoption" + i;
checkbox.onclick = function() { //Register callback to toggle the criterion
checkboxUpdate(i);
}
var label = document.createElement('label')

<form id="chartOptions" name="chartOptions">
<select id="chartRounds" name="rounds"
onChange="updateChart(document.chartOptions.chartRounds.options[document.chartOptions.chartRounds.options.selectedIndex].value)" style = "display: none">
</select>
<label><input type="checkbox" id = "labelCheck" checked="checked" style="display: none" onclick="showLabels = !showLabels; renderChart();">Show
Labels</label>
</form>
<div id="chartCriteria" name="chartCriteria">
</div>

== app/controllers/grades_controller.rb ==

def action_allowed?
case params[:action]
when 'view_my_scores'
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator',
'Student'].include? current_role_name and
are_needed_authorizations_present?(params[:id], "reader", "reviewer") and
check_self_review_status
when 'view_team'
if ['Student'].include? current_role_name # students can only see the head map for their own team
participant = AssignmentParticipant.find(params[:id])
session[:user].id == participant.user_id
else
true
end
else
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator'].include? current_role_name
end
end
# collects the question text for display on the chart
# Added as part of E1859
def assign_chart_text
@text = []
(1..@assignment.num_review_rounds).to_a.each do |round|
question = @questions[('review' + round.to_s).to_sym]
@text[round - 1] = []
next if question.nil?
(0..(question.length - 1)).to_a.each do |q|
@text[round - 1][q] = question[q].txt
end
end
end

# find the maximum and minimum scores for each questionnaire round
# Added as part of E1859
def assign_minmax(questionnaires)
@minmax = []
questionnaires.each do |questionnaire|
next if questionnaire.symbol != :review
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
next if round.nil?
@minmax[round - 1] = []
@minmax[round - 1][0] = if !questionnaire.min_question_score.nil? and questionnaire.min_question_score < 0
questionnaire.min_question_score
else
0
end
@minmax[round - 1][1] = if !questionnaire.max_question_score.nil?
questionnaire.max_question_score
else
5
end
end
end
# this method collects and averages all the review scores across teams
# Added as part of E1859
def assign_chart_data
@rounds = @assignment.num_review_rounds
@chartdata = []
(1..@rounds).to_a.each do |round|
@teams = AssignmentTeam.where(parent_id: @assignment.id)
@teamids = []
@result = []
@responseids = []
@scoreviews = []
(0..(@teams.length - 1)).to_a.each do |t|
@teamids[t] = @teams[t].id
@result[t] = ResponseMap.find_by_sql ["SELECT id FROM response_maps
WHERE type = 'ReviewResponseMap' AND reviewee_id = ?", @teamids[t]]
@responseids[t] = []
@scoreviews[t] = []
(0..(@result[t].length - 1)).to_a.each do |r|
@responseids[t][r] = Response.find_by_sql ["SELECT id FROM responses
WHERE round = ? AND map_id = ?", round, @result[t][r]]
@scoreviews[t][r] = Answer.where(response_id: @responseids[t][r][0]) unless @responseids[t][r].empty?
end
end
@chartdata[round - 1] = []
# because the nth first elements could be nil
# iterate until a non-nil value is found or move to next round
t = 0
r = 0
t += 1 while @scoreviews[t].nil?
while t < @scoreviews.length and @scoreviews[t][r].nil?
if r < @scoreviews[t].length - 1
r += 1
else
def assign_chart_data
end
end
next if t >= @scoreviews.length
(0..(@scoreviews[t][r].length - 1)).to_a.each do |q|
sum = 0
counter = 0
def retrieve_questions(questionnaires)
questionnaires.each do |questionnaire|
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
questionnaire_symbol = if !round.nil?
(questionnaire.symbol.to_s + round.to_s).to_sym
else
questionnaire.symbol
end
@questions[questionnaire_symbol] = questionnaire.questions
end
end
def update
if format("%.2f", total_score) != params[:participant][:grade]
participant.update_attribute(:grade, params[:participant][:grade])
message = if participant.grade.nil?
"The computed score will be used for " + participant.user.name + "."
else
"A score of " + params[:participant][:grade] + "% has been saved for " + participant.user.name + "."
end
end
flash[:note] = message
redirect_to action: 'edit', id: params[:id]

== Test Plan ==
The specification of the project does not require us to use automated tests. However, we plan to test the modified ruby code or the new features that will be added to the grades_controller. We will be approaching [http://rspec.info/ RSpec] testing framework. For the javascript, the tests will be conducted manually.

===JavaScript Chart===
To validate all functionality of the chart when adding new features or fixing old ones, the following criteria were tested manually for expected functionality:

# 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

===RSpec Tests===
RSpec tests were added to validate functionality of the helper methods that were added to the grades controller.

E1859 Visualizations for Instructors

2018-12-07T00:58:00Z

Ntripat: /* app/controllers/grades_controller.rb */

== Introduction ==
Expertiza is an online assignment grading platform. Instructors can create assignments and implement peer reviews for submitted assignments. This project concerns the creation of a system for visualizing student performance on those assignments, primarily as graded in peer reviews. Graphs will be made to show various rubric criteria and the class' performance on the criteria. If the criteria are the same for multiple stages of review, an instructor should be able to compare performance over time or between reviews.

__TOC__

== Project Purpose ==
Our task is to provide an interactive visualization or a table for instructors that shows how their class performed on selected rubric criteria. Such feature would be immensely helpful for instructors as it would assist them to identify what they need to focus more attention on. For example, creating a graph showing the average scores for all or a certain subset of main rubric criteria (questionnaire). If the average score of the class on selected criteria (question) is low means the instructor can emphasize more on the learning materials related to it.

== Proposed Changes ==
The visualizations will be implemented as either a single or stacked bar chart with a bar for each of the selected criteria to be observed. If a single bar, then the height of the bar will be the total class average, but a stacked bar chart may be better to show the percentage of the class that received each score. The changes made to the expertiza project will primarily include HTML/ERB changes to the view files to accommodate the added charts on the page and the necessary javascript to allow responsive design. Brief controller modifications will be made to facilitate database filtering to get the displayed data.

1. On clicking Manage and then on assignments, following page appears.

[[File:S1.JPG]]

2. Click on 'view score' icon of an assignment. The summary report page of the selected assignment comes up.

[[File:A0.jpg]]

3. Following are mockup screens which we wish to create:

a) Instructor would select the round and rubric criteria of the assignment for which he/she wants to view the class performance.

[[File:A1.jpg]]

b) The bar graph of the class performance for those criteria would be displayed.

[[File:Try.jpg]]

== Project Design ==

==== Design Flow ====

The flowchart representing graphical flow of an instructor visiting view scores under assignments is given below:

[[File:A3.png]]

==== Tools and Design Choice ====

We plan to use the lightweight [https://developers.google.com/chart/ Google Charts] library for displaying the chart data on the page, with standard HTML for all of the options and dropdowns for option selection. Google Charts was chosen because of its high compatibility, full option set, and comparable graphical quality to the rest of expertiza while keeping a small JS footprint, which should help prevent slow page responsiveness.

==== Visualization ====

The following graph shows the expected view of the 'view scores' page. The instructor selects a subset of rubric criteria for which he/she wants to know how a class performed. A bar graph of the average score of the class for that subset of criteria would be displayed.

[[File:1859_Chart_Preview.png]]

The above graph shows average score of the class for 5 rubric criteria in Round 1 selected by the instructor. A live demo with randomly generated data can be found on [https://jsfiddle.net/Jereman/5uxqr92y/ JSFiddle]

== Files Involved ==
We plan to work on the files that the previous team were involved with such as controllers of grade and assignment and the view of grade and review_mapping. Hopefully there is only slight controller modifications necessary, as the chart can use the existing information collected by controller methods to display the raw details on the existing page.

Proposed files:
<div style="display: inline-block">
<pre>
app/controllers/assignments_controller.rb

app/views/grades/view.html.erb

app/views/grades/_teams.html.erb

app/views/grades/_team_title.html.erb

app/views/grades/_team_charts.html.erb

app/view/review_mapping/_review_report.html.erb
</pre>
</div>

=== Code ===
== app/views/grades/_criteria_charts.html.erb ==
<html>
<head>
<%= content_tag :div, class: "chartdata_information", data: {chartdata: @chartdata} do %>
<% end %>
<%= content_tag :div, class: "text_information", data: {text: @text} do %>
<% end %>
<%= content_tag :div, class: "minmax_information", data: {minmax: @minmax} do %>
<% end %>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
@@ -55,29 +22,35 @@
//Display Options
var showLabels = true;
var barColors = [ // Other colors generated from the expertiza base red
'#A90201', // using paletton.com
'#018701',
'#016565',
'#A94D01'
];
function getData(){ //Loads all chart data from the page
chartData = $('.chartdata_information').data('chartdata');
chartText = $('.text_information').data('text');
chartRange = $('.minmax_information').data('minmax');
for (var i = 0; i < chartData.length; i++){ //Set all the criteriaSelected to true
var criteria = [];
for (var j = 0; j < chartData[i].length; j++){
criteria.push(true);
}
criteriaSelected.push(criteria);
}
}
function generateData() { //Generates random data for testing
var rounds = 3;
for(var i = 0; i < rounds; i++) {
var criteriaNum = Math.floor(Math.random() * 5 + 5); //Random number of criteria
var round = [];
var criteria = [];
for(var j = 0; j < criteriaNum; j++) {
round.push(Math.floor(Math.random() * 101)); //Random score for each criterion
criteria.push(true); //Everything starts out true
}
chartData.push(round);
criteriaSelected.push(criteria);
@@ -89,7 +62,7 @@
chartOptions = { //Render options for the chart
title: 'Class Average on Criteria',
titleTextStyle: {
fontName: 'arial',
fontSize: 18,
italic: false,
bold: true
@@ -130,12 +103,12 @@
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var checkBox = document.getElementById("labelCheck");
checkBox.checked = true;
checkBox.style.display = "inline";
updateChart(currentRound);
loadRounds(); }
function updateChart(roundNum) { //Updates the chart with a new round number and renders
currentRound = roundNum;
renderChart();
loadCriteria();
@@ -150,18 +123,13 @@
function renderChart() { //Renders the chart if changes have been made
var data = loadData();
chartOptions.vAxis.viewWindow.max = 5;
chartOptions.vAxis.viewWindow.min = 0;
if (chartRange[currentRound]) { //Set axis ranges if they exist
if (chartRange[currentRound][1])
chartOptions.vAxis.viewWindow.max = chartRange[currentRound][1];
if (chartRange[currentRound][0])
chartOptions.vAxis.viewWindow.min = chartRange[currentRound][0];
}
chart.draw(data, chartOptions);
}
@@ -177,9 +145,9 @@
chartOptions.hAxis.ticks = [];
var rowCount = 1;
for(var i = 0; i < chartData[currentRound].length; i++) { //Add a chart row for each criterion if not null
if (criteriaSelected[currentRound][i] && chartData[currentRound][i]) {
data.addRow([rowCount, chartData[currentRound][i], barColors[0], (showLabels) ? chartData[currentRound][i].toFixed(1).toString() : ""]);
chartOptions.hAxis.ticks.push({v: rowCount++, f: (i+1).toString()});
}
}
@@ -192,7 +160,7 @@
var data = new google.visualization.DataTable();
data.addColumn('number', 'Criterion');
var i;
for(i = 0; i < roundNum; i++) { //Add all columns for the data
data.addColumn('number', 'Round ' + (i+1).toString());
data.addColumn({type: 'string', role: 'style'}); //column for specifying the bar color
data.addColumn({type: 'string', role: 'annotation'});
@@ -208,16 +176,16 @@
var newRow = [];
var elementsAdded = false;
newRow.push(rowCount);
for(var j = 0; j < roundNum; j++) { //If the round has the criterion, add it
if (chartData[j][i]) {
newRow.push(chartData[j][i]);
elementsAdded = true;
} else {
newRow.push(null);
}
newRow.push(barColors[j % barColors.length]); //Add column color
if (chartData[j] && chartData[j][i] && showLabels)
newRow.push(chartData[j][i].toFixed(1).toString()); //Add column annotations
else
newRow.push("");
}
@@ -249,15 +217,15 @@
function loadCriteria() { //Creates the criteria check boxes
var form = document.getElementById("chartCriteria");
while (form.firstChild) //Clear out the old check boxes
form.removeChild(form.firstChild);
if (currentRound == -1) //Don't show criteria for 'all rounds'
return;
chartData[currentRound].forEach(function(dat, i) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.id = "checkboxoption" + i;
checkbox.onclick = function() { //Register callback to toggle the criterion
checkboxUpdate(i);
}
var label = document.createElement('label')
@@ -285,7 +253,7 @@
<form id="chartOptions" name="chartOptions">
<select id="chartRounds" name="rounds"
onChange="updateChart(document.chartOptions.chartRounds.options[document.chartOptions.chartRounds.options.selectedIndex].value)" style = "display: none">
</select>
<label><input type="checkbox" id = "labelCheck" checked="checked" style="display: none" onclick="showLabels = !showLabels; renderChart();">Show
Labels</label>
</form>
<div id="chartCriteria" name="chartCriteria">
</div>

== app/controllers/grades_controller.rb ==

def action_allowed?
case params[:action]
when 'view_my_scores'
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator',
'Student'].include? current_role_name and
are_needed_authorizations_present?(params[:id], "reader", "reviewer") and
check_self_review_status
when 'view_team'
if ['Student'].include? current_role_name # students can only see the head map for their own team
participant = AssignmentParticipant.find(params[:id])
session[:user].id == participant.user_id
else
true
end
else
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator'].include? current_role_name
end
end
# collects the question text for display on the chart
# Added as part of E1859
def assign_chart_text
@text = []
(1..@assignment.num_review_rounds).to_a.each do |round|
question = @questions[('review' + round.to_s).to_sym]
@text[round - 1] = []
next if question.nil?
(0..(question.length - 1)).to_a.each do |q|
@text[round - 1][q] = question[q].txt
end
end
end

# find the maximum and minimum scores for each questionnaire round
# Added as part of E1859
def assign_minmax(questionnaires)
@minmax = []
questionnaires.each do |questionnaire|
next if questionnaire.symbol != :review
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
next if round.nil?
@minmax[round - 1] = []
@minmax[round - 1][0] = if !questionnaire.min_question_score.nil? and questionnaire.min_question_score < 0
questionnaire.min_question_score
else
0
end
@minmax[round - 1][1] = if !questionnaire.max_question_score.nil?
questionnaire.max_question_score
else
5
end
end
end
# this method collects and averages all the review scores across teams
# Added as part of E1859
def assign_chart_data
@rounds = @assignment.num_review_rounds
@chartdata = []
(1..@rounds).to_a.each do |round|
@teams = AssignmentTeam.where(parent_id: @assignment.id)
@teamids = []
@result = []
@responseids = []
@scoreviews = []
(0..(@teams.length - 1)).to_a.each do |t|
@teamids[t] = @teams[t].id
@result[t] = ResponseMap.find_by_sql ["SELECT id FROM response_maps
WHERE type = 'ReviewResponseMap' AND reviewee_id = ?", @teamids[t]]
@responseids[t] = []
@scoreviews[t] = []
(0..(@result[t].length - 1)).to_a.each do |r|
@responseids[t][r] = Response.find_by_sql ["SELECT id FROM responses
WHERE round = ? AND map_id = ?", round, @result[t][r]]
@scoreviews[t][r] = Answer.where(response_id: @responseids[t][r][0]) unless @responseids[t][r].empty?
end
end
@chartdata[round - 1] = []
# because the nth first elements could be nil
# iterate until a non-nil value is found or move to next round
t = 0
r = 0
t += 1 while @scoreviews[t].nil?
while t < @scoreviews.length and @scoreviews[t][r].nil?
if r < @scoreviews[t].length - 1
r += 1
else
def assign_chart_data
end
end
next if t >= @scoreviews.length
(0..(@scoreviews[t][r].length - 1)).to_a.each do |q|
sum = 0
counter = 0
def retrieve_questions(questionnaires)
questionnaires.each do |questionnaire|
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
questionnaire_symbol = if !round.nil?
(questionnaire.symbol.to_s + round.to_s).to_sym
else
questionnaire.symbol
end
@questions[questionnaire_symbol] = questionnaire.questions
end
end
def update
if format("%.2f", total_score) != params[:participant][:grade]
participant.update_attribute(:grade, params[:participant][:grade])
message = if participant.grade.nil?
"The computed score will be used for " + participant.user.name + "."
else
"A score of " + params[:participant][:grade] + "% has been saved for " + participant.user.name + "."
end
end
flash[:note] = message
redirect_to action: 'edit', id: params[:id]

== Test Plan ==
The specification of the project does not require us to use automated tests. However, we plan to test the modified ruby code or the new features that will be added to the grades_controller. We will be approaching [http://rspec.info/ RSpec] testing framework. For the javascript, the tests will be conducted manually.

===JavaScript Chart===
To validate all functionality of the chart when adding new features or fixing old ones, the following criteria were tested manually for expected functionality:

# 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

===RSpec Tests===
RSpec tests were added to validate functionality of the helper methods that were added to the grades controller.

E1859 Visualizations for Instructors

2018-12-07T00:56:28Z

Ntripat: /* app/controllers/grades_controller.rb */

== Introduction ==
Expertiza is an online assignment grading platform. Instructors can create assignments and implement peer reviews for submitted assignments. This project concerns the creation of a system for visualizing student performance on those assignments, primarily as graded in peer reviews. Graphs will be made to show various rubric criteria and the class' performance on the criteria. If the criteria are the same for multiple stages of review, an instructor should be able to compare performance over time or between reviews.

__TOC__

== Project Purpose ==
Our task is to provide an interactive visualization or a table for instructors that shows how their class performed on selected rubric criteria. Such feature would be immensely helpful for instructors as it would assist them to identify what they need to focus more attention on. For example, creating a graph showing the average scores for all or a certain subset of main rubric criteria (questionnaire). If the average score of the class on selected criteria (question) is low means the instructor can emphasize more on the learning materials related to it.

== Proposed Changes ==
The visualizations will be implemented as either a single or stacked bar chart with a bar for each of the selected criteria to be observed. If a single bar, then the height of the bar will be the total class average, but a stacked bar chart may be better to show the percentage of the class that received each score. The changes made to the expertiza project will primarily include HTML/ERB changes to the view files to accommodate the added charts on the page and the necessary javascript to allow responsive design. Brief controller modifications will be made to facilitate database filtering to get the displayed data.

1. On clicking Manage and then on assignments, following page appears.

[[File:S1.JPG]]

2. Click on 'view score' icon of an assignment. The summary report page of the selected assignment comes up.

[[File:A0.jpg]]

3. Following are mockup screens which we wish to create:

a) Instructor would select the round and rubric criteria of the assignment for which he/she wants to view the class performance.

[[File:A1.jpg]]

b) The bar graph of the class performance for those criteria would be displayed.

[[File:Try.jpg]]

== Project Design ==

==== Design Flow ====

The flowchart representing graphical flow of an instructor visiting view scores under assignments is given below:

[[File:A3.png]]

==== Tools and Design Choice ====

We plan to use the lightweight [https://developers.google.com/chart/ Google Charts] library for displaying the chart data on the page, with standard HTML for all of the options and dropdowns for option selection. Google Charts was chosen because of its high compatibility, full option set, and comparable graphical quality to the rest of expertiza while keeping a small JS footprint, which should help prevent slow page responsiveness.

==== Visualization ====

The following graph shows the expected view of the 'view scores' page. The instructor selects a subset of rubric criteria for which he/she wants to know how a class performed. A bar graph of the average score of the class for that subset of criteria would be displayed.

[[File:1859_Chart_Preview.png]]

The above graph shows average score of the class for 5 rubric criteria in Round 1 selected by the instructor. A live demo with randomly generated data can be found on [https://jsfiddle.net/Jereman/5uxqr92y/ JSFiddle]

== Files Involved ==
We plan to work on the files that the previous team were involved with such as controllers of grade and assignment and the view of grade and review_mapping. Hopefully there is only slight controller modifications necessary, as the chart can use the existing information collected by controller methods to display the raw details on the existing page.

Proposed files:
<div style="display: inline-block">
<pre>
app/controllers/assignments_controller.rb

app/views/grades/view.html.erb

app/views/grades/_teams.html.erb

app/views/grades/_team_title.html.erb

app/views/grades/_team_charts.html.erb

app/view/review_mapping/_review_report.html.erb
</pre>
</div>

=== Code ===
== app/views/grades/_criteria_charts.html.erb ==
<html>
<head>
<%= content_tag :div, class: "chartdata_information", data: {chartdata: @chartdata} do %>
<% end %>
<%= content_tag :div, class: "text_information", data: {text: @text} do %>
<% end %>
<%= content_tag :div, class: "minmax_information", data: {minmax: @minmax} do %>
<% end %>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
@@ -55,29 +22,35 @@
//Display Options
var showLabels = true;
var barColors = [ // Other colors generated from the expertiza base red
'#A90201', // using paletton.com
'#018701',
'#016565',
'#A94D01'
];
function getData(){ //Loads all chart data from the page
chartData = $('.chartdata_information').data('chartdata');
chartText = $('.text_information').data('text');
chartRange = $('.minmax_information').data('minmax');
for (var i = 0; i < chartData.length; i++){ //Set all the criteriaSelected to true
var criteria = [];
for (var j = 0; j < chartData[i].length; j++){
criteria.push(true);
}
criteriaSelected.push(criteria);
}
}
function generateData() { //Generates random data for testing
var rounds = 3;
for(var i = 0; i < rounds; i++) {
var criteriaNum = Math.floor(Math.random() * 5 + 5); //Random number of criteria
var round = [];
var criteria = [];
for(var j = 0; j < criteriaNum; j++) {
round.push(Math.floor(Math.random() * 101)); //Random score for each criterion
criteria.push(true); //Everything starts out true
}
chartData.push(round);
criteriaSelected.push(criteria);
@@ -89,7 +62,7 @@
chartOptions = { //Render options for the chart
title: 'Class Average on Criteria',
titleTextStyle: {
fontName: 'arial',
fontSize: 18,
italic: false,
bold: true
@@ -130,12 +103,12 @@
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var checkBox = document.getElementById("labelCheck");
checkBox.checked = true;
checkBox.style.display = "inline";
updateChart(currentRound);
loadRounds(); }
function updateChart(roundNum) { //Updates the chart with a new round number and renders
currentRound = roundNum;
renderChart();
loadCriteria();
@@ -150,18 +123,13 @@
function renderChart() { //Renders the chart if changes have been made
var data = loadData();
chartOptions.vAxis.viewWindow.max = 5;
chartOptions.vAxis.viewWindow.min = 0;
if (chartRange[currentRound]) { //Set axis ranges if they exist
if (chartRange[currentRound][1])
chartOptions.vAxis.viewWindow.max = chartRange[currentRound][1];
if (chartRange[currentRound][0])
chartOptions.vAxis.viewWindow.min = chartRange[currentRound][0];
}
chart.draw(data, chartOptions);
}
@@ -177,9 +145,9 @@
chartOptions.hAxis.ticks = [];
var rowCount = 1;
for(var i = 0; i < chartData[currentRound].length; i++) { //Add a chart row for each criterion if not null
if (criteriaSelected[currentRound][i] && chartData[currentRound][i]) {
data.addRow([rowCount, chartData[currentRound][i], barColors[0], (showLabels) ? chartData[currentRound][i].toFixed(1).toString() : ""]);
chartOptions.hAxis.ticks.push({v: rowCount++, f: (i+1).toString()});
}
}
@@ -192,7 +160,7 @@
var data = new google.visualization.DataTable();
data.addColumn('number', 'Criterion');
var i;
for(i = 0; i < roundNum; i++) { //Add all columns for the data
data.addColumn('number', 'Round ' + (i+1).toString());
data.addColumn({type: 'string', role: 'style'}); //column for specifying the bar color
data.addColumn({type: 'string', role: 'annotation'});
@@ -208,16 +176,16 @@
var newRow = [];
var elementsAdded = false;
newRow.push(rowCount);
for(var j = 0; j < roundNum; j++) { //If the round has the criterion, add it
if (chartData[j][i]) {
newRow.push(chartData[j][i]);
elementsAdded = true;
} else {
newRow.push(null);
}
newRow.push(barColors[j % barColors.length]); //Add column color
if (chartData[j] && chartData[j][i] && showLabels)
newRow.push(chartData[j][i].toFixed(1).toString()); //Add column annotations
else
newRow.push("");
}
@@ -249,15 +217,15 @@
function loadCriteria() { //Creates the criteria check boxes
var form = document.getElementById("chartCriteria");
while (form.firstChild) //Clear out the old check boxes
form.removeChild(form.firstChild);
if (currentRound == -1) //Don't show criteria for 'all rounds'
return;
chartData[currentRound].forEach(function(dat, i) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.id = "checkboxoption" + i;
checkbox.onclick = function() { //Register callback to toggle the criterion
checkboxUpdate(i);
}
var label = document.createElement('label')
@@ -285,7 +253,7 @@
<form id="chartOptions" name="chartOptions">
<select id="chartRounds" name="rounds"
onChange="updateChart(document.chartOptions.chartRounds.options[document.chartOptions.chartRounds.options.selectedIndex].value)" style = "display: none">
</select>
<label><input type="checkbox" id = "labelCheck" checked="checked" style="display: none" onclick="showLabels = !showLabels; renderChart();">Show
Labels</label>
</form>
<div id="chartCriteria" name="chartCriteria">
</div>

== app/controllers/grades_controller.rb ==

def action_allowed?
case params[:action]
when 'view_my_scores'
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator',
'Student'].include? current_role_name and
are_needed_authorizations_present?(params[:id], "reader", "reviewer") and
check_self_review_status
when 'view_team'
if ['Student'].include? current_role_name # students can only see the head map for their own team
participant = AssignmentParticipant.find(params[:id])
session[:user].id == participant.user_id
else
true
end
else
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator'].include? current_role_name
end
end
@@ -62,37 +62,37 @@

# collects the question text for display on the chart
# Added as part of E1859
def assign_chart_text
@text = []
(1..@assignment.num_review_rounds).to_a.each do |round|
question = @questions[('review' + round.to_s).to_sym]
@text[round - 1] = []
next if question.nil?
(0..(question.length - 1)).to_a.each do |q|
@text[round - 1][q] = question[q].txt
end
end
end

# find the maximum and minimum scores for each questionnaire round
# Added as part of E1859
def assign_minmax(questionnaires)
@minmax = []
questionnaires.each do |questionnaire|
next if questionnaire.symbol != :review
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
next if round.nil?
@minmax[round - 1] = []
@minmax[round - 1][0] = if !questionnaire.min_question_score.nil? and questionnaire.min_question_score < 0
questionnaire.min_question_score
else
0
end
@minmax[round - 1][1] = if !questionnaire.max_question_score.nil?
questionnaire.max_question_score
else
5
end
end
end
# this method collects and averages all the review scores across teams
# Added as part of E1859
def assign_chart_data
@rounds = @assignment.num_review_rounds
@chartdata = []
(1..@rounds).to_a.each do |round|
@teams = AssignmentTeam.where(parent_id: @assignment.id)
@teamids = []
@result = []
@responseids = []
@scoreviews = []
(0..(@teams.length - 1)).to_a.each do |t|
@teamids[t] = @teams[t].id
@result[t] = ResponseMap.find_by_sql ["SELECT id FROM response_maps
WHERE type = 'ReviewResponseMap' AND reviewee_id = ?", @teamids[t]]
@responseids[t] = []
@scoreviews[t] = []
(0..(@result[t].length - 1)).to_a.each do |r|
@responseids[t][r] = Response.find_by_sql ["SELECT id FROM responses
WHERE round = ? AND map_id = ?", round, @result[t][r]]
@scoreviews[t][r] = Answer.where(response_id: @responseids[t][r][0]) unless @responseids[t][r].empty?
end
end
@chartdata[round - 1] = []
# because the nth first elements could be nil
# iterate until a non-nil value is found or move to next round
t = 0
r = 0
t += 1 while @scoreviews[t].nil?
while t < @scoreviews.length and @scoreviews[t][r].nil?
if r < @scoreviews[t].length - 1
r += 1
else
@@ -137,7 +134,6 @@ def assign_chart_data
end
end
next if t >= @scoreviews.length
(0..(@scoreviews[t][r].length - 1)).to_a.each do |q|
sum = 0
counter = 0
@@ -160,10 +156,10 @@ def retrieve_questions(questionnaires)
questionnaires.each do |questionnaire|
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
questionnaire_symbol = if !round.nil?
(questionnaire.symbol.to_s + round.to_s).to_sym
else
questionnaire.symbol
end
@questions[questionnaire_symbol] = questionnaire.questions
end
end
@@ -270,10 +266,10 @@ def update
if format("%.2f", total_score) != params[:participant][:grade]
participant.update_attribute(:grade, params[:participant][:grade])
message = if participant.grade.nil?
"The computed score will be used for " + participant.user.name + "."
else
"A score of " + params[:participant][:grade] + "% has been saved for " + participant.user.name + "."
end
end
flash[:note] = message
redirect_to action: 'edit', id: params[:id]

== Test Plan ==
The specification of the project does not require us to use automated tests. However, we plan to test the modified ruby code or the new features that will be added to the grades_controller. We will be approaching [http://rspec.info/ RSpec] testing framework. For the javascript, the tests will be conducted manually.

===JavaScript Chart===
To validate all functionality of the chart when adding new features or fixing old ones, the following criteria were tested manually for expected functionality:

# 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

===RSpec Tests===
RSpec tests were added to validate functionality of the helper methods that were added to the grades controller.

E1859 Visualizations for Instructors

2018-12-07T00:53:21Z

Ntripat: /* app/controllers/grades_controller.rb */

== Introduction ==
Expertiza is an online assignment grading platform. Instructors can create assignments and implement peer reviews for submitted assignments. This project concerns the creation of a system for visualizing student performance on those assignments, primarily as graded in peer reviews. Graphs will be made to show various rubric criteria and the class' performance on the criteria. If the criteria are the same for multiple stages of review, an instructor should be able to compare performance over time or between reviews.

__TOC__

== Project Purpose ==
Our task is to provide an interactive visualization or a table for instructors that shows how their class performed on selected rubric criteria. Such feature would be immensely helpful for instructors as it would assist them to identify what they need to focus more attention on. For example, creating a graph showing the average scores for all or a certain subset of main rubric criteria (questionnaire). If the average score of the class on selected criteria (question) is low means the instructor can emphasize more on the learning materials related to it.

== Proposed Changes ==
The visualizations will be implemented as either a single or stacked bar chart with a bar for each of the selected criteria to be observed. If a single bar, then the height of the bar will be the total class average, but a stacked bar chart may be better to show the percentage of the class that received each score. The changes made to the expertiza project will primarily include HTML/ERB changes to the view files to accommodate the added charts on the page and the necessary javascript to allow responsive design. Brief controller modifications will be made to facilitate database filtering to get the displayed data.

1. On clicking Manage and then on assignments, following page appears.

[[File:S1.JPG]]

2. Click on 'view score' icon of an assignment. The summary report page of the selected assignment comes up.

[[File:A0.jpg]]

3. Following are mockup screens which we wish to create:

a) Instructor would select the round and rubric criteria of the assignment for which he/she wants to view the class performance.

[[File:A1.jpg]]

b) The bar graph of the class performance for those criteria would be displayed.

[[File:Try.jpg]]

== Project Design ==

==== Design Flow ====

The flowchart representing graphical flow of an instructor visiting view scores under assignments is given below:

[[File:A3.png]]

==== Tools and Design Choice ====

We plan to use the lightweight [https://developers.google.com/chart/ Google Charts] library for displaying the chart data on the page, with standard HTML for all of the options and dropdowns for option selection. Google Charts was chosen because of its high compatibility, full option set, and comparable graphical quality to the rest of expertiza while keeping a small JS footprint, which should help prevent slow page responsiveness.

==== Visualization ====

The following graph shows the expected view of the 'view scores' page. The instructor selects a subset of rubric criteria for which he/she wants to know how a class performed. A bar graph of the average score of the class for that subset of criteria would be displayed.

[[File:1859_Chart_Preview.png]]

The above graph shows average score of the class for 5 rubric criteria in Round 1 selected by the instructor. A live demo with randomly generated data can be found on [https://jsfiddle.net/Jereman/5uxqr92y/ JSFiddle]

== Files Involved ==
We plan to work on the files that the previous team were involved with such as controllers of grade and assignment and the view of grade and review_mapping. Hopefully there is only slight controller modifications necessary, as the chart can use the existing information collected by controller methods to display the raw details on the existing page.

Proposed files:
<div style="display: inline-block">
<pre>
app/controllers/assignments_controller.rb

app/views/grades/view.html.erb

app/views/grades/_teams.html.erb

app/views/grades/_team_title.html.erb

app/views/grades/_team_charts.html.erb

app/view/review_mapping/_review_report.html.erb
</pre>
</div>

=== Code ===
== app/views/grades/_criteria_charts.html.erb ==
<html>
<head>
<%= content_tag :div, class: "chartdata_information", data: {chartdata: @chartdata} do %>
<% end %>
<%= content_tag :div, class: "text_information", data: {text: @text} do %>
<% end %>
<%= content_tag :div, class: "minmax_information", data: {minmax: @minmax} do %>
<% end %>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
@@ -55,29 +22,35 @@
//Display Options
var showLabels = true;
var barColors = [ // Other colors generated from the expertiza base red
'#A90201', // using paletton.com
'#018701',
'#016565',
'#A94D01'
];
function getData(){ //Loads all chart data from the page
chartData = $('.chartdata_information').data('chartdata');
chartText = $('.text_information').data('text');
chartRange = $('.minmax_information').data('minmax');
for (var i = 0; i < chartData.length; i++){ //Set all the criteriaSelected to true
var criteria = [];
for (var j = 0; j < chartData[i].length; j++){
criteria.push(true);
}
criteriaSelected.push(criteria);
}
}
function generateData() { //Generates random data for testing
var rounds = 3;
for(var i = 0; i < rounds; i++) {
var criteriaNum = Math.floor(Math.random() * 5 + 5); //Random number of criteria
var round = [];
var criteria = [];
for(var j = 0; j < criteriaNum; j++) {
round.push(Math.floor(Math.random() * 101)); //Random score for each criterion
criteria.push(true); //Everything starts out true
}
chartData.push(round);
criteriaSelected.push(criteria);
@@ -89,7 +62,7 @@
chartOptions = { //Render options for the chart
title: 'Class Average on Criteria',
titleTextStyle: {
fontName: 'arial',
fontSize: 18,
italic: false,
bold: true
@@ -130,12 +103,12 @@
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var checkBox = document.getElementById("labelCheck");
checkBox.checked = true;
checkBox.style.display = "inline";
updateChart(currentRound);
loadRounds(); }
function updateChart(roundNum) { //Updates the chart with a new round number and renders
currentRound = roundNum;
renderChart();
loadCriteria();
@@ -150,18 +123,13 @@
function renderChart() { //Renders the chart if changes have been made
var data = loadData();
chartOptions.vAxis.viewWindow.max = 5;
chartOptions.vAxis.viewWindow.min = 0;
if (chartRange[currentRound]) { //Set axis ranges if they exist
if (chartRange[currentRound][1])
chartOptions.vAxis.viewWindow.max = chartRange[currentRound][1];
if (chartRange[currentRound][0])
chartOptions.vAxis.viewWindow.min = chartRange[currentRound][0];
}
chart.draw(data, chartOptions);
}
@@ -177,9 +145,9 @@
chartOptions.hAxis.ticks = [];
var rowCount = 1;
for(var i = 0; i < chartData[currentRound].length; i++) { //Add a chart row for each criterion if not null
if (criteriaSelected[currentRound][i] && chartData[currentRound][i]) {
data.addRow([rowCount, chartData[currentRound][i], barColors[0], (showLabels) ? chartData[currentRound][i].toFixed(1).toString() : ""]);
chartOptions.hAxis.ticks.push({v: rowCount++, f: (i+1).toString()});
}
}
@@ -192,7 +160,7 @@
var data = new google.visualization.DataTable();
data.addColumn('number', 'Criterion');
var i;
for(i = 0; i < roundNum; i++) { //Add all columns for the data
data.addColumn('number', 'Round ' + (i+1).toString());
data.addColumn({type: 'string', role: 'style'}); //column for specifying the bar color
data.addColumn({type: 'string', role: 'annotation'});
@@ -208,16 +176,16 @@
var newRow = [];
var elementsAdded = false;
newRow.push(rowCount);
for(var j = 0; j < roundNum; j++) { //If the round has the criterion, add it
if (chartData[j][i]) {
newRow.push(chartData[j][i]);
elementsAdded = true;
} else {
newRow.push(null);
}
newRow.push(barColors[j % barColors.length]); //Add column color
if (chartData[j] && chartData[j][i] && showLabels)
newRow.push(chartData[j][i].toFixed(1).toString()); //Add column annotations
else
newRow.push("");
}
@@ -249,15 +217,15 @@
function loadCriteria() { //Creates the criteria check boxes
var form = document.getElementById("chartCriteria");
while (form.firstChild) //Clear out the old check boxes
form.removeChild(form.firstChild);
if (currentRound == -1) //Don't show criteria for 'all rounds'
return;
chartData[currentRound].forEach(function(dat, i) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.id = "checkboxoption" + i;
checkbox.onclick = function() { //Register callback to toggle the criterion
checkboxUpdate(i);
}
var label = document.createElement('label')
@@ -285,7 +253,7 @@
<form id="chartOptions" name="chartOptions">
<select id="chartRounds" name="rounds"
onChange="updateChart(document.chartOptions.chartRounds.options[document.chartOptions.chartRounds.options.selectedIndex].value)" style = "display: none">
</select>
<label><input type="checkbox" id = "labelCheck" checked="checked" style="display: none" onclick="showLabels = !showLabels; renderChart();">Show
Labels</label>
</form>
<div id="chartCriteria" name="chartCriteria">
</div>

== app/controllers/grades_controller.rb ==

def action_allowed?
case params[:action]
when 'view_my_scores'
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator',
'Student'].include? current_role_name and
are_needed_authorizations_present?(params[:id], "reader", "reviewer") and
check_self_review_status
when 'view_team'
if ['Student'].include? current_role_name # students can only see the head map for their own team
participant = AssignmentParticipant.find(params[:id])
session[:user].id == participant.user_id
else
true
end
else
['Instructor',
'Teaching Assistant',
'Administrator',
'Super-Administrator'].include? current_role_name
end
end
@@ -62,37 +62,37 @@

# collects the question text for display on the chart
# Added as part of E1859
def assign_chart_text
@text = []
(1..@assignment.num_review_rounds).to_a.each do |round|
question = @questions[('review' + round.to_s).to_sym]
@text[round - 1] = []
next if question.nil?
(0..(question.length - 1)).to_a.each do |q|
@text[round - 1][q] = question[q].txt
end
end
end

# find the maximum and minimum scores for each questionnaire round
# Added as part of E1859
def assign_minmax(questionnaires)
@minmax = []
questionnaires.each do |questionnaire|
next if questionnaire.symbol != :review
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
next if round.nil?
@minmax[round - 1] = []
@minmax[round - 1][0] = if !questionnaire.min_question_score.nil? and questionnaire.min_question_score < 0
questionnaire.min_question_score
else
0
end
@minmax[round - 1][1] = if !questionnaire.max_question_score.nil?
questionnaire.max_question_score
else
5
end
end
end
# this method collects and averages all the review scores across teams
# Added as part of E1859
def assign_chart_data
@rounds = @assignment.num_review_rounds
@chartdata = []
(1..@rounds).to_a.each do |round|
@teams = AssignmentTeam.where(parent_id: @assignment.id)
@teamids = []
@result = []
@responseids = []
@scoreviews = []
(0..(@teams.length - 1)).to_a.each do |t|
@teamids[t] = @teams[t].id
@result[t] = ResponseMap.find_by_sql ["SELECT id FROM response_maps
WHERE type = 'ReviewResponseMap' AND reviewee_id = ?", @teamids[t]]
@responseids[t] = []
@scoreviews[t] = []
(0..(@result[t].length - 1)).to_a.each do |r|
@responseids[t][r] = Response.find_by_sql ["SELECT id FROM responses
WHERE round = ? AND map_id = ?", round, @result[t][r]]

@scoreviews[t][r] = Answer.where(response_id: @responseids[t][r][0]) unless @responseids[t][r].empty?
end
end
@chartdata[round - 1] = []
# because the nth first elements could be nil
# iterate until a non-nil value is found or move to next round
t = 0
r = 0
t += 1 while @scoreviews[t].nil?
while t < @scoreviews.length and @scoreviews[t][r].nil?
if r < @scoreviews[t].length - 1
r += 1
else
@@ -137,7 +134,6 @@ def assign_chart_data
end
end
next if t >= @scoreviews.length
(0..(@scoreviews[t][r].length - 1)).to_a.each do |q|
sum = 0
counter = 0
@@ -160,10 +156,10 @@ def retrieve_questions(questionnaires)
questionnaires.each do |questionnaire|
round = AssignmentQuestionnaire.where(assignment_id: @assignment.id, questionnaire_id: questionnaire.id).first.used_in_round
questionnaire_symbol = if !round.nil?
(questionnaire.symbol.to_s + round.to_s).to_sym
else
questionnaire.symbol
end
@questions[questionnaire_symbol] = questionnaire.questions
end
end
@@ -270,10 +266,10 @@ def update
if format("%.2f", total_score) != params[:participant][:grade]
participant.update_attribute(:grade, params[:participant][:grade])
message = if participant.grade.nil?
"The computed score will be used for " + participant.user.name + "."
else
"A score of " + params[:participant][:grade] + "% has been saved for " + participant.user.name + "."
end
end
flash[:note] = message
redirect_to action: 'edit', id: params[:id]

== Test Plan ==
The specification of the project does not require us to use automated tests. However, we plan to test the modified ruby code or the new features that will be added to the grades_controller. We will be approaching [http://rspec.info/ RSpec] testing framework. For the javascript, the tests will be conducted manually.

===JavaScript Chart===
To validate all functionality of the chart when adding new features or fixing old ones, the following criteria were tested manually for expected functionality:

# 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

===RSpec Tests===
RSpec tests were added to validate functionality of the helper methods that were added to the grades controller.

E1859 Visualizations for Instructors

2018-12-07T00:09:02Z

Ntripat: /* app/controllers/grades_controller.rb */

E1859 Visualizations for Instructors

2018-12-07T00:08:36Z

Ntripat: /* app/views/grades/_criteria_charts.html.erb */

E1859 Visualizations for Instructors

2018-12-06T23:53:36Z

Ntripat: /* app/views/grades/_criteria_charts.html.erb */

E1859 Visualizations for Instructors

2018-12-06T23:49:25Z

Ntripat:

E1859 Visualizations for Instructors

2018-12-04T22:19:08Z

Ntripat:

E1859 Visualizations for Instructors

2018-11-21T04:18:57Z

Ntripat:

File:2411C.png

2018-11-21T04:18:19Z

Ntripat:

E1859 Visualizations for Instructors

2018-11-20T22:34:44Z

Ntripat:

File:Try.jpg

2018-11-20T22:34:08Z

Ntripat:

E1859 Visualizations for Instructors

2018-11-20T22:28:00Z

Ntripat:

E1859 Visualizations for Instructors

2018-11-20T22:27:40Z

Ntripat:

E1859 Visualizations for Instructors

2018-11-20T22:19:16Z

Ntripat:

E1859 Visualizations for Instructors

2018-11-20T22:18:38Z

Ntripat:

File:A2.JPG

2018-11-20T22:17:57Z

Ntripat:

E1859 Visualizations for Instructors

2018-11-20T22:16:27Z

Ntripat:

File:Oodd4.JPG

2018-11-20T22:14:08Z

Ntripat: uploaded a new version of "File:Oodd4.JPG"

E1859 Visualizations for Instructors

2018-11-20T22:13:25Z

Ntripat:

E1859 Visualizations for Instructors

2018-11-20T22:12:43Z

Ntripat:

E1859 Visualizations for Instructors

2018-11-20T22:12:08Z

Ntripat:

File:Oodd4.JPG

2018-11-20T22:04:36Z

Ntripat:

File:A1.jpg

2018-11-20T22:04:20Z

Ntripat:

File:A0.jpg

2018-11-20T22:04:02Z

Ntripat:

E1859 Visualizations for Instructors

2018-11-20T20:40:06Z

Ntripat:

E1859 Visualizations for Instructors

2018-11-14T00:30:28Z

Ntripat: /* Visualization */

E1859 Visualizations for Instructors

2018-11-14T00:26:05Z

Ntripat:

File:Hw4.png

2018-11-12T23:02:47Z

Ntripat: uploaded a new version of "File:Hw4.png"

E1859 Visualizations for Instructors

2018-11-12T23:00:48Z

Ntripat:

== Introduction ==
This project concerns the creation of a system for visualizing student performance on assignments in the Expertiza system. Graphs will be made to show various rubric criteria and the class' performance on the criteria. If the criteria are the same for multiple stages of review, an instructor should be able to compare performance over time or between reviews.

__TOC__

== Proposed Changes ==
The visualizations will be implemented as either a single or stacked bar chart with a bar for each of the selected criteria to be observed. If a single bar, then the height of the bar will be the total class average, but a stacked bar chart may be better to show the percentage of the class that received each score. The changes made to the expertiza project will primarily include HTML/ERB changes to the view files to accommodate the added charts on the page and the necessary javascript to allow responsive design. Brief controller modifications will be made to facilitate database filtering to get the displayed data.

== Design Flow ==

The flowchart representing graphical flow of an instructor visiting view scores under assignments is given below:

[[File:hw4.png]]

== Files Involved ==
We plan to work on the files that the previous team were involved with such as controllers of grade and assignment and the view of grade and review_mapping.

Proposed files:

app/controllers/assignments_controller.rb

app/views/grades/view.html.erb

app/views/grades/_teams.html.erb

app/views/grades/_team_title.html.erb

app/views/grades/_team_charts.html.erb

app/view/review_mapping/_review_report.html.erb

== Test Plan ==
We plan to test the modified ruby code or the new features that will be added to the controllers. We will be approaching RSpec testing framework. For the javascripts, the tests will be conducted manually.

E1859 Visualizations for Instructors

2018-11-12T23:00:31Z

Ntripat:

== Introduction ==
This project concerns the creation of a system for visualizing student performance on assignments in the Expertiza system. Graphs will be made to show various rubric criteria and the class' performance on the criteria. If the criteria are the same for multiple stages of review, an instructor should be able to compare performance over time or between reviews.

__TOC__

== Proposed Changes ==
The visualizations will be implemented as either a single or stacked bar chart with a bar for each of the selected criteria to be observed. If a single bar, then the height of the bar will be the total class average, but a stacked bar chart may be better to show the percentage of the class that received each score. The changes made to the expertiza project will primarily include HTML/ERB changes to the view files to accommodate the added charts on the page and the necessary javascript to allow responsive design. Brief controller modifications will be made to facilitate database filtering to get the displayed data.

== Design Flow ==

The flowchart representing graphical flow of an instructor visiting view scores under assignments is given below:

[[File:hw4.pn]]

== Files Involved ==
We plan to work on the files that the previous team were involved with such as controllers of grade and assignment and the view of grade and review_mapping.

Proposed files:

app/controllers/assignments_controller.rb

app/views/grades/view.html.erb

app/views/grades/_teams.html.erb

app/views/grades/_team_title.html.erb

app/views/grades/_team_charts.html.erb

app/view/review_mapping/_review_report.html.erb

== Test Plan ==
We plan to test the modified ruby code or the new features that will be added to the controllers. We will be approaching RSpec testing framework. For the javascripts, the tests will be conducted manually.

E1859 Visualizations for Instructors

2018-11-12T23:00:10Z

Ntripat:

E1859 Visualizations for Instructors

2018-11-12T22:59:22Z

Ntripat:

== Introduction ==
This project concerns the creation of a system for visualizing student performance on assignments in the Expertiza system. Graphs will be made to show various rubric criteria and the class' performance on the criteria. If the criteria are the same for multiple stages of review, an instructor should be able to compare performance over time or between reviews.

__TOC__

== Proposed Changes ==
The visualizations will be implemented as either a single or stacked bar chart with a bar for each of the selected criteria to be observed. If a single bar, then the height of the bar will be the total class average, but a stacked bar chart may be better to show the percentage of the class that received each score. The changes made to the expertiza project will primarily include HTML/ERB changes to the view files to accommodate the added charts on the page and the necessary javascript to allow responsive design. Brief controller modifications will be made to facilitate database filtering to get the displayed data.

== Design Flow ==

The flowchart representing graphical flow of an instructor visiting view scores under assignments is given below:

[[File:hw4.jpg]]

== Files Involved ==
We plan to work on the files that the previous team were involved with such as controllers of grade and assignment and the view of grade and review_mapping.

Proposed files:

app/controllers/assignments_controller.rb

app/views/grades/view.html.erb

app/views/grades/_teams.html.erb

app/views/grades/_team_title.html.erb

app/views/grades/_team_charts.html.erb

app/view/review_mapping/_review_report.html.erb

== Test Plan ==
We plan to test the modified ruby code or the new features that will be added to the controllers. We will be approaching RSpec testing framework. For the javascripts, the tests will be conducted manually.

E1859 Visualizations for Instructors

2018-11-12T22:58:46Z

Ntripat:

== Introduction ==
This project concerns the creation of a system for visualizing student performance on assignments in the Expertiza system. Graphs will be made to show various rubric criteria and the class' performance on the criteria. If the criteria are the same for multiple stages of review, an instructor should be able to compare performance over time or between reviews.

__TOC__

== Proposed Changes ==
The visualizations will be implemented as either a single or stacked bar chart with a bar for each of the selected criteria to be observed. If a single bar, then the height of the bar will be the total class average, but a stacked bar chart may be better to show the percentage of the class that received each score. The changes made to the expertiza project will primarily include HTML/ERB changes to the view files to accommodate the added charts on the page and the necessary javascript to allow responsive design. Brief controller modifications will be made to facilitate database filtering to get the displayed data.

== Design Flow ==

The flowchart representing graphical flow of an instructor visiting view scores under assignments is given below:

[[File:HW4.jpg]]

== Files Involved ==
We plan to work on the files that the previous team were involved with such as controllers of grade and assignment and the view of grade and review_mapping.

Proposed files:

app/controllers/assignments_controller.rb

app/views/grades/view.html.erb

app/views/grades/_teams.html.erb

app/views/grades/_team_title.html.erb

app/views/grades/_team_charts.html.erb

app/view/review_mapping/_review_report.html.erb

== Test Plan ==
We plan to test the modified ruby code or the new features that will be added to the controllers. We will be approaching RSpec testing framework. For the javascripts, the tests will be conducted manually.

E1859 Visualizations for Instructors

2018-11-12T22:58:32Z

Ntripat:

== Introduction ==
This project concerns the creation of a system for visualizing student performance on assignments in the Expertiza system. Graphs will be made to show various rubric criteria and the class' performance on the criteria. If the criteria are the same for multiple stages of review, an instructor should be able to compare performance over time or between reviews.

__TOC__

== Proposed Changes ==
The visualizations will be implemented as either a single or stacked bar chart with a bar for each of the selected criteria to be observed. If a single bar, then the height of the bar will be the total class average, but a stacked bar chart may be better to show the percentage of the class that received each score. The changes made to the expertiza project will primarily include HTML/ERB changes to the view files to accommodate the added charts on the page and the necessary javascript to allow responsive design. Brief controller modifications will be made to facilitate database filtering to get the displayed data.

== Design Flow ==

The flowchart representing graphical flow of an instructor visiting view scores under assignments is given below:

[[File:File.jpg]]

== Files Involved ==
We plan to work on the files that the previous team were involved with such as controllers of grade and assignment and the view of grade and review_mapping.

Proposed files:

app/controllers/assignments_controller.rb

app/views/grades/view.html.erb

app/views/grades/_teams.html.erb

app/views/grades/_team_title.html.erb

app/views/grades/_team_charts.html.erb

app/view/review_mapping/_review_report.html.erb

== Test Plan ==
We plan to test the modified ruby code or the new features that will be added to the controllers. We will be approaching RSpec testing framework. For the javascripts, the tests will be conducted manually.

File:Hw4.png

2018-11-12T22:57:44Z

Ntripat:

E1844 Issues related to names

2018-11-09T20:16:36Z

Ntripat:

==Introduction==
==='''Problem Statement'''===
In Expertiza, teams are created for every homework. Somewhere in the bidding code, or the code that assigns topics based on bids, team names are generated. In this case, team names are not appended to the name of the assignment, like they are when teams are created elsewhere in the code. The team names should be of the form "Team_random_number". Also currently, the usernames can have spaces in them but then you cannot impersonate that user. The expertiza should prohibit spaces in usernames.

----
=='''Issues to be fixed'''==

Issues as described by the problem statement:

==='''Issue #842'''===
Team names created by bidding are incorrect
Somewhere in the bidding code, or the code that assigns topics based on bids, team names are generated. In this case, team names are not appended to the name of the assignment, like they are when teams are created elsewhere in the code. Team names generated everywhere must be standardized.

==='''Issue #982'''===
Usernames can have spaces in them. And currently, if you create a user with a space in the username, you can't impersonate that user. Expertiza should prohibit spaces in usernames. Implementation should probably just include a format check in the user model, and tests to validate a username.

----

=='''Modified Files'''==

==='''Issue #842'''===
1) app/controllers/lottery_controller.rb

2) app/controllers/suggestion_controller.rb

3) app/models/team.rb

4) spec/models/team_spec.rb

==='''Issue #982'''===

1) app/models/user.rb

2) spec/models/user_spec.rb

----

=='''Approach used to resolve the issues'''==

==='''Issue #842 '''===

Teams are generated within Expertiza in various scenarios. Teams are generated for every assignment, course and team names are generated in various formats at several places in the bidding code. Also, automatic generation of teams for assignment follows a different team name format. A single team name format was fixed, i.e. 'Team_random_no' (e.g. Team_51) and all the automatically generated teams were assigned a team name with the standardized format.

Pseudocode standardizing auto-generated team names throughout expertiza

Identify all the create methods for teams that are generated automatically
Modify the team name passed to the team create or generate methods to the standardized format

==='''Issue #982 '''===
Expertiza allows spaces in username. But, if a user has username with spaces then that user cannot be impersonated by an instructor. Thus, the task is to prohibit users from having spaces in usernames.

Pseudocode representing the logic we have used to modify app_models_user.rb

If username has spaces
disallow spaces using regex /\s/

=='''Login Credentials'''==
1.) Login as instructor,
Username: instructor6
Password: password

2.) Login as student,
Username: student7348
Password: password

Username:student7349
Password: password

=='''Development'''==
==='''Issue #842'''===

Following are the identified team creation methods and corresponding code changes:

===='''app/controllers/lottery_controller.rb'''====

[[File:lottery_controller.png]]

===='''app/controllers/suggestion_controller.rb'''====

[[File:suggestion_controller.png]]

===='''app/models/team.rb'''====

[[File:team_model.png]]

==='''Issue #982'''===

The validation check has been added to the model of the user class so that no white spaces are present in the username :

===='''app/models/user.rb'''====

[[File:User_rb.JPG]]

=='''Test Plan'''==

==='''Issue #842'''===

===='''Steps performed'''====

1)Login as Instructor, create an OSS assignment for bidding with all the necessary details like maximum no of users per team, add topics for the assignment, add participants(students) in the assignment.

2)Login as a Student(say Student7348), whom you have enrolled in the assignment. You should be able to see the assignment now in the Assignment section.

3)Click on the assignment and then click on 'Your team'.

4)Invite a student(say Student7349) whom you have also added as a participant in your assignment, to be your teammate.

5)Login as student7349 and accept student7348's request to join his/her team.

6)Now, the team name would appear on the top section of the webpage. The team name would be of format : Team_RandomNumber ( say Team_21 ).

===='''Screenshots from conducted Test '''====
1. On clicking Manage and then on assignments, following page appears.

[[File:S1.JPG]]

2. Click on copy assignment icon and edit the information as per requirement. A new assignment would be created.

[[File:S2.JPG]]

3. Now login as student7609 and click on 'Test Assignment'(assignment that you have created as an instructor) under Assignment tab.

[[File:S6.JPG]]

4. Click on 'your team' and send teammate invitation to another student7508.

[[File:S4.JPG]]

5. Now login as Student7508 and accept the teammate request of student7609. You can view the team name 'Team_7' at the top of the page which is the required standardized format.

[[File:S5.JPG]]

=='''RSpec'''==

==='''Issue #842'''===

The existing Rspec test is modified so that the expected value of the team name is modified to the new format.

===='''spec/controllers/team_spec.rb'''====

[[File:team_spec.png]]

==='''Issue #982'''===

The existing Rspec file user_spec.rb is modified in order to add another test case to validate the use of white spaces in the username.

===='''spec/models/user_spec.rb'''====

[[File:User_rspec.JPG]]

=='''External Links'''==

[http://152.46.17.167:8080 Link to Expertiza deployed on VCL]

[https://github.com/expertiza/expertiza/pull/1261 Pull request for issue #842]

[https://github.com/expertiza/expertiza/pull/1259 Pull request for issue #982]

[https://github.com/shraddha-dhyade/expertiza/tree/842_standardizing_team_names Github branch for issue #842]

[https://github.com/shraddha-dhyade/expertiza/tree/982_validation_username Github branch for issue #982]

E1844 Issues related to names

2018-11-09T20:15:09Z

Ntripat:

==Introduction==
==='''Problem Statement'''===
In Expertiza, teams are created for every homework. Somewhere in the bidding code, or the code that assigns topics based on bids, team names are generated. In this case, team names are not appended to the name of the assignment, like they are when teams are created elsewhere in the code. The team names should be of the form "Team_random_number". Also currently, the usernames can have spaces in them but then you cannot impersonate that user. The expertiza should prohibit spaces in usernames.

----
=='''Issues to be fixed'''==

Issues as described by the problem statement:

==='''Issue #842'''===
Team names created by bidding are incorrect
Somewhere in the bidding code, or the code that assigns topics based on bids, team names are generated. In this case, team names are not appended to the name of the assignment, like they are when teams are created elsewhere in the code. Team names generated everywhere must be standardized.

==='''Issue #982'''===
Usernames can have spaces in them. And currently, if you create a user with a space in the username, you can't impersonate that user. Expertiza should prohibit spaces in usernames. Implementation should probably just include a format check in the user model, and tests to validate a username.

----

=='''Modified Files'''==

==='''Issue #842'''===
1) app/controllers/lottery_controller.rb

2) app/controllers/suggestion_controller.rb

3) app/models/team.rb

4) spec/models/team_spec.rb

==='''Issue #982'''===

1) app/models/user.rb

2) spec/models/user_spec.rb

----

=='''Approach used to resolve the issues'''==

==='''Issue #842 '''===

Teams are generated within Expertiza in various scenarios. Teams are generated for every assignment, course and team names are generated in various formats at several places in the bidding code. Also, automatic generation of teams for assignment follows a different team name format. A single team name format was fixed, i.e. 'Team_random_no' (e.g. Team_51) and all the automatically generated teams were assigned a team name with the standardized format.

Pseudocode standardizing auto-generated team names throughout expertiza

Identify all the create methods for teams that are generated automatically
Modify the team name passed to the team create or generate methods to the standardized format

==='''Issue #982 '''===
Expertiza allows spaces in username. But, if a user has username with spaces then that user cannot be impersonated by an instructor. Thus, the task is to prohibit users from having spaces in usernames.

Pseudocode representing the logic we have used to modify app_models_user.rb

If username has spaces
disallow spaces using regex /\s/

=='''Login Credentials'''==
1.) Login as instructor,
Username: instructor6
Password: password

2.) Login as student,
Username: student7348
Password: password

Username:student7349
Password: password

=='''Development'''==
==='''Issue #842'''===

Following are the identified team creation methods and corresponding code changes:

===='''app/controllers/lottery_controller.rb'''====

[[File:lottery_controller.png]]

===='''app/controllers/suggestion_controller.rb'''====

[[File:suggestion_controller.png]]

===='''app/models/team.rb'''====

[[File:team_model.png]]

==='''Issue #982'''===

The validation check has been added to the model of the user class so that no white spaces are present in the username :

===='''app/models/user.rb'''====

[[File:User_rb.JPG]]

=='''Test Plan'''==

==='''Issue #842'''===

===='''Steps performed'''====

1)Login as Instructor, create an OSS assignment for bidding with all the necessary details like maximum no of users per team, add topics for the assignment, add participants(students) in the assignment.

2)Login as a Student(say Student7348), whom you have enrolled in the assignment. You should be able to see the assignment now in the Assignment section.

3)Click on the assignment and then click on 'Your team'.

4)Invite a student(say Student7349) whom you have also added as a participant in your assignment, to be your teammate.

5)Login as student B and accept A's request to join his/her team.

6)Now, the team name would appear on the top section of the webpage. The team name would be of format : Team_RandomNumber ( say Team_21 ).

===='''Screenshots from conducted Test '''====
1. On clicking Manage and then on assignments, following page appears.

[[File:S1.JPG]]

2. Click on copy assignment icon and edit the information as per requirement. A new assignment would be created.

[[File:S2.JPG]]

3. Now login as student7609 and click on 'Test Assignment'(assignment that you have created as an instructor) under Assignment tab.

[[File:S6.JPG]]

4. Click on 'your team' and send teammate invitation to another student7508.

[[File:S4.JPG]]

5. Now login as Student7508 and accept the teammate request of student7609. You can view the team name 'Team_7' at the top of the page which is the required standardized format.

[[File:S5.JPG]]

=='''RSpec'''==

==='''Issue #842'''===

The existing Rspec test is modified so that the expected value of the team name is modified to the new format.

===='''spec/controllers/team_spec.rb'''====

[[File:team_spec.png]]

==='''Issue #982'''===

The existing Rspec file user_spec.rb is modified in order to add another test case to validate the use of white spaces in the username.

===='''spec/models/user_spec.rb'''====

[[File:User_rspec.JPG]]

=='''External Links'''==

[http://152.46.17.167:8080 Link to Expertiza deployed on VCL]

[https://github.com/expertiza/expertiza/pull/1261 Pull request for issue #842]

[https://github.com/expertiza/expertiza/pull/1259 Pull request for issue #982]

[https://github.com/shraddha-dhyade/expertiza/tree/842_standardizing_team_names Github branch for issue #842]

[https://github.com/shraddha-dhyade/expertiza/tree/982_validation_username Github branch for issue #982]

E1844 Issues related to names

2018-11-09T20:11:48Z

Ntripat:

==Introduction==
==='''Problem Statement'''===
In Expertiza, teams are created for every homework. Somewhere in the bidding code, or the code that assigns topics based on bids, team names are generated. In this case, team names are not appended to the name of the assignment, like they are when teams are created elsewhere in the code. The team names should be of the form "Team_random_number". Also currently, the usernames can have spaces in them but then you cannot impersonate that user. The expertiza should prohibit spaces in usernames.

----
=='''Issues to be fixed'''==

Issues as described by the problem statement:

==='''Issue #842'''===
Team names created by bidding are incorrect
Somewhere in the bidding code, or the code that assigns topics based on bids, team names are generated. In this case, team names are not appended to the name of the assignment, like they are when teams are created elsewhere in the code. Team names generated everywhere must be standardized.

==='''Issue #982'''===
Usernames can have spaces in them. And currently, if you create a user with a space in the username, you can't impersonate that user. Expertiza should prohibit spaces in usernames. Implementation should probably just include a format check in the user model, and tests to validate a username.

----

=='''Modified Files'''==

==='''Issue #842'''===
1) app/controllers/lottery_controller.rb

2) app/controllers/suggestion_controller.rb

3) app/models/team.rb

4) spec/models/team_spec.rb

==='''Issue #982'''===

1) app/models/user.rb

2) spec/models/user_spec.rb

----

=='''Approach used to resolve the issues'''==

==='''Issue #842 '''===

Teams are generated within Expertiza in various scenarios. Teams are generated for every assignment, course and team names are generated in various formats at several places in the bidding code. Also, automatic generation of teams for assignment follows a different team name format. A single team name format was fixed, i.e. 'Team_random_no' (e.g. Team_51) and all the automatically generated teams were assigned a team name with the standardized format.

Pseudocode standardizing auto-generated team names throughout expertiza

Identify all the create methods for teams that are generated automatically
Modify the team name passed to the team create or generate methods to the standardized format

==='''Issue #982 '''===
Expertiza allows spaces in username. But, if a user has username with spaces then that user cannot be impersonated by an instructor. Thus, the task is to prohibit users from having spaces in usernames.

Pseudocode representing the logic we have used to modify app_models_user.rb

If username has spaces
disallow spaces using regex /\s/

=='''Login Credentials'''==
1.) Login as instructor,
Username: instructor6
Password: password

2.) Login as student,
Username: student7348
Password: password

Username:student7349
Password: password

=='''Development'''==
==='''Issue #842'''===

Following are the identified team creation methods and corresponding code changes:

===='''app/controllers/lottery_controller.rb'''====

[[File:lottery_controller.png]]

===='''app/controllers/suggestion_controller.rb'''====

[[File:suggestion_controller.png]]

===='''app/models/team.rb'''====

[[File:team_model.png]]

==='''Issue #982'''===

The validation check has been added to the model of the user class so that no white spaces are present in the username :

===='''app/models/user.rb'''====

[[File:User_rb.JPG]]

=='''Test Plan'''==

==='''Issue #842'''===

===='''Steps performed'''====

1)Login as Instructor, create an OSS assignment for bidding with all the necessary details like maximum no of users per team, add topics for the assignment, add participants(students) in the assignment.

2)Login as a Student(say A), say student A, whom you have enrolled in the assignment. You should be able to see the assignment now in the Assignment section.

3)Click on the assignment and then click on 'Your team'.

4)Invite a student(say B) to be your teammate.

5)Login as student B and accept A's request to join his/her team.

6)Now, the team name would appear on the top section of the webpage. The team name would be of format : Team_RandomNumber ( say Team_21 ).

===='''Screenshots from conducted Test '''====
1. On clicking Manage and then on assignments, following page appears.

[[File:S1.JPG]]

2. Click on copy assignment icon and edit the information as per requirement. A new assignment would be created.

[[File:S2.JPG]]

3. Now login as student7609 and click on 'Test Assignment'(assignment that you have created as an instructor) under Assignment tab.

[[File:S6.JPG]]

4. Click on 'your team' and send teammate invitation to another student7508.

[[File:S4.JPG]]

5. Now login as Student7508 and accept the teammate request of student7609. You can view the team name 'Team_7' at the top of the page which is the required standardized format.

[[File:S5.JPG]]

=='''RSpec'''==

==='''Issue #842'''===

The existing Rspec test is modified so that the expected value of the team name is modified to the new format.

===='''spec/controllers/team_spec.rb'''====

[[File:team_spec.png]]

==='''Issue #982'''===

The existing Rspec file user_spec.rb is modified in order to add another test case to validate the use of white spaces in the username.

===='''spec/models/user_spec.rb'''====

[[File:User_rspec.JPG]]

=='''External Links'''==

[http://152.46.17.167:8080 Link to Expertiza deployed on VCL]

[https://github.com/expertiza/expertiza/pull/1261 Pull request for issue #842]

[https://github.com/expertiza/expertiza/pull/1259 Pull request for issue #982]

[https://github.com/shraddha-dhyade/expertiza/tree/842_standardizing_team_names Github branch for issue #842]

[https://github.com/shraddha-dhyade/expertiza/tree/982_validation_username Github branch for issue #982]

E1844 Issues related to names

2018-11-03T03:06:14Z

Ntripat:

E1844 Issues related to names

2018-11-03T03:04:33Z

Ntripat:

File:S5.JPG

2018-11-03T03:04:25Z

Ntripat:

E1844 Issues related to names

2018-11-03T03:03:28Z

Ntripat: /* Screenshots from conducted Test */