Code review: aria-live for feedback. Handle submission with no votes. Standard unicode smiley

rate/rate.py

@@ -43,7 +43,7 @@ class RateXBlock(XBlock):
     default_prompt = {'freeform': "Please provide us feedback on this section.",
                       'likert': "Please rate your overall experience with this section.",
                       'mouseovers': ["Excellent", "Good", "Average", "Fair", "Poor"],
-                      'icons': [u"😁", u"😊", u"😐", u"☹", u"😟"]}
+                      'icons': [u"😁", u"😊", u"😐", u"😞", u"😭"]}
 
     # This is a list of prompts. If we have multiple elements in the
     # list, one will be chosen at random. This is currently not
@@ -123,7 +123,16 @@ class RateXBlock(XBlock):
         indexes = range(len(prompt['icons']))
         active_vote = ["checked" if i == self.user_vote else "" for i in indexes]
         scale = u"".join(scale_item.format(level=level, icon=icon, i=i, active=active) for (level, icon, i, active) in zip(prompt['mouseovers'], prompt['icons'], indexes, active_vote))
-        rendered = html.format(self=self, scale=scale, freeform_prompt=prompt['freeform'], likert_prompt=prompt['likert'])
+        print self.user_vote
+        if self.user_vote != -1:
+            response = "Thank you for voting!"
+        else:
+            response = ""
+        rendered = html.format(self=self,
+                               scale=scale,
+                               freeform_prompt=prompt['freeform'],
+                               likert_prompt=prompt['likert'],
+                               response=response)
 
         # We initialize self.p_r if not initialized -- this sets whether
         # or not we show it. From there, if it is less than odds of showing,
@@ -197,7 +206,7 @@ class RateXBlock(XBlock):
                          {'old_vote': self.user_vote,
                           'new_vote': data['vote']})
             self.vote(data)
-        return {"success": True}
+        return {"success": True, "response": "Thank you!"}
 
     # TO-DO: change this to create the scenarios you'd like to see in the
     # workbench while developing your XBlock.

rate/static/css/rate.css

@@ -11,7 +11,6 @@
 
 .rate_thank_you {
     color: green;
-    visibility: hidden;
 }
 
 .rate_block .rate_header {

rate/static/html/rate.html

@@ -2,7 +2,7 @@
 <label class="rate_header" for="rate_freeform_textarea">{freeform_prompt}</label>
 <div class="rate_freeform_input">
   <textarea id="rate_freeform_textarea" class="rate_freeform_area" rows="4" cols="30">{self.user_freeform}</textarea>
-  <div class="rate_thank_you">Thank you!</div>
+  <div class="rate_thank_you" aria-live=polite>{response}</div>
 </div>
 <fieldset class="rate_likert_field">
 <legend class="rate_likert_header">{likert_prompt}</legend>

rate/static/js/src/rate.js

@@ -17,7 +17,11 @@ function RateXBlock(runtime, element) {
 
     $(".rate_submit_feedback", element).click(function(eventObject) {
 	freeform = $(".rate_freeform_area", element).val();
-	vote = parseInt($(".rate_radio:checked", element).attr("id").split("_")[1]);
+	if ($(".rate_radio:checked", element).length == 0) {
+	    vote = -1
+	} else {
+	    vote = parseInt($(".rate_radio:checked", element).attr("id").split("_")[1]);
+	}
 	feedback = {"freeform": freeform, 
 		    "vote": vote}
 	Logger.log("edx.ratexblock.submit", feedback)
@@ -25,7 +29,7 @@ function RateXBlock(runtime, element) {
             type: "POST",
             url: feedback_handler,
             data: JSON.stringify(feedback),
-	    success: function() {$('.rate_thank_you', element).css('visibility','visible')}
+	    success: function(data) {console.log(data.response); $('.rate_thank_you', element).text(data.response);}
         });
     });