Merge pull request #28 from ExtensionEngine/vkaracic/NDPD-1243

NDPD-1243: Show max score in grading modal.

Author: vkaracic

setup.py

@@ -23,7 +23,7 @@ def package_data(pkg, roots):
 
 setup(
     name='short_answer-xblock',
-    version='0.2.23',
+    version='0.2.24',
     description='Short Answer XBlock',
     license='MIT',
     packages=[

short_answer/static/css/short_answer.css

@@ -123,12 +123,12 @@
 }
 
 .short-answer-block .modal table .score-column {
-    width: 55px;
+    width: 65px;
 }
 
 .short-answer-block .modal table .answer {
     display: block;
-    width: 195px;
+    width: 185px;
 }
 
 .short-answer-block .modal table .answer-column {

short_answer/static/html/short_answer.html

@@ -38,7 +38,7 @@
             </td>
             <td><%= answered_at %></td>
             <td>
-                <span class="score"><%= score %></span>
+                <span class="score"><% if (score) { %><%= score %></span> / <span="max_score"><%= max_score %><% } %></span>
                 <input type="number" step="0.1" min="0.1" name="score-input" class="hidden" value="<%= score %>"
                  placeholder="<%= max_score %>" max="<%= max_score %>">
             </td>

short_answer/static/js/src/short_answer.js

@@ -54,6 +54,14 @@ function ShortAnswerXBlock(runtime, element, options) {
     return score !== '' && !isNaN(score) && 0 <= score && score <= maxScore;
   }
 
+  /**
+   * Returns a float with two decimal positions for the passed in grade.
+   * @param {int} grade
+   */
+  function gradeWithDecimals(grade) {
+    return parseFloat(grade).toFixed(2);
+  }
+
   /**
    * Populate the submissions table in the modal window and
    * bind all the buttons for each row.
@@ -67,12 +75,14 @@ function ShortAnswerXBlock(runtime, element, options) {
 
     submissions.forEach(function(submission) {
       submission.answer = submission.answer || '';
-      if (submission.answered_at !== 'None') {
+      if (submission.answered_at && submission.answered_at !== 'None') {
         submission.answered_at = moment.utc(submission.answered_at).local().format('MM/DD/YYYY hh:mma');
       } else {
         submission.answered_at = ''
       }
-      submission.score = submission.score || '';
+
+      submission.score = submission.score ? gradeWithDecimals(submission.score) : '';
+      submission.max_score = gradeWithDecimals(submission.max_score);
 
       $(template(submission)).appendTo($tableBody);
     });
@@ -102,6 +112,7 @@ function ShortAnswerXBlock(runtime, element, options) {
 
         closeEditing();
         $('.score', $row).addClass('hidden');
+        $('.max_score', $row).addClass('hidden');
         $('input[name=score-input]', $row).removeClass('hidden');
         $('.submit-grade-form', $row).removeClass('hidden');
         $('.action-buttons', $row).addClass('hidden');
@@ -149,7 +160,8 @@ function ShortAnswerXBlock(runtime, element, options) {
             score: score
           }),
           success: function(data) {
-            $('.score', $row).text(data.new_score)
+            $('.score', $row).text(gradeWithDecimals(data.new_score));
+            $('.max_score', $row).removeClass('hidden');
           },
           error: function(err) {
             displayError('.modal-error', err);