Zot Racer

Home Screen

Inspiration

We were inspired by nostalgic computer games. During midterm/final season, we noticed how we are all less motivated to study. Because of this, we wanted to create a fun game inspired by Type Racer to promote studying and productivity among UCI students.

What it does

Our project allows students to select a set of practice questions to review. By clicking the "Play" button, you, Peter the Anteater, are put head to head with a Zotbot, controlled by the computer. Answering the questions below correctly will move your avatar forward toward the finish line. This game motivates students to study with some friendly competition against the computer.

How we built it

We built Zot Racer with JavaScript, CSS, and HTML as well as calling the PeterPortal API to provide descriptions of the classes. We have several pages that run the game with various practice sets. The homepage is the control center that not only launches the game as well as provides users with step-by-step instructions on how to use our product.

Challenges we ran into

Our main challenge was dealing with the moving ZotBot and Anteater. To start, we were struggling to get the two images to properly move across the screen. At first, the images would only move once and then stop or zoom across the screen too fast. We had to figure out how to convert the pixel string into an integer for us to add and then convert it back into a string. Another issue was that all of us have different devices, so the image would reach the finish line on one person’s screen but not another’s. We had to figure out how to use window functions to accommodate different screen sizes.

Accomplishments that we're proud of

None of us were very familiar with Javascript, HTML, and CSS, but we decided to use this as a learning experience and create our project using these languages. In the end, we were able to successfully create our website. We tried a lot of new things, such as coding images to move and changing the cursor image.

What we learned

We learned a lot about how to implement Javascript, HTML, and CSS together to create a cohesive project. We learned how to divide our tasks to focus on specific aspects of the project, while also working together to make everything align.

What's next for Zot Racer

We plan to allow users to be able to create their own sets of flashcards for their different classes as well as add more pre-set flashcards for more classes outside of the I&C Sci 30 series. Zot Racer will also have the capabilities to play against other players in real-time while also keeping a log of your learning history and what questions you struggled with most.