Connecting Gears

After the meeting last week, I started out this week trying to tame the snarl of badges thoughts that were whirling about in my brain.

Here is the (simple) story of how badges work.

1. User Jenny makes a world with a simple do-together. On her page is a big “do-together” gear. When she sees her page (i.e. the logged-in user perspective) she can mouse over the outside and all the gears she has yet to accomplish will appear in faded form
2. Jenny makes a world with a do-together with a count loop inside. On her page, a tiny “count loop” gear will appear around the “do-together” gear and she will also earn a  big “count loop” gear.
3. Jenny remixes a world with a while loop inside of a count loop. On her page, a “while loop” remix gear will appear around the “count loop” gear.

In coming up with this story, a lot of questions cropped up. Jordana and I had a chat and came up with a general rules for the relationship between badges and badge extensions (fondly known as “badgelettes”).

1. The badge extensions are everything inside of the badge up to one level down.
1. A Do-Together with a While loop inside is different from a While loop with a Do-Together inside
2. If you had an If inside of a While loop inside of a Do-Together, that would count as a While loop badge with and If and a Do-Together badge with a while. (Jordana and I decided two levels was a good stopping place. We can reconsider if our users coming up with extensive and complicated code)

This, then, led to the two main tasks of the week: modifying the databases to reflect the new model and figuring out how to style the badge-extensions around the badges so that I wouldn’t have to create an image for each possibility. (There would be a lot).

The former task was accomplished with relative ease, thanks to Jordana’s lovely database outlines, but no thanks to my inability to spell(apparently “bagdes” is not a good substitute for “badges”)

The latter task, though, involved a long drawn-out argument with Ruby ending in a compromise. What I wanted to do was match up the badge-extensions for a badge with the style sheet so that they would automatically form a circle. However, iterating through a style sheet was not something I knew how to do. So I asked Google. Google didn’t really know either. So I tried javascript. Negatory. Finally, I realized that the way I was trying to solve my problem (by iterating through badge-extensions and then placing them based on how many the badge had), while cool, would not actually help me in the long run. Since part of the badges is the ability to see what other badges-extensions are possible, you need to have a slot for all badge-extensions possible. As such, I decided to (for the time being) just brute-force go through all the possible badge-extensions and map them to the style sheet that way. Tada! It worked. You can now move your mouse around in a circle around the big badge and all the incomplete badge-extensions will pop up. (I may or may not have spent a good 5 minutes playing with the hover ability).

However, when I tried on Thursday to add in the remix badge, I realized that my brute-force solution, while effective, was only really applicable to a small set of scenarios. Jordana, Mary, and I had done some awesome brainstorming about where badges could go, so I knew that I would have to go back and create an easily-applicable solution to badge and badge-extension styling. Some more Googling, and a couple of shower-induced insights, I came up with a solution that makes it possible (and much easier) to have all sorts of options for your badge (i.e. a remix badge, a possibility badge, a goal badge, a mentor badge). Tada! Its works as before, but its guts are much more elegant 

The rest of today, Friday, and the next week, I hope to, along with Mary and Jordana, create some mock-ups for where badges, goal-setting, and mentoring will go. Tune in to the next installment for some more pretty pictures.