add container-fluid divs to all bootstrap waypoints

seed/challenges/bootstrap.json

@@ -3,22 +3,20 @@
   "order": 0.003,
   "challenges": [
     {
-      "id": "bad87fee1348bd9acde08812",
+      "id": "bad87fee1348bd9acde08712",
-      "name": "Waypoint: Mobile Responsive Images",
+      "name": "Waypoint: Use Responsive Design with Bootstrap Fluid Containers",
-      "dashedName": "waypoint-mobile-responsive-images",
+      "dashedName": "waypoint-use-responsive-design-with-bootstrap-fluid-containers",
       "difficulty": 1,
       "description": [
-        "Now let's go back to our Cat Photo App. This time, we'll style it using the popular Bootstrap responsive CSS framework. First, add a new image with the <code>src</code> attribute of \"http://bit.ly/fcc-kittens2\", and add the \"img-responsive\" Bootstrap class to that image.",
+        "Now let's go back to our Cat Photo App. This time, we'll style it using the popular Bootstrap responsive CSS framework.",
-        "It would be great if the image could be exactly the width of our phone's screen.",
-        "Fortunately, we have access to a Responsive CSS Framework called Bootstrap. You can add Bootstrap to any app just by including it with <code>&#60;link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/&#62;</code> at the top of your HTML. But we've gone ahead and automatically added it to your Cat Photo App for you.",
         "Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name <code>Responsive Design</code>.",
         "With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.",
-        "Now all you need to do is add the \"img-responsive\" class to your image."
+        "You can add Bootstrap to any app just by including it with <code>&#60;link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/&#62;</code> at the top of your HTML. But we've gone ahead and automatically added it to your Cat Photo App for you.",
+        "To get started, we should wrap all of our HTML in a <code>div</code> element with the class \"fluid-container\"."
       ],
       "tests": [
-        "assert($('img').length > 1, 'You should have a total of two images.')",
+        "assert($('div').hasClass('container-fluid'), 'Your <code>div</code> element should have the class \"row\"')",
-        "assert($('img').hasClass('img-responsive'), 'Your new image should have the class \"img-responsive\".')",
+        "assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
-        "assert(new RegExp('http://bit.ly/fcc-kittens2', 'gi').test($('img.img-responsive').attr('src')), 'Add a second image with the <code>src</code> of <code>http&#58;//bit.ly/fcc-kittens2</code>.')"
       ],
       "challengeSeed": [
         "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@@ -88,6 +86,91 @@
       "namePt": "",
       "descriptionPt": []
     },
+    {
+      "id": "bad87fee1348bd9acde08812",
+      "name": "Waypoint: Make Images Mobile Responsive",
+      "dashedName": "waypoint-make-images-mobile-responsive",
+      "difficulty": 1,
+      "description": [
+        "First, Add a new image with the <code>src</code> attribute of \"http://bit.ly/fcc-kittens2\".",
+        "It would be great if this image could be exactly the width of our phone's screen.",
+        "Fortunately, with Bootstrap, all we need to do is add the \"img-responsive\" class to your image. Do this, and the image should perfectly fit the width of your page."
+      ],
+      "tests": [
+        "assert($('img').length > 1, 'You should have a total of two images.')",
+        "assert($('img').hasClass('img-responsive'), 'Your new image should have the class \"img-responsive\".')",
+        "assert(new RegExp('http://bit.ly/fcc-kittens2', 'gi').test($('img.img-responsive').attr('src')), 'Add a second image with the <code>src</code> of <code>http&#58;//bit.ly/fcc-kittens2</code>.')"
+      ],
+      "challengeSeed": [
+        "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
+        "<style>",
+        "  .red-text {",
+        "    color: red;",
+        "  }",
+        "",
+        "  h2 {",
+        "    font-family: Lobster, Monospace;",
+        "  }",
+        "",
+        "  p {",
+        "    font-size: 16px;",
+        "    font-family: Monospace;",
+        "  }",
+        "",
+        "  .thick-green-border {",
+        "    border-color: green;",
+        "    border-width: 10px;",
+        "    border-style: solid;",
+        "    border-radius: 50%;",
+        "  }",
+        "",
+        "  .smaller-image {",
+        "    width: 100px;",
+        "  }",
+        "</style>",
+        "",
+        "<div class='container-fluid'>",
+        "  <h2 class='red-text'>CatPhotoApp</h2>",
+        "",
+        "  <p>Click here for <a href='#'>cat photos</a>.</p>",
+        "",
+        "  <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>",
+        "  <form action=\"/submit-cat-photo\">",
+        "    <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
+        "    <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
+        "    <label><input type='checkbox' name='personality'> Loving</label>",
+        "    <label><input type='checkbox' name='personality'> Lazy</label>",
+        "    <label><input type='checkbox' name='personality'> Crazy</label>",
+        "    <input type='text' placeholder='cat photo URL' required>",
+        "    <button type='submit'>Submit</button>",
+        "  </form>",
+        "</div>"
+      ],
+      "challengeType": 0,
+      "nameCn": "",
+      "descriptionCn": [],
+      "nameFr": "",
+      "descriptionFr": [],
+      "nameRu": "",
+      "descriptionRu": [],
+      "nameEs": "",
+      "descriptionEs": [],
+      "namePt": "",
+      "descriptionPt": []
+    },
     {
       "id": "bad87fee1348bd8acde08812",
       "name": "Waypoint: Center Text with Bootstrap",
@@ -129,6 +212,7 @@
         "  }",
         "</style>",
         "",
+        "<div class='container-fluid'>",
         "  <h2 class='red-text'>CatPhotoApp</h2>",
         "",
         "  <p>Click here for <a href='#'>cat photos</a>.</p>",
@@ -156,7 +240,8 @@
         "    <label><input type='checkbox' name='personality'> Crazy</label>",
         "    <input type='text' placeholder='cat photo URL' required>",
         "    <button type='submit'>Submit</button>",
-        "</form>"
+        "  </form>",
+        "</div>"
       ],
       "challengeType": 0,
       "nameCn": "",
@@ -212,6 +297,7 @@
         "  }",
         "</style>",
         "",
+        "<div class='container-fluid'>",
         "  <h2 class='red-text text-center'>CatPhotoApp</h2>",
         "",
         "  <p>Click here for <a href='#'>cat photos</a>.</p>",
@@ -239,7 +325,8 @@
         "    <label><input type='checkbox' name='personality'> Crazy</label>",
         "    <input type='text' placeholder='cat photo URL' required>",
         "    <button type='submit'>Submit</button>",
-        "</form>"
+        "  </form>",,
+        "</div>"
       ],
       "challengeType": 0,
       "nameCn": "",
@@ -298,6 +385,7 @@
         "  }",
         "</style>",
         "",
+        "<div class='container-fluid'>",
         "  <h2 class='red-text text-center'>CatPhotoApp</h2>",
         "",
         "  <p>Click here for <a href='#'>cat photos</a>.</p>",
@@ -326,7 +414,8 @@
         "    <label><input type='checkbox' name='personality'> Crazy</label>",
         "    <input type='text' placeholder='cat photo URL' required>",
         "    <button type='submit'>Submit</button>",
-        "</form>"
+        "  </form>",
+        "</div>"
       ],
       "challengeType": 0,
       "nameCn": "",
