greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

start adding json challenges

pull/1748/head
Quincy Larson 2015-08-13 12:55:50 -07:00
parent d138757c52
commit 4cdd0e20d9
2 changed files with 154 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
seed/challenges/basic-ziplines.json
View File

@ -9,9 +9,7 @@
"challengeSeed": ["125658022"], "challengeSeed": ["125658022"],
"description": [ "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.", "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.", "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.",
"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.",
"We'll build these challenges using CodePen, a popular tool for creating, sharing, and discovering static web applications.", "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.", "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.", "Click your user image in the top right corner, then click the \"New pen\" button that drops down.",

240
seed/challenges/json-apis-and-ajax.json
View File

@ -23,12 +23,12 @@
"", "",
"<!-- You shouldn't need to modify code below this line -->", "<!-- You shouldn't need to modify code below this line -->",
"", "",
"<div class='container-fluid'>", "<div class=\"container-fluid\">",
" <form action=\"/submit-cat-photo\">", " <form action=\"/submit-cat-photo\">",
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>", " <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>", " <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
" <input type='text' placeholder='cat photo URL' required>", " <input type=\"text\" placeholder=\"cat photo URL\" required>",
" <button type='submit'>Submit</button>", " <button type=\"submit\">Submit</button>",
" </form>", " </form>",
"</div>" "</div>"
], ],
@ -36,6 +36,63 @@
"type": "waypoint" "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", "id": "bad84fee1348bd9aecc58826",
"title": "Read Data from an Element Using jQuery", "title": "Read Data from an Element Using jQuery",
@ -50,7 +107,7 @@
"challengeSeed": [ "challengeSeed": [
"fccss", "fccss",
" $(document).ready(function() {", " $(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 -->", "<!-- You shouldn't need to modify code below this line -->",
"", "",
"<div class='container-fluid'>", "<div class=\"container-fluid\">",
" <div class='row'>", " <div class=\"row\">",
" <div class='col-xs-2'>", " <div class=\"col-xs-2\">",
" <input type='checkbox' id='check-me'>", " <input type=\"checkbox\" id=\"check-me\">",
" </div>", " </div>",
" <div class='col-xs-10'>", " <div class=\"col-xs-10\">",
" <p>#check-me</p>", " <p>#check-me</p>",
" </div>", " </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>Is the checkbox checked?</span>",
" <span id='checked-state'></span>", " <span id=\"checked-state\"></span>",
"</div>" "</div>"
], ],
"challengeType": 0, "challengeType": 0,
@ -89,25 +146,25 @@
"challengeSeed": [ "challengeSeed": [
"fccss", "fccss",
" $(document).ready(function() {", " $(document).ready(function() {",
" $('button').on('click', function() {", " $(\"button\").on(\"click\", function() {",
" $('#click-me').addClass('animated shake');", " $(\"#click-me\").addClass(\"animated shake\");",
" });", " });",
" });", " });",
"fcces", "fcces",
"", "",
"<!-- You shouldn't need to modify code below this line -->", "<!-- You shouldn't need to modify code below this line -->",
"", "",
"<div class='container-fluid'>", "<div class=\"container-fluid\">",
" <div class='row'>", " <div class=\"row\">",
" <div class='col-xs-2'>", " <div class=\"col-xs-2\">",
" <input type='checkbox' id='check-me'>", " <input type=\"checkbox\" id=\"check-me\">",
" </div>", " </div>",
" <div class='col-xs-10'>", " <div class=\"col-xs-10\">",
" <p>#check-me</p>", " <p>#check-me</p>",
" </div>", " </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>Is the checkbox checked?</span>",
" <span id='checked-state'></span>", " <span id=\"checked-state\"></span>",
"</div>" "</div>"
], ],
"challengeType": 0, "challengeType": 0,
@ -128,26 +185,26 @@
"challengeSeed": [ "challengeSeed": [
"fccss", "fccss",
" $(document).ready(function() {", " $(document).ready(function() {",
" $('button').on('click', function() {", " $(\"button\").on(\"click\", function() {",
" $('#click-me').addClass('animated shake');", " $(\"#click-me\").addClass(\"animated shake\");",
" $('#checked-state').text('happy text');", " $(\"#checked-state\").text(\"happy text\");",
" });", " });",
" });", " });",
"fcces", "fcces",
"", "",
"<!-- You shouldn't need to modify code below this line -->", "<!-- You shouldn't need to modify code below this line -->",
"", "",
"<div class='container-fluid'>", "<div class=\"container-fluid\">",
" <div class='row'>", " <div class=\"row\">",
" <div class='col-xs-2'>", " <div class=\"col-xs-2\">",
" <input type='checkbox' id='check-me'>", " <input type=\"checkbox\" id=\"check-me\">",
" </div>", " </div>",
" <div class='col-xs-10'>", " <div class=\"col-xs-10\">",
" <p>#check-me</p>", " <p>#check-me</p>",
" </div>", " </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>Is the checkbox checked?</span>",
" <span id='checked-state'></span>", " <span id=\"checked-state\"></span>",
"</div>" "</div>"
], ],
"challengeType": 0, "challengeType": 0,
@ -168,26 +225,26 @@
"challengeSeed": [ "challengeSeed": [
"fccss", "fccss",
" $(document).ready(function() {", " $(document).ready(function() {",
" $('button').on('click', function() {", " $(\"button\").on(\"click\", function() {",
" $('#click-me').addClass('animated shake');", " $(\"#click-me\").addClass(\"animated shake\");",
" $('#checked-state').text($('#check-me').prop('checked'));", " $(\"#checked-state\").text($(\"#check-me\").prop(\"checked\"));",
" });", " });",
" });", " });",
"fcces", "fcces",
"", "",
"<!-- You shouldn't need to modify code below this line -->", "<!-- You shouldn't need to modify code below this line -->",
"", "",
"<div class='container-fluid'>", "<div class=\"container-fluid\">",
" <div class='row'>", " <div class=\"row\">",
" <div class='col-xs-2'>", " <div class=\"col-xs-2\">",
" <input type='checkbox' id='check-me'>", " <input type=\"checkbox\" id=\"check-me\">",
" </div>", " </div>",
" <div class='col-xs-10'>", " <div class=\"col-xs-10\">",
" <p>#check-me</p>", " <p>#check-me</p>",
" </div>", " </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>Is the checkbox checked?</span>",
" <span id='checked-state'></span>", " <span id=\"checked-state\"></span>",
"</div>" "</div>"
], ],
"challengeType": 0, "challengeType": 0,
@ -208,26 +265,26 @@
"challengeSeed": [ "challengeSeed": [
"fccss", "fccss",
" $(document).ready(function() {", " $(document).ready(function() {",
" $('button').on('click', function() {", " $(\"button\").on(\"click\", function() {",
" $('#click-me').addClass('animated shake');", " $(\"#click-me\").addClass(\"animated shake\");",
" $('#checked-state').text($('#check-me').prop('checked'));", " $(\"#checked-state\").text($(\"#check-me\").prop(\"checked\"));",
" });", " });",
" });", " });",
"fcces", "fcces",
"", "",
"<!-- You shouldn't need to modify code below this line -->", "<!-- You shouldn't need to modify code below this line -->",
"", "",
"<div class='container-fluid'>", "<div class=\"container-fluid\">",
" <div class='row'>", " <div class=\"row\">",
" <div class='col-xs-2'>", " <div class=\"col-xs-2\">",
" <input type='checkbox' id='check-me'>", " <input type=\"checkbox\" id=\"check-me\">",
" </div>", " </div>",
" <div class='col-xs-10'>", " <div class=\"col-xs-10\">",
" <p>#check-me</p>", " <p>#check-me</p>",
" </div>", " </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>Is the checkbox checked?</span>",
" <span id='checked-state'></span>", " <span id=\"checked-state\"></span>",
"</div>" "</div>"
], ],
"challengeType": 0, "challengeType": 0,
@ -256,10 +313,8 @@
{ {
"id": "bad87fee1348bd9aebc08726", "id": "bad87fee1348bd9aebc08726",
"title": "Learn how JSON Works", "title": "Learn how JSON Works",
"dashedName": "waypoint-learn-how-json-works",
"difficulty": 3.21,
"description": [ "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." "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": [ "tests": [
@ -316,16 +371,18 @@
"", "",
" $(document).ready(function() {", " $(document).ready(function() {",
"", "",
" $('#cat-button').on('click', function() {", " $(\"#cat-button\").on(\"click\", function() {",
" $.getJSON('/json/cats.json', function( json ) {", " $.getJSON(\"/json/cats.json\", function( json ) {",
"", "",
" });", " });",
" });", " });",
"", "",
" });", " });",
"fcces", "fcces",
"<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>", "<div class=\"container-fluid\">",
"<div class='jumbotron' id='output'>", " <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>",
" <div class=\"jumbotron\" id=\"output\">",
" </div>",
"</div>" "</div>"
], ],
"challengeType": 0, "challengeType": 0,
@ -348,16 +405,18 @@
"", "",
" $(document).ready(function() {", " $(document).ready(function() {",
"", "",
" $('#cat-button').on('click', function() {", " $(\"#cat-button\").on(\"click\", function() {",
" $.getJSON('/json/cats.json', function( json ) {", " $.getJSON(\"/json/cats.json\", function( json ) {",
"", "",
" });", " });",
" });", " });",
"", "",
" });", " });",
"fcces", "fcces",
"<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>", "<div class=\"container-fluid\">",
"<div class='jumbotron' id='output'>", " <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>",
" <div class=\"jumbotron\" id=\"output\">",
" </div>",
"</div>" "</div>"
], ],
"challengeType": 0, "challengeType": 0,
@ -370,7 +429,7 @@
"dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event", "dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event",
"difficulty": 3.24, "difficulty": 3.24,
"description": [ "description": [
"<img src='https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png'>" "<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
], ],
"tests": [ "tests": [
@ -380,16 +439,18 @@
" var random = function() { return Math.floor(Math.random() * 3) }", " var random = function() { return Math.floor(Math.random() * 3) }",
" $(document).ready(function() {", " $(document).ready(function() {",
"", "",
" $('#cat-button').on('click', function() {", " $(\"#cat-button\").on(\"click\", function() {",
" $.getJSON('/json/cats.json', function( json ) {", " $.getJSON(\"/json/cats.json\", function( json ) {",
"", "",
" });", " });",
" });", " });",
"", "",
" });", " });",
"fcces", "fcces",
"<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>", "<div class=\"container-fluid\">",
"<div class='jumbotron' id='output'>", " <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>",
" <div class=\"jumbotron\" id=\"output\">",
" </div>",
"</div>" "</div>"
], ],
"challengeType": 0, "challengeType": 0,
@ -402,7 +463,7 @@
"dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event", "dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event",
"difficulty": 3.24, "difficulty": 3.24,
"description": [ "description": [
"<img src='https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png'>" "<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
], ],
"tests": [ "tests": [
@ -412,16 +473,18 @@
" var random = function() { return Math.floor(Math.random() * 3) }", " var random = function() { return Math.floor(Math.random() * 3) }",
" $(document).ready(function() {", " $(document).ready(function() {",
"", "",
" $('#cat-button').on('click', function() {", " $(\"#cat-button\").on(\"click\", function() {",
" $.getJSON('/json/cats.json', function( json ) {", " $.getJSON(\"/json/cats.json\", function( json ) {",
" var kitten = json[random()];", " var kitten = json[random()];",
" });", " });",
" });", " });",
"", "",
" });", " });",
"fcces", "fcces",
"<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>", "<div class=\"container-fluid\">",
"<div class='jumbotron' id='output'>", " <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>",
" <div class=\"jumbotron\" id=\"output\">",
" </div>",
"</div>" "</div>"
], ],
"challengeType": 0, "challengeType": 0,
@ -434,7 +497,7 @@
"dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event", "dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event",
"difficulty": 3.24, "difficulty": 3.24,
"description": [ "description": [
"<img src='https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png'>" "<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
], ],
"tests": [ "tests": [
@ -444,17 +507,18 @@
" var random = function() { return Math.floor(Math.random() * 3) }", " var random = function() { return Math.floor(Math.random() * 3) }",
" $(document).ready(function() {", " $(document).ready(function() {",
"", "",
" $('#cat-button').on('click', function() {", " $(\"#cat-button\").on(\"click\", function() {",
" $.getJSON('/json/cats.json', function( json ) {", " $.getJSON(\"/json/cats.json\", function( json ) {",
" var kitten = json[random()];", " var kitten = json[random()];",
" $(\"<img src='\" + kitten.imageLink + \"'>\").appendTo('#output');", " $(\"<img src=\"\" + kitten.imageLink + \"\">\").appendTo(\"#output\");",
" });", " });",
" });", " });",
"", "",
" });", " });",
"fcces", "<div class=\"container-fluid\">",
"<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>", " <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>",
"<div class='jumbotron' id='output'>", " <div class=\"jumbotron\" id=\"output\">",
" </div>",
"</div>" "</div>"
], ],
"challengeType": 0, "challengeType": 0,
@ -467,7 +531,7 @@
"dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event", "dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event",
"difficulty": 3.24, "difficulty": 3.24,
"description": [ "description": [
"<img src='https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png'>" "<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
], ],
"tests": [ "tests": [
@ -477,18 +541,20 @@
" var random = function() { return Math.floor(Math.random() * 3) }", " var random = function() { return Math.floor(Math.random() * 3) }",
" $(document).ready(function() {", " $(document).ready(function() {",
"", "",
" $('#cat-button').on('click', function() {", " $(\"#cat-button\").on(\"click\", function() {",
" $.getJSON('/json/cats.json', function( json ) {", " $.getJSON(\"/json/cats.json\", function( json ) {",
" var kitten = json[random()];", " var kitten = json[random()];",
" $(\"<img src='\" + kitten.imageLink + \"'>\").appendTo('#output');", " $(\"<img src=\"\" + kitten.imageLink + \"\">\").appendTo(\"#output\");",
" $(\"<h3>Code name: \" + kitten.codeNames[random()] + \"</h3>\").appendTo('#output');", " $(\"<h3>Code name: \" + kitten.codeNames[random()] + \"</h3>\").appendTo(\"#output\");",
" });", " });",
" });", " });",
"", "",
" });", " });",
"fcces", "fcces",
"<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>", "<div class=\"container-fluid\">",
"<div class='jumbotron' id='output'>", " <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>",
" <div class=\"jumbotron\" id=\"output\">",
" </div>",
"</div>" "</div>"
], ],
"challengeType": 0, "challengeType": 0,