refactor(curriculum): background and borders quiz questions (freeCode…

…Camp#58419)

Co-authored-by: Oliver Eyton-Williams <[email protected]>

curriculum/challenges/english/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md

@@ -61,23 +61,23 @@ Which property is used to control the position of the list item marker?
 
 #### --text--
 
-Which of the following is NOT a valid value for the `list-style-type` property?
+What does the `line-height` property do?
 
 #### --distractors--
 
-`decimal`
+It is used to set the background size for an element. 
 
 ---
 
-`disc`
+It is used to style links that have not be visited by the user.
 
 ---
 
-`square`
+It is used to create space to the right of list items.
 
 #### --answer--
 
-`lower-arabic`
+It is used to create space between lines of text.
 
 ### --question--
 
@@ -87,15 +87,15 @@ Which pseudo-class is used to style links when a user hovers over them?
 
 #### --distractors--
 
-`:active`
+`:hovered`
 
 ---
 
-`:link`
+`:hovering`
 
 ---
 
-`:visited`
+`:hasHovered`
 
 #### --answer--
 
@@ -149,45 +149,45 @@ Which CSS property can be used to control the size of a background image?
 
 #### --text--
 
-How can you make a background image cover the entire element, maintaining aspect ratio?
+Which of the following is the correct way to apply a solid red top border to an element?
 
 #### --distractors--
 
-`background-size: contain`
+`set-top-border: 3px solid red;`
 
 ---
 
-`background-repeat: stretch`
+`border-top: apply 3px solid red;`
 
 ---
 
-`background-fit: full`
+`top-border: 3px solid red;`
 
 #### --answer--
 
-`background-size: cover`
+`border-top: 3px solid red;`
 
 ### --question--
 
 #### --text--
 
-What does `background-attachment: fixed` do?
+Which of the following is NOT a valid `border` property?
 
 #### --distractors--
 
-The background moves with the scrolling content
+`border-bottom`
 
 ---
 
-The background scrolls twice as fast
+`border-right`
 
 ---
 
-The background image is resized to fill the screen
+`border-top`
 
 #### --answer--
 
-The background stays fixed while the content scrolls
+`border-side`
 
 ### --question--
 
@@ -215,45 +215,61 @@ Which of the following is a valid `border-style` value?
 
 #### --text--
 
-How can you make a link change color when clicked?
+Which of the following is the correct way to apply borders using the shorthand property?
 
 #### --distractors--
 
-Use the `:link` pseudo-class
+```css
+.box {
+  borders: 1px solid black;
+}
+```
 
 ---
 
-Use the `:visited` pseudo-class
+```css
+.box {
+  borderShort: 1px solid black;
+}
+```
 
 ---
 
-Use the `:hover` pseudo-class
+```css
+.box {
+  border-short: 1px solid black;
+}
+```
 
 #### --answer--
 
-Use the `:active` pseudo-class
+```css
+.box {
+  border: 1px solid black;
+}
+```
 
 ### --question--
 
 #### --text--
 
-What is the correct CSS property to create an outline around an element, besides using the `border` property?
+What is the role of the `linear-gradient` function?
 
 #### --distractors--
 
-`border-wide`
+It is used to set the style of an element's border.
 
 ---
 
-`box-shadow`
+It is used to determine how background images should be repeated along the horizontal and vertical axes.
 
 ---
 
-`border-img`
+It is used to style an element that was activated by the user.
 
 #### --answer--
 
-`outline`
+It is used to create a transition between multiple colors along a straight line.
 
 ### --question--
 
@@ -281,73 +297,73 @@ Which value for the `background-repeat` property ensures the image repeats horiz
 
 #### --text--
 
-What's the purpose of the `border-radius` property?
+What is the purpose of the `border-radius` property?
 
 #### --distractors--
 
-To create shadows around the border
+To create shadows around the border.
 
 ---
 
-To change the width of the border
+To change the width of the border.
 
 ---
 
-To make the border disappear
+To make the border disappear.
 
 #### --answer--
 
-To round the corners of an element
+To round the corners of an element.
 
 ### --question--
 
 #### --text--
 
-Which property is used to add space between the border and the content?
+Which of the following is NOT a valid value for the `background-position` property?
 
 #### --distractors--
 
-`margin`
+`top`
 
 ---
 
-`border-spacing`
+`center`
 
 ---
 
-`border-width`
+`bottom`
 
 #### --answer--
 
-`padding`
+`side`
 
 ### --question--
 
 #### --text--
 
-How can you make a background image repeat only vertically?
+Which of the following `background-repeat` values can be used to repeat a background image vertically?
 
 #### --distractors--
 
-`background-repeat: repeat-x`
+`repeat-x`
 
 ---
 
-`background-repeat: vertical-only`
+`vertical-only`
 
 ---
 
-`background-repeat: stretch`
+`stretch`
 
 #### --answer--
 
-`background-repeat: repeat-y`
+`repeat-y`
 
 ### --question--
 
 #### --text--
 
-What does `background-position: center` do to a background image?
+What does `background-position: center;` do to a background image?
 
 #### --distractors--
 
@@ -369,7 +385,7 @@ It positions the background image in the center of the element
 
 #### --text--
 
-Which of these is NOT a valid border value?
+Which of these is NOT a valid `border` value?
 
 #### --distractors--
 
@@ -381,7 +397,7 @@ Which of these is NOT a valid border value?
 
 ---
 
-`2px grooved red`
+`2px dashed red`
 
 #### --answer--
 
@@ -391,65 +407,81 @@ Which of these is NOT a valid border value?
 
 #### --text--
 
-How can you ensure that gradients used in web design are accessible?
+What is does the `radial-gradient` function do?
 
 #### --distractors--
 
-Use only two colors in the gradient
+It creates a background that transitions between multiple colors along a straight line.
 
 ---
 
-Use gradients only for decorative purposes
+It specifies whether the background image should scroll with the content or remain fixed in place.
 
 ---
 
-Avoid using gradients in the background
+It is used to style an element that was activated by the user.
 
 #### --answer--
 
-Ensure sufficient contrast between the gradient and any text.
+It creates an image that radiates from a particular point and gradually transitions between multiple colors.
 
 ### --question--
 
 #### --text--
 
-Which value for the `background-size` property will resize the background image to fit within the container while preserving the image's aspect ratio?
+Which of the following is NOT a valid pseudo-class?
 
 #### --distractors--
 
-`fill`
+`:focus`
 
 ---
 
-`stretch`
+`:visited`
 
 ---
 
-`repeat`
+`:link`
 
 #### --answer--
 
-`contain`
+`:before`
 
 ### --question--
 
 #### --text--
 
-How do you make an image border have rounded corners in CSS?
+Which of the following shows the `background` shorthand property being used properly?
 
 #### --distractors--
 
-`border-style: round`
+```css
+body {
+  background: apply url("example-url-goes-here");
+}
+```
 
 ---
 
-`border-corners: circle`
+```css
+body {
+  background: set url("example-url-goes-here");
+}
+```
 
 ---
 
-`border-rounding: 10px`
+```css
+body {
+  background: 2px solid red url("example-url-goes-here");
+}
+```
 
 #### --answer--
 
-`border-radius: 10px`
+```css
+body {
+  background: no-repeat url("example-url-goes-here");
+}
+```