Gosh, I think this page is one of my favorites! Though created this page last summer, brushing it up today I recalled all the pieces that I had to learn to pull the concept together. I used the Summer HTML image map creator to define the areas of the map image that I would work with. I do believe this page was also my introduction to the JS library JQuery and JQuery UI, as well as ImageMapster, a “JQuery plugin that lets you activate HTML image maps without using Flash”. It also took quite some time to settle on how best to make the many small .png images of the country names and style them on the page to facilitate the dragging.
Tim Jones put the icing on the cake for this page, spending several hours coding the details of dragging and dropping so many items, and finessing the color changes that signified a correct drop.
Recently, I added Sweet Alerts and a counter so that folks get a message and some feedback about their progress matching names with country locations on the map.
In June 2014, I was incredibly fortunate to travel to Rwanda to spend one week in the capital Kigali and also, to the small town of Gashora to visit a girl’s STEM academy to explore a potential partnership with AIS. Africa is amazing, awesome, and we are ignorant of her at our peril. So, what better place to start for continent-locked Americans than with a game to learn the location of African countries 🙂
Click on the image above and test your knowledge of African countries!