Flog — Web super–hero in training

Request from the audience – ARC based rating system

Note: If you haven’t read my initial post about ARC, then now is probably a good time to read it

I got an email from a reader today posing a nice little challenge. He proposed using ARC in a star–rating system for his site — The idea being select a rating from 1 to 10 stars.

Happily, I went about seeing what I could throw together — this is what I came up with (View the final result).

The CSS

The stylesheet simply sets the custom–radio classes to a set width & height that matches your star image (in this case 15×15px). By floating the radio’s left we stack up our rating stars into a horizontal row, but we also need to set the line breaks <br /> to hide using display: none. Hiding the <br />’s ensures that the form displays nicely even when viewed with stylesheets disabled.

The HTML

The following code is really quite straight–forward and logical — which is the point of XHTML.
You simply have a radio button to represent a rating from 0 to 10, assign it the correct value and associate a label with it.

Unfortunately I have had to add an extra span to the code so that I can hide the text–representation of the rating.

View Step 1: Vanilla HTML code

Modifications to ARC.js

This was actually far easier than I had imagined… there was only one function modified (toggleLabelStyle() at line 120) to give the correct behaviour when clicking on a star, that behaviour being: select current radio button, toggle it and all lower ratings classes to the on state.

var rating = (e.id.length==7) ? e.id.substring(e.id.length-1, e.id.length)
                      : e.id.substring(e.id.length-2, e.id.length);
for(var i=0; i<radioGroup.length; i++){
  if(radioGroup[i].label){
    radioGroup[i].label.className = (rating > i) ? onClass : offClass;
    radioGroup[i].checked=(radioGroup[i].id == e.id);
  }
}

Basically what this does is check if the current radio-button element’s ID is either “rating#” or “rating10″, then grabs the last 1 or 2 digits of that string to represent the rating variable.

Inside the for loop it checks to see if the current radio-button being examined comes before the current index (assuming they are ordered correctly in the HTML) and toggles it’s style accordingly.

View the final result