sharkdp/quizzity

A fast-paced geography quiz

quizzity

quizzity is a geographical quiz built on top of a Leaflet map. You have to guess the location of several cities on a map while receiving points for being both accurate and fast.

Play the game here!

Score distribution

JavaScript libraries, CSS, icons

• Leaflet - http://leafletjs.com
• lodash - https://lodash.com
• jquery - http://jquery.com
• Leaflet.awesome-markers - https://github.com/lvoogdt/Leaflet.awesome-markers
• Leaflet.Geodesic - https://github.com/henrythasler/Leaflet.Geodesic
• font-awesome - http://fortawesome.github.io/Font-Awesome
• Animate.css - https://github.com/daneden/animate.css

Geodata, map rendering

• GeoNames - http://www.geonames.org
• Natural Earth - http://www.naturalearthdata.com/
• Tilemill - https://www.mapbox.com/tilemill/
• python-mbtiles - https://github.com/perrygeo/python-mbtiles

The game idea is inspired by Geosense.

quizzity's Issues

Improve UX for comparing one’s most recent guess with the city’s actual location

Thanks for this awesome little game!

The user experience could be further improved by making it easier for the player to compare their most recent guess with the city’s actual location.

With a little experience, most of your guesses will be pretty close. So you’ll end up zooming in as much as possible for every city asked.

When you have placed your marker on the map, however, while the actual answer (i.e. the city’s correct location) is being revealed, the map is immediately zoomed out and re-centered.

This lets you lose focus and makes it hard to compare your guess against the actual answer. In order to compare the two, you have to zoom in again and move to the area surrounding the two markers.

That’s because quizzity.js handles all this in Quizzity.prototype.userClick, where in the this.isGameActive() case, this.removeMarkers() is being called.

Instead, only the minimal amount of zooming out should be applied that makes both markers (the one for your guess and the one for the actual answer) show up on the map, if any at all. If the solution is in the section last focused on, there’s no need to zoom in or move the map at all.

Only after that, and after the user had the chance to view the solution and its distance, the map should be zoomed out and re-centered, as in the !this.isGameActive() case. So it could be something like this:

_.delay(_.bind(function() {
    this.resetMapView();
}, this), 2500);

Taiwan belongs to China

A very rewarding game that helps people learn geography. But Taiwan is not a country, it is part of China. Hope this can be fixed.
@sharkdp 🖖