Group Design Project: Rate Three Candy Bars In Order

by: Chris Coyier

Oct 17 2011
201

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.

Subscribe to The Thread

  1. Tauseef

    Sounds interesting ..

  2. Yan

    Interesting indeed. I might jump in this one.

  3. Jesse Shawl

    sweet n’ simple baby!
    http://tinkerbin.com/r0KPfQTA

    • Frank Mawn

      Did you even try lol.

    • bill

      Total fail. I can rate each bar as a 2.

  4. Gray

    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

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

    http://tinkerbin.com/KC64oGvH

    • Nico

      I like the idea

    • bill

      Too confusing, plus like a previous example I can rate them all the same value.

  6. Nathanael

    Needs some work still :/

    :)

    http://tinkerbin.com/nA3rxWqf

    • Rafał Krupiński

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

    • Tony Miller

      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!

    • Todd Wolfson

      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

      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

    • Kris

      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.

    • IJas

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

    • Nate

      Check out the latest version, above your comment :)

  7. Todd Wolfson

    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).

    • bill

      I like it but it requires jQuery. “mainly pure css”?

    • Todd Wolfson

      Lol, I was referring to the numbering schema and as well as the coloring. Sorry for the confusion.

  8. prabhu.webdev

    Upboat your candies, or bury in to oblivion

    http://tinkerbin.com/N36eXsb4

    improving now …

    • Thomas Dybdahl Ahle

      You can still rate two bars the same though.

  9. Simon

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

  10. prabhu.webdev

    if tinkerbin not working … check this

    http://jsfiddle.net/QnnDW/

    • Lilliana

      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. Richard Bland

    I may have a think about this one too!

  12. Todd Wolfson

    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

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

    • Todd Wolfson

      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

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

    http://tinkerbin.com/yfndOlhh

  14. Jonathan Warren

    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. Rafał Krupiński

    http://tinkerbin.com/ti4c2Zwg

    simple as that :P

    • Richard Bland

      Doesn’t work for me…

    • Rafał Krupiński

      @Richard: Have You tried clicking the ‘RUN’ button? :P

    • Richard Bland

      PMSL – No I really didn’t! I apologise sincerely… *Duh*

    • Thomas Dybdahl Ahle

      You get the feeling you should be able to press the green arrow.

    • Richard Bland

      Absolutely… completely slipped my mind… Simple yet effective idea. Check mine out below: http://tinkerbin.com/tm7IyKrV

    • Rafał Krupiński

      @Thomas: Green arrow can be a hint instead. It’s just a sketch. On the other hand – it only appears when mouseover is triggered on a list item – it can’t be clicked.

      @Ritchard: Nice logo out there – good move, the t-shirt is yours :) But gettin’ back to the point: I’d add snap in both: bottom container and podium sections with some sort of round placeholder shown when your “mentos” is being dragged over certain area.

    • Rafał Krupiński

      http://tinkerbin.com/jXHf7J0I

    • Richard Bland

      @rafal – Thanks for the comments, and yeah I agree, the snap to function is something I may add next along with some additional styling and labelling.

      LOL – Mentos… mmm nice right?

  16. Todd Wolfson

    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

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

    • Todd Wolfson

      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.

  17. Nate

    fixed the issues :)

    http://tinkerbin.com/DLLzxRIC

  18. Richard Bland

    Almost done… Ill share shortly

  19. Richard Bland

    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.

    • Richard Bland

      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

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

    • Richard Bland

      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

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

    • Richard Bland

      @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

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

  20. Martin Blackburn

    Heres my solution http://tinkerbin.com/5BzRC3aU

    Heres one just for fun
    http://tinkerbin.com/atgItbDk

  21. Tauseef Jamadar

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

    http://tinkerbin.com/d6IyjNif

  22. Raphael Lopes

    http://tinkerbin.com/vxvKIGvr

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

    =)

    • Richard Bland

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

    • Thomas Dybdahl Ahle

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

    • Raphael Lopes

      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.

  23. Thomas Dybdahl Ahle

    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 :)

    • Richard Bland

      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

      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.

  24. Richard Bland

    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. :-)

  25. Jon Spooner

    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.

  26. Damon

    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.

  27. stursby

    Here’s mine.

    http://tinkerbin.com/Dv5HBu7N

    • George

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

    • Todd Wolfson

      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.

    • stursby

      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.

  28. Rafał Krupiński

    http://tinkerbin.com/qlF4ttF8

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

  29. Pablo Botta

    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

      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

      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.

  30. Tauseef

    Here is a little modified version

    http://tinkerbin.com/uuCFJVoH

  31. Richard Bland

    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

      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

    • Richard Bland

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

    • Jon Spooner

      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!

    • Richard Bland

      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.

  32. Eric

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

    http://tinkerbin.com/X6hUX9yi

  33. Kirby

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

  34. Baylor Rae'

    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

    • Baylor Rae'

      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.

  35. Remi

    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.

    • Louis

      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.

  36. Peeter

    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.

    • Damon

      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

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

      http://tinkerbin.com/QJaVFnJq

    • Damon

      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

      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

  37. John

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

  38. Louis

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

    http://tinkerbin.com/3tr4Tepl

  39. Cooper

    Might not look as pretty in older browsers…

    http://tinkerbin.com/BvMQcIDC

    -CP

  40. Scott Vivian

    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

    • Louis

      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.

    • stursby

      no worries man. nice execution!

  41. William Blanchette

    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 ;)

  42. Tauseef

    Here’s another simple one

    http://tinkerbin.com/hQb2Ggcc

  43. Charbs

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

  44. Charbs

    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/

  45. Michael Crawford

    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

  46. Caio Dettmar

    First try:
    http://tinkerbin.com/fC6EOHNO

  47. Zach Malone

    http://tinkerbin.com/SoANjm4E

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

  48. John

    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

  49. David Booth

    #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

    • Richard Bland

      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

      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

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

      http://tinkerbin.com/i3CHOxFf

    • Richard Bland

      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

  50. Josh

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

    Remember to hit run!

  51. Josh

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

  52. Jachin Sheehy

    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.

  53. Richard

    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

      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.

  54. Moritz

    My solution.
    I know its complicatete =)

    http://tinkerbin.com/a20LO9oD

  55. Mark

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

    Not the greatest design in the world but it works.

  56. Remco

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

    http://tinkerbin.com/avYPxhOl

    • Remco

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

  57. Steve Wawman

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

  58. Cara Membuat Blog

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

  59. Óscar Mario Víquez

    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!

  60. Richard

    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.

  61. Leonuh

    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

      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

      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

      I forgot ol… strip_tags cut my tag…

    • Leonuh

      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.

  62. e

    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

      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.

  63. René Geuze

    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)

  64. Clayton

    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.

  65. Bardicstorm

    http://tinkerbin.com/vYNc8dJ2

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

    • Bardicstorm

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

    • Leonuh

      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!

  66. PAtrick

    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!

    • Richard Bland

      This one is good as I like the simplicity of it.

    • Steve Wawman

      Very nice; clean and simple to use design, with clear coding

    • Thomas Dybdahl Ahle

      It nearly feels like it reads your mind, when you click on an already marked bar, and it gets a “1″

  67. Adam

    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

      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

      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

      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.

  68. Zach Smith

    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.

    • Richard Bland

      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

      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.

  69. Stephen James

    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.’

  70. George Raptis

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

  71. Kyle Sevenoaks

    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 :)

  72. Paul

    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)

  73. Kyle Sevenoaks

    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 :)

  74. Jatinder

    http://tinkerbin.com/gA92nwiv

    Must see in chrome for better font-view!

  75. Lars

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

  76. Antoine

    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!

  77. Yasir

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

    I do bad CSS coding, so please pardon me.

  78. Avinash

    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.

  79. Plinio Tejeda

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

  80. Chris

    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)

  81. brendan saunders

    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

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

  82. David Herrera

    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.

  83. Darrin (Red)

    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

  84. IJas

    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… ;)

  85. designworks

    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!

  86. djave_co

    http://tinkerbin.com/Ry3CefLa

    Here’s mine with jQuery sortable

    Dave

  87. Januardi

    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,

  88. İbrahim Sidat

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

  89. Sabin Pochiscan

    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.

  90. bumbu

    http://tinkerbin.com/XCj8Sn9v

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

  91. mike

    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!

  92. daniel

    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.