Taylor Swift Trivia Pop Quiz

Take Quiz

Our next assignment in the course was to create our own pop quiz using an HTML template, altering the code to give the webpage a new look and feel, and adding five additional questions to the CSS file. I decided to create a trivia pop quiz of Taylor Swift facts. I began by coming up with 10 quiz questions I wanted to use, added them to the CSS file, and adjusted the code to ensure each question option had the correct answer. I played around with the colors before deciding to add an image of Taylor to the top of the webpage. After embedding the image, I adjusted the surrounding website colors to match the overall background and text box colors. To create a better sense of flow, I moved the item feedback below the user's answer selections and increased the spacing between text. Immediate feedback results are randomized across seven Taylor-specific encouragement prompts, such as "Olivia approves!" Once the user has completed the quiz, they receive a message that reads "Until next time, Swifite!", chosen to align with the quiz topic. Further edits included changing the font style, size, border options, text box size, cell spacing, and cell padding. This quiz was created as a fun, whimsical test of Taylor Swift knowledge, like fan-based quizzes on popular websites like BuzzFeed.

Animal Diets Drag-and-Drop Quiz

Take Quiz

With the above pop quiz under my belt, I approached the next assignment with more confidence, utilizing another HTML and CSS template as a kick-off point for a drag-and-drop quiz. I decided to base my quiz on 12 animals, with users assigning them to 4 different diet options. The design of this quiz was intended for grade-school kids, which is why I chose a fun, inviting color scheme and incorporated animal and food emojis to capture their attention. Users will select an animal from the list and drag and drop it into the diet category they believe is correct. Correct answers will turn the animal textbox into a darker shade of green, while incorrect answers will appear in red. Users may drag and drop the incorrect answers to other diet categories until they find the correct answer. Each diet box can contain only three animals. Once the quiz is complete, a message will appear saying "Well done, Scientist!" Aside from using bright colors, I adjusted the border thickness to stand out more, edited the container heights and widths to neatly fit all options, and updated the quiz instructions for easier kid-readability. This quiz is intended to serve as an educational means, keeping kids engaged while learning about science. I am proud of the finished product and want to create more fun, engaging quizzes in the future.