{{extend 'admin/instructors.html'}}
{{ block tabcontent }}
{{import urllib.parse}}
<script type="text/javascript" src="https://kozea.github.io/pygal.js/javascripts/svg.jquery.js"></script>
<script type="text/javascript" src="https://kozea.github.io/pygal.js/javascripts/pygal-tooltips.js"></script>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="{{=URL('static', 'dashboard.css')}}"/>
<script src="{{=URL('static', 'dashboard-charts.js')}}"></script>
<script src="../static/js/sorttable.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="{{=URL('static', 'js/jquery.tabletoCSV.js')}}"></script>
<div id="dashboard">
<h1>{{=course.course_name}}</h1>
<h2>Gradebook</h2>
<div>
<label for="studentsearch">Filter by Student</label>
<input type="text" id="studentsearch" onkeyup="searchStudent()" placeholder="Name of student..">
<label for="assignmentsearch">Filter by Assignment</label>
<input type="text" id="assignmentsearch" onkeyup="searchAssignment()" placeholder="Name of assignment..">
</div>
<button id="export" data-export="export">Download Gradebook</button>
<div id="grades" class="col-md-12" style="width:80em; overflow-x:auto; white-space:nowrap;">
<table id="gradebook" class="sortable">
Jquery plugin uses the caption of a table to name the downloaded file
<caption style="display:none;">{{=course.course_name}}_Gradebook</caption>
<thead style="cursor: pointer;">
<tr id = "head">
<td id="leaveAlone0" class="roguecol">FName</td>
<td id="leaveAlone1" class="roguecol">LName</td>
<td id="leaveAlone2" class="roguecol">UName</td>
<td id="leaveAlone3" class="roguecol">E-mail</td>
<td id="leaveAlone4" class="roguecol">Practice</td>
{{for assignment in assignments:}}
<td class="headrow">{{=assignment['name']}}</td>
{{pass}}
</tr>
</thead>
<tbody>
<tr style="background-color: lightgray" id="ddateid">
<td class="roguecol">Due Date</td>
<td class="roguecol"> </td>
<td class="roguecol"> </td>
<td class="roguecol"> </td>
<td class="roguecol"> </td>
{{for date in duedates:}}
<td class="roguecol">{{=date}}</td>
{{pass}}
</tr>
<tr style="background-color: lightgray" id="tpointsid">
<td class="roguecol">Total Points</td>
<td class="roguecol"> </td>
<td class="roguecol"> </td>
<td class="roguecol"> </td>
<td class="roguecol"> </td>
{{for p in totalpoints:}}
<td class="roguecol">{{=p}}</td>
{{pass}}
</tr>
<tr style="background-color: lightgray" id="classaverage">
<td class="roguecol">Class Average</td>
<td class="roguecol"> </td>
<td class="roguecol"> </td>
<td class="roguecol"> </td>
<td class="roguecol">{{=practice_average}}</td>
{{for average in range(len(averagerow)):}}
This if statement is to determine if a percent sign is needed in the average row.
{{if averagerow[average] == 'n/a':}}
<td class="{{=assignments[average]['name']}}">{{=averagerow[average]}}</td>
{{else:}}
<td class="{{=assignments[average]['name']}}">{{=averagerow[average]}}%</td>
{{pass}}
{{pass}}
</tr>
{{for row in range(len(gradetable)):}}
<tr class="search">
{{for item in range(len(gradetable[row])):}}
{{if item > 4 and gradetable[row][item] != 'n/a' and 'e' not in gradetable[row][item]:}}
<td class="{{=assignments[item-5]['name']}}"><a href="questiongrades?sid={{=gradetable[row][2]}}&assignment_id={{=assignments[item-5]['id']}}" style="color:blue;">{{=gradetable[row][item]}}%</a></td>
{{elif item > 4 and gradetable[row][item] != 'n/a':}}
<td class="{{=assignments[item-5]['name']}}"> {{=gradetable[row][item]}} </td>
{{elif item <= 4:}}
<td class="roguecol">{{= urllib.parse.unquote(gradetable[row][item])}}</td>
{{else:}}
<td class="{{=assignments[item-5]['name']}}">Not Started</td>
{{pass}}
{{pass}}
</tr>
{{pass}}
</tbody>
</table>
</div>
</div>
<div class="row"></div>
<div>
<h2>Timed Exam Analysis</h2>
<p>Note: The following reports will ONLY work for competency based timed exams</p>
<ul>
{{for assign in assignments:}}
{{if assign.is_timed:}}
<li><a href="/runestone/exams/one_exam_competency?assignment={{=assign.name}}">{{=assign.name}}</a></li>
{{ pass }}
{{pass}}
</ul>
</div>
<script>
$(function(){
$("#export").click(function(){
$("#gradebook").tableToCSV();
});
});
function searchStudent() {
var input, filter, table, tr, firstName, lastName, i;
input = document.getElementById("studentsearch");
filter = input.value.toUpperCase();
table = document.getElementById("gradebook");
tr = table.querySelectorAll('.search');
for (i = 0; i < tr.length; i++) {
firstName = tr[i].getElementsByTagName("td")[0].innerHTML;
lastName = tr[i].getElementsByTagName("td")[1].innerHTML;
if ((firstName && firstName.toUpperCase().indexOf(filter) > -1)
|| (lastName && lastName.toUpperCase().indexOf(filter) > -1)) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
function searchAssignment() {
var input, filter, tds, tablehead, i, j, rogue;
input = document.getElementById("assignmentsearch");
filter = input.value.toUpperCase();
tablehead = document.getElementById("head");
tablehead = tablehead.getElementsByTagName("td");
$("td").hide()
$(".roguecol").show()
for (i = 0; i < tablehead.length; i++) {
if (tablehead[i].id != "leaveAlone") {
console.log(tablehead[i].innerHTML)
// Because sorting adds a span to the innerHTML of the head td's
rogue = tablehead[i].innerHTML.split('<span id="sorttable_sort');
console.log(rogue[0])
tds = document.getElementsByClassName(rogue[0]);
if (tablehead[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
tablehead[i].style.display = "";
for (j = 0; j < tds.length; j ++) {
tds[j].style.display = "";
}
}
}
}
}
</script>
{{end}}