@@ -383,6 +472,7 @@
         "  }",
         "</style>",
         "",
+        "<div class='container-fluid'>",
         "  <h2 class='red-text text-center'>CatPhotoApp</h2>",
         "",
         "  <p>Click here for <a href='#'>cat photos</a>.</p>",
@@ -411,7 +501,8 @@
         "    <label><input type='checkbox' name='personality'> Crazy</label>",
         "    <input type='text' placeholder='cat photo URL' required>",
         "    <button type='submit'>Submit</button>",
-        "</form>"
+        "  </form>",
+        "</div>"
       ],
       "challengeType": 0,
       "nameCn": "",
@@ -469,6 +560,7 @@
         "  }",
         "</style>",
         "",
+        "<div class='container-fluid'>",
         "  <h2 class='red-text text-center'>CatPhotoApp</h2>",
         "",
         "  <p>Click here for <a href='#'>cat photos</a>.</p>",
@@ -497,7 +589,8 @@
         "    <label><input type='checkbox' name='personality'> Crazy</label>",
         "    <input type='text' placeholder='cat photo URL' required>",
         "    <button type='submit'>Submit</button>",
-        "</form>"
+        "  </form>",
+        "</div>"
       ],
       "challengeType": 0,
       "nameCn": "",
@@ -555,6 +648,7 @@
         "  }",
         "</style>",
         "",
