Make radiobuttons into an attractive gradable control.
This works by using three different images to overlay the radiobuttons.
The rating works by letting the user select the desired image to supply the rating. This is visualised by showing the user the red stars. If the user then wants to alter their rating, the user clicks the rating once to re-activate (this is to prevent accidental alteration) and then selects the desired rating.
You can see this script in action when you rate a website or a concept.
View tests or concepts for a demo
$(document).ready(function() {
$("#makeGradable").gradable(function(value, x) {
// Callback after rating is selected
}, { range: 10 });
});
You can specify the following options:
defaultClass - this class should have the background image for the "off state". The default value is "lt_gradable_default"
hoverClass - this class should have the background image for the "on state". The default value is "lt_gradable_hover"
inactiveClass - this class should have the background image representing a selected rating. The default value is "lt_gradable_inactive"
showCheckbox - this is a boolean value that determines if the radio buttons should be displayed or not. The default value is "false"
range - this determines the range of the rating. The default value is 5
