styling of peer review interface for students along with minimal adjustments to…

styling of peer review interface for students along with minimal adjustments to the staff grading interface as well. added internationalization of peer grading strings.

lms/static/sass/course/_staff_grading.scss

 div.staff-grading,
 div.peer-grading{
-    padding: $baseline;
-    border: none;
+    border: 1px solid lightgray;
     
     textarea.feedback-area {
         margin: 0;
@@ -37,7 +36,8 @@ div.peer-grading{
         &.submission-container{
             @include clearfix;
             overflow-y: auto;
-            height: 150px;
+            height: auto;
+            max-height: 300px;
             border: 1px solid #ddd;
             background: #F6F6F6;
         }
@@ -133,12 +133,14 @@ div.peer-grading{
 
     .instructions-panel {
         @include clearfix;
-        margin-right:2px;
+        padding: $baseline/2;
+        background-color: #eee;
+        font-size: .8em;
         
         > div {
             margin-bottom: 5px;
-            padding: 2px;
-            width: 47.6%;
+            padding: $baseline/2;
+            width: 49%;
             background: #eee;
 
             h3 {
@@ -152,18 +154,19 @@ div.peer-grading{
             }
         }
         .calibration-panel {
-            float: left;
+            display: inline-block;
+            width: 20%;
+            border-radius: 3px;
         }
 
         .grading-panel {
-            float: right;
+            display: inline-block;
+            width: 20%;
+            border-radius: 3px;
         }
         .current-state {
-            background: #1d9dd9;
+            background: #fff;
             
-            h3, p {
-                color: white;
-            }
         }
     }
 
@@ -186,3 +189,20 @@ div.peer-grading{
     }
 }
 
+div.peer-grading {
+    border-radius: $baseline/2;
+    padding: 0;
+
+    .prompt-wrapper {
+        padding: $baseline;
+    }
+
+    .grading-wrapper {
+        padding: $baseline;
+    }
+}
+
+div.staff-grading {
+    padding: $baseline;
+}
+

lms/templates/combinedopenended/combined_open_ended.html

@@ -11,12 +11,12 @@
                 <tr>
                     <td class="problemtype-container">
                         <div class="problemtype">
-                            Open Response
+                            ${_("Open Response")}
                         </div>
                     </td>
                     <td class="assessments-container">
                         <div class="assessment-text">
-                            Assessments:
+                            ${_("Assessments:")}
                         </div>
                         <div class="status-container">
                             ${status|n}
@@ -30,7 +30,7 @@
             <div class="visibility-control visibility-control-prompt">
                 <div class="inner">
                 </div>
-                <a href="" class="section-header section-header-prompt question-header">Hide Prompt</a>
+                <a href="" class="section-header section-header-prompt question-header">${_("Hide Prompt")}</a>
             </div>
             <div class="problem-container">
             % for item in items:
@@ -38,7 +38,7 @@
             % endfor
             </div>
             <div class="oe-tools response-tools">
-                <span class="oe-tools-label">Response: </span>
+                <span class="oe-tools-label">${_("Response: ")}</span>
                 <input type="button" value="${_('Reset')}" class="reset-button" name="reset"/>
             </div>
         </div>

lms/templates/combinedopenended/combined_open_ended_results.html

@@ -9,13 +9,13 @@
             <div class="visibility-control visibility-control-rubric">
                 <div class="inner">
                 </div>
-                <span class="section-header section-header-rubric">Submitted Rubric</span>
+                <span class="section-header section-header-rubric">${_("Submitted Rubric")}</span>
             </div>
             <div class="oe-tools rubric-header">
-                <span class="oe-tools-label">Rubric: </span>
-                <button class="rubric-collapse" href="#">Show Score Only</button>
+                <span class="oe-tools-label">${_("Rubric: ")}</span>
+                <button class="rubric-collapse" href="#">${_("Show Score Only:")}</button>
                 <span class="oe-tools-scores">
-                    <span class="oe-tools-scores-label">Scores:</span>
+                    <span class="oe-tools-scores-label">${_("Scores:")}</span>
                     % if len(results)>1:
                         <button href="#" alt="Previous" class="rubric-button rubric-previous-button"><i class="icon-chevron-left"></i></button>
                     % endif 

lms/templates/instructor/staff_grading.html

@@ -19,21 +19,18 @@
 
 <div class="staff-grading" data-ajax_url="${ajax_url}">
 <h1>${_("Staff grading")}</h1>
-<div class="breadcrumbs">
-</div>
-<div class="error-container">
-</div>
-<div class="message-container">
-</div>
+<div class="breadcrumbs"></div>
+<div class="error-container"></div>
+<div class="message-container"></div>
 
 <! -- Problem List View -->
 <section class="problem-list-container">
-<h2>${_("Instructions")}</h2>
-<div class="instructions">
-<p>${_("This is the list of problems that currently need to be graded in order to train the machine learning models. Each problem needs to be trained separately, and we have indicated the number of student submissions that need to be graded in order for a model to be generated. You can grade more than the minimum required number of submissions--this will improve the accuracy of machine learning, though with diminishing returns. You can see the current accuracy of machine learning while grading.")}</p>
-</div>
+  <h2>${_("Instructions")}</h2>
+  <div class="instructions">
+    <p>${_("This is the list of problems that currently need to be graded in order to train the machine learning models. Each problem needs to be trained separately, and we have indicated the number of student submissions that need to be graded in order for a model to be generated. You can grade more than the minimum required number of submissions--this will improve the accuracy of machine learning, though with diminishing returns. You can see the current accuracy of machine learning while grading.")}</p>
+  </div>
 
-<h2>${_("Problem List")}</h2>
+  <h2>${_("Problem List")}</h2>
       <table class="problem-list">
       </table>
 </section>
@@ -41,7 +38,8 @@
 <!-- Grading View -->
 
 <section class="prompt-wrapper">
-    <h2 class="prompt-name"></h2>
+  <h2 class="prompt-name">
+  </h2>
   <div class="meta-info-wrapper">
       <div class="problem-meta-info-container">
       </div>
@@ -53,7 +51,6 @@
     <div class="prompt-container">
     </div>
   </div>
-
 </section>
 
 <div class="action-button">
@@ -61,33 +58,30 @@
 </div>
 
 <section class="grading-wrapper">
-
-<div class="grading-container">
-<div class="submission-wrapper">
-<h3>${_("Student Response")}</h3>
-<div class="submission-container">
-</div>
-</div>
-<div class="evaluation">
+  <div class="grading-container">
+    <div class="submission-wrapper">
+      <h3>${_("Student Response")}</h3>
+    <div class="submission-container">
+    </div>
+  </div>
+  <div class="evaluation">
     <p class="score-selection-container">
     </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>
-<p>
+    <textarea name="feedback" placeholder="${_("Feedback for student (optional)")}" class="feedback-area" cols="70" >
+    </textarea>
+    <p>
        ${_("Flag as inappropriate content for later review")} <input class="flag-checkbox" type="checkbox" />
-</p>
-</div>
-
-
-<div class="submission">
-<input type="button" value="${_("Submit")}" class="submit-button" name="show"/>
-<input type="button" value="${_("Skip")}" class="skip-button" name="skip"/>
-</div>
+    </p>
+  </div>
+  <div class="submission">
+    <input type="button" value="${_("Submit")}" class="submit-button" name="show"/>
+    <input type="button" value="${_("Skip")}" class="skip-button" name="skip"/>
+  </div>
 
-</div>
+  </div>
 
-</div>
+  </div>
 </section>

lms/templates/peer_grading/peer_grading_problem.html

@@ -25,13 +25,9 @@
                         </div>
                     </section>
                 </div>
-
             </div>
-
-
             <section class="grading-wrapper">
                 <h2>${_("Student Response")}</h2>
-
                 <div class="grading-container">
                     <div class="submission-wrapper">
                         <h3></h3>
@@ -42,25 +38,23 @@
                     </div>
                     <div class="evaluation">
                         <p class="rubric-selection-container"></p>
-          <p class="score-selection-container">
-          </p>
+                        <p class="score-selection-container"></p>
                         <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>
-                  <div class="flag-student-container"> ${_("This submission has explicit or pornographic content : ")}<input type="checkbox" class="flag-checkbox" value="student_is_flagged"> </div>
-                  <div class="answer-unknown-container"> ${_("I do not know how to grade this question : ")}<input type="checkbox" class="answer-unknown-checkbox" value="answer_is_unknown"></div>
+                        <textarea name="feedback" placeholder="Feedback for student" class="feedback-area" cols="70" ></textarea>
+                        <div class="flag-student-container"> ${_("This submission has explicit or pornographic content : ")}
+                            <input type="checkbox" class="flag-checkbox" value="student_is_flagged"> 
+                        </div>
+                        <div class="answer-unknown-container"> ${_("I do not know how to grade this question : ")}
+                            <input type="checkbox" class="answer-unknown-checkbox" value="answer_is_unknown">
+                        </div>
                     </div>
-
-
                     <div class="submission">
                         <input type="button" value="${_("Submit")}" class="submit-button" name="show"/>
                     </div>
-
                 </div>
                 <div class="grading-message">
                 </div>
-
             </section>
         </section>
         <!-- Calibration feedback: Shown after a calibration is sent -->
@@ -99,7 +93,6 @@
             </div>
         </section>
 
-
         <input type="button" value="${_("Go Back")}" class="action-button" name="back" />
     </div>
 </section>