Add static word count message

freetextresponse/freetextresponse.py

@@ -217,6 +217,7 @@ def student_view(self, context=None):
         view_html = FreeTextResponse.get_resource_string('view.html')
         view_html = view_html.format(
             self=self,
+            word_count_message=self._get_word_count_message(),
             indicator_class=self._get_indicator_class(),
             problem_progress=self._get_problem_progress(),
             used_attempts_feedback=self._get_used_attempts_feedback(),
@@ -341,22 +342,33 @@ def _get_indicator_visibility_class(self):
 
     def _get_word_count_message(self, ignore_attempts=False):
         """
-        Returns the word count message based on the student's answer
+        Returns the word count message
+        """
+        result = ungettext(
+            "Your response must be "
+            "between {min} and {max} word.",
+            "Your response must be "
+            "between {min} and {max} words.",
+            self.max_word_count,
+        ).format(
+            min=self.min_word_count,
+            max=self.max_word_count,
+        )
+        return result
+
+    def _get_invalid_word_count_message(self, ignore_attempts=False):
+        """
+        Returns the invalid word count message
         """
         result = ''
         if (
                 (ignore_attempts or self.count_attempts > 0) and
                 (not self._word_count_valid())
         ):
-            result = ungettext(
-                "Invalid Word Count. Your response must be "
-                "between {min} and {max} word.",
-                "Invalid Word Count. Your response must be "
-                "between {min} and {max} words.",
-                self.max_word_count,
+            word_count_message = self._get_word_count_message(ignore_attempts=ignore_attempts)
+            result = _("Invalid Word Count. {word_count_message}"
             ).format(
-                min=self.min_word_count,
-                max=self.max_word_count,
+                word_count_message=word_count_message,
             )
         return result
 
@@ -510,11 +522,12 @@ def _get_submitted_message(self):
 
     def _get_user_alert(self, ignore_attempts=False):
         """
-        Returns the message to display in the user_alert(TBD) div
+        Returns the message to display in the user_alert div
+        depending on the student answer
         """
         result = ''
         if not self._word_count_valid():
-            result = self._get_word_count_message(ignore_attempts)
+            result = self._get_invalid_word_count_message(ignore_attempts)
         return result
 
     @XBlock.json_handler

freetextresponse/private/view.html

@@ -2,6 +2,7 @@
     <h2 class="problem-header">{self.display_name}</h2>
     <div class="problem-progress">{problem_progress}</div>
     <p>{self.prompt}</p>
+    <div class="word-count-message">{word_count_message}</div>
     <div class="capa_inputtype textline">
         <div class="user_input {indicator_class}">
             <textarea class="student_answer" rows="20" cols="70">{self.student_answer}</textarea>

freetextresponse/private/view.less

@@ -85,6 +85,14 @@
     font-size: 1em;
   }
 
+  .word-count-message {
+    display: inline-block;
+    padding-left: 5px;
+    color: @dark_grey;
+    font-weight: 100;
+    font-size: 1em;
+  }
+
   .hidden{
     visibility: hidden;
   }

freetextresponse/public/view.html

@@ -1 +1 @@
-<div class="freetextresponse xmodule_display xmodule_CapaModule problem"><h2 class="problem-header">{self.display_name}</h2><div class="problem-progress">{problem_progress}</div><p>{self.prompt}</p><div class="capa_inputtype textline"><div class="user_input {indicator_class}"><textarea class="student_answer" rows="20" cols="70">{self.student_answer}</textarea><span class="status {visibility_class}" aria-describedby="student_answer"></span></div></div><div class="capa_alert submission-received">{submitted_message}</div><div class="action"><button class="check Submit {nodisplay_class}" data-checking="Checking..." data-value="Submit">Submit</button> <button class="save {nodisplay_class}" data-value="Save">Save</button><div class="used-attempts-feedback" aria-live="polite">{used_attempts_feedback}</div></div><div class="capa_alert user_alert">{user_alert}</div></div>
+<div class="freetextresponse xmodule_display xmodule_CapaModule problem"><h2 class="problem-header">{self.display_name}</h2><div class="problem-progress">{problem_progress}</div><p>{self.prompt}</p><div class="word-count-message">{word_count_message}</div><div class="capa_inputtype textline"><div class="user_input {indicator_class}"><textarea class="student_answer" rows="20" cols="70">{self.student_answer}</textarea><span class="status {visibility_class}" aria-describedby="student_answer"></span></div></div><div class="capa_alert submission-received">{submitted_message}</div><div class="action"><button class="check Submit {nodisplay_class}" data-checking="Checking..." data-value="Submit">Submit</button> <button class="save {nodisplay_class}" data-value="Save">Save</button><div class="used-attempts-feedback" aria-live="polite">{used_attempts_feedback}</div></div><div class="capa_alert user_alert">{user_alert}</div></div>

freetextresponse/public/view.less

@@ -85,6 +85,14 @@
     font-size: 1em;
   }
 
+  .word-count-message {
+    display: inline-block;
+    padding-left: 5px;
+    color: @dark_grey;
+    font-weight: 100;
+    font-size: 1em;
+  }
+
   .hidden{
     visibility: hidden;
   }