gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'staging' into bonfire-tests

Browse Source 
Conflicts:
	seed/challenges/basic-bonfires.json
	seed/challenges/intermediate-bonfires.json
This commit is contained in:
Quincy Larson
2015-09-14 00:24:33 -07:00
parent b3257a5fb6 f289eb9201
commit 3e713ca906
18 changed files with 599 additions and 559 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
bonfireMDNlinks.js
View File

@ -1,19 +1,20 @@
// MDN Links /**
* MDN Links
*
* These links are for Bonfires. Each key/value pair is used to render a Bonfire with appropriate links.
* The text of the key is what the link text will be, e.g. <a href="https://developer ...">Global Array Object</a>
* General convention is to use the page title of the MDN reference page.
*
**/
/* These links are for Bonfires. Each key/value pair is used to render a Bonfire with appropriate links. var links = {
The text of the key is what the link text will be, e.g. <a href="https://developer ...">Global Array Object</a>
General convention is to use the page title of the MDN reference page.
*/
var links =
{
// ========= NON MDN REFS // ========= NON MDN REFS
"Currying": "https://leanpub.com/javascript-allonge/read#pabc", "Currying": "https://leanpub.com/javascript-allonge/read#pabc",
"Smallest Common Multiple": "https://www.mathsisfun.com/least-common-multiple.html", "Smallest Common Multiple": "https://www.mathsisfun.com/least-common-multiple.html",
"Permutations": "https://www.mathsisfun.com/combinatorics/combinations-permutations.html", "Permutations": "https://www.mathsisfun.com/combinatorics/combinations-permutations.html",
"HTML Entities": "http://dev.w3.org/html5/html-author/charref", "HTML Entities": "http://dev.w3.org/html5/html-author/charref",
"Symmetric Difference": "https://www.youtube.com/watch?v=PxffSUQRkG4", "Symmetric Difference": "https://www.youtube.com/watch?v=PxffSUQRkG4",
"Roman Numerals": "http://www.mathsisfun.com/roman-numerals.html",
// ========= GLOBAL OBJECTS // ========= GLOBAL OBJECTS
"Global Array Object": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array", "Global Array Object": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array",
@ -56,6 +57,7 @@ var links =
"String.toLowerCase()": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase", "String.toLowerCase()": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase",
"String.toString()": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toString", "String.toString()": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toString",
"String.toUpperCase()": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase", "String.toUpperCase()": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase",
// ======== ARRAY METHODS // ======== ARRAY METHODS
"Array.concat()": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat", "Array.concat()": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat",
"Array.every()": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every", "Array.every()": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every",

8
challenges/advanced-bonfires.json
View File

@ -80,10 +80,10 @@
"sym([1, 2, 3], [5, 2, 1, 4]);" "sym([1, 2, 3], [5, 2, 1, 4]);"
], ],
"tests": [ "tests": [
"assert.deepEqual(sym([1, 2, 3], [5, 2, 1, 4]), [3, 5, 4], 'should return an array of unique values');", "assert.sameMembers(sym([1, 2, 3], [5, 2, 1, 4]), [3, 5, 4], 'should return an array of unique values');",
"assert.deepEqual(sym([1, 2, 5], [2, 3, 5], [3, 4, 5]), [1, 4, 5], 'should return the symmetric difference of the given arrays');", "assert.sameMembers(sym([1, 2, 5], [2, 3, 5], [3, 4, 5]), [1, 4, 5], 'should return the symmetric difference of the given arrays');",
"assert.deepEqual(sym([1, 1, 2, 5], [2, 2, 3, 5], [3, 4, 5, 5]), [1, 4, 5], 'should return an array of unique values');", "assert.sameMembers(sym([1, 1, 2, 5], [2, 2, 3, 5], [3, 4, 5, 5]), [1, 4, 5], 'should return an array of unique values');",
"assert.deepEqual(sym([1, 1]), [1], 'should return an array of unique values');" "assert.sameMembers(sym([1, 1]), [1], 'should return an array of unique values');"
], ],
"MDNlinks": [ "MDNlinks": [
"Array.reduce()", "Array.reduce()",

6
challenges/automated-testing-and-debugging.json
View File

@ -28,9 +28,9 @@
"title":"Using typeof", "title":"Using typeof",
"difficulty":0, "difficulty":0,
"description":[ "description":[
"<code>typeof</code> is a useful method that we can use to check the type of a variable.", "You can use <code>typeof</code> to check the <code>data structure</code>, or type, of a variable.",
"One thing to be careful of is that an array has the type objects.", "Note that in JavaScript, arrays are technically a type of object.",
"Try using each of these to see the types they have.", "Try using <code>typeof</code> on each of the following to see which types they have.",
"<code>console.log(typeof(\"\"));</code>", "<code>console.log(typeof(\"\"));</code>",
"<code>console.log(typeof(0));</code>", "<code>console.log(typeof(0));</code>",
"<code>console.log(typeof([]));</code>", "<code>console.log(typeof([]));</code>",

24
challenges/basejumps.json
View File

@ -13,11 +13,11 @@
"If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.", "If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
"Now let's get your development environment ready for a new Angular-Fullstack application provided by Yeoman.", "Now let's get your development environment ready for a new Angular-Fullstack application provided by Yeoman.",
"Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.", "Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
"Click on Create New Workspace at the top right of the c9.io page, then click on the \"Create a new workspace\" popup that appears below it the button after you click on it.", "Click on the \"+\" icon at the top right of the c9.io page to create a new workspace.",
"Give your workspace a name.", "Give your workspace a name and an optional description.",
"Choose Node.js in the selection area below the name field.", "Choose Node.js in the selection area below the name field.",
"Click the Create button. Then click into your new workspace.", "Click the \"Create workspace\" button.",
"In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.", "Once C9 builds and loads your workspace, you should see a terminal window in the lower right hand corner. In this window use the following commands. You don't need to know what these mean at this point.",
"Never run this command on your local machine. But in your Cloud 9 terminal window, run: <code>rm -rf * && echo \"export NODE_PATH=$NODE_PATH:/home/ubuntu/.nvm/v0.10.35/lib/node_modules\" >> ~/.bashrc && source ~/.bashrc && npm install -g yo grunt grunt-cli generator-angular-fullstack && yo angular-fullstack</code>", "Never run this command on your local machine. But in your Cloud 9 terminal window, run: <code>rm -rf * && echo \"export NODE_PATH=$NODE_PATH:/home/ubuntu/.nvm/v0.10.35/lib/node_modules\" >> ~/.bashrc && source ~/.bashrc && npm install -g yo grunt grunt-cli generator-angular-fullstack && yo angular-fullstack</code>",
"Yeoman will prompt you to answer some questions. Answer them like this:", "Yeoman will prompt you to answer some questions. Answer them like this:",
"What would you like to write scripts with? <span class='text-success'>JavaScript</span>", "What would you like to write scripts with? <span class='text-success'>JavaScript</span>",
@ -54,7 +54,7 @@
"Run the following command in a Cloud9 terminal prompt tab: <code>npm install grunt-contrib-imagemin --save-dev && npm install --save-dev && heroku login</code>. At this point, the terminal will prompt you to log in to Heroku from the command line.", "Run the following command in a Cloud9 terminal prompt tab: <code>npm install grunt-contrib-imagemin --save-dev && npm install --save-dev && heroku login</code>. At this point, the terminal will prompt you to log in to Heroku from the command line.",
"Now run <code>yo angular-fullstack:heroku</code>. You can choose a name for your Heroku project, or Heroku will create a random one for you. You can choose whether you want to deploy to servers the US or the EU.", "Now run <code>yo angular-fullstack:heroku</code>. You can choose a name for your Heroku project, or Heroku will create a random one for you. You can choose whether you want to deploy to servers the US or the EU.",
"Set the config flag for your Heroku environment and add MongoLab for your MongoDB instance by running the following command: <code>cd ~/workspace/dist && heroku config:set NODE_ENV=production && heroku addons:create mongolab</code>.", "Set the config flag for your Heroku environment and add MongoLab for your MongoDB instance by running the following command: <code>cd ~/workspace/dist && heroku config:set NODE_ENV=production && heroku addons:create mongolab</code>.",
"As you build your app, you should frequently commit changes to your codebase. Make sure you're in the <code>~/workspace</code> directory by running <code>cd ~/workspace</code>. Then you can this code to stage the changes to your changes and commit them: <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a short summary of the changes you made to your code, such as \"added a records controller and corresponding routes\".", "As you build your app, you should frequently commit changes to your codebase. Make sure you're in the <code>~/workspace</code> directory by running <code>cd ~/workspace</code>. Then you can use this code to stage the changes to your changes and commit them: <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a short summary of the changes you made to your code, such as \"added a records controller and corresponding routes\".",
"You can push these new commits to GitHub by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.", "You can push these new commits to GitHub by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.",
"If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.", "If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.",
"Now you're ready to move on to your first Basejump. Click the \"I've completed this challenge\" and move on." "Now you're ready to move on to your first Basejump. Click the \"I've completed this challenge\" and move on."
@ -79,12 +79,12 @@
"<span class='text-info'>User Story:</span> As an authenticated user, I can see the aggregate results of my polls.", "<span class='text-info'>User Story:</span> As an authenticated user, I can see the aggregate results of my polls.",
"<span class='text-info'>User Story:</span> As an authenticated user, I can delete polls that I decide I don't want anymore.", "<span class='text-info'>User Story:</span> As an authenticated user, I can delete polls that I decide I don't want anymore.",
"<span class='text-info'>User Story:</span> As an authenticated user, I can create a poll with any number of possible items.", "<span class='text-info'>User Story:</span> As an authenticated user, I can create a poll with any number of possible items.",
"<span class='text-info'>Bonus User Story:</span> As an unauthenticated user, I can see everyone's polls, but I can't vote on anything.", "<span class='text-info'>Bonus User Story:</span> As an unauthenticated or authenticated user, I can see and vote on everyone's polls.",
"<span class='text-info'>Bonus User Story:</span> As an unauthenticated or authenticated user, I can see the results of polls in chart form. (This could be implemented using Chart.js or Google Charts.)", "<span class='text-info'>Bonus User Story:</span> As an unauthenticated or authenticated user, I can see the results of polls in chart form. (This could be implemented using Chart.js or Google Charts.)",
"<span class='text-info'>Bonus User Story:</span> As an authenticated user, if I don't like the options on a poll, I can create a new option.", "<span class='text-info'>Bonus User Story:</span> As an authenticated user, if I don't like the options on a poll, I can create a new option.",
"If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.", "If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.",
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.", "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your Heroku project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
], ],
"type": "basejumps", "type": "basejumps",
"challengeType": 4, "challengeType": 4,
@ -118,7 +118,7 @@
"<span class='text-info'>Hint:</span> Try using the <a href='https://www.yelp.com/developers/documentation/v2/overview' target='_blank'>Yelp API</a> to find venues in the cities your users search for.", "<span class='text-info'>Hint:</span> Try using the <a href='https://www.yelp.com/developers/documentation/v2/overview' target='_blank'>Yelp API</a> to find venues in the cities your users search for.",
"If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.", "If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.",
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.", "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your Heroku project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
], ],
"type": "basejumps", "type": "basejumps",
"challengeType": 4, "challengeType": 4,
@ -151,7 +151,7 @@
"<span class='text-info'>Bonus User Story:</span> As a user, I can see changes in real-time when any other user adds or removes a stock.", "<span class='text-info'>Bonus User Story:</span> As a user, I can see changes in real-time when any other user adds or removes a stock.",
"If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.", "If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.",
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.", "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your Heroku project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
], ],
"type": "basejumps", "type": "basejumps",
"challengeType": 4, "challengeType": 4,
@ -184,7 +184,7 @@
"<span class='text-info'>Bonus User Story:</span> As an authenticated user, I can propose a trade and wait for the other user to accept the trade.", "<span class='text-info'>Bonus User Story:</span> As an authenticated user, I can propose a trade and wait for the other user to accept the trade.",
"If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.", "If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.",
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.", "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your Heroku project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
], ],
"type": "basejumps", "type": "basejumps",
"challengeType": 4, "challengeType": 4,
@ -220,9 +220,9 @@
"<span class='text-info'>Hint:</span> <a href='http://masonry.desandro.com/' target='_blank'>Masonry.js</a> is a library that allows for Pinterest-style image grids.", "<span class='text-info'>Hint:</span> <a href='http://masonry.desandro.com/' target='_blank'>Masonry.js</a> is a library that allows for Pinterest-style image grids.",
"If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.", "If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.",
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.", "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your Heroku project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
], ],
"type": "basejumps", "type": "basejump",
"challengeType": 4, "challengeType": 4,
"tests": [], "tests": [],
"nameCn": "", "nameCn": "",

64
challenges/basic-bonfires.json
View File

