diff --git a/public/json/cats.json b/public/json/cats.json index 209e8ae685..84d9d1b243 100644 --- a/public/json/cats.json +++ b/public/json/cats.json @@ -1,7 +1,7 @@ [ { "id": 0, - "imageLink": "http://rs611.pbsrc.com/albums/tt194/allypopper423/Funny-Cat-Green-Avacado.jpg~c200", + "imageLink": "https://s3.amazonaws.com/freecodecamp/funny-cat.jpg", "codeNames": [ "Juggernaut", "Mrs. Wallace", @@ -10,7 +10,7 @@ }, { "id": 1, - "imageLink": "http://cdn.grumpycats.com/wp-content/uploads/2012/09/GC-Gravatar-copy.png", + "imageLink": "https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg", "codeNames": [ "Oscar", "Scrooge", @@ -19,7 +19,7 @@ }, { "id": 2, - "imageLink": "http://www.kittenspet.com/wp-content/uploads/2012/08/cat_with_funny_face_3-200x200.jpg", + "imageLink": "https://s3.amazonaws.com/freecodecamp/mischievous-cat.jpg", "codeNames": [ "The Doctor", "Loki", diff --git a/seed/challenges/basic-javascript.json b/seed/challenges/basic-javascript.json index 68646b02e4..dc6b2427f1 100644 --- a/seed/challenges/basic-javascript.json +++ b/seed/challenges/basic-javascript.json @@ -38,7 +38,7 @@ "For now let's modify our welcomeToBooleansfunction so that it will return trueinstead of falsewhen the run button is clicked" ], "tests": [ - "assert(typeof(welcomeToBooleans())=='boolean', 'The value returned by welcomeToBooleans() should be a boolean value. (true of false)');", + "assert(typeof(welcomeToBooleans())==\"boolean\", 'The value returned by welcomeToBooleans() should be a boolean value. (true of false)');", "assert(welcomeToBooleans() == true, 'The value returned by welcomeToBooleans() should be true');" ], "challengeSeed": [ @@ -65,7 +65,7 @@ "Look at the ourName example if you get stuck." ], "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": [ "// var ourName = \"Free Code Camp\";", @@ -74,7 +74,7 @@ "// We use this to show you the value of your variable in your output box.", "// We'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", "challengeType": 1 @@ -89,8 +89,8 @@ "You can assign these variables to be equal to your first and last names respectively." ], "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(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(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');" ], "challengeSeed": [ "// ourName = \"Free Code Camp\";", @@ -101,7 +101,7 @@ "// You can ignore this.", "// We use this to show you the value of your variable in your output box.", "// We'll learn about functions soon.", - "if(typeof(myFirstName) !== 'undefined' && typeof(myLastName) !== 'undefined'){(function(y,z){return(y + ', ' + z);})(myFirstName, myLastName);}" + "if(typeof(myFirstName) !== \"undefined\" && typeof(myLastName) !== \"undefined\"){(function(y,z){return(y + ', ' + z);})(myFirstName, myLastName);}" ], "type": "waypoint", "challengeType": 1 @@ -115,7 +115,7 @@ "For example, if we created a variable var firstName = \"Julie\", we could find out how long the string \"Julie\" is by using the firstName.length property." ], "tests": [ - "assert((function(){if(typeof(lastNameLength) != 'undefined' && typeof(lastNameLength) == 'number' && lastNameLength == 4){return(true);}else{return(false);}})(), 'lastNameLength should be equal to four')", + "assert((function(){if(typeof(lastNameLength) != \"undefined\" && typeof(lastNameLength) == \"number\" && lastNameLength == 4){return(true);}else{return(false);}})(), 'lastNameLength should be equal to four')", "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 lastName by using .length like this: lastName.length');" ], "challengeSeed": [ @@ -134,7 +134,7 @@ "// You can ignore this.", "// We use this to show you the value of your variable in your output box.", "// We'll learn about functions soon.", - "if(typeof(lastNameLength) != 'undefined'){(function(v){return(v);})(lastNameLength);}" + "if(typeof(lastNameLength) != \"undefined\"){(function(v){return(v);})(lastNameLength);}" ], "type": "waypoint", "challengeType": 1 @@ -151,7 +151,7 @@ "Try looking at the firstLetterOfFirstName variable declaration if you get stuck." ], "tests": [ - "assert((function(){if(typeof(firstLetterOfLastName) != 'undefined' && editor.getValue().match(/\\[0\\]/gi) && typeof(firstLetterOfLastName) == 'string' && firstLetterOfLastName == 'C'){return(true);}else{return(false);}})(), 'The first letter of firstLetterOfLastName should be a C');" + "assert((function(){if(typeof(firstLetterOfLastName) != \"undefined\" && editor.getValue().match(/\\[0\\]/gi) && typeof(firstLetterOfLastName) == \"string\" && firstLetterOfLastName == \"C\"){return(true);}else{return(false);}})(), 'The first letter of firstLetterOfLastName should be a C');" ], "challengeSeed": [ "var firstLetterOfLastName = \"\"", @@ -185,7 +185,7 @@ "Try looking at the secondLetterOfFirstName variable declaration if you get stuck." ], "tests": [ - "assert(thirdLetterOfLastName == 'e', 'The third last letter of lastName should be an e');" + "assert(thirdLetterOfLastName == \"e\", 'The third last letter of lastName should be an e');" ], "challengeSeed": [ "var firstName = \"Madeline\";", @@ -217,7 +217,7 @@ "Try looking at the lastLetterOfLastName variable declaration if you get stuck." ], "tests": [ - "assert(lastLetterOfLastName == 'n', 'lastLetterOfLastName should be n');", + "assert(lastLetterOfLastName == \"n\", 'lastLetterOfLastName should be n');", "assert(editor.getValue().match(/\\.length/g), 'You have to use .length to get the last letter');" ], "challengeSeed": [ @@ -247,7 +247,7 @@ "Try looking at the lastLetterOfLastName variable declaration if you get stuck." ], "tests": [ - "assert(secondToLastLetterOfLastName == 'e', 'secondToLastLetterOfLastName should be e');", + "assert(secondToLastLetterOfLastName == \"e\", 'secondToLastLetterOfLastName should be e');", "assert(editor.getValue().match(/\\.length/g), 'You have to use .length to get the third last letter');" ], "challengeSeed": [ @@ -366,7 +366,7 @@ "Let's create a variable myDecimal and give it a decimal value." ], "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": [ "//var ourDecimal = 5.7", @@ -375,7 +375,7 @@ "", "", "", - "(function(){if(typeof(myDecimal) != 'undefined'){return(myDecimal);}})();" + "(function(){if(typeof(myDecimal) != \"undefined\"){return(myDecimal);}})();" ], "type": "waypoint", "challengeType": 1 @@ -414,12 +414,12 @@ "" ], "tests": [ - "assert(typeof(myArray) == 'object', 'myArray should be an array');", - "assert(typeof(myArray[0]) !== 'undefined' && typeof(myArray[0]) == 'string', 'The fist item in myArray should be a string');", - "assert(typeof(myArray[1]) !== 'undefined' && typeof(myArray[1]) == 'number', 'The second item in myArray should be a number');" + "assert(typeof(myArray) == \"object\", 'myArray should be an array');", + "assert(typeof(myArray[0]) !== \"undefined\" && typeof(myArray[0]) == \"string\", 'The fist item in myArray should be a string');", + "assert(typeof(myArray[1]) !== \"undefined\" && typeof(myArray[1]) == \"number\", 'The second item in myArray should be a number');" ], "challengeSeed": [ - "//var array = ['John', 23];", + "//var array = [\"John\", 23];", "", "var myArray = [];", "", @@ -438,13 +438,13 @@ "Let's now go create a nested array called myArray" ], "tests":[ - "assert((function(){if(typeof(myArray) !== 'undefined' && typeof(myArray) === 'object' && typeof(myArray[0]) !== 'undefined' && typeof(myArray[0]) === 'object' && editor.getValue().match(/\\[\\[/g).length >= 1 && editor.getValue().match(/\\]\\]/g).length >= 1){return(true);}else{return(false);}})(), 'myArray should contain at least one array');" + "assert((function(){if(typeof(myArray) !== \"undefined\" && typeof(myArray) === \"object\" && typeof(myArray[0]) !== \"undefined\" && typeof(myArray[0]) === \"object\" && editor.getValue().match(/\\[\\[/g).length >= 1 && editor.getValue().match(/\\]\\]/g).length >= 1){return(true);}else{return(false);}})(), 'myArray should contain at least one array');" ], "challengeSeed":[ "var myArray = [];", "", "", - "if(typeof(myArray) !== 'undefined'){(function(){return(myArray);})();}" + "if(typeof(myArray) !== \"undefined\"){(function(){return(myArray);})();}" ], "type": "waypoint", "challengeType": 1 @@ -464,7 +464,7 @@ "Create a var called data and set it to equal the first value of myArray" ], "tests":[ - "assert((function(){if(typeof(myArray) != 'undefined' && typeof(data) != 'undefined' && myArray[0] == data){return(true);}else{return(false);}})(), 'the variable data should equal the first value of myArray');" + "assert((function(){if(typeof(myArray) != \"undefined\" && typeof(data) != \"undefined\" && myArray[0] == data){return(true);}else{return(false);}})(), 'the variable data should equal the first value of myArray');" ], "challengeSeed":[ "//var ourArray = [1,2,3]", @@ -474,7 +474,7 @@ "", "", "", - "if(typeof(myArray) != 'undefined' && typeof(data) != 'undefined'){(function(y,z){return('myArray = ' + JSON.stringify(y) + ', data = ' + JSON.stringify(z));})(myArray, data);}" + "if(typeof(myArray) != \"undefined\" && typeof(data) != \"undefined\"){(function(y,z){return('myArray = ' + JSON.stringify(y) + ', data = ' + JSON.stringify(z));})(myArray, data);}" ], "type": "waypoint", "challengeType": 1 @@ -494,7 +494,7 @@ "" ], "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 >= 2 && editor.getValue().match(/=/g).length >= 2){return(true);}else{return(false);}})(), 'You should be using indexes to modify the values in myArray');" ], "challengeSeed":[ @@ -506,7 +506,7 @@ "", "", "", - "if(typeof(myArray) != 'undefined'){(function(){return(myArray);})();}" + "if(typeof(myArray) != \"undefined\"){(function(){return(myArray);})();}" ], "type": "waypoint", "challengeType": 1 @@ -523,8 +523,8 @@ "Let's try .pop()now" ], "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] == '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] == \"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)');" ], "challengeSeed": [ "//var numbers = [1,2,3];", @@ -533,8 +533,8 @@ "//console.log(numbers); //Gives [1,2]", "//console.log(removed); //Gives 3", "", - "var myArray = ['John', 23, ['cat', 2]];", - "var removed = myArray;//This should be ['cat', 2] and myArray should now be ['John', 23]", + "var myArray = [\"John\", 23, [\"cat\", 2]];", + "var removed = myArray;//This should be [\"cat\", 2] and myArray should now be [\"John\", 23]", "", "", "(function(y, z){return('myArray = ' + JSON.stringify(y) + ' & removed = ' + JSON.stringify(z));})(myArray, removed);" @@ -548,15 +548,15 @@ "difficulty": "9.9818", "description": [ "Now that we've learned how to popthings from the end of the array, we need to learn how to pushstuff back to the end", - "Let's take the code we had last time and pushthis value to the end: ['dog', 3] " + "Let's take the code we had last time and pushthis value to the end: [\"dog\", 3] " ], "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": [ - "var myArray = ['John', 23, ['cat', 2]];", + "var myArray = [\"John\", 23, [\"cat\", 2]];", "var removed = myArray.pop();", - "//Add a ['dog', 3] to the end of myArray using push", + "//Add a [\"dog\", 3] to the end of myArray using push", "", "", "(function(z){return('myArray = ' + JSON.stringify(z));})(myArray);" @@ -574,12 +574,12 @@ "Let's try .shift()now" ], "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 === 'John' && typeof(removed) === 'string'){return(true);}else{return(false);}})(removed), 'Removed should contain \"John\"');" + "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 === \"John\" && typeof(removed) === \"string\"){return(true);}else{return(false);}})(removed), 'Removed should contain \"John\"');" ], "challengeSeed": [ - "var myArray = ['John', 23, ['dog', 3]];", - "var removed = myArray;//This should be ['John'] and myArray should now be [23, ['dog', 3]]", + "var myArray = [\"John\", 23, [\"dog\", 3]];", + "var removed = myArray;//This should be [\"John\"] and myArray should now be [23, [\"dog\", 3]]", "", "", "(function(y, z){return('myArray = ' + JSON.stringify(y) + ' & removed = ' + JSON.stringify(z));})(myArray, removed);" @@ -593,15 +593,15 @@ "difficulty": "9.9818", "description": [ "Now that we've learned how to shiftthings from the start of the array, we need to learn how to unshiftstuff back to the start", - "Let's take the code we had last time and unshiftthis value to the end: 'Paul' " + "Let's take the code we had last time and unshiftthis value to the end: \"Paul\" " ], "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": [ - "var myArray = ['John', 23, ['dog', 3]];", - "var removed = myArray.shift();//This should be 'John' and myArray should now be [23, ['dog', 3]]", - "//Add 'Paul' to the start of myArray", + "var myArray = [\"John\", 23, [\"dog\", 3]];", + "var removed = myArray.shift();//This should be \"John\" and myArray should now be [23, [\"dog\", 3]]", + "//Add \"Paul\" to the start of myArray", "", "", "(function(y, z){return('myArray = ' + JSON.stringify(y));})(myArray);" @@ -626,7 +626,7 @@ "Let's try creating and calling a function now called myFunction" ], "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":[ "var a = 4;", @@ -638,7 +638,7 @@ "", "", "//Don't modify this!", - "if(typeof(myFunction) != 'undefined'){", + "if(typeof(myFunction) != \"undefined\"){", "var f=myFunction(a,b);", "(function(){return(f);})();", "}" @@ -666,17 +666,17 @@ "Let's try to make an Object that represents a dog called myDog!" ], "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('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('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(\"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(\"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');" ], "challengeSeed":[ "//var ourDog = {", "// \"name\": \"Camper\"", "// \"legs\": 4", "// \"tails\": 1", - "// \"friends\": ['everything!']", + "// \"friends\": [\"everything!\"]", "//};", "", "/* add the name(string), legs(number), tails(number) and friends(array) properties to myDog.", @@ -719,7 +719,7 @@ "//Re-create myDog", "", "var myDog = {", - " \"name\": 'Camper',", + " \"name\": \"Camper\",", " \"legs\": 4,", " \"tails\": 1,", " \"friends\": []", @@ -835,7 +835,7 @@ "Let's have a go of Math.random() now be getting myFunction to return a random number" ], "tests":[ - "assert(typeof(myFunction()) === 'number', 'myFunction should return a random number');", + "assert(typeof(myFunction()) === \"number\", 'myFunction should return a random number');", "assert((myFunction()+''). match(/\\./g), 'The number returned by myFunction should be a decimal');", "assert(editor.getValue().match(/Math\\.random/g).length >= 2, 'You should be using Math.random to generate the random decimal number');" ], @@ -864,7 +864,7 @@ "Let's give this technique a go now" ], "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(!(''+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(editor.getValue().match(/Math.floor/g), 'You should use Math.floor to remove the decimal part of the number');" @@ -926,7 +926,7 @@ "Create an if else statement to return heads if the flip var is zero and to return tails if it's not" ], "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(/else/g).length >= 2, 'You should have created a new else statement');" ], @@ -1077,9 +1077,9 @@ "Math.floor(Math.random() * (5 - 1 + 1)) + 1; " ], "tests":[ - "assert(typeof(runSlots($('.slot'))[0]) == 'number', 'slotOne should be a random number');", - "assert(typeof(runSlots($('.slot'))[1]) == 'number', 'slotTwo should be a random number');", - "assert(typeof(runSlots($('.slot'))[2]) == 'number', 'slotThree should be a random number');", + "assert(typeof(runSlots($(\".slot\"))[0]) == \"number\", 'slotOne should be a random number');", + "assert(typeof(runSlots($(\".slot\"))[1]) == \"number\", 'slotTwo should be a random number');", + "assert(typeof(runSlots($(\".slot\"))[2]) == \"number\", 'slotThree should be a random number');", "assert((function(){if(editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?5\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1;/gi) !== null){return(editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?5\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1;/gi).length >= 3);}else{return(false);}})(), 'You should have used Math.floor(Math.random() * (5 - 1 + 1)) + 1; three times to generate your random numbers');" ], "challengeSeed":[ @@ -1089,7 +1089,7 @@ " var slotTwo;", " var slotThree;", " ", - " var images = ['http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens'];", + " var images = [\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\"];", " ", " /*Don't modify above here*/", " ", @@ -1097,48 +1097,48 @@ " ", " /*Don't modify below here*/", " ", - " $('.logger').html('');", - " $('.logger').html('Not A Win')", + " $(\".logger\").html(\"\");", + " $(\".logger\").html(\"Not A Win\")", " ", " if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){", - " $('.logger').html(slotOne + ' ' + slotTwo + ' ' + slotThree);", + " $(\".logger\").html(slotOne + \" \" + slotTwo + \" \" + slotThree);", " }", " return([slotOne, slotTwo, slotThree]);", " }", "", " $(document).ready(function(){", - " $('.go').click(function(){", + " $(\".go\").click(function(){", " runSlots();", " });", " });", "fcces", " ", "
", - "
", - "
", - " ", + "
", + "
", + " \"learn", "

FCC Slot Machine

", "
", - "
", - "
", + "
", + "
", " ", "
", - "
", + "
", " ", "
", - "
", + "
", " ", "
", "
", "
", - "
", - " ", "
", "
", - "
", - " ", + "
", + " ", "
", "
", "
", @@ -1242,62 +1242,62 @@ " var slotTwo;", " var slotThree;", " ", - " var images = ['http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens'];", + " var images = [\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\"];", " ", " slotOne = Math.floor(Math.random() * (5 - 1 + 1)) + 1;", " slotTwo = Math.floor(Math.random() * (5 - 1 + 1)) + 1;", " slotThree = Math.floor(Math.random() * (5 - 1 + 1)) + 1;", " ", - " $('.logger').html('');", - " $('.logger').html('Not A Win')", + " $(\".logger\").html(\"\");", + " $(\".logger\").html(\"Not A Win\")", " ", - " /*Don't modify above here*/", + " /*Don\"t modify above here*/", " ", " ", " ", - " /*Don't modify below here*/", + " /*Don\"t modify below here*/", " ", " if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){", - " $('.logger').html(slotOne);", - " $('.logger').append(' ' + slotTwo);", - " $('.logger').append(' ' + slotThree);", + " $(\".logger\").html(slotOne);", + " $(\".logger\").append(\" \" + slotTwo);", + " $(\".logger\").append(\" \" + slotThree);", " }", " return([slotOne, slotTwo, slotThree]);", " }", "", " $(document).ready(function(){", - " $('.go').click(function(){", + " $(\".go\").click(function(){", " runSlots();", " });", " });", "fcces", " ", "
", - "
", - "
", - " ", + "
", + "
", + " \"learn", "

FCC Slot Machine

", "
", - "
", - "
", + "
", + "
", " ", "
", - "
", + "
", " ", "
", - "
", + "
", " ", "
", "
", "
", - "
", - " ", "
", "
", - "
", - " ", + "
", + " ", "
", "
", "
", @@ -1384,15 +1384,15 @@ "difficulty":"9.990", "description":[ "Now we can detect a win let's get the slot machine to look like it works", - "We're going to use the jQuery selector $('.slot') to select all of the slots", + "We're going to use the jQuery selector $(\".slot\") to select all of the slots", "Once they are all selected we can use bracket notation to access each individual one like this", - "$($('.slot')[0]).html('')", + "$($(\".slot\")[0]).html(\"\")", "This will grab the the first slot so that we can add the numbers we generate to them", "Use the above selector to display each number in the corresponding slot" ], "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(){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, slotTwo and slotThree respectively');" + "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, slotTwo and slotThree respectively');" ], "challengeSeed":[ "fccss", @@ -1402,14 +1402,14 @@ " var slotThree;", " ", " //Placeholder", - " var images = ['http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens'];", + " var images = [\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\"];", " ", " slotOne = Math.floor(Math.random() * (5 - 1 + 1)) + 1;", " slotTwo = Math.floor(Math.random() * (5 - 1 + 1)) + 1;", " slotThree = Math.floor(Math.random() * (5 - 1 + 1)) + 1;", " ", - " $('.logger').html('');", - " $('.logger').html('Not A Win')", + " $(\".logger\").html(\"\");", + " $(\".logger\").html(\"Not A Win\")", " ", " /*Don't modify above here*/", " ", @@ -1422,47 +1422,47 @@ " }", " ", " if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){", - " $('.logger').html(slotOne);", - " $('.logger').append(' ' + slotTwo);", - " $('.logger').append(' ' + slotThree);", + " $(\".logger\").html(slotOne);", + " $(\".logger\").append(\" \" + slotTwo);", + " $(\".logger\").append(\" \" + slotThree);", " }", " ", " return([slotOne, slotTwo, slotThree]);", " }", "", " $(document).ready(function(){", - " $('.go').click(function(){", + " $(\".go\").click(function(){", " runSlots();", " });", " });", "fcces", " ", "
", - "
", - "
", - " ", + "
", + "
", + " \"learn", "

FCC Slot Machine

", "
", - "
", - "
", + "
", + "
", " ", "
", - "
", + "
", " ", "
", - "
", + "
", " ", "
", "
", "
", - "
", - " ", "
", "
", - "
", - " ", + "
", + " ", "
", "
", "
", diff --git a/seed/challenges/basic-ziplines.json b/seed/challenges/basic-ziplines.json index 01e655b2fb..7b7ca96c27 100644 --- a/seed/challenges/basic-ziplines.json +++ b/seed/challenges/basic-ziplines.json @@ -9,8 +9,6 @@ "challengeSeed": ["125658022"], "description": [ "Now you're ready to start our Zipline challenges. These front-end development challenges will give you many opportunities to apply the HTML, CSS, jQuery and JavaScript you've learned to build static (database-less) applications.", - "For many of these challenges, you will be using JSON data from external API endpoints, such as Twitch.tv and Twitter. Note that you don't need to have a database to use these data.", - "The easiest way to manipulate these data is with jQuery $.getJSON().", "Whatever you do, don't get discouraged! Remember to use Read-Search-Ask if you get stuck.", "We'll build these challenges using CodePen, a popular tool for creating, sharing, and discovering static web applications.", "Go to http://codepen.io and create an account.", diff --git a/seed/challenges/bootstrap.json b/seed/challenges/bootstrap.json index 707b39c684..7b4adc96c6 100644 --- a/seed/challenges/bootstrap.json +++ b/seed/challenges/bootstrap.json @@ -10,15 +10,15 @@ "Now let's go back to our Cat Photo App. This time, we'll style it using the popular Bootstrap responsive CSS framework.", "Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design.", "With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.", - "You can add Bootstrap to any app just by including it with <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/> at the top of your HTML. But we've gone ahead and automatically added it to your Cat Photo App for you.", + "You can add Bootstrap to any app just by including it with <link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\"/> at the top of your HTML. But we've gone ahead and automatically added it to your Cat Photo App for you.", "To get started, we should nest all of our HTML in a div element with the class \"container-fluid\"." ], "tests": [ - "assert($('div').hasClass('container-fluid'), 'Your div element should have the class \"container-fluid\"')", + "assert($(\"div\").hasClass(\"container-fluid\"), 'Your div element should have the class \"container-fluid\"')", "assert(editor.match(/<\\/div>/g) && editor.match(/
/g).length === editor.match(/
div elements has a closing tag.')" ], "challengeSeed": [ - "", + "", "", "", - "

CatPhotoApp

", + "

CatPhotoApp

", "", - "

Click here for cat photos.

", + "

Click here for cat photos.

", "", - "", + "", "", "

Things cats love:

", "
    ", @@ -64,13 +64,13 @@ "
  • other cats
    • ", "", "
    ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", "
    " ], "type": "waypoint", @@ -91,17 +91,17 @@ "title": "Make Images Mobile Responsive", "difficulty": 2.02, "description": [ - "First, Add a new image below the existing one. Set it's src attribute to \"http://bit.ly/fcc-kittens2\".", + "First, Add a new image below the existing one. Set it's src attribute to \"http://bit.ly/fcc-running-cats\".", "It would be great if this image could be exactly the width of our phone's screen.", "Fortunately, with Bootstrap, all we need to do is add the \"img-responsive\" class to your image. Do this, and the image should perfectly fit the width of your page." ], "tests": [ - "assert($('img').length > 1, 'You should have a total of two images.')", - "assert($('img').hasClass('img-responsive'), 'Your new image should have the class \"img-responsive\".')", - "assert(new RegExp('http://bit.ly/fcc-kittens2', 'gi').test($('img.img-responsive').attr('src')), 'Add a second image with the src of http://bit.ly/fcc-kittens2.')" + "assert($(\"img\").length > 1, 'You should have a total of two images.')", + "assert($(\"img\").hasClass(\"img-responsive\"), 'Your new image should have the class \"img-responsive\".')", + "assert(new RegExp(\"http://bit.ly/fcc-running-cats\", \"gi\").test($(\"img.img-responsive\").attr(\"src\")), 'Add a second image with the src of http://bit.ly/fcc-running-cats.')" ], "challengeSeed": [ - "", + "", "", "", - "
    ", - "

    CatPhotoApp

    ", + "
    ", + "

    CatPhotoApp

    ", "", - "

    Click here for cat photos.

    ", + "

    Click here for cat photos.

    ", "", - " ", + " ", "", "

    Things cats love:

    ", "
      ", @@ -148,13 +148,13 @@ "
    • other cats
      • ", " ", "
      ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", "
      ", "
    " ], @@ -180,10 +180,10 @@ "Remember that you can add several classes to the same element by separating each of them with a space, like this: <h2 class=\"text-red text-center\">your text</h2>." ], "tests": [ - "assert($('h2').hasClass('text-center'), 'Your h2 element should be centered by applying the class \"text-center\"')" + "assert($(\"h2\").hasClass(\"text-center\"), 'Your h2 element should be centered by applying the class \"text-center\"')" ], "challengeSeed": [ - "", + "", "", "", - "
    ", - "

    CatPhotoApp

    ", + "
    ", + "

    CatPhotoApp

    ", "", - "

    Click here for cat photos.

    ", + "

    Click here for cat photos.

    ", "", - " ", + " ", "", - " ", + " ", "

    Things cats love:

    ", "
      ", "
    • cat nip
      • ", @@ -231,13 +231,13 @@ "
    • other cats
      • ", " ", "
      ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", "
      ", "
    " ], @@ -263,12 +263,12 @@ "Create a new button element below your large kitten photo. Give it the class \"btn\" and the text of \"like this photo\"." ], "tests": [ - "assert($('button').hasClass('btn'), 'Your new button should have the class \"btn\".')", - "assert(new RegExp('like this photo','gi').test($('button.btn').text()), 'Your button should have the text \"like this photo\".')", + "assert($(\"button\").hasClass(\"btn\"), 'Your new button should have the class \"btn\".')", + "assert(new RegExp(\"like this photo\",\"gi\").test($(\"button.btn\").text()), 'Your button should have the text \"like this photo\".')", "assert(editor.match(/<\\/button>/g) && editor.match(/", + " ", + " ", + " ", + " ", + " ", + " ", + " ", " ", "
    " ], @@ -346,17 +346,17 @@ "description": [ "Normally, your button 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 \"inline\" elements and \"block-level\" elements:", - "An \"inline\" button is as small as the text it contains. In this image, it", + "\"An", "Note that these buttons still need the \"btn\" class.", "Add Bootstrap's \"btn-block\" class to your Bootstrap button." ], "tests": [ - "assert($('button').hasClass('btn'), 'Your button should still have the class \"btn\".')", - "assert($('button').hasClass('btn-block'), 'Your button should have the class \"btn-block\".')", + "assert($(\"button\").hasClass(\"btn\"), 'Your button should still have the class \"btn\".')", + "assert($(\"button\").hasClass(\"btn-block\"), 'Your button should have the class \"btn-block\".')", "assert(editor.match(/<\\/button>/g) && editor.match(/", + " ", + " ", "

    Things cats love:

    ", "
      ", "
    • cat nip
      • ", @@ -405,13 +405,13 @@ "
    • other cats
      • ", " ", "
      ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", "
      ", "
    " ], @@ -438,12 +438,12 @@ "Note that this button will still need the \"btn\" and \"btn-block\" classes." ], "tests": [ - "assert($('button').hasClass('btn-primary'), 'Your button should have the class \"btn-primary\".')", - "assert($('button').hasClass('btn-block') && $('button').hasClass('btn'), 'Your button should still have the \"btn\" and \"btn-block\" classes.')", + "assert($(\"button\").hasClass(\"btn-primary\"), 'Your button should have the class \"btn-primary\".')", + "assert($(\"button\").hasClass(\"btn-block\") && $(\"button\").hasClass(\"btn\"), 'Your button should still have the \"btn\" and \"btn-block\" classes.')", "assert(editor.match(/<\\/button>/g) && editor.match(/", + " ", + " ", "

    Things cats love:

    ", "
      ", "
    • cat nip
      • ", @@ -492,13 +492,13 @@ "
    • other cats
      • ", " ", "
      ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", "
      ", "
" ], @@ -525,13 +525,13 @@ "Note that these buttons still need the \"btn\" and \"btn-block\" classes." ], "tests": [ - "assert($('button').hasClass('btn-info'), 'Your new button should have the class \"btn-info\".')", - "assert($('button.btn-block.btn').length > 1, 'Both of your Bootstrap buttons should have the \"btn\" and \"btn-block\" classes.')", - "assert(new RegExp('info', 'gi').test($('button.btn-info').text()), 'Your new button should have the text \"Info\".')", + "assert($(\"button\").hasClass(\"btn-info\"), 'Your new button should have the class \"btn-info\".')", + "assert($(\"button.btn-block.btn\").length > 1, 'Both of your Bootstrap buttons should have the \"btn\" and \"btn-block\" classes.')", + "assert(new RegExp(\"info\", \"gi\").test($(\"button.btn-info\").text()), 'Your new button should have the text \"Info\".')", "assert(editor.match(/<\\/button>/g) && editor.match(/", + " ", + " ", "

Things cats love:

", "
    ", "
  • cat nip
    • ", @@ -580,13 +580,13 @@ "
  • other cats
    • ", " ", "
    ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", "
    ", "
" ], @@ -613,13 +613,13 @@ "Note that these buttons still need the \"btn\" and \"btn-block\" classes." ], "tests": [ - "assert($('button').hasClass('btn-danger'), 'Your new button should have the class \"btn-danger\".')", - "assert($('button.btn-block.btn').length > 2, 'All of your Bootstrap buttons should have the \"btn\" and \"btn-block\" classes.')", - "assert(new RegExp('delete', 'gi').test($('button.btn-danger').text()), 'Your new button should have the text \"delete\".')", + "assert($(\"button\").hasClass(\"btn-danger\"), 'Your new button should have the class \"btn-danger\".')", + "assert($(\"button.btn-block.btn\").length > 2, 'All of your Bootstrap buttons should have the \"btn\" and \"btn-block\" classes.')", + "assert(new RegExp(\"delete\", \"gi\").test($(\"button.btn-danger\").text()), 'Your new button should have the text \"delete\".')", "assert(editor.match(/<\\/button>/g) && editor.match(/", - " ", + " ", + " ", + " ", "

Things cats love:

", "
    ", "
  • cat nip
    • ", @@ -669,13 +669,13 @@ "
  • other cats
    • ", " ", "
    ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", "
    ", "
" ], @@ -699,20 +699,20 @@ "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 div element.", "Here's a diagram of how Bootstrap's 12-column grid layout works:", - "", + "", "Note that in this illustration, the col-md-* class is being used. Here, \"md\" means \"medium\", and \"*\" 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 col-xs-*, where \"*\" is the number of columns wide the element should be, and \"xs\" means \"extra small\", like an extra-small mobile phone screen.", "Put the \"Like\", \"Info\" and \"Delete\" buttons side-by-side by nesting all three of them within one <div class=\"row\"> element, then each of them within a <div class=\"col-xs-4\"> element.", "The \"row\" class is applied to a div, and the buttons themselves can be nested within it." ], "tests": [ - "assert($('div.row:has(button)').length > 0, 'Your buttons should all be nested within the same div element with the class \"row\".')", - "assert($('div.col-xs-4:has(button)').length > 2, 'Each of your Bootstrap buttons should be nested within its own div element with the class \"col-xs-4\".')", + "assert($(\"div.row:has(button)\").length > 0, 'Your buttons should all be nested within the same div element with the class \"row\".')", + "assert($(\"div.col-xs-4:has(button)\").length > 2, 'Each of your Bootstrap buttons should be nested within its own div element with the class \"col-xs-4\".')", "assert(editor.match(/<\\/button>/g) && editor.match(/", - " ", - " ", + " ", + " ", + " ", + " ", "

Things cats love:

", "
    ", "
  • cat nip
    • ", @@ -763,13 +763,112 @@ "
  • other cats
    • ", " ", "
    ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + "
    ", + "
" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [] + }, + { + "id": "bad87fee1347bd9aedf08845", + "title": "Ditch Custom CSS for Bootstrap", + "difficulty": 2.10, + "description": [ + "We can clean up our code and make our Cat Photo App look more conventional by using Bootstrap's built-in styles instead of the custom styles we created earlier.", + "Don't worry - there will be plenty of time to customize our CSS later.", + "Delete the \".red-text\", \"p\", and \".smaller-image\" CSS declarations from your style element so that the only declarations left in your style element are \"h2\" and \"thick-green-border\". Then Delete the p element that contains a dead link. Then remove the \"red-text\" class from your h2 element and replace it with the \"text-primary\" Bootstrap class. Finally, remove the \"smaller-image\" class from your first img element and replace it with the img-responsive class." + ], + "tests": [ + "assert(!$(\"h2\").hasClass(\"red-text\"), 'Your h2 element should no longer have the class \"red-text\".')", + "assert($(\"h2\").hasClass(\"text-primary\"), 'Your h2 element should now have the class \"text-primary\".')", + "assert(!$(\"p\").css(\"font-family\").match(/monospace/i), 'Your paragraph elements should no longer use the font \"Monospace\".')", + "assert(!$(\"img\").hasClass(\"smaller-image\"), 'Remove the \"smaller-image\" class from your top image.')", + "assert($(\".img-responsive\").length > 1, 'Add the \"img-responsive\" class to your top image.')" + ], + "challengeSeed": [ + "", + "", + "", + "
", + "

CatPhotoApp

", + "", + "

Click here for cat photos.

", + "", + " ", + "", + " ", + "
", + "
", + " ", + "
", + "
", + " ", + "
", + "
", + " ", + "
", + "
", + "

Things cats love:

", + "
    ", + "
  • cat nip
    • ", + "
  • laser pointers
    • ", + "
  • lasagna
    • ", + "
", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
    2. ", + "
  2. thunder
    3. ", + "
  3. other cats
    4. ", + "
", + "
", + " ", + " ", + " ", + " ", + " ", + " ", + " ", "
", "
" ], @@ -788,22 +887,24 @@ }, { "id": "bad87fee1348bd9aedf08845", - "title": "Ditch Custom CSS for Bootstrap", - "difficulty": 2.10, + "title": "Use Spans for Inline Elements", + "difficulty": 2.105, "description": [ - "We can clean up our code and make our Cat Photo App look more conventional by using Bootstrap's built-in styles instead of the custom styles we created earlier.", - "Don't worry - there will be plenty of time to customize our CSS later.", - "Delete the \".red-text\", \"p\", and \".smaller-image\" CSS declarations from your style element so that the only declarations left in your style element are \"h2\" and \"thick-green-border\". Then Delete the p element that contains a dead link. Then remove the \"red-text\" class from your h2 element and replace it with the \"text-primary\" Bootstrap class. Finally, remove the \"smaller-image\" class from your first img element and replace it with the img-responsive class." + "You can use use spans to create inline elements. Remember when we used the \"btn-block\" class to make the button grow fill the entire row?", + "This image illustrates the difference between \"inline\" elements and \"block-level\" elements:", + "\"An", + "By using the span 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 withing a span element. Then give that span the class \"text-danger\" to make the text red.", + "Here's how you would do this with the \"Top 3 things cats hate\" element: <p>Top 3 things cats <span class\"text-danger\">hate</span></p>" ], "tests": [ - "assert(!$('h2').hasClass('red-text'), 'Your h2 element should no longer have the class \"red-text\".')", - "assert($('h2').hasClass('text-primary'), 'Your h2 element should now have the class \"text-primary\".')", - "assert(!$('p').css('font-family').match(/monospace/i), 'Your paragraph elements should no longer use the font \"Monospace\".')", - "assert(!$('img').hasClass('smaller-image'), 'Remove the \"smaller-image\" class from your top image.')", - "assert($('.img-responsive').length > 1, 'Add the \"img-responsive\" class to your top image.')" + "assert($(\"p span\") && $(\"p span\").length > 0, 'Your span element should be inside your p element.')", + "assert($(\"p span\") && $(\"p span\").text().match(/love/i), 'Your span element should have the text \"love\".')", + "assert($(\"span\").hasClass(\"text-danger\"), 'Your span element should have class \"text-danger\".')", + "assert(editor.match(/<\\/span>/g) && editor.match(//g).length === editor.match(/span element has a closing tag.')" ], "challengeSeed": [ - "", + "", "", "", - "
", - "

CatPhotoApp

", + "
", + "

CatPhotoApp

", "", - "

Click here for cat photos.

", + "

Click here for cat photos.

", "", - " ", + " ", "", - " ", - "
", - "
", - " ", + " ", + "
", + "
", + " ", "
", - "
", - " ", + "
", + " ", "
", - "
", - " ", + "
", + " ", "
", "
", - "

Things cats love:

", + "

Things cats love:

", "
    ", "
  • cat nip
    • ", "
  • laser pointers
    • ", @@ -862,13 +963,13 @@ "
  • other cats
    • ", " ", "
    ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", "
    ", "
" ], @@ -893,20 +994,20 @@ "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 div element.", "Here's a diagram of how Bootstrap's 12-column grid layout works:", - "", + "", "Note that in this illustration, we use the \"col-md-*\" class. Here, \"md\" means \"medium\", and \"*\" is a number specifying how many columns wide the element should be. In this case, we're specifying how many columns wide an element should be on a medium-sized screen, such as a laptop.", "In the Cat Photo App that we're building, we'll use \"col-xs-*\", where \"*\" is the number of columns wide the element should be, and \"xs\" means \"extra small\", like an extra-small mobile phone screen.", - "Nest your first image and your h2 element within a single <div class='row'> element. Nest your h2 text within a <div class='col-xs-8'> and your image in a <div class='col-xs-4'> so that they are on the same line.", + "Nest your first image and your h2 element within a single <div class=\"row\"> element. Nest your h2 text within a <div class=\"col-xs-8\"> and your image in a <div class=\"col-xs-4\"> so that they are on the same line.", "Notice how the image is now just the right size to fit along the text?" ], "tests": [ - "assert($('div.row:has(h2)').length > 0 && $('div.row:has(img)').length > 0, 'Your h2 element and topmost img element should both be nested together within a div element with the class \"row\".')", - "assert($('div.col-xs-4:has(img)').length > 0, 'Nest your topmost img element within a div with the class \"col-xs-4\".')", - "assert($('div.col-xs-8:has(h2)').length > 0, 'Nest your h2 element within a div with the class \"col-xs-8\".')", + "assert($(\"div.row:has(h2)\").length > 0 && $(\"div.row:has(img)\").length > 0, 'Your h2 element and topmost img element should both be nested together within a div element with the class \"row\".')", + "assert($(\"div.col-xs-4:has(img)\").length > 0, 'Nest your topmost img element within a div with the class \"col-xs-4\".')", + "assert($(\"div.col-xs-8:has(h2)\").length > 0, 'Nest your h2 element within a div with the class \"col-xs-8\".')", "assert(editor.match(/<\\/div>/g) && editor.match(/
/g).length === editor.match(/
div elements has a closing tag.')" ], "challengeSeed": [ - "", + "", "", "", "", - "
", - "

CatPhotoApp

", + "
", + "

CatPhotoApp

", "", - " ", + " ", "", - " ", - "
", - "
", - " ", + " ", + "
", + "
", + " ", "
", - "
", - " ", + "
", + " ", "
", - "
", - " ", + "
", + " ", "
", "
", - "

Things cats love:

", + "

Things cats love:

", "
    ", "
  • cat nip
    • ", "
  • laser pointers
    • ", @@ -951,13 +1052,13 @@ "
  • other cats
    • ", " ", "
    ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", "
    ", "
" ], @@ -983,12 +1084,12 @@ "Use Font Awesome to add a \"thumbs-up\" icon to your like button by giving it a i element with the classes \"fa\" and \"fa-thumbs-up\"." ], "tests": [ - "assert($('i').hasClass('fa fa-thumbs-up'), 'Add an i element with the classes \"fa\" and \"fa-thumbs-up\".')", - "assert($('button').children('i').length > 0, 'Nest your i element within your button element.')", + "assert($(\"i\").hasClass(\"fa fa-thumbs-up\"), 'Add an i element with the classes \"fa\" and \"fa-thumbs-up\".')", + "assert($(\"button\").children(\"i\").length > 0, 'Nest your i element within your button element.')", "assert(editor.match(/<\\/i>/g), 'Make sure your i element has a closing tag.')" ], "challengeSeed": [ - "", + "", "", "", - "
", - "
", - "
", - "

CatPhotoApp

", + "
", + "
", + "
", + "

CatPhotoApp

", "
", - "
", - " ", + "
", + " ", "
", "
", - " ", - "
", - "
", - " ", + " ", + "
", + "
", + " ", "
", - "
", - " ", + "
", + " ", "
", - "
", - " ", + "
", + " ", "
", "
", - "

Things cats love:

", + "

Things cats love:

", "
    ", "
  • cat nip
    • ", "
  • laser pointers
    • ", @@ -1036,13 +1137,13 @@ "
  • other cats
    • ", " ", "
    ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", "
    ", "
" ], @@ -1068,12 +1169,12 @@ "Use Font Awesome to add a \"info-circle\" icon to your info button and a \"trash\" icon to your delete button." ], "tests": [ - "assert($('i').hasClass('fa fa-trash'), 'You should add a <i class=\"fa fa-trash\"></i> within your delete button element.')", - "assert($('i').hasClass('fa fa-info-circle'), 'You should add a <i class=\"fa fa-info-circle\"></i> within your info button element.')", + "assert($(\"i\").hasClass(\"fa fa-trash\"), 'You should add a <i class=\"fa fa-trash\"></i> within your delete button element.')", + "assert($(\"i\").hasClass(\"fa fa-info-circle\"), 'You should add a <i class=\"fa fa-info-circle\"></i> within your info button element.')", "assert(editor.match(/<\\/i>/g) && editor.match(/<\\/i/g).length > 2, 'Make sure each of your i elements has a closing tag.')" ], "challengeSeed": [ - "", + "", "", "", - "
", - "
", - "
", - "

CatPhotoApp

", + "
", + "
", + "
", + "

CatPhotoApp

", "
", - "
", - " ", + "
", + " ", "
", "
", - " ", - "
", - "
", - " ", + " ", + "
", + "
", + " ", "
", - "
", - " ", + "
", + " ", "
", - "
", - " ", + "
", + " ", "
", "
", - "

Things cats love:

", + "

Things cats love:

", "
    ", "
  • cat nip
    • ", "
  • laser pointers
    • ", @@ -1121,13 +1222,13 @@ "
  • other cats
    • ", " ", "
    ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", "
    ", "
" ], @@ -1150,15 +1251,15 @@ "difficulty": 2.14, "description": [ "You can use Bootstrap's \"col-xs-*\" classes on form elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is.", - "Nest all of your radio buttons within a <div class='row'> element. Then nest each of them within a <div class='col-xs-6'> element." + "Nest all of your radio buttons within a <div class=\"row\"> element. Then nest each of them within a <div class=\"col-xs-6\"> element." ], "tests": [ - "assert($('div.row:has(input[type=\\'radio\\'])').length > 0, 'Nest all of your radio buttons inside one div with the class \"row\".')", - "assert($('div.col-xs-6:has(input[type=\\'radio\\'])').length > 1, 'Nest each of your radio buttons inside its own div with the class \"col-xs-6\".')", + "assert($(\"div.row:has(input[type=\\\"radio\\\"])\").length > 0, 'Nest all of your radio buttons inside one div with the class \"row\".')", + "assert($(\"div.col-xs-6:has(input[type=\\\"radio\\\"])\").length > 1, 'Nest each of your radio buttons inside its own div with the class \"col-xs-6\".')", "assert(editor.match(/<\\/div>/g) && editor.match(/
/g).length === editor.match(/
div elements has a closing tag.')" ], "challengeSeed": [ - "", + "", "", "", - "
", - "
", - "
", - "

CatPhotoApp

", + "
", + "
", + "
", + "

CatPhotoApp

", "
", - "
", - " ", + "
", + " ", "
", "
", - " ", - "
", - "
", - " ", + " ", + "
", + "
", + " ", "
", - "
", - " ", + "
", + " ", "
", - "
", - " ", + "
", + " ", "
", "
", - "

Things cats love:

", + "

Things cats love:

", "
    ", "
  • cat nip
    • ", "
  • laser pointers
    • ", @@ -1206,13 +1307,13 @@ "
  • other cats
    • ", " ", "
    ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", "
    ", "
" ], @@ -1235,15 +1336,15 @@ "difficulty": 2.15, "description": [ "You can use Bootstrap's \"col-xs-*\" classes on form elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is.", - "Nest all your checkboxes in a <div class='row'> element. Then nest each of them in a <div class='col-xs-4'> element." + "Nest all your checkboxes in a <div class=\"row\"> element. Then nest each of them in a <div class=\"col-xs-4\"> element." ], "tests": [ - "assert($('div.row:has(input[type=\\'checkbox\\'])').length > 0, 'Nest all of your checkboxes inside one div with the class \"row\".')", - "assert($('div.col-xs-4:has(input[type=\\'checkbox\\'])').length > 2, 'Nest each of your checkboxes inside its own div with the class \"col-xs-4\".')", + "assert($(\"div.row:has(input[type=\\\"checkbox\\\"])\").length > 0, 'Nest all of your checkboxes inside one div with the class \"row\".')", + "assert($(\"div.col-xs-4:has(input[type=\\\"checkbox\\\"])\").length > 2, 'Nest each of your checkboxes inside its own div with the class \"col-xs-4\".')", "assert(editor.match(/<\\/div>/g) && editor.match(/
/g).length === editor.match(/
div elements has a closing tag.')" ], "challengeSeed": [ - "", + "", "", "", - "
", - "
", - "
", - "

CatPhotoApp

", + "
", + "
", + "
", + "

CatPhotoApp

", "
", - "
", - " ", + "
", + " ", "
", "
", - " ", - "
", - "
", - " ", + " ", + "
", + "
", + " ", "
", - "
", - " ", + "
", + " ", "
", - "
", - " ", + "
", + " ", "
", "
", - "

Things cats love:

", + "

Things cats love:

", "
    ", "
  • cat nip
    • ", "
  • laser pointers
    • ", @@ -1292,19 +1393,19 @@ "
  • other cats
    • ", " ", "
    ", - "
    ", - "
    ", - " ", + "
    ", + "
    ", + " ", "
    ", - "
    ", - " ", + "
    ", + " ", "
    ", "
    ", - " ", - " ", - " ", - " ", - " ", + " ", + " ", + " ", + " ", + " ", " ", "
    " ], @@ -1330,13 +1431,13 @@ "Give your form's text input field a class of \"form-control\". Give your form's submit button the classes \"btn btn-primary\". Also give this button the Font Awesome icon of \"fa-paper-plane\"." ], "tests": [ - "assert($('button[type=\\'submit\\']').hasClass('btn btn-primary'), 'Give the submit button in your form the classes \"btn btn-primary\".')", - "assert($('button[type=\\'submit\\']:has(i.fa.fa-paper-plane)').length > 0, 'Add a <i class=\"fa fa-paper-plane\"></i> within your submit button element.')", - "assert($('input[type=\\'text\\']').hasClass('form-control'), 'Give the text input in your form the class \"form-control\".')", + "assert($(\"button[type=\\\"submit\\\"]\").hasClass(\"btn btn-primary\"), 'Give the submit button in your form the classes \"btn btn-primary\".')", + "assert($(\"button[type=\\\"submit\\\"]:has(i.fa.fa-paper-plane)\").length > 0, 'Add a <i class=\"fa fa-paper-plane\"></i> within your submit button element.')", + "assert($(\"input[type=\\\"text\\\"]\").hasClass(\"form-control\"), 'Give the text input in your form the class \"form-control\".')", "assert(editor.match(/<\\/i>/g) && editor.match(/<\\/i/g).length > 3, 'Make sure each of your i elements has a closing tag.')" ], "challengeSeed": [ - "", + "", "", "", - "
    ", - "
    ", - "
    ", - "

    CatPhotoApp

    ", + "
    ", + "
    ", + "
    ", + "

    CatPhotoApp

    ", "
    ", - "
    ", - " ", + "
    ", + " ", "
    ", "
    ", - " ", - "
    ", - "
    ", - " ", + " ", + "
    ", + "
    ", + " ", "
    ", - "
    ", - " ", + "
    ", + " ", "
    ", - "
    ", - " ", + "
    ", + " ", "
    ", "
    ", - "

    Things cats love:

    ", + "

    Things cats love:

    ", "
      ", "
    • cat nip
      • ", "
    • laser pointers
      • ", @@ -1385,27 +1486,27 @@ "
    • other cats
      • ", " ", "
      ", - "
      ", - "
      ", - " ", + "
      ", + "
      ", + " ", "
      ", - "
      ", - " ", + "
      ", + " ", "
      ", "
      ", - "
      ", - "
      ", - " ", + "
      ", + "
      ", + " ", "
      ", - "
      ", - " ", + "
      ", + " ", "
      ", - "
      ", - " ", + "
      ", + " ", "
      ", "
      ", - " ", - " ", + " ", + " ", " ", "
      " ], @@ -1432,13 +1533,13 @@ "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": [ - "assert($('div.row:has(input[type=\\'text\\'])').length > 0 && $('div.row:has(button[type=\\'submit\\'])').length > 0, 'Nest your form submission button and text input in a div with class \"row\".')", - "assert($('div.col-xs-5:has(button[type=\\'submit\\'])').length > 0, 'Nest your form submission button in a div with the class \"col-xs-5\".')", - "assert($('div.col-xs-7:has(input[type=\\'text\\'])').length > 0, 'Nest your form text input in a div with the class \"col-xs-7\".')", + "assert($(\"div.row:has(input[type=\\\"text\\\"])\").length > 0 && $(\"div.row:has(button[type=\\\"submit\\\"])\").length > 0, 'Nest your form submission button and text input in a div with class \"row\".')", + "assert($(\"div.col-xs-5:has(button[type=\\\"submit\\\"])\").length > 0, 'Nest your form submission button in a div with the class \"col-xs-5\".')", + "assert($(\"div.col-xs-7:has(input[type=\\\"text\\\"])\").length > 0, 'Nest your form text input in a div with the class \"col-xs-7\".')", "assert(editor.match(/<\\/div>/g) && editor.match(/
      /g).length === editor.match(/
      div elements has a closing tag.')" ], "challengeSeed": [ - "", + "", "", "", - "
      ", - "
      ", - "
      ", - "

      CatPhotoApp

      ", + "
      ", + "
      ", + "
      ", + "

      CatPhotoApp

      ", "
      ", - "
      ", - " ", + "
      ", + " ", "
      ", "
      ", - " ", - "
      ", - "
      ", - " ", + " ", + "
      ", + "
      ", + " ", "
      ", - "
      ", - " ", + "
      ", + " ", "
      ", - "
      ", - " ", + "
      ", + " ", "
      ", "
      ", - "

      Things cats love:

      ", + "

      Things cats love:

      ", "
        ", "
      • cat nip
        • ", "
      • laser pointers
        • ", @@ -1487,27 +1588,27 @@ "
      • other cats
        • ", " ", "
        ", - "
        ", - "
        ", - " ", + "
        ", + "
        ", + " ", "
        ", - "
        ", - " ", + "
        ", + " ", "
        ", "
        ", - "
        ", - "
        ", - " ", + "
        ", + "
        ", + " ", "
        ", - "
        ", - " ", + "
        ", + " ", "
        ", - "
        ", - " ", + "
        ", + " ", "
        ", "
        ", - " ", - " ", + " ", + " ", " ", "
        " ], @@ -1529,17 +1630,17 @@ "title": "Create a Bootstrap Headline", "difficulty": 2.18, "description": [ - "Now let's build something from scratch to practice our HTML, CSS and Bootstrap skills.", + "Now let\"s build something from scratch to practice our HTML, CSS and Bootstrap skills.", "We'll build a jQuery playground, which we'll soon put to use in our jQuery challenges.", "To start with, create an h3 element, with the text \"jQuery Playground\".", "Color your h3 element with the \"text-primary\" Bootstrap class, and center it with the \"text-center\" Bootstrap class." ], "tests": [ - "assert($('h3') && $('h3').length > 0, 'Add a h3 element to your page.')", + "assert($(\"h3\") && $(\"h3\").length > 0, 'Add a h3 element to your page.')", "assert(editor.match(/<\\/h3>/g) && editor.match(/

        /g).length === editor.match(/

        h3 element has a closing tag.')", - "assert($('h3').hasClass('text-primary'), 'Your h3 element should be colored by applying the class \"text-primary\"')", - "assert($('h3').hasClass('text-center'), 'Your h3 element should be centered by applying the class \"text-center\"')", - "assert.isTrue((/jquery(\\s)+playground/gi).test($('h3').text()), 'Your h3 element should have the text \"jQuery Playground\".')" + "assert($(\"h3\").hasClass(\"text-primary\"), 'Your h3 element should be colored by applying the class \"text-primary\"')", + "assert($(\"h3\").hasClass(\"text-center\"), 'Your h3 element should be centered by applying the class \"text-center\"')", + "assert.isTrue((/jquery(\\s)+playground/gi).test($(\"h3\").text()), 'Your h3 element should have the text \"jQuery Playground\".')" ], "challengeSeed": [ "", @@ -1568,11 +1669,11 @@ "Let's nest your h3 element within a div element with the class \"container-fluid\"." ], "tests": [ - "assert($('div').hasClass('container-fluid'), 'Your div element should have the class \"container-fluid\"')", + "assert($(\"div\").hasClass(\"container-fluid\"), 'Your div element should have the class \"container-fluid\"')", "assert(editor.match(/<\\/div>/g) && editor.match(/
        /g).length === editor.match(/
        div elements has a closing tag.')" ], "challengeSeed": [ - "

        jQuery Playground

        ", + "

        jQuery Playground

        ", "", "" ], @@ -1598,13 +1699,13 @@ "Create a div element with the class \"row\"." ], "tests": [ - "assert($('div').length > 1, 'Add a div element to your page.')", - "assert($('div').hasClass('row'), 'Your div element should have the class \"row\"')", + "assert($(\"div\").length > 1, 'Add a div element to your page.')", + "assert($(\"div\").hasClass(\"row\"), 'Your div element should have the class \"row\"')", "assert(editor.match(/<\\/div>/g) && editor.match(/
        /g).length === editor.match(/
        div element has a closing tag.')" ], "challengeSeed": [ - "
        ", - "

        jQuery Playground

        ", + "
        ", + "

        jQuery Playground

        ", "
        ", "", "" @@ -1631,13 +1732,13 @@ "Create two div elements within your row, both with the class \"col-xs-6\"." ], "tests": [ - "assert($('div.row').children('div.col-xs-6').length > 1, 'Nest two div class=\"col-xs-6\" elements within your div class=\"row\" element.')", + "assert($(\"div.row\").children(\"div.col-xs-6\").length > 1, 'Nest two div class=\"col-xs-6\" elements within your div class=\"row\" element.')", "assert(editor.match(/<\\/div>/g) && editor.match(/
        /g).length === editor.match(/
        div elements have closing tags.')" ], "challengeSeed": [ - "
        ", - "

        jQuery Playground

        ", - "
        ", + "
        ", + "

        jQuery Playground

        ", + "
        ", "
        ", "
        " ], @@ -1663,18 +1764,18 @@ "Nest one div element with the class \"well\" within each of your \"col-xs-6\" div elements." ], "tests": [ - "assert($('div').length > 4, 'Add two div elements inside your div class=\"row\"> element both with the class \"col-xs-6\"')", - "assert($('div.row').children('div.col-xs-6').length > 1, 'Nest both of your div class=\"col-xs-6\" elements within your div class=\"row\" element.')", - "assert($('div.col-xs-6').children('div.well').length > 1, 'Nest both of your div class=\"col-xs-6\" elements within your div class=\"row\" element.')", + "assert($(\"div\").length > 4, 'Add two div elements inside your div class=\"row\"> element both with the class \"col-xs-6\"')", + "assert($(\"div.row\").children(\"div.col-xs-6\").length > 1, 'Nest both of your div class=\"col-xs-6\" elements within your div class=\"row\" element.')", + "assert($(\"div.col-xs-6\").children(\"div.well\").length > 1, 'Nest both of your div class=\"col-xs-6\" elements within your div class=\"row\" element.')", "assert(editor.match(/<\\/div>/g) && editor.match(/
        /g).length === editor.match(/
        div elements have closing tags.')" ], "challengeSeed": [ - "
        ", - "

        jQuery Playground

        ", - "
        ", - "
        ", + "
        ", + "

        jQuery Playground

        ", + "
        ", + "
        ", "
        ", - "
        ", + "
        ", "
        ", "
        ", "
        " @@ -1701,19 +1802,19 @@ "Nest three button elements within each of your \"well\" div elements." ], "tests": [ - "assert($('div.well').children('button').length > 5, 'Nest three button elements within each of your div elements with class \"well\".')", - "assert($('button') && $('button').length > 5, 'You should have a total of 6 button elements.')" + "assert($(\"div.well\").children(\"button\").length > 5, 'Nest three button elements within each of your div elements with class \"well\".')", + "assert($(\"button\") && $(\"button\").length > 5, 'You should have a total of 6 button elements.')" ], "challengeSeed": [ - "
        ", - "

        jQuery Playground

        ", - "
        ", - "
        ", - "
        ", + "
        ", + "

        jQuery Playground

        ", + "
        ", + "
        ", + "
        ", "
        ", "
        ", - "
        ", - "
        ", + "
        ", + "
        ", "
        ", "
        ", "
        ", @@ -1741,22 +1842,22 @@ "Apply both the \"btn\" and \"btn-default\" classes to each of your button elements." ], "tests": [ - "assert($('.btn').length > 5, 'Apply the \"btn\" class to each of your button elements.')", - "assert($('.btn-default').length > 5, 'Apply the \"btn-default\" class to each of your button elements.')" + "assert($(\".btn\").length > 5, 'Apply the \"btn\" class to each of your button elements.')", + "assert($(\".btn-default\").length > 5, 'Apply the \"btn-default\" class to each of your button elements.')" ], "challengeSeed": [ - "
        ", - "

        jQuery Playground

        ", - "
        ", - "
        ", - "
        ", + "
        ", + "

        jQuery Playground

        ", + "
        ", + "
        ", + "
        ", " ", " ", " ", "
        ", "
        ", - "
        ", - "
        ", + "
        ", + "
        ", " ", " ", " ", @@ -1787,24 +1888,24 @@ "Give each of your button elements the class \"target\"." ], "tests": [ - "assert($('.target').length > 5, 'Apply the \"target\" class to each of your button elements.')" + "assert($(\".target\").length > 5, 'Apply the \"target\" class to each of your button elements.')" ], "challengeSeed": [ - "
        ", - "

        jQuery Playground

        ", - "
        ", - "
        ", - "
        ", - " ", - " ", - " ", + "
        ", + "

        jQuery Playground

        ", + "
        ", + "
        ", + "
        ", + " ", + " ", + " ", "
        ", "
        ", - "
        ", - "
        ", - " ", - " ", - " ", + "
        ", + "
        ", + " ", + " ", + " ", "
        ", "
        ", "
        ", @@ -1835,25 +1936,25 @@ "Give the well on the left the id of \"left-well\". Give the well on the right the id of \"right-well\"." ], "tests": [ - "assert($('#left-well') && $('#left-well').length > 0, 'Give your left \"well\" the id of \"left-well\".')", - "assert($('#right-well') && $('#right-well').length > 0, 'Give your right \"well\" the id of \"right-well\".')" + "assert($(\"#left-well\") && $(\"#left-well\").length > 0, 'Give your left \"well\" the id of \"left-well\".')", + "assert($(\"#right-well\") && $(\"#right-well\").length > 0, 'Give your right \"well\" the id of \"right-well\".')" ], "challengeSeed": [ - "
        ", - "

        jQuery Playground

        ", - "
        ", - "
        ", - "
        ", - " ", - " ", - " ", + "
        ", + "

        jQuery Playground

        ", + "
        ", + "
        ", + "
        ", + " ", + " ", + " ", "
        ", "
        ", - "
        ", - "
        ", - " ", - " ", - " ", + "
        ", + "
        ", + " ", + " ", + " ", "
        ", "
        ", "
        ", @@ -1882,26 +1983,26 @@ "Above your right-well, inside its \"col-xs-6\" div element, add a h4 element with the text \"#right-well\"." ], "tests": [ - "assert($('.col-xs-6').children('h4') && $('.col-xs-6').children('h4').length > 1, 'Add an h4 element to each of your <div class=\\'col-xs-6\\'> elements.');", - "assert(new RegExp('#left-well','gi').test($('h4').text()), 'One h4 element should have the text \"#left-well\".');", - "assert(new RegExp('#right-well','gi').test($('h4').text()), 'One h4 element should have the text \"#right-well\".');" + "assert($(\".col-xs-6\").children(\"h4\") && $(\".col-xs-6\").children(\"h4\").length > 1, 'Add an h4 element to each of your <div class=\\\"col-xs-6\\\"> elements.');", + "assert(new RegExp(\"#left-well\",\"gi\").test($(\"h4\").text()), 'One h4 element should have the text \"#left-well\".');", + "assert(new RegExp(\"#right-well\",\"gi\").test($(\"h4\").text()), 'One h4 element should have the text \"#right-well\".');" ], "challengeSeed": [ - "
        ", - "

        jQuery Playground

        ", - "
        ", - "
        ", - "
        ", - " ", - " ", - " ", + "
        ", + "

        jQuery Playground

        ", + "
        ", + "
        ", + "
        ", + " ", + " ", + " ", "
        ", "
        ", - "
        ", - "
        ", - " ", - " ", - " ", + "
        ", + "
        ", + " ", + " ", + " ", "
        ", "
        ", "
        ", @@ -1929,31 +2030,31 @@ "Give each of your buttons a unique id like, starting with \"target1\" and ending with \"target6\"." ], "tests": [ - "assert($('#target1') && $('#target1').length > 0, 'One button element should have the id \"target1\".')", - "assert($('#target2') && $('#target2').length > 0, 'One button element should have the id \"target2\".')", - "assert($('#target3') && $('#target3').length > 0, 'One button element should have the id \"target3\".')", - "assert($('#target4') && $('#target4').length > 0, 'One button element should have the id \"target4\".')", - "assert($('#target5') && $('#target5').length > 0, 'One button element should have the id \"target5\".')", - "assert($('#target6') && $('#target6').length > 0, 'One button element should have the id \"target6\".')" + "assert($(\"#target1\") && $(\"#target1\").length > 0, 'One button element should have the id \"target1\".')", + "assert($(\"#target2\") && $(\"#target2\").length > 0, 'One button element should have the id \"target2\".')", + "assert($(\"#target3\") && $(\"#target3\").length > 0, 'One button element should have the id \"target3\".')", + "assert($(\"#target4\") && $(\"#target4\").length > 0, 'One button element should have the id \"target4\".')", + "assert($(\"#target5\") && $(\"#target5\").length > 0, 'One button element should have the id \"target5\".')", + "assert($(\"#target6\") && $(\"#target6\").length > 0, 'One button element should have the id \"target6\".')" ], "challengeSeed": [ - "
        ", - "

        jQuery Playground

        ", - "
        ", - "
        ", + "
        ", + "

        jQuery Playground

        ", + "
        ", + "
        ", "

        #left-well

        ", - "
        ", - " ", - " ", - " ", + "
        ", + " ", + " ", + " ", "
        ", "
        ", - "
        ", + "
        ", "

        #right-well

        ", - "
        ", - " ", - " ", - " ", + "
        ", + " ", + " ", + " ", "
        ", "
        ", "
        ", @@ -1981,31 +2082,31 @@ "Give each of your buttons text that corresponds to their id." ], "tests": [ - "assert(new RegExp('#target1','gi').test($('#target1').text()), 'Give your button element with the id \"target1\" the text \"#target1\".')", - "assert(new RegExp('#target2','gi').test($('#target2').text()), 'Give your button element with the id \"target2\" the text \"#target2\".')", - "assert(new RegExp('#target3','gi').test($('#target3').text()), 'Give your button element with the id \"target3\" the text \"#target3\".')", - "assert(new RegExp('#target4','gi').test($('#target4').text()), 'Give your button element with the id \"target4\" the text \"#target4\".')", - "assert(new RegExp('#target5','gi').test($('#target5').text()), 'Give your button element with the id \"target5\" the text \"#target5\".')", - "assert(new RegExp('#target6','gi').test($('#target6').text()), 'Give your button element with the id \"target6\" the text \"#target6\".')" + "assert(new RegExp(\"#target1\",\"gi\").test($(\"#target1\").text()), 'Give your button element with the id \"target1\" the text \"#target1\".')", + "assert(new RegExp(\"#target2\",\"gi\").test($(\"#target2\").text()), 'Give your button element with the id \"target2\" the text \"#target2\".')", + "assert(new RegExp(\"#target3\",\"gi\").test($(\"#target3\").text()), 'Give your button element with the id \"target3\" the text \"#target3\".')", + "assert(new RegExp(\"#target4\",\"gi\").test($(\"#target4\").text()), 'Give your button element with the id \"target4\" the text \"#target4\".')", + "assert(new RegExp(\"#target5\",\"gi\").test($(\"#target5\").text()), 'Give your button element with the id \"target5\" the text \"#target5\".')", + "assert(new RegExp(\"#target6\",\"gi\").test($(\"#target6\").text()), 'Give your button element with the id \"target6\" the text \"#target6\".')" ], "challengeSeed": [ - "
        ", - "

        jQuery Playground

        ", - "
        ", - "
        ", + "
        ", + "

        jQuery Playground

        ", + "
        ", + "
        ", "

        #left-well

        ", - "
        ", - " ", - " ", - " ", + "
        ", + " ", + " ", + " ", "
        ", "
        ", - "
        ", + "
        ", "

        #right-well

        ", - "
        ", - " ", - " ", - " ", + "
        ", + " ", + " ", + " ", "
        ", "
        ", "
        ", @@ -2040,23 +2141,23 @@ "assert(editor.match(/-->/g) && editor.match(/-->/g).length > 0, 'Be sure to close your comment with -->.')" ], "challengeSeed": [ - "
        ", - "

        jQuery Playground

        ", - "
        ", - "
        ", + "
        ", + "

        jQuery Playground

        ", + "
        ", + "
        ", "

        #left-well

        ", - "
        ", - " ", - " ", - " ", + "
        ", + " ", + " ", + " ", "
        ", "
        ", - "
        ", + "
        ", "

        #right-well

        ", - "
        ", - " ", - " ", - " ", + "
        ", + " ", + " ", + " ", "
        ", "
        ", "
        ", diff --git a/seed/challenges/html5-and-css.json b/seed/challenges/html5-and-css.json index 0c0354bd99..9e2b8f62f3 100644 --- a/seed/challenges/html5-and-css.json +++ b/seed/challenges/html5-and-css.json @@ -62,10 +62,10 @@ "h2 elements are slightly smaller than h1 elements. There are also h3, h4, h5 and h6 elements." ], "tests": [ - "assert(($('h2').length > 0), 'Create an h2 element.')", + "assert(($(\"h2\").length > 0), 'Create an h2 element.')", "assert(editor.match(/<\\/h2>/g) && editor.match(/<\\/h2>/g).length === editor.match(/

        /g).length, 'Make sure your h2 element has a closing tag.')", - "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($('h2').text()), 'Your h2 element should have the text \"CatPhotoApp\".')", - "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your h1 element should have the text \"Hello World\".')" + "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'Your h2 element should have the text \"CatPhotoApp\".')", + "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), 'Your h1 element should have the text \"Hello World\".')" ], "challengeSeed": [ "

        Hello World

        " @@ -105,8 +105,8 @@ "You can create a p element like so: <p>I'm a p tag!</p>." ], "tests": [ - "assert(($('p').length > 0), 'Create a p element.')", - "assert.isTrue((/hello(\\s)+paragraph/gi).test($('p').text()), 'Your p element should have the text \"Hello Paragraph\".')", + "assert(($(\"p\").length > 0), 'Create a p element.')", + "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'Your p element should have the text \"Hello Paragraph\".')", "assert(editor.match(/<\\/p>/g) && editor.match(/<\\/p>/g).length === editor.match(/

        p element has a closing tag.')" ], "challengeSeed": [ @@ -147,10 +147,10 @@ "You can start a comment with <!-- and end a comment with -->." ], "tests": [ - "assert($('h1').length > 0, 'Make your h1 element visible on your page by uncommenting it.')", - "assert($('h2').length > 0, 'Make your h2 element visible on your page by uncommenting it.')", - "assert($('p').length > 0, 'Make your p element visible on your page by uncommenting it.')", - "assert(!new RegExp('-->', 'gi').test(editor), 'Be sure to delete all trailing comment tags, i.e. -->.')" + "assert($(\"h1\").length > 0, 'Make your h1 element visible on your page by uncommenting it.')", + "assert($(\"h2\").length > 0, 'Make your h2 element visible on your page by uncommenting it.')", + "assert($(\"p\").length > 0, 'Make your p element visible on your page by uncommenting it.')", + "assert(!new RegExp(\"-->\", 'gi').test(editor), 'Be sure to delete all trailing comment tags, i.e. -->.')" ], "challengeSeed": [ "/g).length > 1, 'Be sure to close each of your comments with -->.')" ], "challengeSeed": [ @@ -244,7 +244,7 @@ "Replace the text inside your p element with the first few words of this \"Kitty Ipsum\" text: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ], "tests": [ - "assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($('p').text()), 'Your p element should contain the first few words of the provided \"Kitty Ipsum\" text.')" + "assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($(\"p\").text()), ¬Your p element should contain the first few words of the provided \"Kitty Ipsum\" text.¬)" ], "challengeSeed": [ "

        Hello World

        ", @@ -266,7 +266,7 @@ "Cambia el texto en el elemento p para usar las primeras palabras del texto Kitty Ipsum.", "Los desarrolladores web tradicionalmente usan Lorem Ipsum como texto de relleno. Se llama texto Lorem Ipsum porque esas son las primeras dos palabras de una cita famosa de Cicerón de la Roma Antigua.", "El texto Lorem Ipsum ha sido usado como texto de relleno en las imprentas desde el siglo 16, y esta tradición continúa en la web.", - "Bueno, 5 siglos es bastante. Ya que estamos construyendo una aplicación de fotos de gatos (CatPhotoApp), ¡usemos algo llamado Kitty Ipsum!", + "Bueno, 5 siglos es bastante. Ya que estamos construyendo una aplicación de fotos de gatos (CatPhotoApp), ¡usemos algo llamado Kitty Ipsum!", "Aquí están las primeras palabras del texto Kitty Ipsum, que puedes copiar y pegar en la posición correcta: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ], "namePt": "", @@ -286,13 +286,13 @@ "difficulty": 1.07, "description": [ "Delete your h1 element so we can simplify our view.", - "Our phone doesn't have much vertical space.", - "Let's remove the unnecessary elements so we can start building our CatPhotoApp." + "Our phone doesn¬t have much vertical space.", + "Let¬s remove the unnecessary elements so we can start building our CatPhotoApp." ], "tests": [ - "assert(($('h1').length == 0), 'Delete your h1 element.')", - "assert(($('h2').length > 0), 'Leave your h2 element on the page.')", - "assert(($('p').length > 0), 'Leave your p element on the page.')" + "assert(($(\"h1\").length == 0), 'Delete your h1 element.')", + "assert(($(\"h2\").length > 0), 'Leave your h2 element on the page.')", + "assert(($(\"p\").length > 0), 'Leave your p element on the page.')" ], "challengeSeed": [ "

        Hello World

        ", @@ -335,7 +335,7 @@ "Here's how you would set your h2 element's text color to blue: <h2 style=\"color: blue\">CatPhotoApp</h2>." ], "tests": [ - "assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')" + "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your h2 element should be red.')" ], "challengeSeed": [ "

        CatPhotoApp

        ", @@ -380,13 +380,13 @@ "Note that it's important to have both opening and closing curly braces ({ and }) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of your element's styles." ], "tests": [ - "assert($('h2').css('color') === 'rgb(0, 0, 255)', 'Your h2 element should be blue.')", - "assert(!$('h2').attr('style'), 'Remove the style attribute from your h2 element.')", - "assert(($('style').length > 1), 'Create a style element.')", + "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your h2 element should be blue.')", + "assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your h2 element.')", + "assert(($(\"style\").length > 1), 'Create a style element.')", "assert(editor.match(/<\\/style>/g) && editor.match(/<\\/style>/g).length === editor.match(/", "", - "

        CatPhotoApp

        ", + "

        CatPhotoApp

        ", "", "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        " ], @@ -544,10 +544,10 @@ "See if you can figure out how to give both of your p elements the font-size of 16 pixels (16px). You can do this inside the same <style> tag that we created for your \"red-text\" class." ], "tests": [ - "assert($('p').length > 1, 'You need 2 p elements with Kitty Ipsum text.')", + "assert($(\"p\").length > 1, 'You need 2 p elements with Kitty Ipsum text.')", "assert(editor.match(/<\\/p>/g) && editor.match(/<\\/p>/g).length === editor.match(/

        p elements has a closing tag.')", - "assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($('p').text()), 'Your p element should contain the first few words of the provided additional \"Kitty Ipsum\" text.')", - "assert($('p').css('font-size') === '16px', 'Give your p elements the font-size of 16px.')" + "assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($(\"p\").text()), 'Your p element should contain the first few words of the provided additional \"Kitty Ipsum\" text.')", + "assert($(\"p\").css(\"font-size\") === \"16px\", 'Give your p elements the font-size of 16px.')" ], "challengeSeed": [ "", "", - "

        CatPhotoApp

        ", + "

        CatPhotoApp

        ", "", - "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        " + "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        " ], "type": "waypoint", "challengeType": 0, @@ -595,7 +595,7 @@ "For example, if you wanted to set your h2 element's font to \"Sans-serif\", you would use the following CSS: h2 { font-family: Sans-serif; }." ], "tests": [ - "assert($('p').css('font-family').match(/monospace/i), 'Your p elements should use the font \"Monospace\".')" + "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your p elements should use the font \"Monospace\".')" ], "challengeSeed": [ "", "", - "

        CatPhotoApp

        ", + "

        CatPhotoApp

        ", "", - "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", + "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " ], "type": "waypoint", @@ -640,13 +640,13 @@ "Apply the font-family of \"Lobster\" to your h2 element.", "First, you'll need to make a \"call\" to Google to grab the \"Lobster\" font and load it into your HTML.", "Copy the following code snippet and paste it into your code editor:", - "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>.", + "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">.", "Now you can set \"Lobster\" as a font-family attribute on your h2 element." ], "tests": [ - "assert(new RegExp('googleapis', 'gi').test(editor), 'Import the \"Lobster\" font.')", - "assert($('h2').css('font-family').match(/lobster/i), 'Your h2 element should use the font \"Lobster\".')", - "assert($('p').css('font-family').match(/monospace/i), 'Your p element should still use the font \"Monospace\".')" + "assert(new RegExp(\"googleapis\", \"gi\").test(editor), 'Import the \"Lobster\" font.')", + "assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'Your h2 element should use the font \"Lobster\".')", + "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your p element should still use the font \"Monospace\".')" ], "challengeSeed": [ "", "", - "

        CatPhotoApp

        ", + "

        CatPhotoApp

        ", "", - "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", - "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " + "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", + "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " ], "type": "waypoint", "challengeType": 0, @@ -682,7 +682,7 @@ "Füge dem h2 Element die Schriftart oder font-family \"Lobster\" hinzu.", "Zuerst musst du Google Fonts in dein HTML einbinden, um auf \"Lobster\" zugreifen zu können.", "Kopiere den folgenden Code und füge diesen in deinen Editor über dem style Element ein:", - "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>.", + "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">.", "Jetzt kannst du \"Lobster\" als font-family Attribut zu deinem h2 Element hinzufügen." ] }, @@ -696,13 +696,13 @@ "Now comment out your call to Google Fonts, so that the \"Lobster\" font isn't available. Notice how it degrades to the \"Monospace\" font." ], "tests": [ - "assert($('h2').css('font-family').match(/^\"?lobster/i), 'Your h2 element should use the font \"Lobster\".')", - "assert($('h2').css('font-family').match(/lobster.*,.*monospace/i), 'Your h2 element should degrade to the font \"Monospace\" when \"Lobster\" is not available.')", - "assert(new RegExp('', 'gi').test(editor), 'Be sure to close your comment by deleting all trailing comment tags, i.e. -->.')" + "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'Your h2 element should use the font \"Lobster\".')", + "assert($(\"h2\").css(\"font-family\").match(/lobster.*,.*monospace/i), 'Your h2 element should degrade to the font \"Monospace\" when \"Lobster\" is not available.')", + "assert(new RegExp(\"\", \"gi\").test(editor), 'Be sure to close your comment by deleting all trailing comment tags, i.e. -->.')" ], "challengeSeed": [ - "", + "", "", "", - "

        CatPhotoApp

        ", + "

        CatPhotoApp

        ", "", - "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", - "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " + "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", + "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " ], "type": "waypoint", "challengeType": 0, @@ -751,14 +751,14 @@ "description": [ "You can add images to your website by using the img element, and point to an specific image's URL using the src attribute.", "An example of this would be <img src=\"www.your-image-source.com/your-image.jpg\"/>. Note that in most cases, img elements are self-closing.", - "Try it with this image: http://bit.ly/fcc-kittens." + "Try it with this image: https://bit.ly/fcc-relaxing-cat." ], "tests": [ - "assert($('img').length > 0, 'Your page should have an image element.')", - "assert($('img').filter(function(index) { return /http:\\/\\/bit\\.ly\\/fcc-kittens/gi.test($('img').attr('src')); }).length > 0, 'Your image should have have a src attribute that points to the kitten image.')" + "assert($(\"img\").length > 0, 'Your page should have an image element.')", + "assert($(\"img\").filter(function(index) { return /http:\\/\\/bit\\.ly\\/fcc-relaxing-cat/gi.test($(\"img\").attr(\"src\")); }).length > 0, 'Your image should have have a src attribute that points to the kitten image.')" ], "challengeSeed": [ - "", + "", "", "", - "

        CatPhotoApp

        ", + "

        CatPhotoApp

        ", "", - "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", - "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " + "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", + "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " ], "type": "waypoint", "challengeType": 0, @@ -793,10 +793,10 @@ "descriptionPt": [], "nameDe": "Waypoint: Füge Bilder zu deiner Website hinzu", "descriptionDe": [ - "Nutze ein img Element um das Bild http://bit.ly/fcc-kittens einzufügen.", + "Nutze ein img Element um das Bild https://bit.ly/fcc-relaxing-cat einzufügen.", "Du kannst img Elemente verwenden, um Bilder in deine Website einzubauen. Um zur URL des Bildes zu verweisen, benutzt du das src Attribut.", "Ein Beispiel dafür wäre <img src=\"www.bild-quelle.com/bild.jpg\"/>. Beachte, dass img Elemente in den meisten Fällen selbstschließend sind.", - "Versuche es mit diesem Bild: http://bit.ly/fcc-kittens." + "Versuche es mit diesem Bild: https://bit.ly/fcc-relaxing-cat." ] }, { @@ -809,11 +809,11 @@ "Create a class called smaller-image and use it to resize the image so that it's only 100 pixels wide." ], "tests": [ - "assert($('img').hasClass('smaller-image'), 'Your img element should have the class \"smaller-image\".')", - "assert($('img').width() === 100, 'Your image should be 100 pixels wide.')" + "assert($(\"img\").hasClass(\"smaller-image\"), 'Your img element should have the class \"smaller-image\".')", + "assert($(\"img\").width() === 100, 'Your image should be 100 pixels wide.')" ], "challengeSeed": [ - "", + "", "", "", - "

        CatPhotoApp

        ", + "

        CatPhotoApp

        ", "", - "", + "", "", - "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", - "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " + "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", + "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " ], "type": "waypoint", "challengeType": 0, @@ -865,14 +865,14 @@ "Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border with a style of \"solid\" around an HTML element, and apply that class to your cat photo." ], "tests": [ - "assert($('img').hasClass('smaller-image'), 'Your img element should have the class \"smaller-image\".')", - "assert($('img').hasClass('thick-green-border'), 'Your img element should have the class \"thick-green-border\".')", - "assert($('img').hasClass('thick-green-border') && parseInt($('img').css('border-top-width')), 'Give your image a border width of 10px.')", - "assert(new RegExp('solid', 'gi').test(editor), 'Give your image a border style of \"solid\".')", - "assert($('img').css('border-left-color') === 'rgb(0, 128, 0)', 'The border around your img element should be green.')" + "assert($(\"img\").hasClass(\"smaller-image\"), 'Your img element should have the class \"smaller-image\".')", + "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your img element should have the class \"thick-green-border\".')", + "assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\")), 'Give your image a border width of 10px.')", + "assert(new RegExp(\"solid\", \"gi\").test(editor), 'Give your image a border style of \"solid\".')", + "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'The border around your img element should be green.')" ], "challengeSeed": [ - "", + "", "", "", - "

        CatPhotoApp

        ", + "

        CatPhotoApp

        ", "", - "", + "", "", - "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", - "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " + "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", + "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " ], "type": "waypoint", "challengeType": 0, @@ -928,11 +928,11 @@ "Give your cat photo a border-radius of 10 pixels." ], "tests": [ - "assert($('img').hasClass('thick-green-border'), 'Your image element should have the class \"thick-green-border\".')", - "assert(parseInt($('img').css('border-top-left-radius')) > 8, 'Your image should have a border radius of 10 pixels')" + "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your image element should have the class \"thick-green-border\".')", + "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'Your image should have a border radius of 10 pixels')" ], "challengeSeed": [ - "", + "", "", "", - "

        CatPhotoApp

        ", + "

        CatPhotoApp

        ", "", - "", + "", "", - "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", - "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " + "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", + "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " ], "type": "waypoint", "challengeType": 0, @@ -993,11 +993,11 @@ "Give your cat photo a border-radius of 50%." ], "tests": [ - "assert(parseInt($('img').css('border-top-left-radius')) > 48, 'Your image should have a border radius of 50 percent, making it perfectly circular.')", + "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'Your image should have a border radius of 50 percent, making it perfectly circular.')", "assert(editor.match(/50%/g), 'Be sure to use a percentage instead of a pixel value.')" ], "challengeSeed": [ - "", + "", "", "", - "

        CatPhotoApp

        ", + "

        CatPhotoApp

        ", "", - "", + "", "", - "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", - "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " + "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", + "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " ], "type": "waypoint", "challengeType": 0, @@ -1056,17 +1056,17 @@ "description": [ "a elements or \"anchor\" elements, are used to link to content outside of the current page.", "Here's a diagram of an a element. In this case, the a element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.", - "a diagram of how anchor tags are composed with the same text as on the following line", - "Here's an example: <p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p>.", + "\"a", + "Here's an example: <p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p>.", "Create an a element that links to http://catphotoapp.com and has \"cat photos\" as its \"anchor text\"." ], "tests": [ - "assert((/cat photos/gi).test($('a').text()), 'Your a element should have the anchor text of \"cat photos\"')", - "assert(/http:\\/\\/catphotoapp\\.com/gi.test($('a').attr('href')), 'You need an a element that links to http://catphotoapp.com.')", + "assert((/cat photos/gi).test($(\"a\").text()), \"Your a element should have the anchor text of \"cat photos\"\")", + "assert(/http:\\/\\/catphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'You need an a element that links to http://catphotoapp.com.')", "assert(editor.match(/<\\/a>/g) && editor.match(/<\\/a>/g).length === editor.match(/a element has a closing tag.')" ], "challengeSeed": [ - "", + "", "", "", - "

        CatPhotoApp

        ", + "

        CatPhotoApp

        ", "", - "", + "", "", - "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", - "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " + "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", + "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " ], "type": "waypoint", "challengeType": 0, @@ -1116,8 +1116,8 @@ "descriptionDe": [ "Erstelle ein a Element oder \"Anker Element\", das auf http://catphotoapp.com verlinkt und den Link-Text \"cat photos\" oder \"anchor text\" beinhaltet.", "So sieht ein a Element aus. In diesem Fall wird es innerhalb eines Paragraphen Elements verwendet. Das bedeutet dein Link wird innerhalb des Satzes erscheinen.", - "Ein Beispiel wie Anker Tags geschrieben werden.", - "Hier ist ein Beispiel: <p>Hier ist ein <a href='http://freecodecamp.com'> Link zum Free Code Camp</a> für dich zum Folgen.</p>." + "\"Ein", + "Hier ist ein Beispiel: <p>Hier ist ein <a href=\"http://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p>." ] }, { @@ -1126,22 +1126,22 @@ "difficulty": 1.23, "description": [ "Again, here's a diagram of an a element for your reference:", - "a diagram of how anchor tags are composed with the same text as on the following line", - "Here's an example: <p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p>.", + "\"a", + "Here's an example: <p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p>.", "\"Nesting\" just means putting one element inside of another element.", "Now nest your a element within a new p 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": [ - "assert($('a').attr('href').match(/catphotoapp.com/gi).length > 0, 'You need an a element that links to \"catphotoapp.com\".')", - "assert($('a').text().match(/cat\\sphotos/gi).length > 0, 'Your a element should have the anchor text of \"cat photos\"')", - "assert($('p') && $('p').length > 2, 'Create a new p element around your a element. \"click here for\".')", - "assert($('a[href=\\'http://www.catphotoapp.com\\']').parent().is('p'), 'Your a element should be nested within your new p element.')", - "assert($('p').text().match(/click\\shere\\sfor/gi), 'Your p element should have the text \"click here for\".')", + "assert($(\"a\").attr(\"href\").match(/catphotoapp.com/gi).length > 0, 'You need an a element that links to \"catphotoapp.com\".')", + "assert($(\"a\").text().match(/cat\\sphotos/gi).length > 0, 'Your a element should have the anchor text of \"cat photos\"')", + "assert($(\"p\") && $(\"p\").length > 2, 'Create a new p element around your a element. \"click here for\".')", + "assert($(\"a[href=\"http://www.catphotoapp.com\"]\").parent().is(\"p\"), 'Your a element should be nested within your new p element.')", + "assert($(\"p\").text().match(/click\\shere\\sfor/gi), 'Your p element should have the text \"click here for\".')", "assert(editor.match(/<\\/p>/g) && editor.match(/

        /g).length === editor.match(/

        p elements has a closing tag.')", "assert(editor.match(/<\\/a>/g) && editor.match(//g).length === editor.match(/a elements has a closing tag.')" ], "challengeSeed": [ - "", + "", "", "", - "

        CatPhotoApp

        ", + "

        CatPhotoApp

        ", "", - "        cat photos", + "cat photos", "", - "", + "", "", - "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", - "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " + "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", + "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " ], "type": "waypoint", "challengeType": 0, @@ -1192,8 +1192,8 @@ "nameDe": "Waypoint Umschließe ein Anker Element mit einem Paragraphen", "descriptionDe":[ "Jetzt umschließe dein a Element mit einem p Element und dem Text \"click here for cat photos\". Nur \"cat photos\" soll ein Link ein – der Rest normaler Text.", - "Hier ist nochmal ein Beispiel für ein a Element: Ein Beispiel wie Anker Tags geschrieben werden.", - "So könnte es aussehen: <p>Hier ist ein <a href='http://freecodecamp.com'> Link zum Free Code Camp</a> für dich zum Folgen.</p>" + "Hier ist nochmal ein Beispiel für ein a Element: \"Ein", + "So könnte es aussehen: <p>Hier ist ein <a href=\"http://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p>" ] }, { @@ -1206,10 +1206,10 @@ "Replace your a element's href attribute with a hash symbol (#) to turn it into a dead link." ], "tests": [ - "assert($('a').attr('href') === '#', 'Your anchor element should be a dead link with a href attribute set to \"#\".')" + "assert($(\"a\").attr(\"href\") === \"#\", 'Your anchor element should be a dead link with a href attribute set to \"#\".')" ], "challengeSeed": [ - "", + "", "", "", - "

        CatPhotoApp

        ", + "

        CatPhotoApp

        ", "", - "

        Click here for cat photos.

        ", + "

        Click here for cat photos.

        ", "", - "", + "", "", - "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", - "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " + "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", + "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " ], "type": "waypoint", "challengeType": 0, @@ -1271,17 +1271,17 @@ "difficulty": 1.25, "description": [ "You can make elements into links by nesting them within an a element.", - "Nest your image within an a element. Here's an example: <a href='#'><img src='http://bit.ly/fcc-kittens2'/></a>.", + "Nest your image within an a element. Here's an example: <a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a>.", "Remember to use the hash symbol (#) as your a element's href property in order to turn it into a dead link.", "Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link." ], "tests": [ - "assert($('a').children('img').length > 0, 'Nest your img element within an a element.')", - "assert(new RegExp('#').test($('a').children('img').parent().attr('href')), 'Your a element should be a dead link with a href attribute set to \"#\".')", + "assert($(\"a\").children(\"img\").length > 0, 'Nest your img element within an a element.')", + "assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'Your a element should be a dead link with a href attribute set to \"#\".')", "assert(editor.match(/<\\/a>/g) && editor.match(//g).length === editor.match(/a elements has a closing tag.')" ], "challengeSeed": [ - "", + "", "", "", - "

        CatPhotoApp

        ", + "

        CatPhotoApp

        ", "", - "

        Click here for cat photos.

        ", + "

        Click here for cat photos.

        ", "", - "", + "", "", - "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", - "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " + "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", + "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " ], "type": "waypoint", "challengeType": 0, @@ -1333,7 +1333,7 @@ "descriptionDe": [ "Umschließe dein img Element mit einem a Element als toten Link.", "Du kannst jedes Element in einen Link verwandeln, indem du es mit einem a Element umschließt.", - "Umschließe nun dein Bild mit einem a Element. Hier ist ein Beispiel: <a href='#'><img src='http://bit.ly/fcc-kittens2'/></a>.", + "Umschließe nun dein Bild mit einem a Element. Hier ist ein Beispiel: <a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a>.", "Vergewissere dich, dass du ein Hash Symbol (#) innerhalb des href Attributs des a Elements nutzt, um daraus einen toten Link zu machen.", "Sobald du das gemacht hast, kannst du mit der Maus über dein Bild fahren. Der normale Mauszeiger sollte nun zu einer Hand für Links werden. Das Bild ist jetzt ein Link." ] @@ -1349,10 +1349,10 @@ "Add an alt attribute with the text \"A cute orange cat lying on its back\" to our cat photo." ], "tests": [ - "assert($('img').filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'Your image element should have an alt attribute set to \"A cute orange cat lying on its back\".')" + "assert($(\"img\").filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'Your image element should have an alt attribute set to \"A cute orange cat lying on its back\".')" ], "challengeSeed": [ - "", + "", "", "", - "

        CatPhotoApp

        ", + "

        CatPhotoApp

        ", "", - "

        Click here for cat photos.

        ", + "

        Click here for cat photos.

        ", "", - "", + "", "", - "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", - "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " + "

        Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

        ", + "

        Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

        " ], "type": "waypoint", "challengeType": 0, @@ -1425,13 +1425,13 @@ "Replace your p elements with an unordered list of three things that cats love." ], "tests": [ - "assert($('ul').length > 0, 'Create a ul element.')", - "assert($('ul li').length > 2, 'You should have three li elements within your ul element.')", + "assert($(\"ul\").length > 0, 'Create a ul element.')", + "assert($(\"ul li\").length > 2, 'You should have three li elements within your ul element.')", "assert(editor.match(/<\\/ul>/g) && editor.match(/
          /g).length === editor.match(/
            ul element has a closing tag.')", "assert(editor.match(/<\\/li>/g) && editor.match(/
          • /g) && editor.match(/<\\/li>/g).length === editor.match(/
          • /g).length, 'Make sure your li element has a closing tag.')" ], "challengeSeed": [ - "", + "", "", "", - "

            CatPhotoApp

            ", + "

            CatPhotoApp

            ", "", - "

            Click here for cat photos.

            ", + "

            Click here for cat photos.

            ", "", - "", + "", "", - "

            Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

            ", - "

            Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

            " + "

            Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

            ", + "

            Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

            " ], "type": "waypoint", "challengeType": 0, @@ -1498,16 +1498,16 @@ "Create an ordered list of the top 3 things cats hate the most." ], "tests": [ - "assert($('ul').length > 0, 'You should have an ul element on your page.')", - "assert($('ol').length > 0, 'You should have an ol element on your page.')", - "assert($('ul li').length > 2, 'You should have three li elements within your ul element.')", - "assert($('ol li').length > 2, 'You should have three li elements within your ol element.')", + "assert($(\"ul\").length > 0, 'You should have an ul element on your page.')", + "assert($(\"ol\").length > 0, 'You should have an ol element on your page.')", + "assert($(\"ul li\").length > 2, 'You should have three li elements within your ul element.')", + "assert($(\"ol li\").length > 2, 'You should have three li elements within your ol element.')", "assert(editor.match(/<\\/ul>/g) && editor.match(/<\\/ul>/g).length === editor.match(/
              /g).length, 'Make sure your ul element has a closing tag.')", "assert(editor.match(/<\\/ol>/g) && editor.match(/<\\/ol>/g).length === editor.match(/
                /g).length, 'Make sure your ol element has a closing tag.')", "assert(editor.match(/<\\/li>/g) && editor.match(/
              1. /g) && editor.match(/<\\/li>/g).length === editor.match(/
              2. /g).length, 'Make sure your li element has a closing tag.')" ], "challengeSeed": [ - "", + "", "", "", - "

                CatPhotoApp

                ", + "

                CatPhotoApp

                ", "", - "

                Click here for cat photos.

                ", + "

                Click here for cat photos.

                ", "", - "", + "", "", "

                Things cats love:

                ", "
                  ", @@ -1579,10 +1579,10 @@ "Create an input element of type \"text\" below your lists." ], "tests": [ - "assert($('input[type=text]').length > 0, 'Your app should have a text field input element.')" + "assert($(\"input[type=text]\").length > 0, 'Your app should have a text field input element.')" ], "challengeSeed": [ - "", + "", "", "", - "

                  CatPhotoApp

                  ", + "

                  CatPhotoApp

                  ", "", - "

                  Click here for cat photos.

                  ", + "

                  Click here for cat photos.

                  ", "", - "", + "", "", "

                  Things cats love:

                  ", "
                    ", @@ -1644,7 +1644,7 @@ "descriptionDe": [ "Nun erstellen wir ein Web Formular. Erstelle ein Textfeld unter deinen Listen.", "Eingabefelder sind ein guter Weg, um Daten von Nutzern zu erhalten.", - "So kannst du eines erstellen: <input type='text'>. Beachte, dass input Elemente selbstschließend sind." + "So kannst du eines erstellen: <input type=\"text\">. Beachte, dass input Elemente selbstschließend sind." ] }, { @@ -1653,15 +1653,15 @@ "difficulty": 1.30, "description": [ "Your placeholder text is what appears in your text input before your user has inputed anything.", - "You can create placeholder text like so: <input type='text' placeholder='this is placeholder text'>.", + "You can create placeholder text like so: <input type=\"text\" placeholder=\"this is placeholder text\">.", "Set the placeholder value of your text input to \"cat photo URL\"." ], "tests": [ - "assert($('input[placeholder]').length > 0, 'Add a placeholder attribute text input element.')", - "assert($('input') && $('input').attr('placeholder') && $('input').attr('placeholder').match(/cat\\s+photo\\s+URL/gi), 'Set the value of your placeholder attribute to \"cat photo URL\".')" + "assert($(\"input[placeholder]\").length > 0, 'Add a placeholder attribute text input element.')", + "assert($(\"input\") && $(\"input\").attr(\"placeholder\") && $(\"input\").attr(\"placeholder\").match(/cat\\s+photo\\s+URL/gi), 'Set the value of your placeholder attribute to \"cat photo URL\".')" ], "challengeSeed": [ - "", + "", "", "", - "

                    CatPhotoApp

                    ", + "

                    CatPhotoApp

                    ", "", - "

                    Click here for cat photos.

                    ", + "

                    Click here for cat photos.

                    ", "", - "", + "", "", "

                    Things cats love:

                    ", "
                      ", @@ -1706,7 +1706,7 @@ "
                    • thunder
                      • ", "
                    • other cats
                      • ", "
              ", - "" + "" ], "type": "waypoint", "challengeType": 0, @@ -1724,7 +1724,7 @@ "descriptionDe": [ "Setze bei deinem input Element den Wert für placeholder auf \"cat photo URL\".", "Platzhalter erscheinen in input Feldern, bevor der Nutzer etwas eingibt.", - "Du kannst Platzhalter auf folgende Weise erstellen: <input type='text' placeholder='Das ist ein Platzhalter.'>." + "Du kannst Platzhalter auf folgende Weise erstellen: <input type=\"text\" placeholder=\"Das ist ein Platzhalter.\">." ] }, { @@ -1737,13 +1737,13 @@ "Nest your text field in a form element. Add the action=\"/submit-cat-photo\" attribute to this form element." ], "tests": [ - "assert($('form') && $('form').children('input') && $('form').children('input').length > 0, 'Nest your text input element within a form element.')", - "assert($('form').attr('action'), 'Your form element should have an action attribute.')", + "assert($(\"form\") && $(\"form\").children(\"input\") && $(\"form\").children(\"input\").length > 0, 'Nest your text input element within a form element.')", + "assert($(\"form\").attr(\"action\"), 'Your form element should have an action attribute.')", "assert(editor.match(/<\\/form>/g) && editor.match(/
              /g).length === editor.match(/form element has a closing tag.')", "assert(editor.match(/\\/submit-cat-photo/ig), 'Make sure your form action is set to /submit-cat-photo.')" ], "challengeSeed": [ - "", + "", "", "", - "

              CatPhotoApp

              ", + "

              CatPhotoApp

              ", "", - "

              Click here for cat photos.

              ", + "

              Click here for cat photos.

              ", "", - "", + "", "", "

              Things cats love:

              ", "
                ", @@ -1788,7 +1788,7 @@ "
              • thunder
                • ", "
              • other cats
                • ", "", - "" + "" ], "type": "waypoint", "challengeType": 0, @@ -1815,17 +1815,17 @@ "difficulty": 1.32, "description": [ "Let's add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form's action attribute.", - "Here's an example submit button: <button type='submit'>this button submits the form</button>.", + "Here's an example submit button: <button type=\"submit\">this button submits the form</button>.", "Add a submit button to your form element with type \"submit\" and \"Submit\" as its text." ], "tests": [ - "assert($('form').children('button').length > 0, 'Your form should have a button inside it.')", - "assert($('button').attr('type') === 'submit', 'Your submit button should have the attribute \"type\" set to \"submit\".')", - "assert($('button').text().match(/submit/gi), 'Your submit button should have the text \"submit\".')", + "assert($(\"form\").children(\"button\").length > 0, 'Your form should have a button inside it.')", + "assert($(\"button\").attr(\"type\") === \"submit\", 'Your submit button should have the attribute \"type\" set to \"submit\".')", + "assert($(\"button\").text().match(/submit/gi), 'Your submit button should have the text \"submit\".')", "assert(editor.match(/<\\/button>/g) && editor.match(/", + " ", + " ", "" ], "type": "waypoint", @@ -1972,7 +1972,7 @@ "descriptionDe": [ "Mache aus deinem input Feld ein Pflichtfeld – \"required\" – damit deine Nutzer das Formular nicht abschicken können, ohne dieses Feld auszufüllen.", "Du kannst bestimmte Felder eines Formulars als Pflichtfelder deklarieren. Damit ist es deinen Nutzern nicht mehr möglich, das Formular abzuschicken, ohne die Pflichtfelder auszufüllen.", - "Um zum Beispiel ein Textfeld als Pflichtfeld zu deklarieren, kannst du einfach ein \"required\" innerhalb deines input Elements hinzufügen: <input type='text' required>." + "Um zum Beispiel ein Textfeld als Pflichtfeld zu deklarieren, kannst du einfach ein \"required\" innerhalb deines input Elements hinzufügen: <input type=\"text\" required>." ] }, { @@ -1984,19 +1984,19 @@ "Radio buttons are a type of input.", "Each of your radio buttons should be nested within its own label element.", "All related radio buttons should have the same name attribute.", - "Here's an example of a radio button: <label><input type='radio' name='indoor-outdoor'> Indoor</label>.", + "Here's an example of a radio button: <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>.", "Add to your form a pair of radio buttons. Each radio button should be nested within its own label element. They should share a common name attribute. One should have the option of \"indoor\" and the other should have the option of \"outdoor\"." ], "tests": [ - "assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')", - "assert($('input[type=\"radio\"]:nth-child(1)').attr('name') === 'indoor-outdoor' && $('input[type=\"radio\"]:nth-child(2)').attr('name') === 'indoor-outdoor', 'Give your radio buttons the name attribute of \"indoor-outdoor\".')", - "assert($('label').length > 1, 'Each of your two radio button elements should be nested in a label element.')", + "assert($(\"input[type=\"radio\"]\").length > 1, 'Your page should have two radio button elements.')", + "assert($(\"input[type=\"radio\"]:nth-child(1)\").attr(\"name\") === \"indoor-outdoor\" && $(\"input[type=\"radio\"]:nth-child(2)\").attr(\"name\") === \"indoor-outdoor\", 'Give your radio buttons the name attribute of \"indoor-outdoor\".')", + "assert($(\"label\").length > 1, 'Each of your two radio button elements should be nested in a label element.')", "assert(editor.match(/<\\/label>/g) && editor.match(/