Merge remote-tracking branch 'upstream/staging' into patch-3

This commit is contained in:
Abhisek Pattnaik
2015-08-30 13:49:04 +05:30
11 changed files with 192 additions and 178 deletions

View File

@ -569,7 +569,8 @@
"title": "Where art thou", "title": "Where art thou",
"difficulty": "1.55", "difficulty": "1.55",
"description": [ "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).", "Make a function that looks through an array (first argument) and returns an array of all objects that have equivalent property and value pair (second argument).",
"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 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." "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": [
@ -583,7 +584,9 @@
], ],
"tests": [ "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([{ 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 }, { '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": [ "MDNlinks": [
"Global Object", "Global Object",

View File

@ -13,7 +13,8 @@
"<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');",
@ -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;}/**/})(), 'myName 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,8 +90,8 @@
"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;}})(), 'myFirstName 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);}})(), '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;}})(), 'myLastName should be a string with a least one character in it');"
], ],
"challengeSeed": [ "challengeSeed": [
"// name = \"Alan Turing\";", "// name = \"Alan 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
@ -116,8 +117,8 @@
"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;}})(), 'lastNameLength 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;",
@ -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 firstLetterOfLastName should be a L');"
], ],
"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 lastName should be a \"v\"');"
], ],
"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
@ -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
@ -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)){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,7 +329,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(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.",
@ -336,7 +337,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('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(/\\//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
@ -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
@ -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 myArray');"
], ],
"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;}})(), 'myArray 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 myArray');"
], ],
"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
@ -543,8 +544,8 @@
"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 myArray."
], ],
"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), 'myArray 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), 'myArray 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
@ -575,7 +576,7 @@
"Take the myArray array and <code>push()</code> this value to the end of it: <code>[\"dog\", 3]</code>." "Take the myArray 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), 'myArray should only have the first two values left([\"John\", 23, [\"dog\", 3]])');"
], ],
"challengeSeed": [ "challengeSeed": [
"var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];", "var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
@ -592,7 +593,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('myArray = ' + JSON.stringify(z));})(myArray);" "(function(z){return 'myArray = ' + JSON.stringify(z);})(myArray);"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -606,8 +607,8 @@
"Take the myArray array and <code>shift()</code> the first value off of it." "Take the myArray array and <code>shift()</code> the first value off of it."
], ],
"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), 'myArray 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), 'myRemoved should contain \"John\"');"
], ],
"challengeSeed": [ "challengeSeed": [
"var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];", "var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
@ -623,7 +624,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.",
"(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
@ -637,7 +638,7 @@
"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(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]])');"
], ],
"challengeSeed": [ "challengeSeed": [
"var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];", "var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
@ -655,7 +656,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));})(myArray);" "(function(y, z){return 'myArray = ' + JSON.stringify(y);})(myArray);"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -668,13 +669,13 @@
"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 <code>functions</code>.",
"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.", "We can \"call\" our function like this: <code>functionName();</code>, and it will run and return its <code>return</code> value to us.",
"Create and call a function called <code>myFunction</code>." "Create and call a function called <code>myFunction</code> that returns the sum of a and b."
], ],
"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\" && 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');"
], ],
"challengeSeed":[ "challengeSeed":[
"var a = 4;", "var a = 4;",
@ -696,7 +697,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 +718,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 represents 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 myDog which contains the properties 'name' (String), 'legs' (Number), 'tails' (Number) and 'friends' (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), 'myDog should contain the property name and it should be a string');",
"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), 'myDog should contain the property legs 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), '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), 'myDog should contain the property tails and it should be a number');",
"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), 'myDog should contain the property friends and it should be an array');"
], ],
"challengeSeed":[ "challengeSeed":[
"//var ourDog = {", "//var ourDog = {",
@ -745,7 +746,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
@ -794,7 +795,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
@ -843,7 +844,7 @@
"<code>&thinsp;&thinsp;ourArray.push(i);</code>", "<code>&thinsp;&thinsp;ourArray.push(i);</code>",
"<code>&thinsp;&thinsp;i++;</code>", "<code>&thinsp;&thinsp;i++;</code>",
"<code>}</code>", "<code>}</code>",
"Let's try getting a for 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 while loop for this.');",
@ -877,13 +878,13 @@
" //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,16 +895,16 @@
"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 a 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 myFunction 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 but 10 to make it a number that\\'s greater then zero');", "assert(!(''+myFunction()).match(/\\./g), 'You should have multiplied the result of Math.random by 10 to make it a number that\\'s greater than zero');",
"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 Math.floor to remove the decimal part of the number');"
], ],
"challengeSeed":[ "challengeSeed":[
@ -912,13 +913,13 @@
"", "",
" // 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
@ -935,7 +936,7 @@
"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((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,12 +945,12 @@
" // 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
@ -963,16 +964,16 @@
"if statements require some sort of boolean condition to evaluate.", "if statements require some sort of boolean condition to evaluate.",
"Example:", "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>}</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 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."
], ],
"tests":[ "tests":[
"assert((function(){if(myFunction() === \"heads\" || myFunction() === \"tails\"){return(true);}else{return(false);}})(), 'myFunction should either return heads or tails');", "assert((function(){if(myFunction() === \"heads\" || myFunction() === \"tails\"){return true;}else{return false;}})(), 'myFunction should either return heads or tails');",
"assert(editor.getValue().match(/if/g).length >= 3, 'You should have created a new if statement');", "assert(editor.getValue().match(/if/g).length >= 3, 'You should have created a new if statement');",
"assert(editor.getValue().match(/else/g).length >= 2, 'You should have created a new else statement');" "assert(editor.getValue().match(/else/g).length >= 2, 'You should have created a new else statement');"
], ],
@ -988,7 +989,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(){return(myFunction());})();" "(function(){return myFunction();})();"
], ],
"type": "waypoint", "type": "waypoint",
"challengeType": 1 "challengeType": 1
@ -1021,8 +1022,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
@ -1039,7 +1040,7 @@
], ],
"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 testString');",
"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 /\\\\d+/gi to find the numbers in the testString');"
], ],
"challengeSeed":[ "challengeSeed":[
"var test = (function() {", "var test = (function() {",
@ -1051,8 +1052,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
@ -1069,7 +1070,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 /\\\\s+/gi to find the spaces in the <code>testString</code>.');"
], ],
"challengeSeed":[ "challengeSeed":[
"var test = (function(){", "var test = (function(){",
@ -1081,8 +1082,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
@ -1097,7 +1098,7 @@
], ],
"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(){",
@ -1109,8 +1110,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
@ -1130,7 +1131,7 @@
"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",
@ -1153,7 +1154,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(){",
@ -1277,14 +1278,14 @@
"Now that our slots will each generate random numbers, we need to check whether they've all returned the same number.", "Now that our slots will each generate random numbers, we need to check whether they've all returned the same number.",
"If they have, we should notify our user that they've won.", "If they have, we should notify our user that they've won.",
"Otherwise, we should return <code>null</code>, which is a JavaScript data structure that means nothing.", "Otherwise, we should return <code>null</code>, which is a JavaScript data structure that means nothing.",
"If all three numbers match, we should change the value of win to the number that we have three of or leave it as null.", "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 null.')"
], ],
"challengeSeed":[ "challengeSeed":[
"fccss", "fccss",
@ -1313,7 +1314,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(){",
@ -1442,8 +1443,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((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')"
], ],
"challengeSeed":[ "challengeSeed":[
"fccss", "fccss",
@ -1468,7 +1469,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){",
@ -1477,7 +1478,7 @@
" $(\".logger\").append(\" \" + slotThree);", " $(\".logger\").append(\" \" + slotThree);",
" }", " }",
" ", " ",
" return([slotOne, slotTwo, slotThree]);", " return [slotOne, slotTwo, slotThree];",
" }", " }",
"", "",
" $(document).ready(function(){", " $(document).ready(function(){",
@ -1635,7 +1636,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){",
@ -1644,7 +1645,7 @@
" $('.logger').append(' ' + slotThree);", " $('.logger').append(' ' + slotThree);",
" }", " }",
" ", " ",
" return([slotOne, slotTwo, slotThree]);", " return [slotOne, slotTwo, slotThree];",
" }", " }",
"", "",
" $(document).ready(function(){", " $(document).ready(function(){",

View File

@ -45,6 +45,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.",

View File

@ -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>')"
@ -347,7 +347,7 @@
"description": [ "description": [
"Normally, your <code>button</code> elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.", "Normally, your <code>button</code> elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.",
"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=\"https://www.evernote.com/l/AHTFU358y71AV6mokPeuTEgrZVdUJ4A8v3AB/image.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.'>",
"Note that these buttons still need the <code>btn</code> class.", "Note that these buttons still need the <code>btn</code> class.",
"Add Bootstrap's <code>btn-block</code> class to your Bootstrap button." "Add Bootstrap's <code>btn-block</code> class to your Bootstrap button."
], ],
@ -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.')"
@ -700,7 +700,7 @@
"description": [ "description": [
"Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.", "Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
"Here's a diagram of how Bootstrap's 12-column grid layout works:", "Here's a diagram of how Bootstrap's 12-column grid layout works:",
"<a href=\"https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png\" target=\"_blank\"><img class=\"img-responsive\" src=\"https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png\"></a>", "<a href=\"http://i.imgur.com/FaYuui8.png\" target=\"_blank\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.", "Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.", "In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
"Put the <code>Like</code>, <code>Info</code> and <code>Delete</code> buttons side-by-side by nesting all three of them within one <code>&#60;div class=\"row\"&#62;</code> element, then each of them within a <code>&#60;div class=\"col-xs-4\"&#62;</code> element.", "Put the <code>Like</code>, <code>Info</code> and <code>Delete</code> buttons side-by-side by nesting all three of them within one <code>&#60;div class=\"row\"&#62;</code> element, then each of them within a <code>&#60;div class=\"col-xs-4\"&#62;</code> element.",
@ -893,9 +893,9 @@
"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 grow 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=\"https://www.evernote.com/l/AHTFU358y71AV6mokPeuTEgrZVdUJ4A8v3AB/image.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.",
"Nest the word \"love\" in your \"Things cats love\" element below within a <code>span</code> element. Then give that <code>span</code> the class <code>text-danger</code> to make the text red.", "Nest the word \"love\" in your \"Things cats love\" element below within a <code>span</code> element. Then give that <code>span</code> the class <code>text-danger</code> to make the text red.",
"Here's how you would do this with the \"Top 3 things cats hate\" element: <code>&#60;p&#62;Top 3 things cats &#60;span class = \"text-danger\"&#62;hate&#60;/span&#62;&#60;/p&#62;</code>" "Here's how you would do this with the \"Top 3 things cats hate\" element: <code>&#60;p&#62;Top 3 things cats &#60;span class = \"text-danger\"&#62;hate&#60;/span&#62;&#60;/p&#62;</code>"
@ -997,7 +997,7 @@
"We will make a simple heading for our Cat Photo App by putting them in the same row.", "We will make a simple heading for our Cat Photo App by putting them in the same row.",
"Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.", "Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
"Here's a diagram of how Bootstrap's 12-column grid layout works:", "Here's a diagram of how Bootstrap's 12-column grid layout works:",
"<a href=\"https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png\" target=\"_blank\"><img class=\"img-responsive\" src=\"https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png\"></a>", "<a href=\"http://i.imgur.com/FaYuui8.png\" target=\"_blank\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.", "Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.", "In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
"Nest your first image and your <code>h2</code> element within a single <code>&#60;div class=\"row\"&#62;</code> element. Nest your <code>h2</code> text within a <code>&#60;div class=\"col-xs-8\"&#62;</code> and your image in a <code>&#60;div class=\"col-xs-4\"&#62;</code> so that they are on the same line.", "Nest your first image and your <code>h2</code> element within a single <code>&#60;div class=\"row\"&#62;</code> element. Nest your <code>h2</code> text within a <code>&#60;div class=\"col-xs-8\"&#62;</code> and your image in a <code>&#60;div class=\"col-xs-4\"&#62;</code> so that they are on the same line.",
@ -1532,7 +1532,7 @@
"difficulty": 2.17, "difficulty": 2.17,
"description": [ "description": [
"Now let's get your form <code>input</code> and your submission <code>button</code> on the same line. We'll do this the same way we have previously: by using a <code>div</code> element with the class <code>row</code>, and other <code>div</code> elements within it using the <code>col-xs-*</code> class.", "Now let's get your form <code>input</code> and your submission <code>button</code> on the same line. We'll do this the same way we have previously: by using a <code>div</code> element with the class <code>row</code>, and other <code>div</code> elements within it using the <code>col-xs-*</code> class.",
"Nest both your form's text <code>input</code> and submit <code>button</code> within a <code>div</code> with the class <code>row</code>. Nest your form's text <code>input</code> within a div with the class of \"col-xs-7\". Nest your form's submit <code>button</code> in a <code>div</code> with the class <code>col-xs-5</code>.", "Nest both your form's text <code>input</code> and submit <code>button</code> within a <code>div</code> with the class <code>row</code>. Nest your form's text <code>input</code> within a div with the class of <code>col-xs-7</code>. Nest your form's submit <code>button</code> in a <code>div</code> with the class <code>col-xs-5</code>.",
"This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design!" "This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design!"
], ],
"tests": [ "tests": [
@ -1770,7 +1770,7 @@
], ],
"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\").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\").children(\"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.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(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": [

View File

@ -16,7 +16,7 @@
"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 button. Then click into your new workspace.",
"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.", "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.",
"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>.",

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>.",
@ -428,8 +428,12 @@
"description": [ "description": [
"Create a CSS class called <code>red-text</code> and apply it to your <code>h2</code> element.", "Create a CSS class called <code>red-text</code> and apply it to your <code>h2</code> element.",
"Classes are reusable styles that can be added to HTML elements.", "Classes are reusable styles that can be added to HTML elements.",
"Here's the anatomy of a CSS class:", "Here's an example CSS class declaration:",
"<img class=\"img-responsive\" alt=\"a diagram of how style tags are composed, which is also described in detail on the following lines.\" src=\"https://www.evernote.com/l/AHSCzZV0l_dDLrqD8r9JsHaBWfEzdN0OpRwB/image.png\">", "<code>&#60;style&#62;</code>",
"<code>&thinsp;&thinsp;.blue-text {</code>",
"<code>&thinsp;&thinsp;&thinsp;&thinsp;color: blue;</code>",
"<code>&thinsp;&thinsp;}</code>",
"<code>&#60;/style&#62;</code>",
"You can see that we've created a CSS class called <code>blue-text</code> within the <code>&#60;style&#62;</code> tag.", "You can see that we've created a CSS class called <code>blue-text</code> within the <code>&#60;style&#62;</code> tag.",
"You can apply a class to an HTML element like this: <code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;/h2&#62;</code>.", "You can apply a class to an HTML element like this: <code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;/h2&#62;</code>.",
"Note that in your CSS <code>style</code> element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.", "Note that in your CSS <code>style</code> element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.",
@ -540,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": [
@ -591,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": [
@ -641,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.')",
@ -750,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": [
@ -804,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."
], ],
@ -860,7 +864,7 @@
"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."
], ],
@ -923,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": [
@ -1056,13 +1060,13 @@
"description": [ "description": [
"<code>a</code> elements, also known as <code>anchor</code> elements, are used to link to content outside of the current page.", "<code>a</code> elements, also known as <code>anchor</code> elements, are used to link to content outside of the current page.",
"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=\"https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.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": [
@ -1114,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>."
@ -1126,16 +1130,16 @@
"difficulty": 1.23, "difficulty": 1.23,
"description": [ "description": [
"Again, here's a diagram of an <code>a</code> element for your reference:", "Again, here's a diagram of an <code>a</code> element for your reference:",
"<img class=\"img-responsive\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.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 <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).length > 0, '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.')"
@ -1170,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\">",
"", "",
@ -1238,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\">",
"", "",
@ -2351,7 +2355,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."
], ],
@ -2474,7 +2478,7 @@
" width: 100px;", " width: 100px;",
" }", " }",
" .gray-background {", " .gray-background {",
" background-color: gray", " background-color: gray;",
" }", " }",
"</style>", "</style>",
"", "",
@ -2623,7 +2627,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.",
@ -2835,7 +2839,7 @@
"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": [
@ -2908,7 +2912,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>.')",
@ -2977,7 +2981,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."
], ],
@ -3047,7 +3051,7 @@
"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 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."
], ],
@ -3159,8 +3163,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.')"
], ],
@ -3194,7 +3198,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>."
], ],
@ -3281,12 +3285,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": [

View File

@ -13,7 +13,7 @@
], ],
"challengeSeed": [ "challengeSeed": [
"function sumAll(arr) {", "function sumAll(arr) {",
" return(1);", " return 1;",
"}", "}",
"", "",
"sumAll([1, 4]);" "sumAll([1, 4]);"

View File

@ -138,9 +138,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.",

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), 'Add <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
"assert(editor.match(/\\n\\s+?\\}\\);/g), 'Close your <code>$(document).ready(function() {</code> function with <code>});</code>.')" "assert(editor.match(/\\n*?\\s*?\\}\\s*?\\);/g), 'Close your <code>$(document).ready(function() {</code> function with <code>});</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.')",
@ -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>\\}&#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": [
@ -363,7 +364,7 @@
"Select <code>target1</code> and change its color to red.", "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."
], ],
"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 +416,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 +465,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.')",
@ -617,7 +619,7 @@
"title": "Target the Parent of an Element Using jQuery", "title": "Target the Parent of an Element Using jQuery",
"difficulty": 3.13, "difficulty": 3.13,
"description": [ "description": [
"Every HTML elements 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.", "Give the parent of the <code>#target1</code> element background-color of red.",
@ -786,7 +788,7 @@
"difficulty": 3.16, "difficulty": 3.16,
"description": [ "description": [
"You can also target all the even-numbered elements.", "You can also target all the even-numbered elements.",
"Here's how you would target all the odd-numbered elements with class <code>target</code> and give them classes: <code>$('.target:odd').addClass('animated shake');</code>", "Here's how you would target all the odd-numbered elements with class <code>target</code> and give them classes: <code>$(\".target:odd\").addClass(\"animated shake\");</code>",
"Try selecting all the even-numbered elements - that is, what your browser will consider even-numbered elements - and giving them the classes of <code>animated</code> and <code>shake</code>." "Try selecting all the even-numbered elements - that is, what your browser will consider even-numbered elements - and giving them the classes of <code>animated</code> and <code>shake</code>."
], ],
"tests": [ "tests": [

View File

@ -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",
@ -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"
@ -207,7 +208,7 @@
"description":[ "description":[
"Reduce can be useful for condensing and array or numbers into one value.", "Reduce can be useful for condensing and 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<4;</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"

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 } } },