+        "<div class='container-fluid'>",
         "  <h2 class='red-text text-center'>CatPhotoApp</h2>",
         "",
         "  <p>Click here for <a href='#'>cat photos</a>.</p>",
@@ -584,7 +678,8 @@
         "    <label><input type='checkbox' name='personality'> Crazy</label>",
         "    <input type='text' placeholder='cat photo URL' required>",
         "    <button type='submit'>Submit</button>",
-        "</form>"
+        "  </form>",
+        "</div>"
       ],
       "challengeType": 0,
       "nameCn": "",
@@ -646,6 +741,7 @@
         "  }",
         "</style>",
         "",
+        "<div class='container-fluid'>",
         "  <h2 class='red-text text-center'>CatPhotoApp</h2>",
         "",
         "  <p>Click here for <a href='#'>cat photos</a>.</p>",
@@ -676,7 +772,8 @@
         "    <label><input type='checkbox' name='personality'> Crazy</label>",
         "    <input type='text' placeholder='cat photo URL' required>",
         "    <button type='submit'>Submit</button>",
-        "</form>"
+        "  </form>",
+        "</div>"
       ],
       "challengeType": 0,
       "nameCn": "",
@@ -735,6 +832,7 @@
         "  }",
         "</style>",
         "",
+        "<div class='container-fluid'>",
         "  <h2 class='red-text text-center'>CatPhotoApp</h2>",
         "",
         "  <p>Click here for <a href='#'>cat photos</a>.</p>",
@@ -742,7 +840,6 @@
         "  <a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
         "",
         "  <img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
-
         "  <div class='row'>",
         "    <div class='col-xs-4'>",
         "      <button class='btn btn-block btn-primary'>Like</button>",
@@ -774,7 +871,8 @@
         "    <label><input type='checkbox' name='personality'> Crazy</label>",
         "    <input type='text' placeholder='cat photo URL' required>",
         "    <button type='submit'>Submit</button>",
-        "</form>"
+        "  </form>",
+        "</div>"
       ],
       "challengeType": 0,
       "nameCn": "",
@@ -825,6 +923,7 @@
         "  }",
         "</style>",
         "",
+        "<div class='container-fluid'>",
         "  <h2 class='text-primary text-center'>CatPhotoApp</h2>",
         "",
         "  <a href='#'><img class='img-responsive thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
@@ -861,7 +960,8 @@
         "    <label><input type='checkbox' name='personality'> Crazy</label>",
         "    <input type='text' placeholder='cat photo URL' required>",
         "    <button type='submit'>Submit</button>",
-        "</form>"
+        "  </form>",
+        "</div>"
       ],
       "challengeType": 0,
       "nameCn": "",
@@ -905,6 +1005,7 @@
         "  }",
         "</style>",
         "",
+        "<div class='container-fluid'>",
         "  <div class='row'>",
         "    <div class='col-xs-8'>",
         "      <h2 class='text-primary text-center'>CatPhotoApp</h2>",
@@ -945,7 +1046,8 @@
         "    <label><input type='checkbox' name='personality'> Crazy</label>",
         "    <input type='text' placeholder='cat photo URL' required>",
         "    <button type='submit'>Submit</button>",
-        "</form>"
+        "  </form>",
+        "</div>"
       ],
       "challengeType": 0,
       "nameCn": "",
@@ -989,6 +1091,7 @@
         "  }",
         "</style>",
         "",
+        "<div class='container-fluid'>",
         "  <div class='row'>",
         "    <div class='col-xs-8'>",
         "      <h2 class='text-primary text-center'>CatPhotoApp</h2>",
@@ -1029,7 +1132,8 @@
         "    <label><input type='checkbox' name='personality'> Crazy</label>",
         "    <input type='text' placeholder='cat photo URL' required>",
         "    <button type='submit'>Submit</button>",
