An HTML5 widget for dot rating that is used in tabletop roleplaying games based on the Storytelling System (e.g. World of Darkness, Vampire the Masquerade etc). Uses jQuery.

You can see some basic examples live here.

Include the stylesheet and javascript file in the head section of your page:

<link rel='stylesheet' href='ssdot.css' type='text/css' />
<script src="ssdot.js"></script>

Create an ss-rating and give values to the data-dot-* attributes:

<ss-rating id="Dexterity" data-dot-title="Dexterity" data-dot-max="5" data-dot-min="1" data-dot-value="3"></ss-rating>

Now you can get the value using jQuery like this:

$("#Dexterity").data("dot-value");

From version 1.2.1 the title and the dots adjust on the width of the ss-rating element, title sticking to the left and dots as far right as they can. If you want to change this try customizing the .ss-title and .ss-dots css classes.