Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

MooTools Star Ratings with MooStarRating

By David Walsh on February 8, 2011

I've said it over and over but I'll say it again: JavaScript's main role in web applications is to enhance otherwise boring, static functionality provided by the browser. One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over the past five years. Star rating systems are attractive, allow us to avoid ugly forms, and prevent unnecessary page reloads. A new plugin by Lorenzo Stanco called MooStarRating has hit the MooTools Forge and I wanted to share with you how to use it.

View Demo

The HTML

The star rating system uses an HTML form with radio buttons as the base:

<form name="ratingsForm">
    <label>Do you like this post?</label>
    <input type="radio" name="rating" value="0.5">
    <input type="radio" name="rating" value="1.0">
    <input type="radio" name="rating" value="1.5">
    <input type="radio" name="rating" value="2.0">
    <input type="radio" name="rating" value="2.5">
    <input type="radio" name="rating" value="3.0">
    <input type="radio" name="rating" value="3.5">
    <input type="radio" name="rating" value="4.0">
    <input type="radio" name="rating" value="4.5">
    <input type="radio" name="rating" value="5.0">
    <input type="radio" name="rating" value="5.5">
    <input type="radio" name="rating" value="6.0">
    <input type="radio" name="rating" value="6.5">
    <input type="radio" name="rating" value="7.0" checked="checked">
    <input type="radio" name="rating" value="7.5">
    <input type="radio" name="rating" value="8.0">
    <input type="radio" name="rating" value="8.5">
    <input type="radio" name="rating" value="9.0">
    <input type="radio" name="rating" value="9.5">
    <input type="radio" name="rating" value="10.0">
	<span id="htmlTip"></span>
</form>

Note the ID of the form and the name of the radio buttons -- we'll use those when creating our MooStarRating instance. Also note that I'm creating "half" rating options, as well as using checked to note what the current average rating is.

The CSS

This plugin requires no additional CSS. That's a bonus as it's one less server request.

The MooTools JavaScript

The first step in using MooStarRating is defining the image paths for the stars:

// Configure the image paths
var MooStarRatingImages = {
	defaultImageFolder: "/js/mooStarRating/images",
	defaultImageEmpty:  "empty.png",
	defaultImageFull:   "full.png",
	defaultImageHover:  "hover.png"
};

Once the path and image names are defined, it's time to create an instance of MooStarRating:

// A fake post ID for the sake of submission
var postId = 10;

// When the DOM is ready....
window.addEvent("domready",function() {	
	// Create our instance
	var starRater = new MooStarRating({
		form: "ratingsForm",
		radios: "rating",
		half: true,
		//imageEmpty: "star_boxed_empty.png", // For setting special images
		//imageFull:  "star_boxed_full.png",
		//imageHover: "star_boxed_hover.png", 
		width: 17, 
		tip: "Rate as <i>[VALUE] / 10.0</i>", 
		tipTarget: document.byId("htmlTip"),
		tipTargetType: "html"
	});
	
	// Listen for star clicks
	starRater.addEvent("click",function(value) {
		// Send ajax request to server
		new Request.send({
			url: "rating.php",
			data: { rating: value, postId: postId }
		});
	});
});

MooStarRating is loaded with options. Here we pass the form ID and the name we provided to the radio buttons. As I'm allowing half-stars, the half option is set to true. MooStarRating also provides a "tip" functionality which allows a message to be displayed along side the star rating. Lastly, the click event provides the user's rating for which you may send an AJAX request to the server to save the rating. Simple!

View Demo

That's it! I love this plugin because it's simple and effective. Big props go to Lorenzo Stanco for his excellent piece of work. If there's enough interest, I'll create a tutorial that includes enough PHP and MySQL to get this rating system working with real data.

Recent Features

By David WalshAugust 15, 2011
Send Text Messages with PHP
Kids these days, I tell ya. All they care about is the technology. The video games. The bottled water. Oh, and the texting, always the texting. Back in my day, all we had was...OK, I had all of these things too. But I still don't get...
By David WalshJuly 15, 2013
9 Mind-Blowing WebGL Demos
As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us. Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos. Another technology available...

Incredible Demos

By David WalshJune 3, 2008
CSS Sprites
The idea of CSS sprites is pretty genius. For those of you who don't know the idea of a sprite, a sprite is basically multiple graphics compiled into one image. The advantages of using sprites are: Fewer images for the browser to download, which means...
By David WalshJune 24, 2008
Multi-Select Transfers Using MooTools 1.2
While I was a Zone Leader for DZone's AJAX, CSS, and PHP Zones, DZone's Rick Ross asked me to contact Jeremy Martin with regard to a hot blog post he created: Easy Multi Select Transfer with jQuery. Both...

Discussion

Eric C.
Simple idea, great execution!
Adam (DinnerPlanner)
I’ve actually been looking for a good rating plugin for my new application. Might have to switch over to MooTools for this project.
Thorsten
Yes, the mySQL tut also please :) !!! With preveting double votes :)

David Walsh
Yeah, I’ll create a post with the MySQL/PHP.
Carisa
I didn’t find it in earlier posts. Did you already made it?

Matthew F
If you wanted to make an accessible version of this, it would seem that you should a) make the links reachable by keyboard, b) listen for the focus event.

Matthew F.

My quick attempt to add accessible features, for screen reader and keyboard only users:

