Permalink
Fetching contributors…
Cannot retrieve contributors at this time
48 lines (36 sloc) 2.51 KB
layout title date categories tags excerpt permalink thumbnail comment private
post
Test your geo skills with Guess Where? app
2015-09-07 01:00:00 -0700
articles
Google Maps
Mapping
Geography
Quiz
Education
World Capitals
Test your geo skills with Guess Where? app. Guess name of the unmarked capital from given options. You can also choose a region or play quiz for whole world.
guess_where_quiz_app.png
true
false

A week ago I came across an interesting geo quiz by Telegraph. The quiz that used 15 static unmarked map views of famous capitals from around the world - requires you to guess the name of those capitals - ultimately challenging your geographical skills. Despite being maps enthusiast, I could only guess 6 correctly out of 15. I would blame it on playing it straight after waking up in the morning.

Nevertheless, I immediately thought, how great it would be to have a live, interactive and dynamic version of it. Well, I also thought why not build it. So here it is at http://jabran.me/guess-where/ Go ahead and give it a go!

Technical side:

The app is based on following technologies:

  • FontAwesome - for awesome font based icons
  • Bootstrap - for overall styling
  • JavaScript - for general purpose and interactions
  • Google Maps API - for wonderful enriched dynamic maps
  • jQuery - for DOM manipulation

To keep the development, deployment and maintenance at ease, I have also incorporated following technologies:

  • Git - for version control
  • Github - for convenient collaboration and hosting
  • Sass - for customizing the Bootstrap Sass and custom CSS
  • Bower - for front-end resource management
  • Grunt/NPM - for automatic workflow, builds and deployment

Well, that looks like a long list and probably an overkill for a one page app but it is pretty much a default setup I would use for any such app.

Collaboration:

The code of app is open source and available at Github to fork, collaborate or just view under MIT license. You will need followings pre-installed to get going with it:

  • Node
  • Sass
  • Grunt
  • Bower

Fork the repository using git clone https://github.com/jabranr/guess-where.git. Once ready, use grunt for development workflow and grunt build for production build. If you have something to fix or add, then please do not make a production build but open a pull request with only development changes.

Happy guessing!