If you follow SEO you’ve heard “Content is King” when it comes to generating traffic. Well, there is one thing better than content, and that is interactive online features, like wizards, calculators, and games. These features your readers will use over and over again, not just read once and be done with.
A recent interactive feature I added to TrailsNH.com is an online game. People love games, and hikers love maps, so a map based quiz is a natural fit for the site. The number for new hikers is growing real fast. Hopefully this Trail Map Quiz will help some of them learn how to read trail maps, maybe even love maps.
Login Screen Dashboard A multiple choice quiz page The leaderboard for a quiz
At the core of the game is two versions of my Mapbox Trail Map, the standard trail map I use on the site, and a version of the map with all of the place labels removed.
The Quiz Map has no labels The Answer Map shows them what they missed
Quiz Management System
I built an admin system for the quiz. The system is built using PHP and MySQL. The database is pretty simple. there are a few tables for the quiz data, and several Views that generate summary and reports.
Simple Schema:
Quiz <--> Quiz_Questions <--> Quiz_Results The quiz and answer maps are generated using the MapBox Static Image API and the two map styles I built previously. Twice I pass in the lat,lng for the point, a target overlay, and a logo overlay. Once for each map style. These are then cached to provide fast access to the quiz. The filenames are obfuscated to prevent a curious hiker from combing through the cache to get the answers.
The system uses Hybridauth 3 to authenticate the user for tracking results. So far the users can authenticate using Facebook or Google. I’d really like to find another login authority that does not track user so much. I started to add “Reddit” for users who want to remain “off the radar” but Reddit frowns on developers that use their OAuth API solely for authentication purposes.
The template is standard Bootstrap 4 with a few teaks. I really like Bootstrap 4. I will definitely use it again. To present the cached map images I use jQuery.PanZoom and FancyApps FancyBox 3. I’m a big fan of these libraries as well.