var AccessibleMooStarRating = new Class({
	Extends: MooStarRating,
	initialize: function(options) 
		{
		// Run the parent class's initialization
		this.parent(options);

		// Default value for 'text' option
		Object.append(this.options,
			{
			text: "[VALUE] of 10"
			});

		var me = this;
		this.stars.each(function(star)
			{
			star.set({
				// Needs an href to be reachable by keyboard
				href: "#",
				// Set the link text to something semantically valid
				text: me.options.text.replace('[VALUE]', star.retrieve("ratingIndex")),
				// Hide the text for visual users
				styles: {
					"text-indent": (me.options.width + 10) + "px",
					"overflow": "hidden",
					},
				// Add keyboard equivalents for mouse actions
				events: {
					'keyup': function(e) {
						if(e.key == "enter" || e.key == "space")
							{
							me.setCurrentIndex(this.retrieve('ratingIndex'));
							me.fireEvent('click', me.getValue());
							}
						},
					'focus': function() { me.starEnter(this.retrieve('ratingIndex')); },
					'blur': function() { me.starLeave(); },
					}
				});
			});
		}
	});

(Sorry for the Whitesmith’s indentation style, I know many find it hard to read)

Matthew F.
And now I learn that any code blocks separated by an empty line get broken into separate blocks. Sorry about that as well, it should all be one block!

Alex
This is really beautiful. MooTools is a real FTW library!
I hope people will use this script and contribute to it at github.
Lorenzo S.
What an honour, David! :)

David Walsh
It’s an honor to feature it — great work Lorenzo!

realityking
Unfortunately there is one big issues with this script – like with most available online – it completely breaks without JavaScript turned on. You just see a bunch of radio buttons, no images. There is now way to submit it without JavaScript. And lastly the indication of what the current rating is doesn’t work very well without JS turned on.

This is not progressive enhancement and should, this way, only be used in a context where either Javascript is guaranteed or the application relies on JavaScript anyways.

My approach, which I’ve written as a Joomla plug-in, works by adding a button for each star. The design is provided with a stylesheet. This works completely good without JavaScript, scripting is only used for the AJAX part and too enhance the hover effect in ways no possible with CSS.

BTW, the same is true of your comment form as I just discovered ;)

David Walsh
Having JS generate the form would be an accessibility killer.
Matthew F.
Fortunately that hasn’t been true for a long time. All major screen readers support javascript, and are able to interact with changes made to the DOM structure. As long as it appears in tab order, it will be perceived by a screen reader. The best tip I ever got regarding accessible AJAX: View a page in Firefox cursor mode and imagine you can only see the word or element that the cursor is on. If you can still use the application, the DOM changes are probably accessible. (Or something along those lines)
piotr_cz
Good point about the progressive enhancement.

I guess for JS disabled bunch of radio forms is fine, I’m just missing the Submit button that would be hidden when javascript is turned on and form action=”rating.php”. Rating.php would check if the request was made by ajax call and in case it wasn’t it would redirect back to referring page after the processing.

Matthew F.

(Last try, and I promise to never post on this blog again!)

Good point: It would be a best-practice to either have the Javascript generate the entire form, or require HTML in the source that can be used by non-javascript users – particularly accessible code like:

<form method="post" action="rating.php">
<input type="hidden" name="postId" value="10" />
<fieldset>
<legend>Do you like this post?</legend>
<input type="radio" name="rating" id="rating_1" value="0.5" id="><label for="rating_1">0.5 / 10</label>
<input type="radio" name="rating" id="rating_2" value="1" id="><label for="rating_1">1 / 10</label>
...
<input type="radio" name="rating" id="rating_20" value="10" id="><label for="rating_20">10 / 10</label>
</fieldset>
<input type="submit" value="Rate This Post"> 
</form>

You could then use Mootools’ Form.Request class to submit the form (for users with Javascript), and require rating.php to redirect back to its referrer for non-Ajax requests.

Alex
Sometimes I wonder why David hasn’t implemented a system that would his visitors, us, with the permission to edit our posts for at least 5 minutes after we submitted them.
David Walsh
If there’s functionality to do this in WordPress, let me know ;)
Alex
Could this be it?

http://wordpress.org/extend/plugins/edit-comments-xt/

kolin
superb, bye-bye clunky ASP.NET ajax star rating. hello moo.

thanks david

mootools > *
Raymond trangia
Mootools functionality is the best

but what’s the idea on this percentage when some people try to rate
and more and more users cover it……..

how can we get all the ranks into one whole percentage

Alex
This should be done server side.
PHP will help you calculate that whole percentage by taking the already submitted values from a database.

Druczki Pocztowe
Is it possible for the user to select float values (9.5 for example)?
olivier
Thanks for the tip, David.
In the Options, consider replacing ‘click’ with a regular ‘onClick’ then it will be perfect ;)
Carisa
I’m asking about the tutorial :] Tried to replay on the post from February 8, 2011 @ 9:02 pm
alex
Hi what if i have more than 5 forms to rate how can i do it do i have to write more than 5 functions ?
Thank you.
Bjoern Willnat
Ok, but what is about a multiple Rating?
ArKey
Safari 5.0.x does not display the stars on the left side. Only white space. The grey stars on the right are ok.
bogdan
Does it work with mootools 1.4.2? Joomla uses that version.
Kev
Not bad but I prefer this 5 star rating system, it has 9 different types of stars like pumpkins, christmas, crystal, soft, darkness and more. Pretty cool.

http://templatz.co/5-star-rating-system.php
scratchdisk
Thank you very much for this. Has anyone noticed the images are requested over and over from the server while the starts are hovered over?

MooTools Star Ratings with MooStarRating

The HTML

The CSS

The MooTools JavaScript

Recent Features

Send Text Messages with PHP

9 Mind-Blowing WebGL Demos

Incredible Demos

CSS Sprites

Multi-Select Transfers Using MooTools 1.2

Discussion