W&M's hackathon, Cypher, runs a puzzle challenge inspired by the one run by VTHunt at VTHacks. (Hi VT!) Participants need some way to view the puzzles and submit their answers, so here's a fancy new web app to dole out our puzzles.

What it does

There's authentication and accounts - you make an account and your progress is saved.

There's also a tier system - each tier has however many puzzles, but also a number of puzzles you have to solve before you unlock the next tier. Therefore, it's possible that you won't have to solve all the puzzles in a tier to progress in the puzzle challenge. Hopefully this prevents people from hitting dead ends when they get stuck on a puzzle.

How I built it

Django all the way B)

Challenges I ran into

The tier unlocking was pretty tricky to figure out. Originally, I stored each user's most recently unlocked tier in the database. But then I had to figure out how to represent a user on the very first tier - when all the tiers are admin-supplied and none are guaranteed to exist in runtime. When I create a user, how can I say that their tier is tier #1 when tier #1 might not exist?

I realized that a user's unlocked tiers are actually derivable if you know what puzzles they've solved - hence, storing a user's current tier wouldn't be DRY (Don't Repeat Yourself). So now tier unlocked-ness is determined dynamically: for any given tier, I look for the tier below it and see if the user has solved enough puzzles at the tier one level down. If they have, then this tier is unlocked. (And what if I'm considering the first tier? If there's no tier underneath it, I just automatically unlock it.)

This design isn't perfect - one big flaw is that it relies on the tiers being numbered sequentially; I base my definition of "one tier down" on admin-supplied numbers stored in the database, making the operation kinda fragile. Of course, most people are going to number their tiers 1, 2, 3... - but I've done my best to account for any tier numbering system (or even no tiers at all), and I think I did alright.

Accomplishments that I'm proud of

I learned how to make a login system! And it wasn't even that bad! Django gives you a lot for free, and then various online tutorials (one two) got me the rest of the way there. Goes to show that if it's a simple enough task, someone else on the internet has done it for you already.

What I learned

Sooooo many little Django tidbits, tips 'n' tricks. But my favorite thing I learned was actually about CSS. When an element is absolutely positioned, it positions itself relative to the first parent element that isn't statically positioned. So in order to get that cool overlappy effect with the emoji on the solved or locked puzzles, I needed to make the parent puzzle elements relatively positioned, which didn't affect their position on the page, but made them not statically positioned, so that the emoji would position themselves relative to the puzzle element, not the window (as they would otherwise).

What's next for Puzzlebot: The Level Up

A buncha cleanup!

  • I'd like to further DRY-ify the index and puzzle pages.
  • The login and account pages could be cleaned up visually.
  • For the puzzle links, right now you have to click on the text itself - I'd like to fix the CSS so you can click on the entire element box as a link.
  • I've been curious about Docker - this might be a good chance to play with it?

Built With

Share this project: