Skip to content

Whosthatbird-quiz is a simple web-based quiz game that tests your knowledge of bird species by playing the song or call of a bird and asking you to guess the species name. It was developed using Flask and deployed on Render.com, with a design inspired by the "Who's That Pokemon?" meme and styled with Bootstrap and custom CSS.

Notifications You must be signed in to change notification settings

vaupunkt/whosthatbird-quiz

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Who's that Bird?

Description:

Introduction

Welcome to Whosthatbird-quiz! This project is a simple quiz game that tests your knowledge of bird species by playing you the song or call of a bird and asking you to guess the species name. It was developed as a final project for Harvard's CS50 class 2023 and is a fun way to learn about different bird species and challenge yourself.

image

Design

The design of the quiz was inspired by the well-known meme "Who's That Pokemon?" from the popular animated TV series. The design choice was made to make the quiz more engaging and familiar to a wider audience. When you click on the "Hint" button, a map will be displayed using Leaflet with the coordinates of the location where the recording was made. This can be helpful in narrowing down your guess for the bird's species.

Development

Flask

This project was developed using Flask, a Python web framework, and deployed on Render.com. The main page is rendered using Flask, with different "ways" or routes for the different pages of the quiz. The HTML pages are index.html, result.html, start.html, and quiz.html.

The first route home()...

...loads the home page of the application, which is a simple HTML template.

The second function options()...

...defines a query string that is used to filter the bird recordings retrieved from the Xeno-Canto API. The function returns the query string as a global variable.

The third route quiz()...

...generates a quiz game page. The function calls getData() function with the options() function result to retrieve 4 different bird species data in a list, selects one of them as the correct answer and creates a map with a marker of the location of the correct bird. It then passes the details of the correct bird, the names of the four birds in a random order, and the map as arguments to the quiz.html template.

The fourth route check_answer()...

...checks if the selected answer is correct or not and returns a result message accordingly.

The getData() function...

...retrieves the bird recordings from the Xeno-Canto API using the query generated by the options() function. It then selects four different bird species randomly and checks if the species and name have not already been used for the previous birds. It selects a random bird from the remaining list, gets the details of that bird, and adds it to the birds list. The function continues to add details for the remaining three birds. The function returns when all the bird details have been added to the birds list. If the function does not find unique species and names, it recursively calls itself with a new random page number.

Styling with CSS

The quiz is styled using Bootstrap and custom CSS, which gives it a professional and modern look. The hint feature was added using Leaflet, an open-source JavaScript library for interactive maps. The coordinates of the sound file were obtained from the Xeno-Canto API and used to create the map.

Acknowledgements

I would like to thank Xeno-Canto.org for providing the bird recordings and species data used in this project. I would also like to express our gratitude to Harvard's CS50 class 2023 for providing us with the opportunity to work on this project.

About

Whosthatbird-quiz is a simple web-based quiz game that tests your knowledge of bird species by playing the song or call of a bird and asking you to guess the species name. It was developed using Flask and deployed on Render.com, with a design inspired by the "Who's That Pokemon?" meme and styled with Bootstrap and custom CSS.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published