Create a result container and put results into it

common/lib/xmodule/xmodule/combined_open_ended_module.py

@@ -248,6 +248,14 @@ class CombinedOpenEndedModule(XModule):
             pass
         return return_html
 
+    def get_results(self, get):
+        task_number=get['task_number']
+        self.update_task_states()
+        response_dict=self.get_last_response(task_number)
+        context = {'results' : response_dict['post_assessment']}
+        html = render_to_string('combined_open_ended_results.html', context)
+        return html
+
     def handle_ajax(self, dispatch, get):
         """
         This is called by courseware.module_render, to handle an AJAX call.
@@ -262,6 +270,7 @@ class CombinedOpenEndedModule(XModule):
         handlers = {
             'next_problem': self.next_problem,
             'reset': self.reset,
+            'get_results' : self.get_results
             }
 
         if dispatch not in handlers:

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

@@ -32,6 +32,13 @@ section.combined-open-ended {
       width: 53%;
   }
 
+  .result-container
+  {
+      float:left;
+      width: 93%;
+      position:relative;
+  }
+
   &:after
   {
       content:".";

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

@@ -18,11 +18,17 @@ class @CombinedOpenEnded
     @reset_button.click @reset
     @next_problem_button = @$('.next-step-button')
     @next_problem_button.click @next_problem
+
+    @show_results_button=@$('.show-results-button')
+    @show_results_button.click @show_results
+
     # valid states: 'initial', 'assessing', 'post_assessment', 'done'
     Collapsible.setCollapsibles(@el)
     @submit_evaluation_button = $('.submit-evaluation-button')
     @submit_evaluation_button.click @message_post
 
+    @results_container = $('.result-container')
+
     # Where to put the rubric once we load it
     @el = $(element).find('section.open-ended-child')
     @errors_area = @$('.error')
@@ -49,6 +55,17 @@ class @CombinedOpenEnded
   $: (selector) ->
     $(selector, @el)
 
+  show_results: (event) =>
+    status_item = $(event.target).parent().parent()
+    status_number = status_item.data('status-number')
+    data = {'task_number' : status_number}
+    $.postWithPrefix "#{@ajax_url}/get_results", data, (response) =>
+      if response.success
+        @results_container.after(response.html).remove()
+        @Collapsible.setCollapsibles(@results_container)
+      else
+        @errors_area.html(response.error)
+
   rebind: () =>
     # rebind to the appropriate function for the current state
     @submit_button.unbind('click')

lms/templates/combined_open_ended.html

@@ -15,5 +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="result-container">
+        <h4>Results</h4><br/>
+    </div>
 </section>
 

lms/templates/combined_open_ended_results.html

@@ -0,0 +1,3 @@
+<div class="result-container">
+    ${results | n}
+</div>

lms/templates/combined_open_ended_status.html

@@ -9,13 +9,8 @@
 
             Step ${status['task_number']} (${status['human_state']}) : ${status['score']} / ${status['max_score']}
             %if status['type']=="openended":
-                <div class="collapsible external-grader-message">
-                    <header>
-                        <a href="#">Show feedback from step ${status['task_number']}</a>
-                    </header>
-                    <section id="post-assessment">
-                        ${status['post_assessment']}
-                    </section>
+                <div class="show-results">
+                    <a href="#" class="show-results-button">Show results from step ${status['task_number']}</a>
                 </div>
             %endif
         </div>

lms/templates/open_ended_evaluation.html

@@ -20,4 +20,4 @@
             <input type="button" value="Submit Feedback" class="submit-evaluation-button" name="reset"/>
         </section>
     </div>
-</div>
+</div>incorrect-icon.png