From a364bf989b460513ccd776e93b220e1b1a8d921f Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Wed, 29 Jul 2015 23:21:44 -0700 Subject: [PATCH] finish color tutorial --- challenges/html5-and-css.json | 155 +++++++--------------------------- 1 file changed, 29 insertions(+), 126 deletions(-) diff --git a/challenges/html5-and-css.json b/challenges/html5-and-css.json index 8644217ac7..56032e6049 100644 --- a/challenges/html5-and-css.json +++ b/challenges/html5-and-css.json @@ -3804,8 +3804,8 @@ }, { "id": "bad87fee1348bd9aede08718", - "name": "Waypoint: Use RGB to Color Elements Instead of Hex Code", - "dashedName": "waypoint-use-rgb-to-color-elements-instead-of-hex-code", + "name": "Waypoint: Use RGB values to Color Elements", + "dashedName": "waypoint-use-rgb-values-to-color-elements", "difficulty": 0.063, "description": [ "Another way you can represent colors in CSS is by using RGB values.", @@ -3815,8 +3815,8 @@ "Let's replace the hex code in our body element's background color with the RGB value for black: rgb(0, 0, 0)" ], "tests": [ - "assert($('body').css('background-color') === 'rgb(0, 0, 0)', 'Give your body element the background-color of red.')", - "assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example body: { color: rgb(255,0,0); }.')" + "assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB to give your body element the background-color of black. For example body: { color: rgb(0, 0, 0); }.')", + "assert($('body').css('background-color') === 'rgb(0, 0, 0)', 'Your body element's the background-color should be black.')" ], "challengeSeed": [ "" ], @@ -3882,16 +3882,16 @@ "description": [ "Just like with hex code, you can represent different colors in RGB by using combinations of different values.", "These values follow the pattern of RGB: the first number represents red, the second number represents green, and the third number represents blue.", - "Change the body element's background color to the RGB value green: rgb(0, 255, 0)" + "Change the body element's background color to the RGB value red: rgb(255, 0, 0)" ], "tests": [ - "assert($('body').css('background-color') === 'rgb(255, 0, 0)', 'Give your body element the background-color of green.')", - "assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color green. For example body: { color: rgb(255,0,0); }.')" + "assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB to give your body element the background-color of red. For example body: { color: rgb(255, 0, 0); }.')", + "assert($('body').css('background-color') === 'rgb(255, 0, 0)', 'Your body element's the background-color should be red.')" ], "challengeSeed": [ "" ], @@ -3915,16 +3915,16 @@ "dashedName": "waypoint-use-rgb-to-color-elements-green", "difficulty": 0.066, "description": [ - "Use hex code instead of a color." + "Now change the body element's background color to the RGB value green: rgb(0, 255, 0)" ], "tests": [ - "assert($('body').css('background-color') === 'rgb(0, 255, 0)', 'Give your body element the background-color of green.')", - "assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*255\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example body: { color: rgb(0,255,0); }.')" + "assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*255\\s*,\\s*0\\s*\\)/ig), 'Use RGB to give your body element the background-color of green. For example body: { color: rgb(0, 255, 0); }.')", + "assert($('body').css('background-color') === 'rgb(0, 255, 0)', 'Your body element's the background-color should be green.')" ], "challengeSeed": [ "" ], @@ -3948,16 +3948,16 @@ "dashedName": "waypoint-use-rgb-to-color-elements-blue", "difficulty": 0.067, "description": [ - "Use hex code instead of a color." + "Change the body element's background color to the RGB value blue: rgb(0, 0, 255)" ], "tests": [ - "assert($('body').css('background-color') === 'rgb(0, 0, 255)', 'Give your body element the background-color of blue.')", - "assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*255\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example body: { color: rgb(0,0,255); }.')" + "assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*255\\s*\\)/ig), 'Use RGB to give your body element the background-color of blue. For example body: { color: rgb(0, 0, 255); }.')", + "assert($('body').css('background-color') === 'rgb(0, 0, 255)', 'Your body element's the background-color should be blue.')" ], "challengeSeed": [ "" ], @@ -3981,16 +3981,17 @@ "dashedName": "waypoint-use-rgb-to-mix-colors", "difficulty": 0.068, "description": [ - "Use hex code instead of a orange." + "Just like with hex code, you can mix colors in RGB by using combinations of different values.", + "Change the body element's background color to the RGB value orange: rgb(255, 165, 0)" ], "tests": [ - "assert($('body').css('background-color') === 'rgb(255, 165, 0)', 'Give your body element the background-color of orange.')", - "assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*165\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example body: { color: rgb(255,165,0); }.')" + "assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*165\\s*,\\s*0\\s*\\)/ig), 'Use RGB to give your body element the background-color of orange. For example body: { color: rgb(255, 165, 0); }.')", + "assert($('body').css('background-color') === 'rgb(255, 165, 0)', 'Your body element's the background-color should be orange.')" ], "challengeSeed": [ "" ], @@ -4014,115 +4015,17 @@ "dashedName": "waypoint-use-rgb-to-color-elements-gray", "difficulty": 0.069, "description": [ - "Use hex code instead of a color." + "With RGB values, we can make an element gray by using combinations of the same value for all three colors.", + "Change the body element's background color to the RGB value for gray: rgb(128, 128, 128)" ], "tests": [ - "assert($('body').css('background-color') === 'rgb(128, 128, 128)', 'Give your body element the background-color of gray.')", - "assert(editor.match(/rgb\\s*\\(\\s*128\\s*,\\s*128\\s*,\\s*128\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example body: { color: rgb(128,128,128); }.')" + "assert(editor.match(/rgb\\s*\\(\\s*128\\s*,\\s*128\\s*,\\s*128\\s*\\)/ig), 'Use RGB to give your body element the background-color of gray. For example body: { color: rgb(128, 128, 128); }.')", + "assert($('body').css('background-color') === 'rgb(128, 128, 128)', 'Your body element's the background-color should be gray.')" ], "challengeSeed": [ "" - ], - "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] - }, - { - "id": "bad84fee1348bd9aedf08720", - "name": "Waypoint: Use RGB Alpha for Specific Shades of Gray", - "dashedName": "waypoint-use-rgb-alpha-for-specific-shades-of-gray", - "difficulty": 0.070, - "description": [ - "Use hex code instead of a color." - ], - "tests": [ - "assert($('body').css('background-color') === 'rgb(17, 17, 17)', 'Give your body element the background-color of a light gray.')", - "assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example body: { color: rgb(255,0,0); }.')" - ], - "challengeSeed": [ - "" - ], - "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] - }, - { - "id": "bad85fee1348bd9aedf08720", - "name": "Waypoint: Use RGB Alpha to Make an Element Translucent", - "dashedName": "waypoint-use-rgb-alpha-to-make-an-element-translucent", - "difficulty": 0.071, - "description": [ - "Use hex code instead of a color." - ], - "tests": [ - "assert($('body').css('background-color') === 'rgb(17, 17, 17)', 'Give your body element the background-color of a light gray.')", - "assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example body: { color: rgb(255,0,0); }.')" - ], - "challengeSeed": [ - "" - ], - "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] - }, - { - "id": "bad86fee1348bd9aedf08720", - "name": "Waypoint: Use RGB Alpha to make an Element Nearly Opaque", - "dashedName": "waypoint-use-rgb-alpha-to-make-an-element-nearly-opaque", - "difficulty": 0.072, - "description": [ - "Use hex code instead of a color." - ], - "tests": [ - "assert($('body').css('background-color') === 'rgb(17, 17, 17)', 'Give your body element the background-color of a light gray.')", - "assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example body: { color: rgb(255,0,0); }.')" - ], - "challengeSeed": [ - "" ],