From 043ef69d2fc2df54f14b9c0c15c9035d96f48487 Mon Sep 17 00:00:00 2001
From: Quincy Larson <michaelqlarson@gmail.com>
Date: Thu, 13 Aug 2015 12:55:50 -0700
Subject: [PATCH] start adding json challenges

---
 challenges/basic-ziplines.json     |   4 +-
 challenges/json-apis-and-ajax.json | 240 ++++++++++++++++++-----------
 2 files changed, 154 insertions(+), 90 deletions(-)

diff --git a/challenges/basic-ziplines.json b/challenges/basic-ziplines.json
index 97de497c24..96a648e0a9 100644
--- a/challenges/basic-ziplines.json
+++ b/challenges/basic-ziplines.json
@@ -9,9 +9,7 @@
       "challengeSeed": ["125658022"],
       "description": [
         "Now you're ready to start our Zipline challenges. These front-end development challenges will give you many opportunities to apply the HTML, CSS, jQuery and JavaScript you've learned to build static (database-less) applications.",
-        "For many of these challenges, you will be using JSON data from external API endpoints, such as Twitch.tv and Twitter. Note that you don't need to have a database to use these data.",
-        "The easiest way to manipulate these data is with <a href='http://api.jquery.com/jquery.getjson/' target='_blank'>jQuery $.getJSON()</a>.",
-        "Whatever you do, don't get discouraged! Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>RSAP</a> if you get stuck.",
+         "Whatever you do, don't get discouraged! Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Post</a> if you get stuck.",
         "We'll build these challenges using CodePen, a popular tool for creating, sharing, and discovering static web applications.",
         "Go to <a href='http://codepen.io' target='_blank'>http://codepen.io</a> and create an account.",
         "Click your user image in the top right corner, then click the \"New pen\" button that drops down.",
diff --git a/challenges/json-apis-and-ajax.json b/challenges/json-apis-and-ajax.json
index b62543fb90..a736d722e3 100644
--- a/challenges/json-apis-and-ajax.json
+++ b/challenges/json-apis-and-ajax.json
@@ -23,12 +23,12 @@
         "",
         "<!-- You shouldn't need to modify code below this line -->",
         "",
-        "<div class='container-fluid'>",
+        "<div class=\"container-fluid\">",
         "  <form action=\"/submit-cat-photo\">",
-        "    <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
-        "    <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
-        "    <input type='text' placeholder='cat photo URL' required>",
-        "    <button type='submit'>Submit</button>",
+        "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
+        "    <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
+        "    <input type=\"text\" placeholder=\"cat photo URL\" required>",
+        "    <button type=\"submit\">Submit</button>",
         "  </form>",
         "</div>"
       ],
@@ -36,6 +36,63 @@
       "type": "waypoint"
     },
 
