Merge branch 'master' into pmitros/name-change

Conflicts: static/css/application.css static/css/marketing.css
2012-03-29 11:08:41 -04:00
parent dbb4ff18b0 393044fba9
commit 162fa59441
24 changed files with 591 additions and 258 deletions
--- a/templates/gradebook.html
+++ b/templates/gradebook.html
@@ -1,22 +1,76 @@
 <%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
+    <h1>Gradebook</h1>
+    
+    %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>
+</section>
--- a/templates/gradebook_profilegraphs.html
+++ b/templates/gradebook_profilegraphs.html
@@ -0,0 +1,30 @@
+<%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>
--- a/templates/main.html
+++ b/templates/main.html
@@ -57,21 +57,27 @@

        <div id="calculator_wrapper">
          <form id="calculator">
-            <input type="text" id="calculator_input" />
-            <dl class="help">
-              <dt>Suffixes:</dt>
-              <dd> %kMGTcmunp</dd>
-              <dt>Operations:</dt>
-              <dd>^ * / + - ()</dd>
-              <dt>Functions:</dt>
-              <dd>sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs </dd>
-              <dt>Constants</dt>
-              <dd>e, pi</dd>
+            <div class="input-wrapper">
+              <input type="text" id="calculator_input" />

-              <!-- Students won't know what parallel means at this time.  Complex numbers aren't well tested in the courseware, so we would prefer to not expose them.  If you read the comments in the source, feel free to use them. If you run into a bug, please let us know. But we can't officially support them right now.
+              <div class="help-wrapper">
+                <a href="#">Hints</a>
+                <dl class="help">
+                  <dt>Suffixes:</dt>
+                  <dd> %kMGTcmunp</dd>
+                  <dt>Operations:</dt>
+                  <dd>^ * / + - ()</dd>
+                  <dt>Functions:</dt>
+                  <dd>sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs </dd>
+                  <dt>Constants</dt>
+                  <dd>e, pi</dd>

-              <dt>Unsupported:</dt> <dd>||, j </dd>  -->
-            </dl>
+                  <!-- Students won't know what parallel means at this time.  Complex numbers aren't well tested in the courseware, so we would prefer to not expose them.  If you read the comments in the source, feel free to use them. If you run into a bug, please let us know. But we can't officially support them right now.
+
+                  <dt>Unsupported:</dt> <dd>||, j </dd>  -->
+                </dl>
+              </div>
+            </div>
            <input id="calculator_button" type="submit" value="="/>
            <input type="text" id="calculator_output"  readonly />
          </form>