@ -1,6 +1,6 @@
{ {
"name": "Basic Algorithm Scripting", "name": "Basic Algorithm Scripting",
"order": 0.006, "order": 0.007,
"challenges": [ "challenges": [
{ {
"id": "ad7123c8c441eddfaeb5bdef", "id": "ad7123c8c441eddfaeb5bdef",
@ -8,7 +8,7 @@
"difficulty": "0", "difficulty": "0",
"description": [ "description": [
"Your goal is to fix the failing test.", "Your goal is to fix the failing test.",
"First, run all the tests by clicking \"Run code\" or by pressing Control + Enter.", "First, run all the tests by clicking \"Run tests\" or by pressing Control + Enter.",
"The failing test is in red. Fix the code so that all tests pass. Then you can move on to the next Bonfire.", "The failing test is in red. Fix the code so that all tests pass. Then you can move on to the next Bonfire.",
"Make this function return true no matter what." "Make this function return true no matter what."
], ],
@ -90,7 +90,8 @@
"assert(typeof(factorialize(5)) === \"number\", '<code>factorialize&#40;&#41;</code> should return a number.');", "assert(typeof(factorialize(5)) === \"number\", '<code>factorialize&#40;&#41;</code> should return a number.');",
"assert(factorialize(5) === 120, '<code>5</code> should return <code>120</code>.');", "assert(factorialize(5) === 120, '<code>5</code> should return <code>120</code>.');",
"assert(factorialize(10) === 3628800, '<code>10</code> should return <code>3&#44;628&#44;800</code>.');", "assert(factorialize(10) === 3628800, '<code>10</code> should return <code>3&#44;628&#44;800</code>.');",
"assert(factorialize(20) === 2432902008176640000, '<code>20</code> should return <code>2&#44;432&#44;902&#44;008&#44;176&#44;640&#44;000</code>.');" "assert(factorialize(20) === 2432902008176640000, '<code>20</code> should return <code>2&#44;432&#44;902&#44;008&#44;176&#44;640&#44;000</code>.');",
"assert(factorialize(0) === 1, '<code>0</code> should return 1.');"
], ],
"difficulty": "1.02", "difficulty": "1.02",
"description": [ "description": [
@ -142,7 +143,11 @@
"assert(palindrome(\"A man, a plan, a canal. Panama\") === true, '<code>\"A man, a plan, a canal. Panama\"</code> should return true.');", "assert(palindrome(\"A man, a plan, a canal. Panama\") === true, '<code>\"A man, a plan, a canal. Panama\"</code> should return true.');",
"assert(palindrome(\"never odd or even\") === true, '<code>\"never odd or even\"</code> should return true.');", "assert(palindrome(\"never odd or even\") === true, '<code>\"never odd or even\"</code> should return true.');",
"assert(palindrome(\"nope\") === false, '<code>\"nope\"</code> should return false.');", "assert(palindrome(\"nope\") === false, '<code>\"nope\"</code> should return false.');",
"assert(palindrome(\"almostomla\") === false, '<code>\"almostomla\"</code> should return false.');" "assert(palindrome(\"almostomla\") === false, '<code>\"almostomla\"</code> should return false.');",
"assert(palindrome(\"My age is 0, 0 si ega ym.\") === true, '<code>\"My age is 0, 0 si ega ym.\"</code> should return true.');",
"assert(palindrome(\"I'm 23 non 32 m'I?\") === true, '<code>\"I'm 23 non 32 m'I?\"</code> should return true.');",
"assert(palindrome(\"1 eye for of 1 eye.\") === false, '<code>\"1 eye for of 1 eye.\"</code> should return false.');",
"assert(palindrome(\"0_0 (: /-\\ :) 0-0\") === true, '<code>\"0_0 (: /-\\\\ :) 0-0\"</code> should return true.');"
], ],
"challengeSeed": [ "challengeSeed": [
"function palindrome(str) {", "function palindrome(str) {",
@ -527,11 +532,11 @@
}, },
{ {
"id": "adf08ec01beb4f99fc7a68f2", "id": "adf08ec01beb4f99fc7a68f2",
"title": "Falsey Bouncer", "title": "Falsy Bouncer",
"difficulty": "1.50", "difficulty": "1.50",
"description": [ "description": [
"Remove all falsey values from an array.", "Remove all falsy values from an array.",
"Falsey values in javascript are false, null, 0, \"\", undefined, and NaN.", "Falsy values in javascript are false, null, 0, \"\", undefined, and NaN.",
"Remember to use <a href=\"//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code." "Remember to use <a href=\"//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
], ],
"challengeSeed": [ "challengeSeed": [
@ -564,45 +569,6 @@
"namePt": "", "namePt": "",
"descriptionPt": [] "descriptionPt": []
}, },
{
"id": "a8e512fbe388ac2f9198f0fa",
"title": "Where art thou",
"difficulty": "1.55",
"description": [
"Make a function that looks through an array (first argument) and returns an array of all objects that have equivalent property values (second argument).",
"Remember to use <a href=\"//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
],
"challengeSeed": [
"function where(collection, source) {",
" var arr = [];",
" // What's in a name?",
" return arr;",
"}",
"",
"where([{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], { last: \"Capulet\" }, \"\");"
],
"tests": [
"assert(where([{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], { last: \"Capulet\" }) === [{ first: \"Tybalt\", last: \"Capulet\" }], '<code>[{ first: \"Romeo\"&344; last: \"Montague\" }&344; { first: \"Mercutio\"&344; last: null }&344; { first: \"Tybalt\"&344; last: \"Capulet\" }]&344; { last: \"Capulet\" }</code> should return <code>[{ first: \"Tybalt\"&344; last: \"Capulet\" }]</code>.');",
"assert(where([{ \"a\": 1 }, { \"a\": 1 }, { \"a\": 1, \"b\": 2 }], { \"a\": 1 }) === [{ \"a\": 1 }, { \"a\": 1 }, { \"a\": 1, \"b\": 2 }], '<code>[{ \"a\": 1 }&344; { \"a\": 1 }&344; { \"a\": 1&344; \"b\": 2 }]&344; { \"a\": 1 }</code> should return <code>[{ \"a\": 1 }&344; { \"a\": 1 }&344; { \"a\": 1&344; \"b\": 2 }]</code>.');"
],
"MDNlinks": [
"Global Object",
"Object.hasOwnProperty()",
"Object.keys()"
],
"type": "bonfire",
"challengeType": 5,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{ {
"id": "a39963a4c10bc8b4d4f06d7e", "id": "a39963a4c10bc8b4d4f06d7e",
"title": "Seek and Destroy", "title": "Seek and Destroy",
@ -665,7 +631,11 @@
], ],
"tests": [ "tests": [
"assert(where([10, 20, 30, 40, 50], 35) === 3, '<code>[10&#44; 20&#44; 30&#44; 40&#44; 50]&#44; 35</code> should return <code>3</code>.');", "assert(where([10, 20, 30, 40, 50], 35) === 3, '<code>[10&#44; 20&#44; 30&#44; 40&#44; 50]&#44; 35</code> should return <code>3</code>.');",
"assert(where([10, 20, 30, 40, 50], 30) === 2, '<code>[10&#44; 20&#44; 30&#44; 40&#44; 50]&#44; 30)</code> should return <code>2</code>.');" "assert(where([10, 20, 30, 40, 50], 30) === 2, '<code>[10&#44; 20&#44; 30&#44; 40&#44; 50]&#44; 30)</code> should return <code>2</code>.');",
"assert(where([40, 60], 50) === 1, '<code>[40&#44; 60&#44;]&#44; 50</code> should return <code>1</code>');",
"assert(where([5, 3, 20, 3], 3) === 0, '<code>[5&#44; 3&#44; 20&#44; 3]&#44; 3</code> should return <code>0</code>/');",
"assert(where([2, 20, 10], 1) === 0, '<code>[2&#44; 20&#44; 10]&#44; 1</code> should return <code>0</code>.');",
"assert(where([2, 5, 10], 15) === 3, '<code>[2&#44; 5&#44; 10]&#44; 15</code> should return <code>3</code>.');"
], ],
"type": "bonfire", "type": "bonfire",
"challengeType": 5, "challengeType": 5,

372
challenges/basic-javascript.json
View File

@ -13,12 +13,13 @@
"<code>// This is a comment.</code>", "<code>// This is a comment.</code>",
"The slash-star-star-slash comment will comment out everything between the <code>/*</code> and the <code>*/</code> characters:", "The slash-star-star-slash comment will comment out everything between the <code>/*</code> and the <code>*/</code> characters:",
"<code>/* This is also a comment */</code>", "<code>/* This is also a comment */</code>",
"Try creating one of each." "Try creating one of each.",
"And one more thing you need to notice. Starting at this waypoint in JavaScript related challenges (except AngularJS, all Ziplines, Git, Node.js and Express.js, MongoDB and Full Stack JavaScript Projects) you can see contents of <code>assert()</code> functions (in some challenges <code>except()</code>, <code>assert.equal()</code> and so on) which are used to test your code. It's part of these challenges that you are able to see the tests that are running against your code."
], ],
"tests":[ "tests":[
"assert(editor.getValue().match(/(\\/\\/)...../g), 'Create a <code>\\/\\/</code> style comment that contains at least five letters');", "assert(editor.getValue().match(/(\\/\\/)...../g), 'Create a <code>//</code> style comment that contains at least five letters');",
"assert(editor.getValue().match(/(\\/\\*)...../g), 'Create a <code>\/\\* \\*\/</code> style comment that contains at least five letters.');", "assert(editor.getValue().match(/(\\/\\*)[\\w\\W]{5,}(?=\\*\\/)/gm), 'Create a <code>/* */</code> style comment that contains at least five letters.');",
"assert(editor.getValue().match(/(\\*\\/)/g), 'Make sure that you close the comment with a <code>\\*\/</code>');" "assert(editor.getValue().match(/(\\*\\/)/g), 'Make sure that you close the comment with a <code>*/</code>');"
], ],
"challengeSeed":[ "challengeSeed":[
], ],
@ -41,7 +42,7 @@
"challengeSeed": [ "challengeSeed": [
"function welcomeToBooleans() {", "function welcomeToBooleans() {",
"", "",
"// don't change code above here", "// Only change code below this line.",
"", "",
" return false;", " return false;",
"", "",
@ -65,7 +66,7 @@
"Look at the <code>ourName</code> example if you get stuck." "Look at the <code>ourName</code> example if you get stuck."
], ],
"tests": [ "tests": [
"assert((function(){/**/if(typeof(myName) !== \"undefined\" && typeof(myName) === \"string\" && myName.length > 0){return(true);}else{return(false);}/**/})(), 'myName should be a string that contains at least one character in it');" "assert((function(){if(typeof(myName) !== \"undefined\" && typeof(myName) === \"string\" && myName.length > 0){return true;}else{return false;}})(), '<code>myName</code> should be a string that contains at least one character in it.');"
], ],
"challengeSeed": [ "challengeSeed": [
"// var ourName = \"Free Code Camp\";", "// var ourName = \"Free Code Camp\";",
@ -75,7 +76,7 @@
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"", "",
"if(typeof(myName) !== \"undefined\"){(function(v){return(v);})(myName);}" "if(typeof(myName) !== \"undefined\"){(function(v){return v;})(myName);}"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -89,11 +90,11 @@
"Now let's create two new string variables: <code>myFirstName</code>and <code>myLastName</code> and assign them the values of your first and last name, respectively." "Now let's create two new string variables: <code>myFirstName</code>and <code>myLastName</code> and assign them the values of your first and last name, respectively."
], ],
"tests": [ "tests": [
"assert((function(){if(typeof(myFirstName) !== \"undefined\" && typeof(myFirstName) === \"string\" && myFirstName.length > 0){return(true);}else{return(false);}})(), 'myFirstName should be a string with a least one character in it');", "assert((function(){if(typeof(myFirstName) !== \"undefined\" && typeof(myFirstName) === \"string\" && myFirstName.length > 0){return true;}else{return false;}})(), '<code>myFirstName</code> should be a string with at least one character in it.');",
"assert((function(){if(typeof(myLastName) !== \"undefined\" && typeof(myLastName) === \"string\" && myLastName.length > 0){return(true);}else{return(false);}})(), 'myLastName should be a string with a least one character in it');" "assert((function(){if(typeof(myLastName) !== \"undefined\" && typeof(myLastName) === \"string\" && myLastName.length > 0){return true;}else{return false;}})(), '<code>myLastName</code> should be a string with at least one character in it.');"
], ],
"challengeSeed": [ "challengeSeed": [
"// name = \"Alan Turing\";", "// var name = \"Alan Turing\";",
"// var firstName = \"Alan\";", "// var firstName = \"Alan\";",
"// var lastName = \"Turing\";", "// var lastName = \"Turing\";",
"", "",
@ -101,7 +102,7 @@
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"if(typeof(myFirstName) !== \"undefined\" && typeof(myLastName) !== \"undefined\"){(function(){return(myFirstName + ', ' + myLastName);})();}" "if(typeof(myFirstName) !== \"undefined\" && typeof(myLastName) !== \"undefined\"){(function(){return myFirstName + ', ' + myLastName;})();}"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -111,13 +112,13 @@
"title": "Check the Length Property of a String Variable", "title": "Check the Length Property of a String Variable",
"difficulty": "9.9809", "difficulty": "9.9809",
"description": [ "description": [
"<code>data structures</code> have <code>properties</code>. For example, <code>strings</code> have a property called <code>.length</code> that will tell you how many characters are in the string.", "<code>Data structures</code> have <code>properties</code>. For example, <code>strings</code> have a property called <code>.length</code> that will tell you how many characters are in the string.",
"For example, if we created a variable <code>var firstName = \"Charles\"</code>, we could find out how long the string \"Charles\" is by using the <code>firstName.length</code> property.", "For example, if we created a variable <code>var firstName = \"Charles\"</code>, we could find out how long the string \"Charles\" is by using the <code>firstName.length</code> property.",
"Use the <code>.length</code> property to count the number of characters in the <code>lastName</code> variable." "Use the <code>.length</code> property to count the number of characters in the <code>lastName</code> variable."
], ],
"tests": [ "tests": [
"assert((function(){if(typeof(lastNameLength) !== \"undefined\" && typeof(lastNameLength) === \"number\" && lastNameLength === 8){return(true);}else{return(false);}})(), 'lastNameLength should be equal to eight.');", "assert((function(){if(typeof(lastNameLength) !== \"undefined\" && typeof(lastNameLength) === \"number\" && lastNameLength === 8){return true;}else{return false;}})(), '<code>lastNameLength</code> should be equal to eight.');",
"assert((function(){if(editor.getValue().match(/\\.length/gi) && editor.getValue().match(/\\.length/gi).length >= 2 && editor.getValue().match(/var lastNameLength \\= 0;/gi) && editor.getValue().match(/var lastNameLength \\= 0;/gi).length >= 1){return(true);}else{return(false);}})(), 'You should be getting the length of <code>lastName</code> by using <code>.length</code> like this: <code>lastName.length</code>');" "assert((function(){if(editor.getValue().match(/\\.length/gi) && editor.getValue().match(/\\.length/gi).length >= 2 && editor.getValue().match(/var lastNameLength \\= 0;/gi) && editor.getValue().match(/var lastNameLength \\= 0;/gi).length >= 1){return true;}else{return false;}})(), 'You should be getting the length of <code>lastName</code> by using <code>.length</code> like this: <code>lastName.length</code>.');"
], ],
"challengeSeed": [ "challengeSeed": [
"var firstNameLength = 0;", "var firstNameLength = 0;",
@ -128,7 +129,7 @@
"", "",
"var lastName = \"Lovelace\";", "var lastName = \"Lovelace\";",
"", "",
"// don't change code above here", "// Only change code below this line.",
"", "",
"lastNameLength = lastName;", "lastNameLength = lastName;",
"", "",
@ -137,7 +138,7 @@
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"if(typeof(lastNameLength) !== \"undefined\"){(function(){return(lastNameLength);})();}" "if(typeof(lastNameLength) !== \"undefined\"){(function(){return lastNameLength;})();}"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -154,7 +155,7 @@
"Try looking at the <code>firstLetterOfFirstName</code> variable declaration if you get stuck." "Try looking at the <code>firstLetterOfFirstName</code> variable declaration if you get stuck."
], ],
"tests": [ "tests": [
"assert((function(){if(typeof(firstLetterOfLastName) !== \"undefined\" && editor.getValue().match(/\\[0\\]/gi) && typeof(firstLetterOfLastName) === \"string\" && firstLetterOfLastName === \"L\"){return(true);}else{return(false);}})(), 'The first letter of firstLetterOfLastName should be a L');" "assert((function(){if(typeof(firstLetterOfLastName) !== \"undefined\" && editor.getValue().match(/\\[0\\]/gi) && typeof(firstLetterOfLastName) === \"string\" && firstLetterOfLastName === \"L\"){return true;}else{return false;}})(), 'The first letter of <code>firstLetterOfLastName</code> should be a <code>\"L\"</code>.');"
], ],
"challengeSeed": [ "challengeSeed": [
"var firstLetterOfFirstName = \"\";", "var firstLetterOfFirstName = \"\";",
@ -172,7 +173,7 @@
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"(function(v){return(v);})(firstLetterOfLastName);" "(function(v){return v;})(firstLetterOfLastName);"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -188,7 +189,7 @@
"Try looking at the <code>secondLetterOfFirstName</code> variable declaration if you get stuck." "Try looking at the <code>secondLetterOfFirstName</code> variable declaration if you get stuck."
], ],
"tests": [ "tests": [
"assert(thirdLetterOfLastName === 'v', 'The third last letter of lastName should be a \"v\"');" "assert(thirdLetterOfLastName === 'v', 'The third letter of <code>lastName</code> should be a <code>\"v\"</code>.');"
], ],
"challengeSeed": [ "challengeSeed": [
"var firstName = \"Ada\";", "var firstName = \"Ada\";",
@ -203,7 +204,7 @@
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"(function(v){return(v);})(thirdLetterOfLastName);" "(function(v){return v;})(thirdLetterOfLastName);"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -219,8 +220,8 @@
"Try looking at the <code>lastLetterOfFirstName</code> variable declaration if you get stuck." "Try looking at the <code>lastLetterOfFirstName</code> variable declaration if you get stuck."
], ],
"tests": [ "tests": [
"assert(lastLetterOfLastName === \"e\", 'lastLetterOfLastName should be \"e\"');", "assert(lastLetterOfLastName === \"e\", '<code>lastLetterOfLastName</code> should be <code>\"e\"</code>.');",
"assert(editor.getValue().match(/\\.length/g), 'You have to use <code>.length</code> to get the last letter');" "assert(editor.getValue().match(/\\.length/g).length === 2, 'You have to use <code>.length</code> to get the last letter.');"
], ],
"challengeSeed": [ "challengeSeed": [
"var firstName = \"Ada\";", "var firstName = \"Ada\";",
@ -235,7 +236,7 @@
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"(function(v){return(v);})(lastLetterOfLastName);" "(function(v){return v;})(lastLetterOfLastName);"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -248,11 +249,11 @@
"In order to get the last letter of a string, you can subtract one from the string's length.", "In order to get the last letter of a string, you can subtract one from the string's length.",
"For example, you can get the value of the third-to-last letter of the <code>var firstName = \"Charles\"</code> string by using <code>firstName[firstName.length - 3]</code>.", "For example, you can get the value of the third-to-last letter of the <code>var firstName = \"Charles\"</code> string by using <code>firstName[firstName.length - 3]</code>.",
"Use <code>bracket notation</code> to find the second-to-last character in the <code>lastName</code> string.", "Use <code>bracket notation</code> to find the second-to-last character in the <code>lastName</code> string.",
"Try looking at the <code>lastLetterOfLastName</code> variable declaration if you get stuck." "Try looking at the <code>thirdToLastLetterOfFirstName</code> variable declaration if you get stuck."
], ],
"tests": [ "tests": [
"assert(secondToLastLetterOfLastName === 'c', 'secondToLastLetterOfLastName should be \"c\".');", "assert(secondToLastLetterOfLastName === 'c', '<code>secondToLastLetterOfLastName</code> should be <code>\"c\"</code>.');",
"assert(editor.getValue().match(/\\.length/g), 'You have to use .length to get the third last letter.');" "assert(editor.getValue().match(/\\.length/g).length === 2, 'You have to use .length to get the second last letter.');"
], ],
"challengeSeed": [ "challengeSeed": [
"var firstName = \"Ada\";", "var firstName = \"Ada\";",
@ -267,7 +268,7 @@
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"(function(v){return(v);})(secondToLastLetterOfLastName);" "(function(v){return v;})(secondToLastLetterOfLastName);"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -282,7 +283,7 @@
"Replace the <code>0</code> with the correct number so you can get the result mentioned in the comment." "Replace the <code>0</code> with the correct number so you can get the result mentioned in the comment."
], ],
"tests": [ "tests": [
"assert((function(){if(sum === 20 && editor.getValue().match(/\\+/g)){return(true);}else{return(false);}})(), 'Make the variable <code>sum</code> equal 20');" "assert((function(){if(sum === 20 && editor.getValue().match(/\\+/g).length >= 2){return true;}else{return false;}})(), 'Make the variable <code>sum</code> equal 20.');"
], ],
"challengeSeed": [ "challengeSeed": [
"var sum = 10 + 0; //make this equal to 20 by changing the 0 into the appropriate number.", "var sum = 10 + 0; //make this equal to 20 by changing the 0 into the appropriate number.",
@ -290,7 +291,7 @@
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"(function(z){return('sum='+z);})(sum);" "(function(z){return 'sum='+z;})(sum);"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -305,7 +306,7 @@
"Replace the <code>0</code> with the correct number so you can get the result mentioned in the comment." "Replace the <code>0</code> with the correct number so you can get the result mentioned in the comment."
], ],
"tests": [ "tests": [
"assert((function(){if(difference === 12 && editor.getValue().match(/\\-/g)){return(true);}else{return(false);}})(), 'Make the variable <code>difference</code> equal 12');" "assert((function(){if(difference === 12 && editor.getValue().match(/\\-/g)){return true;}else{return false;}})(), 'Make the variable <code>difference</code> equal 12.');"
], ],
"challengeSeed": [ "challengeSeed": [
"var difference = 45 - 0; //make this equal to 12 by changing the 0 into the appropriate number.", "var difference = 45 - 0; //make this equal to 12 by changing the 0 into the appropriate number.",
@ -313,7 +314,7 @@
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"(function(z){return('difference='+z);})(difference);" "(function(z){return 'difference='+z;})(difference);"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -328,15 +329,15 @@
"Replace the <code>0</code> with the correct number so you can get the result mentioned in the comment." "Replace the <code>0</code> with the correct number so you can get the result mentioned in the comment."
], ],
"tests": [ "tests": [
"assert((function(){if(product === 80 && editor.getValue().match(/\\*/g)){return(true);}else{return(false);}})(), 'Make the variable <code>product</code> equal 80.');" "assert((function(){if(product === 80 && editor.getValue().match(/\\*/g)){return true;}else{return false;}})(), 'Make the variable <code>product</code> equal 80.');"
], ],
"challengeSeed": [ "challengeSeed": [
"var product = 8 * 0; //make this equal to 80 by changing the 0 into the appropriate number.", "var product = 8 * 0; // Make this equal to 80 by changing the 0 into the appropriate number.",
"", "",
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"(function(z){return('product='+z);})(product);" "(function(z){return 'product='+z;})(product);"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -351,7 +352,7 @@
"Replace the <code>0</code> with the correct number so you can get the result mentioned in the comment." "Replace the <code>0</code> with the correct number so you can get the result mentioned in the comment."
], ],
"tests": [ "tests": [
"assert((function(){if(quotient === 2 && editor.getValue().match(/\\//g)){return(true);}else{return(false);}})(), 'Make the variable <code>quotient</code> equal 2.');" "assert((function(){if(quotient === 2 && editor.getValue().match(/var\\s*?quotient\\s*?\\=\\s*?\\d+\\s*?\\/\\s*?\\d+\\s*?;/g)){return true;}else{return false;}})(), 'Make the variable <code>quotient</code> equal 2.');"
], ],
"challengeSeed": [ "challengeSeed": [
"var quotient = 66 / 0; //make this equal to 2 by changing the 0 into the appropriate number.", "var quotient = 66 / 0; //make this equal to 2 by changing the 0 into the appropriate number.",
@ -359,7 +360,7 @@
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"(function(z){return('quotient='+z);})(quotient);" "(function(z){return 'quotient='+z;})(quotient);"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -373,7 +374,7 @@
"Let's create a variable <code>myDecimal</code> and give it a decimal value." "Let's create a variable <code>myDecimal</code> and give it a decimal value."
], ],
"tests": [ "tests": [
"assert((function(){if(typeof(myDecimal) !== \"undefined\" && typeof(myDecimal) === \"number\" && editor.getValue().match(/\\./g).length >=2){return(true);}else{return(false);}})(), 'myDecimal should be a decimal point number.');" "assert((function(){if(typeof(myDecimal) !== \"undefined\" && typeof(myDecimal) === \"number\" && editor.getValue().match(/\\./g).length >=2){return true;}else{return false;}})(), 'myDecimal should be a decimal point number.');"
], ],
"challengeSeed": [ "challengeSeed": [
"// var ourDecimal = 5.7;", "// var ourDecimal = 5.7;",
@ -384,7 +385,7 @@
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"(function(){if(typeof(myDecimal) !== \"undefined\"){return(myDecimal);}})();" "(function(){if(typeof(myDecimal) !== \"undefined\"){return myDecimal;}})();"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -398,8 +399,8 @@
"Replace the <code>0.0</code> with the correct number so that you get the result mentioned in the comments." "Replace the <code>0.0</code> with the correct number so that you get the result mentioned in the comments."
], ],
"tests": [ "tests": [
"assert((function(){if(product === 5.0 && editor.getValue().match(/\\*/g)){return(true);}else{return(false);}})(), 'Make the variable <code>product</code> equal 5.0.');", "assert((function(){if(product === 5.0 && editor.getValue().match(/\\*/g)){return true;}else{return false;}})(), 'Make the variable <code>product</code> equal 5.0.');",
"assert((function(){if(quotient === 2.2 && editor.getValue().match(/\\//g)){return(true);}else{return(false);}})(), 'Make the variable <code>quotient</code> equal 2.2.');" "assert((function(){if(quotient === 2.2 && editor.getValue().match(/\\//g)){return true;}else{return false;}})(), 'Make the variable <code>quotient</code> equal 2.2.');"
], ],
"challengeSeed": [ "challengeSeed": [
"var quotient = 4.4 / 2.0; // equals 2.2", "var quotient = 4.4 / 2.0; // equals 2.2",
@ -409,7 +410,7 @@
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"(function(y){return('product='+y);})(product);" "(function(y){return 'product='+y;})(product);"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -420,14 +421,14 @@
"difficulty": "9.9816", "difficulty": "9.9816",
"description": [ "description": [
"With JavaScript <code>array</code> variables, we can store several pieces of data in one place.", "With JavaScript <code>array</code> variables, we can store several pieces of data in one place.",
"You start an array declaration with an opening bracket, end it with a closing bracket, and put a comma between each entry, like this: <code>var sandwich = [\"peanut butter\", \"jelly\", \"bread\"]</code>.", "You start an array declaration with an opening square bracket, end it with a closing square bracket, and put a comma between each entry, like this: <code>var sandwich = [\"peanut butter\", \"jelly\", \"bread\"]</code>.",
"Now let's create a new array called <code>myArray</code> that contains both a <code>string</code> and a <code>number</code>.", "Now let's create a new array called <code>myArray</code> that contains both a <code>string</code> and a <code>number</code> (in that order).",
"Refer to the comments if you get stuck." "Refer to the commented code in the text editor if you get stuck."
], ],
"tests": [ "tests": [
"assert(typeof(myArray) == 'object', 'myArray should be an array');", "assert(typeof(myArray) == 'object', '<code>myArray</code> should be an <code>array</code>.');",
"assert(typeof(myArray[0]) !== 'undefined' && typeof(myArray[0]) == 'string', 'The first item in myArray should be a string');", "assert(typeof(myArray[0]) !== 'undefined' && typeof(myArray[0]) == 'string', 'The first item in <code>myArray</code> should be a <code>string</code>.');",
"assert(typeof(myArray[1]) !== 'undefined' && typeof(myArray[1]) == 'number', 'The second item in myArray should be a number');" "assert(typeof(myArray[1]) !== 'undefined' && typeof(myArray[1]) == 'number', 'The second item in <code>myArray</code> should be a <code>number</code>.');"
], ],
"challengeSeed": [ "challengeSeed": [
"// var array = [\"John\", 23];", "// var array = [\"John\", 23];",
@ -439,7 +440,7 @@
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"(function(z){return(z);})(myArray);" "(function(z){return z;})(myArray);"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -449,7 +450,7 @@
"title": "Nest one Array within Another Array", "title": "Nest one Array within Another Array",
"difficulty":"9.98161", "difficulty":"9.98161",
"description":[ "description":[
"You can also nest arrays within other arrays, like this: <code>[[\"Bulls\", 43]]</code>.", "You can also nest arrays within other arrays, like this: <code>[[\"Bulls\", 23]]</code>.",
"Let's now go create a nested array called <code>myArray</code>." "Let's now go create a nested array called <code>myArray</code>."
], ],
"tests":[ "tests":[
@ -464,7 +465,7 @@
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"if(typeof(myArray) !== \"undefined\"){(function(){return(myArray);})();}" "if(typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -483,7 +484,7 @@
"Create a variable called <code>myData</code> and set it to equal the first value of <code>myArray</code>." "Create a variable called <code>myData</code> and set it to equal the first value of <code>myArray</code>."
], ],
"tests":[ "tests":[
"assert((function(){if(typeof(myArray) != 'undefined' && typeof(myData) != 'undefined' && myArray[0] == myData){return(true);}else{return(false);}})(), 'The variable <code>myData</code> should equal the first value of myArray');" "assert((function(){if(typeof(myArray) != 'undefined' && typeof(myData) != 'undefined' && myArray[0] == myData){return true;}else{return false;}})(), 'The variable <code>myData</code> should equal the first value of <code>myArray</code>.');"
], ],
"challengeSeed":[ "challengeSeed":[
"// var ourArray = [1,2,3];", "// var ourArray = [1,2,3];",
@ -496,7 +497,7 @@
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"if(typeof(myArray) !== \"undefined\" && typeof(myData) !== \"undefined\"){(function(y,z){return('myArray = ' + JSON.stringify(y) + ', myData = ' + JSON.stringify(z));})(myArray, myData);}" "if(typeof(myArray) !== \"undefined\" && typeof(myData) !== \"undefined\"){(function(y,z){return 'myArray = ' + JSON.stringify(y) + ', myData = ' + JSON.stringify(z);})(myArray, myData);}"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -513,8 +514,8 @@
"Now modify the data stored at index 0 of <code>myArray</code> to the value of 3." "Now modify the data stored at index 0 of <code>myArray</code> to the value of 3."
], ],
"tests":[ "tests":[
"assert((function(){if(typeof(myArray) != 'undefined' && myArray[0] == 3 && myArray[1] == 2 && myArray[2] == 3){return(true);}else{return(false);}})(), 'myArray should now be [3,2,3]');", "assert((function(){if(typeof(myArray) != 'undefined' && myArray[0] == 3 && myArray[1] == 2 && myArray[2] == 3){return true;}else{return false;}})(), '<code>myArray</code> should now be [3,2,3].');",
"assert((function(){if(editor.getValue().match(/[0]/g).length >= 1 && editor.getValue().match(/=/g).length >= 2){return(true);}else{return(false);}})(), 'You should be using indexes to modify the values in myArray');" "assert((function(){if(editor.getValue().match(/myArray\\[0\\]\\s?=\\s?/g)){return true;}else{return false;}})(), 'You should be using correct index to modify the value in <code>myArray</code>.');"
], ],
"challengeSeed":[ "challengeSeed":[
"var ourArray = [1,2,3];", "var ourArray = [1,2,3];",
@ -527,7 +528,7 @@
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"if(typeof(myArray) !== \"undefined\"){(function(){return(myArray);})();}" "if(typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -540,11 +541,11 @@
"Another way to change the data in an array is with the <code>.pop()</code> function.", "Another way to change the data in an array is with the <code>.pop()</code> function.",
"<code>.pop()</code>is used to \"pop\" a value off of the end of an array. We can retrieve this value by performing <code>pop()</code> in a variable declaration.", "<code>.pop()</code>is used to \"pop\" a value off of the end of an array. We can retrieve this value by performing <code>pop()</code> in a variable declaration.",
"Any type of variable can be \"popped\" off of an array.", "Any type of variable can be \"popped\" off of an array.",
"Use the <code>.pop()</code> function to remove the last item from myArray." "Use the <code>.pop()</code> function to remove the last item from <code>myArray</code>."
], ],
"tests": [ "tests": [
"assert((function(d){if(d[0] == 'John' && d[1] == 23 && d[2] == undefined){return(true);}else{return(false);}})(myArray), 'myArray should only have the first two values left([\"John\", 23])');", "assert((function(d){if(d[0] == 'John' && d[1] == 23 && d[2] == undefined){return true;}else{return false;}})(myArray), '<code>myArray</code> should only have the first two values left([\"John\", 23]).');",
"assert((function(d){if(d[0] == 'cat' && d[1] == 2 && d[2] == undefined){return(true);}else{return(false);}})(removed), 'myArray should only have the first two values left([\"cat\"], 2)');" "assert((function(d){if(d[0] == 'cat' && d[1] == 2 && d[2] == undefined){return true;}else{return false;}})(removed), '<code>removed</code> should only have the first two values left([\"cat\"], 2).');"
], ],
"challengeSeed": [ "challengeSeed": [
"// var numbers = [1,2,3];", "// var numbers = [1,2,3];",
@ -561,7 +562,7 @@
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"(function(y, z){return('myArray = ' + JSON.stringify(y) + ' & removed = ' + JSON.stringify(z));})(myArray, removed);" "(function(y, z){return 'myArray = ' + JSON.stringify(y) + ' & removed = ' + JSON.stringify(z);})(myArray, removed);"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -572,27 +573,27 @@
"difficulty": "9.9818", "difficulty": "9.9818",
"description": [ "description": [
"Not only can you <code>pop()</code> data off of the end of an array, you can also <code>push()</code> data onto the end of an array.", "Not only can you <code>pop()</code> data off of the end of an array, you can also <code>push()</code> data onto the end of an array.",
"Take the myArray array and <code>push()</code> this value to the end of it: <code>[\"dog\", 3]</code>." "Take the <code>myArray</code> array and <code>push()</code> this value to the end of it: <code>[\"dog\", 3]</code>."
], ],
"tests": [ "tests": [
"assert((function(d){if(d[2] != undefined && d[0] == 'John' && d[1] == 23 && d[2][0] == 'dog' && d[2][1] == 3 && d[2].length == 2){return(true);}else{return(false);}})(myArray), 'myArray should only have the first two values left([\"John\", 23, [\"dog\", 3]])');" "assert((function(d){if(d[2] != undefined && d[0] == 'John' && d[1] == 23 && d[2][0] == 'dog' && d[2][1] == 3 && d[2].length == 2){return true;}else{return false;}})(myArray), '<code>myArray</code> should only have the first two values left([\"John\", 23, [\"dog\", 3]]).');"
], ],
"challengeSeed": [ "challengeSeed": [
"var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];", "var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
"ourArray.pop();", "ourArray.pop();",
"ourArray.push([\"happy\", \"joy\"]);", "ourArray.push([\"happy\", \"joy\"]);",
"// ourArray now equals [\"Stimpson\", \"J\", [\"happy\", \"joy\"]]", "// ourArray now equals [\"Stimpson\", \"J\", [\"happy\", \"joy\"]].",
"", "",
"var myArray = [\"John\", 23, [\"cat\", 2]];", "var myArray = [\"John\", 23, [\"cat\", 2]];",
"myArray.pop();", "myArray.pop();",
"//Add a [\"dog\", 3] to the end of myArray using push()", "// Add a [\"dog\", 3] to the end of myArray using push().",
"// Only change code below this line.", "// Only change code below this line.",
"", "",
"", "",
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"(function(z){return('myArray = ' + JSON.stringify(z));})(myArray);" "(function(z){return 'myArray = ' + JSON.stringify(z);})(myArray);"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -603,27 +604,27 @@
"difficulty": "9.9817", "difficulty": "9.9817",
"description": [ "description": [
"<code>pop()</code> always removes the last element of an array. What if you want to remove the first? That's where <code>.shift()</code> comes in.", "<code>pop()</code> always removes the last element of an array. What if you want to remove the first? That's where <code>.shift()</code> comes in.",
"Take the myArray array and <code>shift()</code> the first value off of it." "Take the <code>myArray</code> array and <code>shift()</code> the first value off of it. Set <code>myRemoved</code> to the first value of <code>myArray</code> using <code>shift()</code>."
], ],
"tests": [ "tests": [
"assert((function(d){if(d[0] == 23 && d[1][0] == 'dog' && d[1][1] == 3 && d[2] == undefined){return(true);}else{return(false);}})(myArray), 'myArray should only have the first two values left([\"John\", 23])');", "assert((function(d){if(d[0] == 23 && d[1][0] == 'dog' && d[1][1] == 3 && d[2] == undefined){return true;}else{return false;}})(myArray), '<code>myArray</code> should only have the last two values left([23, [\"dog\", 3]]).');",
"assert((function(d){if(d === 'John' && typeof(myRemoved) === 'string'){return(true);}else{return(false);}})(myRemoved), 'myRemoved should contain \"John\"');" "assert((function(d){if(d === 'John' && typeof(myRemoved) === 'string'){return true;}else{return false;}})(myRemoved), '<code>myRemoved</code> should contain <code>\"John\"</code>.');"
], ],
"challengeSeed": [ "challengeSeed": [
"var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];", "var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
"ourRemoved = ourArray.shift();", "ourRemoved = ourArray.shift();",
"// ourArray now equals [\"J\", [\"cat\"]]", "// ourArray now equals [\"J\", [\"cat\"]].",
"", "",
"var myArray = [\"John\", 23, [\"dog\", 3]];", "var myArray = [\"John\", 23, [\"dog\", 3]];",
"// Only change code below this line.", "// Only change code below this line.",
"", "",
"var myRemoved = myArray; // This should be [\"John\"] and myArray should now be [23, [\"dog\", 3]]", "var myRemoved = myArray; // This should be [\"John\"] and myArray should now be [23, [\"dog\", 3]].",
"", "",
"// Only change code above this line.", "// Only change code above this line.",
"", "",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"(function(y, z){return('myArray = ' + JSON.stringify(y) + ' & myRemoved = ' + JSON.stringify(z));})(myArray, myRemoved);" "(function(y, z){return 'myArray = ' + JSON.stringify(y) + ' & myRemoved = ' + JSON.stringify(z);})(myArray, myRemoved);"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -633,29 +634,29 @@
"title": "Manipulate Arrays With unshift()", "title": "Manipulate Arrays With unshift()",
"difficulty": "9.9818", "difficulty": "9.9818",
"description": [ "description": [
"Now that we've learned how to <code>shift</code>things from the start of the array, we need to learn how to <code>unshift</code>stuff back to the start", "Now that we've learned how to <code>shift</code>things from the start of the array, we need to learn how to <code>unshift</code>stuff back to the start.",
"Let's take the code we had last time and <code>unshift</code>this value to the start: <code>\"Paul\" </code>" "Let's take the code we had last time and <code>unshift</code>this value to the start: <code>\"Paul\"</code>."
], ],
"tests": [ "tests": [
"assert((function(d){if(d[0].toLowerCase() == 'paul' && d[1] == 23 && d[2][0] != undefined && d[2][0] == 'dog' && d[2][1] != undefined && d[2][1] == 3){return(true);}else{return(false);}})(myArray), 'myArray should now have [\"Paul\", 23, [\"dog\", 3]])');" "assert((function(d){if(typeof(d[0]) === \"string\" && d[0].toLowerCase() == 'paul' && d[1] == 23 && d[2][0] != undefined && d[2][0] == 'dog' && d[2][1] != undefined && d[2][1] == 3){return true;}else{return false;}})(myArray), '<code>myArray</code> should now have [\"Paul\", 23, [\"dog\", 3]]).');"
], ],
"challengeSeed": [ "challengeSeed": [
"var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];", "var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
"ourArray.shift();", "ourArray.shift();",
"ourArray.unshift([\"happy\", \"joy\"]);", "// ourArray now equals [\"happy\", \"J\", [\"cat\"]]",
"// ourArray now equals [[\"happy\", \"joy\"], \"J\", [\"cat\"]]", "ourArray.unshift(\"happy\");",
"", "",
"var myArray = [\"John\", 23, [\"dog\", 3]];", "var myArray = [\"John\", 23, [\"dog\", 3]];",
"myArray.shift();", "myArray.shift();",
"", "",
"// Add \"Paul\" to the start of myArray", "// Add \"Paul\" to the start of myArray.",
"// Only change code below this line.", "// Only change code below this line.",
"", "",
"", "",
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"(function(y, z){return('myArray = ' + JSON.stringify(y));})(myArray);" "(function(y, z){return 'myArray = ' + JSON.stringify(y);})(myArray);"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -665,26 +666,27 @@
"title": "Write Reusable JavaScript with Functions", "title": "Write Reusable JavaScript with Functions",
"difficulty":"9.9819", "difficulty":"9.9819",
"description":[ "description":[
"In JavaScript, we can divide up our code into reusable parts called <code>functions</code>.", "In JavaScript, we can divide up our code into reusable parts called functions.",
"Here's an example of a function:", "Here's an example of a function:",
"<code>function functionName(a, b) {</code>", "<code>function functionName(a, b) {</code>",
"<code>&thinsp;&thinsp;return(a + b);</code>", "<code>&thinsp;&thinsp;return a + b;</code>",
"<code>}</code>", "<code>}</code>",
"We can \"call\" our function like this: <code>functionName();</code>, and it will run and return it's <code>return</code> value to us.", "After writing the above lines in our code, we can then pass values to our function and the result following the <code>return</code> statement will be returned.",
"Create and call a function called <code>myFunction</code>." "For example, we can pass numbers <code>4</code> and <code>2</code> by “calling” the function later in our code like this: <code>functionName(4, 2)</code>.",
"In this example, the function will return the number <code>6</code> as this is the result of <code>4 + 2</code>.",
"Create and call a function called <code>myFunction</code> that returns the sum of <code>a</code> and <code>b</code>."
], ],
"tests":[ "tests":[
"assert((function(){if(typeof(f) !== \"undefined\" && typeof(f) === \"number\" && f === a + b && editor.getValue().match(/return/gi).length >= 1 && editor.getValue().match(/a/gi).length >= 1 && editor.getValue().match(/b/gi).length >= 1 && editor.getValue().match(/\\+/gi).length >= 1){return(true);}else{return(false);}})(), 'Your function should return the value of a + b');" "assert((function(){if(typeof(f) !== \"undefined\" && f === a + b){return true;}else{return false;}})(), 'Your function should return the value of a + b');"
], ],
"challengeSeed":[ "challengeSeed":[
"var a = 4;", "var a = 4;",
"var b = 5;", "var b = 5;",
"", "",
"ourFunction = function() {", "function ourFunction(a, b) {",
" return a - b;", " return a - b;",
"};", "};",
"", "",
"//Don't modify above this line",
"// Create a function called myFunction that returns the value of a plus b.", "// Create a function called myFunction that returns the value of a plus b.",
"// Only change code below this line.", "// Only change code below this line.",
"", "",
@ -696,7 +698,7 @@
"// You'll learn about functions soon.", "// You'll learn about functions soon.",
"if(typeof(myFunction) !== \"undefined\"){", "if(typeof(myFunction) !== \"undefined\"){",
"var f=myFunction(a,b);", "var f=myFunction(a,b);",
"(function(){return(f);})();", "(function(){return f;})();",
"}" "}"
], ],
"type": "waypoint", "type": "waypoint",
@ -717,14 +719,14 @@
"<code> \"enemies\": [\"Water\", \"Dogs\"]</code>", "<code> \"enemies\": [\"Water\", \"Dogs\"]</code>",
"<code>};</code>", "<code>};</code>",
"</code>", "</code>",
"Objects are useful for storing data in a structured way, and can represents real world objects, like a cats.", "Objects are useful for storing data in a structured way, and can represent real world objects, like a cat.",
"Let's try to make an Object that represents a dog called myDog!" "Let's try to make an object that represents a dog called <code>myDog</code> which contains the properties <code>'name'</code> (String), <code>'legs'</code> (Number), <code>'tails'</code> (Number) and <code>'friends'</code> (Array)!"
], ],
"tests":[ "tests":[
"assert((function(z){if(z.hasOwnProperty(\"name\") && z.name !== undefined && typeof(z.name) === \"string\"){return(true);}else{return(false);}})(myDog), 'myDog should contain the property name and it should be a string');", "assert((function(z){if(z.hasOwnProperty(\"name\") && z.name !== undefined && typeof(z.name) === \"string\"){return true;}else{return false;}})(myDog), '<code>myDog</code> should contain the property <code>name</code> and it should be a <code>string</code>.');",
"assert((function(z){if(z.hasOwnProperty(\"legs\") && z.legs !== undefined && typeof(z.legs) === \"number\"){return(true);}else{return(false);}})(myDog), 'myDog should contain the property legs and it should be a number');", "assert((function(z){if(z.hasOwnProperty(\"legs\") && z.legs !== undefined && typeof(z.legs) === \"number\"){return true;}else{return false;}})(myDog), '<code>myDog</code> should contain the property <code>legs</code> and it should be a <code>number</code>.');",
"assert((function(z){if(z.hasOwnProperty(\"tails\") && z.tails !== undefined && typeof(z.tails) === \"number\"){return(true);}else{return(false);}})(myDog), 'myDog should contain the property tails and it should be a number');", "assert((function(z){if(z.hasOwnProperty(\"tails\") && z.tails !== undefined && typeof(z.tails) === \"number\"){return true;}else{return false;}})(myDog), '<code>myDog</code> should contain the property <code>tails</code> and it should be a <code>number</code>.');",
"assert((function(z){if(z.hasOwnProperty(\"friends\") && z.friends !== undefined && Array.isArray(z.friends)){return(true);}else{return(false);}})(myDog), 'myDog should contain the property friends and it should be an array');" "assert((function(z){if(z.hasOwnProperty(\"friends\") && z.friends !== undefined && Array.isArray(z.friends)){return true;}else{return false;}})(myDog), '<code>myDog</code> should contain the property <code>friends</code> and it should be an <code>array</code>.');"
], ],
"challengeSeed":[ "challengeSeed":[
"// var ourDog = {", "// var ourDog = {",
@ -734,7 +736,7 @@
"// \"friends\": [\"everything!\"]", "// \"friends\": [\"everything!\"]",
"// };", "// };",
"", "",
"// add the name(string), legs(number), tails(number) and friends(array) properties to myDog.", "// Add the name (string), legs (number), tails (number) and friends (array) properties to myDog.",
"// You can set them to whatever you want.", "// You can set them to whatever you want.",
"", "",
"// Only change code below this line.", "// Only change code below this line.",
@ -745,7 +747,7 @@
"", "",
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"(function(z){return(z);})(myDog);" "(function(z){return z;})(myDog);"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -760,11 +762,11 @@
"<code>myObject.myProperty = \"myValue\";</code>", "<code>myObject.myProperty = \"myValue\";</code>",
"We can also delete them like this:", "We can also delete them like this:",
"<code>delete myObject.myProperty;</code>", "<code>delete myObject.myProperty;</code>",
"Let's add the property \"bark\", and delete the property \"tails\"." "Let's add the property <code>\"bark\"</code>, and delete the property <code>\"tails\"</code>."
], ],
"tests":[ "tests":[
"assert(myDog.bark !== undefined, 'Add the property \"bark\" to myDog.');", "assert(myDog.bark !== undefined, 'Add the property <code>\"bark\"</code> to <code>myDog</code>.');",
"assert(myDog.tails === undefined, 'Delete the property \"tails\" from myDog.');" "assert(myDog.tails === undefined, 'Delete the property <code>\"tails\"</code> from <code>myDog</code>.');"
], ],
"challengeSeed":[ "challengeSeed":[
"// var ourDog = {", "// var ourDog = {",
@ -794,7 +796,7 @@
"", "",
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"(function(z){return(z);})(myDog);" "(function(z){return z;})(myDog);"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -814,8 +816,8 @@
"Let's try getting a for loop to work by pushing values to an array." "Let's try getting a for loop to work by pushing values to an array."
], ],
"tests":[ "tests":[
"assert(editor.getValue().match(/for/g), 'You should be using a for loop for this.');", "assert(editor.getValue().match(/for/g), 'You should be using a <code>for</code> loop for this.');",
"assert.deepEqual(myArray, [0,1,2,3,4], 'myArray should equal [0,1,2,3,4]');" "assert.deepEqual(myArray, [0,1,2,3,4], '<code>myArray</code> should equal [0,1,2,3,4].');"
], ],
"challengeSeed":[ "challengeSeed":[
"ourArray = [];", "ourArray = [];",
@ -823,8 +825,15 @@
" ourArray.push(i);", " ourArray.push(i);",
"}", "}",
"var myArray = [];", "var myArray = [];",
"",
"// Only change code below this line.",
"",
"// Push the numbers zero through four to myArray using a \"for loop\" like above.", "// Push the numbers zero through four to myArray using a \"for loop\" like above.",
"", "",
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
"if(typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}",
"" ""
], ],
"type": "waypoint", "type": "waypoint",
@ -846,13 +855,19 @@
"Let's try getting a while loop to work by pushing values to an array." "Let's try getting a while loop to work by pushing values to an array."
], ],
"tests":[ "tests":[
"assert(editor.getValue().match(/while/g), 'You should be using a while loop for this.');", "assert(editor.getValue().match(/while/g), 'You should be using a <code>while</code> loop for this.');",
"assert.deepEqual(myArray, [0,1,2,3,4], 'myArray should equal [0,1,2,3,4]');" "assert.deepEqual(myArray, [0,1,2,3,4], '<code>myArray</code> should equal [0,1,2,3,4].');"
], ],
"challengeSeed":[ "challengeSeed":[
"var myArray = [];", "var myArray = [];",
"//Push the numbers zero through four to myArray", "// Only change code below this line.",
"", "",
"// Push the numbers zero through four to myArray using a \"while loop\".",
"",
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
"if(typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}",
"" ""
], ],
"type": "waypoint", "type": "waypoint",
@ -868,22 +883,22 @@
"Use <code>Math.random()</code> to get <code>myFunction</code> to return a random number." "Use <code>Math.random()</code> to get <code>myFunction</code> to return a random number."
], ],
"tests":[ "tests":[
"assert(typeof(myFunction()) === \"number\", 'myFunction should return a random number');", "assert(typeof(myFunction()) === \"number\", '<code>myFunction</code> should return a random number.');",
"assert((myFunction()+''). match(/\\./g), 'The number returned by myFunction should be a decimal');", "assert((myFunction()+''). match(/\\./g), 'The number returned by <code>myFunction</code> should be a decimal.');",
"assert(editor.getValue().match(/Math\\.random/g).length >= 2, 'You should be using Math.random to generate the random decimal number');" "assert(editor.getValue().match(/Math\\.random/g).length >= 2, 'You should be using <code>Math.random</code> to generate the random decimal number.');"
], ],
"challengeSeed":[ "challengeSeed":[
"function myFunction() {", "function myFunction() {",
" //Change the 0 to Math.random()", " // Change the 0 to Math.random().",
" // Only change code below this line.", " // Only change code below this line.",
"", "",
" return(0);", " return 0;",
"", "",
" // Only change code above this line.", " // Only change code above this line.",
"}", "}",
"", "",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"(function(){return(myFunction());})();" "(function(){return myFunction();})();"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -894,31 +909,31 @@
"difficulty":"9.9828", "difficulty":"9.9828",
"description":[ "description":[
"It's great that we can create random decimal numbers, but it's even more useful if we use it to generate a random whole number.", "It's great that we can create random decimal numbers, but it's even more useful if we use it to generate a random whole number.",
"To achieve this we can multiply the random number by ten and use the <code>Math.floor()</code> to convert the decimal number to a whole number.", "To achieve this we can multiply the random number by ten and use the <code>Math.floor()</code> to convert the decimal number to the nearest less than or equal whole number.",
"This technique gives us a whole number between zero and nine.", "This technique gives us a whole number between zero and nine.",
"Example:", "Example:",
"<code>Math.floor(Math.random()*10);</code>", "<code>Math.floor(Math.random()*10);</code>",
"Let's give this technique a go now." "Let's give this technique a go now."
], ],
"tests":[ "tests":[
"assert(typeof(myFunction()) === \"number\", 'The result of myFunction should be a number');", "assert(typeof(myFunction()) === \"number\", 'The result of <code>myFunction</code> should be a number.');",
"assert(editor.getValue().match(/Math.random/g), 'You should be using Math.random to create a random number');", "assert(editor.getValue().match(/Math.random/g), 'You should be using Math.random to create a random number.');",
"assert(!(''+myFunction()).match(/\\./g), 'You should have multiplied the result of Math.random by 10 to make it a number that\\'s greater then zero');", "assert(editor.getValue().match(/\\(\\s*?Math.random\\s*?\\(\\s*?\\)\\s*?\\*\\s*?10\\s*?\\)/g) || editor.getValue().match(/\\(\\s*?10\\s*?\\*\\s*?Math.random\\s*?\\(\\s*?\\)\\s*?\\)/g), 'You should have multiplied the result of <code>Math.random</code> by 10 to make it a number that\\'s between zero and nine.');",
"assert(editor.getValue().match(/Math.floor/g), 'You should use Math.floor to remove the decimal part of the number');" "assert(editor.getValue().match(/Math.floor/g), 'You should use <code>Math.floor</code> to remove the decimal part of the number.');"
], ],
"challengeSeed":[ "challengeSeed":[
"function myFunction(){", "function myFunction(){",
" // Make myFunction return a random number betweenzero and nine> instead of a decimal", " // Make myFunction return a random number between zero and nine instead of a decimal.",
"", "",
" // Only change code below this line.", " // Only change code below this line.",
"", "",
" return(Math.random());", " return Math.random();",
"", "",
" // Only change code above this line.", " // Only change code above this line.",
"}", "}",
"", "",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"(function(){return(myFunction());})();" "(function(){return myFunction();})();"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -930,12 +945,13 @@
"description":[ "description":[
"We can use a certain mathematical expression to get a random number between two numbers.", "We can use a certain mathematical expression to get a random number between two numbers.",
"<code>Math.floor(Math.random() * (max - min + 1)) + min</code>", "<code>Math.floor(Math.random() * (max - min + 1)) + min</code>",
"By using this we can control the output of a random number." "By using this, we can control the output of a random number."
], ],
"tests":[ "tests":[
"assert(myFunction() >= min, 'The random number that\\'s generated by myFunction should be greater than or equal to the minimum number');", "assert(myFunction() >= min, 'The random number that\\'s generated by myFunction should be greater than or equal to the minimum number');",
"assert(myFunction() <= max, 'The random number that\\'s generated by myFunction should be less than or equal to the maximum number');", "assert(myFunction() <= max, 'The random number that\\'s generated by myFunction should be less than or equal to the maximum number');",
"assert((function(){if(editor.getValue().match(/max/g).length >= 2 && editor.getValue().match(/min/g).length >= 2 && editor.getValue().match(/Math.floor/g) && editor.getValue().match(/Math.random/g)){return(true);}else{return(false);}})(), 'You should be using the function given in the description to calculate the random in number in a range');" "assert(myFunction() % 1 === 0 , 'The random number that\\'s generated by myFunction should be an integer');",
"assert((function(){if(editor.getValue().match(/max/g).length >= 2 && editor.getValue().match(/min/g).length >= 2 && editor.getValue().match(/Math.floor/g) && editor.getValue().match(/Math.random/g)){return true;}else{return false;}})(), 'You should be using the function given in the description to calculate the random in number in a range');"
], ],
"challengeSeed":[ "challengeSeed":[
"var min = 0;", "var min = 0;",
@ -944,51 +960,52 @@
" // Make myFunction return a random number between zero and nine instead of a decimal", " // Make myFunction return a random number between zero and nine instead of a decimal",
" // Only change code below this line.", " // Only change code below this line.",
"", "",
" return(Math.random());", " return Math.random();",
"}", "}",
"", "",
"// Only change code above this line.", "// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"(function(){return(myFunction());})();" "(function(){return myFunction();})();"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
}, },
{ {
"id":"cf1111c1c12feddfaeb3bdef", "id":"cf1111c1c12feddfaeb3bdef",
"title": "Use Conditional Logic with If-Else Statements", "title": "Use Conditional Logic with If and Else Statements",
"difficulty":"9.983", "difficulty":"9.983",
"description":[ "description":[
"We can use if statements in JavaScript to only execute code if a certain condition is met.", "We can use <code>if</code> statements in JavaScript to only execute code if a certain condition is met.",
"if statements require some sort of boolean condition to evaluate.", "<code>if</code> statements require some sort of boolean condition to evaluate.",
"Example:", "For example:",
"<code> if (1 === 2) {</code>", "<code> if (1 === 2) {</code>",
"<code>&thinsp;&thinsp;return(true);</code>", "<code>&thinsp;&thinsp;return true;</code>",
"<code>}</code>", "<code>} else {</code>",
"<code>else {</code>", "<code>&thinsp;&thinsp;return false;</code>",
"<code>&thinsp;&thinsp;return(false);</code>",
"<code>}</code>", "<code>}</code>",
"Let's use <code>if</code> and <code>else</code> statements to make a coin-flip game.", "Let's use <code>if</code> and <code>else</code> statements to make a coin-flip game.",
"Create an <code>if-else statement</code> to return <code>heads</code> if the flip var is zero, or else return <code>tails</code> if it's not." "Create <code>if</code> and <code>else</code> statements to return the string <code>\"heads\"</code> if the flip variable is zero, or else return the string <code>\"tails\"</code> if the flip variable is not zero."
], ],
"tests":[ "tests":[
"assert((function(){if(myFunction() === \"heads\" || myFunction() === \"tails\"){return(true);}else{return(false);}})(), 'myFunction should either return heads or tails');", "assert((function(){var result = myFunction();if(result === 'heads' || result === 'tails'){return true;} else {return false;}})(), '<code>myFunction</code> should either return <code>heads</code> or <code>tails</code>.');",
"assert(editor.getValue().match(/if/g).length >= 3, 'You should have created a new if statement');", "assert((function(){var result = myFunction();if(result === 'heads' && flip === 0 || result === 'tails' && flip !== 0){return true;} else {return false;}})(), '<code>myFunction</code> should return <code>heads</code> when flip equals 0 and <code>tails</code> when flip equals 1.');",
"assert(editor.getValue().match(/else/g).length >= 2, 'You should have created a new else statement');" "assert(editor.getValue().match(/if/g).length >= 4, 'You should have created a new if statement.');",
"assert(editor.getValue().match(/else/g).length >= 2, 'You should have created a new else statement.');"
], ],
"challengeSeed":[ "challengeSeed":[
"function myFunction(){",
"var flip = Math.floor(Math.random() * (1 - 0 + 1)) + 0;", "var flip = Math.floor(Math.random() * (1 - 0 + 1)) + 0;",
"function myFunction(){",
" // Create an if-else statement here to return \"heads\" if flip is 0. Otherwise return \"tails\".", " // Create an if-else statement here to return \"heads\" if flip is 0. Otherwise return \"tails\".",
"", "",
" // Only change code below this line.", " // Only change code below this line.",
"", "",
"", "",
"}",
"", "",
" // Only change code above this line.", " // Only change code above this line.",
"}",
"",
"// We use this function to show you the value of your variable in your output box.", "// We use this function to show you the value of your variable in your output box.",
"(function(){return(myFunction());})();" "var result = myFunction();if(typeof(flip) !== \"undefined\" && typeof(flip) === \"number\" && typeof(result) !== \"undefined\" && typeof(result) === \"string\"){(function(y,z){return 'flip = ' + y.toString() + ', text = ' + z;})(flip, result);}"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -999,31 +1016,30 @@
"difficulty":"9.984", "difficulty":"9.984",
"description":[ "description":[
"<code>Regular expressions</code> are used to find certain words or patterns inside of <code>strings</code>.", "<code>Regular expressions</code> are used to find certain words or patterns inside of <code>strings</code>.",
"For example, if we wanted to find the number of times the word <code>the</code> occurred in the string <code>The dog chased the cat</code>, we could use the following <code>regular expression</code>: <code>\/the+\/gi</code>", "For example, if we wanted to find the word <code>the</code> in the string <code>The dog chased the cat</code>, we could use the following <code>regular expression</code>: <code>\/the\/gi</code>",
"Let's break this down a bit:", "Let's break this down a bit:",
"<code>the</code> is the pattern we want to match.", "<code>the</code> is the pattern we want to match.",
"<code>+</code> means we want to find one or more occurrences of this pattern.", "<code>g</code> means that we want to search the entire string for this pattern instead of just the first match.",
"<code>g</code> means that we want to search the entire string for this pattern.",
"<code>i</code> means that we want to ignore the case (uppercase or lowercase) when searching for the pattern.", "<code>i</code> means that we want to ignore the case (uppercase or lowercase) when searching for the pattern.",
"<code>Regular expressions</code> are usually surrounded by <code>/</code> symbols.", "<code>Regular expressions</code> are written by surrounding the pattern with <code>/</code> symbols.",
"Let's try selecting all the occurrences of the word <code>and</code> in the string <code>George Boole and Alan Turing went to the shop and got some milk</code>. We can do this by replacing the <code>.+</code> part of our regular expression with the current <code>regular expression</code> with the word <code>and</code>." "Let's try selecting all the occurrences of the word <code>and</code> in the string <code>Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it</code>. We can do this by replacing the <code>.</code> part of our regular expression with the current <code>regular expression</code> with the word <code>and</code>."
], ],
"tests":[ "tests":[
"assert(test==2, 'Your <code>regular expression</code> should find two occurrences of the word <code>and</code>');", "assert(test==2, 'Your <code>regular expression</code> should find two occurrences of the word <code>and</code>.');",
"assert(editor.getValue().match(/\\/and\\+\\/gi/), 'You should have used <code>regular expressions</code> to find the word <code>and</code>');" "assert(editor.getValue().match(/\\/and\\/gi/), 'You should have used <code>regular expressions</code> to find the word <code>and</code>.');"
], ],
"challengeSeed":[ "challengeSeed":[
"var test = (function() {", "var test = (function() {",
" var testString = \"George Boole and Alan Turing went to the shop and got some milk\";", " var testString = \"Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.\";",
" var expressionToGetMilk = /milk/gi;", " var expressionToGetSoftware = /software/gi;",
" // Only change code below this line.", " // Only change code below this line.",
"", "",
" var expression = /.+/gi;", " var expression = /./gi;",
"", "",
" // Only change code above this line.", " // Only change code above this line.",
" // We use this function to show you the value of your variable in your output box.", " // We use this function to show you the value of your variable in your output box.",
" return(testString.match(expression).length);", " return testString.match(expression).length;",
"})();(function(){return(test);})();" "})();(function(){return test;})();"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -1035,12 +1051,13 @@
"description":[ "description":[
"We can use special selectors in <code>Regular Expressions</code> to select a particular type of value.", "We can use special selectors in <code>Regular Expressions</code> to select a particular type of value.",
"One such selector is the digit selector <code>\\d</code> which is used to grab the numbers in a string.", "One such selector is the digit selector <code>\\d</code> which is used to grab the numbers in a string.",
"It is used like this: <code>/\\d+/g</code>.", "It is used like this: <code>/\\d/g</code>.",
"Use the <code>\\d</code> selector to select the number of numbers in the string." "For numbers this is often written as <code>/\\d+/g</code>, where the <code>+</code> following the digit selector allows this regular expression to match multi-digit numbers.",
"Use the <code>\\d</code> selector to select the number of numbers in the string, allowing for the possibility of multi-digit numbers."
], ],
"tests":[ "tests":[
"assert(test === 2, 'Your RegEx should have found two numbers in the testString');", "assert(test === 2, 'Your RegEx should have found two numbers in the <code>testString</code>.');",
"assert(editor.getValue().match(/\\/\\\\d\\+\\//gi), 'You should be using the following expression /\\d+/gi to find the numbers in the testString');" "assert(editor.getValue().match(/\\/\\\\d\\+\\//gi), 'You should be using the following expression <code>/\\\\d+/gi</code> to find the numbers in the <code>testString</code>.');"
], ],
"challengeSeed":[ "challengeSeed":[
"var test = (function() {", "var test = (function() {",
@ -1052,8 +1069,8 @@
"", "",
" // Only change code above this line.", " // Only change code above this line.",
" // We use this function to show you the value of your variable in your output box.", " // We use this function to show you the value of your variable in your output box.",
" return(testString.match(expression).length);", " return testString.match(expression).length;",
"})();(function(){return(test);})();" "})();(function(){return test;})();"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -1070,7 +1087,7 @@
], ],
"tests":[ "tests":[
"assert(test === 7, 'Your RegEx should have found seven spaces in the <code>testString</code>.');", "assert(test === 7, 'Your RegEx should have found seven spaces in the <code>testString</code>.');",
"assert(editor.getValue().match(/\\/\\\\s\\+\\//gi), 'You should be using the following expression /\\s+/gi to find the spaces in the <code>testString</code>.');" "assert(editor.getValue().match(/\\/\\\\s\\+\\//gi), 'You should be using the following expression <code>/\\\\s+/gi</code> to find the spaces in the <code>testString</code>.');"
], ],
"challengeSeed":[ "challengeSeed":[
"var test = (function(){", "var test = (function(){",
@ -1082,8 +1099,8 @@
"", "",
" // Only change code above this line.", " // Only change code above this line.",
" // We use this function to show you the value of your variable in your output box.", " // We use this function to show you the value of your variable in your output box.",
" return(testString.match(expression).length);", " return testString.match(expression).length;",
"})();(function(){return(test);})();" "})();(function(){return test;})();"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -1093,12 +1110,12 @@
"title": "Invert Regular Expression Matches with JavaScript", "title": "Invert Regular Expression Matches with JavaScript",
"difficulty":"9.987", "difficulty":"9.987",
"description":[ "description":[
"Use <code>/\\S/gi;</code> to match everything that isn't a space in the string.", "Use <code>/\\S/gi</code> to match everything that isn't a space in the string.",
"You can invert any match by using the uppercase version of the selector <code>\\s</code> versus <code>\\S</code> for example." "You can invert any match by using the uppercase version of the selector <code>\\s</code> versus <code>\\S</code> for example."
], ],
"tests":[ "tests":[
"assert(test === 49, 'Your RegEx should have found forty nine non-space characters in the <code>testString</code>.');", "assert(test === 49, 'Your RegEx should have found forty nine non-space characters in the <code>testString</code>.');",
"assert(editor.getValue().match(/\\/\\\\S\\/gi/gi), 'You should be using the following expression <code>/\\S/gi</code> to find non-space characters in the <code>testString</code>.');" "assert(editor.getValue().match(/\\/\\\\S\\/gi/gi), 'You should be using the following expression <code>/\\\\S/gi</code> to find non-space characters in the <code>testString</code>.');"
], ],
"challengeSeed":[ "challengeSeed":[
"var test = (function(){", "var test = (function(){",
@ -1110,8 +1127,8 @@
"", "",
" // Only change code above this line.", " // Only change code above this line.",
" // We use this function to show you the value of your variable in your output box.", " // We use this function to show you the value of your variable in your output box.",
" return(testString.match(expression).length);", " return testString.match(expression).length;",
"})();(function(){return(test);})();" "})();(function(){return test;})();"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType":1 "challengeType":1
@ -1124,14 +1141,14 @@
"We are now going to try and combine some of the stuff we've just learned and create the logic for a slot machine game.", "We are now going to try and combine some of the stuff we've just learned and create the logic for a slot machine game.",
"For this we will need to generate three random numbers between <code>1</code> and <code>3</code> to represent the possible values of each individual slot.", "For this we will need to generate three random numbers between <code>1</code> and <code>3</code> to represent the possible values of each individual slot.",
"Store the three random numbers in <code>slotOne</code>, <code>slotTwo</code> and <code>slotThree</code>.", "Store the three random numbers in <code>slotOne</code>, <code>slotTwo</code> and <code>slotThree</code>.",
"Generate the random numbers by using the system we used earlier:", "Generate the random numbers by using the system we used earlier (an explanation of the formula can be found <a href=\"https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Waypoint-Generate-Random-Whole-Numbers-within-a-Range#explanation\">here</a>):",
"<code>Math.floor(Math.random() * (3 - 1 + 1)) + 1;</code>" "<code>Math.floor(Math.random() * (3 - 1 + 1)) + 1;</code>"
], ],
"tests":[ "tests":[
"assert(typeof(runSlots($(\".slot\"))[0]) === \"number\", '<code>slotOne</code> should be a random number.')", "assert(typeof(runSlots($(\".slot\"))[0]) === \"number\", '<code>slotOne</code> should be a random number.')",
"assert(typeof(runSlots($(\".slot\"))[1]) === \"number\", '<code>slotTwo</code> should be a random number.')", "assert(typeof(runSlots($(\".slot\"))[1]) === \"number\", '<code>slotTwo</code> should be a random number.')",
"assert(typeof(runSlots($(\".slot\"))[2]) === \"number\", '<code>slotThree</code> should be a random number.')", "assert(typeof(runSlots($(\".slot\"))[2]) === \"number\", '<code>slotThree</code> should be a random number.')",
"assert((function(){if(editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?3\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1;/gi) !== null){return(editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?3\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1;/gi).length >= 3);}else{return(false);}})(), 'You should have used <code>Math.floor(Math.random() * (3 - 1 + 1)) + 1;</code> three times to generate your random numbers.')" "assert((function(){if(editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?3\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1;/gi) !== null){return editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?3\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1;/gi).length >= 3;}else{return false;}})(), 'You should have used <code>Math.floor(Math.random() * (3 - 1 + 1)) + 1;</code> three times to generate your random numbers.')"
], ],
"challengeSeed":[ "challengeSeed":[
"fccss", "fccss",
@ -1154,7 +1171,7 @@
" if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){", " if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
" $(\".logger\").html(slotOne + \" \" + slotTwo + \" \" + slotThree);", " $(\".logger\").html(slotOne + \" \" + slotTwo + \" \" + slotThree);",
" }", " }",
" return([slotOne, slotTwo, slotThree]);", " return [slotOne, slotTwo, slotThree];",
" }", " }",
"", "",
" $(document).ready(function(){", " $(document).ready(function(){",
@ -1281,11 +1298,11 @@
"If all three numbers match, we should return the number that we have in three of slots or leave it as <code>null</code>.", "If all three numbers match, we should return the number that we have in three of slots or leave it as <code>null</code>.",
"Let's create an <code>if statement</code> with multiple conditions in order to check whether all numbers are equal.", "Let's create an <code>if statement</code> with multiple conditions in order to check whether all numbers are equal.",
"<code>if(slotOne !== slotTwo || slotTwo !== slotThree){</code>", "<code>if(slotOne !== slotTwo || slotTwo !== slotThree){</code>",
"<code>&thinsp;&thinsp;return(null);</code>", "<code>&thinsp;&thinsp;return null;</code>",
"<code>}</code>" "<code>}</code>"
], ],
"tests":[ "tests":[
"assert((function(){var data = runSlots();if(data === null){return(true)}else{if(data[0] === data[1] && data[1] === data[2]){return(true);}else{return(false);}}})(), 'If all three of our random numbers are the same we should return that number. Otherwise we should return null.')" "assert((function(){var data = runSlots();if(data === null){return true}else{if(data[0] === data[1] && data[1] === data[2]){return true;}else{return false;}}})(), 'If all three of our random numbers are the same we should return that number. Otherwise we should return <code>null</code>.')"
], ],
"challengeSeed":[ "challengeSeed":[
"fccss", "fccss",
@ -1314,7 +1331,7 @@
" $(\".logger\").append(\" \" + slotTwo);", " $(\".logger\").append(\" \" + slotTwo);",
" $(\".logger\").append(\" \" + slotThree);", " $(\".logger\").append(\" \" + slotThree);",
" }", " }",
" return([slotOne, slotTwo, slotThree]);", " return [slotOne, slotTwo, slotThree];",
" }", " }",
"", "",
" $(document).ready(function(){", " $(document).ready(function(){",
@ -1443,8 +1460,8 @@
"Use the above selector to display each number in its corresponding slot." "Use the above selector to display each number in its corresponding slot."
], ],
"tests":[ "tests":[
"assert((function(){runSlots();if($($(\".slot\")[0]).html().replace(/\\s/gi, \"\") !== \"\" && $($(\".slot\")[1]).html().replace(/\\s/gi, \"\") !== \"\" && $($(\".slot\")[2]).html().replace(/\\s/gi, \"\") !== \"\"){return(true);}else{return(false);}})(), 'You should be displaying the result of the slot numbers in the corresponding slots')", "assert((function(){runSlots();if($($(\".slot\")[0]).html().replace(/\\s/gi, \"\") !== \"\" && $($(\".slot\")[1]).html().replace(/\\s/gi, \"\") !== \"\" && $($(\".slot\")[2]).html().replace(/\\s/gi, \"\") !== \"\"){return true;}else{return false;}})(), 'You should be displaying the result of the slot numbers in the corresponding slots.')",
"assert((function(){if(editor.match( /\\$\\(\\$\\(\\\"\\.slot\\\"\\)\\[\\d\\]\\)/gi )){if(editor.match( /\\$\\(\\$\\(\\\"\\.slot\\\"\\)\\[\\d\\]\\)/gi ).length >= 3 && editor.match( /\\.html\\(slotOne\\)/gi ) && editor.match( /\\.html\\(slotTwo\\)/gi ) && editor.match( /\\.html\\(slotThree\\)/gi )){return(true);}else{return(false);}}else{return(false);}})(), 'You should have used the the selector given in the description to select each slot and assign it the value of slotOne&#44; slotTwo and slotThree respectively')" "assert((editor.match( /\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)/gi) && editor.match( /\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)/gi ).length >= 3 && editor.match( /\\.html\\(slotOne\\)/gi ) && editor.match( /\\.html\\(slotTwo\\)/gi ) && editor.match( /\\.html\\(slotThree\\)/gi )), 'You should have used the the selector given in the description to select each slot and assign it the value of <code>slotOne</code>&#44; <code>slotTwo</code> and <code>slotThree</code> respectively.')"
], ],
"challengeSeed":[ "challengeSeed":[
"fccss", "fccss",
@ -1469,7 +1486,7 @@
" // Only change code above this line.", " // Only change code above this line.",
" ", " ",
" if(slotOne !== slotTwo || slotTwo !== slotThree){", " if(slotOne !== slotTwo || slotTwo !== slotThree){",
" return(null);", " return null;",
" }", " }",
" ", " ",
" if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){", " if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
@ -1478,7 +1495,7 @@
" $(\".logger\").append(\" \" + slotThree);", " $(\".logger\").append(\" \" + slotThree);",
" }", " }",
" ", " ",
" return([slotOne, slotTwo, slotThree]);", " return [slotOne, slotTwo, slotThree];",
" }", " }",
"", "",
" $(document).ready(function(){", " $(document).ready(function(){",
@ -1608,10 +1625,13 @@
"Set up all three slots like this, then click the \"Go\" button to play the slot machine." "Set up all three slots like this, then click the \"Go\" button to play the slot machine."
], ],
"tests":[ "tests":[
"assert((editor.match(/\\$\\(\\$\\(\\'\\.slot\\'\\)\\[\\d\\]\\)\\.html\\(\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\-1\\]\\s?\\+\\s?\\'\"\\>\\'\\);/gi) && editor.match(/\\$\\(\\$\\(\\'\\.slot\\'\\)\\[\\d\\]\\)\\.html\\(\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\-1\\]\\s?\\+\\s?\\'\"\\>\\'\\);/gi).length >= 3) || (editor.match(/\\$\\(\\$\\(\\\"\\.slot\\\"\\)\\[\\d\\]\\)\\.html\\(\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\-1\\]\\s?\\+\\s?\\'\"\\>\\'\\);/gi) && editor.match(/\\$\\(\\$\\(\\\"\\.slot\\\"\\)\\[\\d\\]\\)\\.html\\(\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\-1\\]\\s?\\+\\s?\\'\"\\>\\'\\);/gi).length >= 3), 'Use the provided code three times. One for each slot')", "assert((editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)\\.html\\(\\s*?\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\-1\\]\\s?\\+\\s?\\'\"\\>\\'\\s*?\\);/gi) && editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)\\.html\\(\\s*?\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\-1\\]\\s?\\+\\s?\\'\"\\>\\'\\s*?\\);/gi).length >= 3), 'Use the provided code three times. One for each slot.')",
"assert(editor.match(/slotOne/gi) && editor.match(/slotOne/gi).length >= 7, 'You should have used the slotOne value at least once')", "assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[0\\]\\s*?\\)/gi), 'You should have used <code>$&#40;&#39;.slot&#39;&#41;[0]</code> at least once.')",
"assert(editor.match(/slotTwo/gi) && editor.match(/slotTwo/gi).length >= 8, 'You should have used the slotTwo value at least once')", "assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[1\\]\\s*?\\)/gi), 'You should have used <code>$&#40;&#39;.slot&#39;&#41;[1]</code> at least once.')",
"assert(editor.match(/slotThree/gi) && editor.match(/slotThree/gi).length >= 7, 'You should have used the slotThree value at least once')" "assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[2\\]\\s*?\\)/gi), 'You should have used <code>$&#40;&#39;.slot&#39;&#41;[2]</code> at least once.')",
"assert(editor.match(/slotOne/gi) && editor.match(/slotOne/gi).length >= 7, 'You should have used the <code>slotOne</code> value at least once.')",
"assert(editor.match(/slotTwo/gi) && editor.match(/slotTwo/gi).length >= 8, 'You should have used the <code>slotTwo</code> value at least once.')",
"assert(editor.match(/slotThree/gi) && editor.match(/slotThree/gi).length >= 7, 'You should have used the <code>slotThree</code> value at least once.')"
], ],
"challengeSeed":[ "challengeSeed":[
"fccss", "fccss",
@ -1636,7 +1656,7 @@
" // Only change code above this line.", " // Only change code above this line.",
" ", " ",
" if(slotOne !== slotTwo || slotTwo !== slotThree){", " if(slotOne !== slotTwo || slotTwo !== slotThree){",
" return(null);", " return null;",
" }", " }",
" ", " ",
" if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){", " if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
@ -1645,7 +1665,7 @@
" $('.logger').append(' ' + slotThree);", " $('.logger').append(' ' + slotThree);",
" }", " }",
" ", " ",
" return([slotOne, slotTwo, slotThree]);", " return [slotOne, slotTwo, slotThree];",
" }", " }",
"", "",
" $(document).ready(function(){", " $(document).ready(function(){",

18
challenges/basic-ziplines.json
View File

@ -16,7 +16,8 @@
"Drag the windows around and press the buttons in the lower-right hand corner to change the orientation to suit your preference.", "Drag the windows around and press the buttons in the lower-right hand corner to change the orientation to suit your preference.",
"Click the gear next to CSS. Then under the \"Add External CSS\" section, use the \"Quick-add\" select box to select Bootstrap. Then click \"Save & Close\".", "Click the gear next to CSS. Then under the \"Add External CSS\" section, use the \"Quick-add\" select box to select Bootstrap. Then click \"Save & Close\".",
"Verify that bootstrap is active by adding the following code to your HTML: <code>&lt;h1 class='text-primary'&gt;Hello CodePen!&lt;/h1&gt;</code>. The text's color should be Bootstrap blue.", "Verify that bootstrap is active by adding the following code to your HTML: <code>&lt;h1 class='text-primary'&gt;Hello CodePen!&lt;/h1&gt;</code>. The text's color should be Bootstrap blue.",
"Click the gear next to JavaScript. Click the \"Quick-add\" select box and choose jQuery (not jQuery UI). Then click \"Save & Close\".", "Click the gear next to JavaScript. Click the \"Quick-add\" select box and choose jQuery (not jQuery UI).",
"Click the \"Quick-add\" select box again and choose Bootstrap. Then click \"Save & Close\".",
"Now add the following code to your JavaScript: <code>$(document).ready(function() { $('.text-primary').text('Hi CodePen!') });</code>. Click the \"Save\" button at the top. Your \"Hello CodePen!\" should change to \"Hi CodePen!\". This means that jQuery is working.", "Now add the following code to your JavaScript: <code>$(document).ready(function() { $('.text-primary').text('Hi CodePen!') });</code>. Click the \"Save\" button at the top. Your \"Hello CodePen!\" should change to \"Hi CodePen!\". This means that jQuery is working.",
"You can use this CodePen that you've just created as a starting point for your Ziplines. Just click the \"fork\" button at the top of your CodePen and it will create a duplicate CodePen.", "You can use this CodePen that you've just created as a starting point for your Ziplines. Just click the \"fork\" button at the top of your CodePen and it will create a duplicate CodePen.",
"Now you're ready for your first Zipline. Click the \"I've completed this challenge\" button." "Now you're ready for your first Zipline. Click the \"I've completed this challenge\" button."
@ -45,6 +46,7 @@
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.", "<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.", "<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.", "<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
"<span class='text-info'>Hint:</span> If you don't want to start from scratch, you can fork this simple Bootstrap portfolio template on CodePen: <a href='http://codepen.io/FreeCodeCamp/pen/mJNqQj/' target='_blank'>http://codepen.io/FreeCodeCamp/pen/mJNqQj</a>.",
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:", "Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
"<span class='text-info'>User Story:</span> As a user, I can access all of the portfolio webpage's content just by scrolling.", "<span class='text-info'>User Story:</span> As a user, I can access all of the portfolio webpage's content just by scrolling.",
"<span class='text-info'>User Story:</span> As a user, I can click different buttons that will take me to the portfolio creator's different social media pages.", "<span class='text-info'>User Story:</span> As a user, I can click different buttons that will take me to the portfolio creator's different social media pages.",
@ -55,7 +57,7 @@
"Note that CodePen.io overrides the Window.open() function, so if you want to open windows using jquery, you will need to target invisible anchor elements like this one: <code>&lt;a target='_blank'&gt;</a></code>.", "Note that CodePen.io overrides the Window.open() function, so if you want to open windows using jquery, you will need to target invisible anchor elements like this one: <code>&lt;a target='_blank'&gt;</a></code>.",
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.", "Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
], ],
"type": "zipline", "type": "zipline",
"challengeType": 3, "challengeType": 3,
@ -87,7 +89,7 @@
"Note that you can either put your quotes into an array and show them at random, or use an API to get quotes, such as <a href='http://forismatic.com/en/api/'>http://forismatic.com/en/api/</a>.", "Note that you can either put your quotes into an array and show them at random, or use an API to get quotes, such as <a href='http://forismatic.com/en/api/'>http://forismatic.com/en/api/</a>.",
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.", "Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
], ],
"type": "zipline", "type": "zipline",
"challengeType": 3, "challengeType": 3,
@ -115,12 +117,12 @@
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.", "<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:", "Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
"<span class='text-info'>User Story:</span> As a user, I can see the weather in my current location.", "<span class='text-info'>User Story:</span> As a user, I can see the weather in my current location.",
"<span class='text-info'>Bonus User Story:</span> As a user, I can see an icon depending on the temperature..", "<span class='text-info'>Bonus User Story:</span> As a user, I can see an icon depending on the weather.",
"<span class='text-info'>Bonus User Story:</span> As a user, I see a different background image depending on the temperature (e.g. snowy mountain, hot desert).", "<span class='text-info'>Bonus User Story:</span> As a user, I see a different background image (e.g. snowy mountain, hot desert) depending on the weather.",
"<span class='text-info'>Bonus User Story:</span> As a user, I can push a button to toggle between Fahrenheit and Celsius.", "<span class='text-info'>Bonus User Story:</span> As a user, I can push a button to toggle between Fahrenheit and Celsius.",
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.", "Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
], ],
"type": "zipline", "type": "zipline",
"challengeType": 3, "challengeType": 3,
@ -152,7 +154,7 @@
"<span class='text-info'>Bonus User Story:</span> As a user, I can customize the length of each pomodoro.", "<span class='text-info'>Bonus User Story:</span> As a user, I can customize the length of each pomodoro.",
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.", "Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
], ],
"type": "zipline", "type": "zipline",
"challengeType": 3, "challengeType": 3,
@ -189,7 +191,7 @@
"<span class='text-info'>Hint:</span> Here's an array of the Twitch.tv usernames of people who regularly stream coding: <code>[\"freecodecamp\", \"storbeck\", \"terakilobyte\", \"habathcx\",\"RobotCaleb\",\"thomasballinger\",\"noobs2ninjas\",\"beohoff\"]</code>", "<span class='text-info'>Hint:</span> Here's an array of the Twitch.tv usernames of people who regularly stream coding: <code>[\"freecodecamp\", \"storbeck\", \"terakilobyte\", \"habathcx\",\"RobotCaleb\",\"thomasballinger\",\"noobs2ninjas\",\"beohoff\"]</code>",
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.", "Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
], ],
"type": "zipline", "type": "zipline",
"challengeType": 3, "challengeType": 3,

57
challenges/bootstrap.json
View File

@ -91,7 +91,7 @@
"title": "Make Images Mobile Responsive", "title": "Make Images Mobile Responsive",
"difficulty": 2.02, "difficulty": 2.02,
"description": [ "description": [
"First, Add a new image below the existing one. Set it's <code>src</code> attribute to <code>http://bit.ly/fcc-running-cats</code>.", "First, add a new image below the existing one. Set it's <code>src</code> attribute to <code>http://bit.ly/fcc-running-cats</code>.",
"It would be great if this image could be exactly the width of our phone's screen.", "It would be great if this image could be exactly the width of our phone's screen.",
"Fortunately, with Bootstrap, all we need to do is add the <code>img-responsive</code> class to your image. Do this, and the image should perfectly fit the width of your page." "Fortunately, with Bootstrap, all we need to do is add the <code>img-responsive</code> class to your image. Do this, and the image should perfectly fit the width of your page."
], ],
@ -176,8 +176,8 @@
"title": "Center Text with Bootstrap", "title": "Center Text with Bootstrap",
"difficulty": 2.03, "difficulty": 2.03,
"description": [ "description": [
"Now that we're using Bootstrap, we can center our heading elements to make them look better. All we need to do is add the class <code>text-center</code> to our <code>h1</code> and <code>h2</code> elements.", "Now that we're using Bootstrap, we can center our heading element to make it look better. All we need to do is add the class <code>text-center</code> to our <code>h2</code> element.",
"Remember that you can add several classes to the same element by separating each of them with a space, like this: <code>&#60h2 class=\"text-red text-center\"&#62your text&#60/h2&#62</code>." "Remember that you can add several classes to the same element by separating each of them with a space, like this: <code>&#60h2 class=\"red-text text-center\"&#62your text&#60/h2&#62</code>."
], ],
"tests": [ "tests": [
"assert($(\"h2\").hasClass(\"text-center\"), 'Your <code>h2</code> element should be centered by applying the class <code>text-center</code>')" "assert($(\"h2\").hasClass(\"text-center\"), 'Your <code>h2</code> element should be centered by applying the class <code>text-center</code>')"
@ -614,7 +614,7 @@
"Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes." "Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes."
], ],
"tests": [ "tests": [
"assert(new RegExp(\"delete\",\"gi\").test($(\"button\").text()), 'Create a new <code>button</code> element with the text \"delete\".')", "assert(new RegExp(\"Delete\",\"gi\").test($(\"button\").text()), 'Create a new <code>button</code> element with the text \"Delete\".')",
"assert($(\"button.btn-block.btn\").length > 2, 'All of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.')", "assert($(\"button.btn-block.btn\").length > 2, 'All of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.')",
"assert($(\"button\").hasClass(\"btn-danger\"), 'Your new button should have the class <code>btn-danger</code>.')", "assert($(\"button\").hasClass(\"btn-danger\"), 'Your new button should have the class <code>btn-danger</code>.')",
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have a closing tag.')" "assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have a closing tag.')"
@ -893,7 +893,7 @@
"title": "Use Spans for Inline Elements", "title": "Use Spans for Inline Elements",
"difficulty": 2.105, "difficulty": 2.105,
"description": [ "description": [
"You can use use spans to create inline elements. Remember when we used the <code>btn-block</code> class to make the button fill the entire row?", "You can use spans to create inline elements. Remember when we used the <code>btn-block</code> class to make the button fill the entire row?",
"This image illustrates the difference between <code>inline</code> elements and <code>block-level</code> elements:", "This image illustrates the difference between <code>inline</code> elements and <code>block-level</code> elements:",
"<img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'>", "<img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'>",
"By using the <code>span</code> element, you can put several elements together, and even style different parts of the same element differently.", "By using the <code>span</code> element, you can put several elements together, and even style different parts of the same element differently.",
@ -909,19 +909,11 @@
"challengeSeed": [ "challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>", "<style>",
" .red-text {",
" color: red;",
" }",
"", "",
" h2 {", " h2 {",
" font-family: Lobster, Monospace;", " font-family: Lobster, Monospace;",
" }", " }",
"", "",
" p {",
" font-size: 16px;",
" font-family: Monospace;",
" }",
"",
" .thick-green-border {", " .thick-green-border {",
" border-color: green;", " border-color: green;",
" border-width: 10px;", " border-width: 10px;",
@ -929,17 +921,12 @@
" border-radius: 50%;", " border-radius: 50%;",
" }", " }",
"", "",
" .smaller-image {",
" width: 100px;",
" }",
"</style>", "</style>",
"", "",
"<div class=\"container-fluid\">", "<div class=\"container-fluid\">",
" <h2 class=\"red-text text-center\">CatPhotoApp</h2>", " <h2 class=\"text-primary text-center\">CatPhotoApp</h2>",
"", "",
" <p>Click here for <a href=\"#\">cat photos</a>.</p>", " <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
"",
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
"", "",
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">", " <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <div class=\"row\">", " <div class=\"row\">",
@ -1172,9 +1159,9 @@
"Use Font Awesome to add a <code>info-circle</code> icon to your info button and a <code>trash</code> icon to your delete button." "Use Font Awesome to add a <code>info-circle</code> icon to your info button and a <code>trash</code> icon to your delete button."
], ],
"tests": [ "tests": [
"assert($(\"i\").hasClass(\"fa fa-trash\"), 'You should add a <code>&#60;i class=\"fa fa-trash\"&#62;&#60;/i&#62;</code> within your delete button element.')", "assert($(\".btn-danger > i\").hasClass(\"fa fa-trash\"), 'You should add a <code>&#60;i class=\"fa fa-trash\"&#62;&#60;/i&#62;</code> within your delete button element.')",
"assert($(\"i\").hasClass(\"fa fa-info-circle\"), 'You should add a <code>&#60;i class=\"fa fa-info-circle\"&#62;&#60;/i&#62;</code> within your info button element.')", "assert($(\".btn-info > i\").hasClass(\"fa fa-info-circle\"), 'You should add a <code>&#60;i class=\"fa fa-info-circle\"&#62;&#60;/i&#62;</code> within your info button element.')",
"assert(editor.match(/<\\/i>/g) && editor.match(/<\\/i/g).length > 2, 'Make sure each of your <code>i</code> elements has a closing tag.')" "assert(editor.match(/<\\/i>/g) && editor.match(/<\\/i>/g).length > 2 && $(\".btn-primary > i\").hasClass(\"fa fa-thumbs-up\"), 'Make sure each of your <code>i</code> elements has a closing tag and <code>&#60;i class=\"fa fa-thumbs-up\"&#62;&#60;/i&#62;</code> is in your like button element.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
@ -1735,7 +1722,7 @@
"Create two <code>div</code> elements within your row, both with the class <code>col-xs-6</code>." "Create two <code>div</code> elements within your row, both with the class <code>col-xs-6</code>."
], ],
"tests": [ "tests": [
"assert($(\"div.row\").children(\"div.col-xs-6\").length > 1, 'Nest two <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')", "assert($(\"div.row > div.col-xs-6\").length > 1, 'Nest two <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure all your <code>div</code> elements have closing tags.')" "assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure all your <code>div</code> elements have closing tags.')"
], ],
"challengeSeed": [ "challengeSeed": [
@ -1769,8 +1756,8 @@
"Nest one <code>div</code> element with the class <code>well</code> within each of your <code>col-xs-6</code> <code>div</code> elements." "Nest one <code>div</code> element with the class <code>well</code> within each of your <code>col-xs-6</code> <code>div</code> elements."
], ],
"tests": [ "tests": [
"assert($(\"div\").length > 4, 'Add a <code>div</code> element with the class <code>well</code> inside each of your <code>div class=\"col-xs-6\"> elements</code>')", "assert($(\"div.col-xs-6\").not(\":has(>div.well)\").length < 1, 'Add a <code>div</code> element with the class <code>well</code> inside each of your <code>div</code> elements with the class <code>\"col-xs-6\"</code>')",
"assert($(\"div.col-xs-6 div.well\").length > 1, 'Nest both of your <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')", "assert($(\"div.row > div.col-xs-6\").length > 1, 'Nest both of your <code>div</code> elements with the class <code>\"col-xs-6\"</code> within your <code>div</code> element with the class <code>\"row\"</code>.')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure all your <code>div</code> elements have closing tags.')" "assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure all your <code>div</code> elements have closing tags.')"
], ],
"challengeSeed": [ "challengeSeed": [
@ -1949,8 +1936,8 @@
"Give the well on the left the id of <code>left-well</code>. Give the well on the right the <code>id</code> of <code>right-well</code>." "Give the well on the left the id of <code>left-well</code>. Give the well on the right the <code>id</code> of <code>right-well</code>."
], ],
"tests": [ "tests": [
"assert($(\"#left-well\") && $(\"#left-well\").length > 0, 'Give your left <code>well</code> the id of <code>left-well</code>.')", "assert($(\".col-xs-6\").children(\"#left-well\") && $(\".col-xs-6\").children(\"#left-well\").length > 0, 'Give your left <code>well</code> the id of <code>left-well</code>.')",
"assert($(\"#right-well\") && $(\"#right-well\").length > 0, 'Give your right <code>well</code> the id of <code>right-well</code>.')" "assert($(\".col-xs-6\").children(\"#right-well\") && $(\".col-xs-6\").children(\"#right-well\").length > 0, 'Give your right <code>well</code> the id of <code>right-well</code>.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<div class=\"container-fluid\">", "<div class=\"container-fluid\">",
@ -1996,7 +1983,7 @@
"Above your right-well, inside its <code>col-xs-6</code> <code>div</code> element, add a <code>h4</code> element with the text <code>#right-well</code>." "Above your right-well, inside its <code>col-xs-6</code> <code>div</code> element, add a <code>h4</code> element with the text <code>#right-well</code>."
], ],
"tests": [ "tests": [
"assert($(\".col-xs-6\").children(\"h4\") && $(\".col-xs-6\").children(\"h4\").length > 1, 'Add an <code>h4</code> element to each of your <code>&#60;div class=\\\"col-xs-6\\\"&#62;</code> elements.');", "assert($(\".col-xs-6\").children(\"h4\") && $(\".col-xs-6\").children(\"h4\").length > 1, 'Add an <code>h4</code> element to each of your <code>&#60;div class=\"col-xs-6\"&#62;</code> elements.');",
"assert(new RegExp(\"#left-well\",\"gi\").test($(\"h4\").text()), 'One <code>h4</code> element should have the text <code>#left-well</code>.');", "assert(new RegExp(\"#left-well\",\"gi\").test($(\"h4\").text()), 'One <code>h4</code> element should have the text <code>#left-well</code>.');",
"assert(new RegExp(\"#right-well\",\"gi\").test($(\"h4\").text()), 'One <code>h4</code> element should have the text <code>#right-well</code>.');", "assert(new RegExp(\"#right-well\",\"gi\").test($(\"h4\").text()), 'One <code>h4</code> element should have the text <code>#right-well</code>.');",
"assert(editor.match(/<\\/h4>/g) && editor.match(/<h4/g) && editor.match(/<\\/h4>/g).length === editor.match(/<h4/g).length, 'Make sure all your <code>h4</code> elements have closing tags.')" "assert(editor.match(/<\\/h4>/g) && editor.match(/<h4/g) && editor.match(/<\\/h4>/g).length === editor.match(/<h4/g).length, 'Make sure all your <code>h4</code> elements have closing tags.')"
@ -2046,12 +2033,12 @@
"Give each of your buttons a unique id like, starting with <code>target1</code> and ending with <code>target6</code>." "Give each of your buttons a unique id like, starting with <code>target1</code> and ending with <code>target6</code>."
], ],
"tests": [ "tests": [
"assert($(\"#target1\") && $(\"#target1\").length > 0, 'One <code>button</code> element should have the id <code>target1</code>.')", "assert($(\"#left-well\").children(\"#target1\") && $(\"#left-well\").children(\"#target1\").length > 0, 'One <code>button</code> element should have the id <code>target1</code>.')",
"assert($(\"#target2\") && $(\"#target2\").length > 0, 'One <code>button</code> element should have the id <code>target2</code>.')", "assert($(\"#left-well\").children(\"#target2\") && $(\"#left-well\").children(\"#target2\").length > 0, 'One <code>button</code> element should have the id <code>target2</code>.')",
"assert($(\"#target3\") && $(\"#target3\").length > 0, 'One <code>button</code> element should have the id <code>target3</code>.')", "assert($(\"#left-well\").children(\"#target3\") && $(\"#left-well\").children(\"#target3\").length > 0, 'One <code>button</code> element should have the id <code>target3</code>.')",
"assert($(\"#target4\") && $(\"#target4\").length > 0, 'One <code>button</code> element should have the id <code>target4</code>.')", "assert($(\"#right-well\").children(\"#target4\") && $(\"#right-well\").children(\"#target4\").length > 0, 'One <code>button</code> element should have the id <code>target4</code>.')",
"assert($(\"#target5\") && $(\"#target5\").length > 0, 'One <code>button</code> element should have the id <code>target5</code>.')", "assert($(\"#right-well\").children(\"#target5\") && $(\"#right-well\").children(\"#target5\").length > 0, 'One <code>button</code> element should have the id <code>target5</code>.')",
"assert($(\"#target6\") && $(\"#target6\").length > 0, 'One <code>button</code> element should have the id <code>target6</code>.')" "assert($(\"#right-well\").children(\"#target6\") && $(\"#right-well\").children(\"#target6\").length > 0, 'One <code>button</code> element should have the id <code>target6</code>.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<div class=\"container-fluid\">", "<div class=\"container-fluid\">",

10
challenges/git.json
View File

@ -11,12 +11,12 @@
"We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.", "We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.",
"If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.", "If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
"Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.", "Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
"Click on Create New Workspace at the top right of the c9.io page, then click on the \"Create a new workspace\" popup that appears below it the button after you click on it.", "Click on the \"+\" icon at the top right of the c9.io page to create a new workspace.",
"Give your workspace a name.", "Give your workspace a name and an optional description.",
"Choose Node.js in the selection area below the name field.", "Choose Node.js in the selection area below the name field.",
"Click the Create button. Then click into your new workspace.", "Click the \"Create workspace\" button.",
"In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.", "Once C9 builds and loads your workspace, you should see a terminal window in the lower right hand corner. In this window use the following commands. You don't need to know what these mean at this point.",
"Install <code>how-to-npm</code> with this command: <code>npm install -g git-it</code>", "Install <code>git-it</code> with this command: <code>npm install -g git-it</code>",
"Now start the tutorial by running <code>git-it</code>.", "Now start the tutorial by running <code>git-it</code>.",
"Note that you can resize the c9.io's windows by dragging their borders.", "Note that you can resize the c9.io's windows by dragging their borders.",
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.", "Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",

95
challenges/html5-and-css.json
View File

@ -372,7 +372,7 @@
"difficulty": 1.09, "difficulty": 1.09,
"description": [ "description": [
"Delete your <code>h2</code> element's style attribute and instead create a CSS <code>style</code> element. Add the necessary CSS to turn all <code>h2</code> elements blue.", "Delete your <code>h2</code> element's style attribute and instead create a CSS <code>style</code> element. Add the necessary CSS to turn all <code>h2</code> elements blue.",
"With CSS, there are hundreds of CSS <code>attributes</code> that you can use to change the way an element looks on your page.", "With CSS, there are hundreds of CSS <code>properties</code> that you can use to change the way an element looks on your page.",
"When you entered <code>&#60;h2 style=\"color: red\"&#62;CatPhotoApp&#60;/h2&#62;</code>, you were giving that individual <code>h2</code> element an <code>inline style</code>.", "When you entered <code>&#60;h2 style=\"color: red\"&#62;CatPhotoApp&#60;/h2&#62;</code>, you were giving that individual <code>h2</code> element an <code>inline style</code>.",
"That's one way to add style to an element, but a better way is by using <code>CSS</code>, which stands for <code>Cascading Style Sheets</code>.", "That's one way to add style to an element, but a better way is by using <code>CSS</code>, which stands for <code>Cascading Style Sheets</code>.",
"At the top of your code, create a <code>style</code> element like this: <code>&#60;style&#62;&#60;/style&#62;</code>.", "At the top of your code, create a <code>style</code> element like this: <code>&#60;style&#62;&#60;/style&#62;</code>.",
@ -383,7 +383,7 @@
"assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your <code>h2</code> element.')", "assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your <code>h2</code> element.')",
"assert($(\"style\") && $(\"style\").length > 1, 'Create a <code>style</code> element.')", "assert($(\"style\") && $(\"style\").length > 1, 'Create a <code>style</code> element.')",
"assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your <code>h2</code> element should be blue.')", "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your <code>h2</code> element should be blue.')",
"assert(editor.match(/<\\/style>/g) && editor.match(/<\\/style>/g).length === editor.match(/<style>/g).length, 'Make sure each of your <code>style</code> elements has a closing tag.')" "assert(editor.match(/<\\/style>/g) && editor.match(/<\\/style>/g).length === (editor.match(/<style((\\s)*((type|media|scoped|title|disabled)=\"[^\"]*\")?(\\s)*)*>/g) || []).length, 'Make sure all your <code>style</code> elements are valid and have a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<h2 style=\"color: red\">CatPhotoApp</h2>", "<h2 style=\"color: red\">CatPhotoApp</h2>",
@ -544,7 +544,7 @@
"description": [ "description": [
"Create a second <code>p</code> element with the following <code>kitty ipsum text</code>: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>", "Create a second <code>p</code> element with the following <code>kitty ipsum text</code>: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
"Then, inside your <code>&#60;style&#62;</code> element, set the <code>font-size</code> of all <code>p</code> elements to 16 pixels.", "Then, inside your <code>&#60;style&#62;</code> element, set the <code>font-size</code> of all <code>p</code> elements to 16 pixels.",
"Font size is controlled by the <code>font-size</code> CSS attribute, like this: <code>h1 { font-size: 30px; }</code>.", "Font size is controlled by the <code>font-size</code> CSS property, like this: <code>h1 { font-size: 30px; }</code>.",
"See if you can figure out how to give both of your <code>p</code> elements the font-size of 16 pixels (<code>16px</code>). You can do this inside the same <code>&#60;style&#62;</code> tag that we created for your <code>red-text</code> class." "See if you can figure out how to give both of your <code>p</code> elements the font-size of 16 pixels (<code>16px</code>). You can do this inside the same <code>&#60;style&#62;</code> tag that we created for your <code>red-text</code> class."
], ],
"tests": [ "tests": [
@ -595,7 +595,7 @@
"difficulty": 1.14, "difficulty": 1.14,
"description": [ "description": [
"Make all of your <code>p</code> elements use the <code>Monospace</code> font.", "Make all of your <code>p</code> elements use the <code>Monospace</code> font.",
"You can set an element's font by using the <code>font-family</code> attribute.", "You can set an element's font by using the <code>font-family</code> property.",
"For example, if you wanted to set your <code>h2</code> element's font to <code>Sans-serif</code>, you would use the following CSS: <code>h2 { font-family: Sans-serif; }</code>." "For example, if you wanted to set your <code>h2</code> element's font to <code>Sans-serif</code>, you would use the following CSS: <code>h2 { font-family: Sans-serif; }</code>."
], ],
"tests": [ "tests": [
@ -645,7 +645,7 @@
"First, you'll need to make a <code>call</code> to Google to grab the <code>Lobster</code> font and load it into your HTML.", "First, you'll need to make a <code>call</code> to Google to grab the <code>Lobster</code> font and load it into your HTML.",
"Copy the following code snippet and paste it into your code editor:", "Copy the following code snippet and paste it into your code editor:",
"<code>&#60;link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>.", "<code>&#60;link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>.",
"Now you can set <code>Lobster</code> as a font-family attribute on your <code>h2</code> element." "Now you can set <code>Lobster</code> as a font-family value on your <code>h2</code> element."
], ],
"tests": [ "tests": [
"assert(new RegExp(\"googleapis\", \"gi\").test(editor), 'Import the <code>Lobster</code> font.')", "assert(new RegExp(\"googleapis\", \"gi\").test(editor), 'Import the <code>Lobster</code> font.')",
@ -754,7 +754,7 @@
"difficulty": 1.17, "difficulty": 1.17,
"description": [ "description": [
"You can add images to your website by using the <code>img</code> element, and point to a specific image's URL using the <code>src</code> attribute.", "You can add images to your website by using the <code>img</code> element, and point to a specific image's URL using the <code>src</code> attribute.",
"An example of this would be <code>&#60img src=\"www.your-image-source.com/your-image.jpg\"&#62</code>. Note that in most cases, <code>img</code> elements are self-closing.", "An example of this would be <code>&#60img src=\"http://www.your-image-source.com/your-image.jpg\"&#62</code>. Note that in most cases, <code>img</code> elements are self-closing.",
"Try it with this image: <code>https://bit.ly/fcc-relaxing-cat</code>." "Try it with this image: <code>https://bit.ly/fcc-relaxing-cat</code>."
], ],
"tests": [ "tests": [
@ -808,7 +808,7 @@
"title": "Size your Images", "title": "Size your Images",
"difficulty": 1.18, "difficulty": 1.18,
"description": [ "description": [
"CSS has an attribute called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.", "CSS has a property called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.",
"For example, if we wanted to create a CSS class called <code>larger-image</code> that gave HTML elements a width of 500 pixels, we'd use: <code>&#60;style&#62; .larger-image { width: 500px; } &#60;/style&#62;</code>.", "For example, if we wanted to create a CSS class called <code>larger-image</code> that gave HTML elements a width of 500 pixels, we'd use: <code>&#60;style&#62; .larger-image { width: 500px; } &#60;/style&#62;</code>.",
"Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide." "Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide."
], ],
@ -864,15 +864,15 @@
"title": "Add Borders Around your Elements", "title": "Add Borders Around your Elements",
"difficulty": 1.19, "difficulty": 1.19,
"description": [ "description": [
"CSS borders have attributes like <code>style</code>, <code>color</code> and <code>width</code>.", "CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>.",
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <code>&#60;style&#62; .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } &#60;/style&#62;</code>.", "For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <code>&#60;style&#62; .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } &#60;/style&#62;</code>.",
"Create a class called <code>thick-green-border</code> that puts a 10-pixel-wide green border with a style of <code>solid</code> around an HTML element, and apply that class to your cat photo." "Create a class called <code>thick-green-border</code> that puts a 10-pixel-wide green border with a style of <code>solid</code> around an HTML element, and apply that class to your cat photo. You can apply multiple classes to elements by separating them with a space within the <code>class</code> attribute. For example, <code>&lt;element class=\"class1 class2\"&gt;&lt;/element&gt;</code>"
], ],
"tests": [ "tests": [
"assert($(\"img\").hasClass(\"smaller-image\"), 'Your <code>img</code> element should have the class <code>smaller-image</code>.')", "assert($(\"img\").hasClass(\"smaller-image\"), 'Your <code>img</code> element should have the class <code>smaller-image</code>.')",
"assert($(\"img\").hasClass(\"thick-green-border\"), 'Your <code>img</code> element should have the class <code>thick-green-border</code>.')", "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your <code>img</code> element should have the class <code>thick-green-border</code>.')",
"assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\")), 'Give your image a border width of <code>10px</code>.')", "assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) === 10, 'Give your image a border width of <code>10px</code>.')",
"assert(new RegExp(\"solid\", \"gi\").test(editor), 'Give your image a border style of <code>solid</code>.')", "assert($(\"img\").css(\"border-right-style\") === \"solid\", 'Give your image a border style of <code>solid</code>.')",
"assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'The border around your <code>img</code> element should be green.')" "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'The border around your <code>img</code> element should be green.')"
], ],
"challengeSeed": [ "challengeSeed": [
@ -927,8 +927,8 @@
"title": "Add Rounded Corners with a Border Radius", "title": "Add Rounded Corners with a Border Radius",
"difficulty": 1.20, "difficulty": 1.20,
"description": [ "description": [
"Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called <code>border-radius</code>.", "Your cat photo currently has sharp corners. We can round out those corners with a CSS property called <code>border-radius</code>.",
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this attribute to your <code>thick-green-border</code> class and set it to <code>10px</code>.", "You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this property to your <code>thick-green-border</code> class and set it to <code>10px</code>.",
"Give your cat photo a <code>border-radius</code> of <code>10px</code>." "Give your cat photo a <code>border-radius</code> of <code>10px</code>."
], ],
"tests": [ "tests": [
@ -1062,11 +1062,11 @@
"Here's a diagram of an <code>a</code> element. In this case, the <code>a</code> element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.", "Here's a diagram of an <code>a</code> element. In this case, the <code>a</code> element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.",
"<img class=\"img-responsive\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\">", "<img class=\"img-responsive\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\">",
"Here's an example: <code>&#60;p&#62;Here's a &#60;a href=\"http://freecodecamp.com\"&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>.", "Here's an example: <code>&#60;p&#62;Here's a &#60;a href=\"http://freecodecamp.com\"&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>.",
"Create an <code>a</code> element that links to <code>http://catphotoapp.com</code> and has \"cat photos\" as its <code>anchor text</code>." "Create an <code>a</code> element that links to <code>http://freecatphotoapp.com</code> and has \"cat photos\" as its <code>anchor text</code>."
], ],
"tests": [ "tests": [
"assert((/cat photos/gi).test($(\"a\").text()), 'Your <code>a</code> element should have the <code>anchor text</code> of \"cat photos\"')", "assert((/cat photos/gi).test($(\"a\").text()), 'Your <code>a</code> element should have the <code>anchor text</code> of \"cat photos\"')",
"assert(/http:\\/\\/catphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'You need an <code>a</code> element that links to <code>http&#58;//catphotoapp.com</code>.')", "assert(/http:\\/\\/freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'You need an <code>a</code> element that links to <code>http&#58;//freecatphotoapp.com</code>.')",
"assert(editor.match(/<\\/a>/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'Make sure your <code>a</code> element has a closing tag.')" "assert(editor.match(/<\\/a>/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'Make sure your <code>a</code> element has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
@ -1118,7 +1118,7 @@
"descriptionPt": [], "descriptionPt": [],
"nameDe": "Waypoint: Verlinke externe Seiten mit Anker Elementen", "nameDe": "Waypoint: Verlinke externe Seiten mit Anker Elementen",
"descriptionDe": [ "descriptionDe": [
"Erstelle ein <code>a</code> Element oder \"Anker Element\", das auf http://catphotoapp.com verlinkt und den Link-Text \"cat photos\" oder \"anchor text\" beinhaltet.", "Erstelle ein <code>a</code> Element oder \"Anker Element\", das auf http://freecatphotoapp.com verlinkt und den Link-Text \"cat photos\" oder \"anchor text\" beinhaltet.",
"So sieht ein <code>a</code> Element aus. In diesem Fall wird es innerhalb eines Paragraphen Elements verwendet. Das bedeutet dein Link wird innerhalb des Satzes erscheinen.", "So sieht ein <code>a</code> Element aus. In diesem Fall wird es innerhalb eines Paragraphen Elements verwendet. Das bedeutet dein Link wird innerhalb des Satzes erscheinen.",
"<img class=\"img-responsive\" alt=\"Ein Beispiel wie Anker Tags geschrieben werden.\" src=\"https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png\">", "<img class=\"img-responsive\" alt=\"Ein Beispiel wie Anker Tags geschrieben werden.\" src=\"https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png\">",
"Hier ist ein Beispiel: <code>&#60;p&#62;Hier ist ein &#60;a href=\"http://freecodecamp.com\"&#62; Link zum Free Code Camp&#60;/a&#62; für dich zum Folgen.&#60;/p&#62;</code>." "Hier ist ein Beispiel: <code>&#60;p&#62;Hier ist ein &#60;a href=\"http://freecodecamp.com\"&#62; Link zum Free Code Camp&#60;/a&#62; für dich zum Folgen.&#60;/p&#62;</code>."
@ -1133,13 +1133,13 @@
"<img class=\"img-responsive\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\">", "<img class=\"img-responsive\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\">",
"Here's an example: <code>&#60;p&#62;Here's a &#60;a href=\"http://freecodecamp.com\"&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>.", "Here's an example: <code>&#60;p&#62;Here's a &#60;a href=\"http://freecodecamp.com\"&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>.",
"<code>Nesting</code> just means putting one element inside of another element.", "<code>Nesting</code> just means putting one element inside of another element.",
"Now nest your <code>a</code> element within a new <code>p</code> element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link, and the rest of the text is rest is plain text." "Now nest your existing <code>a</code> element within a new <code>p</code> element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link, and the rest of the text is rest is plain text."
], ],
"tests": [ "tests": [
"assert($(\"a\").attr(\"href\").match(/catphotoapp.com/gi).length > 0, 'You need an <code>a</code> element that links to \"catphotoapp.com\".')", "assert($(\"a\").attr(\"href\").match(/freecatphotoapp.com/gi).length > 0, 'You need an <code>a</code> element that links to \"freecatphotoapp.com\".')",
"assert($(\"a\").text().match(/cat\\sphotos/gi).length > 0, 'Your <code>a</code> element should have the anchor text of \"cat photos\"')", "assert($(\"a\").text().match(/cat\\sphotos/gi), 'Your <code>a</code> element should have the anchor text of \"cat photos\"')",
"assert($(\"p\") && $(\"p\").length > 2, 'Create a new <code>p</code> element around your <code>a</code> element.')", "assert($(\"p\") && $(\"p\").length > 2, 'Create a new <code>p</code> element around your <code>a</code> element.')",
"assert($(\"a[href=\\\"http://www.catphotoapp.com\\\"]\").parent().is(\"p\"), 'Your <code>a</code> element should be nested within your new <code>p</code> element.')", "assert($(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\"), 'Your <code>a</code> element should be nested within your new <code>p</code> element.')",
"assert($(\"p\").text().match(/click\\shere\\sfor/gi), 'Your <code>p</code> element should have the text \"click here for\".')", "assert($(\"p\").text().match(/click\\shere\\sfor/gi), 'Your <code>p</code> element should have the text \"click here for\".')",
"assert(editor.match(/<\\/p>/g) && editor.match(/<p/g) && editor.match(/<\\/p>/g).length === editor.match(/<p/g).length, 'Make sure each of your <code>p</code> elements has a closing tag.')", "assert(editor.match(/<\\/p>/g) && editor.match(/<p/g) && editor.match(/<\\/p>/g).length === editor.match(/<p/g).length, 'Make sure each of your <code>p</code> elements has a closing tag.')",
"assert(editor.match(/<\\/a>/g) && editor.match(/<a/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.')" "assert(editor.match(/<\\/a>/g) && editor.match(/<a/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.')"
@ -1174,7 +1174,7 @@
"", "",
"<h2 class=\"red-text\">CatPhotoApp</h2>", "<h2 class=\"red-text\">CatPhotoApp</h2>",
"", "",
"<a href=\"http://www.catphotoapp.com\">cat photos</a>", "<a href=\"http://www.freecatphotoapp.com\">cat photos</a>",
"", "",
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">", "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
"", "",
@ -1242,7 +1242,7 @@
"", "",
"<h2 class=\"red-text\">CatPhotoApp</h2>", "<h2 class=\"red-text\">CatPhotoApp</h2>",
"", "",
"<p>Click here for <a href=\"http://www.catphotoapp.com\">cat photos</a>.</p>", "<p>Click here for <a href=\"http://www.freecatphotoapp.com\">cat photos</a>.</p>",
"", "",
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">", "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
"", "",
@ -1349,7 +1349,7 @@
"description": [ "description": [
"<code>alt</code> attributes, also known as <code>alt text</code>, are what browsers will display if they fail to load the image. <code>alt</code> attributes are also important for blind or visually impaired users to understand what an image portrays. And search engines also look at <code>alt</code> attributes.", "<code>alt</code> attributes, also known as <code>alt text</code>, are what browsers will display if they fail to load the image. <code>alt</code> attributes are also important for blind or visually impaired users to understand what an image portrays. And search engines also look at <code>alt</code> attributes.",
"In short, every image should have an <code>alt</code> attribute!", "In short, every image should have an <code>alt</code> attribute!",
"You can add an <code>alt</code> attribute right in the img element like this: <code>&#60img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/&#62</code>.", "You can add an <code>alt</code> attribute right in the img element like this: <code>&#60img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"&#62</code>.",
"Add an <code>alt</code> attribute with the text <code>A cute orange cat lying on its back</code> to our cat photo." "Add an <code>alt</code> attribute with the text <code>A cute orange cat lying on its back</code> to our cat photo."
], ],
"tests": [ "tests": [
@ -1747,9 +1747,8 @@
], ],
"tests": [ "tests": [
"assert($(\"form\") && $(\"form\").children(\"input\") && $(\"form\").children(\"input\").length > 0, 'Nest your text input element within a <code>form</code> element.')", "assert($(\"form\") && $(\"form\").children(\"input\") && $(\"form\").children(\"input\").length > 0, 'Nest your text input element within a <code>form</code> element.')",
"assert($(\"form\").attr(\"action\"), 'Your <code>form</code> element should have an <code>action</code> attribute.')", "assert($(\"form\").attr(\"action\") === \"/submit-cat-photo\", 'Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>.')",
"assert(editor.match(/<\\/form>/g) && editor.match(/<form/g) && editor.match(/<\\/form>/g).length === editor.match(/<form/g).length, 'Make sure your <code>form</code> element has a closing tag.')", "assert(editor.match(/<\\/form>/g) && editor.match(/<form/g) && editor.match(/<\\/form>/g).length === editor.match(/<form/g).length, 'Make sure your <code>form</code> element has a closing tag.')"
"assert(editor.match(/\\/submit-cat-photo/ig), 'Make sure your <code>form</code> action is set to <code>/submit-cat-photo</code>.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
@ -1998,8 +1997,8 @@
], ],
"tests": [ "tests": [
"assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')", "assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')",
"assert($('input[type=\"radio\"]:nth-child(1)').attr('name') === 'indoor-outdoor', 'Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.')", "assert($('label > input[type=\"radio\"]').filter(\"[name='indoor-outdoor']\").length > 1, 'Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.')",
"assert($(\"label\").length > 1, 'Each of your two radio button elements should be nested in a <code>label</code> element.')", "assert($('label > input[type=\"radio\"]:only-child').length > 1, 'Each of your two radio button elements should be nested in its own <code>label</code> element.')",
"assert(editor.match(/<\\/label>/g) && editor.match(/<label/g) && editor.match(/<\\/label>/g).length === editor.match(/<label/g).length, 'Make sure each of your <code>label</code> elements has a closing tag.')", "assert(editor.match(/<\\/label>/g) && editor.match(/<label/g) && editor.match(/<\\/label>/g).length === editor.match(/<label/g).length, 'Make sure each of your <code>label</code> elements has a closing tag.')",
"assert($(\"label\").text().match(/indoor/gi), 'One of your radio buttons should have the label <code>indoor</code>.')", "assert($(\"label\").text().match(/indoor/gi), 'One of your radio buttons should have the label <code>indoor</code>.')",
"assert($(\"label\").text().match(/outdoor/gi), 'One of your radio buttons should have the label <code>outdoor</code>.')" "assert($(\"label\").text().match(/outdoor/gi), 'One of your radio buttons should have the label <code>outdoor</code>.')"
@ -2091,9 +2090,9 @@
], ],
"tests": [ "tests": [
"assert($('input[type=\"checkbox\"]').length > 2, 'Your page should have three checkbox elements.')", "assert($('input[type=\"checkbox\"]').length > 2, 'Your page should have three checkbox elements.')",
"assert($('label:has(input[type=\"checkbox\"])').length > 2, 'Each of your three checkbox elements should be nested in its own <code>label</code> element.')", "assert($('label > input[type=\"checkbox\"]:only-child').length > 2, 'Each of your three checkbox elements should be nested in its own <code>label</code> element.')",
"assert(editor.match(/<\\/label>/g) && editor.match(/<label/g) && editor.match(/<\\/label>/g).length === editor.match(/<label/g).length, \"Make sure each of your <code>label</code> elements has a closing tag.\")", "assert(editor.match(/<\\/label>/g) && editor.match(/<label/g) && editor.match(/<\\/label>/g).length === editor.match(/<label/g).length, \"Make sure each of your <code>label</code> elements has a closing tag.\")",
"assert($('input[type=\"checkbox\"]:nth-child(1)').attr(\"name\") === \"personality\", 'Give your checkboxes buttons the <code>name</code> attribute of <code>personality</code>.')" "assert($('label > input[type=\"checkbox\"]').filter(\"[name='personality']\").length > 2, 'Give your checkboxes the <code>name</code> attribute of <code>personality</code>.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
@ -2355,7 +2354,7 @@
"title": "Give a Background Color to a Div Element", "title": "Give a Background Color to a Div Element",
"difficulty": 1.39, "difficulty": 1.39,
"description": [ "description": [
"You can set an element's background color with the <code>background-color</code> attribute.", "You can set an element's background color with the <code>background-color</code> property.",
"For example, if you wanted an element's background color to be <code>green</code>, you'd use <code>.green-background { background-color: green; }</code> within your <code>style</code> element.", "For example, if you wanted an element's background color to be <code>green</code>, you'd use <code>.green-background { background-color: green; }</code> within your <code>style</code> element.",
"Create a class called <code>gray-background</code> with the <code>background-color</code> of gray. Assign this class to your <code>div</code> element." "Create a class called <code>gray-background</code> with the <code>background-color</code> of gray. Assign this class to your <code>div</code> element."
], ],
@ -2478,7 +2477,7 @@
" width: 100px;", " width: 100px;",
" }", " }",
" .gray-background {", " .gray-background {",
" background-color: gray", " background-color: gray;",
" }", " }",
"</style>", "</style>",
"", "",
@ -2627,7 +2626,7 @@
"difficulty": 1.40, "difficulty": 1.40,
"description": [ "description": [
"You may have already noticed this, but all HTML elements are essentially little rectangles.", "You may have already noticed this, but all HTML elements are essentially little rectangles.",
"Three important attributes control the space that surrounds each HTML element: <code>padding</code>, <code>margin</code>, and <code>border</code>.", "Three important properties control the space that surrounds each HTML element: <code>padding</code>, <code>margin</code>, and <code>border</code>.",
"An element's <code>padding</code> controls the amount of space between the element and its <code>border</code>.", "An element's <code>padding</code> controls the amount of space between the element and its <code>border</code>.",
"Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more <code>padding</code> than the green box.", "Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more <code>padding</code> than the green box.",
"When you increase the green box's <code>padding</code>, it will increase the distance between the text <code>padding</code> and the border around it.", "When you increase the green box's <code>padding</code>, it will increase the distance between the text <code>padding</code> and the border around it.",
@ -2839,14 +2838,14 @@
"difficulty": 1.43, "difficulty": 1.43,
"description": [ "description": [
"Sometimes you will want to customize an element so that it has different <code>padding</code> on each of its sides.", "Sometimes you will want to customize an element so that it has different <code>padding</code> on each of its sides.",
"CSS allows you to control the <code>padding</code> of an element on all four sides with <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes.", "CSS allows you to control the <code>padding</code> of an element on all four sides with <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties.",
"Give the green box a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side." "Give the green box a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
], ],
"tests": [ "tests": [
"assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.')", "assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.')",
"assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'Your <code>green-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.')", "assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'Your <code>green-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.')",
"assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'Your <code>green-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.')", "assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'Your <code>green-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.')",
"assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>green-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.')" "assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>green-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<style>", "<style>",
@ -2912,7 +2911,7 @@
"description": [ "description": [
"Give the green box a <code>margin</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side.", "Give the green box a <code>margin</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side.",
"Sometimes you will want to customize an element so that it has a different <code>margin</code> on each of its sides.", "Sometimes you will want to customize an element so that it has a different <code>margin</code> on each of its sides.",
"CSS allows you to control the <code>margin</code> of an element on all four sides with <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> attributes." "CSS allows you to control the <code>margin</code> of an element on all four sides with <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties."
], ],
"tests": [ "tests": [
"assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.')", "assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.')",
@ -2981,7 +2980,7 @@
"title": "Use Clockwise Notation to Specify the Padding of an Element", "title": "Use Clockwise Notation to Specify the Padding of an Element",
"difficulty": 1.44, "difficulty": 1.44,
"description": [ "description": [
"Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes, you can specify them all in one line, like this: <code>padding: 10px 20px 10px 20px;</code>.", "Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties, you can specify them all in one line, like this: <code>padding: 10px 20px 10px 20px;</code>.",
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.", "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.",
"Use Clockwise Notation to give the \".green-box\" class a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side." "Use Clockwise Notation to give the \".green-box\" class a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
], ],
@ -3051,9 +3050,9 @@
"difficulty": 1.45, "difficulty": 1.45,
"description": [ "description": [
"Let's try this again, but with <code>margin</code> this time.", "Let's try this again, but with <code>margin</code> this time.",
"Instead of specifying an element's <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> attributes, you can specify them all in one line, like this: <code>margin: 10px 20px 10px 20px;</code>.", "Instead of specifying an element's <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties, you can specify them all in one line, like this: <code>margin: 10px 20px 10px 20px;</code>.",
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.", "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.",
"Use <code>Clockwise Notation</code> to give an element a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side." "Use <code>Clockwise Notation</code> to give the element with the <code>green-box</code> class a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
], ],
"tests": [ "tests": [
"assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.')", "assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.')",
@ -3163,8 +3162,8 @@
"assert(($(\"h1\").length > 0), 'Create an <code>h1</code> element.')", "assert(($(\"h1\").length > 0), 'Create an <code>h1</code> element.')",
"assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'Your <code>h1</code> element should have the text <code>Hello World</code>.')", "assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'Your <code>h1</code> element should have the text <code>Hello World</code>.')",
"assert(editor.match(/<\\/h1>/g) && editor.match(/<h1/g) && editor.match(/<\\/h1>/g).length === editor.match(/<h1/g).length, 'Make sure your <code>h1</code> element has a closing tag.')", "assert(editor.match(/<\\/h1>/g) && editor.match(/<h1/g) && editor.match(/<\\/h1>/g).length === editor.match(/<h1/g).length, 'Make sure your <code>h1</code> element has a closing tag.')",
"assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your <code>body</code> element the <code>color</code> attribute of <code>green</code>.')", "assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your <code>body</code> element the <code>color</code> property of <code>green</code>.')",
"assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'Give your <code>body</code> element the <code>font-family</code> attribute of <code>Monospace</code>.')", "assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'Give your <code>body</code> element the <code>font-family</code> property of <code>Monospace</code>.')",
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'Your <code>h1</code> element should inherit the font <code>Monospace</code> from your <code>body</code> element.')", "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'Your <code>h1</code> element should inherit the font <code>Monospace</code> from your <code>body</code> element.')",
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Your <code>h1</code> element should inherit the color green from your <code>body</code> element.')" "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Your <code>h1</code> element should inherit the color green from your <code>body</code> element.')"
], ],
@ -3198,7 +3197,7 @@
"description": [ "description": [
"Sometimes your HTML elements will receive multiple styles that conflict with one another.", "Sometimes your HTML elements will receive multiple styles that conflict with one another.",
"For example, your <code>h1</code> element can't be both green and pink at the same time.", "For example, your <code>h1</code> element can't be both green and pink at the same time.",
"Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class <code>override</code> the <code>body</code> element's <code>color: green;</code> CSS attribute?", "Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class <code>override</code> the <code>body</code> element's <code>color: green;</code> CSS property?",
"Create a CSS class called <code>pink-text</code> that gives an element the color pink.", "Create a CSS class called <code>pink-text</code> that gives an element the color pink.",
"Give your <code>h1</code> element the class of <code>pink-text</code>." "Give your <code>h1</code> element the class of <code>pink-text</code>."
], ],
@ -3285,12 +3284,14 @@
"Let's override your <code>pink-text</code> and <code>blue-text</code> classes, and make your <code>h1</code> element orange, by giving the <code>h1</code> element an id and then styling that id.", "Let's override your <code>pink-text</code> and <code>blue-text</code> classes, and make your <code>h1</code> element orange, by giving the <code>h1</code> element an id and then styling that id.",
"Give your <code>h1</code> element the <code>id</code> attribute of <code>orange-text</code>. Remember, id styles look like this: <code>&#60;h1 id=\"orange-text\"&#62;</code>", "Give your <code>h1</code> element the <code>id</code> attribute of <code>orange-text</code>. Remember, id styles look like this: <code>&#60;h1 id=\"orange-text\"&#62;</code>",
"Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element.", "Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element.",
"Create a CSS declaration for your <code>orange-text</code> id in your <code>style</code> element. Here's and example of what this looks like: <code>#brown-text { color: brown; }</code>" "Create a CSS declaration for your <code>orange-text</code> id in your <code>style</code> element. Here's an example of what this looks like: <code>#brown-text { color: brown; }</code>"
], ],
"tests": [ "tests": [
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.')", "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.')",
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.')", "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.')",
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Give your <code>h1</code> element the id of <code>orange-text</code>.')", "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Give your <code>h1</code> element the id of <code>orange-text</code>.')",
"assert(editor.match(/#orange-text\\s*{/gi), 'Create a CSS declaration for your <code>orange-text</code> id')",
"assert(!editor.match(/<h1.*style.*>/gi), 'Do not give your <code>h1</code> any <code>style</code> attributes.')",
"assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'Your <code>h1</code> element should be orange.')" "assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'Your <code>h1</code> element should be orange.')"
], ],
"challengeSeed": [ "challengeSeed": [
@ -3506,7 +3507,7 @@
"difficulty": 1.56, "difficulty": 1.56,
"description": [ "description": [
"You may be wondering why we use 6 digits to represent a color instead of just one or two. The answer is that using 6 digits gives us a huge variety.", "You may be wondering why we use 6 digits to represent a color instead of just one or two. The answer is that using 6 digits gives us a huge variety.",
"How many colors are possible? 16 colors and 6 positions means we have 16 to the 6th power, or more than 16 million possible colors.", "How many colors are possible? 16 values and 6 positions means we have 16 to the 6th power, or more than 16 million possible colors.",
"Hex code follows the red-green-blue, or <code>rgb</code> format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.", "Hex code follows the red-green-blue, or <code>rgb</code> format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.",
"So to get the absolute brightest red, you would just use <code>F</code> for the first and second digits (the highest possible value) and <code>0</code> for the third, fourth, fifth and sixth digits (the lowest possible value).", "So to get the absolute brightest red, you would just use <code>F</code> for the first and second digits (the highest possible value) and <code>0</code> for the third, fourth, fifth and sixth digits (the lowest possible value).",
"Make the <code>body</code> element's background color red by giving it the hex code value of <code>#FF0000</code>." "Make the <code>body</code> element's background color red by giving it the hex code value of <code>#FF0000</code>."

60
challenges/intermediate-bonfires.json
View File

@ -13,7 +13,7 @@
], ],
"challengeSeed": [ "challengeSeed": [
"function sumAll(arr) {", "function sumAll(arr) {",
" return(1);", " return 1;",
"}", "}",
"", "",
"sumAll([1, 4]);" "sumAll([1, 4]);"
@ -113,6 +113,7 @@
"convert(36);" "convert(36);"
], ],
"MDNlinks": [ "MDNlinks": [
"Roman Numerals",
"Array.splice()", "Array.splice()",
"Array.indexOf()", "Array.indexOf()",
"Array.join()" "Array.join()"
@ -130,6 +131,48 @@
"namePt": "", "namePt": "",
"descriptionPt": [] "descriptionPt": []
}, },
{
"id": "a8e512fbe388ac2f9198f0fa",
"title": "Where art thou",
"difficulty": "2.03",
"description": [
"Make a function that looks through an array of objects (first argument) and returns an array of all objects that have matching property and value pairs (second argument). Each property and value pair of the source object has to be present in the object from the collection if it is to be included in the returned array.",
"For example, if the first argument is <code>[{ first: 'Romeo', last: 'Montague' }, { first: 'Mercutio', last: null }, { first: 'Tybalt', last: 'Capulet' }]</code>, and the second argument is <code>{ last: 'Capulet' }</code>, then you must return the third object from the array (the first argument), because it contains the property and it's value, that was passed on as the second argument.",
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck. Write your own code."
],
"challengeSeed": [
"function where(collection, source) {",
" var arr = [];",
" // What's in a name?",
" return arr;",
"}",
"",
"where([{ first: 'Romeo', last: 'Montague' }, { first: 'Mercutio', last: null }, { first: 'Tybalt', last: 'Capulet' }], { last: 'Capulet' });"
],
"tests": [
"assert.deepEqual(where([{ first: 'Romeo', last: 'Montague' }, { first: 'Mercutio', last: null }, { first: 'Tybalt', last: 'Capulet' }], { last: 'Capulet' }), [{ first: 'Tybalt', last: 'Capulet' }], 'should return an array of objects');",
"assert.deepEqual(where([{ 'a': 1 }, { 'a': 1 }, { 'a': 1, 'b': 2 }], { 'a': 1 }), [{ 'a': 1 }, { 'a': 1 }, { 'a': 1, 'b': 2 }], 'should return with multiples');",
"assert.deepEqual(where([{ 'a': 1, 'b': 2 }, { 'a': 1 }, { 'a': 1, 'b': 2, 'c': 2 }], { 'a': 1, 'b': 2 }), [{ 'a': 1, 'b': 2 }, { 'a': 1, 'b': 2, 'c': 2 }], 'should return two objects in array');",
"assert.deepEqual(where([{ 'a': 5 }, { 'a': 5 }, { 'a': 5, 'b': 10 }], { 'a': 5, 'b': 10 }), [{ 'a': 5, 'b': 10 }], 'should return a single object in array');"
],
"MDNlinks": [
"Global Object",
"Object.hasOwnProperty()",
"Object.keys()"
],
"type": "bonfire",
"challengeType": 5,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{ {
"id": "a0b5010f579e69b815e7c5d6", "id": "a0b5010f579e69b815e7c5d6",
"title": "Search and Replace", "title": "Search and Replace",
@ -140,7 +183,7 @@
"assert(replace(\"His name is Tom\", \"Tom\", \"john\") === \"His name is John\", '<code>\"His name is Tom\", \"Tom\", \"john\"</code> should return <code>\"His name is John\"</code>.');", "assert(replace(\"His name is Tom\", \"Tom\", \"john\") === \"His name is John\", '<code>\"His name is Tom\", \"Tom\", \"john\"</code> should return <code>\"His name is John\"</code>.');",
"assert(replace(\"Let us get back to more Coding\", \"Coding\", \"bonfires\") === \"Let us get back to more Bonfires\"), '<code>\"Let us get back to more Coding\", \"Coding\", \"bonfires\"</code> should return <code>\"Let us get back to more Bonfires\"</code>');" "assert(replace(\"Let us get back to more Coding\", \"Coding\", \"bonfires\") === \"Let us get back to more Bonfires\"), '<code>\"Let us get back to more Coding\", \"Coding\", \"bonfires\"</code> should return <code>\"Let us get back to more Bonfires\"</code>');"
], ],
"difficulty": "2.03", "difficulty": "2.035",
"description": [ "description": [
"Perform a search and replace on the sentence using the arguments provided and return the new sentence.", "Perform a search and replace on the sentence using the arguments provided and return the new sentence.",
"First argument is the sentence to perform the search and replace on.", "First argument is the sentence to perform the search and replace on.",
@ -232,7 +275,7 @@
"<a href=\"http://en.wikipedia.org/wiki/Base_pair\" target=\"_blank\">Base pairs</a> are a pair of AT and CG. Match the missing element to the provided character.", "<a href=\"http://en.wikipedia.org/wiki/Base_pair\" target=\"_blank\">Base pairs</a> are a pair of AT and CG. Match the missing element to the provided character.",
"Return the provided character as the first element in each array.", "Return the provided character as the first element in each array.",
"For example, for the input GCG, return [['G', 'C'], ['C','G'],['G', 'C']]", "For example, for the input GCG, return [['G', 'C'], ['C','G'],['G', 'C']]",
"The charater and its pair are paired up in an array, and all the arrays are grouped into one encapsulating array.", "The character and its pair are paired up in an array, and all the arrays are grouped into one encapsulating array.",
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code." "Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
], ],
"challengeSeed": [ "challengeSeed": [
@ -549,9 +592,9 @@
"title": "Smallest Common Multiple", "title": "Smallest Common Multiple",
"difficulty": "2.11", "difficulty": "2.11",
"description": [ "description": [
"Find the smallest number that is evenly divisible by all numbers in the provided range.", "Find the smallest common multiple of the provided parameters that can be evenly divided by both, as well as by all sequential numbers in the range between these parameters.",
"In other words, given the range [3,7], you will need to find the least common multiple of 3, 4, 5, 6, and 7.",
"The range will be an array of two numbers that will not necessarily be in numerical order.", "The range will be an array of two numbers that will not necessarily be in numerical order.",
"e.g. for 1 and 3 - find the smallest common multiple of both 1 and 3 that is evenly divisible by all numbers <em>between</em> 1 and 3.",
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code." "Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
], ],
"challengeSeed": [ "challengeSeed": [
@ -637,9 +680,10 @@
"drop([1, 2, 3], function(n) {return n < 3; });" "drop([1, 2, 3], function(n) {return n < 3; });"
], ],
"tests": [ "tests": [
"assert(drop([1, 2, 3, 4], function(n) {return n >= 3; })).to.eqls([3, 4], '.');", "expect(drop([1, 2, 3, 4], function(n) {return n >= 3; })).to.eqls([3, 4]);",
"assert(drop([1, 2, 3], function(n) {return n > 0; })).to.eqls([1, 2, 3], '.');", "expect(drop([1, 2, 3], function(n) {return n > 0; })).to.eqls([1, 2, 3]);",
"assert(drop([1, 2, 3, 4], function(n) {return n > 5; })).to.eqls([]);" "expect(drop([1, 2, 3, 4], function(n) {return n > 5; })).to.eqls([]);",
"expect(drop([1, 2, 3, 7, 4], function(n) { return n > 5; })).to.eqls([7, 4]);"
], ],
"MDNlinks": [ "MDNlinks": [
"Arguments object", "Arguments object",

17
challenges/intermediate-ziplines.json
View File

@ -8,19 +8,18 @@
"difficulty": 1.02, "difficulty": 1.02,
"challengeSeed": ["126415129"], "challengeSeed": ["126415129"],
"description": [ "description": [
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/Wveezv' target='_blank'>http://codepen.io/GeoffStorbeck/full/Wveezv</a>.", "<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/MarufSarker/full/ZGPZLq/' target='_blank'>http://codepen.io/MarufSarker/full/ZGPZLq/</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.", "<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.", "<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.", "<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:", "Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
"<span class='text-info'>User Story:</span> As a user, I can browse recent posts from Camper News.", "<span class='text-info'>User Story:</span> As a user, I can browse recent posts from Camper News.",
"<span class='text-info'>User Story:</span> As a user, I can click on a post to be taken to the story's original URL.", "<span class='text-info'>User Story:</span> As a user, I can click on a post to be taken to the story's original URL.",
"<span class='text-info'>User Story:</span> As a user, I can click a link to go directly to the post's discussion page.",
"<span class='text-info'>Bonus User Story:</span> As a user, I can see how many upvotes each story has.", "<span class='text-info'>Bonus User Story:</span> As a user, I can see how many upvotes each story has.",
"<span class='text-info'>Hint:</span> Here's the Camper News Hot Stories API endpoint: <code>http://www.freecodecamp.com/news/hot</code>.", "<span class='text-info'>Hint:</span> Here's the Camper News Hot Stories API endpoint: <code>http://www.freecodecamp.com/news/hot</code>.",
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.", "Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
], ],
"type": "zipline", "type": "zipline",
"challengeType": 3, "challengeType": 3,
@ -53,7 +52,7 @@
"<span class='text-info'>Hint:</span> Here's an entry on using Wikipedia's API: <code>http://www.mediawiki.org/wiki/API:Main_page</code>.", "<span class='text-info'>Hint:</span> Here's an entry on using Wikipedia's API: <code>http://www.mediawiki.org/wiki/API:Main_page</code>.",
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.", "Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
], ],
"type": "zipline", "type": "zipline",
"challengeType": 3, "challengeType": 3,
@ -85,7 +84,7 @@
"<span class='text-info'>Bonus User Story:</span> I can keep chaining mathematical operations together until I hit the clear button, and the calculator will tell me the correct output.", "<span class='text-info'>Bonus User Story:</span> I can keep chaining mathematical operations together until I hit the clear button, and the calculator will tell me the correct output.",
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.", "Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
], ],
"type": "zipline", "type": "zipline",
"challengeType": 3, "challengeType": 3,
@ -118,7 +117,7 @@
"<span class='text-info'>Bonus User Story:</span> As a user, I can choose whether I want to play as X or O.", "<span class='text-info'>Bonus User Story:</span> As a user, I can choose whether I want to play as X or O.",
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.", "Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
], ],
"type": "zipline", "type": "zipline",
"challengeType": 3, "challengeType": 3,
@ -138,9 +137,9 @@
"id": "bd7158d8c442eddfaeb5bd1c", "id": "bd7158d8c442eddfaeb5bd1c",
"title": "Build a Simon Game", "title": "Build a Simon Game",
"difficulty": 1.07, "difficulty": 1.07,
"challengeSeed": ["126415123"], "challengeSeed": ["137213633"],
"description": [ "description": [
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/dting/full/KpJXZV/' target='_blank'>http://codepen.io/dting/full/KpJXZV/</a>.", "<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/Em-Ant/full/QbRyqq/' target='_blank'>http://codepen.io/dting/full/QbRyqq/</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.", "<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.", "<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.", "<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
@ -157,7 +156,7 @@
"<span class='text-info'>Hint:</span> Here are mp3s you can use for each button: <code>https://s3.amazonaws.com/freecodecamp/simonSound1.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound2.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound3.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound4.mp3</code>.", "<span class='text-info'>Hint:</span> Here are mp3s you can use for each button: <code>https://s3.amazonaws.com/freecodecamp/simonSound1.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound2.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound3.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound4.mp3</code>.",
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.", "Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>" "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
], ],
"type": "zipline", "type": "zipline",
"challengeType": 3, "challengeType": 3,

56
challenges/jquery.json
View File

@ -16,8 +16,8 @@
"tests": [ "tests": [
"assert(editor.match(/<script>/g), 'Create a <code>script</code> element.')", "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(/<\\/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(/\\$\\s*?\\(\\s*?document\\)\\.ready\\s*?\\(\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/g), 'You should add <code>$&#40;document&#41;.ready&#40;function&#40;&#41; {</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>.')" "assert(editor.match(/\\n*?\\s*?\\}\\s*?\\);/g), 'Close your <code>$&#40;document&#41;.ready&#40;function&#40;&#41; {</code> function with <code>}&#41;;</code>.')"
], ],
"challengeSeed": [ "challengeSeed": [
"", "",
@ -58,7 +58,8 @@
"This is important because without your <code>document ready function</code>, your code may run before your HTML is rendered, which would cause bugs.", "This is important because without your <code>document ready function</code>, 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 <code>dollar sign operator</code>, or simply as <code>bling</code>.", "Now let's write our first jQuery statement. All jQuery functions start with a <code>$</code>, usually referred to as a <code>dollar sign operator</code>, or simply as <code>bling</code>.",
"jQuery often selects an HTML element with a <code>selector</code>, then does something to that element.", "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 <code>document ready function</code>: <code>$(\"button\").addClass(\"animated bounce\")</code>." "For example, let's make all of your <code>button</code> elements bounce. Just add this code inside your <code>document ready function</code>: <code>$(\"button\").addClass(\"animated bounce\")</code>.",
"Note that we've already included both the jQuery library and the Animate.css library in your code editor. So you are using jQuery to apply the Animate.css <code>bounce</code> class to your <code>button</code> elements."
], ],
"tests": [ "tests": [
"assert($(\"button\").hasClass(\"animated\") && $(\"button\").hasClass(\"bounce\"), 'Use the jQuery <code>addClass&#40&#41</code> function to give the classes <code>animated</code> and <code>bounce</code> to your <code>button</code> elements.')", "assert($(\"button\").hasClass(\"animated\") && $(\"button\").hasClass(\"bounce\"), 'Use the jQuery <code>addClass&#40&#41</code> function to give the classes <code>animated</code> and <code>bounce</code> to your <code>button</code> elements.')",
@ -160,8 +161,8 @@
"Here's how you'd make the <code>button</code> element with the id <code>target6</code> fade out: <code>$(\"#target6\").addClass(\"animated fadeOut\")</code>." "Here's how you'd make the <code>button</code> element with the id <code>target6</code> fade out: <code>$(\"#target6\").addClass(\"animated fadeOut\")</code>."
], ],
"tests": [ "tests": [
"assert($(\"#target3\").hasClass(\"animated\"), 'Select the <code>button</code>element with the <code>id</code> of <code>target3</code> and use the jQuery <code>addClass&#40&#41</code> function to give it the class of <code>animated</code>.');", "assert($(\"#target3\").hasClass(\"animated\"), 'Select the <code>button</code>element with the <code>id</code> of <code>target3</code> and use the jQuery <code>addClass&#40&#41</code> function to give it the class of <code>animated</code>.')",
"assert($(\"#target3\").hasClass(\"fadeOut\") || $(\"#target3\").hasClass(\"fadeout\"), 'Target the element with the id <code>target3</code> and use the jQuery <code>addClass&#40&#41</code> function to give it the class <code>fadeOut</code>.')", "assert(($(\"#target3\").hasClass(\"fadeOut\") || $(\"#target3\").hasClass(\"fadeout\")) && editor.match(/\\$\\(.#target3.\\)/g), 'Target the element with the id <code>target3</code> and use the jQuery <code>addClass&#40&#41</code> function to give it the class <code>fadeOut</code>.')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')" "assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
], ],
"challengeSeed": [ "challengeSeed": [
@ -212,7 +213,7 @@
"assert(!editor.match(/e\"\\);/g) && !editor.match(/t\"\\);/g), 'Delete all three of your jQuery functions from your <code>document ready function</code>.')", "assert(!editor.match(/e\"\\);/g) && !editor.match(/t\"\\);/g), 'Delete all three of your jQuery functions from your <code>document ready function</code>.')",
"assert(editor.match(/<script>/g), 'Leave your <code>script</code> element intact.')", "assert(editor.match(/<script>/g), 'Leave your <code>script</code> element intact.')",
"assert(editor.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'Leave your <code>$&#40document&#41.ready&#40function&#40&#41 {</code> to the beginning of your <code>script</code> element.')", "assert(editor.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'Leave your <code>$&#40document&#41.ready&#40function&#40&#41 {</code> to the beginning of your <code>script</code> element.')",
"assert(editor.match(/\\n\\s+?\\}\\);/g), 'Leave your your \"document ready function\" closing <code>\\}&#41;</code> intact.')", "assert(editor.match(/\\n\\s+?\\}\\);/g), 'Leave your \"document ready function\" closing <code>&#125;&#41;</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.')" "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": [ "challengeSeed": [
@ -262,9 +263,9 @@
"Use the <code>addClass()</code> jQuery function to give the element one new class for each selector: <code>animated</code>, <code>shake</code>, and <code>btn-primary</code>." "Use the <code>addClass()</code> jQuery function to give the element one new class for each selector: <code>animated</code>, <code>shake</code>, and <code>btn-primary</code>."
], ],
"tests": [ "tests": [
"assert(editor.match(/\\$\\(.*button/g), 'Use the <code>$&#40\"button\"&#41</code> selector.')", "assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?button\\s*?(?:'|\")/gi), 'Use the <code>$&#40\"button\"&#41</code> selector.')",
"assert(editor.match(/\\$\\(.*\\.btn/g), 'Use the <code>$&#40\".btn\"&#41</code> selector.')", "assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.btn\\s*?(?:'|\")/gi), 'Use the <code>$&#40\".btn\"&#41</code> selector.')",
"assert(editor.match(/\\$\\(.*#target1/g), 'Use the <code>$&#40\"#target1\"&#41</code> selector.')", "assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?#target1\\s*?(?:'|\")/gi), 'Use the <code>$&#40\"#target1\"&#41</code> selector.')",
"assert(editor.match(/addClass/g) && editor.match(/addClass/g).length > 2, 'Only add one class with each of your three selectors.')", "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 <code>#target1</code> element should have the classes <code>animated</code>&#130; <code>shake</code> and <code>btn-primary</code>.')", "assert($(\"#target1\").hasClass(\"animated\") && $(\"#target1\").hasClass(\"shake\") && $(\"#target1\").hasClass(\"btn-primary\"), 'Your <code>#target1</code> element should have the classes <code>animated</code>&#130; <code>shake</code> and <code>btn-primary</code>.')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')" "assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
@ -309,12 +310,13 @@
"difficulty": 3.07, "difficulty": 3.07,
"description": [ "description": [
"In the same way you can add classes to an element with jQuery's <code>addClass()</code> function, you can remove them with jQuery's <code>removeClass()</code> function.", "In the same way you can add classes to an element with jQuery's <code>addClass()</code> function, you can remove them with jQuery's <code>removeClass()</code> function.",
"Let's remove the <code>btn-default</code> class from all of our <code>button</code> elements.", "Here's how you would do this for a specific button, add <code>$(\"#target2\").removeClass(\"btn-default\");</code>",
"Here's how you would do this for a specific button, add <code>$(\"#target2\").removeClass(\"btn-default\");</code>" "Let's remove the <code>btn-default</code> class from all of our <code>button</code> elements."
], ],
"tests": [ "tests": [
"assert($(\".btn-default\").length === 0, 'Remove the <code>btn-default</code> class from all of your <code>button</code> elements.')", "assert($(\".btn-default\").length === 0, 'Remove the <code>btn-default</code> class from all of your <code>button</code> elements.')",
"assert(editor.match(/btn btn-default/g), 'Only use jQuery to remove this class from the element.')" "assert(editor.match(/btn btn-default/g), 'Only use jQuery to remove this class from the element.')",
"assert(editor.match(/\\.[\\v\\s]*removeClass[\\s\\v]*\\([\\s\\v]*('|\")\\s*btn-default\\s*('|\")[\\s\\v]*\\)/gm), 'Only remove the <code>btn-default</code> class.')"
], ],
"challengeSeed": [ "challengeSeed": [
"fccss", "fccss",
@ -359,11 +361,11 @@
"difficulty": 3.08, "difficulty": 3.08,
"description": [ "description": [
"We can also change the CSS of an HTML element directly with jQuery.", "We can also change the CSS of an HTML element directly with jQuery.",
"Delete your jQuery selectors, leaving an empty <code>document ready function</code>.",
"Select <code>target1</code> and change its color to red.",
"jQuery has a function called <code>.css()</code> that allows you to change the CSS of an element.", "jQuery has a function called <code>.css()</code> that allows you to change the CSS of an element.",
"Here's how we would change its color to blue: <code>$(\"#target1\").css(\"color\", \"blue\");</code>", "Here's how we would change its color to blue: <code>$(\"#target1\").css(\"color\", \"blue\");</code>",
"This is slightly different from a normal CSS declaration, because the CSS attribute and its value are in quotes, and separated with a comma instead of a colon." "This is slightly different from a normal CSS declaration, because the CSS property and its value are in quotes, and separated with a comma instead of a colon.",
"Delete your jQuery selectors, leaving an empty <code>document ready function</code>.",
"Select <code>target1</code> and change its color to red."
], ],
"tests": [ "tests": [
"assert($(\"#target1\").css(\"color\") === 'rgb(255, 0, 0)', 'Your <code>target1</code> element should have red text.')", "assert($(\"#target1\").css(\"color\") === 'rgb(255, 0, 0)', 'Your <code>target1</code> element should have red text.')",
@ -415,7 +417,7 @@
"You can also change the non-CSS properties of HTML elements with jQuery. For example, you can disable buttons.", "You can also change the non-CSS properties of HTML elements with jQuery. For example, you can disable buttons.",
"When you disable a button, it will become grayed-out and can no longer be clicked.", "When you disable a button, it will become grayed-out and can no longer be clicked.",
"jQuery has a function called <code>.prop()</code> that allows you to adjust the properties of elements.", "jQuery has a function called <code>.prop()</code> that allows you to adjust the properties of elements.",
"Here's how you would disable all buttons: <code>$('#button').prop('disabled', true);</code>", "Here's how you would disable all buttons: <code>$(\"button\").prop(\"disabled\", true);</code>",
"Disable only the <code>target1</code> button." "Disable only the <code>target1</code> button."
], ],
"tests": [ "tests": [
@ -464,7 +466,8 @@
"difficulty": 3.10, "difficulty": 3.10,
"description": [ "description": [
"Now let's remove an HTML element from your page using jQuery.", "Now let's remove an HTML element from your page using jQuery.",
"jQuery has a function called <code>.remove()</code> that will remove an HTML element entirely." "jQuery has a function called <code>.remove()</code> that will remove an HTML element entirely",
"Remove element <code>target4</code> from the page by using the <code>.remove()</code> function."
], ],
"tests": [ "tests": [
"assert($(\"#target4\").length === 0, 'Use jQuery to remove your <code>target4</code> element from your page.')", "assert($(\"#target4\").length === 0, 'Use jQuery to remove your <code>target4</code> element from your page.')",
@ -620,12 +623,13 @@
"Every HTML element has a <code>parent</code> element from which it <code>inherits</code> properties.", "Every HTML element has a <code>parent</code> element from which it <code>inherits</code> properties.",
"For example, your <code>jQuery Playground</code> <code>h3</code> element has the parent element of <code>&#60;div class=\"container-fluid\"&#62</code>, which itself has the parent <code>body</code>.", "For example, your <code>jQuery Playground</code> <code>h3</code> element has the parent element of <code>&#60;div class=\"container-fluid\"&#62</code>, which itself has the parent <code>body</code>.",
"jQuery has a function called <code>parent()</code> that allows you to access the parent of whichever element you've selected.", "jQuery has a function called <code>parent()</code> that allows you to access the parent of whichever element you've selected.",
"Give the parent of the <code>#target1</code> element background-color of red.", "Here's an example of how you would use the <code>parent()</code> function if you wanted to give the parent element of the <code>left-well</code> element a background color of blue: <code>$(\"#left-well\").parent().css(\"background-color\", \"blue\")</code>",
"Here's an example of how you would use the <code>parent()</code> function: <code>$(\"#left-well\").parent().css(\"background-color\", \"blue\")</code>" "Give the parent of the <code>#target1</code> element a background-color of red."
], ],
"tests": [ "tests": [
"assert($(\"#left-well\").css(\"background-color\") === 'red' || $(\"#left-well\").css(\"background-color\") === 'rgb(255, 0, 0)' || $(\"#left-well\").css(\"background-color\").toLowerCase() === '#ff0000' || $(\"#left-well\").css(\"background-color\").toLowerCase() === '#f00', 'Your <code>left-well</code> element should have a red background.')", "assert($(\"#left-well\").css(\"background-color\") === 'red' || $(\"#left-well\").css(\"background-color\") === 'rgb(255, 0, 0)' || $(\"#left-well\").css(\"background-color\").toLowerCase() === '#ff0000' || $(\"#left-well\").css(\"background-color\").toLowerCase() === '#f00', 'Your <code>left-well</code> element should have a red background.')",
"assert(editor.match(/\\.parent\\(\\)\\.css/g), 'You should use the <code>parent()</code> function to modify this element.')", "assert(editor.match(/\\.parent\\(\\)\\.css/g), 'You should use the <code>&#46;parent&#40;&#41;</code> function to modify this element.')",
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?#target1\\s*?(?:'|\")\\s*?\\)\\.parent/gi), 'The <code>&#46;parent&#40;&#41;</code> method should be called on the <code>&#35;target1</code> element.')",
"assert(editor.match(/<div class=\"well\" id=\"left-well\">/g), 'Only use jQuery to add these classes to the element.')" "assert(editor.match(/<div class=\"well\" id=\"left-well\">/g), 'Only use jQuery to add these classes to the element.')"
], ],
"challengeSeed": [ "challengeSeed": [
@ -672,14 +676,14 @@
"title": "Target the Children of an Element Using jQuery", "title": "Target the Children of an Element Using jQuery",
"difficulty": 3.14, "difficulty": 3.14,
"description": [ "description": [
"Many HTML elements have <code>children</code> elements from which <code>inherit</code> their properties.", "Many HTML elements have <code>children</code> which <code>inherit</code> their properties from their parent HTML elements.",
"For example, every HTML element is a child of your <code>body</code> element, and your \"jQuery Playground\" <code>h3</code> element is a child of your <code>&#60;div class=\"container-fluid\"&#62</code> element.", "For example, every HTML element is a child of your <code>body</code> element, and your \"jQuery Playground\" <code>h3</code> element is a child of your <code>&#60;div class=\"container-fluid\"&#62</code> element.",
"jQuery has a function called <code>children()</code> that allows you to access the children of whichever element you've selected.", "jQuery has a function called <code>children()</code> that allows you to access the children of whichever element you've selected.",
"Give all the children of your <code>#right-well</code> element a color of green.", "Here's an example of how you would use the <code>children()</code> function to give the children of your <code>left-well</code> element the background color of blue: <code>$(\"#left-well\").children().css(\"color\", \"blue\")</code>",
"Here's an example of how you would use the <code>children()</code> function: <code>$(\"#left-well\").children().css(\"color\", \"blue\")</code>" "Give all the children of your <code>#right-well</code> element a color of green."
], ],
"tests": [ "tests": [
"assert($(\"#target6\").css(\"color\") === 'rgb(0, 128, 0)', 'Your <code>target6</code> element should have green text.')", "assert($(\"#right-well\").children().css(\"color\") === 'rgb(0, 128, 0)', 'All children of <code>#right-well</code> should have green text.')",
"assert(editor.match(/\\.children\\(\\)\\.css/g), 'You should use the <code>children&#40&#41</code> function to modify these elements.')", "assert(editor.match(/\\.children\\(\\)\\.css/g), 'You should use the <code>children&#40&#41</code> function to modify these elements.')",
"assert(editor.match(/<div class=\"well\" id=\"right-well\">/g), 'Only use jQuery to add these classes to the element.')" "assert(editor.match(/<div class=\"well\" id=\"right-well\">/g), 'Only use jQuery to add these classes to the element.')"
], ],
@ -731,11 +735,11 @@
"You've seen why id attributes are so convenient for targeting with jQuery selectors. But you won't always have such neat ids to work with.", "You've seen why id attributes are so convenient for targeting with jQuery selectors. But you won't always have such neat ids to work with.",
"Fortunately, jQuery has some other tricks for targeting the right elements.", "Fortunately, jQuery has some other tricks for targeting the right elements.",
"jQuery uses CSS Selectors to target elements. <code>target:nth-child(n)</code> css selector allows you to select all the nth element with the target class or element type.", "jQuery uses CSS Selectors to target elements. <code>target:nth-child(n)</code> css selector allows you to select all the nth element with the target class or element type.",
"Make the second child in each of your well elements bounce.", "Make the second child in each of your well elements bounce. You must target the children of element with the <code>target</code> class.",
"Here's how you would give the third element in each well bounce: <code>$(\".target:nth-child(3)\").addClass(\"animated bounce\");</code>" "Here's how you would give the third element in each well bounce: <code>$(\".target:nth-child(3)\").addClass(\"animated bounce\");</code>"
], ],
"tests": [ "tests": [
"assert($(\".target:nth-child(2)\").hasClass(\"animated\") && $(\".target:nth-child(2)\").hasClass(\"bounce\"), 'The second element in each of your <code>well</code> elements should bounce.')", "assert($(\".target:nth-child(2)\").hasClass(\"animated\") && $(\".target:nth-child(2)\").hasClass(\"bounce\"), 'The second element in your <code>target</code> elements should bounce.')",
"assert(editor.match(/\\:nth-child\\(/g), 'You should use the <code>&#58;nth-child&#40&#41</code> function to modify these elements.')", "assert(editor.match(/\\:nth-child\\(/g), 'You should use the <code>&#58;nth-child&#40&#41</code> function to modify these elements.')",
"assert(editor.match(/<button class=\"btn btn-default target\" id=\"target2\">/g), 'Only use jQuery to add these classes to the element.')" "assert(editor.match(/<button class=\"btn btn-default target\" id=\"target2\">/g), 'Only use jQuery to add these classes to the element.')"
], ],

8
challenges/mongodb.json
View File

@ -11,11 +11,11 @@
"We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.", "We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.",
"If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.", "If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
"Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.", "Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
"Click on Create New Workspace at the top right of the c9.io page, then click on the \"Create a new workspace\" popup that appears below it the button after you click on it.", "Click on the \"+\" icon at the top right of the c9.io page to create a new workspace.",
"Give your workspace a name.", "Give your workspace a name and an optional description.",
"Choose Node.js in the selection area below the name field.", "Choose Node.js in the selection area below the name field.",
"Click the Create button. Then click into your new workspace.", "Click the \"Create workspace\" button.",
"In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.", "Once C9 builds and loads your workspace, you should see a terminal window in the lower right hand corner. In this window use the following commands. You don't need to know what these mean at this point.",
"Install <code>learnyoumongo</code> with this command: <code>npm install learnyoumongo -g</code>", "Install <code>learnyoumongo</code> with this command: <code>npm install learnyoumongo -g</code>",
"Now start the tutorial by running <code>learnyoumongo</code>.", "Now start the tutorial by running <code>learnyoumongo</code>.",
"Whenever you run a command that includes <code>mongod</code> on c9.io, be sure to also use the <code>--nojournal</code> flag, like this: <code>mongod --nojournal</code>.", "Whenever you run a command that includes <code>mongod</code> on c9.io, be sure to also use the <code>--nojournal</code> flag, like this: <code>mongod --nojournal</code>.",

22
challenges/nodejs-and-expressjs.json
View File

@ -65,11 +65,11 @@
"We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud. We'll do the first 7 steps of Node School's LearnYouNode challenges.", "We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud. We'll do the first 7 steps of Node School's LearnYouNode challenges.",
"If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.", "If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
"Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.", "Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
"Click on Create New Workspace at the top right of the c9.io page, then click on the \"Create a new workspace\" popup that appears below it the button after you click on it.", "Click on the \"+\" icon at the top right of the c9.io page to create a new workspace.",
"Give your workspace a name.", "Give your workspace a name and an optional description.",
"Choose Node.js in the selection area below the name field.", "Choose Node.js in the selection area below the name field.",
"Click the Create button. Then click into your new workspace.", "Click the \"Create workspace\" button.",
"In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.", "Once C9 builds and loads your workspace, you should see a terminal window in the lower right hand corner. In this window use the following commands. You don't need to know what these mean at this point.",
"Run this command: <code>sudo npm install -g learnyounode</code>", "Run this command: <code>sudo npm install -g learnyounode</code>",
"Now start this tutorial by running <code>learnyounode</code>", "Now start this tutorial by running <code>learnyounode</code>",
"Note that you can resize the c9.io's windows by dragging their borders.", "Note that you can resize the c9.io's windows by dragging their borders.",
@ -167,21 +167,23 @@
"We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.", "We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.",
"If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.", "If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
"Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.", "Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
"Click on Create New Workspace at the top right of the c9.io page, then click on the \"Create a new workspace\" popup that appears below it the button after you click on it.", "Click on the \"+\" icon at the top right of the c9.io page to create a new workspace.",
"Give your workspace a name.", "Give your workspace a name and an optional description.",
"Choose Node.js in the selection area below the name field.", "Choose Node.js in the selection area below the name field.",
"Click the Create button. Then click into your new workspace.", "Click the \"Create workspace\" button.",
"In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.", "Once C9 builds and loads your workspace, you should see a terminal window in the lower right hand corner. In this window use the following commands. You don't need to know what these mean at this point.",
"Run this command: <code>git clone http://github.com/reddock/fcc_express && chmod 744 fcc_express/setup.sh && fcc_express/setup.sh && source ~/.profile</code>", "Run this command: <code>git clone http://github.com/reddock/fcc_express && chmod 744 fcc_express/setup.sh && fcc_express/setup.sh && source ~/.profile</code>",
"Now start this tutorial by running <code>expressworks</code>", "Now start this tutorial by running <code>expressworks</code>",
"Note that you can resize the c9.io's windows by dragging their borders.", "Note that you can resize the c9.io's windows by dragging their borders.",
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.", "Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
"You can view this Node School module's source code on GitHub at <a href='https://github.com/azat-co/expressworks'>https://github.com/azat-co/expressworks</a>.", "You can view this Node School module's source code on GitHub at <a href='https://github.com/azat-co/expressworks'>https://github.com/azat-co/expressworks</a>.",
"Complete \"Hello World\"", "Complete \"Hello World!\"",
"Complete \"Static\"",
"Complete \"Jade\"", "Complete \"Jade\"",
"Complete \"Good Old Form\"", "Complete \"Good Old Form\"",
"Complete \"Stylish CSS\"", "Complete \"Stylish CSS\"",
"Complete \"Session and Cookie\"", "Complete \"Param Pam Pam\"",
"Complete \"What's In Query\"",
"Complete \"JSON Me\"", "Complete \"JSON Me\"",
"Once you've completed these steps, move on to our next challenge." "Once you've completed these steps, move on to our next challenge."
], ],

59
challenges/object-oriented-and-functional-programming.json
View File

@ -1,6 +1,6 @@
{ {
"name": "Object Oriented and Functional Programming", "name": "Object Oriented and Functional Programming",
"order": 0.010, "order": 0.006,
"note": [ "note": [
"Methods", "Methods",
"Closures", "Closures",
@ -20,9 +20,9 @@
"Give your <code>motorBike</code> object a <code>wheels</code>, <code>engines</code> and <code>seats</code> attribute and set them to numbers." "Give your <code>motorBike</code> object a <code>wheels</code>, <code>engines</code> and <code>seats</code> attribute and set them to numbers."
], ],
"tests":[ "tests":[
"assert(typeof(motorBike.engines) === 'number', '<code>engines</code> should be have a <code>engines</code> attribute set to a number.');", "assert(typeof(motorBike.engines) === 'number', '<code>motorBike</code> should have a <code>engines</code> attribute set to a number.');",
"assert(typeof(motorBike.wheels) === 'number', '<code>wheels</code> should be have a <code>engines</code> attribute set to a number.');", "assert(typeof(motorBike.wheels) === 'number', '<code>motorBike</code> should have a <code>wheels</code> attribute set to a number.');",
"assert(typeof(motorBike.seats) === 'number', '<code>seats</code> should be have a <code>engines</code> attribute set to a number.');" "assert(typeof(motorBike.seats) === 'number', '<code>motorBike</code> should have a <code>seats</code> attribute set to a number.');"
], ],
"challengeSeed":[ "challengeSeed":[
"//Here is a sample Object", "//Here is a sample Object",
@ -42,7 +42,7 @@
" // Only change code above this line.", " // Only change code above this line.",
"};", "};",
"", "",
"(function() {return(JSON.stringify(motorBike));})();" "(function() {return JSON.stringify(motorBike);})();"
], ],
"challengeType":1, "challengeType":1,
"type": "waypoint", "type": "waypoint",
@ -54,12 +54,12 @@
"difficulty":0, "difficulty":0,
"description":[ "description":[
"We are also able to create objects using <code>constructor</code> functions.", "We are also able to create objects using <code>constructor</code> functions.",
"Give your <code>motorBike</code> object a <code>wheels</code>, <code>engines</code> and <code>seats</code> attribute and set them to numbers." "Give your <code>myMotorBike</code> object a <code>wheels</code>, <code>engines</code> and <code>seats</code> attribute and set them to numbers."
], ],
"tests":[ "tests":[
"assert(typeof((new MotorBike()).engines) === 'number', '<code>engines</code> should be have a <code>engines</code> attribute set to a number.');", "assert(typeof((new MotorBike()).engines) === 'number', '<code>myMotorBike</code> should have a <code>engines</code> attribute set to a number.');",
"assert(typeof((new MotorBike()).wheels) === 'number', '<code>wheels</code> should be have a <code>engines</code> attribute set to a number.');", "assert(typeof((new MotorBike()).wheels) === 'number', '<code>myMotorBike</code> should have a <code>wheels</code> attribute set to a number.');",
"assert(typeof((new MotorBike()).seats) === 'number', '<code>seats</code> should be have a <code>engines</code> attribute set to a number.');" "assert(typeof((new MotorBike()).seats) === 'number', '<code>myMotorBike</code> should have a <code>seats</code> attribute set to a number.');"
], ],
"challengeSeed":[ "challengeSeed":[
"// Let's add the properties engines and seats to the car in the same way that the property wheels has been added below. They should both be numbers.", "// Let's add the properties engines and seats to the car in the same way that the property wheels has been added below. They should both be numbers.",
@ -81,7 +81,7 @@
"var myMotorBike = new MotorBike();", "var myMotorBike = new MotorBike();",
"// Only change code above this line.", "// Only change code above this line.",
"", "",
"(function() {return(JSON.stringify(myMotorBike));})();" "(function() {return JSON.stringify(myMotorBike);})();"
], ],
"challengeType":1, "challengeType":1,
"type": "waypoint" "type": "waypoint"
@ -107,10 +107,10 @@
"var Car = function() {", "var Car = function() {",
" this.gear = 1;", " this.gear = 1;",
" function addStyle(styleMe){", " function addStyle(styleMe){",
" return('The Current Gear Is: ' + styleMe);", " return 'The Current Gear Is: ' + styleMe;",
" }", " }",
" this.getGear = function() {", " this.getGear = function() {",
" return(addStyle(this.gear));", " return addStyle(this.gear);",
" };", " };",
"};", "};",
"", "",
@ -118,11 +118,11 @@
" // Only change code below this line.", " // Only change code below this line.",
" this.speed = 100;", " this.speed = 100;",
" function addUnit(value) {", " function addUnit(value) {",
" return(value + \"KM/H\");", " return value + \"KM/H\";",
" }", " }",
" ", " ",
" getSpeed = function () {", " getSpeed = function () {",
" return(addUnit(speed));", " return addUnit(speed);",
" };", " };",
" ", " ",
"};", "};",
@ -131,7 +131,7 @@
"var myCar = new Car();", "var myCar = new Car();",
"var myBike = new Bike();", "var myBike = new Bike();",
"", "",
"if(myBike.hasOwnProperty('getSpeed')){(function() {return(JSON.stringify(myBike.getSpeed()));})();};" "if(myBike.hasOwnProperty('getSpeed')){(function() {return JSON.stringify(myBike.getSpeed());})();};"
], ],
"challengeType":1, "challengeType":1,
"type": "waypoint" "type": "waypoint"
@ -166,7 +166,7 @@
"", "",
"", "",
"// Only change code above this line.", "// Only change code above this line.",
"(function() {return(JSON.stringify(myCar));})();" "(function() {return JSON.stringify(myCar);})();"
], ],
"challengeType":1, "challengeType":1,
"type": "waypoint" "type": "waypoint"
@ -177,10 +177,11 @@
"difficulty":0, "difficulty":0,
"description":[ "description":[
"<code>array = array.map(function(val){</code>", "<code>array = array.map(function(val){</code>",
"<code>&thinsp;&thinsp;return(val+1);</code>", "<code>&thinsp;&thinsp;return val+1;</code>",
"<code>});</code>", "<code>});</code>",
"", "",
"The map method is one of the easiest ways to iterate through an array or object there is. Let's use it now." "The map method is one of the easiest ways to iterate through an array or object there is. Let's use it now.",
"Use the map function to add 3 to every value in the variable <code>array</code>"
], ],
"tests":[ "tests":[
"assert.deepEqual(array, [4,5,6,7,8], 'You should have added three to each value in the array');", "assert.deepEqual(array, [4,5,6,7,8], 'You should have added three to each value in the array');",
@ -195,7 +196,7 @@
"", "",
"", "",
"// Only change code above this line.", "// Only change code above this line.",
"(function() {return(array);})();" "(function() {return array;})();"
], ],
"challengeType":1, "challengeType":1,
"type": "waypoint" "type": "waypoint"
@ -205,9 +206,9 @@
"title":"Condense arrays with .reduce", "title":"Condense arrays with .reduce",
"difficulty":0, "difficulty":0,
"description":[ "description":[
"Reduce can be useful for condensing and array or numbers into one value.", "Reduce can be useful for condensing an array or numbers into one value.",
"<code>var singleVal = array.reduce(function(previousVal, currentVal){</code>", "<code>var singleVal = array.reduce(function(previousVal, currentVal){</code>",
"<code>&thinsp;&thinsp;return(previousVal+currentVal);</code>", "<code>&thinsp;&thinsp;return previousVal+currentVal;</code>",
"<code>});</code>" "<code>});</code>"
], ],
"tests":[ "tests":[
@ -222,7 +223,7 @@
"", "",
"", "",
"// Only change code above this line.", "// Only change code above this line.",
"(function() {return(singleVal);})();" "(function() {return singleVal;})();"
], ],
"challengeType":1, "challengeType":1,
"type": "waypoint" "type": "waypoint"
@ -235,7 +236,7 @@
"filter is a useful method that can filter out values that don't match a certain criteria", "filter is a useful method that can filter out values that don't match a certain criteria",
"Let's remove all the values greater than five", "Let's remove all the values greater than five",
"<code>array = array.filter(function(val) {</code>", "<code>array = array.filter(function(val) {</code>",
"<code>&thinsp;&thinsp;return(val<4);</code>", "<code>&thinsp;&thinsp;return val <= 5;</code>",
"<code>});</code>" "<code>});</code>"
], ],
"tests":[ "tests":[
@ -250,7 +251,7 @@
"", "",
"", "",
" // Only change code above this line.", " // Only change code above this line.",
"(function() {return(array);})();" "(function() {return array;})();"
], ],
"challengeType":1, "challengeType":1,
"type": "waypoint" "type": "waypoint"
@ -277,7 +278,7 @@
"", "",
"", "",
" // Only change code above this line.", " // Only change code above this line.",
"(function() {return(array);})();" "(function() {return array;})();"
], ],
"challengeType":1, "challengeType":1,
"type": "waypoint" "type": "waypoint"
@ -301,7 +302,7 @@
"", "",
"", "",
" // Only change code above this line.", " // Only change code above this line.",
"(function() {return(array);})();" "(function() {return array;})();"
], ],
"challengeType": 1, "challengeType": 1,
"type": "waypoint" "type": "waypoint"
@ -328,7 +329,7 @@
"", "",
"", "",
"// Only change code above this line.", "// Only change code above this line.",
"(function() {return(array);})();" "(function() {return array;})();"
], ],
"challengeType": 1, "challengeType": 1,
"type": "waypoint" "type": "waypoint"
@ -353,7 +354,7 @@
"var array = string;", "var array = string;",
"", "",
"// Only change code above this line.", "// Only change code above this line.",
"(function() {return(array);})();" "(function() {return array;})();"
], ],
"challengeType":1, "challengeType":1,
"type": "waypoint" "type": "waypoint"
@ -377,7 +378,7 @@
"joinMe = joinMe;", "joinMe = joinMe;",
"", "",
"// Only change code above this line.", "// Only change code above this line.",
"(function() {return(joinMe);})();" "(function() {return joinMe;})();"
], ],
"challengeType":1, "challengeType":1,
"type": "waypoint" "type": "waypoint"

2
get-emails.js
View File

@ -9,7 +9,7 @@ MongoClient.connect(secrets.db, function(err, database) {
throw err; throw err;
} }
database.collection('users').aggregate([ database.collection('user').aggregate([
{$match: { 'email': { $exists: true } } }, {$match: { 'email': { $exists: true } } },
{$match: { 'email': { $ne: '' } } }, {$match: { 'email': { $ne: '' } } },
{$match: { 'email': { $ne: null } } }, {$match: { 'email': { $ne: null } } },

104
under-construction/json-apis-and-ajax.json
View File

@ -7,6 +7,10 @@
"title": "Trigger on click Events with jQuery", "title": "Trigger on click Events with jQuery",
"difficulty": 3.19, "difficulty": 3.19,
"description": [ "description": [
"With jQuery we are able to get data from APIs via Ajax",
"This data normally comes in the form of JSON",
"Let's get the <code>Get Message</code> button to set the text of a div",
"We will later use this to display the result of out API request",
"<code>$(\"#getMessage\").on(\"click\", function(){</code>", "<code>$(\"#getMessage\").on(\"click\", function(){</code>",
"<code>&thinsp;&thinsp;$(\".message\").html(\"Here is the message\");</code>", "<code>&thinsp;&thinsp;$(\".message\").html(\"Here is the message\");</code>",
"<code>});</code>" "<code>});</code>"
@ -48,10 +52,60 @@
"challengeType": 0, "challengeType": 0,
"type": "waypoint" "type": "waypoint"
}, },
{
"id": "bad87fee1348bd9aebc08726",
"title": "Learn JSON Syntax",
"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": [
"assert(typeof data != \"undefined\", \"Whoops! It looks like you deleted the <code>data</code> variable!\");",
"assert(typeof getAnId != \"undefined\", \"Whoops! It looks like you deleted the <code>getAnId</code> function!\");",
"assert(data[0]['id'] === getAnId(), \"The duntion getFirstId should return the id of the first element in the array\");"
],
"challengeSeed": [
"fccss",
"var data = [",
" {",
" \"id\": 0,",
" \"imageLink\": \"http://rs611.pbsrc.com/albums/tt194/allypopper423/Funny-Cat-Green-Avacado.jpg~c200\",",
" \"codeNames\": [",
" \"Juggernaut\",",
" \"Mrs. Wallace\",",
" \"Buttercup\"",
" ]",
" },",
" {",
" \"id\": 1,",
" \"imageLink\": \"http://cdn.grumpycats.com/wp-content/uploads/2012/09/GC-Gravatar-copy.png\",",
" \"codeNames\": [",
" \"Oscar\",",
" \"Scrooge\",",
" \"Tyrion\"",
" ]",
" },",
" {",
" \"id\": 2,",
" \"imageLink\": \"http://www.kittenspet.com/wp-content/uploads/2012/08/cat_with_funny_face_3-200x200.jpg\",",
" \"codeNames\": [",
" \"The Doctor\",",
" \"Loki\",",
" \"Joker\"",
" ]",
" }",
"]",
"function getAnId(){",
" return();",
"}",
"fcces"
],
"challengeType": 0,
"type": "waypoint"
},
{ {
"id": "bad87fee1348bd9aeca08826", "id": "bad87fee1348bd9aeca08826",
"title": "Learn how JSON works", "title": "Displaying JSON data in HTML",
"difficulty": 3.19, "difficulty": 3.19,
"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.",
@ -272,52 +326,6 @@
"type": "waypoint" "type": "waypoint"
}, },
{
"id": "bad87fee1348bd9aebc08726",
"title": "Learn how JSON Works",
"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": [
"[",
" {",
" \"id\": 0,",
" \"imageLink\": \"http://rs611.pbsrc.com/albums/tt194/allypopper423/Funny-Cat-Green-Avacado.jpg~c200\",",
" \"codeNames\": [",
" \"Juggernaut\",",
" \"Mrs. Wallace\",",
" \"Buttercup\"",
" ]",
" },",
" {",
" \"id\": 1,",
" \"imageLink\": \"http://cdn.grumpycats.com/wp-content/uploads/2012/09/GC-Gravatar-copy.png\",",
" \"codeNames\": [",
" \"Oscar\",",
" \"Scrooge\",",
" \"Tyrion\"",
" ]",
" },",
" {",
" \"id\": 2,",
" \"imageLink\": \"http://www.kittenspet.com/wp-content/uploads/2012/08/cat_with_funny_face_3-200x200.jpg\",",
" \"codeNames\": [",
" \"The Doctor\",",
" \"Loki\",",
" \"Joker\"",
" ]",
" }",
"]"
],
"challengeType": 0,
"type": "waypoint"
},
{ {
"id": "bad87fee1348bd9aebc08826", "id": "bad87fee1348bd9aebc08826",
"title": "Get Data from an URL Using jQuery", "title": "Get Data from an URL Using jQuery",