Skip to content

E
edx-platform
Commit 4be8c235 by Bridger Maxwell
Options

Merged with profile changes again. Last time was backwards

parents 4cd963dc ff6f7a52
Showing with 273 additions and 59 deletions
profile.html
<%inherit file="main.html" />
<%include file="navigation.html" />
<section class="main-content">
<div class="profile-wrapper">
<section class="course-info">
<h1>Course Progress</h1>
<ol>
% for hw in homeworks:
<li>
<h2>${ hw['chapter'] }</h2>
<div class="scores">
<h3>${ hw['section'] }</h3>
<ul>
% for score in hw['scores']:
<li>${ score[0] }/${ score[1] }</li>
% endfor
</ul>
</div>
</li>
% endfor
</ol>
</section>
<section class="user-info">
<h1>${name}</h1>
<ul>
<li>Forum name: <strong>${username}</strong></li>
<li>E-mail: <strong>${email}</strong></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 change</h2>
<p>We'll e-mail you a password reset link at ${email}. Follow
the link in the confirmation email to change 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>
</div>
</section>
<%block name="headextra">
<script type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.min.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>
<%include file="profile_graphs.js"/>
</script>
<script>
var loc=true; // Activate on clicks? Not if already clicked.
......@@ -124,5 +73,68 @@ $(function() {
});
});
});
</script>
</%block>
<%include file="navigation.html" />
<section class="main-content">
<div class="profile-wrapper">
<section class="course-info">
<h1>Course Progress</h1>
<div id="grade-detail-graph" style="width:650px;height:200px;"></div>
<!-- <div id="grade-overview-graph" style="width:650px;height:130px;"></div> -->
<ol>
% for hw in homeworks:
<li>
<h2>${ hw['chapter'] }</h2>
<div class="scores">
<h3>${ 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>
</div>
</li>
% endfor
</ol>
</section>
<section class="user-info">
<h1>${name}</h1>
<ul>
<li>Forum name: <strong>${username}</strong></li>
<li>E-mail: <strong>${email}</strong></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 change</h2>
<p>We'll e-mail you a password reset link at ${email}. Follow
the link in the confirmation email to change 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>
</div>
</section>
profile_graphs.js 0 → 100644
<%!
import json
%>
$(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;
}
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment