From e699f2d9eb81b581087e0188b64a1c0336e73186 Mon Sep 17 00:00:00 2001 From: Estefania Cassingena Navone <85124911+estefaniacn@users.noreply.github.com> Date: Wed, 5 Feb 2025 12:32:43 -0400 Subject: [PATCH] refactor(curriculum): CSS Typography Quiz (#58507) --- .../66ed9010f45ce3ece4053eb8.md | 134 +++++++++--------- 1 file changed, 67 insertions(+), 67 deletions(-) diff --git a/curriculum/challenges/english/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md b/curriculum/challenges/english/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md index be96efaaeeb..296452edb8f 100644 --- a/curriculum/challenges/english/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md +++ b/curriculum/challenges/english/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md @@ -17,7 +17,7 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo #### --text-- -Which of the following is the correct way to write a `@font-face` rule in CSS? +Which of the following is the correct way to write an `@font-face` rule in CSS? #### --distractors-- @@ -39,73 +39,73 @@ Which of the following is the correct way to write a `@font-face` rule in CSS? #### --text-- -What is the purpose of the offset values in the `text-shadow` property, and how do they affect the shadow's appearance? +How do the offset values in the CSS `text-shadow` property affect the shadow's appearance? #### --distractors-- -They adjust the text's size and weight. +They adjust the weight and color of the shadow. --- -They change the shadow color. +They change the color of the shadow. --- -They remove text from the shadow's path. +They remove the text from the path of the shadow. #### --answer-- -They control the horizontal and vertical position of the shadow relative to the text. +They control the position of the shadow relative to the text. ### --question-- #### --text-- -What does "kerning" mean in typography? +What does kerning refer to in the context of typography? #### --distractors-- -The space between lines of text. +How the space between lines of text is adjusted to improve readability and aesthetics. --- -The overall spacing of a text block. +How the overall spacing of a text block is adjusted for visual purposes. --- -The size of the font. +How the font size is adjusted for accessibility purposes. #### --answer-- -The space between individual letters. +How the space between specific pairs of characters is adjusted to improve readability and aesthetics. ### --question-- #### --text-- -What's the most common way to add Google Fonts to a website? +What is a font family in the context of typography? #### --distractors-- -Use the `` tag in the HTML file. +A specific font style used for headings and body text. --- -Use the `@import` rule in JavaScript. +A collection of text options for formatting text. --- -Embed the font within an image. +A set of visually consistent colors used for text. #### --answer-- -Use the `` tag in the HTML file. +A group of fonts that share similar design characteristics. ### --question-- #### --text-- -How do you import the Roboto font into your CSS using the `@import` rule? +How do you import the `Roboto` font from Google Fonts into your CSS using the `@import` rule? #### --distractors-- @@ -127,11 +127,11 @@ How do you import the Roboto font into your CSS using the `@import` rule? #### --text-- -Which one of the following is a web-safe font? +Which one of the following is a web safe font? #### --distractors-- -Comic Sans MS. +Comic Sans MS --- @@ -143,13 +143,13 @@ Impact #### --answer-- -Times New Roman. +Times New Roman ### --question-- #### --text-- -What does the `@font-face` rule do in CSS? +What is the purpose of the `@font-face` rule in CSS? #### --distractors-- @@ -171,23 +171,23 @@ It allows you to use custom fonts by importing them. #### --text-- -Which service offers a large selection of free fonts that can be easily integrated directly into websites? +What is the baseline in the context of typography? #### --distractors-- -Typekit +The parts of lowercase letters that extend above the `x-height`. --- -Adobe Fonts. +The average height of lowercase letters, excluding ascenders and descenders. --- -Font Universe. +The height of uppercase letters, measured from the baseline to the top. #### --answer-- -Google Fonts. +The imaginary line on which most characters rest. ### --question-- @@ -197,63 +197,63 @@ Why is it important to include multiple font options in the `font-family` proper #### --distractors-- -It reduces page load times. +It reduces page load time by optimizing the process of loading fonts. --- -It prevents browser compatibility issues. +It prevents browser compatibility issues by providing multiple options. --- -It gives the page more visual variety. +It makes the web page more engaging and interactive. #### --answer-- -It ensures a consistent experience in case the custom font doesn't load. +It ensures a consistent user experience in case the custom font doesn't load. ### --question-- #### --text-- -What is the purpose of the `text-shadow` property in CSS, and how does it enhance text? +What is the purpose of the `text-shadow` property in CSS? #### --distractors-- -Changes the text color. +It changes the color and font family of the text. --- -Adds a background color to text. +It adds a decorative border and background color to the text. --- -Makes text bold. +It makes the text bold and adjusts the space between the characters. #### --answer-- -Adds a shadow effect to text, making it stand out or appear 3D. +It creates a visual effect by adding a blurred or offset duplicate of the text. ### --question-- #### --text-- -What CSS property is used to set the font family for an element, and how should fallback fonts be included? +What is leading in the context of Typography? #### --distractors-- -`font-size` +A group of fonts that share a common design. --- -`font-weight` +How space is adjusted between specific pairs of characters in a block of text. --- -`text-align` +How space is adjusted between all characters in a block of text. #### --answer-- -`font-family`, with multiple fonts listed to ensure compatibility across devices. +The vertical space between lines of text. ### --question-- @@ -271,7 +271,7 @@ It ensures consistency across different devices. --- -It allows decorative fonts to be used effectively. +It ensures that all text elements are the same size. #### --answer-- @@ -281,7 +281,7 @@ It helps organize content and guide users through the information. #### --text-- -Which of the following is **not** a common font property? +Which of the following is NOT a CSS property related to fonts? #### --distractors-- @@ -293,7 +293,7 @@ Which of the following is **not** a common font property? --- -`font-style` +`font-family` #### --answer-- @@ -325,67 +325,67 @@ Which of the following is a correct example of the `text-shadow` property in CSS #### --text-- -In the `text-shadow` property, how do the horizontal and vertical offsets affect the shadow's appearance? +What are web safe fonts? #### --distractors-- -They control the shadow's color. +Fonts that provide advanced typographic features. --- -They define the shadow's blur radius. +Fonts that automatically adjust to the user's preferred settings. --- -They adjust the opacity of the shadow. +Fonts that are specifically designed for print media. #### --answer-- -They determine the position of the shadow relative to the text on the x and y axes. +Fonts that are very likely to be available on most devices and browsers. ### --question-- #### --text-- -For body text, why is a sans-serif font generally considered easier to read on screens compared to a serif font? +Why are sans-serif fonts generally considered easier to read on screens than serif fonts? #### --distractors-- -Serif fonts are more decorative. +Because they have small lines at the end of characters. --- -Sans-serif fonts are thicker. +Because they are primarily used for decorative purposes. --- -Sans-serif fonts use fewer colors. +Because they were specifically designed for print media. #### --answer-- -Sans-serif fonts are typically simpler and more legible at smaller sizes on screens. +Because they have simple and clean lines. ### --question-- #### --text-- -How do you list multiple font families in the `font-family` property? +How do you specify multiple font families in the `font-family` property in CSS? #### --distractors-- -Separate them with spaces, and list the preferred font first. +By separating them with spaces and listing the preferred font last. --- -Enclose them in parentheses. +By separating them with commas and listing the preferred font last. --- -Enclose them in curly braces. +By enclosing them in curly braces and listing the preferred font first. #### --answer-- -Separate them with commas, and list the preferred font first. +By separating them with commas and listing the preferred font first. ### --question-- @@ -417,39 +417,39 @@ Which of the following is a good practice when using fonts in web design? #### --distractors-- -Use only one font family throughout the website. +Always using at least eight different font families throughout the website. --- -Always use decorative fonts for both headings and body text. +Using decorative fonts for both headings and body text. --- -Avoid using fallback fonts at all costs. +Avoiding fallback fonts whenever possible. #### --answer-- -Combine no more than two or three font families for balance. +Using no more than two or three font families to ensure visual consistency. ### --question-- #### --text-- -What is the purpose of the `line-height` property in CSS? +What is tracking in the context of typography? #### --distractors-- -It sets the width of the text. +The parts of lowercase letters that extend below the baseline. --- -It specifies the text alignment. +The average height of lowercase letters, excluding ascenders and descenders. --- -It changes the text color. +How space is adjusted between all lines of text in a block of text. #### --answer-- -It controls the amount of space between lines of text. +How space is adjusted between all characters in a block of text.