Frontend Mentor - Frontend quiz app solution

This is a solution to the Frontend quiz app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Frontend Mentor - Frontend quiz app solution
  • Table of contents
  • Overview
    • The challenge
  • My process
    • Built with
    • What I learned
    • Continued development

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

• Select a quiz subject
• Select a single answer from each question from a choice of four
• See an error message when trying to submit an answer without making a selection
• See if they have made a correct or incorrect choice when they submit an answer
• Move on to the next question after seeing the question result
• See a completed state with the score after the final question
• Play again to choose another subject
• View the optimal layout for the interface depending on their device’s screen size
• See hover and focus states for all interactive elements on the page
• Navigate the entire app only using their keyboard
• Bonus: Change the app’s theme between light and dark

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

This project was a huge challenge for me, and not for quite the right reasons. I learned a lot about proper planning for a project, and considering the architecture more thoughtfully ahead of time. This project really shouldn’t have been very complicated, and yet my lack of planning and forethought made it quite the challenge.

In my defense, I tried to create a more robust system that is dynamically expandable. You should be able to add more quizzes and questions to each quiz, and the code should take care of the rest in generating the questions and everything for you.

Continued development

I feel as though both my CSS and JavaScript are overly complicated for this project. I ended up throwing in all kinds of things into my CSS to account for edge cases, while I probably could have simplified the logic for a lot of this had I been more thoughtful.

Same thing with my JavaScript. In fact, the final product is much simpler than what I had midway through the project. I did quite a bit of refactoring that slimmed down the logic a bit here.

Overall, in the future, I will take more careful consideration of my projects, and probably write out an outline or draft in pseudo code to attempt to make things easier.