Grow your CSS skills. Land your dream job.

Group Design Project: Rate Three Candy Bars In Order

Published by Chris Coyier

Last time we did a group design project, we did a list with functions and we got lots of interesting ideas. Then the other day I linked to a video of Ryan Singer, a tiny part of which inspired the idea of radio buttons with 2-way exclusivity. Then reader Erik Edhagen suggested I do more of those group design project things... so here we are!

Your Mission

Create an interface where a user is able to rate three candy bars (a Snickers, a Twix, and a Butterfinger) in the order of how much they like them (1st, 2nd, 3rd).

You don't need to save the data. You don't need to build an entire web page around it. Just the part where you do the rating.

Create your demo using Tinkerbin and post the link (and any notes/comments you might have) in the comments below. If you want to use a JS library in Tinkerbin you gotta link it up in the HTML section.

There are no other rules. Get creative.

Prize

I'll pick three users who I think did a particularly good job and send them a CSS-Tricks T-Shirt.

Let's say about a week. I'll close the comments on this post on Tuesday, October 25th and pick the winners. Follow conversation will happen in some kind of roundup post.

Why?

Just to be clear, I have no particular need for this. I'm not trying to get "free work" out of you.

I think this is just a fun and useful exercise for practicing design. You learn while thinking through how you think it's best to approach this. You learn while creating it. You learn while seeing other people's approaches. You learn dissecting and discussing all the approaches.

