An HTML5 widget for dot ratings. Used in tabletop roleplaying games like Vampire the Masquerade.

rpg, wod, cofd, vtm, vampire, masquerade, vtr
bower install ssratingwidget



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.

Using the widget

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 a span element with the ss-dot-rating class, give values to the data-dot-* attributes:

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

Call .DotRating() on it for initialization:


Now you can get the value using jQuery like this:


The data-dot-* attributes

Attribute Type Description
data-dot-title string The title of the attribute/skill this rating represents.
data-dot-max number The maximum number of dots this rating has.
data-dot-min number The minimum number of dots this rating has.
data-dot-value number The default value of the attribute/skill
data-dot-is-squared boolean If the value is "true" the dot will appear squared and be marked with X
data-dot-color-empty html color Sets the color of the dot when its empty.
data-dot-color-marked html color Sets the color of the dot when its marked.
data-dot-color-border html color Sets the color of the dot's border.