+    {
+      "id": "bad87fee1348bd9aeca08826",
+      "title":  "Learn how JSON works",
+      "difficulty": 3.19,
+      "description": [
+        "JSON stands for \"JavaScript Object Notation\". It\"s how you create objects in JavaScript.",
+        "JSON is a series of \"key-value pairs\". Everything on the left of the colon (<code>:</code>) is the \"key\" you use to unlock the \"value\" on the right of the colon."
+      ],
+      "tests": [
+
+      ],
+      "challengeSeed": [
+        "fccss",
+        "catPhotoJSON = [",
+        "    {",
+        "      \"id\": 0,",
+        "      \"imageLink\": \"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg\",",
+        "      \"codeNames\": [",
+        "        \"Juggernaut\",",
+        "        \"Mrs. Wallace\",",
+        "        \"Buttercup\"",
+        "      ]",
+        "    },",
+        "    {",
+        "      \"id\": 1,",
+        "      \"imageLink\": \"https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg\",",
+        "      \"codeNames\": [",
+        "        \"Oscar\",",
+        "        \"Scrooge\",",
+        "        \"Tyrion\"",
+        "      ]",
+        "    },",
+        "    {",
+        "      \"id\": 2,",
+        "      \"imageLink\": \"https://s3.amazonaws.com/freecodecamp/mischievous-cat.jpg\",",
+        "      \"codeNames\": [",
+        "        \"The Doctor\",",
+        "        \"Loki\",",
+        "        \"Joker\"",
+        "      ]",
+        "    }",
+        "  ]",
+        "",
+        "<code>  });</code>",
+        "fcces",
+        "",
+        "<!-- You shouldn't need to modify code below this line -->",
+        "",
+        "<div class=\"container-fluid\">",
+        "  <div class=\"jumbotron\" id=\"output\">",
+        "  </div>",
+        "</div>"
+      ],
+      "challengeType": 0,
+      "type": "waypoint"
+    },
+
     {
       "id": "bad84fee1348bd9aecc58826",
       "title": "Read Data from an Element Using jQuery",
@@ -50,7 +107,7 @@
       "challengeSeed": [
         "fccss",
         "  $(document).ready(function() {",
-        "    $('button').on('click', function() {",
+        "    $(\"button\").on(\"click\", function() {",
         "",
         "    });",
         "  });",
@@ -58,17 +115,17 @@
         "",
         "<!-- You shouldn't need to modify code below this line -->",
         "",
-        "<div class='container-fluid'>",
-        "  <div class='row'>",
-        "    <div class='col-xs-2'>",
-        "      <input type='checkbox' id='check-me'>",
+        "<div class=\"container-fluid\">",
+        "  <div class=\"row\">",
+        "    <div class=\"col-xs-2\">",
+        "      <input type=\"checkbox\" id=\"check-me\">",
         "    </div>",
-        "    <div class='col-xs-10'>",
+        "    <div class=\"col-xs-10\">",
         "      <p>#check-me</p>",
         "    </div>",
-        "  <button class='btn btn-block btn-primary'>#click-me</button>",
+        "  <button class=\"btn btn-block btn-primary\">#click-me</button>",
         "  <span>Is the checkbox checked?</span>",
-        "  <span id='checked-state'></span>",
+        "  <span id=\"checked-state\"></span>",
         "</div>"
       ],
       "challengeType": 0,
@@ -89,25 +146,25 @@
       "challengeSeed": [
         "fccss",
         "  $(document).ready(function() {",
-        "    $('button').on('click', function() {",
-        "      $('#click-me').addClass('animated shake');",
+        "    $(\"button\").on(\"click\", function() {",
+        "      $(\"#click-me\").addClass(\"animated shake\");",
         "    });",
         "  });",
         "fcces",
         "",
         "<!-- You shouldn't need to modify code below this line -->",
         "",
-        "<div class='container-fluid'>",
-        "  <div class='row'>",
-        "    <div class='col-xs-2'>",
-        "      <input type='checkbox' id='check-me'>",
+        "<div class=\"container-fluid\">",
+        "  <div class=\"row\">",
+        "    <div class=\"col-xs-2\">",
+        "      <input type=\"checkbox\" id=\"check-me\">",
         "    </div>",
-        "    <div class='col-xs-10'>",
+        "    <div class=\"col-xs-10\">",
         "      <p>#check-me</p>",
         "    </div>",
-        "  <button class='btn btn-block btn-primary'>#click-me</button>",
+        "  <button class=\"btn btn-block btn-primary\">#click-me</button>",
         "  <span>Is the checkbox checked?</span>",
-        "  <span id='checked-state'></span>",
+        "  <span id=\"checked-state\"></span>",
         "</div>"
       ],
       "challengeType": 0,
@@ -128,26 +185,26 @@
       "challengeSeed": [
         "fccss",
         "  $(document).ready(function() {",
-        "    $('button').on('click', function() {",
-        "      $('#click-me').addClass('animated shake');",
-        "      $('#checked-state').text('happy text');",
+        "    $(\"button\").on(\"click\", function() {",
+        "      $(\"#click-me\").addClass(\"animated shake\");",
+        "      $(\"#checked-state\").text(\"happy text\");",
         "    });",
         "  });",
         "fcces",
         "",
         "<!-- You shouldn't need to modify code below this line -->",
         "",
-        "<div class='container-fluid'>",
-        "  <div class='row'>",
-        "    <div class='col-xs-2'>",
-        "      <input type='checkbox' id='check-me'>",
+        "<div class=\"container-fluid\">",
+        "  <div class=\"row\">",
+        "    <div class=\"col-xs-2\">",
+        "      <input type=\"checkbox\" id=\"check-me\">",
         "    </div>",
-        "    <div class='col-xs-10'>",
+        "    <div class=\"col-xs-10\">",
         "      <p>#check-me</p>",
         "    </div>",
-        "  <button class='btn btn-block btn-primary'>#click-me</button>",
+        "  <button class=\"btn btn-block btn-primary\">#click-me</button>",
         "  <span>Is the checkbox checked?</span>",
-        "  <span id='checked-state'></span>",
+        "  <span id=\"checked-state\"></span>",
         "</div>"
       ],
       "challengeType": 0,
@@ -168,26 +225,26 @@
       "challengeSeed": [
         "fccss",
         "  $(document).ready(function() {",
-        "    $('button').on('click', function() {",
-        "      $('#click-me').addClass('animated shake');",
-        "      $('#checked-state').text($('#check-me').prop('checked'));",
+        "    $(\"button\").on(\"click\", function() {",
+        "      $(\"#click-me\").addClass(\"animated shake\");",
+        "      $(\"#checked-state\").text($(\"#check-me\").prop(\"checked\"));",
         "    });",
         "  });",
         "fcces",
         "",
         "<!-- You shouldn't need to modify code below this line -->",
         "",
-        "<div class='container-fluid'>",
-        "  <div class='row'>",
-        "    <div class='col-xs-2'>",
-        "      <input type='checkbox' id='check-me'>",
+        "<div class=\"container-fluid\">",
+        "  <div class=\"row\">",
+        "    <div class=\"col-xs-2\">",
+        "      <input type=\"checkbox\" id=\"check-me\">",
         "    </div>",
-        "    <div class='col-xs-10'>",
+        "    <div class=\"col-xs-10\">",
         "      <p>#check-me</p>",
         "    </div>",
-        "  <button class='btn btn-block btn-primary'>#click-me</button>",
+        "  <button class=\"btn btn-block btn-primary\">#click-me</button>",
         "  <span>Is the checkbox checked?</span>",
-        "  <span id='checked-state'></span>",
+        "  <span id=\"checked-state\"></span>",
         "</div>"
       ],
       "challengeType": 0,
@@ -208,26 +265,26 @@
       "challengeSeed": [
         "fccss",
         "  $(document).ready(function() {",
-        "    $('button').on('click', function() {",
-        "      $('#click-me').addClass('animated shake');",
-        "      $('#checked-state').text($('#check-me').prop('checked'));",
+        "    $(\"button\").on(\"click\", function() {",
+        "      $(\"#click-me\").addClass(\"animated shake\");",
+        "      $(\"#checked-state\").text($(\"#check-me\").prop(\"checked\"));",
         "    });",
         "  });",
         "fcces",
         "",
         "<!-- You shouldn't need to modify code below this line -->",
         "",
-        "<div class='container-fluid'>",
-        "  <div class='row'>",
-        "    <div class='col-xs-2'>",
-        "      <input type='checkbox' id='check-me'>",
+        "<div class=\"container-fluid\">",
+        "  <div class=\"row\">",
+        "    <div class=\"col-xs-2\">",
+        "      <input type=\"checkbox\" id=\"check-me\">",
         "    </div>",
-        "    <div class='col-xs-10'>",
+        "    <div class=\"col-xs-10\">",
         "      <p>#check-me</p>",
         "    </div>",
-        "  <button class='btn btn-block btn-primary'>#click-me</button>",
+        "  <button class=\"btn btn-block btn-primary\">#click-me</button>",
         "  <span>Is the checkbox checked?</span>",
-        "  <span id='checked-state'></span>",
+        "  <span id=\"checked-state\"></span>",
         "</div>"
       ],
       "challengeType": 0,
@@ -256,10 +313,8 @@
     {
       "id": "bad87fee1348bd9aebc08726",
       "title": "Learn how JSON Works",
-      "dashedName":  "waypoint-learn-how-json-works",
-      "difficulty": 3.21,
       "description": [
-        "JSON stands for \"JavaScript Object Notation\". It's how you create objects in JavaScript.",
+        "JSON stands for \"JavaScript Object Notation\". It\"s how you create objects in JavaScript.",
         "JSON is a series of \"key-value pairs\". Everything on the left of the colon (<code>:</code>) is the \"key\" you use to unlock the \"value\" on the right of the colon."
       ],
       "tests": [
@@ -316,16 +371,18 @@
         "",
         "  $(document).ready(function() {",
         "",
-        "    $('#cat-button').on('click', function() {",
-        "      $.getJSON('/json/cats.json', function( json ) {",
+        "    $(\"#cat-button\").on(\"click\", function() {",
+        "      $.getJSON(\"/json/cats.json\", function( json ) {",
         "",
         "      });",
         "    });",
         "",
         "  });",
         "fcces",
-        "<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>",
-        "<div class='jumbotron' id='output'>",
+        "<div class=\"container-fluid\">",
+        "  <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>",
+        "  <div class=\"jumbotron\" id=\"output\">",
+        "  </div>",
         "</div>"
       ],
       "challengeType": 0,
@@ -348,16 +405,18 @@
         "",
         "  $(document).ready(function() {",
         "",
-        "    $('#cat-button').on('click', function() {",
-        "      $.getJSON('/json/cats.json', function( json ) {",
+        "    $(\"#cat-button\").on(\"click\", function() {",
+        "      $.getJSON(\"/json/cats.json\", function( json ) {",
         "",
         "      });",
         "    });",
         "",
         "  });",
         "fcces",
-        "<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>",
-        "<div class='jumbotron' id='output'>",
+        "<div class=\"container-fluid\">",
+        "  <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>",
+        "  <div class=\"jumbotron\" id=\"output\">",
+        "  </div>",
         "</div>"
       ],
       "challengeType": 0,
@@ -370,7 +429,7 @@
       "dashedName":  "waypoint-wire-ajax-call-into-a-jquery-click-event",
       "difficulty": 3.24,
       "description": [
-        "<img src='https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png'>"
+        "<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
       ],
       "tests": [
 
@@ -380,16 +439,18 @@
         "  var random = function() { return Math.floor(Math.random() * 3) }",
         "  $(document).ready(function() {",
         "",
-        "    $('#cat-button').on('click', function() {",
-        "      $.getJSON('/json/cats.json', function( json ) {",
+        "    $(\"#cat-button\").on(\"click\", function() {",
+        "      $.getJSON(\"/json/cats.json\", function( json ) {",
         "",
         "      });",
         "    });",
         "",
         "  });",
         "fcces",
-        "<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>",
-        "<div class='jumbotron' id='output'>",
+        "<div class=\"container-fluid\">",
+        "  <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>",
+        "  <div class=\"jumbotron\" id=\"output\">",
+        "  </div>",
         "</div>"
       ],
       "challengeType": 0,
@@ -402,7 +463,7 @@
       "dashedName":  "waypoint-wire-ajax-call-into-a-jquery-click-event",
       "difficulty": 3.24,
       "description": [
-        "<img src='https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png'>"
+        "<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
       ],
       "tests": [
 
@@ -412,16 +473,18 @@
         "  var random = function() { return Math.floor(Math.random() * 3) }",
         "  $(document).ready(function() {",
         "",
-        "    $('#cat-button').on('click', function() {",
-        "      $.getJSON('/json/cats.json', function( json ) {",
+        "    $(\"#cat-button\").on(\"click\", function() {",
+        "      $.getJSON(\"/json/cats.json\", function( json ) {",
         "        var kitten = json[random()];",
         "      });",
         "    });",
         "",
         "  });",
         "fcces",
-        "<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>",
-        "<div class='jumbotron' id='output'>",
+        "<div class=\"container-fluid\">",
+        "  <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>",
+        "  <div class=\"jumbotron\" id=\"output\">",
+        "  </div>",
         "</div>"
       ],
       "challengeType": 0,
@@ -434,7 +497,7 @@
       "dashedName":  "waypoint-wire-ajax-call-into-a-jquery-click-event",
       "difficulty": 3.24,
       "description": [
-        "<img src='https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png'>"
+        "<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
       ],
       "tests": [
 
@@ -444,17 +507,18 @@
         "  var random = function() { return Math.floor(Math.random() * 3) }",
         "  $(document).ready(function() {",
         "",
-        "    $('#cat-button').on('click', function() {",
-        "      $.getJSON('/json/cats.json', function( json ) {",
+        "    $(\"#cat-button\").on(\"click\", function() {",
+        "      $.getJSON(\"/json/cats.json\", function( json ) {",
         "        var kitten = json[random()];",
-        "        $(\"<img src='\" + kitten.imageLink + \"'>\").appendTo('#output');",
+        "        $(\"<img src=\"\" + kitten.imageLink + \"\">\").appendTo(\"#output\");",
         "      });",
         "    });",
         "",
         "  });",
-        "fcces",
-        "<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>",
-        "<div class='jumbotron' id='output'>",
+        "<div class=\"container-fluid\">",
+        "  <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>",
+        "  <div class=\"jumbotron\" id=\"output\">",
+        "  </div>",
         "</div>"
       ],
       "challengeType": 0,
@@ -467,7 +531,7 @@
       "dashedName":  "waypoint-wire-ajax-call-into-a-jquery-click-event",
       "difficulty": 3.24,
       "description": [
-        "<img src='https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png'>"
+        "<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
       ],
       "tests": [
 
@@ -477,18 +541,20 @@
         "  var random = function() { return Math.floor(Math.random() * 3) }",
         "  $(document).ready(function() {",
         "",
-        "    $('#cat-button').on('click', function() {",
-        "      $.getJSON('/json/cats.json', function( json ) {",
+        "    $(\"#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');",
+        "        $(\"<img src=\"\" + kitten.imageLink + \"\">\").appendTo(\"#output\");",
+        "        $(\"<h3>Code name: \" + kitten.codeNames[random()] + \"</h3>\").appendTo(\"#output\");",
         "      });",
         "    });",
         "",
         "  });",
         "fcces",
-        "<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>",
-        "<div class='jumbotron' id='output'>",
+        "<div class=\"container-fluid\">",
+        "  <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>",
+        "  <div class=\"jumbotron\" id=\"output\">",
+        "  </div>",
         "</div>"
       ],
       "challengeType": 0,