-        "</form>"
+        "  </form>",
+        "</div>"
       ],
       "challengeType": 0,
       "nameCn": "",
@@ -1072,6 +1176,7 @@
         "  }",
         "</style>",
         "",
+        "<div class='container-fluid'>",
         "  <div class='row'>",
         "    <div class='col-xs-8'>",
         "      <h2 class='text-primary text-center'>CatPhotoApp</h2>",
@@ -1112,7 +1217,8 @@
         "    <label><input type='checkbox' name='personality'> Crazy</label>",
         "    <input type='text' placeholder='cat photo URL' required>",
         "    <button type='submit'>Submit</button>",
-        "</form>"
+        "  </form>",
+        "</div>"
       ],
       "challengeType": 0,
       "nameCn": "",
@@ -1156,6 +1262,7 @@
         "",
         "</style>",
         "",
+        "<div class='container-fluid'>",
         "  <div class='row'>",
         "    <div class='col-xs-8'>",
         "      <h2 class='text-primary text-center'>CatPhotoApp</h2>",
@@ -1202,7 +1309,8 @@
         "    <label><input type='checkbox' name='personality'> Crazy</label>",
         "    <input type='text' placeholder='cat photo URL' required>",
         "    <button type='submit'>Submit</button>",
-        "</form>"
+        "  </form>",
+        "</div>"
       ],
       "challengeType": 0,
       "nameCn": "",
@@ -1247,6 +1355,7 @@
         "",
         "</style>",
         "",
+        "<div class='container-fluid'>",
         "  <div class='row'>",
         "    <div class='col-xs-8'>",
         "      <h2 class='text-primary text-center'>CatPhotoApp</h2>",
@@ -1301,7 +1410,8 @@
         "    </div>",
         "    <input type='text' placeholder='cat photo URL' required>",
         "    <button type='submit'>Submit</button>",
-        "</form>"
+        "  </form>",
+        "</div>"
       ],
       "challengeType": 0,
       "nameCn": "",
@@ -1347,6 +1457,7 @@
         "",
         "</style>",
         "",
+        "<div class='container-fluid'>",
         "  <div class='row'>",
         "    <div class='col-xs-8'>",
         "      <h2 class='text-primary text-center'>CatPhotoApp</h2>",
@@ -1401,7 +1512,8 @@
         "    </div>",
         "    <input type='text' class='form-control' placeholder='cat photo URL' required>",
         "    <button type='submit' class='btn btn-primary'><i class='fa fa-paper-plane'></i> Submit</button>",
-        "</form>"
+        "  </form>",
+        "</div>"
       ],
       "challengeType": 0,
       "nameCn": "",
@@ -1447,6 +1559,35 @@
       "namePt": "",
       "descriptionPt": []
     },
+    {
+      "id": "bad87fee1348bd9aec908746",
+      "name": "Waypoint: House our page within a Bootstrap Container Fluid Div",
+      "dashedName": "waypoint-house-our-page-within-a-bootstrap-container-fluid-div",
+      "difficulty": 18,
+      "description": [
+
+      ],
+      "tests": [
+        "assert($('div').hasClass('container-fluid'), 'Your <code>div</code> element should have the class \"row\"')",
+        "assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
+      ],
+      "challengeSeed": [
+        "<h3 class='text-primary text-center'>jQuery Playground</h3>",
+        "",
+        ""
+      ],
+      "challengeType": 0,
+      "nameCn": "",
+      "descriptionCn": [],
+      "nameFr": "",
+      "descriptionFr": [],
+      "nameRu": "",
+      "descriptionRu": [],
+      "nameEs": "",
+      "descriptionEs": [],
+      "namePt": "",
+      "descriptionPt": []
+    },
     {
       "id": "bad87fee1348bd9bec908846",
       "name": "Waypoint: Create a Bootstrap Row",
@@ -1460,7 +1601,9 @@
         "assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure your <code>div</code> element has a closing tag.')"
       ],
       "challengeSeed": [
+        "<div class='container-fluid'>",
         "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
+        "</div>",
         "",
         ""
       ],
