XML 5 Star Rating System

I need a simple rating system to rate a list of url resources. The system I want as simple as possible so that it's easy to be implemented. Here's the steps on how to design the rate system.

HTML

The image I choosed is only one 5 star rate image, which makes HTML is prety simple. Just one div for each rating unit.

<div class="star" > </div>
<div class="star" > </div>
<div class="star" > </div>
<div class="star" > </div>

CSS

The div star is just a container. What is important is the position attribute must be relative. The in class is for the div generated by javascript. Its background could be set part of the rating image using negative background-position attribute. See example on the right.

.star {
    position: relative;
    width: 100px;
    height: 17px;
    padding: 1px;
    margin: 20px 10px;
}
.in {
    width: 96px;
    height: 17px;
    font-size: 1px;
}
.rate1 {
    background: url(../images/star_rating.gif) 0 -50px;
}

5 star image

5 star rating

An example

To retrieve part of rating image using negative background position.

Javascript

For this image, the following javascript function calculates the top value to retrieve the part of the image representing the rate value.

function topbyrate (r){
    var a = r<3 ? -14 : -15;
    return (a -36*r)+"px";
}

Rate Object

For the whole system, I've made a javascript object to make it east to invoke. The property of rateitems is what you need to consider. The length of it should be the same as the number of rate divs.

function rate(){
 this.rateitems = ["abc.com","bbc.com","sd.com","pag.com"];
}

rate.prototype = { 
init: function(cls,r){

    this.rtdivs = getElementsByClass(cls);
    for (i = 0; i < this.rtdivs.length; i++) {
        this.addrate(this.rtdivs[i],0);
    }
   this.restrict = r;  
   this.getrate(this.rtdivs,this.rateitems);

},
...
}

Now let's invoke the rate object. 2 parameters are needed for init method,

  • cls - the class name of the rate divs
  • r - a switch to allow multiple rates. Normally it should be "on". Here set to "off" for testing purpose.
var rt1 = new rate();
rt1.init("star","off");

Rating Test

XML

Instead of MySQL database, we save the rating results in a xml file.

 <?xml version="1.0" encoding="utf-8" ?> 
<sites>  
  <site>
      <url>abc.com</url> 
      <rate>0x0,1x0,2x0,3x1,4x0,5x0,6x0,7x0,8x0,9x2</rate> 
  </site>
  <site>
      <url>bbc.com</url> 
      <rate>0x0,1x0,2x0,3x0,4x0,5x0,6x1,7x1,8x0,9x2</rate> 
  </site>
 ...
 ...
</sites>