FONT QUIZ

Front-End Code

As a beginner with Javascript & jQuery, I wanted to become more familiar & comfortable with writing more code for sites. I created this simple multiple-choice quiz that allowed me to develop various functions to make my quiz site run effectively.

I also wanted to become more familiar with typography, so I made popular fonts and typefaces as the topic of this quiz. From Helvetica to Baskerville, and even the infamous Wingdings and Comic Sans, each level of this quiz would show a sample word in a preselected font and would give the user six font names to choose from.

After hardcoding a dataset of answers to be used when setting the correct answer for each level, my biggest challenge was transitioning into writing Javascript to make the site function smoothly from level to level. that randomly sets where the correct button will be, and the randomization of the other five choices in each level.

Some of the main functions I aimed to create were:

  • Randomly setting the correct answer into one of the six buttons
  • Randomly filling in the other five buttons with font names from my dataset
  • Highlighting the incorrect and/or correct button after the player's guess
  • Switching the sample-word image for every new level
  • Displaying the players score throughout and at the end of the quiz

After hours of writing, reorganizing, and refactoring the logic behind my code, I was able to meet all my goals for getting this site to run smoothly.


CHECK OUT "FONT QUIZ"

BACK TO TOP

HELLO

I'm Daniel Daquigan,
a designer living in San Francisco.

LEARN MORE >

CONNECT