USA States Challenge
Can you name all fifty states?
For Cogapp’s July hack day, we were given free rein to explore the Leventhal Map & Education Center’s extensive collection, and create a project based on the theme ‘Maps’. This was my first hack day at Cogapp so I was excited to get stuck in.
My mother grew up in Brockton, MA, and as a large portion of the collection is maps of the Massachusetts area, I was inspired to create an educational version of a game she would have us play every Thanksgiving — “Can you name all 50 US states?” (Spoiler: I can’t).
I thought that creating an interface where a user guesses a state name, and is then shown a random collection item relevant to that state, would be a fun way to explore the collection, allowing the user to find new items in a serendipitous way. In order to complete the project in the given time, I teamed up with Noor to lend a helping hand.
After setting up a simple user interface, the first step was to create an object containing all of the state names. This was needed so that the users input could be cross checked against it. Rather than attempting to name all of the states at this stage, I Googled it. This gave me the opportunity to revise all of the state names and try desperately to remember all 50, so I could impress with my ability to win my own game during the hack day demo (Spoiler: I didn’t).
Once I had all of the state names in an object, the next step was to check whether the users input was a valid state name. As an additional challenge, the state name needed to be spelt correctly (if you don’t think that’s a challenge, see this list of America’s most commonly misspelled state names). If the state name was incorrect, I wanted to show the user a notification letting them know, and if the state name was correct but they already submitted that answer, I would also show them a notification.
Now we get to the maps!
The LMEC digital collection has over 11,000 items, that can be queried using a JSON API and a IIIF API. If the state name is correct, the Digital Commonwealth’s JSON API is used to search for that state name in the LMEC collection portal and programmatically retrieve metadata about relevant collection items.
One of the collection items is then randomly selected, and the image metadata is injected into a IIIF API call so that the image can be displayed on the page for the user to see.
The map is only displayed until the user guesses another state name correctly. The correct answers are also added to the Correct Answers list as hyperlinks to the generated map, so that the user can view the maps again.
Each time a user plays the game, a different map will be generated for each correct answer, so the game can be played over and over again!
Have a go yourself here: https://cogapplabs.github.io/states-challenge/
You can see the code for the project here: https://github.com/CogappLabs/states-challenge
Over the years Cogapp has been privileged enough to work on projects including some of the world’s most beautiful maps. Read more about one of our favourite examples of this, our work with The British Library on the Magnificent Maps exhibition.
Get in touch to speak with us about your next digital project.
