DEV Community

Q1ngQode
Q1ngQode

Posted on

My First Quiz App

...And my first blog post, too!

My name is Briana and I am currently a software engineering grad student and bootcamp attendee. Over the last few months, I have been hit with many hurdles regarding my personal life, which heavily impacted my life as a student. However, after many trials, a multi-day no-sleep binge, and good ole' coffee, I HAVE OFFICIALLY CREATED AN APP/ PROJECT!

Now although the gist of the project was not all that bad, it was definitely a struggle for me on multiple levels. Primarily it is that my current employer bands git and all things remotely open-source (but not Amazon? Give me a break!)
So although I can sometimes view certain materials, working on them during my downtime is a an absolute "no". ALso, because us lower level employees have been put in a position to wear "many hats", everything that I seem to finally learn or pick up on once I finally get home seemingly goes right out the window, further contributing to my struggles.

This is the inspiration behind why I chose to build my first project as a quiz app- specifically geared towards computer science trivia. It gives myself and others like me a way to quiz ourselves and stay up on technical insights, history, and terminology without it being draining or uninteresting. Here's a quick breakdown of how it works:

The entire quiz is merged from a multi-page HTML to a SPA HTML, so the first page goes right to the quiz;

Image description

Questions are generated using Open Trivia DB API via a JSON file. When you answer correctly, the selected answer turns 'GREEN', and the displayed score goes up;

Image description

Image description

Otherwise, the answer turns 'RED' and no points are earned. However, the progress meter still loads until it's full, which triggers the app to refresh and load a new quiz.

I did face a few challenges building the app aside from trying to merge multiple HTML files into one. One issue in particular was that although I was able to successfully build an animated spinning loader, it only appears sporadically. It is supposed to appear every time the questions or the overall quiz needs to reload, but it does not appear consistently.

Image description

I am assuming it's because my internet speed at home is too fast, but I still would like it to work regardless of user internet speed. This is also a similar issue with my 'New Quiz' button call, which also works sporadically. Little bugs like this are ones that always get me stuck and distracted from an overall task, which are skills that I am sure this app project and other projects moving forward will help me to hone in on, practice, and become better in real time!

Top comments (0)