Nerdy presents: building a 'congratulations' site

12 September 2014

A couple of weeks ago, one of my best friends handed in her PhD, in geology, and the TLD .rocks went on sale. Clearly this was a sign, so I bought her what has to be the best domain for a geologist named Sorcha to own: http://sorcha.rocks.

I built her a little present on the site, too – a memory game, with photos she took during the PhD, and the place names, meaning that she's basically the only one who will recognise the pictures and be able to do it really from memory. Once the game has been completed successfully, a 'to do list' appears at the bottom of the page, so it's hidden to most viewers.

In the background, data based on the rocks she studied that I found online (carbonatites, in case you're curious) is mapped out, using TileMill; taking a screenshot of the map was a much easier way of getting it on the site, than putting it up as an interactive map (maybe next time!)

Making the site

First, I set up Github pages to get the page up, at http://zararah.github.io/sorcha.rocks. Then, I searched for a Memory Game plugin to fork on Github – it turns out there are lots! I had it under good authority that it would be best to use a Javascript based plugin, so I selected Javascript under the Languages on the left sidebar, and filtered the options.

Then, I sorted by 'Most stars' to see which ones were popular, and had a look through the top options that came up. One tip that I learned here – if a website isn't given to find a demonstration online, try http://username.github.io/repo-name to find it.

For example, with this memory game from Bradly Green, there isn't a website given. It's online at https://bradlygreen.github.io/Memory-Game/ though – and though it looks pretty nice, I was unconvinced by the lack of documentation and the very short ReadMe.

In the end, I went with the 'Quizy Memory Game'; you can see what it looks like online here. I also appreciate greatly the 'Properties' section outlined here, making it a lot easier to customise than some of the others listed there. (thanks, frenski!)

The site also has comprehensive installation instructions – great for a newbie like me! Adding the images and titles was fairly straightforward, just replacing what was already there (flags and country names) to the index.html of the site.

I created a custom CSS file to define my own styles – ie. Things like changing the font and adding the background image. All of the images (the top image, and the cards) live in the img folder.

To make things come up only when the game was successfully completed, I used

<div style=”;display:none”;id=”;gamewin”;>

and

$('#gamewin').show();

(both of these with help!)

When I was happy with how the site looked, I followed these instructions to get http://sorcha.rocks to point to http://zararah.github.io/sorcha.rocks. And, ta-da! The nerdiest present I've ever made, but I like it.


You might also like: