Accessible

rate/rate.py

@@ -106,9 +106,9 @@ class RateXBlock(XBlock):
         # Now, we render the RateXBlock. This may be redundant, since we
         # don't always show it.
         html = self.resource_string("static/html/rate.html")
-        scale_item = u'<span class="rate_likert_rating rate_rating_{i} {active}" title="{level}">{icon}</span>'
+        scale_item = u'<input id="radio_{i}" type="radio" name="rate_scale" class="rate_radio" title="{level}" {active}><label for="radio_{i}" title="{level}">{icon}<span class="rate_sr_text">{level}</span></label></input>'
         indexes = range(len(prompt['icons']))
-        active_vote = [" rate_rating_active " if i == self.user_vote else "" for i in indexes]
+        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, string_prompt = prompt['string'], likert_prompt = prompt['likert'])
 

rate/static/css/rate.css

@@ -32,4 +32,29 @@
     color: blue;
     font-weight: bold;
     background-color: blanchedalmond;
-}
\ No newline at end of file
+}
+
+.rate_block .rate_radio {
+    opacity:0;
+    width:0;
+    padding:0;
+    margin:0;
+}
+
+.rate_block .rate_sr_text{
+    opacity:0;
+    width:1px;
+    height:1px;
+    padding:0;
+    margin:0;
+    position:absolute;
+    clip:rect(1px,1px,1px,1px);
+    left:-10000px;
+    overflow:hidden;
+}
+
+.rate_block input[type="radio"]:checked + label{
+   background-color:yellow;
+   font-weight:bold;
+}
+

rate/static/html/rate.html

@@ -5,5 +5,5 @@
   <div class="rate_thank_you">Thank you!</div>
 </div>
 <div class="rate_likert_header">{likert_prompt}</div>
-<div class="rate_likert_scale">{scale}</div>
+<div class="rate_likert_scale">  <form action="">{scale}</form></div>
 </div>

rate/static/js/src/rate.js

@@ -16,19 +16,15 @@ function RateXBlock(runtime, element) {
     var vote_handler = runtime.handlerUrl(element, 'vote');
     var feedback_handler = runtime.handlerUrl(element, 'feedback');
 
-    $('.rate_likert_rating', element).click(function(eventObject) {
-	var vote_class = eventObject.currentTarget.className.split(' ').find(function f(x) { return x.startsWith("rate_rating_") } )
-	var vote = parseInt(vote_class.split('_')[2]);
-	$('.rate_rating_active', element).removeClass("rate_rating_active");
-	$('.'+vote_class, element).addClass("rate_rating_active");
-	
-	Logger.log("edx.ratexblock.likert_rate", {"vote":vote})
-
+    $('.rate_radio', element).change(function(eventObject) {
+	target_id = eventObject.target.id;
+	vote = parseInt(target_id.split('_')[1]);
         $.ajax({
             type: "POST",
             url: vote_handler,
             data: JSON.stringify({"vote": vote}),
         });
+	Logger.log("edx.ratexblock.likert_rate", {"vote":vote})
     });
 
     $('.rate_string_area', element).change(function(eventObject) {
@@ -44,13 +40,3 @@ function RateXBlock(runtime, element) {
     });
 
 }
-
-
-/*
-    function updateCount(result) {
-        $('.count', element).text(result.count);
-    }
-
-    
-
-*/