administration mode
Pssst...Ferdy is the creator of JungleDragon, an awesome wildlife community. Visit JungleDragon


JungleDragon Karma Control Video »

FERDY CHRISTANT - NOV 24, 2009 (08:28:13 PM)

A few days ago I showed you how I applied qTip, a jQuery Tooltip plugin, to JungleDragon's karma control:

The karma control is permanently visible for every logged in user at JungleDragon and basically shows their reputation:

  • Karma is at the base, they are the credits you earn for positive actions. It is visualized as a progress bar.
  • The progress bar shows how far the user has progressed in their level. At 100% they are promoted to the next level.
  • Every few levels, you get upgraded to a new class. The class is the animal in the food chain that your reputation is associated with.

None of this is new to people who follow this blog. However, what is new is that I have now implemented some cool jQuery animations that run at certain events, such as earning new karma, promoting to a new level or promoting to a new class. Check out the video below for the effects:

Apologies for the poor video quality, trust me, it looks much better in real life. Since there is no audio, here's a short transcript of what happens:

Scene 1: Karma control placement and tooltips

This scene shows where the control is positioned on a JungleDragon page. Next, it shows the tooltips in action.

Scene 2: Karma upgrade

This scene focuses on the control to see the full effect of what happens when the user has earned new karma, for example right after uploading a new image. It displays and blinks the newly earned karma. Next, it redraws the progress bar in a cool animation to reflect your new reputation. Finally, the user's avatar blinks twice to indicate that the animation ended.

Scene 3: Level upgrade

This scene shows what happens when users are promoted to the next level. It shows and blinks the level upgrade message and then blinks the new level number a few times. Notice how the progress bar is now at the beginning of the new level, encouraging the user to grow into this new level. 

Your level is displayed everywhere you are mentioned: when you upload an image, post a comment, make a vote, etc. It is therefore a highly visible and competitive reputation indicator.

Scene 4: Class upgrade

This scene show what happens when users are promoted to the next class. It shows and blinks the class upgrade message and then blinks the new class image a few times. It can take several levels to promote to a new class. Like the level indicator, the class image and name are displayed throughout JungleDragon. It is a highly visual and visible reputation indicator, designed to enourage activity and competition.

Well, that's it. I fully realize one should be careful in using animations on the web, but I found this area to be worth innovating in. The reputation system of JungleDragon is unique, and I consider it to be an essential component to engage the community that I intend to grow.

I'm highly curious of what you think?

Share |

Comments: 2
Reviews: 1
Average rating: rating
Highest rating: 5
Lowest rating: 5

COMMENT: CRAIG THOMPSON emailhomepagerating

NOV 25, 2009 - 15:54:44

comment » I've got to say Ferdy, very nice work with the website! Love the graphics and the use of qTip along with your reputation system. It really makes for a subtle yet intuitive user experience.

If you ever have any problems don't hesitate to drop me a line. «


NOV 25, 2009 - 20:16:07

comment » The creator of qTip dropping by for a personal note, I appreciate it very much Craig. I'll be looking into more use cases for qTip, particularly dialogs so I might be in touch if I get stuck 21 «

Was this document useful to you?
rating Awesome
rating Good
rating Average
rating Poor
rating Useless
required field
required field HTML is not allowed. Hyperlinks will automatically be converted.