diff --git a/curriculum/challenges/english/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md b/curriculum/challenges/english/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md index 18a7d6315d1..cafa970cf82 100644 --- a/curriculum/challenges/english/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md +++ b/curriculum/challenges/english/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md @@ -17,7 +17,7 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo #### --text-- -What happens when there is too much content to fit in an element box? +What term is used in CSS to describe when an element's content exceeds the size of its container? #### --distractors-- @@ -39,23 +39,23 @@ Overflow #### --text-- -What is the default behavior of CSS when there is overflow? +What is the default behavior of CSS when content overflows an element? #### --distractors-- -Content is hidden +Hiding the content. --- -Content is clipped +Clipping the content. --- -Content is resized +Resizing the content. #### --answer-- -Content is visible +Keeping the content visible. ### --question-- @@ -65,63 +65,63 @@ Why does CSS typically avoid hiding content when there is overflow? #### --distractors-- -To enhance page design by hiding irrelevant content +To maintain the original layout and design. --- -To save memory and load pages faster +To prevent performance issues in the browser. --- -To automatically fix broken layout issues +To allow for better search engine optimization. #### --answer-- -To prevent data loss and make issues noticeable +To ensure all content is accessible to users. ### --question-- #### --text-- -How can you handle overflow in CSS to hide content or add scrollbars? +How can you handle vertical overflow in CSS by hiding content or displaying scrollbars? #### --distractors-- -Use `overflow: visible` to hide content and `overflow: auto` to always display scrollbars +Use `overflow-y: visible` to hide content and `overflow-y: auto` to always display scrollbars. --- -Use `overflow: collapse` to hide content and `overflow: expand` to display scrollbars +Use `overflow-y: collapse` to hide content and `overflow-y: expand` to display scrollbars. --- -Use `overflow: none` to hide content and `overflow: show` to display scrollbars +Use `overflow-y: none` to hide content and `overflow-y: show` to display scrollbars. #### --answer-- -Use `overflow: hidden` to hide content and `overflow: scroll` to always display scrollbars +Use `overflow-y: hidden` to hide content and `overflow-y: scroll` to always display scrollbars. ### --question-- #### --text-- -How can you specify different scrolling behaviors for the x-axis and y-axis in CSS? +How can you specify different horizontal and vertical scrolling behaviors in CSS? #### --distractors-- -By using `scroll-x` and `scroll-y` properties +By using the `scroll-x` and `scroll-y` properties. --- -By using `overflow-x` and `overflow-y` separately in every case +By specifying the same value for `overflow-x` and `overflow-y`. --- -By passing two values to the `overflow` property, where the first applies to `overflow-y` and the second to `overflow-x` +By specifying two values for the `overflow` property, where the first value applies to `overflow-y` and the second value to `overflow-x`. #### --answer-- -By passing two values to the `overflow` property, where the first applies to `overflow-x` and the second to `overflow-y` +By specifying two values for the `overflow` property, where the first value applies to `overflow-x` and the second value to `overflow-y`. ### --question-- @@ -131,47 +131,47 @@ What does the `transform` CSS property allow you to do? #### --distractors-- -Change the color and font style of an element +Change the color and font style of an element. --- -Adjust the margin and padding of an element +Adjust the margin and padding of an element. --- -Modify the visibility and display of an element +Modify the visibility and display of an element. #### --answer-- -Rotate, scale, skew, or translate an element +Rotate, scale, skew, and translate an element. ### --question-- #### --text-- -What does the `transform-box: fill-box` property do in an animation that rotates an element? +How does the `transform: translate(15px, 200px)` property modify an element? #### --distractors-- -It resizes the element to fit the canvas during the transformation +It moves the element 15 pixels to the left and 200 pixels down from its original position. --- -It changes the background of the element during transformation +It rotates the element 15 degrees in a clockwise direction. --- -It sets the transform origin to the top-left corner of the element +It moves the element 15 pixels to the right and 200 pixels up from its original position. #### --answer-- -It sets the transform origin to the center of the element's bounding box, allowing it to spin in place +It moves the element 15 pixels to the right and 200 pixels down from its original position. ### --question-- #### --text-- -What is the purpose of CSS's `overflow-x` and `overflow-y` properties? +What is the purpose of the CSS properties `overflow-x` and `overflow-y`? #### --distractors-- @@ -193,45 +193,45 @@ They control the horizontal and vertical overflow of an element's content. #### --text-- -How does margin affect the size of an element in CSS? +What is the purpose of the `margin` property in CSS? #### --distractors-- -Margin increases the actual size of the element's box +It defines the space between the content and the border of an element. --- -Margin has no effect on the element's size or position +It defines the space between the border and the padding of an element. --- -Margin decreases the total area the element occupies on the page +It defines the width and height of an element. #### --answer-- -Margin affects the total area an element occupies but is not part of the actual size of the box +It defines the space around an element, outside of its border. ### --question-- #### --text-- -What does the content area of an element in CSS represent? +What does the content area of an element represent in CSS? #### --distractors-- -It defines the margins and padding around the element +It defines the margins and padding around the element. --- -It specifies the border thickness of the element +It defines the thickness of the element's border. --- -It controls the visibility of the element on the page +It controls the visibility of the element on the page. #### --answer-- -It contains the "real" content of the element, such as text, images, or videos +It contains the actual content of the element, such as text, images, and videos. ### --question-- @@ -241,19 +241,19 @@ What is the difference between `content-box` and `border-box` in CSS? #### --distractors-- -`content-box` includes padding and border, while `border-box` includes only content dimensions +`content-box` includes padding and border, while `border-box` includes only content dimensions. --- -Both `content-box` and `border-box` include only the border dimensions +Both `content-box` and `border-box` include only the border dimensions. --- -`content-box` is used for 2D elements, while `border-box` is used for 3D elements +`content-box` is used for 2D elements, while `border-box` is used for 3D elements. #### --answer-- -`content-box` includes only the content dimensions, while `border-box` includes content, padding, and border in its dimensions +`content-box` includes only content dimensions, while `border-box` includes content, padding, and border in the dimensions. ### --question-- @@ -263,47 +263,47 @@ What is the purpose of CSS resets? #### --distractors-- -To apply default styles to all elements for faster loading +To apply default styles to all elements for faster loading. --- -To minimize the size of CSS files by removing unused styles +To minimize the size of CSS files by removing unused styles. --- -To optimize images and fonts for better performance +To optimize images and fonts for better performance. #### --answer-- -To remove default browser styling and create a consistent baseline for styling across different browsers +To remove default browser styling and ensure consistent styling across browsers. ### --question-- #### --text-- -What are the common types of CSS resets? +Which of the following is a common example of a CSS reset? #### --distractors-- -Bootstrap Reset, Tailwind Reset, and Foundation Reset +Bootstrap.css --- -Simple Reset, Comprehensive Reset, and Adaptive Reset +Reset.css --- -Minimal Reset, Advanced Reset, and Legacy Reset +Restore.css #### --answer-- -Normalize.css, Eric Meyer's Reset, and HTML5 Reset +Normalize.css ### --question-- #### --text-- -Which CSS property is used to apply transformations such as rotation, scaling, and translation to elements? +Which CSS property is used to apply changes such as rotation, scaling, and translation to elements? #### --distractors-- @@ -325,131 +325,131 @@ Which CSS property is used to apply transformations such as rotation, scaling, a #### --text-- -How is the total width of an element calculated in CSS? +How is the total width of an element calculated in CSS when using the `border-box` value for the `box-sizing` property? #### --distractors-- -Total width = width + margin + padding + border +Total Width = Content Width + Border + Margin --- -Total width = width + margin + padding +Total Width = Content Width + Padding + Border + Margin --- -Total width = width + margin + border +Total Width = Content Width #### --answer-- -Total width = width + left padding + right padding + left border + right border +Total Width = Content Width + Padding + Border ### --question-- #### --text-- -What does the filter property in CSS do? +What is the purpose of the `filter` property in CSS? #### --distractors-- -It changes the layout of the element on the page +Changing the scale and rotation of an element. --- -It changes the background color and texture of an element +Changing the background color and texture of an element. --- -It alters the size and position of an element +Altering the size and position of an element. #### --answer-- -It applies visual effects like blur and saturation to an element +Modifying the visual appearance of an element by using various graphical effects. ### --question-- #### --text-- -How is the `filter` property specified in CSS? +What does the CSS property `filter: grayscale(50%);` do to an element? #### --distractors-- -As only a single function, where percentage values must be used +It increases the brightness of the element by 50%. --- -As `block` or `inline`, with values expressed in pixels +It decreases the contrast of the element by 50%. --- -As `none` or multiple functions, but only percentage values are accepted +It applies a sepia effect to the element. #### --answer-- -As `none` or one or more functions, where percentage values can also be expressed as decimals +It applies a 50% grayscale effect to the element. ### --question-- #### --text-- -What does the `contrast()` function in CSS do? +What is the purpose of the `contrast()` function in CSS? #### --distractors-- -Adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white +It adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white. --- -Changes the color balance of the image, where `0%` desaturates it and `100%` oversaturates it +It adjusts the contrast of the image, where `100%` makes it grey, `0%` has no effect, and values over `100%` increase contrast. --- -Alters the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque +It adjusts the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque. #### --answer-- -Adjusts the contrast of the input image, where `0%` makes it grey, `100%` has no effect, and values over 100% increase contrast +It adjusts the contrast of the image, where `0%` makes it grey, `100%` has no effect, and values over `100%` increase contrast. ### --question-- #### --text-- -What does the `hue-rotate()` function in CSS do? +What is the purpose of the `hue-rotate()` function in CSS? #### --distractors-- -It changes the brightness of the input image based on degrees +It changes the brightness of an image. --- -It rotates an element's size and position in the document +It rotates an image clockwise by a certain number of degrees. --- -It adjusts the saturation and contrast of the input image +It adjusts the saturation and contrast of an image. #### --answer-- -It applies a hue rotation, where the `` value defines the degrees around the hue color circle +It applies a color shift, where the `angle` value defines the number of degrees to rotate around the color circle. ### --question-- #### --text-- -What happens when two animated filters have different function list lengths in CSS? +What is margin collapsing in CSS? #### --distractors-- -The shorter list's filters override the longer list's filters +When the margin of an element is set to a negative number and this causes issues in the layout. --- -The filters are discarded and no animation is applied +When the margin of an element is decreased by the padding and this changes the element's dimensions. --- -Only the first filter function in each list is animated +When the margin of an element is ignored by the browser, so it's not visible. #### --answer-- -The longer list's missing equivalent filter functions are added to the shorter list using their initial values +When the vertical margins of adjacent elements overlap, so they are combined into a single margin.