Comments

  1. Tauseef
    Permalink to comment#

    Sounds interesting ..

  2. Permalink to comment#

    Interesting indeed. I might jump in this one.

  3. Jesse Shawl
    Permalink to comment#

    sweet n’ simple baby!

    http://tinkerbin.com/r0KPfQTA

  4. Permalink to comment#

    Love the concept. I’ve got a great* idea, just need to find the time to do it!

    *Greatness level dependent on you, our judge haha

  5. David Booth
    Permalink to comment#

    Rate your Bar! Click to move it up!
    (You have to click Run for the js to work)

    http://tinkerbin.com/KC64oGvH

  6. Nathanael
    Permalink to comment#

    Needs some work still :/

    :)

    http://tinkerbin.com/nA3rxWqf

    • I’m not that convinced drag&drop is something people love to do on the web.

    • I like, but you’re right, there’s still some edge cases. In the latest Chrome, I can make the bar images disappear, with no way to bring them back. It’s the kind of idea I immediately thought of, though. Nice initial work!

    • I really like your use of ‘this’ in the Javascript; I kept on limiting myself to closuring the element I bound to instead of looking it up every time.

      A few constructive criticisms:
      – To capture all mouseup’s, you will need to bind to window.parent.body and do some bubbling.
      – If an element is not dropped on a valid slot, return it to its original position
      – Handle the case for dropping an element into its original slot (Hint: do nothing ;) )
      – Instead of requerying frequently (that is getElementById), try to memoize what is going on.
      – Instead of using .innerHTML, use .replaceChild; much more legal and less strenuous on the DOM.

    • Nate
      Permalink to comment#

      cheers for the construtive feedback, my first time doing this sort of thing without jquery. I’ll optimise at lunch, until then http://tinkerbin.com/aq1lD5Oq

    • Permalink to comment#

      I like it a lot, the only problem I see is that when I drag something from 3 to 2 it will not slide number two down before I release the mouse (it should show that it is alive and knows what is happening). Not a major problem, and with that fix I don’t think it is possible to do it any better.

    • Permalink to comment#

      If I drag and drop away, It disapears… :/

    • Nate
      Permalink to comment#

      Check out the latest version, above your comment :)

  7. http://tinkerbin.com/i5KAPrgo

    The closest I have gotten with mainly pure CSS.
    Coming up: a jQuery UI event-based system and non-jQuery UI version (if I don’t get tired by then).

  8. Upboat your candies, or bury in to oblivion

    http://tinkerbin.com/N36eXsb4

    improving now …

    • Thomas Dybdahl Ahle
      Permalink to comment#

      You can still rate two bars the same though.

  9. Simon
    Permalink to comment#

    Todd’s got it so far from me :0)

  10. if tinkerbin not working … check this

    http://jsfiddle.net/QnnDW/

    • Lilliana
      Permalink to comment#

      The problem here is that a) you can rate all 3 candy bars the same number, and b) the user is supposed to rate them 1, 2 and 3. So I don’t think this complies with the requirements :(

  11. I may have a think about this one too!

  12. Updated to use Javascript to deal with the classes (so it isn’t broken as with before).
    Also, a fix on counting that I missed and made border-radius more compliant.

    http://tinkerbin.com/CZQ0Ey5S

    I will leave the non-jQuery version for another day. I don’t think I can make any better UX than jQuery UI Sortable gives.

    • Nate
      Permalink to comment#

      :( I wrote it from scratch, thought it was part of the challenge.

    • Hey, whoa. This is an exercise, not a competition; the point is to have fun. I admit that yours takes the cake with its complexity with designing its own Javascript.

  13. stryju
    Permalink to comment#

    bit buggy, but here it goes ( credit goes to David Booth for image sources ;-) )

    http://tinkerbin.com/yfndOlhh

  14. Todd’s solution is the one I’d go for, but it doesn’t work in mobile Safari.

    If you wanted to be super scientific and eliminate any default bias you could have the user drag the items from a ‘bin’ into preference order, or randomise the default order on each page load.

  15. Whilst lying in bed, I realized it would be quite quick and easy to do this sans-jQuery. Also, I have been meaning to do more katas. As a result, I got up and tossed this together. Oh, and I decided to join the ‘use an image’ trend.

    http://tinkerbin.com/m2eJWqgu

    I feel like I am missing some good concepts so feel free to point them out. Also, for those of you are up to it, I left some TODO’s that I would love the solutions to =P

    • Thomas Dybdahl Ahle
      Permalink to comment#

      I think animation, and an indicator on clicked items, would make it easier to know what was going on.

    • Could you please explain more? I did put an indicator on clicked items (it makes them very blue) and it seems to work in the browsers that support Tinkerbin (FF and Chrome).

      I agree that animation would be nice and slick (especially if done with CSS3-animations) so I will add it in later today.

  16. Nate
    Permalink to comment#

    fixed the issues :)

    http://tinkerbin.com/DLLzxRIC

  17. Almost done… Ill share shortly

  18. http://tinkerbin.com/tm7IyKrV

    Here is my version.

    I have used the JQuery UI library taking advantage of the Drag and Drop feature to allow users to drag their favourite chocolate bar onto the podium.

    In an ideal world this would save the users data in some kind of poll?

    I have styled it with CSS as best I can with the exception of green gradient. In this case I just ran out of time to finish the CSS3 gradients and instead just included the fallback png.

    Hopefully it will be pleasing enough on the eye and have the required functionality.

    • I should point out that I am actually linking out to all of the JS required, so that may slow it up a little…

    • David Booth
      Permalink to comment#

      Great Concept! You inspired me to make another one using jquery..maybe.

    • Thanks kindly,

      I inspired myself, I was considering creating another one with better styling, make it into a proper interface so to speak.

      Reply to this if/when you have something else to show.

    • David Booth
      Permalink to comment#

      Here it is: Candy Bar Sniper
      http://tinkerbin.com/JiwfbytL

    • @David – That is absolutely stunning, truly truly stunning.

      If I had time today my plan was to take my concept and go for a onClick event, a bit like this, as suggested by another member of the thread but I don’t have the time. :-( Funny enough my mate last night said about some kind of “bubble popping” animation for it as well so when the user clicks on the bubbles they appear on the podium in the order they chose.

      Friend me on Twitter/ or email me from my website, I would very much like to collaborate with you on future works… @blandydoes

    • David Booth
      Permalink to comment#

      @ Richard Bland – Thanks, I will send you an email by the end of this week.

  19. Tauseef Jamadar
    Permalink to comment#

    Here’s my piece .. will work more on this

    http://tinkerbin.com/d6IyjNif

  20. Raphael Lopes
    Permalink to comment#

    http://tinkerbin.com/vxvKIGvr

    This is my version. I’ve used JQuery UI too …

    =)

    • Cool. I originally sketched something similar based upon the slider. I like it.

    • Thomas Dybdahl Ahle
      Permalink to comment#

      Very nice, maybe there could be an indicator to help differentiate when they are close?

    • Raphael Lopes
      Permalink to comment#

      I don’t know if i understood your question. My english is very poor .. rsrs sorry.

      I think yes, because jQuery UI has a proprety value. You can define when it is 0 and can add any class with a different style, or apply anythink.

  21. Thomas Dybdahl Ahle
    Permalink to comment#

    Here is a merge sort based: http://tinkerbin.com/4j76GEUi
    It should require the least amount of work for the user, and ensure optimal complexity if the number of bars grow :)

    • Can I offer a bit of constructive criticism here? *looking confused* I don’t find it easy to figure out what is going on… You may wish to add some description or labelling suggesting to the user what they are required to do. I found myself just clicking around with no real idea of the outcome.

    • Thomas Dybdahl Ahle
      Permalink to comment#

      Reasonable :)
      Here it is with labels: http://tinkerbin.com/8OrNsOsV
      The idea is that the user doesn’t have to care about the final ordering, but only the minimal number of individual choices.

  22. I may revisit my earlier version and offer up some better styling and labelling.

    I think when it comes to getting the user to interact with your site there needs to be an element of fun and reward for taking the time out of their lives to complete the task you set.

    Ill stick with the podium concept because it is a recognisable symbol of positioning, the best will always be higher up on the podium than the worst, so the task is a bit more obvious. as a 1st, 2nd and 3rd positioning task.

    It definitely requires additional labelling though. :-)

  23. Jon Spooner
    Permalink to comment#

    wow lots of great examples –

    - the earlier bar based interfaces were the most “satisfying” from a user pov. The drag and drop versions make sense but there is no clicking into place or finality.

    -I agree with the observation that in pre-populated versions (with bars already in 1 2 3 order) the order could influence user voting.

  24. Permalink to comment#

    My solution is a click to increment and decrement a bar, representing a specific brand of candybar.

    Link: http://jsfiddle.net/TEfQd/4/

    It’s very rudimentary at this point (no design really) and I’d like to get it to where it stops incrementing/decrementing at 10/0; I just don’t have the time right now.

    • George
      Permalink to comment#

      Stursby’s approach seems simple, is easily to comprehend, works well and could easily be customized. I like it a lot!

    • Heh, it has the same numbering problem I did. Buggy when (all done in FF latest):
      – Click on the top element and wiggle it. The second one loses its prefix.
      – Click and drag the second to the bottom (don’t let go). The second one loses its prefix.
      – Click and drag the third to the top or second. The last one loses its prefix.
      – Click and drag top to third. The second one loses its prefix.
      – Click and drag top to second. The top does not change to ’1′.
      – When clicking and dragging any of the elements, the numbering gets screwing on the actual one being dragged.

    • Permalink to comment#

      Hey Tom, I just tried it in FF and it’s working fine for me…

      What do you mean by “wiggling it”? are you just click it then moving your mouse all around?

      I’m trying to break it, by dropping elements all over the place, but it’s still working for me.

  25. http://tinkerbin.com/qlF4ttF8

    An we’ve got another one! Lacks usability, but it’s cute :D

  26. Pablo Botta
    Permalink to comment#

    Well, here is my idea:

    http://jsfiddle.net/p4bl1t0/qcdDJ/

    I think drag and drop is not the best choice beacause it could be trouble to use the UI in a mobile device.

    So I do a click interface were you select candys in you order of preference (like a little child). You can re-order click again in a candy bar to get it to the top.

    Extra: Semantic markup (OL, UL)

    • Jon Spooner
      Permalink to comment#

      really slick and I love the non-presumptive horizontal list that doesn’t indicate 1st 2nd or 3rd out of the gate.

      - good assumption on the drag and drop being tough for mobilers
      but having drag and drop once the items are in the list would be nice for non-mobile folks who made a mistake. rather than having to “reset” each time you want to reorder your list.

    • Pablo Botta
      Permalink to comment#

      You can reorder the OL by re-clincking on the elements in the list. This would make that the clicked item go to the top of the list.

  27. Tauseef
    Permalink to comment#

    Here is a little modified version

    http://tinkerbin.com/uuCFJVoH

  28. Here is my modified version of the drag and drop.

    http://tinkerbin.com/L4VwQF4J

    The design is better and I have incorporated a snap to inner function. If I had more time I would like to figure out how to get that smooth snap to effect but for now I think this will do the trick.

    I agree with some of the comments about drag and drop not being an ideal solution for mobile. Again if I had time these are all issues I would address.

    Order selection makes the most sense but it has been done so many times in the past, I really havnt seen many applications where drag and drop has been used for something like this. It is just really good fun!

    :-)

    I hope people like the design and the basic functionality.

    • Tauseef
      Permalink to comment#

      Great work there Richard. The only thing I would suggest is to fix the location where it can be dropped. Right now it seems to be droppable anywhere. This is great place am learning lots

    • Yeah I am working on that – I would like it to drop smoothly into place with an animation too…

    • Jon Spooner
      Permalink to comment#

      could you possibly keep the items draggable or onClick have them move to the highest available slot?
      that way you can avoid the dragndrop issues while keeping the fun functionality for those non-mobile folks.

      great work Richard! the thread of your development to this point is really fascinating!

    • Hi Jon,

      This is becoming very interesting for me as this is really the first time I have dug deep into the drag drop functionality, I am very much learning as I go along.

      Here is a modified version again: http://tinkerbin.com/0ndVeGsU

      This time I have added an active class to highlight the droppable areas, and I have contained the draggable elements within the candy-wrapper (see what I did there in my code… candy… lol).

      Then I added a revert for when they elements are dropped outside of the “drop zone” which means they revert back to their original position.

      The trouble I am in now is that I cant get them to drop exactly into the center of the droppable container and once dropped I can only drag and drop into the droppable conatiners and not back to its original starting point if say a user has a change of heart.

  29. Eric
    Permalink to comment#

    Easy for users to understand and to the point. Sometimes less is more.

    http://tinkerbin.com/X6hUX9yi

  30. Kirby
    Permalink to comment#

    Here’s my go at it: http://tinkerbin.com/zXzQaR6f

  31. Here’s my concept http://tinkerbin.com/isvzmZIr.

    Mine came out looking a lot like your original design. I didn’t intend to copy your structure, but it does seem to be the most self explanatory.

    I think it is the easiest to use because it follows a pattern that has been around for so long.

    When surveys ask to rate customer service, they present a listed form with a number of radio buttons. And immediately I know how to read and rate each item. They don’t have to explain “Click a number between 1 and 10″.

    While I think a drag and drop solution reads the best because the items are in an ordered list. And if you use an image like this (http://dl.dropbox.com/u/14873072/sorter.gif) usage is quickly implied. I can’t think of a good fallback for a browser without javascript enabled, nor am I confident in usability for a mobile platform.

    Which leaves me thinking the pattern or one similar to the one I used is the best.


    Here’s some sample PHP that would validate my example.

    <?php
    
    $_POST_EXAMPLE = array();
    $_POST_EXAMPLE['ratings'] = array(
      'snickers' => 2,
      'twix' => 1,
      'butterfinger' => 3
    );
    
    $ratings = array_unique($_POST_EXAMPLE['ratings']);
    
    // Two of the candy bars had the same rating
    if( count($ratings) !== 3 ) {
      echo 'ERROR MSG HERE!';
    }else {
      echo 'Success!';
    }

    [PHP CODE EXAMPLE] Success
    [PHP CODE EXAMPLE] Error

    • After looking at everyone’s ideas I think my favorite has been this method (http://tinkerbin.com/gi4pDmEQ) by Scott Vivian*. I find it faster to fill out and it scales a lot better than mine. However, it relies completely on javascript and that bothers me.

      So I changed my original idea to implement Scott Vivian’s idea when javascript is enabled (http://tinkerbin.com/BAJasDxC). It is scalable and if it was in a form you could still get the order from $_POST['ratings'].

      ## The Change
      If JS is disabled it presents a regular form. But when JS is enabled it changes over to use the better system.


      * If I didn’t quote the right person please pardon me for my mistake. There are over 150 comments (at the time I’m posting) and I may have missed the original comment.

  32. Permalink to comment#

    Here’s my try : http://tinkerbin.com/57oln1L2

    It definitely needs some visual improvements, but I think the UI is very nice and simple to use. From what I’ve seen so far, drag and drops makes it way too complicated for a user to understand or to actually use. Here, with just 2 clicks, you’ll have your candies ranked in order. I’m curious to know about what you guys think.

    • Permalink to comment#

      I think this is one of the best. Good job, Remi.

      The only flaw I can see is mobile, because of hover. But for a desktop UI, I think it works.

  33. Peeter
    Permalink to comment#

    http://tinkerbin.com/xaWo3Lpi

    That’s mine. Came out pretty ugly with huge jQuery code. I’m pretty sure there loads of cleaner ways for doing it, but at the moment I dont have any better ideas.

    • Permalink to comment#

      This is a neat idea! As an idea to clean up your jQuery code, you could create things in variables. For instance, for each option, you have 3 different choices it could be:

      $(‘.third li:last-child’).html(‘Awful!’);
      $(‘.second li:last-child’).html(‘Good enough!’);
      $(‘.first li:last-child’).html(‘Delicious!’);

      If you set these as variables, you could make it a lot easier on yourself.

    • Peeter
      Permalink to comment#

      Thanks for the idea. I’ve just started learning jQuery so it’s still kind of new for me.

      http://tinkerbin.com/QJaVFnJq

    • Permalink to comment#

      Peeter -

      Looking a little bit better! A few more suggestions:

      1. Set variables so you don’t have to access “$(this)” so much. It’s taxing on the CPU. Instead of having $(this) called 6 times for one hover function, setting a variable for “li.one”, “li.two” & “li.three” (such as var $liOne = $(‘li.one’); will help out a ton.

      2. There are lots of lines where you manipulate the DOM with CSS to add background colors. Not only is it redundant, but manipulating the DOM takes time. Instead, you can set those CSS styles with class, like : .red { background:red } and in your jQuery, instead of doing .css(), you would do addClass(‘red’) and removeClass(‘red’). You can also set up the default background class with a white background, and add that class once it’s been removed in the hover off function.

      Hopefully those aren’t too overwhelming. You can always write back if you need help!

    • Peeter
      Permalink to comment#

      Thanks!
      Starting to learn something about jQuery.

      1. I had one problem when I was doing the hovering with classes. When I was hovering one rating bar then hover effect was applied to all of the rating bars. I couldn’t find any better way to avoid this than using $(this).

      2. I made classes for every background color I use. But I had to use !important in css to override the class that gets added when rating bar has been clicked. Is there any better way for doing it.

      http://tinkerbin.com/NSw4F9xK

  34. John
    Permalink to comment#

    This has been one of the best posts…getting all the readers to show there skills and tricks! Good stuff!

  35. Permalink to comment#

    After some serious deliberation and analysis , I think I’ve come up with the best solution of them all:

    http://tinkerbin.com/3tr4Tepl

  36. Cooper
    Permalink to comment#

    Might not look as pretty in older browsers…

    http://tinkerbin.com/BvMQcIDC

    -CP

  37. Scott Vivian
    Permalink to comment#

    I went for what I thought was the most usable method which I mentioned in my comment on the previous post. Two clicks is all that’s needed!

    http://tinkerbin.com/gi4pDmEQ

    The list numbers are slightly weird in Firefox but apart from that it works fine. Credit to stursby for his great CSS candy bar designs which I shamelessly stole :D

    • Permalink to comment#

      This is the type of solution I was going to present. Saved me the trouble. :)

      I think it’s good and it’s very much in line with popular UIs on mobile that narrow down choices to minimize clutter, and then expand based on what you’ve selected. I think this is easy to use and, unlike some of the others, there’s no confusion or ambiguity.

    • Permalink to comment#

      no worries man. nice execution!

  38. http://tinkerbin.com/9nBsaALX

    Quick and easy, expands to any number of items simply. My code leaves much to be desired, but you get the idea ;)

  39. Tauseef
    Permalink to comment#

    Here’s another simple one

    http://tinkerbin.com/hQb2Ggcc

  40. Charbs
    Permalink to comment#

    I’m so frustrated with Tinkerbin, it says something went wrong when I try and save, does anyone know why?

  41. Charbs
    Permalink to comment#

    Sorry Chris had to use jsfiddle, Tinkerbin keeps giving me an error.

    Anyway here’s my go. Tried keeping it simple as possible. Sorry for the bad choice of images.

    http://jsfiddle.net/U8GA8/

  42. Michael Crawford
    Permalink to comment#

    Here’s my solution. I tried to use some jQuery and a little bit of CSS; the fade effects may be a bit overpowering, but I think it turned out well.

    http://tinkerbin.com/hdJMUzFn

  43. http://tinkerbin.com/SoANjm4E

    Probably the only thing worth noting:
    It randomizes the list after every choice or reset.

  44. John
    Permalink to comment#

    Some nice work has been shown so far, nice post Chris!

    If I wasn’t busy at the moment I would have participated, threw this together quickly in photoshop, I love drag and drop but arrow controls are simple and work nice with mobile.
    Image Shack Link

  45. David Booth
    Permalink to comment#

    #2 this time with jquery – Candy Bar Sniper

    0. (Click Run)
    1. Pick your favorite, 2nd favorite and 3rd favorite candy bar.
    2. Shoot the balloons to drop the candy bars into the correct cups.

    http://tinkerbin.com/JiwfbytL

    • I found one slight issue… If I shoot the balloons before the cups they fall to the floor and its game over? – Perhaps you could work on there a continuation of the balloons if I miss my target?

    • David Booth
      Permalink to comment#

      I guess I liked the idea that one can miss the cup and therefore loose “a turn”, if I have some spare time this week I will work on a continuation.

    • David Booth
      Permalink to comment#

      #2.1 – Candy Bar Sniper
      Changelog: 1.Restarts Balloons on a miss. 2. Better Looking Cursor

      http://tinkerbin.com/i3CHOxFf

    • Brilliant… now all it needs is a stats board that pops up with the users chosen order and a reset button to try again! ;-p

  46. Permalink to comment#

    Here is my interpretation: http://tinkerbin.com/4kW1JySR

    Remember to hit run!

  47. Permalink to comment#

    Whoops, a bit trigger happy there. That is mean to say no images!

  48. http://tinkerbin.com/wc4E6qpT

    I’ve tried to do this so that the barebones markup would deliver a form that has the potential get the job done on the server-side in the absence of CSS and JS…

    Tested in the latest versions of Chrome, Safari and Firefox, but I haven’t tried to cover all the bases with CSS vendor prefixes.

  49. Richard
    Permalink to comment#

    Here is my pure css solution:

    http://tinkerbin.com/tBdjBxte

    It’s horribly ugly, but fully functional. I don’t really have time to make it pretty just for the fun of it, got real work to do. :) Would be easy enough to beautify.

    • Richard
      Permalink to comment#

      Oh, I tested it in Chrome 14 and FF 8. The technique is pretty straight forward, think I learned it from css ninja, so maybe easy to adapt to w/e browser.

  50. Moritz
    Permalink to comment#

    My solution.
    I know its complicatete =)

    http://tinkerbin.com/a20LO9oD

  51. Permalink to comment#

    my two cents : http://tinkerbin.com/L0KJds3Q

    Not the greatest design in the world but it works.

  52. Permalink to comment#

    I go with simplicity and user experience. No bells and whistles, just what the user expects it to do.

    http://tinkerbin.com/avYPxhOl

    • Permalink to comment#

      I’m sorry for the double post. I had some connection problems over here! De last post is the correct one!

  53. Here is my attempt. Bit of fun and learnt a couple of things! http://tinkerbin.com/OWGpw3sk

  54. Stursby’s approach seems
    simple, is easily to
    comprehend, works well
    and could easily be
    customized. Thanks

  55. Óscar Mario Víquez
    Permalink to comment#

    Hi Guys!!

    I gave it a shot, here’s what I got:

    http://jsfiddle.net/eruecco87/PaBba/

    or

    http://jsfiddle.net/eruecco87/PaBba/embedded/result/

    I used JS Fiddle cause tinkerbin was giving me a few issues

    Cheers!

  56. Richard
    Permalink to comment#

    Ok, I cleaned my pure css solution up visually. Here it is:

    http://tinkerbin.com/AcdTuJP0

    Thanks for the problem to solve, helped me think outside my normal box. Really appreciate seeing all the cool looking visuals people are doing. Gives me some good ideas. Wish I had the style of some of you, people really made some cool looking items.

    I hope my 0 javascript method isn’t too ghetto.

  57. Leonuh
    Permalink to comment#

    Hi everyone,

    Here is my entry: http://tinkerbin.com/GzuqKZmm

    For modern browsers.

    I hope you will like that ;)

    Ps.: I will go to CSSOff, so its only a small entry to represent my knowledge :)

    • Leonuh
      Permalink to comment#

      I forgot in my sample… sry for bad semantic :/
      Btw guys… forget jquery ui for this small script…
      You shot with a huge gun for a small birdy…

    • e
      Permalink to comment#

      http://tinkerbin.com/IswKwjIo

      i added a scrollbar so you could actually get to the third option. sorry, didn’t account for the small frame of the tinkerbin view area.

    • Leonuh
      Permalink to comment#

      I forgot ol… strip_tags cut my tag…

    • Leonuh
      Permalink to comment#

      Unfortunately, i used class for attribute text property… I should use data-*… nevermind… I will not post new version, it’s not fair i think. I will pay more attention for semantic on CSSOff.

  58. e
    Permalink to comment#

    I’ll take a stab here with a very no-frills design: http://tinkerbin.com/lh0bAyoy

    I tried to make it simple. I included onstates for active items in that position and it will swap out existing items if you change your mind. i might alter the approach if there were more than three items, but i think that this works well within the parameters.

    can’t wait to hear what you think!

    • e
      Permalink to comment#

      also, reading through some of the comments, i agree that drag+drop isn’t something people always want to do. i tried to solve this without anything too fancy and chose not to do drag and drop. i also tried to keep the interface clean by hiding the dropdown options and only show what’s necessary and useful. I wanted to try and make it a one-click solution.

  59. I’ve worked on a project where users are given the opportunity to rank their choices from 1 to [setting we make].
    The radio buttons idea is nice but it isn’t scaleable and doesn’t feel right to me.

    What I like most is dragging but you’d be surprised how few people understand dragging. Just try it out with letting your parents sit at it.

    So with some User eXperience I figured it would be better to (also) have up and down buttons for the ranking. And just as important, make sure it’s visual AND make sure people can’t double click.(most non techies double click on everything)
    My example is based on one of the other examples posted here(Remco Hendriksen) because its code was neat and had the base I needed. The original project has even more user friendly interface controls but it would cost me too much time to copy it all.

    To conclude, my example:
    http://tinkerbin.com/KuBFUbUo (I suggest a browser that supports :first-child and :last-child)

  60. Permalink to comment#

    Here is mine.
    http://tinkerbin.com/q4XAsn3H
    I used jquery sortable. I contained the items so you can’t drag them all over. I also added some feedback that your choice is updated.

  61. http://tinkerbin.com/vYNc8dJ2

    Pretty basic interaction. Could’ve used jQuery UI / sortable, but not really worth the KBs.

    • I should point out I didn’t bother to test this on anything but chrome.

    • Leonuh
      Permalink to comment#

      I think its a good choice… i saw many good idea… but all has bad code / semantics… i think thats the one of the good ways…
      1 suggestion in your code -> dont use global function -> create private function in private segment
      I hope my comment was useful!

  62. Permalink to comment#

    Wow, so many submissions already. I haven’t had time to read them all so I don’t know if I’m proposing something new or not:

    http://tinkerbin.com/9d05DBSc

    Simply click on your candy bar and see how the exclusive system works!

  63. Adam
    Permalink to comment#

    Here’s my solution: http://tinkerbin.com/ASQNijM6

    The code’s really ugly right now and could probably be made a lot better… but at least it works!

    The idea is that each candy bar is in a column, and you can drag it up and down the column. After you let go, it snaps to the closest of four positions (bottom = undecided, top = best candy bar). If two candy bars are in the same position when you let go, the older one gets pushed back into the bottom/undecided position.

    • Thomas Dybdahl Ahle
      Permalink to comment#

      I love how this one actually enforces an ordering, and doesn’t let you rate two bars equally.
      I’m not sure it’s always logical what happens when you drag a bar to the same height as another one though. Specially if there’s a third bar blocking the position right under it.

    • Adam
      Permalink to comment#

      Yeah, at first I was just going to make the conflicting one to move one rank down, but then I wasn’t sure what should happen if there was a second conflict then, so I just decided to make it go all the way down, to the undecided position.

    • Adam
      Permalink to comment#

      Another improvement would be to allow people to just click on a position inside the vertical column to set the rating of a particular candy bar, as opposed to clicking and dragging, to accommodate people who don’t want to or can’t easily drag and drop.

  64. Zach Smith
    Permalink to comment#

    http://tinkerbin.com/rt9cpXOz

    Made a jQuery plugin called that turns any ul into a drag-n-droppable ranking system. Not very feature-rich but has some potential.

    • Exactly what I was trying to achieve but with a bit more style. You clearly know your JQuery better than I do. Well done… This is the winner for me from the ‘drag and drop’ entries. :-)

    • Thomas Dybdahl Ahle
      Permalink to comment#

      My first experience: I initially thought I would be able to drag them out again. I only found out by accident, that I was supposed to click them.

  65. Suggestion:

    Drag and drop interface if you want to go toward the ‘touch crowd.’

    Some kind of radio box interface that disables already selected options for ‘mouse users.’

  66. George Raptis
    Permalink to comment#

    Here’s my solution based on a Drag-and-Drop tutorial I found at elated.com

  67. Here’s my version.
    And again on jsfiddle so you can see the entire thing (and don’t have to click run to kick start the jQuery)

    Took me about an hour, including img manipulation and was the first idea that came to my mind. Didn’t look at other entries before I made it :)

  68. Paul
    Permalink to comment#

    I usually go to this place called The Web Squad for my web needs, but lately I’ve been getting into a bit of programming myself. I like CSS cause it’s so powerful (even without the tricks)

  69. Final version! added jscript callback to keep the colors as they move, submit button and some moz css also.

    jsFiddle version.

    Now to look at some other entries :)

  70. Permalink to comment#

    http://tinkerbin.com/gA92nwiv

    Must see in chrome for better font-view!

  71. Permalink to comment#

    A Mix of JQuery UI, CSS3 and google webfonts. No Images needed :) http://tinkerbin.com/ucFifkTI

  72. Permalink to comment#

    Here’s mine. Spoiler alert: No fanciness, no drag-and-drop, no OOP… I’m going for the human approach. But maybe I’m missing the point?

    JUST TWO QUESTIONS: http://tinkerbin.com/2002OW3G

    Do click RUN. Thanks!

  73. Permalink to comment#

    Here’s my entry http://jsfiddle.net/YasirTheLeGend/QcmDz/embedded/result

    I do bad CSS coding, so please pardon me.

  74. Permalink to comment#

    http://jsfiddle.net/xpertdev/wfaxb/

    Here is mine. Drag the Slider below each candy.

    Concept is just like below :

    Asking for the how much you like each candy. You drag the slider and open up the that much candy for you.. :)

    Hope you like this.

  75. Hello to all, I’ve finished my project and here it goes http://jsfiddle.net/QETJM/25/embedded/result/

  76. Chris
    Permalink to comment#

    Very rough round the edges and lacking in style, but here’s my offering…

    http://tinkerbin.com/NhV4SAqB

    (No drag and drop in this one)

  77. brendan saunders
    Permalink to comment#

    For a rating of only three choices it felt to me like a sortable list was the easiest to manage. Here’s my crack at it.

    Also, I love the Ryan Singer peepcode screencasts. Awesome insight into how to tackle a UI problem from one of the best.

    http://tinkerbin.com/nsA8vFCk

    • brendan saunders
      Permalink to comment#

      looks like you have to click run to get it to work. I linked to jquery + jqueryUI so that seems like the cause.

  78. http://tinkerbin.com/BZaIgqZF

    You’ll need to click ‘Run’.

    Two obvious downsides to my approach are that (1) it doesn’t scale and (2) it’s text-heavier than some other submissions.

    The upside is that the selection requires only one click.

  79. Darrin (Red)
    Permalink to comment#

    http://tinkerbin.com/S1axsjQU

    Wrote this today. Not my best work but it was late at night. :D
    Comments, Hints, Suggestions? Let Me Know. Thanks

  80. Permalink to comment#

    http://tinkerbin.com/ImGWVQ8I

    Just in 3 clicks :).. I didn’t code to rate the last(3rd) one automatically, since the user has a chance to re-rate… ;)

  81. http://tinkerbin.com/gIvb36ko

    yet another example.
    If the last snack wasn’t rated automaticly js code would be much simpler.
    Less clicks is better than more clicks.

    need to hit run!

  82. Permalink to comment#

    http://tinkerbin.com/Ry3CefLa

    Here’s mine with jQuery sortable

    Dave

  83. Januardi
    Permalink to comment#

    Here is my design,,
    I’m new in javascript and CSS, so maybe this is the best that i can do.

    http://tinkerbin.com/HKqcZoJQ

    Please give me the advice,
    thx,,,
    hehehehehehehehe,

  84. İbrahim Sidat
    Permalink to comment#

    Will you send the price abroad if I win? To Istanbul?

  85. Sabin Pochiscan
    Permalink to comment#

    Here’s my design:

    http://tinkerbin.com/TQev7DBO

    Is uses jQuery and CSS3 transition and transform and you rate with just three clicks.
    Hope you like it.

  86. Permalink to comment#

    http://tinkerbin.com/XCj8Sn9v

    works in chrome, should work in others.
    click and drag a circle to change rate.

  87. mike
    Permalink to comment#

    Here’s my try which leverages form labels and css.
    jQuery is used but only for limiting one candy type selection.

    http://tinkerbin.com/werIIpXb

    constructive critiques welcome!

  88. daniel
    Permalink to comment#

    A quick approach using jQuery UI and drag & drop. I figure that direct manipulation of the candybars is a good approach. It’s a little buggy but I’m quite new to JS so I don’t really have the knowledge to make the fixes.

    http://tinkerbin.com/vvsCeb3H

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".