From db6fcf7de62f43707a896b0577683f6f9f1b734a Mon Sep 17 00:00:00 2001
From: Quincy Larson <michaelqlarson@gmail.com>
Date: Sun, 31 May 2015 12:32:09 -0700
Subject: [PATCH] add div and background color challenges

---
 seed_data/challenges/basic-html5-and-css.json | 37 ++++++++++---------
 views/challengeMap/show.jade                  |  1 +
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/seed_data/challenges/basic-html5-and-css.json b/seed_data/challenges/basic-html5-and-css.json
index faa282b06eb..a7d7c835c05 100644
--- a/seed_data/challenges/basic-html5-and-css.json
+++ b/seed_data/challenges/basic-html5-and-css.json
@@ -2119,7 +2119,8 @@
       "tests": [
         "assert($('div').children('ol').length > 0, 'Wrap your <code>ol</code> element inside your <code>div</code> element.')",
         "assert($('div').children('p').length > 1, 'Wrap your <code>p</code> element inside your <code>div</code> element.')",
-        "assert($('div').children('ul').length > 0, 'Wrap your <code>ul</code> element inside your <code>div</code> element.')"
+        "assert($('div').children('ul').length > 0, 'Wrap your <code>ul</code> element inside your <code>div</code> element.')",
+        "assert(editor.match(/<\\/div>/g), 'Be sure that your <code>div</code> element has a closing tag.')"
       ],
       "challengeSeed": [
         "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@@ -2198,12 +2199,12 @@
       "difficulty": 0.048,
       "description": [
         "Create a class called \"gray-background\" with the background color of gray. Assign this class to your <code>div</code> element.",
-        ""
+        "You can set an element's background color with the \"background-color\" attribute.",
+        "For example, if you wanted an element's background color to be \"green\", you'd use <code>.green-background { background-color: green; }</code>."
       ],
       "tests": [
-        "assert($('div').children('ol').length > 0, 'Wrap your <code>ol</code> element inside your <code>div</code> element.')",
-        "assert($('div').children('p').length > 1, 'Wrap your <code>p</code> element inside your <code>div</code> element.')",
-        "assert($('div').children('ul').length > 0, 'Wrap your <code>ul</code> element inside your <code>div</code> element.')"
+        "assert($('div').hasClass('gray-background'), 'Give your <code>div</code> element the class \"gray-background\".')",
+        "assert($('.gray-background').css('background-color') === 'rgb(128, 128, 128)', 'Your <code>div</code> element should have a gray background.')"
       ],
       "challengeSeed": [
         "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@@ -2239,18 +2240,20 @@
         "",
         "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
         "",
-        "<p>Things cats love:</p>",
-        "<ul>",
-        "  <li>cat nip</li>",
-        "  <li>laser pointers</li>",
-        "  <li>lasagna</li>",
-        "</ul>",
-        "<p>Top 3 things cats hate:</p>",
-        "<ol>",
-        "  <li>flea treatment</li>",
-        "  <li>thunder</li>",
-        "  <li>other cats</li>",
-        "</ol>",
+        "<div>",
+        "  <p>Things cats love:</p>",
+        "  <ul>",
+        "    <li>cat nip</li>",
+        "    <li>laser pointers</li>",
+        "    <li>lasagna</li>",
+        "  </ul>",
+        "  <p>Top 3 things cats hate:</p>",
+        "  <ol>",
+        "    <li>flea treatment</li>",
+        "    <li>thunder</li>",
+        "    <li>other cats</li>",
+        "  </ol>",
+        "</div>",
         "",
         "<form action=\"/submit-cat-photo\">",
         "  <label><input type='radio' name='indoor-outdoor' checked> Indoor</label>",
diff --git a/views/challengeMap/show.jade b/views/challengeMap/show.jade
index ff326cec67a..a780b2030c0 100644
--- a/views/challengeMap/show.jade
+++ b/views/challengeMap/show.jade
@@ -53,6 +53,7 @@ block content
                         .hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.large-p.negative-10
                         .col-xs-12.col-sm-9.col-md-10
                             li.large-p.negative-10 300-hour Nonprofit Project
+                hr
 
                 for challengeBlock in challengeList
                     .row