create a star rater using css
http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star- rater-using-css/ http://komodomedia.com/blog/index.php/2006/01/09/css-star-rating-part- deux/ I found this tutorial via digg. I thought it might be useful to the people working on the voting API etc. Also, found this interesting point in the comments : "The 4-star system is superior to the 5-star system in every way. Discuss!" According to my economics teacher, 4 star (or any even number) is better than 5 star because people will often decide upon the median grade if they aren't shure if they like something or not. using even numbers forces a person to think about if they like or dislike something in the slightest -- Adrian Rossouw Drupal developer and Bryght Guy http://drupal.org | http://bryght.com
On 1/13/06, Adrian Rossouw <adrian@bryght.com> wrote:
According to my economics teacher, 4 star (or any even number) is better than 5 star because people will often decide upon the median grade if they aren't shure if they like something or not. using even numbers forces a person to think about if they like or dislike something in the slightest
How do you express complete indifference in an even numbered system? Greg
Greg Knaddison wrote:
On 1/13/06, Adrian Rossouw <adrian@bryght.com> wrote:
According to my economics teacher, 4 star (or any even number) is better than 5 star because people will often decide upon the median grade if they aren't shure if they like something or not. using even numbers forces a person to think about if they like or dislike something in the slightest
How do you express complete indifference in an even numbered system?
Greg
Don't vote =)
Funny, the tutorial you pointed to is the very same one I used to build SimpleVote. Using it, it's pretty easy to make an X-star system... One constant defines how many stars it builds. Existing votes stay valid if the number of stars is changed, too, since they save their data in 1-100 scale. --Jeff
sweet. =) eaton++ i haven't been paying too much attention honestly. This uses the vote api ? On 13 Jan 2006, at 5:34 PM, Jeff Eaton wrote:
Funny, the tutorial you pointed to is the very same one I used to build SimpleVote. Using it, it's pretty easy to make an X-star system... One constant defines how many stars it builds. Existing votes stay valid if the number of stars is changed, too, since they save their data in 1-100 scale.
--Jeff
-- Adrian Rossouw Drupal developer and Bryght Guy http://drupal.org | http://bryght.com
-----Original Message----- From: Adrian Rossouw [mailto:adrian@bryght.com] Sent: Friday, January 13, 2006 9:42 AM To: development@drupal.org Subject: Re: [development] create a star rater using css
sweet. =)
eaton++ i haven't been paying too much attention honestly. This uses the vote api ?
Yep. With the API in place, and the 1-100 scale being used to store data, switching around voting systems and so on is actually pretty easy. I just need to tweak the theme function such that it still works when CSS *isn't* available. http://voting.cookingwithdrupal.org/node/1 has it in action -- I'm using tiny little stars on that site 'cause big stars offend me. ;) It's a VERY simple example, and in the future I'm going to be expanding it no to add more features but to exercise more options there in the api. --Jeff
On 13 Jan 2006, at 5:50 PM, Jeff Eaton wrote:
http://voting.cookingwithdrupal.org/node/1 has it in action -- I'm using tiny little stars on that site 'cause big stars offend me. ;) It's a VERY simple example, and in the future I'm going to be expanding it no to add more features but to exercise more options there in the api.
You can add multiple ratings per node, right? ie: graphics, gameplay, blah right ? -- Adrian Rossouw Drupal developer and Bryght Guy http://drupal.org | http://bryght.com
Right, that's a feature that's supported in the API, though I haven't yet coded a widget for it. I'd probably have to turn that into a form submit, or some sort of JS-maintained array of data. AJAX might be nice. I'd hate to have to reload the page for EACH of the criteria. The API supports single and multiple criteria, custom calculation functions, and a couple different voting metrics (drop-a-token-in-the-jar, rate-on-a-scale, and so on). It does its calculations only when a vote is cast, then caches the results, so viewing/retrieving/filtering rating data is relatively inexpensive. Voting data is kept in as 'agnostic' a format as possible, which (in many cases) would allow you to change voting systems without losing all your existing votes. Also, it's not restricted to nodes. You can see the sidebar on that site contains a list of news aggregator stories that are ratable. Comments, nodes, images, even other ratings can be rated. --Jeff
-----Original Message----- From: Adrian Rossouw [mailto:adrian@bryght.com] Sent: Friday, January 13, 2006 10:06 AM To: development@drupal.org Subject: Re: [development] create a star rater using css
You can add multiple ratings per node, right?
ie: graphics, gameplay, blah right ?
-- Adrian Rossouw Drupal developer and Bryght Guy http://drupal.org | http://bryght.com
Don't know if you saw this, but I created an accessible, form-based, wholly CSS generated rating thinger awhile back: http://factorycity.net/demos/drupal/rating/default.html Chris On 1/13/06, Adrian Rossouw <adrian@bryght.com> wrote:
http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star- rater-using-css/ http://komodomedia.com/blog/index.php/2006/01/09/css-star-rating-part- deux/
I found this tutorial via digg. I thought it might be useful to the people working on the voting API etc.
Also, found this interesting point in the comments :
"The 4-star system is superior to the 5-star system in every way. Discuss!"
According to my economics teacher, 4 star (or any even number) is better than 5 star because people will often decide upon the median grade if they aren't shure if they like something or not. using even numbers forces a person to think about if they like or dislike something in the slightest
-- Adrian Rossouw Drupal developer and Bryght Guy http://drupal.org | http://bryght.com
-----Original Message----- From: Chris Messina [mailto:chris.messina@gmail.com] Sent: Friday, January 13, 2006 10:08 AM To: development@drupal.org Cc: Drupal Development Subject: Re: [development] create a star rater using css
Don't know if you saw this, but I created an accessible, form-based, wholly CSS generated rating thinger awhile back: http://factorycity.net/demos/drupal/rating/default.html
Ooh. That's really nice. Does it auto-submit? The fact that it uses an option group rather than random images etc makes me think it would be much easier to adapt for multi-criteria use... --Jeff
You can also generalize the technique to include more options and so on. I should document the technique at some point, but I think it's pretty useful for what you guys are discussing. Chris On 1/13/06, Jeff Eaton <jeff@viapositiva.net> wrote:
-----Original Message----- From: Chris Messina [mailto:chris.messina@gmail.com] Sent: Friday, January 13, 2006 10:08 AM To: development@drupal.org Cc: Drupal Development Subject: Re: [development] create a star rater using css
Don't know if you saw this, but I created an accessible, form-based, wholly CSS generated rating thinger awhile back: http://factorycity.net/demos/drupal/rating/default.html
Ooh. That's really nice. Does it auto-submit? The fact that it uses an option group rather than random images etc makes me think it would be much easier to adapt for multi-criteria use...
--Jeff
There is one thing, that, in general worries me about such JS niftyness: it might be buzz-compliant and all, but is it truly Accessible and so? Here is how people should create such nifty widgets. (not saying that that did not happen in the examples!) * Make a normal form based rating. Most probably with a dropdown and a submit button. * Add some CSS to make it look nicer. * Overlay some JS to alter the DOM and/or the layout (only for those clients that are *known* to support it). * Overlay some AJAX to make it snappier. Here is wat happens most of the time: * A cool idea is mocked up and worked out in a little HTML with CSS. * Some JS is added to make dynamic * The DOM is changed a little to make the JS work better * Some ajax is added for snappyness. * Some exeptions are added in the JS and CSS for specific browsers that have problems with teh widget. That, i can assure you, *will* break. If not on the older browsers, then certainly on some future version of some browser. The first method *always* degrades to the Good Ol' HTML. The stuff that will always work. Op vrijdag 13 januari 2006 17:42, schreef Chris Messina:
You can also generalize the technique to include more options and so on. I should document the technique at some point, but I think it's pretty useful for what you guys are discussing.
Chris
-- | Bèr Kessels | webschuur.com | website development | | Jabber & Google Talk: ber@jabber.webschuur.com | http://bler.webschuur.com | http://www.webschuur.com |
-----Original Message----- From: Bèr Kessels [mailto:ber@webschuur.com] Sent: Friday, January 13, 2006 11:27 AM To: development@drupal.org Subject: Re: [development] create a star rater using css
Here is how people should create such nifty widgets. (not saying that that did not happen in the examples!) * Make a normal form based rating. Most probably with a dropdown and a submit button. * Add some CSS to make it look nicer. * Overlay some JS to alter the DOM and/or the layout (only for those clients that are *known* to support it). * Overlay some AJAX to make it snappier.
Ber, I agree wholeheartedly regarding the 'right' way to do this. After reading your post I'm actually looking at rewriting the theme function to support this 'right' way of doing things. I know for a fact that it simply does *nothing* when CSS is turned off. ;) --Jeff
Ber, just view source on Chris' example. It is quite obvious then, how it works. Goba Bèr Kessels wrote:
There is one thing, that, in general worries me about such JS niftyness: it might be buzz-compliant and all, but is it truly Accessible and so?
Here is how people should create such nifty widgets. (not saying that that did not happen in the examples!) * Make a normal form based rating. Most probably with a dropdown and a submit button. * Add some CSS to make it look nicer. * Overlay some JS to alter the DOM and/or the layout (only for those clients that are *known* to support it). * Overlay some AJAX to make it snappier.
Here is wat happens most of the time: * A cool idea is mocked up and worked out in a little HTML with CSS. * Some JS is added to make dynamic * The DOM is changed a little to make the JS work better * Some ajax is added for snappyness. * Some exeptions are added in the JS and CSS for specific browsers that have problems with teh widget.
That, i can assure you, *will* break. If not on the older browsers, then certainly on some future version of some browser. The first method *always* degrades to the Good Ol' HTML. The stuff that will always work.
Op vrijdag 13 januari 2006 17:42, schreef Chris Messina:
You can also generalize the technique to include more options and so on. I should document the technique at some point, but I think it's pretty useful for what you guys are discussing.
Chris
Op vrijdag 13 januari 2006 19:07, schreef Gabor Hojtsy:
Ber, just view source on Chris' example. It is quite obvious then, how it works.
Jes. It wont work without JS. And has no submit button. It does not degrade. -- PGP ber@webschuur.com http://www.webschuur.com/sites/webschuur.com/files/ber_webschuur.asc PGP berkessels@gmx.net http://www.webschuur.com/sites/webschuur.com/files/ber_gmx.asc
Ber, I think his widget wasn't a demonstation of full submitting capabilities, but rather how a standards-compliant form element can be made to look like a spiffy rating-widget. Handling the actual submission of a rating would be handled as usual, I'd imagine. --Jeff
-----Original Message----- From: Bèr Kessels [mailto:ber@webschuur.com] Sent: Friday, January 13, 2006 12:45 PM To: development@drupal.org Subject: Re: [development] create a star rater using css
Op vrijdag 13 januari 2006 19:07, schreef Gabor Hojtsy:
Ber, just view source on Chris' example. It is quite obvious then, how it works.
Jes. It wont work without JS. And has no submit button. It does not degrade.
it wouldn't be much to take chris' example, and add a css-hidden submit button ... and put auto submit in the css. then it'd fully degrade afaict. On 1/13/06 1:47 PM, Jeff Eaton wrote:
Ber,
I think his widget wasn't a demonstation of full submitting capabilities, but rather how a standards-compliant form element can be made to look like a spiffy rating-widget. Handling the actual submission of a rating would be handled as usual, I'd imagine.
--Jeff
-----Original Message----- From: Bèr Kessels [mailto:ber@webschuur.com] Sent: Friday, January 13, 2006 12:45 PM To: development@drupal.org Subject: Re: [development] create a star rater using css
Op vrijdag 13 januari 2006 19:07, schreef Gabor Hojtsy:
Ber, just view source on Chris' example. It is quite obvious then, how it works. Jes. It wont work without JS. And has no submit button. It does not degrade.
-- James Walker :: http://walkah.net/ :: xmpp:walkah@walkah.net
Op vrijdag 13 januari 2006 19:47, schreef Jeff Eaton:
I think his widget wasn't a demonstation of full submitting capabilities, but rather how a standards-compliant form element can be made to look like a spiffy rating-widget. Handling the actual submission of a rating would be handled as usual, I'd imagine.
I was not attacking that specific form. In fact, i like it most from all the voting widgets I have seen so far. I think It is rather easy to make it fully degradabe, if one adds a submit button and <img> tags for displaying the overall rating. Ber -- PGP ber@webschuur.com http://www.webschuur.com/sites/webschuur.com/files/ber_webschuur.asc PGP berkessels@gmx.net http://www.webschuur.com/sites/webschuur.com/files/ber_gmx.asc
Actually, the JS is not necessary for the functioning of the widget. If you turn on and off styles in Firefox after clicking the different ratings, you'll see that because I'm using labels, the values actually change as you click -- no JS needed (except in Safari, which isn't standards compliant). You could add a submit button and the value of the rating would actually get submitted. The biggest issue is maintaining the rating once you've clicked -- so either autosubmission would be good or just a little JS to change the DOM as suggested or use AJAX to submit seamlessly... This approach is actually much better than Amazon's, which was the inspiration for this demo... they were actually using an iframe with table-aligned stars to submit ratings... suck ass! Anyway, a little JS isn't going to kill you -- especially when this degrades to a very accessible format with labels and everything. Chris On 1/13/06, Jeff Eaton <jeff@viapositiva.net> wrote:
Ber,
I think his widget wasn't a demonstation of full submitting capabilities, but rather how a standards-compliant form element can be made to look like a spiffy rating-widget. Handling the actual submission of a rating would be handled as usual, I'd imagine.
--Jeff
-----Original Message----- From: Bèr Kessels [mailto:ber@webschuur.com] Sent: Friday, January 13, 2006 12:45 PM To: development@drupal.org Subject: Re: [development] create a star rater using css
Op vrijdag 13 januari 2006 19:07, schreef Gabor Hojtsy:
Ber, just view source on Chris' example. It is quite obvious then, how it works.
Jes. It wont work without JS. And has no submit button. It does not degrade.
participants (9)
-
Adrian Rossouw -
Bèr Kessels -
Chris Messina -
Gabor Hojtsy -
Greg Knaddison -
James Walker -
Jeff Eaton -
Robert Douglass -
vlado