freeCodeCamp/challenges/jquery-ajax-and-json.json

{
  "name":  "jQuery, Ajax, and JSON",
  "dashedName":  "jquery-ajax-and-json",
  "order": 0.004,
  "challenges": [
    {
      "id": "bad87fee1348bd9acdd08826",
      "name":  "Waypoint: Learn how Script Tags and Document Ready Work",
      "dashedName":  "waypoint-learn-how-script-tags-and-document-ready-work",
      "difficulty": 0.072,
      "description": [
        "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.')",
        "assert(editor.match(/<\\/script>/g) && editor.match(/<script/g) && editor.match(/<\\/script>/g).length === editor.match(/<script/g).length, 'Make sure your <code>script</code> element has a closing tag.')",
        "assert(editor.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'Add <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
        "assert(editor.match(/\\n\\s+?\\}\\);/g), 'Close your <code>$(document).ready(function() {</code> function with <code>\\}\\);</code>.')"
      ],
      "challengeSeed": [
        "",
        "",
        "<!-- 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>",
        "  </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>"
      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9bedc08826",
      "name":  "Waypoint: Target HTML Elements with Selectors Using jQuery",
      "dashedName":  "waypoint-target-html-elements-with-selectors-using-jquery",
      "difficulty": 0.073,
      "description": [
        "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.')",
        "assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
      ],
      "challengeSeed": [
        "fccss",
        "  $(document).ready(function() {",
        "",
        "  });",
        "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": "bad87fee1348bd9aedc08826",
      "name":  "Waypoint: Target Elements by Class Using jQuery",
      "dashedName":  "waypoint-target-elements-by-class-using-jquery",
      "difficulty": 0.074,
      "description": [
        "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\".')",
        "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');",
        "  });",
        "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": "bad87fee1348bd9aeda08826",
      "name":  "Waypoint: Target Elements by ID Using jQuery",
      "dashedName":  "waypoint-target-elements-by-id-using-jquery",
      "difficulty": 0.075,
      "description": [
        "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('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": [
        "fccss",
        "  $(document).ready(function() {",
        "",
        "  });",
        "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": "bad87fee1348bd9aed908826",
      "name":  "Waypoint: Change the CSS of an Element Using jQuery",
      "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.')",
        "assert(editor.match(/css.*,.*background-color.*gray.\\);/g), 'Select the element with the <code>id</code> of \"cat-photo-form\" give it the background color of gray.')"
      ],
      "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": "bad87fee1348bd9aed808826",
      "name":  "Waypoint: Disable an Element Using jQuery",
      "dashedName":  "waypoint-disable-an-element-using-jquery",
      "difficulty": 0.077,
      "description": [

      ],
      "tests": [
        "assert($('form button').attr('id') === 'submit-button', 'Add the ID of \"submit-button\" to your the <code>button</code> on your <code>form</code> element.')",
        "assert($('#submit-button') && $('#submit-button').prop('disabled'), 'Disable your element with the id of \"submit-button\".')"
      ],
      "challengeSeed": [
        "fccss",
        "  $(document).ready(function() {",
        "",
        "  });",
        "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": "bad87fee1348bd9aed708826",
      "name":  "Waypoint: Remove an Element Using jQuery",
      "dashedName":  "waypoint-remove-an-element-using-jquery",
      "difficulty": 0.078,
      "description": [

      ],
      "tests": [
        "assert($('img').length === 0, 'Use jQuery to remove your <code>img</code> element from your page.')",
        "assert(editor.match(/<img/g), 'You should still have an <code>img</code> element in your HTML but jQuery should remove it.')"
      ],
      "challengeSeed": [
        "fccss",
        "  $(document).ready(function() {",
        "",
        "  });",
        "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": "bad87fee1348bd9aed608826",
      "name":  "Waypoint: Use appendTo to Move Elements with jQuery",
      "dashedName":  "waypoint-use-appendto-to-move-elements-with-jquery",
      "difficulty": 0.079,
      "description": [
        "$('.btn').appendTo('#right-well')"
      ],
      "tests": [
        "assert($('#left-well').children().length === 0, 'Your left well should not have any buttons inside it.')",
        "assert($('#right-well').children().length === 6, 'Your right well should have all 6 buttons inside it.')"
      ],
      "challengeSeed": [
        "fccss",
        "  $(document).ready(function() {",
        "",
        "  });",
        "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": "bad87fee1348bd9aed508826",
      "name":  "Waypoint: Clone an Element Using jQuery",
      "dashedName":  "waypoint-clone-an-element-using-jquery",
      "difficulty": 0.080,
      "description": [
        "Clone the #target1 element and append it to the #left-well element. $('#target1').clone().appendTo('#left-well')"
      ],
      "tests": [
        "assert($('#left-well').children().length > 3, 'You should have at least 4 button elements in your #left-well element')"
      ],
      "challengeSeed": [
        "fccss",
        "  $(document).ready(function() {",
        "",
        "  });",
        "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": "bad87fee1348bd9aed308826",
      "name":  "Waypoint: Target the Parent of an Element Using jQuery",
      "dashedName":  "waypoint-target-the-parent-of-an-element-using-jquery",
      "difficulty": 0.082,
      "description": [
        "Change the parent of the #target1 element to have the background color of red.",
        "$('#target1').parent().css('background-color', 'red')"
      ],
      "tests": [

      ],
      "challengeSeed": [
        "fccss",
        "  $(document).ready(function() {",
        "",
        "  });",
        "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": "bad87fee1348bd9aed208826",
      "name":  "Waypoint: Target the Children of an Element Using jQuery",
      "dashedName":  "waypoint-target-the-children-of-an-element-using-jquery",
      "difficulty": 0.083,
      "description": [
        "Change the color of all the #left-well element's children to blue.",
        "$('#right-well').children().css('background-color', 'blue')"
      ],
      "tests": [

      ],
      "challengeSeed": [
        "fccss",
        "  $(document).ready(function() {",
        "",
        "  });",
        "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": "bad87fee1348bd9aed108826",
      "name":  "Waypoint: Target a Specific Child of an Element Using jQuery",
      "dashedName":  "waypoint-target-a-specific-child-of-an-element-using-jquery",
      "difficulty": 0.084,
      "description": [

      ],
      "tests": [

      ],
      "challengeSeed": [

      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9aed008826",
      "name":  "Waypoint: Target Even Numbered Elements Using jQuery",
      "dashedName":  "waypoint-target-even-numbered-elements-using-jquery",
      "difficulty": 0.085,
      "description": [

      ],
      "tests": [

      ],
      "challengeSeed": [

      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9aecc08826",
      "name":  "Waypoint: Read Data from an Element Using jQuery",
      "dashedName":  "Waypoint-read-data-from-an-element-using-jquery",
      "difficulty": 0.086,
      "description": [

      ],
      "tests": [

      ],
      "challengeSeed": [

      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9aebc08826",
      "name":  "Waypoint: Get Data from an URL Using jQuery",
      "dashedName":  "waypoint-get-data-from-a-url-using-jquery",
      "difficulty": 0.087,
      "description": [

      ],
      "tests": [

      ],
      "challengeSeed": [

      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9ae9c08826",
      "name":  "Waypoint: Loop through JSON Data Using jQuery",
      "dashedName":  "waypoint-loop-through-json-data-using-jquery",
      "difficulty": 0.088,
      "description": [

      ],
      "tests": [

      ],
      "challengeSeed": [

      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9ae8c08826",
      "name":  "Waypoint: Setup Click Events Using jQuery",
      "dashedName":  "waypoint-setup-click-events-using-jquery",
      "difficulty": 0.089,
      "description": [

      ],
      "tests": [

      ],
      "challengeSeed": [
        "fccss",
        "  $(document).ready(function() {",
        "",
        "  });",
        "fcces",
        "<!-- You shouldn't need to modify code below this line -->",
        "<button id='count-presses-button' class='btn btn-primary btn-block btn-lg>Press me</button>",
        "<span id='times-pressed'>"
      ],
      "challengeType": 0
    },
    {
      "id": "bad88fee1348bd9ae8c08826",
      "name":  "Waypoint: Wire AJAX Call into a jQuery Click Event",
      "dashedName":  "waypoint-wire-ajax-call-into-a-jquery-click-event",
      "difficulty": 0.090,
      "description": [
        "<img src='https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png'>"
      ],
      "tests": [

      ],
      "challengeSeed": [
        "fccss",
        "  var random = function() { return Math.floor(Math.random() * 3) }",
        "  $(document).ready(function() {",
        "<!-- Don't change code above this line -->",
        "",
        "    $('#cat-button').on('click', function() {",
        "      $.getJSON('/json/cats.json', function( json ) {",
        "        var kitten = json[random()];",
        "        $(\"<img src='\" + kitten.imageLink + \"'>\").appendTo('#output');",
        "        $(\"<h3>Code name: \" + kitten.codeNames[random()] + \"</h3>\").appendTo('#output');",
        "      });",
        "    });",
        "",
        "<!-- Don't change code below this line -->",
        "  });",
        "fcces",
        "<button id='cat-button' class='btn btn-primary btn-block btn-lg'>Cat Button</button>",
        "<div class='jumbotron' id='output'>",
        "</div>"
      ],
      "challengeType": 0
    }
  ]
}