Add status image indicating answer correctness.

activetable/static/css/activetable.css

@@ -85,15 +85,22 @@
 .activetable_block #activetable-help-button:hover {
     color: #bd9730;
 }
-.activetable_block .status, .activetable_block .status-message {
-    margin: 2em 0;
-}
 .activetable_block .status {
+    margin: 1.5em 0 0.5em;
     display: inline-block;
     width: 20px;
     height: 20px;
     background: url("/static/images/unanswered-icon.png") center no-repeat;
 }
+.activetable_block .status.correct {
+    background-image: url("/static/images/correct-icon.png");
+}
+.activetable_block .status.incorrect {
+    background-image: url("/static/images/incorrect-icon.png");
+}
+.activetable_block .status-message {
+    margin: 0.5em 0 1.5em;
+}
 .activetable_block .action .check {
     height: 40px;
     font-weight: 600;

activetable/static/js/src/activetable.js

@@ -3,11 +3,14 @@ function ActiveTableXBlock(runtime, element, init_args) {
 
     var checkHandlerUrl = runtime.handlerUrl(element, 'check_answers');
 
-    function updateStatusMessage(num_total, num_correct) {
+    function updateStatus(num_total, num_correct) {
+        var $status = $('.status', element);
         var $status_message = $('.status-message', element);
         if (num_total == num_correct) {
+            $status.removeClass('incorrect').addClass('correct');
             $status_message.text('Great job!');
         } else {
+            $status.removeClass('correct').addClass('incorrect');
             $status_message.text(
                 'You have ' + num_correct + ' out of ' + num_total + ' cells correct.'
             );
@@ -24,7 +27,7 @@ function ActiveTableXBlock(runtime, element, init_args) {
             num_total += 1;
             num_correct += correct;
         });
-        updateStatusMessage(num_total, num_correct);
+        updateStatus(num_total, num_correct);
     }
 
     function checkAnswers(e) {
@@ -49,6 +52,6 @@ function ActiveTableXBlock(runtime, element, init_args) {
     $('#activetable-help-button', element).click(toggleHelp);
     $('.action .check', element).click(checkAnswers);
     if (init_args.num_total_answers) {
-        updateStatusMessage(init_args.num_total_answers, init_args.num_correct_answers);
+        updateStatus(init_args.num_total_answers, init_args.num_correct_answers);
     }
 }