diff --git a/curriculum/challenges/english/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md b/curriculum/challenges/english/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md index 2cb570fbcde..968ab560738 100644 --- a/curriculum/challenges/english/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md +++ b/curriculum/challenges/english/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md @@ -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); +} +```