@@ -1488,8 +1631,10 @@
         "assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure all your <code>div</code> elements have closing tags.')"
       ],
       "challengeSeed": [
+        "<div class='container-fluid'>",
         "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
         "  <div class='row'>",
+        "  </div>",
         "</div>"
       ],
       "challengeType": 0,
@@ -1518,12 +1663,14 @@
         "assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure all your <code>div</code> elements have closing tags.')"
       ],
       "challengeSeed": [
+        "<div class='container-fluid'>",
         "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
         "  <div class='row'>",
         "    <div class='col-xs-6'>",
         "    </div>",
         "    <div class='col-xs-6'>",
         "    </div>",
+        "  </div>",
         "</div>"
       ],
       "challengeType": 0,
@@ -1549,6 +1696,7 @@
 
       ],
       "challengeSeed": [
+        "<div class='container-fluid'>",
         "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
         "  <div class='row'>",
         "    <div class='col-xs-6'>",
@@ -1559,6 +1707,7 @@
         "      <div class='well'>",
         "      </div>",
         "    </div>",
+        "  </div>",
         "</div>"
       ],
       "challengeType": 0,
@@ -1584,6 +1733,7 @@
 
       ],
       "challengeSeed": [
+        "<div class='container-fluid'>",
         "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
         "  <div class='row'>",
         "    <div class='col-xs-6'>",
@@ -1600,6 +1750,7 @@
         "        <button></button>",
         "      </div>",
         "    </div>",
+        "  </div>",
         "</div>"
       ],
       "challengeType": 0,
@@ -1625,6 +1776,7 @@
 
       ],
       "challengeSeed": [
+        "<div class='container-fluid'>",
         "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
         "  <div class='row'>",
         "    <div class='col-xs-6'>",
@@ -1641,6 +1793,7 @@
         "        <button class='btn btn-default'></button>",
         "      </div>",
         "    </div>",
+        "  </div>",
         "</div>"
       ],
       "challengeType": 0,
@@ -1666,6 +1819,7 @@
 
       ],
       "challengeSeed": [
+        "<div class='container-fluid'>",
         "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
         "  <div class='row'>",
         "    <div class='col-xs-6'>",
@@ -1682,6 +1836,7 @@
         "        <button class='btn btn-default target'></button>",
         "      </div>",
         "    </div>",
+        "  </div>",
         "</div>"
       ],
       "challengeType": 0,
@@ -1707,6 +1862,7 @@
 
       ],
       "challengeSeed": [
+        "<div class='container-fluid'>",
         "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
         "  <div class='row'>",
         "    <div class='col-xs-6'>",
@@ -1723,6 +1879,7 @@
         "        <button class='btn btn-default target'></button>",
         "      </div>",
         "    </div>",
+        "  </div>",
         "</div>"
       ],
       "challengeType": 0,
@@ -1748,6 +1905,7 @@
 
       ],
       "challengeSeed": [
+        "<div class='container-fluid'>",
         "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
         "  <div class='row'>",
         "    <div class='col-xs-6'>",
@@ -1766,6 +1924,7 @@
         "        <button class='btn btn-default target'></button>",
         "      </div>",
         "    </div>",
+        "  </div>",
         "</div>"
       ],
       "challengeType": 0,
@@ -1791,6 +1950,7 @@
 
       ],
       "challengeSeed": [
+        "<div class='container-fluid'>",
         "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
         "  <div class='row'>",
         "    <div class='col-xs-6'>",
@@ -1809,6 +1969,7 @@
         "        <button class='btn btn-default target' id='target6'></button>",
         "      </div>",
         "    </div>",
+        "  </div>",
         "</div>"
       ],
       "challengeType": 0,
@@ -1835,6 +1996,7 @@
 
       ],
       "challengeSeed": [
+        "<div class='container-fluid'>",
         "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
         "  <div class='row'>",
         "    <div class='col-xs-6'>",
@@ -1853,6 +2015,7 @@
         "        <button class='btn btn-default target' id='target6'>#target6</button>",
         "      </div>",
         "    </div>",
+        "  </div>",
         "</div>"
       ],
       "challengeType": 0,