Add in css borders

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

@@ -36,28 +36,40 @@ div.name{
 }
 
 section.combined-open-ended {
-  @include clearfix;
+      @include clearfix;
+}
+
+div.problemwrapper {
+  border: 1px solid;
+  border-color: lightgray;
+    -webkit-border-radius: 20px;
+    -moz-border-radius: 20px;
+    border-radius: 20px;
+   padding: 5px;
   .status-bar
   {
     float: right;
     display: inline-block;
+    padding: 5px;
 
     .problemtype{
         display: inline;
-        margin-right: 140px;
+        margin-right: 135px;
     }
 
     .status-container
     {
       padding-bottom: 5px;
       display: inline-block;
-      padding-right: 20px
     }
+    border-bottom: 1px solid;
+    border-color: lightgray;
   }
   .item-container
   {
       padding-bottom: 10px;
       display: inline-block;
+      padding: 15px;
   }
 
   .result-container
@@ -66,10 +78,6 @@ section.combined-open-ended {
       width: 100%;
       position:relative;
   }
-  h4
-  {
-      margin-bottom:10px;
-  }
 }
 
 section.legend-container {
@@ -694,4 +702,8 @@ section.open-ended-child {
 
       }
   }
+  div.prompt{
+    padding: 10px;
+    background-color:white;
+  }
 }

common/lib/xmodule/xmodule/js/src/combinedopenended/display.coffee

@@ -140,8 +140,6 @@ class @CombinedOpenEnded
     @accept_file_upload = @coe.data('accept-file-upload')
     @location = @coe.data('location')
 
-    console.log(@child_state)
-
     # set up handlers for click tracking
     Rubric.initialize(@location,@coe)
     @is_ctrl = false
@@ -174,8 +172,6 @@ class @CombinedOpenEnded
     console.log(@results_container)
     @combined_rubric_container = @$(@combined_rubric_sel)
 
-    @legend_container= @$(@legend_sel)
-    @show_legend_current()
 
     # Where to put the rubric once we load it
     console.log("started child")
@@ -205,6 +201,10 @@ class @CombinedOpenEnded
     else if @task_number==1 and @child_state!='initial'
       @prompt_hide()
 
+    if @child_state!="initial"
+      @show_legend_current()
+    @legend_container= @$(@legend_sel)
+
     @find_assessment_elements()
     @find_hint_elements()
 
@@ -339,6 +339,7 @@ class @CombinedOpenEnded
         if @task_number==1 and @task_count==1
           @grader_status = @$(@grader_status_sel)
           @grader_status.html("<p>Response submitted for scoring.</p>")
+      @legend_container.hide()
     else if @child_state == 'post_assessment'
       if @child_type=="openended"
         @skip_button.show()

lms/templates/combinedopenended/combined_open_ended.html

@@ -5,34 +5,36 @@
             Progress: ${human_state}
         </div>
     </div>
-    <div class="status-bar">
-        <div class="problemtype">
-            Open Response Assessment
+    <div class="problemwrapper">
+        <div class="status-bar">
+            <div class="problemtype">
+                Open Response Assessment
+            </div>
+            Assessments: <div class="status-container">
+                ${status|n}
+            </div>
         </div>
-        Assessments: <div class="status-container">
-            ${status|n}
-        </div>
-    </div>
 
-    <div class="item-container">
-        <h4>Prompt <a href="#" class="question-header">(Hide)</a> </h4>
-        <div class="problem-container">
-        % for item in items:
-            <div class="item">${item['content'] | n}</div>
-        % endfor
-        </div>
+        <div class="item-container">
+            <h4>Prompt <a href="#" class="question-header">(Hide)</a> </h4>
+            <div class="problem-container">
+            % for item in items:
+                <div class="item">${item['content'] | n}</div>
+            % endfor
+            </div>
 
-        <input type="button" value="Reset" class="reset-button" name="reset"/>
-        <input type="button" value="Next Step" class="next-step-button" name="reset"/>
-    </div>
+            <input type="button" value="Reset" class="reset-button" name="reset"/>
+            <input type="button" value="Next Step" class="next-step-button" name="reset"/>
+        </div>
 
-    <div class="combined-rubric-container">
-    </div>
+        <div class="combined-rubric-container">
+        </div>
 
-    <section class="legend-container">
-    </section>
+        <section class="legend-container">
+        </section>
 
-    <div class="result-container">
+        <div class="result-container">
+        </div>
     </div>
 </section>