Merge pull request #1119 from MITx/diana/open-ended-response-styling

Updates to the styling of open ended problems

common/lib/capa/capa/templates/openendedinput.html

@@ -1,5 +1,5 @@
 <section id="openended_${id}" class="openended">
-  <textarea rows="${rows}" cols="${cols}" name="input_${id}" id="input_${id}"
+  <textarea rows="${rows}" cols="${cols}" name="input_${id}" class="short-form-response" id="input_${id}"
        % if hidden:
       	    style="display:none;"
        % endif
@@ -23,6 +23,9 @@
 
   <span id="answer_${id}"></span>
 
+    % if status == 'queued':
+    <input name="reload" class="reload" type="button" value="Recheck for Feedback" onclick="document.location.reload(true);" />
+    % endif
   <div class="external-grader-message">
     ${msg|n}
   </div>

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -240,6 +240,13 @@ section.problem {
       }
     }
 
+    .reload
+    {
+      float:right;
+      margin: 10px;
+    }
+
+
     .grader-status {
       padding: 9px;
       background: #F6F6F6;
@@ -257,6 +264,8 @@ section.problem {
       }
 
       .grading {
+        background: url('../images/info-icon.png') left center no-repeat;
+        padding-left: 25px;
         text-indent: 0px;
         margin: 0px 7px 0 0;
       }

lms/static/sass/course/courseware/_courseware.scss

@@ -241,15 +241,15 @@ div.course-wrapper {
   
 }
 
+textarea.short-form-response {
+    height: 200px;
+    padding: 5px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    width: 100%;
+}
 
 section.self-assessment {
-    textarea.answer {
-        height: 200px;
-        padding: 5px;
-        margin-top: 5px;
-        margin-bottom: 5px;
-    }
-
     textarea.hint {
         height: 100px;
         padding: 5px;

lms/templates/self_assessment_prompt.html

@@ -6,7 +6,7 @@
     </div>
 
     <div>
-    <textarea name="answer" class="answer" cols="70" rows="20">${previous_answer|h}</textarea>
+    <textarea name="answer" class="answer short-form-response" cols="70" rows="20">${previous_answer|h}</textarea>
     </div>
 
     <div class="rubric-wrapper">${initial_rubric}</div>