Show special text when calibrating or when grading.

lms/static/coffee/src/peer_grading/peer_grading_problem.coffee

@@ -69,6 +69,8 @@ class PeerGradingProblem
     @grading_panel = $('.grading-panel')
     @content_panel = $('.content-panel')
 
+    @grading_wrapper =$('.grading-wrapper')
+
     @error_container = $('.error-container')
 
     @submission_key_input = $("input[name='submission-key']")
@@ -76,7 +78,6 @@ class PeerGradingProblem
     @feedback_area = $('.feedback-area')
 
     @score_selection_container = $('.score-selection-container')
-    @score = null
 
     @submit_button = $('.submit-button')
     @action_button = $('.action-button')
@@ -138,6 +139,13 @@ class PeerGradingProblem
     else
       @render_error("Error contacting the grading service")
 
+  calibration_callback: (response) =>
+    if response.success
+      # display correct grade
+      @grading_wrapper.hide()
+      
+    else if response.error
+      @render_error(response.error)
 
   submission_callback: (response) =>
     if response.success
@@ -149,7 +157,6 @@ class PeerGradingProblem
         @render_error("Error occurred while submitting grade")
 
   graded_callback: (event) =>
-    @score = event.target.value
     @show_submit_button()
 
   
@@ -170,12 +177,14 @@ class PeerGradingProblem
       @grading_panel.removeClass('current-state')
 
       # clear out all of the existing text
-      @calibration_panel.find('p').remove()
-      @grading_panel.find('p').remove()
-
-      # add in new text
+      @calibration_panel.find('.calibration-text').show()
+      @grading_panel.find('.calibration-text').show()
+      @calibration_panel.find('.grading-text').hide()
+      @grading_panel.find('.grading-text').hide()
 
+      # TODO: add in new text
 
+      @submit_button.unbind('click')
       @submit_button.click @submit_calibration_essay
 
     else if response.error
@@ -194,9 +203,12 @@ class PeerGradingProblem
       @grading_panel.addClass('current-state')
 
       # clear out all of the existing text
-      @calibration_panel.find('p').remove()
-      @grading_panel.find('p').remove()
+      @calibration_panel.find('.calibration-text').hide()
+      @grading_panel.find('.calibration-text').hide()
+      @calibration_panel.find('.grading-text').show()
+      @grading_panel.find('.grading-text').show()
 
+      @submit_button.unbind('click')
       @submit_button.click @submit_grade
     else if response.error
       @render_error(response.error)
@@ -251,8 +263,6 @@ class PeerGradingProblem
 
 
 
-
-
 mock_backend = false
 ajax_url = $('.peer-grading').data('ajax_url')
 backend = new PeerGradingProblemBackend(ajax_url, mock_backend)

lms/static/sass/course/_staff_grading.scss

@@ -83,10 +83,39 @@ div.peer-grading{
         font-size: .8em;
     }
 
-    .current-state
+    .instructions-panel
     {
-        background: #eee;
+
+        > div
+        {
+            padding: 10px;
+            margin: 0px;
+            border: 1px solid black;
+        }
+        .calibration-panel
+        {
+            float:left;
+            width:47%;
+        }
+        .grading-panel
+        {
+            float:right;
+            width: 47%;
+        }
+        .current-state
+        {
+            background: #eee;
+        }
+        &:after
+        {
+            content:".";
+            display:block;
+            height:0;
+            visibility: hidden;
+            clear:both;
+        }
     }
+
     
     padding: 40px;
 }

lms/templates/peer_grading/peer_grading_problem.html

@@ -25,9 +25,21 @@
         <div class="instructions-panel">
             <div class="calibration-panel">
                 <h3>Calibration</h3>
+                <div class="calibration-text">
+                    <p>You are being calibrated on this problem</p>
+                </div>
+                <div class="grading-text">
+                    <p>You have successfully calibrated on this problem</p>
+                </div>
             </div>
             <div class="grading-panel">
                 <h3>Grading</h3>
+                <div class="calibration-text">
+                    <p>You cannot start grading until you have finished calibrating</p>
+                </div>
+                <div class="grading-text">
+                    <p>Now that you are done calibrating, you can now start grading.</p>
+                </div>
             </div>
         </div>