jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-04-19 13:00:51 -04:00
Code Issues Projects Releases Wiki Activity

feat(curriculum): create CSS Colors Quiz (#56473)

Browse Source
This commit is contained in:
Pragyanand Sahoo
2024-10-07 11:48:56 +05:30
committed by GitHub
parent 1e48c21cf5
commit 9da6928a29
1 changed files with 148 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
curriculum/challenges/english/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md
View File

@@ -17,439 +17,487 @@ Answer all of the questions below correctly to pass the quiz.
#### --text--
Placeholder question
Which of the following is a valid way to represent a color in CSS?
#### --distractors--
Placeholder distractor 1
`color-value: black;`
---
Placeholder distractor 2
`text-color: blue;`
---
Placeholder distractor 3
`font-color: red;`
#### --answer--
Placeholder answer
`#ff5733`
### --question--
#### --text--
Placeholder question
What is the correct syntax for setting the background color of an element?
#### --distractors--
Placeholder distractor 1
`bg-color: red;`
---
Placeholder distractor 2
`background_color: red;`
---
Placeholder distractor 3
`style: background-color: red;`
#### --answer--
Placeholder answer
`background: red;`
### --question--
#### --text--
Placeholder question
How can you set the transparency of an element to 50%?
#### --distractors--
Placeholder distractor 1
`bg-opacity: 0.5;`
---
Placeholder distractor 2
`transparency: 50%;`
---
Placeholder distractor 3
`alpha: 0.5;`
#### --answer--
Placeholder answer
`opacity: 0.5;`
### --question--
#### --text--
Placeholder question
What is the equivalent `HSL` value for the color `#FF0000`?
#### --distractors--
Placeholder distractor 1
`hsl(180%, 100%, 50%)`
---
Placeholder distractor 2
`hsl(180, 100%, 50%)`
---
Placeholder distractor 3
`hsl(360, 100%, 50%)`
#### --answer--
Placeholder answer
`hsl(0, 100%, 50%)`
### --question--
#### --text--
Placeholder question
How can you set the color of an element to a random color?
#### --distractors--
Placeholder distractor 1
`color: random();`
---
Placeholder distractor 2
`color: #random;`
---
Placeholder distractor 3
`color: any();`
#### --answer--
Placeholder answer
There is no direct way to do so.
### --question--
#### --text--
Placeholder question
What is the default value of alpha in `rgba` if it's not specified?
#### --distractors--
Placeholder distractor 1
`0` (completely transparent)
---
Placeholder distractor 2
`2` (completely opaque)
---
Placeholder distractor 3
`0.5` (half transparent)
#### --answer--
Placeholder answer
`1` (completely opaque)
### --question--
#### --text--
Placeholder question
Which of the following is a valid hex color code?
#### --distractors--
Placeholder distractor 1
`#12345G`
---
Placeholder distractor 2
`#12ffg0`
---
Placeholder distractor 3
`#12ffgg`
#### --answer--
Placeholder answer
`#ff12ff`
### --question--
#### --text--
Placeholder question
How many hexadecimal characters are used to define a color in shorthand hex notation?
#### --distractors--
Placeholder distractor 1
5
---
Placeholder distractor 2
4
---
Placeholder distractor 3
2
#### --answer--
Placeholder answer
3
### --question--
#### --text--
Placeholder question
Which of these functions allows specifying the transparency of a color?
#### --distractors--
Placeholder distractor 1
`rgb()`
---
Placeholder distractor 2
`hsl()`
---
Placeholder distractor 3
`rgba()`
#### --answer--
Placeholder answer
`opacity()`
### --question--
#### --text--
Placeholder question
Which of the following hex codes represents a shade of red?
#### --distractors--
Placeholder distractor 1
`#0000ff`
---
Placeholder distractor 2
`#ffff00`
---
Placeholder distractor 3
`#00ff00`
#### --answer--
Placeholder answer
`#ff0000`
### --question--
#### --text--
Placeholder question
Which keyword sets the text color to inherit from the parent element?
#### --distractors--
Placeholder distractor 1
`null`
---
Placeholder distractor 2
`auto`
---
Placeholder distractor 3
`default`
#### --answer--
Placeholder answer
`inherit`
### --question--
#### --text--
Placeholder question
How many colors are required to create a valid CSS gradient?
#### --distractors--
Placeholder distractor 1
At least `4`
---
Placeholder distractor 2
Exactly `2`
---
Placeholder distractor 3
Exactly `3`
#### --answer--
Placeholder answer
At least `2`
### --question--
#### --text--
Placeholder question
What unit is used to express the lightness value in the `hsl` color model?
#### --distractors--
Placeholder distractor 1
`Degrees`
---
Placeholder distractor 2
`Hex`
---
Placeholder distractor 3
`Pixels`
#### --answer--
Placeholder answer
`Percent (%)`
### --question--
#### --text--
Placeholder question
Which CSS property would you use to add a solid color around an element?
#### --distractors--
Placeholder distractor 1
`color`
---
Placeholder distractor 2
`outline-color`
---
Placeholder distractor 3
`text-color`
#### --answer--
Placeholder answer
`border-color`
### --question--
#### --text--
Placeholder question
What does the `hsl()` function stand for?
#### --distractors--
Placeholder distractor 1
`Hue, Saturation, Luminosity`
---
Placeholder distractor 2
`Hue, Shadow, Lightness`
---
Placeholder distractor 3
`Hue, Shadow, Luminosity`
#### --answer--
Placeholder answer
`Hue, Saturation, Lightness`
### --question--
#### --text--
Placeholder question
Which of these is a valid CSS color keyword?
#### --distractors--
Placeholder distractor 1
`purple-red`
---
Placeholder distractor 2
`electricblue`
---
Placeholder distractor 3
`goldy`
#### --answer--
Placeholder answer
`gold`
### --question--
#### --text--
Placeholder question
What is the maximum value allowed for a single color component in the `RGB` color system?
#### --distractors--
Placeholder distractor 1
`200`
---
Placeholder distractor 2
`500`
---
Placeholder distractor 3
`128`
#### --answer--
Placeholder answer
`255`
### --question--
#### --text--
Placeholder question
Which color model includes the `hue` component?
#### --distractors--
Placeholder distractor 1
`rgb`
---
Placeholder distractor 2
`hex`
---
Placeholder distractor 3
`cmyk`
#### --answer--
Placeholder answer
`hsl`
### --question--
#### --text--
Placeholder question
Which of the following is the correct syntax to create a CSS variable with a fallback value?
#### --distractors--
Placeholder distractor 1
```css
.element {
color: var(--main-color, red);
}
```
---
Placeholder distractor 2
```css
.element {
color: var(--main-color);
}
```
---
Placeholder distractor 3
```css
.element {
color: var(--main-color: red);
}
```
#### --answer--
Placeholder answer
```css
.element {
color: var(--main-color, red);
}
```
### --question--
#### --text--
Placeholder question
How can you use CSS variables to dynamically change the color of multiple elements?
#### --distractors--
Placeholder distractor 1
```css
:root {
primary-color: blue;
}
.element1, .element2 {
color: --primary-color;
}
```
---
Placeholder distractor 2
```css
body {
--color: blue;
}
.element1, .element2 {
color: var(color);
}
```
---
Placeholder distractor 3
```css
:root {
--primary: blue;
}
.element1, .element2 {
color: var(--primary);
}
```
#### --answer--
Placeholder answer
```css
:root {
--primary-color: blue;
}
.element1, .element2 {
color: var(--primary-color);
}
```