The Collab Lab #1

Hello folks! The first quiz has come out of the collaboration laboratory. I knew I had to find the time to write the blog about Maxibon and me making a quiz together while the iron is hot! Right off the bat, here is the link to the quiz.

If you haven't played it, go give it a try! We gotta get this quiz more takes, it's gorgeous.

On the form to join the Collab Lab, Maxibon had a straightforward idea that I knew would be a good fit for a collab. His idea started off as putting together pieces of countries that had been cut into jigsaw pieces. We weren't sure whether to make the SVG automatically input the answer when users put the pieces together or make users type the answers. Still, the base idea was obviously great. We started working through how the quiz would function.

There were a few problems that we had to smooth out before we could start on the manual labour of writing out SVG code or design. How does one make a jigsaw puzzle based on geography? Over the next couple days, we hammered out the details.

Would the jigsaw puzzle pieces have nubs? That means that people would get all the answers without even knowing the country shapes just by fitting nubs together. No good.

Would the jigsaw pieces just be rectangles then? Then the internal pieces would be interchangeable, and that would be a pain to code automatic detection. No good.

If every piece were an edge piece, then the internal rectangle problem would go away, but then puzzles could have only a few pieces... or have quite thin puzzles pieces, which would look a bit silly. No good.

The answer turned out to be pretty simple. The player just puts the puzzle together and then has to type out the answer. This way, people couldn't just fit the nubs together and automatically get the point. Plus, a lot of geography buffs would enjoy being able to deduce countries just by fitting a few pieces together.

After just a couple days, Maxibon let me know that he had made a prototype. It looked GREAT. It had a dynamic colour scheme that looked interesting and vibrant (see the beta version below). I was pretty excited to work with someone with artistic flair. Of course I already knew he was very skilled, based on his website quizzes, which are also mindblowingly awesome. Excitement abounded, and I knew I had to jump in and get the code up and running for him.

Excitement continued to bound, but I uh... had not done the coding yet. I let Maxibon know that I'd add the code to make the jigsaw puzzle pieces draggable as soon as possible, and it'd work for any element that had the class "draggable". I mean, we both have jobs, we can't make art in a day! Anyway, here's a picture of France with nubs added. The first thing I saw from Maxibon while we were making it actually already had nubs, so this is a cool, behind-the-scenes action shot of him adding nubs! Sick!

Yeah, it'd been a few weeks since we started making the collaboration, and by we I mean Maxibon. I uh... was going to get that code up and running soon! But Maxibon had been working miracles! Maxibon had TEN beautiful country puzzles ready to go. We chatted a bit about the best look, and I think the style he went with is keen and clean. Mono-coloured but with dynamic shades. Chef's kiss.

At this point we realized that me actually getting the SVG file from him was going to be a pain in the behind. Before resorting to anything drastic, I realized I could just use the "Inspect" console on a web browser and just cannibalize all the SVG's code and then copy/paste it into a notepad file! Muah ha ha ha! Let the coding begin!!!

...

...

...

...

Well, almost. I realized that I should wait for his finished product before adding the coding because changing anything in the SVG in Inkscape might accidentally mess up all my coding. Anyway, he was almost done, right? Right?

Good lord, Maxibon went absolutely all out with the finishing touches on this one. There were twelve puzzles in the quiz, and now they all had a nice little box that the pieces came in. At least that's how I see them. He wondered if we could make them fade out to reveal the pieces, so I just added code to make them disappear when clicked.

The actual countries looked far different than how they started, and needless to say (even though I've repeated it several times, yeah yeah), I was impressed with their style throughout the entire project. Here's a sneak peek at a country that didn't make the final 12 for the first entry into this quiz series!

And like any other SVG whizz, Maxibon made a sweet pre-quiz screen. Everything had turned out absolutely beaufitully.

All that was needed was for me to add some scripting to add the click and drag functionality, and bingo! We were done, and it only took me about an hour to fine tune the coding. It was done and I'm very happy with the result. Here's a snippet of the code. For the record, the code is only about 3,000 characters, which is not really all that much! The entire SVG file is about 500,000!

And that was that! Maxibon fixed up all the CSS styling and made the intro and outro screens all pretty and it turned out great. Was this quiz for everyone, though? People who weren't very good at country shapes would struggle a bit. But I mean, hey, what kind of a JetPunker doesn't know all their country shapes. What kind of jack-a-ninny doesn't know the basic shapes of most of the countries in the world? WHAT KIND OF A FREAK....

And that's how we made the quiz!

I'd like to extend many heartfelt thanks to Maxibon. He has really creative quizzes that have a ton of artistry that definitely deserve more love. Working with him was great, and I'm glad that I could help him out to make an idea of his a reality. Hopefully he turns this into a series, and I look forward for all the cool things he can come up with. Kudos and godspeed!