From 7035f1fcf0fda81a23d9257ce79d19a79f0e84d2 Mon Sep 17 00:00:00 2001
From: Quincy Larson <michaelqlarson@gmail.com>
Date: Tue, 30 Jun 2015 20:10:00 -0700
Subject: [PATCH] finish the color section of the basic html section

---
 seed/challenges/basic-html5-and-css.json | 339 +++++++++++++++++++++--
 1 file changed, 309 insertions(+), 30 deletions(-)

diff --git a/seed/challenges/basic-html5-and-css.json b/seed/challenges/basic-html5-and-css.json
index 5e23679472..a2d698472f 100644
--- a/seed/challenges/basic-html5-and-css.json
+++ b/seed/challenges/basic-html5-and-css.json
@@ -3057,7 +3057,7 @@
         "We can do this by adding <code>body { background-color: blue; }</code> to our <code>style</code> element."
       ],
       "tests": [
-        "assert($('body').css('background-color') === 'rgb(0, 0, 0)', 'Give your <code>body</code> element the background-color of blue.')"
+        "assert($('body').css('background-color') === 'rgb(0, 0, 0)', 'Give your <code>body</code> element the background-color of black.')"
       ],
       "challengeSeed": [
         "<style>",
@@ -3296,45 +3296,324 @@
       "dashedName": "waypoint-use-hex-code-for-specific-colors",
       "difficulty": 0.054,
       "description": [
-        ""
+        "Use hex code instead of a color."
       ],
       "tests": [
-
+        "assert($('body').css('background-color') === 'rgb(0, 0, 0)', 'Give your <code>body</code> element the background-color of black.')",
+        "assert(editor.match(/#000000/g) && editor.match(/#000000/g).length > 0, 'Use hex code the color black instead of the word \"black\". For example <code>body: { color: #000000; }</code>.')"
       ],
       "challengeSeed": [
         "<style>",
-        "  .injected-text {",
-        "    margin-bottom: -25px;",
-        "    text-align: center;",
+        "  body {",
+        "    background-color: black;",
         "  }",
-        "",
-        "  .box {",
-        "    border-style: solid;",
-        "    border-color: black;",
-        "    border-width: 5px;",
-        "    text-align: center;",
+        "</style>"
+      ],
+      "challengeType": 0,
+      "nameCn": "",
+      "descriptionCn": [],
+      "nameFr": "",
+      "descriptionFr": [],
+      "nameRu": "",
+      "descriptionRu": [],
+      "nameEs": "",
+      "descriptionEs": [],
+      "namePt": "",
+      "descriptionPt": [],
+      "nameDe": "",
+      "descriptionDe": [
+      ]
+    },
+    {
+      "id": "bad87fee1348bd9aedf08725",
+      "name": "Waypoint: Use Hex Code to Color Elements White",
+      "dashedName": "waypoint-use-hex-code-to-color-elements-white",
+      "difficulty": 0.055,
+      "description": [
+        "Use hex code instead of a color."
+      ],
+      "tests": [
+        "assert($('body').css('background-color') === 'rgb(255, 255, 255)', 'Your <code>body</code> element should have the background-color of white.')",
+        "assert(editor.match(/#FFFFFF/ig) && editor.match(/#FFFFFF/ig).length > 0, 'Use hex code the color white instead of the word \"white\". For example <code>body: { color: #FFFFFF; }</code>.')"
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  body {",
+        "    background-color: #000000;",
         "  }",
-        "",
-        "  .yellow-box {",
-        "    background-color: yellow;",
-        "    padding: 20px 40px 20px 40px;",
+        "</style>"
+      ],
+      "challengeType": 0,
+      "nameCn": "",
+      "descriptionCn": [],
+      "nameFr": "",
+      "descriptionFr": [],
+      "nameRu": "",
+      "descriptionRu": [],
+      "nameEs": "",
+      "descriptionEs": [],
+      "namePt": "",
+      "descriptionPt": [],
+      "nameDe": "",
+      "descriptionDe": [
+      ]
+    },
+    {
+      "id": "bad87fee1348bd9aedf08724",
+      "name": "Waypoint: Use Hex Code to Color Elements Red",
+      "dashedName": "waypoint-use-hex-code-to-color-elements-red",
+      "difficulty": 0.056,
+      "description": [
+        "Use hex code instead of a color."
+      ],
+      "tests": [
+        "assert($('body').css('background-color') === 'rgb(255, 0, 0)', 'Give your <code>body</code> element the background-color of red.')",
+        "assert(editor.match(/#FF0000/g) && editor.match(/#FF0000/g).length > 0, 'Use hex code the color red instead of the word \"red\". For example <code>body: { color: #FF0000; }</code>.')"
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  body {",
+        "    background-color: #FFFFFF;",
         "  }",
-        "  ",
-        "  .red-box {",
-        "    background-color:red;",
-        "    margin: 20px 40px 20px 40px;",
+        "</style>"
+      ],
+      "challengeType": 0,
+      "nameCn": "",
+      "descriptionCn": [],
+      "nameFr": "",
+      "descriptionFr": [],
+      "nameRu": "",
+      "descriptionRu": [],
+      "nameEs": "",
+      "descriptionEs": [],
+      "namePt": "",
+      "descriptionPt": [],
+      "nameDe": "",
+      "descriptionDe": [
+      ]
+    },
+    {
+      "id": "bad87fee1348bd9aedf08723",
+      "name": "Waypoint: Use Hex Code to Color Elements Green",
+      "dashedName": "waypoint-use-hex-code-to-color-elements-green",
+      "difficulty": 0.057,
+      "description": [
+        "Use hex code instead of a color."
+      ],
+      "tests": [
+        "assert($('body').css('background-color') === 'rgb(0, 255, 0)', 'Give your <code>body</code> element the background-color of green.')",
+        "assert(editor.match(/#00FF00/g) && editor.match(/#00FF00/g).length > 0, 'Use hex code the color green instead of the word \"green\". For example <code>body: { color: #00FF00; }</code>.')"
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  body {",
+        "    background-color: #FF0000;",
         "  }",
-        "",
-        "  .green-box {",
-        "    background-color: green;",
+        "</style>"
+      ],
+      "challengeType": 0,
+      "nameCn": "",
+      "descriptionCn": [],
+      "nameFr": "",
+      "descriptionFr": [],
+      "nameRu": "",
+      "descriptionRu": [],
+      "nameEs": "",
+      "descriptionEs": [],
+      "namePt": "",
+      "descriptionPt": [],
+      "nameDe": "",
+      "descriptionDe": [
+      ]
+    },
+    {
+      "id": "bad87fee1348bd9aedf08722",
+      "name": "Waypoint: Use Hex Code to Color Elements Blue",
+      "dashedName": "waypoint-use-hex-code-to-color-elements-blue",
+      "difficulty": 0.058,
+      "description": [
+        "Use hex code instead of a color."
+      ],
+      "tests": [
+        "assert($('body').css('background-color') === 'rgb(0, 0, 255)', 'Give your <code>body</code> element the background-color of blue.')",
+        "assert(editor.match(/#0000FF/g) && editor.match(/#0000FF/g).length > 0, 'Use hex code the color blue instead of the word \"blue\". For example <code>body: { color: #0000FF; }</code>.')"
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  body {",
+        "    background-color: #00FF00;",
         "  }",
-        "</style>",
-        "<h5 class=\"injected-text\">margin</h5>",
-        "",
-        "<div class=\"box yellow-box\">",
-        "  <h5 class=\"box red-box\">padding</h5>",
-        "  <h5 class=\"box green-box\">padding</h5>",
-        "</div>"
+        "</style>"
+      ],
+      "challengeType": 0,
+      "nameCn": "",
+      "descriptionCn": [],
+      "nameFr": "",
+      "descriptionFr": [],
+      "nameRu": "",
+      "descriptionRu": [],
+      "nameEs": "",
+      "descriptionEs": [],
+      "namePt": "",
+      "descriptionPt": [],
+      "nameDe": "",
+      "descriptionDe": [
+      ]
+    },
+    {
+      "id": "bad87fee1348bd9aedf08721",
+      "name": "Waypoint: Use Hex Code to Mix Colors",
+      "dashedName": "waypoint-use-hex-code-to-mix-colors",
+      "difficulty": 0.059,
+      "description": [
+        "Use hex code instead of a orange."
+      ],
+      "tests": [
+        "assert($('body').css('background-color') === 'rgb(255, 165, 0)', 'Give your <code>body</code> element the background-color of orange.')",
+        "assert(editor.match(/#FFA500/g) && editor.match(/#FFA500/g).length > 0, 'Use hex code the color orange instead of the word \"orange\". For example <code>body: { color: #FFA500; }</code>.')"
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  body {",
+        "    background-color: #0000FF;",
+        "  }",
+        "</style>"
+      ],
+      "challengeType": 0,
+      "nameCn": "",
+      "descriptionCn": [],
+      "nameFr": "",
+      "descriptionFr": [],
+      "nameRu": "",
+      "descriptionRu": [],
+      "nameEs": "",
+      "descriptionEs": [],
+      "namePt": "",
+      "descriptionPt": [],
+      "nameDe": "",
+      "descriptionDe": [
+      ]
+    },
+    {
+      "id": "bad87fee1348bd9aede08720",
+      "name": "Waypoint: Use Hex Code to Color Elements Gray",
+      "dashedName": "waypoint-use-hex-code-to-color-elements-gray",
+      "difficulty": 0.060,
+      "description": [
+        "Use hex code instead of a color."
+      ],
+      "tests": [
+        "assert($('body').css('background-color') === 'rgb(128, 128, 128)', 'Give your <code>body</code> element the background-color of gray.')",
+        "assert(editor.match(/#808080/g) && editor.match(/#808080/g).length > 0, 'Use hex code the color gray instead of the word \"gray\". For example <code>body: { color: #808080; }</code>.')"
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  body {",
+        "    background-color: FFA500;",
+        "  }",
+        "</style>"
+      ],
+      "challengeType": 0,
+      "nameCn": "",
+      "descriptionCn": [],
+      "nameFr": "",
+      "descriptionFr": [],
+      "nameRu": "",
+      "descriptionRu": [],
+      "nameEs": "",
+      "descriptionEs": [],
+      "namePt": "",
+      "descriptionPt": [],
+      "nameDe": "",
+      "descriptionDe": [
+      ]
+    },
+    {
+      "id": "bad87fee1348bd9aedf08720",
+      "name": "Waypoint: Use Hex Code for Specific Shades of Gray",
+      "dashedName": "waypoint-use-hex-code-for-specific-shades-of-gray",
+      "difficulty": 0.061,
+      "description": [
+        "Use hex code instead of a color."
+      ],
+      "tests": [
+        "assert($('body').css('background-color') === 'rgb(17, 17, 17)', 'Give your <code>body</code> element the background-color of a light gray.')",
+        "assert(editor.match(/#111111/g) && editor.match(/#111111/g).length > 0, 'Use hex code to make a light gray. For example <code>body: { color: #111111; }</code>.')"
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  body {",
+        "    background-color: #808080;",
+        "  }",
+        "</style>"
+      ],
+      "challengeType": 0,
+      "nameCn": "",
+      "descriptionCn": [],
+      "nameFr": "",
+      "descriptionFr": [],
+      "nameRu": "",
+      "descriptionRu": [],
+      "nameEs": "",
+      "descriptionEs": [],
+      "namePt": "",
+      "descriptionPt": [],
+      "nameDe": "",
+      "descriptionDe": [
+      ]
+    },
+    {
+      "id": "bad87fee1348bd9aedf08719",
+      "name": "Waypoint: Use Abbreviated Hex Code",
+      "dashedName": "waypoint-use-abbreviated-hex-code",
+      "difficulty": 0.062,
+      "description": [
+        "Use hex code instead of a color."
+      ],
+      "tests": [
+        "assert($('body').css('background-color') === 'rgb(255, 0, 0)', 'Give your <code>body</code> element the background-color of red.')",
+        "assert(editor.match(/#F00/ig) && editor.match(/#F00/ig).length > 0, 'Use abbreviated hex code instead of a named color. For example <code>body: { color: #F00; }</code>.')"
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  body {",
+        "    background-color: #111111;",
+        "  }",
+        "</style>"
+      ],
+      "challengeType": 0,
+      "nameCn": "",
+      "descriptionCn": [],
+      "nameFr": "",
+      "descriptionFr": [],
+      "nameRu": "",
+      "descriptionRu": [],
+      "nameEs": "",
+      "descriptionEs": [],
+      "namePt": "",
+      "descriptionPt": [],
+      "nameDe": "",
+      "descriptionDe": [
+      ]
+    },
+    {
+      "id": "bad87fee1348bd9aedf08718",
+      "name": "Waypoint: Use RGB code for Colors Instead of Hex Code",
+      "dashedName": "waypoint-use-rgb-code-for-colors-instead-of-hex-code",
+      "difficulty": 0.063,
+      "description": [
+        "Use hex code instead of a color."
+      ],
+      "tests": [
+        "assert($('body').css('background-color') === 'rgb(255, 0, 0)', 'Give your <code>body</code> element the background-color of red.')",
+        "assert(editor.match(/rgb\\s?\\(\\s?255\\s?,\\s?0,\\s?0\\s?\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(255,0,0); }</code>.')"
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  body {",
+        "    background-color: #F00;",
+        "  }",
+        "</style>"
       ],
       "challengeType": 0,
       "nameCn": "",