From 3af9507f89eb5a19e5bf3bb89b9d7971b5ff96fa Mon Sep 17 00:00:00 2001
From: Quincy Larson <michaelqlarson@gmail.com>
Date: Thu, 30 Jul 2015 17:31:47 -0700
Subject: [PATCH] add two new jquery challenges

---
 challenges/jquery-ajax-and-json.json | 475 ++++++++++++++++++---------
 1 file changed, 325 insertions(+), 150 deletions(-)

diff --git a/challenges/jquery-ajax-and-json.json b/challenges/jquery-ajax-and-json.json
index 3faaa74d22..5092435946 100644
--- a/challenges/jquery-ajax-and-json.json
+++ b/challenges/jquery-ajax-and-json.json
@@ -9,8 +9,11 @@
       "dashedName":  "waypoint-learn-how-script-tags-and-document-ready-work",
       "difficulty": 0.072,
       "description": [
-        "We've simplified our Cat Photo App and removed our <code>style</code> element. Add a <code>script</code> element to your page and create a <code>$(document).ready</code> function within it.",
-        "Add <code>$(document).ready(function() {</code> to your <code>script</code> element, and then close it on the following line with <code>});</code>."
+        "Now we're ready to learn jQuery, the most popular JavaScript tool of all time. Don't worry about JavaScript itself - we will cover it soon.",
+        "Before we can start using jQuery, we need to add some things to our HTML.",
+        "First, add a <code>script</code> element at the top of your page. Be sure to close it on the following line.",
+        "Your browser will run any JavaScript inside a <code>script</code> element, including jQuery.",
+        "Inside your <code>script</code> element, add this code: <code>$(document).ready(function() {</code> to your <code>script</code>. Then close it on the following line (still inside your <code>script</code> element) with: <code>});</code>"
       ],
       "tests": [
         "assert(editor.match(/<script>/g), 'Create a <code>script</code> element.')",
@@ -46,11 +49,15 @@
 
     {
       "id": "bad87fee1348bd9bedc08826",
-      "name":  "Waypoint: Target Elements by Selectors Using jQuery",
-      "dashedName":  "waypoint-target-elements-by-selectors-using-jquery",
+      "name":  "Waypoint: Target HTML Elements with Selectors Using jQuery",
+      "dashedName":  "waypoint-target-html-elements-with-selectors-using-jquery",
       "difficulty": 0.073,
       "description": [
-        "Make all <code>button</code> elements bounce <code>$('button').addClass('animated bounce')</code>."
+        "Now we have a \"document ready function\". We'll learn more about functions later. The important thing to know is that code you put inside this function will run as soon as your browser has loaded your page.",
+        "This is important because without your \"document ready function\", your code may run before your HTML is rendered, which would cause bugs.",
+        "Now let's write our first jQuery statement. All jQuery functions start with a <code>$</code>, usually referred to as a \"dollar sign operator\", or simply as \"bling\".",
+        "jQuery often \"selects\" an HTML element with a <code>selector</code>, then does something to that element.",
+        "For example, let's make all of your <code>button</code> elements bounce. Just add this code inside your \"document ready function\": <code>$('button').addClass('animated bounce')</code>."
       ],
       "tests": [
         "assert($('button').hasClass('animated') && $('button').hasClass('bounce'), 'Use the jQuery <code>addClass()</code> function to give the classes \"animated\" and \"bounce\" to your <code>img</code> element.')",
@@ -62,22 +69,27 @@
         "",
         "  });",
         "fcces",
+        "",
         "<!-- You shouldn't need to modify code below this line -->",
-        "<div class='row'>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#left-well</h4>",
-        "    <div class='well' id='left-well'>",
-        "      <button class='btn btn-default target' id='target1'>#target1</button>",
-        "      <button class='btn btn-default target' id='target2'>#target2</button>",
-        "      <button class='btn btn-default target' id='target3'>#target3</button>",
+        "",
+        "<div class='container-fluid'>",
+        "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
+        "  <div class='row'>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#left-well</h4>",
+        "      <div class='well' id='left-well'>",
+        "        <button class='btn btn-default target' id='target1'>#target1</button>",
+        "        <button class='btn btn-default target' id='target2'>#target2</button>",
+        "        <button class='btn btn-default target' id='target3'>#target3</button>",
+        "      </div>",
         "    </div>",
-        "  </div>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#right-well</h4>",
-        "    <div class='well' id='right-well'>",
-        "      <button class='btn btn-default target' id='target4'>#target4</button>",
-        "      <button class='btn btn-default target' id='target5'>#target5</button>",
-        "      <button class='btn btn-default target' id='target6'>#target6</button>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#right-well</h4>",
+        "      <div class='well' id='right-well'>",
+        "        <button class='btn btn-default target' id='target4'>#target4</button>",
+        "        <button class='btn btn-default target' id='target5'>#target5</button>",
+        "        <button class='btn btn-default target' id='target6'>#target6</button>",
+        "      </div>",
         "    </div>",
         "  </div>",
         "</div>"
@@ -91,7 +103,11 @@
       "dashedName":  "waypoint-target-elements-by-class-using-jquery",
       "difficulty": 0.074,
       "description": [
-        "Make all the <code>div</code> elements with class \"well\" shake. <code>$('.well').addClass('animated shake')</code>"
+        "You see how we made all of your <code>button</code> elements bounce? We selected them with <code>$('button')</code>, then we added some CSS classes to them with <code>.addClass('animated bounce');</code>.",
+        "First target your <code>div</code> elements with the class \"well\" by using the <code>$('.well')</code> selector.",
+        "Note that, just like with CSS declarations, you type a <code>.</code> before the class's name.",
+        "Then use jQuery's <code>.addClass()</code> function to add the classes \"animated\" and \"shake\".",
+        "Here's the full code that you'll want to type into your \"document ready function\": <code>$('.well').addClass('animated shake');</code>"
       ],
       "tests": [
         "assert($('.well').hasClass('animated') && $('.well').hasClass('shake'), 'Use the jQuery <code>addClass()</code> function to give the classes \"animated\" and \"shake\" to all your elements with the class \"well\".')",
@@ -100,25 +116,30 @@
       "challengeSeed": [
         "fccss",
         "  $(document).ready(function() {",
-        "",
+        "    $('button').addClass('animated bounce');",
         "  });",
         "fcces",
+        "",
         "<!-- You shouldn't need to modify code below this line -->",
-        "<div class='row'>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#left-well</h4>",
-        "    <div class='well' id='left-well'>",
-        "      <button class='btn btn-default target' id='target1'>#target1</button>",
-        "      <button class='btn btn-default target' id='target2'>#target2</button>",
-        "      <button class='btn btn-default target' id='target3'>#target3</button>",
+        "",
+        "<div class='container-fluid'>",
+        "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
+        "  <div class='row'>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#left-well</h4>",
+        "      <div class='well' id='left-well'>",
+        "        <button class='btn btn-default target' id='target1'>#target1</button>",
+        "        <button class='btn btn-default target' id='target2'>#target2</button>",
+        "        <button class='btn btn-default target' id='target3'>#target3</button>",
+        "      </div>",
         "    </div>",
-        "  </div>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#right-well</h4>",
-        "    <div class='well' id='right-well'>",
-        "      <button class='btn btn-default target' id='target4'>#target4</button>",
-        "      <button class='btn btn-default target' id='target5'>#target5</button>",
-        "      <button class='btn btn-default target' id='target6'>#target6</button>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#right-well</h4>",
+        "      <div class='well' id='right-well'>",
+        "        <button class='btn btn-default target' id='target4'>#target4</button>",
+        "        <button class='btn btn-default target' id='target5'>#target5</button>",
+        "        <button class='btn btn-default target' id='target6'>#target6</button>",
+        "      </div>",
         "    </div>",
         "  </div>",
         "</div>"
@@ -131,10 +152,120 @@
       "dashedName":  "waypoint-target-elements-by-id-using-jquery",
       "difficulty": 0.075,
       "description": [
-        "Make all the <code>button</code> element with the id \"target3\" pulse. <code>$('#target3').addClass('animated pulse')</code>."
+        "You can also target elements by their id attributes.",
+        "First target your <code>div</code> element with the class \"target3\" by using the <code>$('#target3')</code> selector.",
+        "Note that, just like with CSS declarations, you type a <code>#</code> before the class's name.",
+        "Then use jQuery's <code>.addClass()</code> function to add the classes \"animated\" and \"fadeOut\".",
+        "Make all the <code>button</code> element with the id \"target3\" fadeOut. <code>$('#target3').addClass('animated fadeOut')</code>."
       ],
       "tests": [
-        "$('#target3').hasClass('animated') && $('#target3').hasClass('pulse'), 'Select the <code>button</code>element with the <code>id</code> of \"target3\" and use the jQuery <code>addClass()</code> function to give it the classes of \"animated\" and \"pulse\".')",
+        "$('#target3').hasClass('animated') && $('#target3').hasClass('fadeOut'), 'Select the <code>button</code>element with the <code>id</code> of \"target3\" and use the jQuery <code>addClass()</code> function to give it the classes of \"animated\" and \"fadeOut\".')",
+        "assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
+      ],
+      "challengeSeed": [
+        "fccss",
+        "  $(document).ready(function() {",
+        "    $('button').addClass('animated bounce');",
+        "    $('.well').addClass('animated shake');",
+        "",
+        "  });",
+        "fcces",
+        "",
+        "<!-- You shouldn't need to modify code below this line -->",
+        "",
+        "<div class='container-fluid'>",
+        "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
+        "  <div class='row'>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#left-well</h4>",
+        "      <div class='well' id='left-well'>",
+        "        <button class='btn btn-default target' id='target1'>#target1</button>",
+        "        <button class='btn btn-default target' id='target2'>#target2</button>",
+        "        <button class='btn btn-default target' id='target3'>#target3</button>",
+        "      </div>",
+        "    </div>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#right-well</h4>",
+        "      <div class='well' id='right-well'>",
+        "        <button class='btn btn-default target' id='target4'>#target4</button>",
+        "        <button class='btn btn-default target' id='target5'>#target5</button>",
+        "        <button class='btn btn-default target' id='target6'>#target6</button>",
+        "      </div>",
+        "    </div>",
+        "  </div>",
+        "</div>"
+      ],
+      "challengeType": 0
+    },
+
+    {
+      "id": "bad87fee1348bd9aeda08726",
+      "name":  "Waypoint: Delete your jQuery Functions",
+      "dashedName":  "waypoint-delete-your-jquery-functions",
+      "difficulty": 0.075,
+      "description": [
+        "These animations were cool at first, but now they're getting kind of distracting.",
+        "Delete all three of these jQuery functions from your \"document ready function\", but leave your \"document ready function\" itself intact."
+      ],
+      "tests": [
+        "assert(!editor.match(/e\\'\\);/g) && !editor.match(/t\\'\\);/g), 'Delete all three of your jQuery functions from your \"document ready function\".')",
+        "assert(editor.match(/<script>/g), 'Leave your <code>script</code> element intact.')",
+        "assert(editor.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'Leave your <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
+        "assert(editor.match(/\\n\\s+?\\}\\);/g), 'Leave your your \"document ready function\" closing <code>\\}\\);</code> intact.')",
+        "assert(editor.match(/<\\/script>/g) && editor.match(/<script/g) && editor.match(/<\\/script>/g).length === editor.match(/<script/g).length, 'Leave your <code>script</code> element closing tag intact.')"
+      ],
+      "challengeSeed": [
+        "fccss",
+        "  $(document).ready(function() {",
+        "    $('button').addClass('animated bounce');",
+        "    $('.well').addClass('animated shake');",
+        "    $('#target3').addClass('animated fadeOut');",
+        "",
+        "  });",
+        "fcces",
+        "",
+        "<!-- You shouldn't need to modify code below this line -->",
+        "",
+        "<div class='container-fluid'>",
+        "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
+        "  <div class='row'>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#left-well</h4>",
+        "      <div class='well' id='left-well'>",
+        "        <button class='btn btn-default target' id='target1'>#target1</button>",
+        "        <button class='btn btn-default target' id='target2'>#target2</button>",
+        "        <button class='btn btn-default target' id='target3'>#target3</button>",
+        "      </div>",
+        "    </div>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#right-well</h4>",
+        "      <div class='well' id='right-well'>",
+        "        <button class='btn btn-default target' id='target4'>#target4</button>",
+        "        <button class='btn btn-default target' id='target5'>#target5</button>",
+        "        <button class='btn btn-default target' id='target6'>#target6</button>",
+        "      </div>",
+        "    </div>",
+        "  </div>",
+        "</div>"
+      ],
+      "challengeType": 0
+    },
+    {
+      "id": "bad87fee1348bd9aed908626",
+      "name":  "Waypoint: Target the same element with multiple jQuery Selectors",
+      "dashedName":  "waypoint-target-the-same-element-with-multiple-jQuery-Selectors",
+      "difficulty": 0.076,
+      "description": [
+        "Now you know three ways of targeting elements: by type (<code>$('button')</code>), by class (<code>($('.btn')</code>), and by id (<code>($'#target1')</code>).",
+        "Use each of these jQuery selectors to target your <code>button</code> element with the class \"btn\" and the id \"target1\".",
+        "Use the <code>addClass()</code> jQuery function to give the element one new class for each selector: \"animated\", \"shake\", and \"button-primary\"."
+      ],
+      "tests": [
+        "assert(editor.match(/\\$\\(\\'button\\'\\)/g), 'Use the <code>$\\(\\'button\\'\\)</code> selector.')",
+        "assert(editor.match(/\\$\\(\\'\\.btn\\'\\)/g), 'Use the <code>$\\(\\'.btn\\'\\)</code> selector.')",
+        "assert(editor.match(/\\$\\(\\'#target1\\'\\)/g), 'Use the <code>$\\(\\'#target1\\'\\)</code> selector.')",
+        "assert(editor.match(/addClass/g) && editor.match(/addClass/g).length > 2, 'Only add one class with each of your three selectors.')",
+        "assert($('#target1').hasClass('animated') && $('#target1').hasClass('shake') && $('#target1').hasClass('btn-primary'), 'Your  \"#target1\" element should have the classes \"animated\"&#130; \"shake\" and \"btn-primary\".')",
         "assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
       ],
       "challengeSeed": [
@@ -143,22 +274,27 @@
         "",
         "  });",
         "fcces",
+        "",
         "<!-- You shouldn't need to modify code below this line -->",
-        "<div class='row'>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#left-well</h4>",
-        "    <div class='well' id='left-well'>",
-        "      <button class='btn btn-default target' id='target1'>#target1</button>",
-        "      <button class='btn btn-default target' id='target2'>#target2</button>",
-        "      <button class='btn btn-default target' id='target3'>#target3</button>",
+        "",
+        "<div class='container-fluid'>",
+        "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
+        "  <div class='row'>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#left-well</h4>",
+        "      <div class='well' id='left-well'>",
+        "        <button class='btn btn-default target' id='target1'>#target1</button>",
+        "        <button class='btn btn-default target' id='target2'>#target2</button>",
+        "        <button class='btn btn-default target' id='target3'>#target3</button>",
+        "      </div>",
         "    </div>",
-        "  </div>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#right-well</h4>",
-        "    <div class='well' id='right-well'>",
-        "      <button class='btn btn-default target' id='target4'>#target4</button>",
-        "      <button class='btn btn-default target' id='target5'>#target5</button>",
-        "      <button class='btn btn-default target' id='target6'>#target6</button>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#right-well</h4>",
+        "      <div class='well' id='right-well'>",
+        "        <button class='btn btn-default target' id='target4'>#target4</button>",
+        "        <button class='btn btn-default target' id='target5'>#target5</button>",
+        "        <button class='btn btn-default target' id='target6'>#target6</button>",
+        "      </div>",
         "    </div>",
         "  </div>",
         "</div>"
@@ -172,7 +308,8 @@
       "dashedName":  "waypoint-change-the-css-of-an-element-using-jquery",
       "difficulty": 0.076,
       "description": [
-
+        "We can also change the CSS of an HTML element with jQuery.",
+        ""
       ],
       "tests": [
         "assert(!editor.match(/nce\\'\\)\\;/g) && !editor.match(/ke\\'\\)\\;/g), 'Delete your <code>img</code> element selector statement and your \".btn\" selector statement.')",
@@ -181,25 +318,33 @@
       "challengeSeed": [
         "fccss",
         "  $(document).ready(function() {",
+        "    $('button').addClass('animated bounce');",
+        "    $('.well').addClass('animated shake');",
+        "    $('#target3').addClass('animated fadeOut');",
         "",
         "  });",
         "fcces",
+        "",
         "<!-- You shouldn't need to modify code below this line -->",
-        "<div class='row'>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#left-well</h4>",
-        "    <div class='well' id='left-well'>",
-        "      <button class='btn btn-default target' id='target1'>#target1</button>",
-        "      <button class='btn btn-default target' id='target2'>#target2</button>",
-        "      <button class='btn btn-default target' id='target3'>#target3</button>",
+        "",
+        "<div class='container-fluid'>",
+        "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
+        "  <div class='row'>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#left-well</h4>",
+        "      <div class='well' id='left-well'>",
+        "        <button class='btn btn-default target' id='target1'>#target1</button>",
+        "        <button class='btn btn-default target' id='target2'>#target2</button>",
+        "        <button class='btn btn-default target' id='target3'>#target3</button>",
+        "      </div>",
         "    </div>",
-        "  </div>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#right-well</h4>",
-        "    <div class='well' id='right-well'>",
-        "      <button class='btn btn-default target' id='target4'>#target4</button>",
-        "      <button class='btn btn-default target' id='target5'>#target5</button>",
-        "      <button class='btn btn-default target' id='target6'>#target6</button>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#right-well</h4>",
+        "      <div class='well' id='right-well'>",
+        "        <button class='btn btn-default target' id='target4'>#target4</button>",
+        "        <button class='btn btn-default target' id='target5'>#target5</button>",
+        "        <button class='btn btn-default target' id='target6'>#target6</button>",
+        "      </div>",
         "    </div>",
         "  </div>",
         "</div>"
@@ -225,22 +370,27 @@
         "",
         "  });",
         "fcces",
+        "",
         "<!-- You shouldn't need to modify code below this line -->",
-        "<div class='row'>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#left-well</h4>",
-        "    <div class='well' id='left-well'>",
-        "      <button class='btn btn-default target' id='target1'>#target1</button>",
-        "      <button class='btn btn-default target' id='target2'>#target2</button>",
-        "      <button class='btn btn-default target' id='target3'>#target3</button>",
+        "",
+        "<div class='container-fluid'>",
+        "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
+        "  <div class='row'>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#left-well</h4>",
+        "      <div class='well' id='left-well'>",
+        "        <button class='btn btn-default target' id='target1'>#target1</button>",
+        "        <button class='btn btn-default target' id='target2'>#target2</button>",
+        "        <button class='btn btn-default target' id='target3'>#target3</button>",
+        "      </div>",
         "    </div>",
-        "  </div>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#right-well</h4>",
-        "    <div class='well' id='right-well'>",
-        "      <button class='btn btn-default target' id='target4'>#target4</button>",
-        "      <button class='btn btn-default target' id='target5'>#target5</button>",
-        "      <button class='btn btn-default target' id='target6'>#target6</button>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#right-well</h4>",
+        "      <div class='well' id='right-well'>",
+        "        <button class='btn btn-default target' id='target4'>#target4</button>",
+        "        <button class='btn btn-default target' id='target5'>#target5</button>",
+        "        <button class='btn btn-default target' id='target6'>#target6</button>",
+        "      </div>",
         "    </div>",
         "  </div>",
         "</div>"
@@ -266,22 +416,27 @@
         "",
         "  });",
         "fcces",
+        "",
         "<!-- You shouldn't need to modify code below this line -->",
-        "<div class='row'>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#left-well</h4>",
-        "    <div class='well' id='left-well'>",
-        "      <button class='btn btn-default target' id='target1'>#target1</button>",
-        "      <button class='btn btn-default target' id='target2'>#target2</button>",
-        "      <button class='btn btn-default target' id='target3'>#target3</button>",
+        "",
+        "<div class='container-fluid'>",
+        "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
+        "  <div class='row'>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#left-well</h4>",
+        "      <div class='well' id='left-well'>",
+        "        <button class='btn btn-default target' id='target1'>#target1</button>",
+        "        <button class='btn btn-default target' id='target2'>#target2</button>",
+        "        <button class='btn btn-default target' id='target3'>#target3</button>",
+        "      </div>",
         "    </div>",
-        "  </div>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#right-well</h4>",
-        "    <div class='well' id='right-well'>",
-        "      <button class='btn btn-default target' id='target4'>#target4</button>",
-        "      <button class='btn btn-default target' id='target5'>#target5</button>",
-        "      <button class='btn btn-default target' id='target6'>#target6</button>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#right-well</h4>",
+        "      <div class='well' id='right-well'>",
+        "        <button class='btn btn-default target' id='target4'>#target4</button>",
+        "        <button class='btn btn-default target' id='target5'>#target5</button>",
+        "        <button class='btn btn-default target' id='target6'>#target6</button>",
+        "      </div>",
         "    </div>",
         "  </div>",
         "</div>"
@@ -307,22 +462,27 @@
         "",
         "  });",
         "fcces",
+        "",
         "<!-- You shouldn't need to modify code below this line -->",
-        "<div class='row'>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#left-well</h4>",
-        "    <div class='well' id='left-well'>",
-        "      <button class='btn btn-default target' id='target1'>#target1</button>",
-        "      <button class='btn btn-default target' id='target2'>#target2</button>",
-        "      <button class='btn btn-default target' id='target3'>#target3</button>",
+        "",
+        "<div class='container-fluid'>",
+        "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
+        "  <div class='row'>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#left-well</h4>",
+        "      <div class='well' id='left-well'>",
+        "        <button class='btn btn-default target' id='target1'>#target1</button>",
+        "        <button class='btn btn-default target' id='target2'>#target2</button>",
+        "        <button class='btn btn-default target' id='target3'>#target3</button>",
+        "      </div>",
         "    </div>",
-        "  </div>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#right-well</h4>",
-        "    <div class='well' id='right-well'>",
-        "      <button class='btn btn-default target' id='target4'>#target4</button>",
-        "      <button class='btn btn-default target' id='target5'>#target5</button>",
-        "      <button class='btn btn-default target' id='target6'>#target6</button>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#right-well</h4>",
+        "      <div class='well' id='right-well'>",
+        "        <button class='btn btn-default target' id='target4'>#target4</button>",
+        "        <button class='btn btn-default target' id='target5'>#target5</button>",
+        "        <button class='btn btn-default target' id='target6'>#target6</button>",
+        "      </div>",
         "    </div>",
         "  </div>",
         "</div>"
@@ -347,22 +507,27 @@
         "",
         "  });",
         "fcces",
+        "",
         "<!-- You shouldn't need to modify code below this line -->",
-        "<div class='row'>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#left-well</h4>",
-        "    <div class='well' id='left-well'>",
-        "      <button class='btn btn-default target' id='target1'>#target1</button>",
-        "      <button class='btn btn-default target' id='target2'>#target2</button>",
-        "      <button class='btn btn-default target' id='target3'>#target3</button>",
+        "",
+        "<div class='container-fluid'>",
+        "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
+        "  <div class='row'>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#left-well</h4>",
+        "      <div class='well' id='left-well'>",
+        "        <button class='btn btn-default target' id='target1'>#target1</button>",
+        "        <button class='btn btn-default target' id='target2'>#target2</button>",
+        "        <button class='btn btn-default target' id='target3'>#target3</button>",
+        "      </div>",
         "    </div>",
-        "  </div>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#right-well</h4>",
-        "    <div class='well' id='right-well'>",
-        "      <button class='btn btn-default target' id='target4'>#target4</button>",
-        "      <button class='btn btn-default target' id='target5'>#target5</button>",
-        "      <button class='btn btn-default target' id='target6'>#target6</button>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#right-well</h4>",
+        "      <div class='well' id='right-well'>",
+        "        <button class='btn btn-default target' id='target4'>#target4</button>",
+        "        <button class='btn btn-default target' id='target5'>#target5</button>",
+        "        <button class='btn btn-default target' id='target6'>#target6</button>",
+        "      </div>",
         "    </div>",
         "  </div>",
         "</div>"
@@ -388,22 +553,27 @@
         "",
         "  });",
         "fcces",
+        "",
         "<!-- You shouldn't need to modify code below this line -->",
-        "<div class='row'>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#left-well</h4>",
-        "    <div class='well' id='left-well'>",
-        "      <button class='btn btn-default target' id='target1'>#target1</button>",
-        "      <button class='btn btn-default target' id='target2'>#target2</button>",
-        "      <button class='btn btn-default target' id='target3'>#target3</button>",
+        "",
+        "<div class='container-fluid'>",
+        "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
+        "  <div class='row'>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#left-well</h4>",
+        "      <div class='well' id='left-well'>",
+        "        <button class='btn btn-default target' id='target1'>#target1</button>",
+        "        <button class='btn btn-default target' id='target2'>#target2</button>",
+        "        <button class='btn btn-default target' id='target3'>#target3</button>",
+        "      </div>",
         "    </div>",
-        "  </div>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#right-well</h4>",
-        "    <div class='well' id='right-well'>",
-        "      <button class='btn btn-default target' id='target4'>#target4</button>",
-        "      <button class='btn btn-default target' id='target5'>#target5</button>",
-        "      <button class='btn btn-default target' id='target6'>#target6</button>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#right-well</h4>",
+        "      <div class='well' id='right-well'>",
+        "        <button class='btn btn-default target' id='target4'>#target4</button>",
+        "        <button class='btn btn-default target' id='target5'>#target5</button>",
+        "        <button class='btn btn-default target' id='target6'>#target6</button>",
+        "      </div>",
         "    </div>",
         "  </div>",
         "</div>"
@@ -429,22 +599,27 @@
         "",
         "  });",
         "fcces",
+        "",
         "<!-- You shouldn't need to modify code below this line -->",
-        "<div class='row'>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#left-well</h4>",
-        "    <div class='well' id='left-well'>",
-        "      <button class='btn btn-default target' id='target1'>#target1</button>",
-        "      <button class='btn btn-default target' id='target2'>#target2</button>",
-        "      <button class='btn btn-default target' id='target3'>#target3</button>",
+        "",
+        "<div class='container-fluid'>",
+        "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
+        "  <div class='row'>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#left-well</h4>",
+        "      <div class='well' id='left-well'>",
+        "        <button class='btn btn-default target' id='target1'>#target1</button>",
+        "        <button class='btn btn-default target' id='target2'>#target2</button>",
+        "        <button class='btn btn-default target' id='target3'>#target3</button>",
+        "      </div>",
         "    </div>",
-        "  </div>",
-        "  <div class='col-xs-6'>",
-        "    <h4>#right-well</h4>",
-        "    <div class='well' id='right-well'>",
-        "      <button class='btn btn-default target' id='target4'>#target4</button>",
-        "      <button class='btn btn-default target' id='target5'>#target5</button>",
-        "      <button class='btn btn-default target' id='target6'>#target6</button>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#right-well</h4>",
+        "      <div class='well' id='right-well'>",
+        "        <button class='btn btn-default target' id='target4'>#target4</button>",
+        "        <button class='btn btn-default target' id='target5'>#target5</button>",
+        "        <button class='btn btn-default target' id='target6'>#target6</button>",
+        "      </div>",
         "    </div>",
         "  </div>",
         "</div>"