Updates to copy and styling and a few bugfixes

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

@@ -54,8 +54,21 @@ The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for t
         submission_id: 1
         submission_key: 'abcd'
         student_response: 'I am a fake student response'
-        prompt: 'Answer this question'
-        rubric: 'This is a rubric.'
+        prompt: '''
+            	<h2>S11E3: Metal Bands</h2>
+<p>Shown below are schematic band diagrams for two different metals. Both diagrams appear different, yet both of the elements are undisputably metallic in nature.</p>
+<p>* Why is it that both sodium and magnesium behave as metals, even though the s-band of magnesium is filled? </p>
+<p>This is a self-assessed open response question. Please use as much space as you need in the box below to answer the question.</p>
+            '''
+        rubric: '''
+<ul>
+<li>Metals tend to be good electronic conductors, meaning that they have a large number of electrons which are able to access empty (mobile) energy states within the material.</li>
+<li>Sodium has a half-filled s-band, so there are a number of empty states immediately above the highest occupied energy levels within the band.</li>
+<li>Magnesium has a full s-band, but the the s-band and p-band overlap in magnesium. Thus are still a large number of available energy states immediately above the s-band highest occupied energy level.</li>
+</ul>
+
+<p>Please score your response according to how many of the above components you identified:</p>
+            '''
         max_score: 4
     else if cmd == 'save_calibration_essay'
       response = 
@@ -208,7 +221,7 @@ class PeerGradingProblem
     if response.success
 
       # load in all the data
-      @submission_container.html("<h3>Calibration Essay</h3>")
+      @submission_container.html("<h3>Training Essay</h3>")
       @render_submission_data(response)
       # TODO: indicate that we're in calibration mode 
       @calibration_panel.addClass('current-state')
@@ -288,7 +301,7 @@ class PeerGradingProblem
       calibration_wrapper.append("<p>Congratulations! Your score matches the actual one!</p>")
     else
       calibration_wrapper.append("<p>Please try to understand the grading critera better so that you will be more accurate next time.</p>") 
-
+    @submit_button.hide()
     
   render_interstitial_page: () =>
     @content_panel.hide()

lms/static/sass/course/_staff_grading.scss

@@ -36,8 +36,8 @@ div.peer-grading{
         }
     }
 
-    .prompt-container,
-    .rubric-container,
+    .prompt-information-container,
+    .rubric-wrapper,
     .calibration-feedback-wrapper,
     .grading-container
     {
@@ -102,11 +102,17 @@ div.peer-grading{
         {
             padding: 10px;
             margin: 0px;
-            border: 1px solid black;
+            background: #eee;
+            height: 10em;
             h3
             {
                 text-align:center;
                 text-transform:uppercase;
+                color: #777;
+            }
+            p
+            {
+                color: #777;
             }
         }
         .calibration-panel
@@ -121,7 +127,11 @@ div.peer-grading{
         }
         .current-state
         {
-            background: #eee;
+            background: #0F6B8A;
+            h3, p
+            {
+                color: white;
+            }
         }
         &:after
         {
@@ -145,5 +155,9 @@ div.peer-grading{
         }
     }
     
+    .interstitial-grading
+    {
+    }
     padding: 40px;
 }
+

lms/templates/peer_grading/peer_grading_problem.html

@@ -22,37 +22,38 @@
         <div class="message-container"></div>
 
         <section class="content-panel">
+        <h1>Peer Grading </h1>
         <div class="instructions-panel">
             <div class="calibration-panel">
-                <h3>Calibration</h3>
+                <h3>Learning to Grade</h3>
                 <div class="calibration-text">
-                    <p>You are being calibrated on this problem</p>
+                    <p>Before you can do any proper peer grading, you first need to understand how your own grading compares to that of the instrutor. Once your grades begin to match the instructor's, you will move on to grading your peers!</p>
                 </div>
                 <div class="grading-text">
-                    <p>You have successfully calibrated on this problem</p>
+                    <p>You have successfully managed to calibrate your answers to that of the instructors and have moved onto the next step in the peer grading process.</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>
+                    <p>You cannot start grading until you have graded a sufficient number of training problems and have been able to demonstrate that your scores closely match that of the instructor.</p>
                 </div>
                 <div class="grading-text">
-                    <p>Now that you are done calibrating, you can now start grading.</p>
+                    <p>Now that you have finished your training, you are now allowed to grade your peers. Please keep in mind that students are allowed to respond to the grades and feedback they receive.</p>
                 </div>
             </div>
         </div>
 
         <div class="prompt-wrapper">
             <div class="prompt-information-container collapsible">
-                <header><a href="javascript:void(0)">View Question</a></header>
+                <header><a href="javascript:void(0)">Question</a></header>
                 <section>
                 <div class="prompt-container">
                 </div>
             </section>
             </div>
             <div class="rubric-wrapper collapsible">
-                <header><a href="javascript:void(0)">View Rubric</a></header>
+                <header><a href="javascript:void(0)">Rubric</a></header>
                 <section>
                 <div class="rubric-container">
                 </div>
@@ -98,7 +99,7 @@
 
     <section class="interstitial-page">
         <h1>Congratulations!</h1>
-        <p> You have now completed calibration. You are now ready to start grading.</p>
+        <p> You have now completed the calibration step. You are now ready to start grading.</p>
         <input type="button" class="interstitial-page-button" value="Start Grading!" name="interstitial-page-button" />
     </section>