Merge pull request #7 from MITx/bridger-grades

Bridger grades

templates/gradebook.html

 <%inherit file="main.html" />
+
+<%block name="headextra">
+  <script type="text/javascript" src="/static/js/flot/jquery.flot.js"></script>
+  <script type="text/javascript" src="/static/js/flot/jquery.flot.stack.js"></script>
+  <script type="text/javascript" src="/static/js/flot/jquery.flot.symbol.js"></script>
+  
+  <style type="text/css">
+  .grade_a {color:green;}
+  .grade_b {color:Chocolate;}
+  .grade_c {color:DimGray;}
+  .grade_none {color:LightGray;}
+  </style>
+  
+</%block>
+
 <%include file="navigation.html" args="active_page=''" />
 <section class="main-content">
 <div class="gradebook-wrapper">
   <section class="gradebook-content">
     <h1>Gradebook</h1>
-  % for s in students:
-  <h2><a href=/profile/${s['id']}>${s['username']}</a></h2>
-  % for c in s['grade_info']['grade_summary']:
-  <h3>${c['category']} </h3>
-  <p>
-  % if 'subscores' in c:
-  % for ss in c['subscores']:
-  <br>${ss['summary']}
-  % endfor
-  % endif
-  </p>
-  % endfor
-  % endfor
+    
+    %if len(students) > 0:
+    <table>
+      <%
+      templateSummary = students[0]['grade_info']['grade_summary']
+      %>
+      
+      
+      <tr> <!-- Header Row -->
+        <th>Student</th>
+        %for section in templateSummary:
+          %if 'subscores' in section:
+            %for subsection in section['subscores']:
+              <th>${subsection['label']}</th>
+            %endfor
+            <th>${section['totallabel']}</th>
+          %else:
+            <th>${section['category']}</th>
+          %endif
+        %endfor
+      </tr>
+      
+      <%def name="percent_data(percentage)">
+        <%
+          data_class = "grade_none"
+          if percentage > .87:
+            data_class = "grade_a"
+          elif percentage > .70:
+            data_class = "grade_b"
+          elif percentage > .6:
+            data_class = "grade_c"
+        %>
+        <td class="${data_class}">${ "{0:.0%}".format( percentage ) }</td>
+      </%def>
+      
+      %for student in students:
+      <tr>
+        <td><a href="/discussion/users/${student['id']}/${student['username']}/">${student['username']}</a></td>
+        %for section in student['grade_info']['grade_summary']:
+          %if 'subscores' in section:
+            %for subsection in section['subscores']:
+              ${percent_data( subsection['percentage'] )}
+            %endfor
+            ${percent_data( section['totalscore'] )}
+          %else:
+            ${percent_data( section['totalscore'] )}
+          %endif
+        %endfor
+      </tr>
+      %endfor
+    </table>
+    %endif
   </section>
 </div>
 </section>
\ No newline at end of file

templates/gradebook_profilegraphs.html

+<%inherit file="main.html" />
+<%namespace name="profile_graphs" file="profile_graphs.js"/>
+
+<%block name="headextra">
+  <script type="text/javascript" src="/static/js/flot/jquery.flot.js"></script>
+  <script type="text/javascript" src="/static/js/flot/jquery.flot.stack.js"></script>
+  <script type="text/javascript" src="/static/js/flot/jquery.flot.symbol.js"></script>
+  % for s in students:
+  <script>
+    ${profile_graphs.body(s['grade_info']['grade_summary'], "grade-detail-graph-" + str(s['id']))}
+  </script>
+  %endfor
+</%block>
+
+<%include file="navigation.html" args="active_page=''" />
+<section class="main-content">
+<div class="gradebook-wrapper">
+  <section class="gradebook-content">
+    <h1>Gradebook</h1>
+    <ol>
+      % for s in students:
+      <li>
+        <h2><a href=/profile/${s['id']}>${s['username']}</a></h2>
+        <div id="grade-detail-graph-${s['id']}" style="width:1000px;height:300px;"></div>
+      </li>
+      % endfor
+    </ol>
+  </section>
+</div>
+</section>

templates/profile.html

 <%inherit file="main.html" />
+<%namespace name="profile_graphs" file="profile_graphs.js"/>
+
 <%block name="title"><title>Profile - MITx 6.002x</title></%block>
 
 <%!
@@ -10,7 +12,7 @@
 <script type="text/javascript" src="/static/js/flot/jquery.flot.stack.js"></script>
 <script type="text/javascript" src="/static/js/flot/jquery.flot.symbol.js"></script>
 <script>
