Move legend and status around to find optimal placements

common/lib/xmodule/xmodule/combined_open_ended_modulev1.py

@@ -358,6 +358,7 @@ class CombinedOpenEndedV1Module():
             'status': self.get_status(),
             'display_name': self.display_name,
             'accept_file_upload': self.accept_file_upload,
+            'legend_list' : LEGEND_LIST,
             }
 
         return context
@@ -554,6 +555,18 @@ class CombinedOpenEndedV1Module():
         html = self.system.render_template('combined_open_ended_results.html', context)
         return {'html': html, 'success': True}
 
+    def get_legend(self, get):
+        """
+        Gets the results of a given grader via ajax.
+        Input: AJAX get dictionary
+        Output: Dictionary to be rendered via ajax that contains the result html.
+        """
+        context = {
+            'legend_list' : LEGEND_LIST,
+            }
+        html = self.system.render_template('combined_open_ended_legend.html', context)
+        return {'html': html, 'success': True}
+
     def get_results(self, get):
         """
         Gets the results of a given grader via ajax.
@@ -598,6 +611,7 @@ class CombinedOpenEndedV1Module():
             'get_results': self.get_results,
             'get_combined_rubric': self.get_rubric,
             'get_status' : self.get_status_ajax,
+            'get_legend' : self.get_legend,
         }
 
         if dispatch not in handlers:

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

@@ -67,6 +67,9 @@ class @CombinedOpenEnded
     @results_container = $('.result-container')
     @combined_rubric_container = $('.combined-rubric-container')
 
+    @legend_container= $('.legend-container')
+    @show_legend_current()
+
     # Where to put the rubric once we load it
     @el = $(element).find('section.open-ended-child')
     @errors_area = @$('.error')
@@ -141,6 +144,13 @@ class @CombinedOpenEnded
         @status_container.after(response.html).remove()
         @status_container= $('.status-elements')
 
+  show_legend_current: () =>
+    data = {}
+    $.postWithPrefix "#{@ajax_url}/get_legend", data, (response) =>
+      if response.success
+        @legend_container.after(response.html).remove()
+        @legend_container= $('.legend-container')
+
   message_post: (event)=>
     Logger.log 'message_post', @answers
     external_grader_message=$(event.target).parent().parent().parent()

lms/templates/combined_open_ended.html

 <section id="combined-open-ended" class="combined-open-ended" data-ajax-url="${ajax_url}" data-allow_reset="${allow_reset}" data-state="${state}" data-task-count="${task_count}" data-task-number="${task_number}" data-accept-file-upload = "${accept_file_upload}">
-
+    <div class="status-container">
+        ${status|n}
+    </div>
     <h2>${display_name}</h2>
 
     <div class="item-container">
@@ -13,10 +15,9 @@
         <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="status-container">
-        ${status | n}
-    </div>
 
+    <section class="legend-container">
+    </section>
     <div class="combined-rubric-container">
     </div>
 

lms/templates/combined_open_ended_legend.html

+<section class="legend-container">
+    <div class="legenditem">
+    </div>
+    % for i in xrange(0,len(legend_list)):
+    <%legend_title=legend_list[i]['name'] %>
+    <%legend_image=legend_list[i]['image'] %>
+
+    <div class="legenditem">
+        ${legend_title}=<img src="${legend_image}" title=${legend_title}>
+    </div>
+    % endfor
+</section>

lms/templates/combined_open_ended_status.html

 <div class="status-elements">
-    <section class="legend-container">
-        % for i in xrange(0,len(legend_list)):
-            <%legend_title=legend_list[i]['name'] %>
-            <%legend_image=legend_list[i]['image'] %>
-
-            <div class="legenditem">
-                ${legend_title}=<img src="${legend_image}" title=${legend_title}>
-            </div>
-        % endfor
-    </section>
     <section id="combined-open-ended-status" class="combined-open-ended-status">
+        <div class="statusitem">
+            Status
+        </div>
         %for i in xrange(0,len(status_list)):
             <%status=status_list[i]%>
             %if i==len(status_list)-1: