mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
refactor(curriculum): background and borders quiz questions (#58419)
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Jessica Wilkins
+93
-61
@@ -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");
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user