@@ -128,11 +134,20 @@ $(function() {
    $("#calculator_wrapper").hide();

    $(".calc").click(function(){
-      $("#calculator_wrapper").slideToggle();
+      $("#calculator_wrapper").slideToggle("fast");
      $("#calculator_wrapper #calculator_input").focus();
      $(this).toggleClass("closed");
+      return false;
      });

+    $("div.help-wrapper a").hover(function(){
+      $(".help").toggleClass("shown");
+
+      });
+
+    $("div.help-wrapper a").click(function(){
+      return false;
+      });
    $("form#calculator").submit(function(e){
      e.preventDefault();
      $.getJSON("/calculate", {"equation":$("#calculator_input").attr("value")},
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -1,4 +1,6 @@
 <%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>
@@ -136,7 +138,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']])) }">
@@ -146,8 +148,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 ""
              %>
              
@@ -162,7 +164,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
--- a/templates/profile_graphs.js
+++ b/templates/profile_graphs.js
@@ -1,3 +1,4 @@
+<%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) {
--- a/templates/sass/_gradebook.scss
+++ b/templates/sass/_gradebook.scss
@@ -8,4 +8,4 @@ div.gradebook-wrapper {
      @extend .top-header;
    }
  }
-}
+}
--- a/templates/sass/_info.scss
+++ b/templates/sass/_info.scss
@@ -21,12 +21,12 @@ div.info-wrapper {
        @extend .clearfix;
        border-bottom: 1px solid #e3e3e3;

-        // &:first-child {
-        //   padding: lh(.5);
-        //   margin-left: (-(lh(.5)));
-        //   background: $cream;
-        //   border-bottom: 1px solid darken($cream, 10%);
-        // }
+        &:first-child {
+          padding: lh(.5);
+          margin: 0 (-(lh(.5))) lh();
+          background: $cream;
+          border-bottom: 1px solid darken($cream, 10%);
+        }

        h2 {
          float: left;
--- a/templates/sass/courseware/_sequence-nav.scss
+++ b/templates/sass/courseware/_sequence-nav.scss
@@ -1,19 +1,28 @@
 nav.sequence-nav {
  @extend .topbar;
+  @include box-sizing(border-box);
  margin-bottom: $body-line-height;
+  position: relative;

  ol {
-    display: table-row;
-    float: left;
-    width: flex-grid(8,9) + flex-gutter();
-    position: relative;
+    border-bottom: 1px solid darken($cream, 20%);
+    @include box-sizing(border-box);
+    display: table;
+    padding-right: flex-grid(1, 9);
+    width: 100%;

    a {
      @extend .block-link;
    }

    li {
+      border-left: 1px solid darken($cream, 20%);
      display: table-cell;
+      min-width: 20px;
+
+      &:first-child {
+        border-left: none;
+      }

      .inactive {
        background-repeat: no-repeat;
@@ -35,9 +44,9 @@ nav.sequence-nav {
      }

      .active {
-        @include box-shadow(0 1px 0 #fff);
        background-color: #fff;
        background-repeat: no-repeat;
+        @include box-shadow(0 1px 0 #fff);

        &:hover {
          background-color: #fff;
@@ -46,15 +55,14 @@ nav.sequence-nav {
      }

      a {
-        @include box-shadow(1px 0 0 #fff);
        background-position: center center;
        border: none;
-        border-right: 1px solid darken($cream, 10%);
        cursor: pointer;
-        padding: 15px 4px 14px;
-        width: 28px;
+        display: block;
        height: 17px;
+        padding: 15px 0 14px;
        @include transition(all, .4s, $ease-in-out-quad);
+        width: 100%;

        // @media screen and (max-width: 800px) {
          //   padding: 12px 8px;
@@ -134,8 +142,8 @@ nav.sequence-nav {
        z-index: 99;

        &.shown {
-          opacity: 1;
          margin-top: 4px;
+          opacity: 1;
        }

        &:empty {
@@ -151,9 +159,9 @@ nav.sequence-nav {
          content: " ";
          display: block;
          height: 10px;
+          left: 18px;
          position: absolute;
          top: -5px;
-          left: 18px;
          @include transform(rotate(45deg));
          width: 10px;
        }
@@ -162,33 +170,34 @@ nav.sequence-nav {
  }

  ul {
-    float: right;
    margin-right: 1px;
+    position: absolute;
+    right: 0;
+    top: 0;
    width: flex-grid(1, 9);
-    display: table-row;

    li {
-      display: table-cell;
+      float: left;
+      width: 50%;

      &.prev, &.next {

        a {
-          @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
          background-color: darken($cream, 5%);
          background-position: center center;
          background-repeat: no-repeat;
          border-left: 1px solid darken(#f6efd4, 20%);
+          @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
+          @include box-sizing(border-box);
          cursor: pointer;
-          padding: 0 4px;
-          text-indent: -9999px;
-          width: 38px;
          display: block;
+          text-indent: -9999px;

          &:hover {
-            text-decoration: none;
+            background-color: none;
            color: darken($cream, 60%);
            text-decoration: none;
-            background-color: none;
+            text-decoration: none;
          }

          &.disabled {
@@ -223,28 +232,26 @@ nav.sequence-nav {


 section.course-content {
-  position: relative;

  div#seq_content {
    margin-bottom: 60px;
  }

  nav.sequence-bottom {
-    position: absolute;
-    bottom: 0;
-    right: 50%;
-    margin-right: -53px;
+    bottom: (-(lh()));
+    position: relative;

    ul {
      @extend .clearfix;
      background-color: darken(#F6EFD4, 5%);
+      background-color: darken($cream, 5%);
      border: 1px solid darken(#f6efd4, 20%);
      border-bottom: 0;
      @include border-radius(3px 3px 0 0);
+      @include box-shadow(inset 0 0 0 1px lighten(#f6efd4, 5%));
+      margin: 0 auto;
      overflow: hidden;
      width: 106px;
-      background-color: darken($cream, 5%);
-      @include box-shadow(inset 0 0 0 1px lighten(#f6efd4, 5%));

      li {
        float: left;
@@ -257,11 +264,11 @@ section.course-content {
            background-repeat: no-repeat;
            border-bottom: none;
            display: block;
+            display: block;
            padding: lh(.75) 4px;
            text-indent: -9999px;
-            width: 45px;
-            display: block;
            @include transition(all, .4s, $ease-in-out-quad);
+            width: 45px;

            &:hover {
              background-color: darken($cream, 10%);
--- a/templates/sass/layout/_calculator.scss
+++ b/templates/sass/layout/_calculator.scss
@@ -1,5 +1,5 @@
 li.calc-main {
-  bottom: 0;
+  bottom: -36px;
  left: 0;
  position: fixed;
  width: 100%;
@@ -16,6 +16,8 @@ li.calc-main {
    padding: 8px 12px;
    width: 16px;
    height: 20px;
+    position: relative;
+    top: -36px;

    &:hover {
      opacity: .8;
@@ -28,27 +30,14 @@ li.calc-main {

  div#calculator_wrapper {
    background: rgba(#111, .9);
+    position: relative;
+    top: -36px;
    clear: both;

    form {
      padding: lh();
      @extend .clearfix;

-      input#calculator_input {
-        border: none;
-        @include box-shadow(none);
-        @include box-sizing(border-box);
-        font-size: 16px;
-        padding: 10px;
-        width: flex-grid(7.5);
-        margin: 0;
-        float: left;
-
-        &:focus {
-          outline: none;
-          border: none;
-        }
-      }

      input#calculator_button {
        background: #111;
@@ -83,20 +72,70 @@ li.calc-main {
        padding: 10px;
        width: flex-grid(4);
      }
-    }

-    dl {
-      display: none;
-
-      dt {
-        clear: both;
+      div.input-wrapper {
+        position: relative;
+        @extend .clearfix;
+        width: flex-grid(7.5);
+        margin: 0;
        float: left;
-        font-weight: bold;
-        padding-right: lh(.5);
+
+      input#calculator_input {
+        border: none;
+        @include box-shadow(none);
+        @include box-sizing(border-box);
+        font-size: 16px;
+        padding: 10px;
+        width: 100%;
+
+        &:focus {
+          outline: none;
+          border: none;
+        }
      }

-      dd {
-        float: left;
+        div.help-wrapper {
+          position: absolute;
+          right: 8px;
+          top: 15px;
+
+          a {
+            @include hide-text;
+            width: 17px;
+            height: 17px;
+            background: url("/static/images/info-icon.png") center center no-repeat;
+          }
+
+          dl {
+            background: #fff;
+            @include border-radius(3px);
+            @include box-shadow(0 0 3px #999);
+            color: #333;
+            opacity: 0;
+            padding: 10px;
+            position: absolute;
+            right: -40px;
+            top: -110px;
+            width: 500px;
+            @include transition();
+
+            &.shown {
+              opacity: 1;
+              top: -115px;
+            }
+
+            dt {
+              clear: both;
+              float: left;
+              font-weight: bold;
+              padding-right: lh(.5);
+            }
+
+            dd {
+              float: left;
+            }
+          }
+        }
      }
    }
  }
--- a/templates/sass/layout/_layout.scss
+++ b/templates/sass/layout/_layout.scss
@@ -17,7 +17,7 @@ html {
      @include box-shadow(0 0 4px #dfdfdf);
      @include box-sizing(border-box);
      margin-top: 3px;
-      overflow: hidden;
+      // overflow: hidden;

      @media print {
        border-bottom: 0;
--- a/templates/textinput.html
+++ b/templates/textinput.html
@@ -1,5 +1,9 @@
 <section class="text-input">
-  <input type="text" name="input_${id}" id="input_${id}" value="${value}" />
+  <input type="text" name="input_${id}" id="input_${id}" value="${value}" 
+	 % if size:
+	 size="${size}"
+	 % endif 
+	 />

  <span id="answer_${id}"></span>