Refactor code to make it simpler, pull out templates

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

@@ -2,7 +2,7 @@ $(document).on('click', 'section.sa-wrapper input#show', ( ->
   post_url=$('section.sa-wrapper input#ajax_url').attr('url')
   final_url="#{post_url}/sa_show"
   answer=$('section.sa-wrapper textarea#answer').val()
-  $.post final_url, answer, (response) ->
+  $.post final_url, {'student_answer' : answer }, (response) ->
     if response.success
       $('section.sa-wrapper input#show').remove()
       $('section.sa-wrapper textarea#answer').remove()

common/lib/xmodule/xmodule/self_assessment_module.py

@@ -108,44 +108,21 @@ class SelfAssessmentModule(XModule):
         #Do not change ids and names, as javascript (selfassessment/display.coffee) depends on them
         # TODO: use templates -- system.render_template will pull them from the right place (lms/templates dir)
 
-        prompt_form = ('<section class="sa-wrapper"><textarea name="answer" '
-                        'id="answer" cols="50" rows="5"/><br/>'
-                        '<input type="button" value="Check" id ="show" name="show"/>'
-                        '<p id="rubric"></p><input type="hidden" '
-                        'id="ajax_url" name="ajax_url" url="{0}"></section><br/><br/>').format(system.ajax_url)
-
-        rubric_form = ('Please assess your performance given the above rubric: <br/>'
-                       '<section class="sa-wrapper"><select name="assessment" id="assessment">'
-                       '<option value="incorrect">Incorrect</option><option value="correct">'
-                       'Correct</option></select><br/>'
-                       'What hint about this problem would you give to someone?'
-                       '<textarea name="hint" id="hint" cols="50" rows="5"/><br/>'
-                       '<input type="button" value="Save" id="save" name="save"/>'
-                       '<p id="save_message"></p><input type="hidden" '
-                       'id="ajax_url" name="ajax_url" url="{0}">'
-                       '</section><br/><br/>').format(system.ajax_url)
-
-        rubric_header=('<br/><br/><b>Rubric</b>')
 
         # TODO:
-        #context = {rubric, ..., answer, etc}
-        # self.html = self.system.render_template('selfassessment.html', context)
-
-        #Combine prompt, rubric, and the forms
-        if type(self.student_answers)==type([]):
-            if len(self.student_answers)>0:
-                answer_html="<br/>Previous answer:  {0}<br/>".format(self.student_answers[len(self.student_answers)-1])
-                self.prompt = ''.join([self.prompt, answer_html, prompt_form])
-            else:
-                self.prompt = ''.join([self.prompt, prompt_form])
-        else:
-            self.prompt = ''.join([self.prompt, prompt_form])
-
-        self.rubric = ''.join([rubric_header, self.rubric, rubric_form])
-
-        #Display the prompt to the student to begin with
-        self.html = self.prompt
-
+        previous_answer=''
+        if len(self.student_answers)>0:
+            previous_answer=self.student_answers[len(self.student_answers)-1]
+
+        self.context = {
+            'prompt' : self.prompt,
+            'rubric' : self.rubric,
+            'previous_answer_given' : len(self.student_answers)>0,
+            'previous_answer' : previous_answer,
+            'ajax_url' : system.ajax_url,
+            'section_name' : 'sa-wrapper',
+        }
+        self.html = self.system.render_template('self_assessment_prompt.html', context)
 
     def get_score(self):
         return {'score': self.score}

lms/templates/self_assessment_prompt.html

+<section class="${ section_name }">
+    ${ prompt }
+    % if previous_answer_given
+    : <br/>Previous answer:  ${ previous_answer }<br/>
+    % endif
+
+    <textarea name="answer" id="answer" cols="50" rows="5"/>
+    <br/>
+    <input type="button" value="Check" id ="show" name="show"/>
+    <p id="rubric">
+    </p>
+    <input type="hidden" id="ajax_url" name="ajax_url" url="${ ajax_url }">
+</section>
+<br/><br/>
\ No newline at end of file

lms/templates/self_assessment_rubric.html

+<section class="${section_name}">
+    <br/><br/><b>Rubric</b>
+    Please assess your performance given the above rubric: <br/>
+    <select name="assessment" id="assessment">
+        <option value="incorrect">Incorrect</option>
+        <option value="correct">Correct</option>
+    </select>
+    <br/>
+    What hint about this problem would you give to someone?
+    <textarea name="hint" id="hint" cols="50" rows="5"/>
+    <br/>
+    <input type="button" value="Save" id="save" name="save"/>
+    <p id="save_message"></p>
+    <input type="hidden" id="ajax_url" name="ajax_url" url="${ self_assessment['ajax_url']}">
+</section>
+<br/><br/>
\ No newline at end of file