MVP version. Ugly styling

rate/rate.py

@@ -68,8 +68,10 @@ class RateXBlock(XBlock):
         when viewing courses.
         """
         html = self.resource_string("static/html/rate.html")
-        scale_item = u'<span class="rate_likert_rating rate_rating_{i}" title="{level}">{icon}</span>'
-        scale = u"".join(scale_item.format(level=level, icon=icon, i=i) for (level,icon,i) in zip(self.mouseover_levels, self.mouseover_icons, range(len(self.mouseover_icons))))
+        scale_item = u'<span class="rate_likert_rating rate_rating_{i} {active}" title="{level}">{icon}</span>'
+        indexes = range(len(self.mouseover_icons))
+        active_vote = [" rate_rating_active " 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(self.mouseover_levels, self.mouseover_icons, indexes, active_vote))
         frag = Fragment(html.format(self=self, scale=scale))
         frag.add_css(self.resource_string("static/css/rate.css"))
         frag.add_javascript(self.resource_string("static/js/src/rate.js"))
@@ -87,7 +89,7 @@ class RateXBlock(XBlock):
 
         # Remove old vote if we voted before
         if self.user_vote != -1:
-            self.vote_aggregate[self.vote] -= 1
+            self.vote_aggregate[self.user_vote] -= 1
 
         self.user_vote = data['vote']
         self.vote_aggregate[self.user_vote] += 1

rate/static/css/rate.css

@@ -9,6 +9,11 @@
     padding: 10px
 }
 
+.rate_thank_you {
+    color: green;
+    visibility: hidden;
+}
+
 .rate_block .rate_header {
     font-weight: bold;
     font-size: large;
@@ -16,8 +21,15 @@
 
 .rate_block .rate_likert_rating {
     cursor: pointer;
+    border-radius:5px;
 }
 
 .rate_block .rate_string_input {
-    margin-bottom: 2em;
+    margin-bottom: 1em;
+}
+
+.rate_block .rate_rating_active {
+    color: blue;
+    font-weight: bold;
+    background-color: blanchedalmond;
 }
\ No newline at end of file

rate/static/html/rate.html

@@ -2,6 +2,7 @@
 <div class="rate_header">{self.string_prompt}</div>
 <div class="rate_string_input">
   <textarea class="rate_string_area" rows="4" cols="50">{self.user_feedback}</textarea>
+  <div class="rate_thank_you">Thank you!</div>
 </div>
 <div class="rate_likert_header">{self.likert_prompt}</div>
 <div class="rate_likert_scale">{scale}</div>

rate/static/js/src/rate.js

@@ -8,21 +8,23 @@ function RateXBlock(runtime, element) {
     $('.rate_likert_rating', element).click(function(eventObject) {
 	vote_class = eventObject.currentTarget.className.split(' ').find(function f(x) { return x.startsWith("rate_rating_") } )
 	vote = parseInt(vote_class.split('_')[2]);
-	alert(vote);
+	$('.rate_rating_active', element).removeClass("rate_rating_active");
+	$('.'+vote_class, element).addClass("rate_rating_active");
+	
         $.ajax({
             type: "POST",
             url: vote_handler,
-            data: JSON.stringify({"vote": vote_class}),
+            data: JSON.stringify({"vote": vote}),
         });
     });
 
     $('.rate_string_area', element).change(function(eventObject) {
-	x = eventObject
-	alert(eventObject.currentTarget.value);
+	$('.rate_thank_you', element).css('visibility','hidden');
         $.ajax({
             type: "POST",
             url: feedback_handler,
             data: JSON.stringify({"feedback": eventObject.currentTarget.value}),
+	    success: function() {$('.rate_thank_you', element).css('visibility','visible')},
         });
     });