334 lines
14 KiB
HTML
334 lines
14 KiB
HTML
<%inherit file="main.html" />
|
|
|
|
<%!
|
|
import json
|
|
%>
|
|
|
|
<script>
|
|
var loc=true; // Activate on clicks? Not if already clicked.
|
|
var lang=true;
|
|
$(function() {
|
|
$("#change_location").click(function() {
|
|
log_event("profile", {"type":"location_show", "old":$("#location_sub").text()});
|
|
|
|
if(loc) {
|
|
$("#description").html('<div>'+
|
|
"Preferred format is city, state, country (so for us, "+
|
|
""Cambridge, Massachusetts, USA"), but give "+
|
|
"as much or as little detail as you want. </div>");
|
|
|
|
loc=false;
|
|
|
|
$("#location_sub").html('<input id="id_loc_text" type="text" name="loc_text" />'+
|
|
'<input type="button" id="change_loc_button" value="Change" />');
|
|
$("#change_loc_button").click(function() {
|
|
postJSON('/change_setting', {'location':$("#id_loc_text").attr("value")}, function(json) {
|
|
$("#location_sub").text(json.location);
|
|
loc=true;
|
|
$("#description").html("");
|
|
log_event("profile", {"type":"location_change", "new":json.location});
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
$("#change_language").click(function() {
|
|
log_event("profile", {"type":"language_show", "old":$("#language_sub").text()});
|
|
|
|
if(lang) {
|
|
lang=false;
|
|
$("#language_sub").html('<input id="id_lang_text" type="text" name="lang_text" />'+
|
|
'<input type="button" id="change_lang_button" value="Change" />');
|
|
$("#change_lang_button").click(function() {
|
|
postJSON('/change_setting', {'language':$("#id_lang_text").attr("value")}, function(json) {
|
|
$("#language_sub").text(json.language);
|
|
lang=true;
|
|
$("#description").html("");
|
|
log_event("profile", {"type":"language_change", "new":json.language});
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
$('#change_password').click(function(){
|
|
$('.modal').trigger('click');
|
|
log_event("profile", {"type":"password_show"});
|
|
});
|
|
|
|
$('#pwd_reset_button').click(function() {
|
|
$.post('/password_reset/',{ "csrfmiddlewaretoken" : "${ csrf }",
|
|
"email" : $('#id_email').val()}, function(data){
|
|
$('#pwd_reset').html(data);
|
|
log_event("profile", {"type":"password_send"});
|
|
});
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<%include file="navigation.html" />
|
|
|
|
<section class="main-content">
|
|
<div class="profile-wrapper">
|
|
<section class="user-info">
|
|
|
|
<h1>${name}</h1>
|
|
|
|
<ul>
|
|
<li>Forum name: ${username}</li>
|
|
<li>E-mail: ${email}</li>
|
|
<li>
|
|
Location: <div id="location_sub">${location}</div><div id="description"></div> <a href="#" id="change_location">Change</a>
|
|
</li>
|
|
<li>
|
|
Language: <div id="language_sub">${language}</div> <a href="#" id="change_language">Change</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- <div><a class="modal" href="#change_password_pop">Reset password</a></div> -->
|
|
|
|
<div id="change_password_pop">
|
|
<h2>Password reset</h2>
|
|
<p>We'll e-mail you a password reset link at ${email}. Follow the link in the email to reset your password.</p>
|
|
|
|
<input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" />
|
|
<input type="submit" id="pwd_reset_button" value="Reset Password" />
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section class="course-info">
|
|
<h1>Course Progress</h1>
|
|
|
|
<div id="grade-detail-graph" style="width:650px;height:200px;"></div>
|
|
<br/>
|
|
<br/>
|
|
<div id="grade-overview-graph" style="width:650px;height:130px;"></div>
|
|
|
|
<script type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.js"></script>
|
|
<script type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.stack.js"></script>
|
|
<script language="javascript" type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.symbol.js"></script>
|
|
<script>
|
|
$(function () {
|
|
function showTooltip(x, y, contents) {
|
|
$('<div id="tooltip">' + contents + '</div>').css( {
|
|
position: 'absolute',
|
|
display: 'none',
|
|
top: y + 5,
|
|
left: x + 5,
|
|
border: '1px solid #fdd',
|
|
padding: '2px',
|
|
'background-color': '#fee',
|
|
opacity: 0.90
|
|
}).appendTo("body").fadeIn(200);
|
|
}
|
|
|
|
/* -------------------------------- Grade detail graph -------------------------------- */
|
|
//var colors = [$.color.parse("#E8B800"), $.color.parse("#A0CEFA"), $.color.parse("#BD3738"), $.color.parse("#429A2E")];
|
|
//var colors = [$.color.parse("#1B2045"), $.color.parse("#557a00"), $.color.parse("#F5600"), $.color.parse("#FEBA2C")];
|
|
//var colors = [$.color.parse("#E7C856"), $.color.parse("#CD462E"), $.color.parse("#B01732"), $.color.parse("#41192A")];
|
|
var colors = [$.color.parse("#434F5E"), $.color.parse("#BEF731"), $.color.parse("#FB5455"), $.color.parse("#44C4B7")];
|
|
//var colors = [$.color.parse("#147A7D"), $.color.parse("#C0C900"), $.color.parse("#C9005B"), $.color.parse("#FCF9A5")];
|
|
|
|
|
|
|
|
var series = [];
|
|
var ticks = []; //These are the indices and x-axis labels for the data
|
|
var bottomTicks = []; //Labels on the bottom
|
|
var detail_tooltips = {}; //This an dictionary mapping from 'section' -> array of detail_tooltips
|
|
var droppedScores = []; //These are the datapoints to indicate assignments which aren't factored into the total score
|
|
detail_tooltips['Dropped Scores'] = [];
|
|
<%
|
|
tickIndex = 1
|
|
sectionSpacer = 0.5
|
|
sectionIndex = 0
|
|
%>
|
|
%for section in grade_summary:
|
|
%if 'subscores' in section: ##This is for sections like labs or homeworks, with several smaller components and a total
|
|
series.push({label: "${section['category']}",
|
|
data: ${ json.dumps( [[i + tickIndex, score['percentage']] for i,score in enumerate(section['subscores'])] ) },
|
|
color: colors[${sectionIndex}].toString(),
|
|
});
|
|
ticks = ticks.concat( ${ json.dumps( [[i + tickIndex, str(i + 1)] for i,score in enumerate(section['subscores'])] ) } );
|
|
bottomTicks.push( [ ${tickIndex + len(section['subscores'])/2}, "${section['category']}" ] );
|
|
detail_tooltips["${section['category']}"] = ${ json.dumps([score['summary'] for score in section['subscores']] ) };
|
|
|
|
droppedScores = droppedScores.concat(${ json.dumps( [[tickIndex + index, 0.05] for index in section['dropped_indices']]) });
|
|
<% dropExplanation = "The lowest {} {} scores are dropped".format( len(section['dropped_indices']), section['category'] ) %>
|
|
detail_tooltips['Dropped Scores'] = detail_tooltips['Dropped Scores'].concat( ${json.dumps( [dropExplanation] * len(section['dropped_indices']) )} );
|
|
|
|
<% tickIndex += len(section['subscores']) + sectionSpacer %>
|
|
|
|
##Now put on the aggregate score
|
|
series.push({label: "${section['category']} Total",
|
|
data: [[${tickIndex}, ${section['totalscore']['score']}]],
|
|
color: colors[${sectionIndex}].toString(),
|
|
});
|
|
ticks = ticks.concat( [ [${tickIndex}, "Total"] ] );
|
|
detail_tooltips["${section['category']} Total"] = [ "${section['totalscore']['summary']}" ];
|
|
<% tickIndex += 1 + sectionSpacer %>
|
|
|
|
%else: ##This is for sections like midterm or final, which have no smaller components
|
|
series.push({label: "${section['category']}",
|
|
data: [[${tickIndex}, ${section['totalscore']['score']}]],
|
|
color: colors[${sectionIndex}].toString(),
|
|
});
|
|
%if section['category'] == "Midterm":
|
|
bottomTicks = bottomTicks.concat( [ [${tickIndex}, "${section['category']}"] ] );
|
|
%else:
|
|
ticks = ticks.concat( [ [${tickIndex}, "${section['category']}"] ] );
|
|
%endif
|
|
|
|
detail_tooltips["${section['category']}"] = [ "${section['totalscore']['summary']}" ];
|
|
|
|
<% tickIndex += 1 + sectionSpacer %>
|
|
%endif
|
|
<%sectionIndex += 1 %>
|
|
%endfor
|
|
|
|
//Alwasy be sure that one series has the xaxis set to 2, or the second xaxis labels won't show up
|
|
series.push( {label: 'Dropped Scores', data: droppedScores, points: {symbol: "cross", show: true, radius: 3}, bars: {show: false}, color: "red", xaxis: 2} );
|
|
|
|
var options = {
|
|
series: {lines: {show: false, steps: false },
|
|
bars: {show: true, barWidth: 0.6, align: 'center', lineWidth: 1},},
|
|
xaxis: {tickLength: 0, min: 0.0, max: ${tickIndex - sectionSpacer}},
|
|
xaxes: [{ticks: ticks}, {ticks: bottomTicks}],
|
|
yaxis: {ticks: [[1, "100%"], [0.87, "A 87%"], [0.7, "B 70%"], [0.6, "C 60%"], [0, "0%"]], min: 0.0, max: 1.0, labelWidth: 50},
|
|
grid: { hoverable: true, clickable: true, borderWidth: 1,
|
|
markings: [ {yaxis: {from: 0.87, to: 1 }, color: "#EBFFD5"}, {yaxis: {from: 0.7, to: 0.87 }, color: "#E6FFFF"},
|
|
{yaxis: {from: 0.6, to: 0.7 }, color: "#FFF2E3"}, ] },
|
|
legend: {show: false},
|
|
};
|
|
|
|
$.plot($("#grade-detail-graph"), series, options);
|
|
|
|
var previousPoint = null;
|
|
$("#grade-detail-graph").bind("plothover", function (event, pos, item) {
|
|
$("#x").text(pos.x.toFixed(2));
|
|
$("#y").text(pos.y.toFixed(2));
|
|
if (item) {
|
|
if (previousPoint != item.dataIndex) {
|
|
previousPoint = item.dataIndex;
|
|
|
|
$("#tooltip").remove();
|
|
|
|
if (item.series.label in detail_tooltips) {
|
|
var series_tooltips = detail_tooltips[item.series.label];
|
|
if (item.dataIndex < series_tooltips.length) {
|
|
var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2);
|
|
|
|
showTooltip(item.pageX, item.pageY, series_tooltips[item.dataIndex]);
|
|
}
|
|
}
|
|
|
|
}
|
|
} else {
|
|
$("#tooltip").remove();
|
|
previousPoint = null;
|
|
}
|
|
});
|
|
|
|
|
|
/* ------------------------------- Grade overview graph ------------------------------- */
|
|
series = [];
|
|
ticks = [];
|
|
var markings = [];
|
|
var overview_tooltips = {};
|
|
<%
|
|
totalWeight = 0.0
|
|
sectionIndex = 0
|
|
totalScore = 0.0
|
|
%>
|
|
%for section in grade_summary:
|
|
%if section['totalscore']['score'] > 0:
|
|
series.push({label: "${section['category']}",
|
|
data: [[${section['totalscore']['score'] * section['weight']}, 1]],
|
|
color: colors[${sectionIndex}].toString(),
|
|
##We need at least one to be on xaxis 2 for the second xaxis labels to show up
|
|
${"xaxis: 2" if sectionIndex % 2 == 0 else ""} });
|
|
%endif
|
|
|
|
ticks.push( [${totalWeight + section['weight'] * 0.5}, "${'{} - {:.0%}'.format(section['category'], section['weight'])}" ] );
|
|
|
|
markings.push({xaxis: {from: ${totalWeight}, to: ${totalWeight + section['weight']} }, color:colors[${sectionIndex}].scale("a", 0.6).toString() });
|
|
|
|
overview_tooltips["${section['category']}"] = [ "${section['totalscore']['summary']}" ];
|
|
<%
|
|
sectionIndex += 1
|
|
totalWeight += section['weight']
|
|
totalScore += section['totalscore']['score'] * section['weight']
|
|
%>
|
|
%endfor
|
|
|
|
options = {
|
|
series: {stack: 0,
|
|
lines: {show: false, steps: false },
|
|
bars: {show: true, barWidth: 0.8, align: 'center', horizontal: true, linewidth:0, fill:1},},
|
|
xaxis: {min: 0.0, max: 1.0},
|
|
yaxis: {min: 0.0, max: 2.0, labelWidth:50, ticks:[[1.18,"Grade Totals"]], tickLength: 0},
|
|
xaxes: [ {ticks: [[0.87, "A 87%"], [0.7, "B 70%"], [0.6, "C 60%"]], position: top},
|
|
{ticks: ticks }],
|
|
grid: { markings: markings, hoverable: true, clickable: true, borderWidth: 1},
|
|
legend: {show: false},
|
|
};
|
|
|
|
var $gradeOverviewGraph = $("#grade-overview-graph");
|
|
var plot = $.plot($gradeOverviewGraph, series, options);
|
|
|
|
//Put the percent on the graph
|
|
var o = plot.pointOffset({x: ${totalScore}, y: 1 });
|
|
$gradeOverviewGraph.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + (o.top - 10) + 'px">${"{:.0%}".format(totalScore)}</div>');
|
|
|
|
|
|
$("#grade-overview-graph").bind("plothover", function (event, pos, item) {
|
|
$("#x").text(pos.x.toFixed(2));
|
|
$("#y").text(pos.y.toFixed(2));
|
|
if (item) {
|
|
if (previousPoint != (item.dataIndex, item.seriesIndex)) {
|
|
previousPoint = (item.dataIndex, item.seriesIndex);
|
|
|
|
$("#tooltip").remove();
|
|
|
|
if (item.series.label in overview_tooltips) {
|
|
var series_tooltips = overview_tooltips[item.series.label];
|
|
if (item.dataIndex < series_tooltips.length) {
|
|
var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2);
|
|
|
|
showTooltip(item.pageX, item.pageY, series_tooltips[item.dataIndex]);
|
|
}
|
|
}
|
|
|
|
}
|
|
} else {
|
|
$("#tooltip").remove();
|
|
previousPoint = null;
|
|
}
|
|
});
|
|
|
|
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
<!-- <div id="description"></div> -->
|
|
|
|
<ol>
|
|
% for hw in homeworks:
|
|
<li>
|
|
<h2>${ hw['chapter'] }</h2>
|
|
<h3>${hw['format']} - ${ hw['section'] } ${"({0}/{1})".format( hw['section_total'][0], hw['section_total'][1] )}</h3>
|
|
|
|
<ul>
|
|
% for score in hw['scores']:
|
|
<li>${ score[0] }/${ score[1] }</li>
|
|
% endfor
|
|
</ul>
|
|
</li>
|
|
% endfor
|
|
</ol>
|
|
</section>
|
|
</div>
|
|
</section>
|