-<%include file="profile_graphs.js"/>
+${profile_graphs.body(grade_summary, "grade-detail-graph")}
 </script>
 
 <script>
@@ -94,7 +96,7 @@ $(function() {
       <div id="grade-detail-graph"></div>
             
       <ol class="chapters">
-        %for chapter in chapters:
+        %for chapter in courseware_summary:
         %if not chapter['chapter'] == "hidden":
         <li>
           <h2><a href="${reverse('courseware_chapter', args=format_url_params([chapter['course'], chapter['chapter']])) }">
@@ -104,8 +106,8 @@ $(function() {
             %for section in chapter['sections']:
             <li>
               <%
-              earned = section['section_total'][0]
-              total = section['section_total'][1]
+              earned = section['section_total'].earned
+              total = section['section_total'].possible
               percentageString = "{0:.0%}".format( float(earned)/total) if earned > 0 else ""
               %>
               
@@ -120,7 +122,7 @@ $(function() {
                 <ol class="scores">
                   ${ "Problem Scores: " if section['graded'] else "Practice Scores: "}
                   %for score in section['scores']:
-                    <li class="score">${"{0:g}/{1:g}".format(score[0],score[1])}</li>
+                    <li class="score">${"{0:g}/{1:g}".format(score.earned,score.possible)}</li>
                   %endfor
                 </ol>
               %endif

templates/profile_graphs.js

+<%page args="grade_summary, graph_div_id, **kwargs"/>
 <%!
   import json
 %>
@@ -57,21 +58,21 @@ $(function () {
         category_total_label = section['category'] + " Total"
         series.append({
             'label' : category_total_label,
-            'data' : [ [tickIndex, section['totalscore']['score']] ],
+            'data' : [ [tickIndex, section['totalscore']] ],
             'color' : colors[sectionIndex]
         })
         
         ticks.append( [tickIndex, section['totallabel']] )
-        detail_tooltips[category_total_label] = [section['totalscore']['summary']]
+        detail_tooltips[category_total_label] = [section['totalscore_summary']]
     else:
         series.append({
             'label' : section['category'],
-            'data' : [ [tickIndex, section['totalscore']['score']] ],
+            'data' : [ [tickIndex, section['totalscore']] ],
             'color' : colors[sectionIndex]
         })
         
         ticks.append( [tickIndex, section['totallabel']] )
-        detail_tooltips[section['category']] = [section['totalscore']['summary']]
+        detail_tooltips[section['category']] = [section['totalscore_summary']]
         
     tickIndex += 1 + sectionSpacer
     sectionIndex += 1
@@ -86,12 +87,12 @@ $(function () {
   overviewBarX = tickIndex
      
   for section in grade_summary:
-      weighted_score = section['totalscore']['score'] * section['weight']
+      weighted_score = section['totalscore'] * section['weight']
       summary_text = "{0} - {1:.1%} of a possible {2:.0%}".format(section['category'], weighted_score, section['weight'])
       
       weighted_category_label = section['category'] + " - Weighted"
          
-      if section['totalscore']['score'] > 0:
+      if section['totalscore'] > 0:
           series.append({
               'label' : weighted_category_label,
               'data' : [ [overviewBarX, weighted_score] ],
@@ -101,7 +102,7 @@ $(function () {
       detail_tooltips[weighted_category_label] = [ summary_text ]
       sectionIndex += 1
       totalWeight += section['weight']
-      totalScore += section['totalscore']['score'] * section['weight']
+      totalScore += section['totalscore'] * section['weight']
         
   ticks += [ [overviewBarX, "Total"] ]
   tickIndex += 1 + sectionSpacer
@@ -128,7 +129,7 @@ $(function () {
     legend: {show: false},
   };
   
-  var $grade_detail_graph = $("#grade-detail-graph");
+  var $grade_detail_graph = $("#${graph_div_id}");
   if ($grade_detail_graph.length > 0) {
     var plot = $.plot($grade_detail_graph, series, options);
     
@@ -137,7 +138,7 @@ $(function () {
   }
       
   var previousPoint = null;
-  $("#grade-detail-graph").bind("plothover", function (event, pos, item) {
+  $grade_detail_graph.bind("plothover", function (event, pos, item) {
     $("#x").text(pos.x.toFixed(2));
     $("#y").text(pos.y.toFixed(2));
     if (item) {