Dynamically display completion status with JS

mentoring/mentoring.py

@@ -60,7 +60,13 @@ class MentoringBlock(XBlock):
             'named_children': named_children,
         }))
         fragment.add_css(load_resource('static/css/mentoring.css'))
+        fragment.add_javascript(load_resource('static/js/vendor/underscore-min.js'))
         fragment.add_javascript(load_resource('static/js/mentoring.js'))
+
+        fragment.add_resource(load_resource('static/html/mentoring_progress.html').format(
+                completed=self.runtime.resources_url('images/correct-icon.png')),
+            "text/html")
+
         fragment.initialize_js('MentoringBlock')
 
         return fragment

static/html/mentoring.html

@@ -2,10 +2,8 @@
   {% for name, c in named_children %}
   {{c.body_html|safe}}
   {% endfor %}
-  <input type='button' value='submit' class='submit'></input>
-  {% if self.completed %}
-    completed!
-  {% else %}
-    NOT completed
-  {% endif %}
+  <input type="button" value="submit" class="submit"></input>
+  <span class="progress" data-completed="{{ self.completed }}">
+    <span class='indicator'></span>
+  </span>
 </div>

static/html/mentoring_progress.html

+<script type="text/template" id="xblock-progress-template">
+    <% if (completed === "True") {{ %>
+        <img src="{completed}">
+    <% }} else {{ %>
+        (Not completed)
+    <% }} %>
+</script>

static/js/mentoring.js

 function MentoringBlock(runtime, element) {
+    var progress_template = _.template($('#xblock-progress-template').html());
+
+    function render_progress() {
+        var data = $('.progress', element).data();
+        $('.indicator', element).html(progress_template(data));
+    }
+
     function callIfExists(obj, fn) {
         if (typeof obj[fn] == 'function') {
             return obj[fn].apply(obj, Array.prototype.slice.call(arguments, 2));
@@ -11,6 +18,9 @@ function MentoringBlock(runtime, element) {
         $.each(results.submitResults || {}, function(input, result) {
             callIfExists(runtime.childMap(element, input), 'handleSubmit', result);
         });
+
+        $('.progress', element).data('completed', results.completed ? 'True' : 'False')
+        render_progress();
     }
 
     $(element).find('.submit').bind('click', function() {
@@ -25,4 +35,6 @@ function MentoringBlock(runtime, element) {
         var handlerUrl = runtime.handlerUrl(element, 'submit')
         $.post(handlerUrl, JSON.stringify(data)).success(handleSubmitResults);
     });
+
+    render_progress();
 }