PondDipping is a short interactive quiz which was built for desktop using JavaScript, HTML, CSS and utilizes DOM-manipulation and the library p5.js.
During the game a question and a corresponding image are displayed on the right side. On the left side, on a p5-canvas, "bubbles" with 3 possible answers are displayed. The aim of the game is to "pop" the bubble with the correct answer by clicking on it. Each correct answer scores one point. Further, if the correct answer is clicked, the bubbles with the wrong answers pop automatically and the next question is triggered.
If a bubble with a wrong answer is "popped", a minus-point is added to the score and the player has the chance to keep "popping the bubbles" until the correct answer is found.
The game is over if a bubble reaches the top of the screen or when all questions have been answered.
The game has 3 different levels. The speed of the bubbles increases with each level. In addition, the difficulty of the questions increases with each level.
PondDipping was built as a project for the first module ("Frontend") of the Ironhack Web-Development Bootcamp. The theme of the game, "underwater creatures at the Attenborough Nature Reserve, UK" was picked due to my previous (and ongoing work) in science communication. The aim was to bridge between the gap between my science-portfolio and my (growing) web-dev-portfolio.
With PondDipping, I am utilzing materials from a previous collaboration with Attenborough Nature Reserve. I am trying to show an option for reserves or institutes to use web-based projects (e.g. which could be integrated in their website) in order to engage and educate the public on topics of their choosing.
As a next step, I am looking at rebuilding PondDipping utilizing Objects instead of merely Arrays. The aim is to add the functionality of randomizing the order of the questions of each level.