Over the past couple of days I’ve been working on an online quiz that tests your ability to recognise birds by showing pictures or playing recordings. I created it with TypeScript and it uses the iNaturalist API to get the images and sound files.
You can try it out on GitHub pages here, and the code is all here.
At the start the user is presented with a list of birds, and they select which species they want to be tested on:
I created a Python script to scrape the Wikipedia page “List of birds of Wales” and output the species in JSON format. The TypeScript program then iterates through each bird and adds checkbox and label elements to the page for each one. I’m especially pleased with the ‘select all’ checkboxes next to each heading that I managed to get working!
Once the user has chosen their species, the format (pictures or sound) and pressed ‘start’ the quiz begins. It makes a request to the iNaturalist API to get the URL of images or sounds and then chooses a random one to display/play to the user:
A score bar shows the user’s score so far. After they enter their answer, the screen changes colour and the correct answer is shown below.
The JSON species list includes alternative names, so for example both “european goldfinch” and “goldfinch” would be accepted as the same species.
Creating the quiz has given me a chance to learn about the JavaScript async/await syntax and closures, and to practice web development. It’s also been fun!
Brychan Thomas' projects 