Merge branch 'feature/vik/oe-versioning' into feature/vik/improve-oe-ui

Conflicts:
	common/lib/xmodule/xmodule/js/src/peergrading/peer_grading_problem.coffee
	lms/static/sass/course/_staff_grading.scss

lms/static/coffee/src/staff_grading/staff_grading.coffee

@@ -212,55 +212,19 @@ class @StaffGrading
 
 
   setup_score_selection: =>
-    # first, get rid of all the old inputs, if any.
-    @grade_selection_container.html("""
-    <h3>Overall Score</h3>
-    <p>Choose an overall score for this submission.</p>
-    """)
-    # Now create new labels and inputs for each possible score.
-    for score in [0..@max_score]
-      id = 'score-' + score
-      label = """<label for="#{id}">#{score}</label>"""
-      input = """
-              <input type="radio" class="grade-selection" name="grade-selection" id="#{id}" value="#{score}"/>
-              """  # "  fix broken parsing in emacs
-      @grade_selection_container.append(input + label)
-    $('.grade-selection').click => @graded_callback()
-
     @score_selection_container.html(@rubric)
     $('.score-selection').click => @graded_callback()
 
 
   graded_callback: () =>
-    @grade = $("input[name='grade-selection']:checked").val()
-    if @grade == undefined
-      return
-    # check to see whether or not any categories have not been scored
-    num_categories = $('table.rubric tr').length
-    for i in [0..(num_categories-1)]
-      score = $("input[name='score-selection-#{i}']:checked").val()
-      if score == undefined
-        return
-    # show button if we have scores for all categories
-    @state = state_graded
-    @submit_button.show()
+   # show button if we have scores for all categories
+    if Rubric.check_complete()
+      @state = state_graded
+      @submit_button.show()
 
   set_button_text: (text) =>
     @action_button.attr('value', text)
 
-  # finds the scores for each rubric category
-  get_score_list: () =>
-    # find the number of categories:
-    num_categories = $('table.rubric tr').length
-
-    score_lst = []
-    # get the score for each one
-    for i in [0..(num_categories-1)]
-      score = $("input[name='score-selection-#{i}']:checked").val()
-      score_lst.push(score)
-
-    return score_lst
-
   ajax_callback: (response) =>
     # always clear out errors and messages on transition.
     @error_msg = ''
@@ -285,8 +249,8 @@ class @StaffGrading
 
   skip_and_get_next: () =>
     data =
-      score: @grade
-      rubric_scores: @get_score_list()
+      score: Rubric.get_total_score()
+      rubric_scores: Rubric.get_score_list()
       feedback: @feedback_area.val()
       submission_id: @submission_id
       location: @location
@@ -299,8 +263,8 @@ class @StaffGrading
 
   submit_and_get_next: () ->
     data =
-      score: @grade
-      rubric_scores: @get_score_list()
+      score: Rubric.get_total_score()
+      rubric_scores: Rubric.get_score_list()
       feedback: @feedback_area.val()
       submission_id: @submission_id
       location: @location

lms/static/sass/course.scss

@@ -44,9 +44,9 @@
 @import "course/gradebook";
 @import "course/tabs";
 @import "course/staff_grading";
+@import "course/rubric";
 @import "course/open_ended_grading";
 
-
 // instructor
 @import "course/instructor/instructor";
 

lms/static/sass/course/_rubric.scss

@@ -0,0 +1,52 @@
+.rubric {
+  margin: 40px 0px;
+  tr {
+      margin:10px 0px;
+      height: 100%;
+  }
+  td {
+      padding: 20px 0px 25px 0px;
+      height: 100%;
+      border: 1px black solid;
+      text-align: center;
+  }
+  th {
+      padding: 5px;
+      margin: 5px;
+      text-align: center;
+  }
+  .points-header th {
+      padding: 0px;
+  }
+  .rubric-label
+  {
+      position: relative;
+      padding: 0px 15px 15px 15px;
+      width: 130px;
+      min-height: 50px;
+      min-width: 50px;
+      font-size: .9em;
+      background-color: white;
+      display: block;
+  }
+  .grade {
+    position: absolute;
+    bottom:0px;
+    right:0px;
+    margin:10px;
+  }
+  .selected-grade,
+  .selected-grade .rubric-label {
+    background: #666;
+    color: white; 
+  }
+   input[type=radio]:checked + .rubric-label {
+    background: white;
+    color: $base-font-color; }
+  input[class='score-selection'] {
+      position: relative;
+      margin-left: 10px;
+      font-size: 16px;
+  }
+}
+

lms/static/sass/course/_staff_grading.scss

