mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-01-08 03:04:00 -05:00
fix(curriculum): CSS Colors Quiz after audit (#58459)
Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com>
This commit is contained in:
Tom
@@ -17,111 +17,111 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo
|
||||
|
||||
#### --text--
|
||||
|
||||
Which of the following is a valid way to represent a color in CSS?
|
||||
Which of these color systems cannot be used to set a color in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`color-value: black;`
|
||||
RGB
|
||||
|
||||
---
|
||||
|
||||
`text-color: blue;`
|
||||
HSL
|
||||
|
||||
---
|
||||
|
||||
`font-color: red;`
|
||||
HEX
|
||||
|
||||
#### --answer--
|
||||
|
||||
`#ff5733`
|
||||
CMYK
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What is the correct syntax for setting the background color of an element?
|
||||
What are the primary colors in color theory?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`bg-color: red;`
|
||||
`Green`, `Blue`, `Purple`
|
||||
|
||||
---
|
||||
|
||||
`background_color: red;`
|
||||
`Orange`, `Green`, `Purple`
|
||||
|
||||
---
|
||||
|
||||
`style: background-color: red;`
|
||||
`Yellow`, `Green`, `Red`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`background: red;`
|
||||
`Yellow`, `Blue`, `Red`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
How can you set the transparency of an element to 50%?
|
||||
Which type of color scheme uses colors that are opposite each other on the color wheel?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`bg-opacity: 0.5;`
|
||||
Analogous
|
||||
|
||||
---
|
||||
|
||||
`transparency: 50%;`
|
||||
Triadic
|
||||
|
||||
---
|
||||
|
||||
`alpha: 0.5;`
|
||||
Monochromatic
|
||||
|
||||
#### --answer--
|
||||
|
||||
`opacity: 0.5;`
|
||||
Complementary
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What is the equivalent `HSL` value for the color `#FF0000`?
|
||||
Which type of color scheme uses colors that are adjacent to each other on the color wheel?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`hsl(180%, 100%, 50%)`
|
||||
Complementary
|
||||
|
||||
---
|
||||
|
||||
`hsl(180, 100%, 50%)`
|
||||
Triadic
|
||||
|
||||
---
|
||||
|
||||
`hsl(360, 100%, 50%)`
|
||||
Monochromatic
|
||||
|
||||
#### --answer--
|
||||
|
||||
`hsl(0, 100%, 50%)`
|
||||
Analogous
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
How can you set the color of an element to a random color?
|
||||
What is the term for colors that are created by mixing equal parts of two primary colors?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`color: random();`
|
||||
Tertiary
|
||||
|
||||
---
|
||||
|
||||
`color: #random;`
|
||||
Complementary
|
||||
|
||||
---
|
||||
|
||||
`color: any();`
|
||||
Analogous
|
||||
|
||||
#### --answer--
|
||||
|
||||
There is no direct way to do so.
|
||||
Secondary
|
||||
|
||||
### --question--
|
||||
|
||||
@@ -237,45 +237,53 @@ Which of the following hex codes represents a shade of red?
|
||||
|
||||
#### --text--
|
||||
|
||||
Which keyword sets the text color to inherit from the parent element?
|
||||
How many colors are required to create a valid CSS gradient?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`null`
|
||||
At least 4.
|
||||
|
||||
---
|
||||
|
||||
`auto`
|
||||
Exactly 2.
|
||||
|
||||
---
|
||||
|
||||
`default`
|
||||
Exactly 3.
|
||||
|
||||
#### --answer--
|
||||
|
||||
`inherit`
|
||||
At least 2.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
How many colors are required to create a valid CSS gradient?
|
||||
Which is NOT a valid way to apply a linear-gradient?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
At least `4`
|
||||
```css
|
||||
background: linear-gradient(to right, red, blue);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Exactly `2`
|
||||
```css
|
||||
background: linear-gradient(90deg, red, green, blue);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Exactly `3`
|
||||
```css
|
||||
background: linear-gradient(#F00, #00F);
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
At least `2`
|
||||
```css
|
||||
background: linear-gradient(up, red, blue);
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
@@ -285,41 +293,41 @@ What unit is used to express the lightness value in the `hsl` color model?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`Degrees`
|
||||
Degrees
|
||||
|
||||
---
|
||||
|
||||
`Hex`
|
||||
Hex
|
||||
|
||||
---
|
||||
|
||||
`Pixels`
|
||||
Pixels
|
||||
|
||||
#### --answer--
|
||||
|
||||
`Percent (%)`
|
||||
Percent
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which CSS property would you use to add a solid color around an element?
|
||||
What does the `rgb()` function stand for?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`color`
|
||||
`Red`, `Gray`, `Black`
|
||||
|
||||
---
|
||||
|
||||
`outline-color`
|
||||
`Radiant`, `Glow`, `Blend`
|
||||
|
||||
---
|
||||
|
||||
`text-color`
|
||||
`Rendered`, `Graphic`, `Background`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`border-color`
|
||||
`Red`, `Green`, `Blue`
|
||||
|
||||
### --question--
|
||||
|
||||
@@ -329,37 +337,37 @@ What does the `hsl()` function stand for?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`Hue, Saturation, Luminosity`
|
||||
`Hue`, `Saturation`, `Luminosity`
|
||||
|
||||
---
|
||||
|
||||
`Hue, Shadow, Lightness`
|
||||
`Hue`, `Shadow`, `Lightness`
|
||||
|
||||
---
|
||||
|
||||
`Hue, Shadow, Luminosity`
|
||||
`Hue`, `Shadow`, `Luminosity`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`Hue, Saturation, Lightness`
|
||||
`Hue`, `Saturation`, `Lightness`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which of these is a valid CSS color keyword?
|
||||
Which of these is a valid CSS named color?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`purple-red`
|
||||
`hsl(yellow)`
|
||||
|
||||
---
|
||||
|
||||
`electricblue`
|
||||
`rgb(red)`
|
||||
|
||||
---
|
||||
|
||||
`goldy`
|
||||
`#blue`
|
||||
|
||||
#### --answer--
|
||||
|
||||
@@ -391,29 +399,37 @@ What is the maximum value allowed for a single color component in the `RGB` colo
|
||||
|
||||
#### --text--
|
||||
|
||||
Which color model includes the `hue` component?
|
||||
Which of these correctly uses one of the color models to set the background color?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`rgb`
|
||||
```css
|
||||
background: rgb(50%, 255, 155);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
`hex`
|
||||
```css
|
||||
background: #blue;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
`cmyk`
|
||||
```css
|
||||
background: #0I0I0I;
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
`hsl`
|
||||
```css
|
||||
background: hsl(50, 50%, 50%);
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which color function also allows you to set the opacity of the color?
|
||||
Which of these sets the opacity of the color?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
@@ -468,4 +484,3 @@ background: linear-gradient(blue, red)
|
||||
```css
|
||||
background: linear-gradient(red, blue)
|
||||
```
|
||||
|
||||
|
||||
@@ -34,7 +34,7 @@ p {
|
||||
}
|
||||
```
|
||||
|
||||
- **`rgba()` Function**: This function adds a fourth value —alpha— that controls the transparency of the color.
|
||||
- **`rgba()` Function**: This function adds a fourth value, alpha, that controls the transparency of the color. If not provided, the alpha value defaults to `1`.
|
||||
|
||||
```css
|
||||
div {
|
||||
@@ -50,7 +50,7 @@ p {
|
||||
}
|
||||
```
|
||||
|
||||
- **`hsla()` Function**: This function adds a fourth value -alpha- that controls the opacity of the color.
|
||||
- **`hsla()` Function**: This function adds a fourth value, alpha, that controls the opacity of the color.
|
||||
|
||||
```css
|
||||
div {
|
||||
@@ -72,11 +72,11 @@ p {
|
||||
|
||||
## Linear and Radial Gradients
|
||||
|
||||
- **Linear Gradients**: These gradients create a gradual blend between colors along a straight line. You can control the direction of this line and the colors used.
|
||||
- **Linear Gradients**: These gradients create a gradual blend between colors along a straight line. You can control the direction of this line using keywords like `to top`, `to right`, `to bottom right`, or angles like `45deg`. You can use any valid CSS color and as many color stops as you would like.
|
||||
|
||||
```css
|
||||
.linear-gradient {
|
||||
background: linear-gradient(to right, red, blue);
|
||||
background: linear-gradient(45deg, red, #33FF11, rgba(100, 100, 255, 0.5));
|
||||
height: 40vh;
|
||||
}
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user