From 00dd0995bda979e2551607f9d2eee2d4be291e94 Mon Sep 17 00:00:00 2001 From: Tom <20648924+moT01@users.noreply.github.com> Date: Thu, 30 Jan 2025 14:53:42 -0600 Subject: [PATCH] fix(curriculum): CSS Colors Quiz after audit (#58459) Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com> --- .../66ed8fe1f45ce3ece4053eb1.md | 133 ++++++++++-------- .../671a90c1cf517678b130419e.md | 8 +- 2 files changed, 78 insertions(+), 63 deletions(-) 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 74751925834..4671ada16c8 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,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) ``` - diff --git a/curriculum/challenges/english/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md b/curriculum/challenges/english/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md index 0e889acdbf0..c0793af1c73 100644 --- a/curriculum/challenges/english/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md +++ b/curriculum/challenges/english/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md @@ -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; } ```