@@ -22,7 +22,7 @@ div.peer-grading{
     label {
         margin: 0px;
         padding: 2px;
-        display: inline-block;
+        @include: inline-block;
         min-width: 50px;
         background-color: #CCC;
         text-size: 1.5em;
@@ -132,6 +132,7 @@ div.peer-grading{
             padding: 2px;
             margin-bottom: 5px;
             background: #eee;
+            height: 10em;
             width:47.6%;
             h3
             {
@@ -183,50 +184,6 @@ div.peer-grading{
             margin-top: 20px;
         }
     }
-    padding: 5px;
-  .rubric {
-      tr {
-          margin:10px 0px;
-          height: 100%;
-      }
-      td {
-          padding: 20px 0px 25px 0px;
-          height: 100%;
-      }
-      th {
-          padding: 5px;
-          margin: 5px;
-      }
-      label,
-      .view-only {
-          margin:2px;
-          position: relative;
-          padding: 15px 15px 25px 15px;
-          width: 150px;
-          height:100%;
-          display: inline-block;
-          min-height: 50px;
-          min-width: 50px;
-          background-color: #CCC;
-          font-size: .9em;
-      }
-      .grade {
-        position: absolute;
-        bottom:0px;
-        right:0px;
-        margin:10px;
-      }
-      .selected-grade {
-        background: #666;
-        color: white; 
-      }
-      input[type=radio]:checked + label {
-        background: #666;
-        color: white; }
-      input[class='score-selection'] {
-        display: none; 
-      }
-  }
-    
+    padding: 40px;
 }
 

lms/templates/instructor/staff_grading.html

@@ -75,6 +75,7 @@
   </p>
   <p class="grade-selection-container">
   </p>
+  <h3>Written Feedback</h3>
   <textarea name="feedback" placeholder="Feedback for student (optional)"
             class="feedback-area" cols="70" ></textarea>
 </div>

lms/templates/open_ended_rubric.html

@@ -8,26 +8,33 @@
     <p>Select the criteria you feel best represents this submission in each category.</p>
     % endif
     <table class="rubric">
+        <tr class="points-header">
+            <th></th>
+        % for i in range(max_score + 1):
+            <th>   
+                ${i} points
+            </th>
+        % endfor
+        </tr>
         % for i in range(len(categories)):
             <% category = categories[i] %>
         <tr>
             <th>${category['description']}</th>
             % for j in range(len(category['options'])):
                 <% option = category['options'][j] %>
+            %if option['selected']:
+            <td class="selected-grade">
+            %else:
             <td>
+            % endif
                 % if view_only:
                     ## if this is the selected rubric block, show it highlighted
-                    % if option['selected']:
-                        <div class="view-only selected-grade">
-                    % else:
-                        <div class="view-only">
-                    % endif
+                        <div class="rubric-label">
                         ${option['text']}
-                        <div class="grade">[${option['points']} points]</div>
                         </div>
                 % else:
                     <input type="radio" class="score-selection" name="score-selection-${i}" id="score-${i}-${j}" value="${option['points']}"/>
-                    <label for="score-${i}-${j}">${option['text']}</label>
+                    <label class="rubric-label" for="score-${i}-${j}">${option['text']}</label>
                 % endif
             </td>
             % endfor

lms/templates/peer_grading/peer_grading_problem.html

@@ -39,7 +39,9 @@
           <p class="rubric-selection-container"></p>
           <p class="score-selection-container">
           </p>
-          <textarea name="feedback" placeholder="Feedback for student (optional)"
+          <h3>Written Feedback</h3>
+          <p>Please include some written feedback as well.</p>
+          <textarea name="feedback" placeholder="Feedback for student"
                     class="feedback-area" cols="70" ></textarea>
           <p class="flag-student-container">Flag this submission for review by course staff (use if the submission contains inappropriate content): <input type="checkbox" class="flag-checkbox" value="student_is_flagged"></p>
         </div>

lms/templates/self_assessment_rubric.html

@@ -2,20 +2,4 @@
     <div class="rubric">
     ${rubric | n }
     </div>
-
-    % if not read_only:
-    <div class="scoring-container">
-    <h3>Scoring</h3>
-    <p>Please select a score below:</p>
-
-    <div class="grade-selection">
-    %for i in xrange(0,max_score+1):
-    <% id = "score-{0}".format(i) %>
-        <input type="radio" class="grade-selection" name="grade-selection" value="${i}" id="${id}">
-        <label for="${id}">${i}</label>
-    %endfor
-    </div>
-    </div>
-    % endif
-
 </div>