StarRatings

AJAX Test
0 1 2 3 4 5 6 7 8 9 10

First sign of the Apocalypse Terrible Awful Bad Could be worse Average Decent Good Great Excellent Perfect

Dislike 1 2 3 4 5 6 7 8 9 Like

UI Test
Here's some basic documentation:

The widget can be added via wikitext:

The wikitext settings are:


 * data-width &mdash; the total width of the widget
 * data-filled &mdash; SVG for the filled star (or other symbol)
 * data-empty &mdash; SVG for the background star (or other symbol)

All settings are optional. If no width is specified, it is set to 100px. If no filled or empty SVG is specified the star is used.

The widget can also be added via JavaScript. I've added the ratingWidget to jQuery so you can chain it with other jQuery instructions:

The JS settings are:


 * width &mdash; see above
 * filled &mdash; see above
 * empty &mdash; see above
 * rating &mdash; initial value &mdash; can also be triggered later with
 * change &mdash; function to be called when the user changes the rating &mdash; receives the rating as parameter and the widget as
 * submit &mdash; function to be called when the user clicks on the widget &mdash; otherwise identical to change

All settings are optional. If no width is specified, it is set to 100px. If no filled or empty SVG is specified the star is used. If no rating is provided, it will be set to 5. If no change method is specified, you will have to poll.

If a setting is provided by wikitext and JavaScript the data-attribute takes precedence.

If an image is provided, both a filled and an empty version, are required. The image must be square and of type SVG. The size does not matter.

The value scale is essentially the same as in your ui sketch. I just thought five stars look better than ten. But since you can give half stars, there's no difference. There's no zero star rating though.

All values are floored to the next 0.5 increment. 3.75 e.g. is shown as 3.5 stars. 3.5 is also what widget.data('rating') will say. The idea is that it should be possible to feed the average rating into the widget and get as accurate a representation as the 0.5 to 5 scale allows.