Rating

Basic styles for rating with stars and how does it look with the elcom Platform style?

Overview

To provide users with better evaluation of content, the Rating function is featured directly in applications or websites. This function allows users to give their personal point of views to which another ones can refer to know what is good and bad. For systems containing a large content that needs to be evaluated, the Rating function is really necessary.

How it works?

Template

No rating:

 Rate This Topic

My Rating: no value yet

Content rated by the other users:

 Rate This Topic

My Rating: no value yet

Content rated by the current user:

 Rate This Topic

My Rating: Good

Markup

HTML is your standard unordered list with links.

Launch Rate Demo

Status

Status Description
No rate by default The value of "My rating" is "no value yet" and all stars are gray.
Already having rates by the other users The value of "My rating" is "no value yet" and there is current already average rated stars in pale yellow for reference: 1 star - Poor, 2 stars - Below average, 3 stars - average, 4 stars - Above average, 5 stars - Good.
Hover/press on stars The star is changed from gray (no rate) and/or pale yellow (having rate) into yellow. The tooltip is displayed correspondingly with the number of selected stars.
Rated by the current user The stars are changed into yellow. The value of "My rating" is matched with the value of selected stars.

Rules

RP-01 Rate button or symbol is easy to see.
RP-02 The rate result of one user is calculated once.
RP-03 Depending on configuration, it is possible to rate again. The old rate result is replaced by the new one.
RP-04 The display of rate stars must be matched with its status.
RP-05 The label of "My rating" must be matched with its value.
RP-06 Rate result is near the title of content.
RP-07 Rate function is available to online logged-in user only.