Why are the gists in a non-fixed width font?
How to Make Easy & Flexible Star Ratings
31–40 of 40 posts
Re: How to Make Easy & Flexible Star Ratings
#32Earlier quoted context omitted.
Well, if you do it that way you can change the whole rating by just changing the class name, after you set up all the background-position rules for all the different rating classes. I guess that's why?
With a loop you only need to pass in the rating. Get the modulus and then the floor. Render as many full stars as the floor, a half star if modulus was more than zero, then render an empty star as far as the number of full stars + half stars rendered was less than the number of stars that should be displayed (e.g. 5.) That's way less work than all that CSS.
This method leaves all styling in your HTML/server-side code, which is a pita.
Re: How to Make Easy & Flexible Star Ratings
#33Pretty nice. It's missing the actual content though (the rating), so it's completely inaccessible to search engines, scrapers, screen readers and the like.
Re: How to Make Easy & Flexible Star Ratings
#34Earlier quoted context omitted.
Use the algorithm given here: http://www.evanmiller.org/how-not-to-sort-by-average-rating....
Also the response article at http://masanjin.net/blog/how-to-rank-products-based-on-user-... is interesting.
Thank you guys, I'm just working on an app that requires calculating scores on user input, and these articles are pure gold! :)
Re: How to Make Easy & Flexible Star Ratings
#35Earlier quoted context omitted.
With a loop you only need to pass in the rating. Get the modulus and then the floor. Render as many full stars as the floor, a half star if modulus was more than zero, then render an empty star as far as the number of full stars + half stars rendered was less than the number of stars that should be displayed (e.g. 5.) That's way less work than all that CSS.
This method leaves all styling in your HTML/server-side code, which is a pita.
In an app I'm making, each group of items can have a different rating size, as defined by the group's admin. So the sprite with a fixed number of stars wouldn't work.
Essentially, I see a number of stars as just a different sort of a "progress-bar"-like graphic, so it's not necessary to set individual stars in the HTML. Just set it as a horizontally-repeating background, with predefined "steps" od the overlay, and the only number you need to pass from the server is the step level. This can even show a partial star if you want.
P.S. I haven't read the OP article prior to writing this comment; that's essentially what they're advising there.
Re: How to Make Easy & Flexible Star Ratings
#36This is a great discussion of the mechanics of rendering star ratings in a browser. I'd love to see a companion theory post on how to intelligently compute and rank such ratings. The arithmetic mean is notoriously sensitive to outliers, and the consequences are sometimes severe: I know a resort in Thailand that used to be ranked #1 on TripAdvisor on its island (Koh Phangan), only to fall to #17 after a 1-star review.…
I am super surprised by your comment, because thats exactly the question I asked my friend yesterday. I am trying to implement a ranking system on my website, so I asked my more experienced friend about it and he recommended me one book: Programming Collective Intelligence Building Smart Web 2.0 Applications by Toby Segaran, O'Reilly http://shop.oreilly.com/product/9780596529321.do
I just got that off my shelf, and page 25 says to use the arithmetic mean. I can't see anywhere where it talks about outliers or better averages.
Re: How to Make Easy & Flexible Star Ratings
#37A bit disappointed that the ratings don't degrade gracefully to a form with a dropdown menu or radio buttons.
Re: How to Make Easy & Flexible Star Ratings
#38This is the code that should go to the server side for calculating star ratings: Star Ratings I’ve been awfully busy programming lately. My Django-based side project is coming along well and I hope to have it ready for use in a few weeks. Please don’t ask more about it, that’s really all I can say for now. Anyways, I came across an interesting little math problem today and was hoping some skilled programmers out ther…
[deleted]
Re: How to Make Easy & Flexible Star Ratings
#39The HTML5 meter element lends itself to star ratings perfectly. Using divs with classes seems a bit old-school for today, although the blog post does say how they don't want to use JS for this.
I wrote a Raphael powered polyfill for this http://dylanfm.github.com/jquery.ratemate/. Although it requires Raphael (and JS), at least it's a bit more semantic and has a non-JS fallback in browsers that have native support for the meter element. The plugin also provides a way for controlling star ratings on input type number or range elements. However, this really isn't worth using if you're not including Raphael already (fairly large library). I'm thinking about making a canvas alternative.
Re: How to Make Easy & Flexible Star Ratings
#40Earlier quoted context omitted.
With a loop you only need to pass in the rating. Get the modulus and then the floor. Render as many full stars as the floor, a half star if modulus was more than zero, then render an empty star as far as the number of full stars + half stars rendered was less than the number of stars that should be displayed (e.g. 5.) That's way less work than all that CSS.
This method leaves all styling in your HTML/server-side code, which is a pita.
This is avoided by rendering each star/half star/empty star as an li or a div, defining common styles like width, height and positioning and then background images for each.