From d82a01d2578c0bc197cc78aae0ad16010d7ced19 Mon Sep 17 00:00:00 2001 From: Rakshith Acharya Date: Thu, 17 Oct 2024 01:33:57 +0530 Subject: [PATCH] feat(curriculum): add CSS Backgrounds and Borders Quiz (#56495) --- .../66ed8fd7f45ce3ece4053eb0.md | 200 +++++++++--------- 1 file changed, 100 insertions(+), 100 deletions(-) diff --git a/curriculum/challenges/english/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md b/curriculum/challenges/english/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md index 40f3cfbb186d69..ff08499df031d9 100644 --- a/curriculum/challenges/english/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md +++ b/curriculum/challenges/english/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md @@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz. #### --text-- -Placeholder question +Which CSS property is used to specify the image to be used as a list item marker? #### --distractors-- -Placeholder distractor 1 +`list-style-position` --- -Placeholder distractor 2 +`background-image` --- -Placeholder distractor 3 +`content-image` #### --answer-- -Placeholder answer +`list-style-image` ### --question-- #### --text-- -Placeholder question +Which property is used to control the position of the list item marker? #### --distractors-- -Placeholder distractor 1 +`list-style-type` --- -Placeholder distractor 2 +`list-position` --- -Placeholder distractor 3 +`position-marker` #### --answer-- -Placeholder answer +`list-style-position` ### --question-- #### --text-- -Placeholder question +Which of the following is NOT a valid value for the `list-style-type` property? #### --distractors-- -Placeholder distractor 1 +`decimal` --- -Placeholder distractor 2 +`lower-greek` --- -Placeholder distractor 3 +`square` #### --answer-- -Placeholder answer +`lower-arabic` ### --question-- #### --text-- -Placeholder question +Which pseudo-class is used to style links when a user hovers over them? #### --distractors-- -Placeholder distractor 1 +`:active` --- -Placeholder distractor 2 +`:link` --- -Placeholder distractor 3 +`:visited` #### --answer-- -Placeholder answer +`:hover` ### --question-- #### --text-- -Placeholder question +What is the default value for the `background-repeat` property? #### --distractors-- -Placeholder distractor 1 +`no-repeat` --- -Placeholder distractor 2 +`repeat-x` --- -Placeholder distractor 3 +`space` #### --answer-- -Placeholder answer +`repeat` ### --question-- #### --text-- -Placeholder question +Which CSS property can be used to control the size of a background image? #### --distractors-- -Placeholder distractor 1 +`image-size` --- -Placeholder distractor 2 +`background-fit` --- -Placeholder distractor 3 +`size-image` #### --answer-- -Placeholder answer +`background-size` ### --question-- #### --text-- -Placeholder question +How can you make a background image cover the entire element, maintaining aspect ratio? #### --distractors-- -Placeholder distractor 1 +`background-size: contain` --- -Placeholder distractor 2 +`background-repeat: stretch` --- -Placeholder distractor 3 +`background-fit: full` #### --answer-- -Placeholder answer +`background-size: cover` ### --question-- #### --text-- -Placeholder question +What does `background-attachment: fixed` do? #### --distractors-- -Placeholder distractor 1 +The background moves with the scrolling content --- -Placeholder distractor 2 +The background scrolls twice as fast --- -Placeholder distractor 3 +The background image is resized to fill the screen #### --answer-- -Placeholder answer +The background stays fixed while the content scrolls ### --question-- #### --text-- -Placeholder question +Which of the following is NOT a valid `border-style` value? #### --distractors-- -Placeholder distractor 1 +`solid` --- -Placeholder distractor 2 +`dotted` --- -Placeholder distractor 3 +`groove` #### --answer-- -Placeholder answer +`triple` ### --question-- #### --text-- -Placeholder question +How can you make a link change color when clicked? #### --distractors-- -Placeholder distractor 1 +Use the `:link` pseudo-class --- -Placeholder distractor 2 +Use the `:visited` pseudo-class --- -Placeholder distractor 3 +Use the `:hover` pseudo-class #### --answer-- -Placeholder answer +Use the `:active` pseudo-class ### --question-- #### --text-- -Placeholder question +Which property is used to define the width of a border? #### --distractors-- -Placeholder distractor 1 +`border-size` --- -Placeholder distractor 2 +`border-thickness` --- -Placeholder distractor 3 +`border-spacing` #### --answer-- -Placeholder answer +`border-width` ### --question-- #### --text-- -Placeholder question +Which value for the `background-repeat` property ensures the image repeats horizontally but not vertically? #### --distractors-- -Placeholder distractor 1 +`repeat-y` --- -Placeholder distractor 2 +`space` --- -Placeholder distractor 3 +`no-repeat` #### --answer-- -Placeholder answer +`repeat-x` ### --question-- #### --text-- -Placeholder question +What’s the purpose of the `border-radius` property? #### --distractors-- -Placeholder distractor 1 +To create shadows around the border --- -Placeholder distractor 2 +To change the width of the border --- -Placeholder distractor 3 +To make the border disappear #### --answer-- -Placeholder answer +To round the corners of an element ### --question-- #### --text-- -Placeholder question +Which property is used to add space between the border and the content? #### --distractors-- -Placeholder distractor 1 +`margin` --- -Placeholder distractor 2 +`border-spacing` --- -Placeholder distractor 3 +`border-width` #### --answer-- -Placeholder answer +`padding` ### --question-- #### --text-- -Placeholder question +How can you make a background image repeat only vertically? #### --distractors-- -Placeholder distractor 1 +`background-repeat: repeat-x` --- -Placeholder distractor 2 +`background-repeat: vertical-only` --- -Placeholder distractor 3 +`background-repeat: stretch` #### --answer-- -Placeholder answer +`background-repeat: repeat-y` ### --question-- #### --text-- -Placeholder question +What does `background-position: center` do to a background image? #### --distractors-- -Placeholder distractor 1 +It aligns the background image to the top of the element --- -Placeholder distractor 2 +It repeats the background image horizontally and vertically --- -Placeholder distractor 3 +It scales the background image to fill the entire element #### --answer-- -Placeholder answer +It positions the background image in the center of the element ### --question-- #### --text-- -Placeholder question +Which of these is NOT a valid border value? #### --distractors-- -Placeholder distractor 1 +`1px solid black` --- -Placeholder distractor 2 +`3px dotted blue` --- -Placeholder distractor 3 +`2px grooved red` #### --answer-- -Placeholder answer +`5px inverted green` ### --question-- #### --text-- -Placeholder question +What does the `border-collapse` property do when applied to table elements? #### --distractors-- -Placeholder distractor 1 +It removes the table borders --- -Placeholder distractor 2 +It adds spacing between borders --- -Placeholder distractor 3 +It makes the border invisible #### --answer-- -Placeholder answer +It merges adjacent table cell's borders into one ### --question-- #### --text-- -Placeholder question +Which value for the `background-size` property will resize the background image to fit within the container while preserving the image’s aspect ratio? #### --distractors-- -Placeholder distractor 1 +`fill` --- -Placeholder distractor 2 +`stretch` --- -Placeholder distractor 3 +`repeat` #### --answer-- -Placeholder answer +`contain` ### --question-- #### --text-- -Placeholder question +How do you make an image border have rounded corners in CSS? #### --distractors-- -Placeholder distractor 1 +`border-style: round` --- -Placeholder distractor 2 +`border-corners: circle` --- -Placeholder distractor 3 +`border-rounding: 10px` #### --answer-- -Placeholder answer +`border-radius: 10px`