Solved

Display rating with e.g. 3.2, 4.8 ect. stars selected

Posted on 2013-05-11
14
388 Views
Last Modified: 2013-05-30
I got a page with ratings and a rating can be from one to five stars. I calculate the average rating and it could be 2.4, 4.7, 1.8 etc. Right now I just round to the nearest whole number of stars and display one of my five star images.

1-star.png
2-stars.png
3-stars.png
4-stars.png
5-stars.png

Instead i would like to be able to display all the ratings in between as well så i guess it's a question about styling but i'm not quite sure how to accomplish it the best way.

I want the star background to fade as well so one star is red, three stars are yellow and five stars are green and it should be possible to display the exact color grading inbetween yellow and green if 3.8 was the average rating i needed to display.

How can i accomplish that and which technique should I use? I need a concrete practical example of doing it.
0
Comment
Question by:154115
  • 6
  • 3
  • 2
  • +2
14 Comments
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 39157986
This is a fairly common design pattern, used on many eCommerce sites.  There is an article here at EE that shows all of the essential moving parts and that has the base images for the stars.  For your needs you might choose to colorize these images using Photoshop or Gimp.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/PHP_Databases/A_5256-Simple-Vote-Counting-in-PHP-and-MySQL.html

From my experience working on this design and writing this article, I can tell you that fading the colors of the stars introduces a huge amount of programmatic complexity without adding meaningful information for the client.  About 98% of your clients will have adequate vision to discern the difference between the number of stars (without regard to color).  The other 2% need an accessible information source, probably an ALT tag that would work with a screen reader.  So I would recommend against fading the colors.  If you want to use different colors, you might want to make the calculations, round the values to integers, and set the star colors discreetly in distinct steps. Maybe this would work (but see if you like the color comparisons in the image).
1. Red
2. Orange
3. Yellow
4. Yellow-Green
5. Green
A color continuum from red to greenThe article is a couple of years old and uses the MySQL extension, so it needs to be updated.  MySQL is going away.  This article explains why and shows what you must do to keep your PHP scripts running.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/PHP_Databases/A_11177-PHP-MySQL-Deprecated-as-of-PHP-5-5-0.html
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39158210
Depending on how big your starts are, you will not be able to distinguish 1.2 vs 1.3.  Just make  images of half stars.  If you need more granular data, then maybe use 10 stars instead of 5 but still do the halves.  

For the grading you can create the stars on a white background (or whatever the background of your site is) and make the inside of your stars transparent.  Then use css3 gradient as the background for the div.  You can control where the solid and gradient starts /ends with js or your serverside code.

An easier option would be to make one image with 4 stars 8 different ways (1, 1.5, 2, 2,5..) and name your images 10.jpg, 15.jp, 20.jp ....  75.jpg, 80.jpg.  If the rating gets 3.3 starrs round and give it 35.jpg for 3.5 stars.

Keep It Simple
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 39158232
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 58

Expert Comment

by:Gary
ID: 39158259
http://jsfiddle.net/U98r2/3/

And adjust the width for #color with your calculation - this will need to be an inline css
0
 
LVL 58

Expert Comment

by:Gary
ID: 39158278
That doesn't work correctly, updated
http://jsfiddle.net/U98r2/5/

You would need to add a 1px transparent image to the color img to eliminate a broken img tag in IE
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39158310
Thanks @Ray_Paseur  It looks like there are a lot of good options.  I still like falling back to the simpler.
0
 

Author Comment

by:154115
ID: 39158429
First of all. Thank you all for all the good answers :-)

This is almost what i need:
http://jsfiddle.net/U98r2/5/

However there is still two issues:

1) I would like to be able to move it around the page. It shouldn't be in the top left corner all the time so maybe position:absolute isn't optimal?

2) It shouldn't be a gradient image but all the stars should have the last color in the visible spectrum. Could JavaScript be the solution in some way?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39158441
It'll be wherever you place the div in the your code. Just add
position:relative;
to the container div

Don't understand what you mean by this
all the stars should have the last color in the visible spectrum
You make the background up however you want it to fit your stars.

http://jsfiddle.net/U98r2/26/
0
 

Author Comment

by:154115
ID: 39158453
Thank you GaryC123

1) I'll try to add position:relative to the container div.

2) http://jsfiddle.net/U98r2/5/ <-- in this example the color of the displayed stars should be lightgreen because the last color is lightgreen.
http://jsfiddle.net/U98r2/27/ <-- in this example the color of the displayed stars should be orange.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39158461
Tidied up
http://jsfiddle.net/U98r2/28/

I cannot think of a simple or complicated way to do what you want.

Edit.
If you want that kind of color spread, then you will need to setup some kind of stepping board and assign all the various colors you want to use.
If the rating is above the step then you can just use a background colour for the div and forget the extra img.
Will have a play with it now.
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 39158481
http://jsfiddle.net/U98r2/31/

Here you will need to set the container width according the star rating.
And add a class to the container depending on that star.

Or in your php code step through part of the color wheel and add that directly to the container div as a background.
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39158517
<?php
$star=5;

if ($star>3){
$red=intval(255-($star*79));
$green=255;
}
else{
$red=255;
$green=intval($star*79);

}
$starwidth=$star*22.8;
?>
<div id="container" style="background:rgb(<?=$red?>,<?=$green?>,0);width:<?=$starwidth?>px">
<img id="blankstar" src="http://book-your-trip.com/images/blankstar.png">

</div>


<style>
#container {
    width:21px;
    height:21px
}
#blankstar {
    height:21px;
    width:114px;
}

</style>

Open in new window


Edit
Made some corrections.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39158584
Most of the 'star' rating systems I've seen use 'sprites' to display the ratings.  Like this one:
sprite stars
0
 

Author Comment

by:154115
ID: 39209097
Thanks to all of you for all the good answers. Points goes to GaryC123 for his examples.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
AWS EC2 & RDS Instance 5 35
Jquery 10 20
How can I make this form submit to itself? 10 27
Under active page on navigation bar 8 14
This article discusses how to create an extensible mechanism for linked drop downs.
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question