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 80af1166b6a..3e6bba19d78 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,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz. #### --text-- -Placeholder question +What happens when there is too much content to fit in an element box? #### --distractors-- -Placeholder distractor 1 +Underflow --- -Placeholder distractor 2 +Compression --- -Placeholder distractor 3 +Padding #### --answer-- -Placeholder answer +Overflow ### --question-- #### --text-- -Placeholder question +What is the default behavior of CSS when there is overflow? #### --distractors-- -Placeholder distractor 1 +Content is hidden --- -Placeholder distractor 2 +Content is clipped --- -Placeholder distractor 3 +Content is resized #### --answer-- -Placeholder answer +Content is visible ### --question-- #### --text-- -Placeholder question +Why does CSS typically avoid hiding content when there is overflow? #### --distractors-- -Placeholder distractor 1 +To enhance page design by hiding irrelevant content --- -Placeholder distractor 2 +To save memory and load pages faster --- -Placeholder distractor 3 +To automatically fix broken layout issues #### --answer-- -Placeholder answer +To prevent data loss and make issues noticeable ### --question-- #### --text-- -Placeholder question +How can you handle overflow in CSS to hide content or add scrollbars? #### --distractors-- -Placeholder distractor 1 +Use `overflow: visible` to hide content and `overflow: auto` to always display scrollbars --- -Placeholder distractor 2 +Use `overflow: collapse` to hide content and `overflow: expand` to display scrollbars --- -Placeholder distractor 3 +Use `overflow: none` to hide content and `overflow: show` to display scrollbars #### --answer-- -Placeholder answer +Use `overflow: hidden` to hide content and `overflow: scroll` to always display scrollbars ### --question-- #### --text-- -Placeholder question +How can you specify different scrolling behaviors for the x-axis and y-axis in CSS? #### --distractors-- -Placeholder distractor 1 +By using `scroll-x` and `scroll-y` properties --- -Placeholder distractor 2 +By using `overflow-x` and `overflow-y` separately in every case --- -Placeholder distractor 3 +By passing two values to the `overflow` property, where the first applies to `overflow-y` and the second to `overflow-x` #### --answer-- -Placeholder answer +By passing two values to the `overflow` property, where the first applies to `overflow-x` and the second to `overflow-y` ### --question-- #### --text-- -Placeholder question +What does the `transform` CSS property allow you to do? #### --distractors-- -Placeholder distractor 1 +Change the color and font style of an element --- -Placeholder distractor 2 +Adjust the margin and padding of an element --- -Placeholder distractor 3 +Modify the visibility and display of an element #### --answer-- -Placeholder answer +Rotate, scale, skew, or translate an element ### --question-- #### --text-- -Placeholder question +What does the `transform-box: fill-box` property do in an animation that rotates an element? #### --distractors-- -Placeholder distractor 1 +It resizes the element to fit the canvas during the transformation --- -Placeholder distractor 2 +It changes the background of the element during transformation --- -Placeholder distractor 3 +It sets the transform origin to the top-left corner of the element #### --answer-- -Placeholder answer +It sets the transform origin to the center of the element's bounding box, allowing it to spin in place ### --question-- #### --text-- -Placeholder question +What is the purpose of the `transform-origin` property in CSS? #### --distractors-- -Placeholder distractor 1 +It controls the animation speed of transformed elements --- -Placeholder distractor 2 +It defines the display type of transformed elements --- -Placeholder distractor 3 +It sets the background of transformed elements #### --answer-- -Placeholder answer +It specifies the point around which a transformation is applied to an element ### --question-- #### --text-- -Placeholder question +How does margin affect the size of an element in CSS? #### --distractors-- -Placeholder distractor 1 +Margin increases the actual size of the element's box --- -Placeholder distractor 2 +Margin has no effect on the element's size or position --- -Placeholder distractor 3 +Margin decreases the total area the element occupies on the page #### --answer-- -Placeholder answer +Margin affects the total area an element occupies but is not part of the actual size of the box ### --question-- #### --text-- -Placeholder question +What does the content area of an element in CSS represent? #### --distractors-- -Placeholder distractor 1 +It defines the margins and padding around the element --- -Placeholder distractor 2 +It specifies the border thickness of the element --- -Placeholder distractor 3 +It controls the visibility of the element on the page #### --answer-- -Placeholder answer +It contains the "real" content of the element, such as text, images, or videos ### --question-- #### --text-- -Placeholder question +What is the difference between `content-box` and `border-box` in CSS? #### --distractors-- -Placeholder distractor 1 +`content-box` includes padding and border, while `border-box` includes only content dimensions --- -Placeholder distractor 2 +Both `content-box` and `border-box` include only the border dimensions --- -Placeholder distractor 3 +`content-box` is used for 2D elements, while `border-box` is used for 3D elements #### --answer-- -Placeholder answer +`content-box` includes only the content dimensions, while `border-box` includes content, padding, and border in its dimensions ### --question-- #### --text-- -Placeholder question +What is the purpose of CSS resets? #### --distractors-- -Placeholder distractor 1 +To apply default styles to all elements for faster loading --- -Placeholder distractor 2 +To minimize the size of CSS files by removing unused styles --- -Placeholder distractor 3 +To optimize images and fonts for better performance #### --answer-- -Placeholder answer +To remove default browser styling and create a consistent baseline for styling across different browsers ### --question-- #### --text-- -Placeholder question +What are the common types of CSS resets? #### --distractors-- -Placeholder distractor 1 +Bootstrap Reset, Tailwind Reset, and Foundation Reset --- -Placeholder distractor 2 +Simple Reset, Comprehensive Reset, and Adaptive Reset --- -Placeholder distractor 3 +Minimal Reset, Advanced Reset, and Legacy Reset #### --answer-- -Placeholder answer +Normalize.css, Eric Meyer's Reset, and HTML5 Reset ### --question-- #### --text-- -Placeholder question +What does the `scale3d()` property value do in CSS? #### --distractors-- -Placeholder distractor 1 +It rotates an element in 3D space --- -Placeholder distractor 2 +It skews an element on the x, y, and z axes --- -Placeholder distractor 3 +It translates an element in 3D space #### --answer-- -Placeholder answer +It scales an element along the x, y, and z axes ### --question-- #### --text-- -Placeholder question +How is the total width of an element calculated in CSS? #### --distractors-- -Placeholder distractor 1 +Total width = width + margin + padding + border --- -Placeholder distractor 2 +Total width = width + margin + padding --- -Placeholder distractor 3 +Total width = width + margin + border #### --answer-- -Placeholder answer +Total width = width + left padding + right padding + left border + right border ### --question-- #### --text-- -Placeholder question +What does the filter property in CSS do? #### --distractors-- -Placeholder distractor 1 +It changes the layout of the element on the page --- -Placeholder distractor 2 +It changes the background color and texture of an element --- -Placeholder distractor 3 +It alters the size and position of an element #### --answer-- -Placeholder answer +It applies visual effects like blur and saturation to an element ### --question-- #### --text-- -Placeholder question +How is the `filter` property specified in CSS? #### --distractors-- -Placeholder distractor 1 +As only a single function, where percentage values must be used --- -Placeholder distractor 2 +As `block` or `inline`, with values expressed in pixels --- -Placeholder distractor 3 +As `none` or multiple functions, but only percentage values are accepted #### --answer-- -Placeholder answer +As `none` or one or more functions, where percentage values can also be expressed as decimals ### --question-- #### --text-- -Placeholder question +What does the `contrast()` function in CSS do? #### --distractors-- -Placeholder distractor 1 +Adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white --- -Placeholder distractor 2 +Changes the color balance of the image, where `0%` desaturates it and `100%` oversaturates it --- -Placeholder distractor 3 +Alters the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque #### --answer-- -Placeholder answer +Adjusts the contrast of the input image, where `0%` makes it grey, `100%` has no effect, and values over 100% increase contrast ### --question-- #### --text-- -Placeholder question +What does the `hue-rotate()` function in CSS do? #### --distractors-- -Placeholder distractor 1 +It changes the brightness of the input image based on degrees --- -Placeholder distractor 2 +It rotates an element's size and position in the document --- -Placeholder distractor 3 +It adjusts the saturation and contrast of the input image #### --answer-- -Placeholder answer +It applies a hue rotation, where the `` value defines the degrees around the hue color circle ### --question-- #### --text-- -Placeholder question +What happens when two animated filters have different function list lengths in CSS? #### --distractors-- -Placeholder distractor 1 +The shorter list's filters override the longer list's filters --- -Placeholder distractor 2 +The filters are discarded and no animation is applied --- -Placeholder distractor 3 +Only the first filter function in each list is animated #### --answer-- -Placeholder answer +The longer list's missing equivalent filter functions are added to the shorter list using their initial values