diff --git a/challenges/01-responsive-web-design/applied-visual-design.json b/challenges/01-responsive-web-design/applied-visual-design.json index 9a7a2a84f87..f52aff3dd2e 100644 --- a/challenges/01-responsive-web-design/applied-visual-design.json +++ b/challenges/01-responsive-web-design/applied-visual-design.json @@ -1530,40 +1530,45 @@ "description": [ "Computer monitors and device screens create different colors by combining amounts of red, green, and blue light. This is known as the RGB additive color model in modern color theory. Red (R), green (G), and blue (B) are called primary colors. Mixing two primary colors creates the secondary colors cyan (G + B), magenta (R + B) and yellow (R + G). You saw these colors in the Complementary Colors challenge. These secondary colors happen to be the complement to the primary color not used in their creation, and are opposite to that primary color on the color wheel. For example, magenta is made with red and blue, and is the complement to green.", "Tertiary colors are the result of combining a primary color with one of its secondary color neighbors. For example, red (primary) and yellow (secondary) make orange. This adds six more colors to a simple color wheel for a total of twelve.", - "There are various methods of selecting different colors that result in a harmonious combination in design. One example that can use tertiary colors is called the split-complementary color scheme. It starts with a base color, then pairs it with the two colors that are adjacent to its complement. The three colors provide strong visual contrast in a design, but is more subtle than using two complementary colors.", - "Here are three colors using the split-complement scheme:", - "
cyan (#00FFFF)
orange (#FF7D00)
raspberry (#FF007D)
", + "There are various methods of selecting different colors that result in a harmonious combination in design. One example that can use tertiary colors is called the split-complementary color scheme. This scheme starts with a base color, then pairs it with the two colors that are adjacent to its complement. The three colors provide strong visual contrast in a design, but are more subtle than using two complementary colors.", + "Here are three colors created using the split-complement scheme:", + "
ColorHex Code
orange#FF7D00
cyan#00FFFF
raspberry#FF007D
", "
", - "Change the background-color property of the orange, cyan, and raspberry classes to their respective colors. Make sure to use the hex codes because the orange and raspberry in the example above are not browser-recognized color names." + "Change the background-color property of the orange, cyan, and raspberry classes to their respective colors. Make sure to use the hex codes as orange and raspberry are not browser-recognized color names." ], "challengeSeed": [ "", + " ", "
", "
", "
" ], "tests": [ - "assert($('.orange').css('background-color') == 'rgb(255, 125, 0)', 'message: The div element with class orange should have a background-color of orange.');", - "assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'message: The div element with class cyan should have a background-color of cyan.');", - "assert($('.raspberry').css('background-color') == 'rgb(255, 0, 125)', 'message: The div element with class raspberry should have a background-color of raspberry.');" + "assert(code.match(/.orange\\s*\\{\\s*background-color:\\s*#FF7D00;?\\s*\\}/g), 'message: The div element with class orange should have a background-color of orange.');", + "assert(code.match(/.cyan\\s*\\{\\s*background-color:\\s*#00FFFF;?\\s*\\}/g), 'message: The div element with class cyan should have a background-color of cyan.');", + "assert(code.match(/.raspberry\\s*\\{\\s*background-color:\\s*#FF007D;?\\s*\\}/g), 'message: The div element with class raspberry should have a background-color of raspberry.');" ], "solutions": [], "hints": [], @@ -2910,4 +2915,4 @@ "translations": {} } ] -} \ No newline at end of file +}