Who's That Petr?

Beginning screen: Instructions and music to be played
Guessing screen: photo is originally blurred before the user guesses
Guessing screen: photo is unblurred after the user guesses
End screen: displays the number of Petrs guessed

Inspiration

Petr stickers have been an effective way to increase school spirit for UCI. They may be small, but their influence on this school has been great. To honor these stickers, we wanted to make a game where UCI students and Petr lovers can put their Petr knowledge to the test.

What it does

There is a mute button, an un-mute button, and a play button to start the game. The main page describes how to play the game and has a picture of a Graduate Petr. Once the game begins, the pictures are blurred while there are four options to choose from to guess which Petr is shown. There also is a timer counting down 30 seconds and a scoreboard. The amount of Petrs you guessed correctly is shown at the end.

How we built it

First, there was an HTML file created to make the main page, specifically the text, picture, and buttons. There was also a CSS file called css_editing.css to edit the buttons, pictures, and text and make them more user-friendly. In order to compile the Petr images from Instagram, an API was used to create a json file that contained the image URL and the caption as a descriptor of the image. A separate json file was extrapolated to reduce the number of Petr images used and to assign names to each image. Then the json file was implemented into the wtp.gameplay.js file in order to display the image and answer choices.

Challenges we ran into

One of the challenges we faced was figuring out how to randomize the display of Petrs so that the user guesses a different Petr for each question. Given that we passed off the JavaScript file it was written in from one coder to another, it was initially difficult to understand how the inputs from the HTML were being used in the file. However, we managed to functionally create a game that provides randomized outputs.

Accomplishments that we're proud of

We were proud that we were able to work in a team and learn multiple languages and version control that we've never used before.

What we learned

We learned how to code in basic HTML, CSS, and JavaScript, use Git in which we now understand basic web development and how much effort and work by multiple people is required to create a website.