Trivia Quiz

A light blue background with black text. The header asks the question "What is the official name for the hashtag symbol?" and there are four multiple-choice answers stacked on top of each other: Number sign, Octothorpe, Pound, and Hash sign. The second answer, octothorpe, is selected and underlined. Below is a large black button asking "Is this your final answer?"

Purpose: Why This?

This quiz was a project for an apprenticeship program. Players are given ten questions per round, viewed one at a time. Questions can't repeat during a round, and only one answer is allowed for each question. Afterward, players can see their score and view the correct answers for each question. A JSON file was provided containing possible questions, the correct choice, and three incorrect options to use. I had one week to implement this project for consideration.

Built With:

React

CSS

JSON

See it in Action:

Demo Code Live Site

Highlights: My Favorite Bits

  • The second I read that this was a quiz, I knew I wanted the styling to be similar to Typeform's style. I love the way forms implemented by them look and how you interact with them! I wasn't able to make it an exact duplicate, but I kept the interface very clean and minimal and added in as much keyboard interaction as I could in the time I had.
  • I was given free rein on how to implement this, and I decided this was a perfect chance to try out using React! I'd built a small guided project with it before but nothing else, so this was a big challenge in such a short time. But I was determined and made it happen!
A light red background with black text. Centered in the screen is the question "In a game of bingo, what number is represented by the name two little ducks?" with four checkboxes, all unchecked, with labels underneath - 77, 20, 22, and 55. Below is a large black button asking "Is this your final answer?" with dark red text underneath saying "You've got to pick an answer first - no skipping ahead!"
A light green background with the header "You made it" centered in the top. Beneath it shows the users final score of 6 / 10, an encouraging statement, and then starts showing each question with the answer the user picked and the correct answer below.

Challenges: Struggles While Building

  • Not surprisingly, using React was also one of the biggest challenges I tackled. Adjusting to the syntax, how to scaffold my project, and dealing with data management was a huge challenge. I still have a journey ahead of me and lots of ways to improve. But I'm impressed with how much I learned and that I accomplished this in just a week!
  • I haven't dealt with full keyboard navigation much, so trying to implement that well was more difficult than expected. My screen kept losing focus or starting in the browser's menu bars, and I struggled with getting the visible focus on the checkboxes just right. In the end, I was able to get it mostly working, but it still has lots to improve on.

Takeaway: Lessons Learned

Overall, I'm pretty proud of this project. Given such a short time and choosing to challenge my brain using a new-to-me framework was A LOT. But I met the goal, and though I couldn't do everything exactly how I wanted to, I still got much closer than I might have expected not that long ago.

During the building process, the biggest takeaways for me were:

  • The biggest takeaway is that I can do hard things. I can push myself beyond my comfort on a timeline and find a way to make things happen.
  • This also gave me a chance to learn how to pull data into a React project, which I hadn't been exposed to yet.

A few things I'd like to improve in this project:

  • I want to find an API that provides trivia questions and use that instead of the provided file. That would give me a way to make this quiz less tied to the company it was intended for and give me more experience working with data management in React.
  • The one thing requested by the company that I ran out of time for was testing. I would love to go back and implement testing on this project. I think it's focused and small enough that it would be a great way to learn how to write tests for it.
  • Along these lines, I also want to go back through and clean up my code. There are some areas where the state can be handled in a cleaner manner. There are also areas that I can split up and make more reusable. I'd also like to look into more accessibility options with handling keyboard navigation and focus and improve how users interact with the quiz.
← Back to All Projects