diff --git a/.gitignore b/.gitignore index 86cbd7b0c8..0f96fb3ee1 100644 --- a/.gitignore +++ b/.gitignore @@ -30,5 +30,20 @@ coverage .remote-sync.json server/*.bundle.js -public/js/*.bundle.js +public/js/bundle* + *.map + +// revision manifest +server/rev-manifest.json +server/manifests/* +!server/manifests/README.md + +public/js/main* +public/js/commonFramework* +public/js/sandbox* +public/js/iFrameScripts* +public/js/plugin* +public/css/main* + +server/rev-manifest.json diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000000..ba4e245107 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,2 @@ +We're getting a lot of duplicate issues and bug reports that just aren't reporting actual bugs. +So, before you submit your issue, please read the [Help I've Found a Bug](https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Help-I've-Found-a-Bug) wiki page. diff --git a/README.md b/README.md index d62477d7bd..dba5013540 100644 --- a/README.md +++ b/README.md @@ -66,6 +66,8 @@ bower install # Create a .env file and populate it with the necessary API keys and secrets: touch .env +# Install Gulp globally +npm install -g gulp ``` Edit your .env file with the following API keys accordingly (if you only use email login, only the MONGOHQ_URL, SESSION_SECRET, MANDRILL_USER and MANDRILL_PASSWORD fields are necessary. Keep in mind if you want to use more services you'll have to get your own API keys for those services. @@ -112,6 +114,11 @@ DEBUG=true # Start the mongo server mongod +# Create your mongo database. +# Type "mongo" in your terminal to access the mongo shell +use freecodecamp +# Exit the mongo shell with control + d + # Seed your database with the challenges node seed/ diff --git a/client/README.md b/client/README.md index 5ba2586944..b722fceb9c 100644 --- a/client/README.md +++ b/client/README.md @@ -1,4 +1,4 @@ -This is the entry point for the client +This is the entry point for the client code Code that should only run on the client should be put here. NOTE(berks): For react specific stuff this should be the entry point diff --git a/client/commonFramework.js b/client/commonFramework.js new file mode 100644 index 0000000000..91af03d409 --- /dev/null +++ b/client/commonFramework.js @@ -0,0 +1,769 @@ +/* globals jailed, CodeMirror, challenge_Id, challenge_Name, challengeType */ +// codeStorage +var codeStorageFactory = (function($, localStorage) { + + var CodeStorageProps = { + version: 0.01, + keyVersion: 'saveVersion', + keyValue: null, + updateWait: 2000, + updateTimeoutId: null + }; + + var CodeStorage = { + hasSaved: function() { + return this.updateTimeoutId === null; + }, + + onSave: function(func) { + this.eventArray.push(func); + }, + + setSaveKey: function(key) { + this.keyValue = key + 'Val'; + }, + + getStoredValue: function() { + return '' + localStorage.getItem(this.keyValue); + }, + + setEditor: function(editor) { + this.editor = editor; + }, + + isAlive: function() { + var val = this.getStoredValue(); + return val !== 'null' && + val !== 'undefined' && + (val && val.length > 0); + }, + + updateStorage: function() { + if (typeof localStorage !== 'undefined') { + var value = this.editor.getValue(); + localStorage.setItem(this.keyValue, value); + } else { + console.log('no web storage'); + } + this.updateTimeoutId = null; + } + }; + + function codeStorageFactory(editor, challengeName) { + var codeStorage = Object.create(CodeStorage); + $.extend(codeStorage, CodeStorageProps); + codeStorage.setEditor(editor); + codeStorage.setSaveKey(challengeName); + return codeStorage; + } + + var savedVersion = localStorage.getItem(CodeStorageProps.keyVersion); + if (savedVersion === null) { + localStorage.setItem( + CodeStorageProps.keyVersion, + CodeStorageProps.version + ); + } + + return codeStorageFactory; +}($, localStorage)); + +var sandBox = (function() { + + var plugin = null; + + var sandBox = { + }; + + var printCallback; + + // sends the input to the plugin for evaluation + function submit(code, callback) { + printCallback = callback; + + // postpone the evaluation until the plugin is initialized + plugin.whenConnected(function() { + if (requests === 0) { + startLoading(); + } + + requests++; + plugin.remote.run(code); + }); + } + + // puts the message on the terminal + var print = function(cls, msg) { + printCallback(cls, msg); + }; + + + // will restart the plugin if it does not respond + var disconnectTimeout = null; + var startLoading = function() { + disconnectTimeout = setTimeout(disconnect, 3000); + }; + + var endLoading = function() { + clearTimeout(disconnectTimeout); + }; + + var disconnect = function() { + plugin.disconnect(); + }; + + + // interface provided to the plugin + var api = { + output: function(data) { + endLoading(); + // print('input', data.input); + + if (data.error) { + print('Error', data); + reset(); + } else { + print(null, data); + reset(); + } + } + }; + + + // obtaining absolute path of this script + var scripts = document.getElementsByTagName('script'); + var path = scripts[scripts.length - 1].src + .split('?')[0] + .split('/') + .slice(0, -1) + .join('/') + '/'; + + var requests; + + // (re)initializes the plugin + var reset = function() { + requests = 0; + plugin = new jailed.Plugin(path + 'plugin.js', api); + plugin.whenDisconnected( function() { + // give some time to handle the last responce + setTimeout( function() { + endLoading(); + console.log('resetting on fatal plugin error'); + + if (challengeType === 0) { + codeOutput.setValue( + 'Sorry, your code is either too slow, has a fatal error, ' + + 'or contains an infinite loop.' + ); + } + reset(); + }, 10); + }); + }; + reset(); + sandBox.submit = submit; + return sandBox; +}()); + +function replaceSafeTags(value) { + return value + .replace(/fccss/gi, ''); +} + +var BDDregex = new RegExp( + '(expect(\\s+)?\\(.*\\;)|' + + '(assert(\\s+)?\\(.*\\;)|' + + '(assert\\.\\w.*\\;)|' + + '(.*\\.should\\..*\\;)/' +); + +var isInitRun = false; +var initPreview = true; +var editor; + +editor = CodeMirror.fromTextArea(document.getElementById('codeEditor'), { + lineNumbers: true, + mode: 'text', + theme: 'monokai', + runnable: true, + matchBrackets: true, + autoCloseBrackets: true, + scrollbarStyle: 'null', + lineWrapping: true, + gutters: ['CodeMirror-lint-markers'] +}); + +var codeStorage = codeStorageFactory(editor, challenge_Name); +var myCodeMirror = editor; + +editor.on('keyup', function() { + clearTimeout(codeStorage.updateTimeoutId); + codeStorage.updateTimeoutId = setTimeout( + codeStorage.updateStorage, + codeStorage.updateWait + ); +}); + +var editorValue; +var challengeSeed = challengeSeed || null; +var tests = tests || []; +var allSeeds = ''; + +(function() { + challengeSeed.forEach(function(elem) { + allSeeds += elem + '\n'; + }); +})(); + +editor.setOption('extraKeys', { + Tab: function(cm) { + if (cm.somethingSelected()) { + cm.indentSelection('add'); + } else { + var spaces = Array(cm.getOption('indentUnit') + 1).join(' '); + cm.replaceSelection(spaces); + } + }, + 'Shift-Tab': function(cm) { + if (cm.somethingSelected()) { + cm.indentSelection('subtract'); + } else { + var spaces = Array(cm.getOption('indentUnit') + 1).join(' '); + cm.replaceSelection(spaces); + } + }, + 'Ctrl-Enter': function() { + bonfireExecute(true); + return false; + } +}); + +editor.setSize('100%', 'auto'); + +var libraryIncludes = "" + + "" + + "" + + "" + + "" + + "" + + "" + + '' + + ''; + +var editorValueForIFrame; +var iFrameScript = ""; +var delay; + +function workerError(error) { + var display = $('.runTimeError'); + var housing = $('#testSuite'); + if (display.html() !== error) { + display.remove(); + housing.prepend( + '
' +
+ error.replace(/j\$/gi, '$').replace(/jdocument/gi, 'document').replace(/jjQuery/gi, 'jQuery') +
+ '
[{ first: 'Romeo', last: 'Montague' }, { first: 'Mercutio', last: null }, { first: 'Tybalt', last: 'Capulet' }]
, and the second argument is { last: 'Capulet' }
, then you must return the the third object from the array (the first argument), because it contains the property and it's value, that was passed on as the second argument.",
"Remember to use Read-Search-Ask if you get stuck. Write your own code."
],
"challengeSeed": [
@@ -582,7 +584,9 @@
],
"tests": [
"assert.deepEqual(where([{ first: 'Romeo', last: 'Montague' }, { first: 'Mercutio', last: null }, { first: 'Tybalt', last: 'Capulet' }], { last: 'Capulet' }), [{ first: 'Tybalt', last: 'Capulet' }], 'should return an array of objects');",
- "assert.deepEqual(where([{ 'a': 1 }, { 'a': 1 }, { 'a': 1, 'b': 2 }], { 'a': 1 }), [{ 'a': 1 }, { 'a': 1 }, { 'a': 1, 'b': 2 }], 'should return with multiples');"
+ "assert.deepEqual(where([{ 'a': 1 }, { 'a': 1 }, { 'a': 1, 'b': 2 }], { 'a': 1 }), [{ 'a': 1 }, { 'a': 1 }, { 'a': 1, 'b': 2 }], 'should return with multiples');",
+ "assert.deepEqual(where([{ 'a': 1, 'b': 2 }, { 'a': 1 }, { 'a': 1, 'b': 2, 'c': 2 }], { 'a': 1, 'b': 2 }), [{ 'a': 1, 'b': 2 }, { 'a': 1, 'b': 2, 'c': 2 }], 'should return two objects in array');",
+ "assert.deepEqual(where([{ 'a': 5 }, { 'a': 5 }, { 'a': 5, 'b': 10 }], { 'a': 5, 'b': 10 }), [{ 'a': 5, 'b': 10 }], 'should return a single object in array');"
],
"MDNlinks": [
"Global Object",
diff --git a/seed/challenges/basic-javascript.json b/seed/challenges/basic-javascript.json
index fa59afe650..fb2d2736da 100644
--- a/seed/challenges/basic-javascript.json
+++ b/seed/challenges/basic-javascript.json
@@ -13,7 +13,8 @@
"// This is a comment.
",
"The slash-star-star-slash comment will comment out everything between the /*
and the */
characters:",
"/* This is also a comment */
",
- "Try creating one of each."
+ "Try creating one of each.",
+ "And one more thing you need to notice. Starting at this waypoint in JavaScript related challenges (except AngularJS, all Ziplines, Git, Node.js and Express.js, MongoDB and Full Stack JavaScript Projects) you can see contents of assert()
functions (in some challenges except()
, assert.equal()
and so on) which are used to test your code. It's part of these challenges that you are able to see the tests that are running against your code."
],
"tests":[
"assert(editor.getValue().match(/(\\/\\/)...../g), 'Create a \\/\\/
style comment that contains at least five letters');",
@@ -65,7 +66,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\";",
@@ -75,7 +76,7 @@
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
"",
- "if(typeof(myName) !== \"undefined\"){(function(v){return(v);})(myName);}"
+ "if(typeof(myName) !== \"undefined\"){(function(v){return v;})(myName);}"
],
"type": "waypoint",
"challengeType": 1
@@ -89,8 +90,8 @@
"Now let's create two new string variables: myFirstName
and myLastName
and assign them the values of your first and last name, 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": [
"// name = \"Alan Turing\";",
@@ -101,7 +102,7 @@
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "if(typeof(myFirstName) !== \"undefined\" && typeof(myLastName) !== \"undefined\"){(function(){return(myFirstName + ', ' + myLastName);})();}"
+ "if(typeof(myFirstName) !== \"undefined\" && typeof(myLastName) !== \"undefined\"){(function(){return myFirstName + ', ' + myLastName;})();}"
],
"type": "waypoint",
"challengeType": 1
@@ -113,11 +114,11 @@
"description": [
"data structures
have properties
. For example, strings
have a property called .length
that will tell you how many characters are in the string.",
"For example, if we created a variable var firstName = \"Charles\"
, we could find out how long the string \"Charles\" is by using the firstName.length
property.",
- "Use the .length
property to count the number of characters in the lastNameLength
variable."
+ "Use the .length
property to count the number of characters in the lastName
variable."
],
"tests": [
- "assert((function(){if(typeof(lastNameLength) !== \"undefined\" && typeof(lastNameLength) === \"number\" && lastNameLength === 8){return(true);}else{return(false);}})(), 'lastNameLength should be equal to eight.');",
- "assert((function(){if(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
');"
+ "assert((function(){if(typeof(lastNameLength) !== \"undefined\" && typeof(lastNameLength) === \"number\" && lastNameLength === 8){return true;}else{return false;}})(), 'lastNameLength should be equal to eight.');",
+ "assert((function(){if(editor.getValue().match(/\\.length/gi) && editor.getValue().match(/\\.length/gi).length >= 2 && editor.getValue().match(/var lastNameLength \\= 0;/gi) && editor.getValue().match(/var lastNameLength \\= 0;/gi).length >= 1){return true;}else{return false;}})(), 'You should be getting the length of lastName
by using .length
like this: lastName.length
');"
],
"challengeSeed": [
"var firstNameLength = 0;",
@@ -137,7 +138,7 @@
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "if(typeof(lastNameLength) !== \"undefined\"){(function(){return(lastNameLength);})();}"
+ "if(typeof(lastNameLength) !== \"undefined\"){(function(){return lastNameLength;})();}"
],
"type": "waypoint",
"challengeType": 1
@@ -150,14 +151,14 @@
"Bracket notation
is a way to get a character at a specific index
within a string.",
"Computers don't start counting at 1 like humans do. They start at 0.",
"For example, the character at index 0 in the word \"Charles\" is \"C\". So if var firstName = \"Charles\"
, you can get the value of the first letter of the string by using firstName[0]
.",
- "Use bracket notation
to find the first character in a the firstLetterOfLastName
variable.",
+ "Use bracket notation
to find the first character in the firstLetterOfLastName
variable.",
"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 === \"L\"){return(true);}else{return(false);}})(), 'The first letter of firstLetterOfLastName should be a L');"
+ "assert((function(){if(typeof(firstLetterOfLastName) !== \"undefined\" && editor.getValue().match(/\\[0\\]/gi) && typeof(firstLetterOfLastName) === \"string\" && firstLetterOfLastName === \"L\"){return true;}else{return false;}})(), 'The first letter of firstLetterOfLastName should be a L');"
],
"challengeSeed": [
- "var firstLetterOfLastName = \"\";",
+ "var firstLetterOfFirstName = \"\";",
"var firstLetterOfLastName = \"\";",
"",
"var firstName = \"Ada\";",
@@ -172,7 +173,7 @@
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "(function(v){return(v);})(firstLetterOfLastName);"
+ "(function(v){return v;})(firstLetterOfLastName);"
],
"type": "waypoint",
"challengeType": 1
@@ -188,7 +189,7 @@
"Try looking at the secondLetterOfFirstName
variable declaration if you get stuck."
],
"tests": [
- "assert(thirdLetterOfLastName === 'v', 'The third last letter of lastName should be a \"v\"');"
+ "assert(thirdLetterOfLastName === 'v', 'The third letter of lastName should be a \"v\"');"
],
"challengeSeed": [
"var firstName = \"Ada\";",
@@ -203,7 +204,7 @@
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "(function(v){return(v);})(thirdLetterOfLastName);"
+ "(function(v){return v;})(thirdLetterOfLastName);"
],
"type": "waypoint",
"challengeType": 1
@@ -216,7 +217,7 @@
"In order to get the last letter of a string, you can subtract one from the string's length.",
"For example, if var firstName = \"Charles\"
, you can get the value of the last letter of the string by using firstName[firstName.length - 1]
.",
"Use bracket notation
to find the last character in the lastName
variable.",
- "Try looking at the lastLetterOfLastName
variable declaration if you get stuck."
+ "Try looking at the lastLetterOfFirstName
variable declaration if you get stuck."
],
"tests": [
"assert(lastLetterOfLastName === \"e\", 'lastLetterOfLastName should be \"e\"');",
@@ -235,7 +236,7 @@
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "(function(v){return(v);})(lastLetterOfLastName);"
+ "(function(v){return v;})(lastLetterOfLastName);"
],
"type": "waypoint",
"challengeType": 1
@@ -267,7 +268,7 @@
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "(function(v){return(v);})(secondToLastLetterOfLastName);"
+ "(function(v){return v;})(secondToLastLetterOfLastName);"
],
"type": "waypoint",
"challengeType": 1
@@ -282,7 +283,7 @@
"Replace the 0
with the correct number so you can get the result mentioned in the comment."
],
"tests": [
- "assert((function(){if(sum === 20 && editor.getValue().match(/\\+/g)){return(true);}else{return(false);}})(), 'Make the variable sum
equal 20');"
+ "assert((function(){if(sum === 20 && editor.getValue().match(/\\+/g)){return true;}else{return false;}})(), 'Make the variable sum
equal 20');"
],
"challengeSeed": [
"var sum = 10 + 0; //make this equal to 20 by changing the 0 into the appropriate number.",
@@ -290,7 +291,7 @@
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "(function(z){return('sum='+z);})(sum);"
+ "(function(z){return 'sum='+z;})(sum);"
],
"type": "waypoint",
"challengeType": 1
@@ -305,7 +306,7 @@
"Replace the 0
with the correct number so you can get the result mentioned in the comment."
],
"tests": [
- "assert((function(){if(difference === 12 && editor.getValue().match(/\\-/g)){return(true);}else{return(false);}})(), 'Make the variable difference
equal 12');"
+ "assert((function(){if(difference === 12 && editor.getValue().match(/\\-/g)){return true;}else{return false;}})(), 'Make the variable difference
equal 12');"
],
"challengeSeed": [
"var difference = 45 - 0; //make this equal to 12 by changing the 0 into the appropriate number.",
@@ -313,7 +314,7 @@
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "(function(z){return('difference='+z);})(difference);"
+ "(function(z){return 'difference='+z;})(difference);"
],
"type": "waypoint",
"challengeType": 1
@@ -328,7 +329,7 @@
"Replace the 0
with the correct number so you can get the result mentioned in the comment."
],
"tests": [
- "assert((function(){if(product === 80 && editor.getValue().match(/\\*/g)){return(true);}else{return(false);}})(), 'Make the variable product
equal 80.');"
+ "assert((function(){if(product === 80 && editor.getValue().match(/\\*/g)){return true;}else{return false;}})(), 'Make the variable product
equal 80.');"
],
"challengeSeed": [
"var product = 8 * 0; //make this equal to 80 by changing the 0 into the appropriate number.",
@@ -336,7 +337,7 @@
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "(function(z){return('product='+z);})(product)"
+ "(function(z){return 'product='+z;})(product);"
],
"type": "waypoint",
"challengeType": 1
@@ -351,7 +352,7 @@
"Replace the 0
with the correct number so you can get the result mentioned in the comment."
],
"tests": [
- "assert((function(){if(quotient === 2 && editor.getValue().match(/\\//g)){return(true);}else{return(false);}})(), 'Make the variable quotient
equal 2.');"
+ "assert((function(){if(quotient === 2 && editor.getValue().match(/\\//g)){return true;}else{return false;}})(), 'Make the variable quotient
equal 2.');"
],
"challengeSeed": [
"var quotient = 66 / 0; //make this equal to 2 by changing the 0 into the appropriate number.",
@@ -359,7 +360,7 @@
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "(function(z){return('quotient='+z);})(quotient);"
+ "(function(z){return 'quotient='+z;})(quotient);"
],
"type": "waypoint",
"challengeType": 1
@@ -373,7 +374,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;",
@@ -384,7 +385,7 @@
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "(function(){if(typeof(myDecimal) !== \"undefined\"){return(myDecimal);}})();"
+ "(function(){if(typeof(myDecimal) !== \"undefined\"){return myDecimal;}})();"
],
"type": "waypoint",
"challengeType": 1
@@ -398,7 +399,8 @@
"Replace the 0.0
with the correct number so that you get the result mentioned in the comments."
],
"tests": [
- "assert((function(){if(product === 5.0 && editor.getValue().match(/\\*/g)){return(true);}else{return(false);}})(), 'Make the variable product
equal 5.0.');"
+ "assert((function(){if(product === 5.0 && editor.getValue().match(/\\*/g)){return true;}else{return false;}})(), 'Make the variable product
equal 5.0.');",
+ "assert((function(){if(quotient === 2.2 && editor.getValue().match(/\\//g)){return true;}else{return false;}})(), 'Make the variable quotient
equal 2.2.');"
],
"challengeSeed": [
"var quotient = 4.4 / 2.0; // equals 2.2",
@@ -408,7 +410,7 @@
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "(function(y){return('product='+y);})(product);"
+ "(function(y){return 'product='+y;})(product);"
],
"type": "waypoint",
"challengeType": 1
@@ -431,14 +433,14 @@
"challengeSeed": [
"//var array = [\"John\", 23];",
"",
- "var myArray = [];",
"// Only change code below this line.",
"",
+ "var myArray = [];",
"",
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "(function(z){return(z);})(myArray);"
+ "(function(z){return z;})(myArray);"
],
"type": "waypoint",
"challengeType": 1
@@ -456,14 +458,14 @@
],
"challengeSeed":[
"var ourArray = [[\"the universe\", \"everything\", 42]];",
- "var myArray = [];",
"// Only change code below this line.",
"",
+ "var myArray = [];",
"",
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "if(typeof(myArray) !== \"undefined\"){(function(){return(myArray);})();}"
+ "if(typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}"
],
"type": "waypoint",
"challengeType": 1
@@ -482,7 +484,7 @@
"Create a variable called myData
and set it to equal the first value of myArray
."
],
"tests":[
- "assert((function(){if(typeof(myArray) != 'undefined' && typeof(myData) != 'undefined' && myArray[0] == myData){return(true);}else{return(false);}})(), 'The variable myData
should equal the first value of myArray');"
+ "assert((function(){if(typeof(myArray) != 'undefined' && typeof(myData) != 'undefined' && myArray[0] == myData){return true;}else{return false;}})(), 'The variable myData
should equal the first value of myArray');"
],
"challengeSeed":[
"//var ourArray = [1,2,3];",
@@ -495,7 +497,7 @@
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "if(typeof(myArray) !== \"undefined\" && typeof(data) !== \"undefined\"){(function(y,z){return('myArray = ' + JSON.stringify(y) + ', data = ' + JSON.stringify(z));})(myArray, data);}"
+ "if(typeof(myArray) !== \"undefined\" && typeof(myData) !== \"undefined\"){(function(y,z){return 'myArray = ' + JSON.stringify(y) + ', myData = ' + JSON.stringify(z);})(myArray, myData);}"
],
"type": "waypoint",
"challengeType": 1
@@ -512,8 +514,8 @@
"Now modify the data stored at index 0 of myArray
to the value of 3."
],
"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(editor.getValue().match(/[0]/g).length >= 1 && editor.getValue().match(/=/g).length >= 2){return(true);}else{return(false);}})(), 'You should be using indexes to modify the values in myArray');"
+ "assert((function(){if(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(/myArray\\[0\\]\\s?=\\s?/g)){return true;}else{return false;}})(), 'You should be using correct index to modify the value in myArray');"
],
"challengeSeed":[
"var ourArray = [1,2,3];",
@@ -526,7 +528,7 @@
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "if(typeof(myArray) !== \"undefined\"){(function(){return(myArray);})();}"
+ "if(typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}"
],
"type": "waypoint",
"challengeType": 1
@@ -542,8 +544,8 @@
"Use the .pop()
function to remove the last item from myArray."
],
"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];",
@@ -553,14 +555,14 @@
"//console.log(removed); // logs 3",
"",
"var myArray = [\"John\", 23, [\"cat\", 2]];",
- "var removed = myArray; // This should be [\"cat\", 2] and myArray should now be [\"John\", 23]",
"// Only change code below this line.",
"",
+ "var removed = myArray; // This should be [\"cat\", 2] and myArray should now be [\"John\", 23]",
"",
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "(function(y, z){return('myArray = ' + JSON.stringify(y) + ' & removed = ' + JSON.stringify(z));})(myArray, removed);"
+ "(function(y, z){return 'myArray = ' + JSON.stringify(y) + ' & removed = ' + JSON.stringify(z);})(myArray, removed);"
],
"type": "waypoint",
"challengeType": 1
@@ -574,7 +576,7 @@
"Take the myArray array and push()
this value to the end of it: [\"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 ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
@@ -591,7 +593,7 @@
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "(function(z){return('myArray = ' + JSON.stringify(z));})(myArray);"
+ "(function(z){return 'myArray = ' + JSON.stringify(z);})(myArray);"
],
"type": "waypoint",
"challengeType": 1
@@ -605,8 +607,8 @@
"Take the myArray array and shift()
the first value off of it."
],
"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(myRemoved) === 'string'){return(true);}else{return(false);}})(myRemoved), 'myRemoved 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 last two values left([23, [\"dog\", 3]])');",
+ "assert((function(d){if(d === 'John' && typeof(myRemoved) === 'string'){return true;}else{return false;}})(myRemoved), 'myRemoved should contain \"John\"');"
],
"challengeSeed": [
"var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
@@ -614,14 +616,15 @@
"// ourArray now equals [\"J\", [\"cat\"]]",
"",
"var myArray = [\"John\", 23, [\"dog\", 3]];",
- "var myRemoved = myArray; // This should be [\"John\"] and myArray should now be [23, [\"dog\", 3]]",
"// Only change code below this line.",
"",
+ "var myRemoved = myArray; // This should be [\"John\"] and myArray should now be [23, [\"dog\", 3]]",
"",
"// Only change code above this line.",
+ "",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "(function(y, z){return('myArray = ' + JSON.stringify(y) + ' & myRemoved = ' + JSON.stringify(z));})(myArray, myRemoved);"
+ "(function(y, z){return 'myArray = ' + JSON.stringify(y) + ' & myRemoved = ' + JSON.stringify(z);})(myArray, myRemoved);"
],
"type": "waypoint",
"challengeType": 1
@@ -632,16 +635,16 @@
"difficulty": "9.9818",
"description": [
"Now that we've learned how to shift
things from the start of the array, we need to learn how to unshift
stuff back to the start",
- "Let's take the code we had last time and unshift
this value to the end: \"Paul\"
"
+ "Let's take the code we had last time and unshift
this value to the start: \"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 ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
"ourArray.shift();",
"ourArray.unshift([\"happy\", \"joy\"]);",
- "// ourArray now equals [[\"happy\", \"joy\"], \"Stimpson\", \"J\"]",
+ "// ourArray now equals [[\"happy\", \"joy\"], \"J\", [\"cat\"]]",
"",
"var myArray = [\"John\", 23, [\"dog\", 3]];",
"myArray.shift();",
@@ -653,7 +656,7 @@
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
- "(function(y, z){return('myArray = ' + JSON.stringify(y));})(myArray);"
+ "(function(y, z){return 'myArray = ' + JSON.stringify(y);})(myArray);"
],
"type": "waypoint",
"challengeType": 1
@@ -666,13 +669,13 @@
"In JavaScript, we can divide up our code into reusable parts called functions
.",
"Here's an example of a function:",
"function functionName (a, b) {
",
- " return(a + b);
",
+ " return a + b;
",
"}
",
- "We can \"call\" our function like this: functionName();
, and it will run and return it's return
value to us.",
- "Create and call a function called myFunction
."
+ "We can \"call\" our function like this: functionName();
, and it will run and return its return
value to us.",
+ "Create and call a function called myFunction
that returns the sum of a and b."
],
"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;",
@@ -682,9 +685,9 @@
" return a - b;",
"};",
"",
- "//Don't modify above this line",
- "//Create a function called myFunction that returns the value of a plus b.",
- " // Only change code below this line.",
+ "// Don't modify above this line",
+ "// Create a function called myFunction that returns the value of a plus b.",
+ "// Only change code below this line.",
"",
"",
"",
@@ -694,7 +697,7 @@
"// You'll learn about functions soon.",
"if(typeof(myFunction) !== \"undefined\"){",
"var f=myFunction(a,b);",
- "(function(){return(f);})();",
+ "(function(){return f;})();",
"}"
],
"type": "waypoint",
@@ -715,20 +718,20 @@
" \"enemies\": [\"Water\", \"Dogs\"]
",
"};
",
"",
- "Objects are useful for storing data in a structured way, and can represents real world objects, like a cats.",
- "Let's try to make an Object that represents a dog called myDog!"
+ "Objects are useful for storing data in a structured way, and can represents real world objects, like a cat.",
+ "Let's try to make an Object that represents a dog called myDog which contains the properties 'name' (String), 'legs' (Number), 'tails' (Number) and 'friends' (Array)!"
],
"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",
+ "// \"name\": \"Camper\",",
+ "// \"legs\": 4,",
+ "// \"tails\": 1,",
"// \"friends\": [\"everything!\"]",
"//};",
"",
@@ -743,7 +746,7 @@
"",
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
- "(function(z){return(z);})(myDog);"
+ "(function(z){return z;})(myDog);"
],
"type": "waypoint",
"challengeType": 1
@@ -753,11 +756,11 @@
"title": "Manipulate JavaScript Objects",
"difficulty":"9.9823",
"description":[
- "There are many ways to add and add and remove properties from objects.",
+ "There are many ways to add and remove properties from objects.",
"For example, we can add properties to objects like this:",
"myObject.myProperty = \"myValue\";
",
"We can also delete them like this:",
- "delete(myObject.myProperty);
",
+ "delete myObject.myProperty;
",
"Let's add the property \"bark\", and delete the property \"tails\"."
],
"tests":[
@@ -766,14 +769,14 @@
],
"challengeSeed":[
"// var ourDog = {",
- "// \"name\": \"Camper\"",
- "// \"legs\": 4",
- "// \"tails\": 1",
+ "// \"name\": \"Camper\",",
+ "// \"legs\": 4,",
+ "// \"tails\": 1,",
"// \"friends\": [\"everything!\"]",
"// };",
"",
- "// ourDog.bark(\"arf!\");",
- "// delete(ourDog.tails);",
+ "// ourDog.bark = \"arf!\";",
+ "// delete ourDog.tails;",
"",
"var myDog = {",
" \"name\": \"Camper\",",
@@ -792,7 +795,7 @@
"",
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
- "(function(z){return(z);})(myDog);"
+ "(function(z){return z;})(myDog);"
],
"type": "waypoint",
"challengeType": 1
@@ -816,6 +819,10 @@
"assert.deepEqual(myArray, [0,1,2,3,4], 'myArray should equal [0,1,2,3,4]');"
],
"challengeSeed":[
+ "ourArray = [];",
+ "for(var i = 0; i < 5; i++){",
+ " ourArray.push(i);",
+ "}",
"var myArray = [];",
"//Push the numbers zero through four to myArray using a \"for loop\" like above.",
"",
@@ -830,14 +837,14 @@
"difficulty":"9.9825",
"description":[
"You can run the same code multiple times by using a loop.",
- "Another type of JavaScript loop is called a \"while loop\" because it runs \"while\" something is true, and stops once that something is no longer true.",
+ "Another type of JavaScript loop is called a \"while loop\", because it runs \"while\" something is true and stops once that something is no longer true.",
"var ourArray = [];
",
"var i = 0;
",
"while(i < 5) {
",
" ourArray.push(i);
",
" i++;
",
"}
",
- "Let's try getting a for loop to work by pushing values to an array."
+ "Let's try getting a while loop to work by pushing values to an array."
],
"tests":[
"assert(editor.getValue().match(/while/g), 'You should be using a while loop for this.');",
@@ -857,7 +864,7 @@
"title": "Generate Random Fractions with JavaScript",
"difficulty":"9.9827",
"description":[
- "Random numbers are useful for creating random behaviours and games.",
+ "Random numbers are useful for creating random behavior.",
"JavaScript has a Math.random()
function that generates a random decimal number.",
"Use Math.random()
to get myFunction
to return a random number."
],
@@ -871,13 +878,13 @@
" //Change the 0 to Math.random()",
" // Only change code below this line.",
"",
- " return(0);",
+ " return 0;",
"",
"// Only change code above this line.",
"}",
"",
"// We use this function to show you the value of your variable in your output box.",
- "(function(){return(myFunction());})();"
+ "(function(){return myFunction();})();"
],
"type": "waypoint",
"challengeType": 1
@@ -887,32 +894,32 @@
"title": "Generate Random Whole Numbers with JavaScript",
"difficulty":"9.9828",
"description":[
- "It's great that we can create random decimal numbers, but it's even more useful if we lot more useful to generate a random whole number.",
- "To achieve this we can multiply the random number by ten and use the Math.floor()
to convert the decimal number to a whole number",
- "This technique gives us a whole number between zero and nine",
+ "It's great that we can create random decimal numbers, but it's even more useful if we use it to generate a random whole number.",
+ "To achieve this we can multiply the random number by ten and use the Math.floor()
to convert the decimal number to a whole number.",
+ "This technique gives us a whole number between zero and nine.",
"Example:",
"Math.floor(Math.random()*10);
",
- "Let's give this technique a go now"
+ "Let's give this technique a go now."
],
"tests":[
"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(!(''+myFunction()).match(/\\./g), 'You should have multiplied the result of Math.random by 10 to make it a number that\\'s greater than zero');",
"assert(editor.getValue().match(/Math.floor/g), 'You should use Math.floor to remove the decimal part of the number');"
],
"challengeSeed":[
"function myFunction(){",
- " // Make myFunction return a random number between zero and nine instead of a decimal",
+ " // Make myFunction return a random number betweenzero and nine> instead of a decimal",
"",
" // Only change code below this line.",
"",
- " return(Math.random());",
+ " return Math.random();",
"",
" // Only change code above this line.",
"}",
"",
"// We use this function to show you the value of your variable in your output box.",
- "(function(){return(myFunction());})();"
+ "(function(){return myFunction();})();"
],
"type": "waypoint",
"challengeType": 1
@@ -922,28 +929,28 @@
"title": "Generate Random Whole Numbers within a Range",
"difficulty":"9.9829",
"description":[
- "We can use a certain mathematical expression to get a random number between between two numbers.",
+ "We can use a certain mathematical expression to get a random number between two numbers.",
"Math.floor(Math.random() * (max - min + 1)) + min
",
"By using this we can control the output of a random number."
],
"tests":[
"assert(myFunction() >= min, 'The random number that\\'s generated by myFunction should be greater than or equal to the minimum number');",
"assert(myFunction() <= max, 'The random number that\\'s generated by myFunction should be less than or equal to the maximum number');",
- "assert((function(){if(editor.getValue().match(/max/g).length >= 2 && editor.getValue().match(/min/g).length >= 2 && editor.getValue().match(/Math.floor/g) && editor.getValue().match(/Math.random/g)){return(true);}else{return(false);}})(), 'You should be using the function given in the description to calculate the random in number in a range');"
+ "assert((function(){if(editor.getValue().match(/max/g).length >= 2 && editor.getValue().match(/min/g).length >= 2 && editor.getValue().match(/Math.floor/g) && editor.getValue().match(/Math.random/g)){return true;}else{return false;}})(), 'You should be using the function given in the description to calculate the random in number in a range');"
],
"challengeSeed":[
"var min = 0;",
- "var max = 12;",
+ "var max = 9;",
"function myFunction() {",
" // Make myFunction return a random number between zero and nine instead of a decimal",
" // Only change code below this line.",
"",
- " return(Math.random());",
+ " return Math.random();",
"}",
"",
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
- "(function(){return(myFunction());})();"
+ "(function(){return myFunction();})();"
],
"type": "waypoint",
"challengeType": 1
@@ -954,26 +961,26 @@
"difficulty":"9.983",
"description":[
"We can use if statements in JavaScript to only execute code if a certain condition is met.",
- "if statements require some sort of boolean condition evaluate.",
+ "if statements require some sort of boolean condition to evaluate.",
"Example:",
- " if (1 == 2) {",
- " return(true);
",
+ " if (1 === 2) {
",
+ " return true;
",
"}
",
"else {
",
- " return(false);
",
+ " return false;
",
"}
",
"Let's use if
and else
statements to make a coin-flip game.",
- "Create an if-else statement
to return heads
if the flip var is zero and to return tails
if it's not."
+ "Create an if-else statement
to return heads
if the flip var is zero, or else 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');"
],
"challengeSeed":[
"function myFunction(){",
" var flip = Math.floor(Math.random() * (1 - 0 + 1)) + 0;",
- " // Create and if else statement here to return \"heads\" if flip is 0. Otherwise return \"tails\".",
+ " // Create an if-else statement here to return \"heads\" if flip is 0. Otherwise return \"tails\".",
"",
" // Only change code below this line.",
"",
@@ -982,7 +989,7 @@
"",
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
- "(function(){return(myFunction());})();"
+ "(function(){return myFunction();})();"
],
"type": "waypoint",
"challengeType": 1
@@ -992,7 +999,7 @@
"title": "Sift through Text with Regular Expressions",
"difficulty":"9.984",
"description":[
- "Regular expressions
are way to find certain words or patterns inside of strings
.",
+ "Regular expressions
are used to find certain words or patterns inside of strings
.",
"For example, if we wanted to find the number of times the word the
occurred in the string The dog chased the cat
, we could use the following regular expression
: \/the+\/gi
",
"Let's break this down a bit:",
"the
is the pattern we want to match.",
@@ -1000,7 +1007,7 @@
"g
means that we want to search the entire string for this pattern.",
"i
means that we want to ignore the case (uppercase or lowercase) when searching for the pattern.",
"Regular expressions
are usually surrounded by /
symbols.",
- "Let's try selecting all the occurances of the word and
in the string George Boole and Alan Turing went to the shop and got some milk
. We can do this by replacing the .+
part of our regular expression with the current regular expression
with the word and
."
+ "Let's try selecting all the occurrences of the word and
in the string George Boole and Alan Turing went to the shop and got some milk
. We can do this by replacing the .
part of our regular expression with the word and
."
],
"tests":[
"assert(test==2, 'Your regular expression
should find two occurrences of the word and
');",
@@ -1016,8 +1023,8 @@
"",
" // Only change code above this line.",
" // We use this function to show you the value of your variable in your output box.",
- " return(testString.match(expression).length);",
- "})();(function(){return(test);})();"
+ " return testString.match(expression).length;",
+ "})();(function(){return test;})();"
],
"type": "waypoint",
"challengeType": 1
@@ -1034,11 +1041,11 @@
],
"tests":[
"assert(test === 2, 'Your RegEx should have found two numbers in the testString');",
- "assert(editor.getValue().match(/\\/\\\\d\\+\\//gi), 'You should be using the following expression /\\d+/gi to find the numbers in the testString');"
+ "assert(editor.getValue().match(/\\/\\\\d\\+\\//gi), 'You should be using the following expression /\\\\d+/gi to find the numbers in the testString');"
],
"challengeSeed":[
"var test = (function() {",
- " var testString = \"There's 3 cats but 4 dogs.\";",
+ " var testString = \"There are 3 cats but 4 dogs.\";",
"",
" // Only change code below this line.",
"",
@@ -1046,8 +1053,8 @@
"",
" // Only change code above this line.",
" // We use this function to show you the value of your variable in your output box.",
- " return(testString.match(expression).length);",
- "})();(function(){return(test);})();"
+ " return testString.match(expression).length;",
+ "})();(function(){return test;})();"
],
"type": "waypoint",
"challengeType": 1
@@ -1064,7 +1071,7 @@
],
"tests":[
"assert(test === 7, 'Your RegEx should have found seven spaces in the testString
.');",
- "assert(editor.getValue().match(/\\/\\\\s\\+\\//gi), 'You should be using the following expression /\\s+/gi to find the spaces in the testString
.');"
+ "assert(editor.getValue().match(/\\/\\\\s\\+\\//gi), 'You should be using the following expression /\\\\s+/gi to find the spaces in the testString
.');"
],
"challengeSeed":[
"var test = (function(){",
@@ -1076,8 +1083,8 @@
"",
" // Only change code above this line.",
" // We use this function to show you the value of your variable in your output box.",
- " return(testString.match(expression).length);",
- "})();(function(){return(test);})();"
+ " return testString.match(expression).length;",
+ "})();(function(){return test;})();"
],
"type": "waypoint",
"challengeType": 1
@@ -1091,12 +1098,12 @@
"You can invert any match by using the uppercase version of the selector \\s
versus \\S
for example."
],
"tests":[
- "assert(test === 36, 'Your RegEx should have found seven spaces in the testString
.');",
- "assert(editor.getValue().match(/\\/\\\\S\\/gi/gi), 'You should be using the following expression /\\S+/gi
to find the spaces in the testString
.');"
+ "assert(test === 49, 'Your RegEx should have found forty nine non-space characters in the testString
.');",
+ "assert(editor.getValue().match(/\\/\\\\S\\/gi/gi), 'You should be using the following expression /\\\\S/gi
to find non-space characters in the testString
.');"
],
"challengeSeed":[
"var test = (function(){",
- " var testString = \"How many spaces are there in this sentence?\";",
+ " var testString = \"How many non-space characters are there in this sentence?\";",
"",
" // Only change code below this line.",
"",
@@ -1104,8 +1111,8 @@
"",
" // Only change code above this line.",
" // We use this function to show you the value of your variable in your output box.",
- " return(testString.match(expression).length);",
- "})();(function(){return(test);})();"
+ " return testString.match(expression).length;",
+ "})();(function(){return test;})();"
],
"type": "waypoint",
"challengeType":1
@@ -1125,7 +1132,7 @@
"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?3\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1;/gi) !== null){return(editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?3\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1;/gi).length >= 3);}else{return(false);}})(), 'You should have used Math.floor(Math.random() * (3 - 1 + 1)) + 1;
three times to generate your random numbers.')"
+ "assert((function(){if(editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?3\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1;/gi) !== null){return editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?3\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1;/gi).length >= 3;}else{return false;}})(), 'You should have used Math.floor(Math.random() * (3 - 1 + 1)) + 1;
three times to generate your random numbers.')"
],
"challengeSeed":[
"fccss",
@@ -1148,7 +1155,7 @@
" if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
" $(\".logger\").html(slotOne + \" \" + slotTwo + \" \" + slotThree);",
" }",
- " return([slotOne, slotTwo, slotThree]);",
+ " return [slotOne, slotTwo, slotThree];",
" }",
"",
" $(document).ready(function(){",
@@ -1272,14 +1279,14 @@
"Now that our slots will each generate random numbers, we need to check whether they've all returned the same number.",
"If they have, we should notify our user that they've won.",
"Otherwise, we should return null
, which is a JavaScript data structure that means nothing.",
- "If all three numbers match, we should change the value of win to the number that we have three of or leave it as null.",
+ "If all three numbers match, we should return the number that we have in three of slots or leave it as null
.",
"Let's create an if statement
with multiple conditions in order to check whether all numbers are equal.",
"if(slotOne !== slotTwo || slotTwo !== slotThree){
",
- " return(null);
",
+ " return null;
",
"}
"
],
"tests":[
- "assert((function(){var data = runSlots();if(data === null){return(true)}else{if(data[0] === data[1] && data[1] === data[2]){return(true);}else{return(false);}}})(), 'If all three of our random numbers are the same we should return that number. Otherwise we should return null.')"
+ "assert((function(){var data = runSlots();if(data === null){return true}else{if(data[0] === data[1] && data[1] === data[2]){return true;}else{return false;}}})(), 'If all three of our random numbers are the same we should return that number. Otherwise we should return null.')"
],
"challengeSeed":[
"fccss",
@@ -1308,7 +1315,7 @@
" $(\".logger\").append(\" \" + slotTwo);",
" $(\".logger\").append(\" \" + slotThree);",
" }",
- " return([slotOne, slotTwo, slotThree]);",
+ " return [slotOne, slotTwo, slotThree];",
" }",
"",
" $(document).ready(function(){",
@@ -1437,8 +1444,8 @@
"Use the above selector to display each number in its 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",
@@ -1463,7 +1470,7 @@
" // Only change code above this line.",
" ",
" if(slotOne !== slotTwo || slotTwo !== slotThree){",
- " return(null);",
+ " return null;",
" }",
" ",
" if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
@@ -1472,7 +1479,7 @@
" $(\".logger\").append(\" \" + slotThree);",
" }",
" ",
- " return([slotOne, slotTwo, slotThree]);",
+ " return [slotOne, slotTwo, slotThree];",
" }",
"",
" $(document).ready(function(){",
@@ -1602,7 +1609,7 @@
"Set up all three slots like this, then click the \"Go\" button to play the slot machine."
],
"tests":[
- "assert(editor.match(/\\$\\(\\$\\(\\'\\.slot\\'\\)\\[\\d\\]\\)\\.html\\(\\'\\
\\'\\);/gi) && editor.match(/\\$\\(\\$\\(\\'\\.slot\\'\\)\\[\\d\\]\\)\\.html\\(\\'\\
\\'\\);/gi).length >= 3, 'Use the provided code three times. One for each slot')",
+ "assert((editor.match(/\\$\\(\\$\\(\\'\\.slot\\'\\)\\[\\d\\]\\)\\.html\\(\\'\\
\\'\\);/gi) && editor.match(/\\$\\(\\$\\(\\'\\.slot\\'\\)\\[\\d\\]\\)\\.html\\(\\'\\
\\'\\);/gi).length >= 3) || (editor.match(/\\$\\(\\$\\(\\\"\\.slot\\\"\\)\\[\\d\\]\\)\\.html\\(\\'\\
\\'\\);/gi) && editor.match(/\\$\\(\\$\\(\\\"\\.slot\\\"\\)\\[\\d\\]\\)\\.html\\(\\'\\
\\'\\);/gi).length >= 3), 'Use the provided code three times. One for each slot')",
"assert(editor.match(/slotOne/gi) && editor.match(/slotOne/gi).length >= 7, 'You should have used the slotOne value at least once')",
"assert(editor.match(/slotTwo/gi) && editor.match(/slotTwo/gi).length >= 8, 'You should have used the slotTwo value at least once')",
"assert(editor.match(/slotThree/gi) && editor.match(/slotThree/gi).length >= 7, 'You should have used the slotThree value at least once')"
@@ -1630,7 +1637,7 @@
" // Only change code above this line.",
" ",
" if(slotOne !== slotTwo || slotTwo !== slotThree){",
- " return(null);",
+ " return null;",
" }",
" ",
" if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
@@ -1639,7 +1646,7 @@
" $('.logger').append(' ' + slotThree);",
" }",
" ",
- " return([slotOne, slotTwo, slotThree]);",
+ " return [slotOne, slotTwo, slotThree];",
" }",
"",
" $(document).ready(function(){",
diff --git a/seed/challenges/basic-ziplines.json b/seed/challenges/basic-ziplines.json
index 7b7ca96c27..d97d049b80 100644
--- a/seed/challenges/basic-ziplines.json
+++ b/seed/challenges/basic-ziplines.json
@@ -45,14 +45,15 @@
"Rule #1: Don't look at the example project's code on CodePen. Figure it out for yourself.",
"Rule #2: You may use whichever libraries or APIs you need.",
"Rule #3: Reverse engineer the example project's functionality, and also feel free to personalize it.",
+ "Hint: If you don't want to start from scratch, you can fork this simple Bootstrap portfolio template on CodePen: http://codepen.io/FreeCodeCamp/pen/mJNqQj.",
"Here are the user stories you must enable, and optional bonus user stories:",
"User Story: As a user, I can access all of the portfolio webpage's content just by scrolling.",
"User Story: As a user, I can click different buttons that will take me to the portfolio creator's different social media pages.",
- "User Story: As a user, I can see thumbnail images of different projects the portfolio creator has built (if you don't haven't built any websites before, use placeholders.)",
+ "User Story: As a user, I can see thumbnail images of different projects the portfolio creator has built (if you haven't built any websites before, use placeholders.)",
"Bonus User Story: As a user, I navigate to different sections of the webpage by clicking buttons in the navigation.",
"Don't worry if you don't have anything to showcase on your portfolio yet - you will build several several apps on the next few CodePen challenges, and can come back and update your portfolio later.",
"There are many great portfolio templates out there, but for this challenge, you'll need to build a portfolio page yourself. Using Bootstrap will make this much easier for you.",
- "Note that CodePen.io overrides the Window.open() function, so if you want to open windows using jquery, you will need to target invisible anchor elements like this one: <a target='_blank'&rt;.",
+ "Note that CodePen.io overrides the Window.open() function, so if you want to open windows using jquery, you will need to target invisible anchor elements like this one: <a target='_blank'>
.",
"Remember to use Read-Search-Ask if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.
Click here then add your link to your tweet's text"
@@ -183,9 +184,10 @@
"User Story: As a user, I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.",
"User Story: As a user, if Free Code Camp is streaming, I can see additional details about what they are streaming.",
"Bonus User Story: As a user, I can search through the streams listed.",
+ "Bonus User Story: As a user, I will see a placeholder notification if a streamer has closed their Twitch account. You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.",
"Hint: Here's an example call to Twitch.tv's JSON API: https://api.twitch.tv/kraken/streams/freecodecamp
.",
"Hint: The relevant documentation about this API call is here: https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel.",
- "Hint: Here's an array of the Twitch.tv usernames of people who regularly stream coding: [\"freecodecamp\", \"storbeck\", \"terakilobyte\", \"habathcx\",\"RobotCaleb\",\"comster404\",\"brunofin\",\"thomasballinger\",\"noobs2ninjas\",\"beohoff\"]
",
+ "Hint: Here's an array of the Twitch.tv usernames of people who regularly stream coding: [\"freecodecamp\", \"storbeck\", \"terakilobyte\", \"habathcx\",\"RobotCaleb\",\"thomasballinger\",\"noobs2ninjas\",\"beohoff\"]
",
"Remember to use Read-Search-Ask if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.
Click here then add your link to your tweet's text"
diff --git a/seed/challenges/bootstrap.json b/seed/challenges/bootstrap.json
index 8d1ed23a7f..5f5d0ff63e 100644
--- a/seed/challenges/bootstrap.json
+++ b/seed/challenges/bootstrap.json
@@ -133,7 +133,7 @@
"",
" Click here for cat photos.
",
"",
- "
",
+ "
",
"",
" Things cats love:
",
" ",
@@ -176,8 +176,8 @@
"title": "Center Text with Bootstrap",
"difficulty": 2.03,
"description": [
- "Now that we're using Bootstrap, we can center our heading elements to make them look better. All we need to do is add the class text-center
to our h1
and h2
elements.",
- "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>
."
+ "Now that we're using Bootstrap, we can center our heading element to make it look better. All we need to do is add the class text-center
to our h2
element.",
+ "Remember that you can add several classes to the same element by separating each of them with a space, like this: <h2 class=\"red-text text-center\">your text</h2>
."
],
"tests": [
"assert($(\"h2\").hasClass(\"text-center\"), 'Your h2
element should be centered by applying the class text-center
')"
@@ -347,7 +347,7 @@
"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:",
- "
",
+ "
",
"Note that these buttons still need the btn
class.",
"Add Bootstrap's btn-block
class to your Bootstrap button."
],
@@ -614,7 +614,7 @@
"Note that these buttons still need the btn
and btn-block
classes."
],
"tests": [
- "assert(new RegExp(\"delete\",\"gi\").test($(\"button\").text()), 'Create a new button
element with the text \"delete\".')",
+ "assert(new RegExp(\"Delete\",\"gi\").test($(\"button\").text()), 'Create a new button
element with the text \"Delete\".')",
"assert($(\"button.btn-block.btn\").length > 2, 'All of your Bootstrap buttons should have the btn
and btn-block
classes.')",
"assert($(\"button\").hasClass(\"btn-danger\"), 'Your new button should have the class btn-danger
.')",
"assert(editor.match(/<\\/button>/g) && editor.match(/
elements have a closing tag.')"
@@ -700,7 +700,7 @@
"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 xs
means extra small (like an extra-small mobile phone screen), and *
is the number of columns specifying how many columns wide the element should be.",
"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.",
@@ -795,7 +795,7 @@
"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.",
+ "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": [
@@ -893,12 +893,12 @@
"title": "Use Spans for Inline Elements",
"difficulty": 2.105,
"description": [
- "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?",
+ "You can use spans to create inline elements. Remember when we used the btn-block
class to make the button fill the entire row?",
"This image illustrates the difference between inline
elements and block-level
elements:",
- "
",
+ "
",
"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 within 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>
"
+ "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($(\"p span\") && $(\"p span\").length > 0, 'Your span
element should be inside your p
element.')",
@@ -997,7 +997,7 @@
"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, 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 xs
means extra small (like an extra-small mobile phone screen), and *
is the number of columns specifying how many columns wide the element should be.",
"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.",
@@ -1532,7 +1532,7 @@
"difficulty": 2.17,
"description": [
"Now let's get your form input
and your submission button
on the same line. We'll do this the same way we have previously: by using a div
element with the class row
, and other div
elements within it using the col-xs-*
class.",
- "Nest both your form's text input
and submit button
within a div
with the class row
. Nest your form's text input
within a div with the class of \"col-xs-7\". Nest your form's submit button
in a div
with the class col-xs-5
.",
+ "Nest both your form's text input
and submit button
within a div
with the class row
. Nest your form's text input
within a div with the class of col-xs-7
. Nest your form's submit button
in a div
with the class col-xs-5
.",
"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": [
@@ -1769,8 +1769,8 @@
"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=\"well\">
element both with the class col-xs-6
')",
- "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 a div
element with the class well
inside each of your div class=\"col-xs-6\"> elements
')",
+ "assert($(\"div.col-xs-6 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": [
diff --git a/seed/challenges/git.json b/seed/challenges/git.json
index 7b091e8fb7..aa03fb0a18 100644
--- a/seed/challenges/git.json
+++ b/seed/challenges/git.json
@@ -16,7 +16,7 @@
"Choose Node.js in the selection area below the name field.",
"Click the Create button. Then click into your new workspace.",
"In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.",
- "Install how-to-npm
with this command: npm install -g git-it
",
+ "Install git-it
with this command: npm install -g git-it
",
"Now start the tutorial by running git-it
.",
"Note that you can resize the c9.io's windows by dragging their borders.",
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: cd ~/workspace
.",
diff --git a/seed/challenges/html5-and-css.json b/seed/challenges/html5-and-css.json
index 4d4ae95cad..b3759fdc2c 100644
--- a/seed/challenges/html5-and-css.json
+++ b/seed/challenges/html5-and-css.json
@@ -372,7 +372,7 @@
"difficulty": 1.09,
"description": [
"Delete your h2
element's style attribute and instead create a CSS style
element. Add the necessary CSS to turn all h2
elements blue.",
- "With CSS, there are hundreds of CSS attributes
that you can use to change the way an element looks on your page.",
+ "With CSS, there are hundreds of CSS properties
that you can use to change the way an element looks on your page.",
"When you entered <h2 style=\"color: red\">CatPhotoApp</h2>
, you were giving that individual h2
element an inline style
.",
"That's one way to add style to an element, but a better way is by using CSS
, which stands for Cascading Style Sheets
.",
"At the top of your code, create a style
element like this: <style></style>
.",
@@ -381,7 +381,7 @@
],
"tests": [
"assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your h2
element.')",
- "assert(($(\"style\").length > 1), 'Create a style
element.')",
+ "assert($(\"style\") && $(\"style\").length > 1, 'Create a style
element.')",
"assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your h2
element should be blue.')",
"assert(editor.match(/<\\/style>/g) && editor.match(/<\\/style>/g).length === editor.match(/",
"",
@@ -2530,14 +2534,14 @@
"difficulty": 1.392,
"description": [
"One cool thing about id
attributes is that, like classes, you can style them using CSS.",
- "Here's an example of how you can take your element with the id
attribute of cat-photo-element
and give it the background color of green. In your style
element: #cat-photo-element { background-color: green; }>
",
+ "Here's an example of how you can take your element with the id
attribute of cat-photo-element
and give it the background color of green. In your style
element: #cat-photo-element { background-color: green; }
",
"Note that inside your style
element, you always reference classes by putting a .
in front of their names. You always reference ids by putting a #
in front of their names.",
"Try giving your form, which now has the id
attribute of cat-photo-form
, a green background."
],
"tests": [
"assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your form
element the id of cat-photo-form
.')",
"assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'Your form
element should have the background-color
of green.')",
- "assert(editor.match(//gi) && editor.match(//gi).length > 0, 'Make sure your form
element has both an id
attribute.')",
+ "assert(editor.match(//gi) && editor.match(//gi).length > 0, 'Make sure your form
element has an id
attribute.')",
"assert(!editor.match(//gi) && !editor.match(//gi), 'Do not give your form
any class
or style
attributes.')"
],
"challengeSeed": [
@@ -2623,7 +2627,7 @@
"difficulty": 1.40,
"description": [
"You may have already noticed this, but all HTML elements are essentially little rectangles.",
- "Three important attributes control the space that surrounds each HTML element: padding
, margin
, and border
.",
+ "Three important properties control the space that surrounds each HTML element: padding
, margin
, and border
.",
"An element's padding
controls the amount of space between the element and its border
.",
"Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more padding
than the green box.",
"When you increase the green box's padding
, it will increase the distance between the text padding
and the border around it.",
@@ -2835,7 +2839,7 @@
"difficulty": 1.43,
"description": [
"Sometimes you will want to customize an element so that it has different padding
on each of its sides.",
- "CSS allows you to control the padding
of an element on all four sides with padding-top
, padding-right
, padding-bottom
, and padding-left
attributes.",
+ "CSS allows you to control the padding
of an element on all four sides with padding-top
, padding-right
, padding-bottom
, and padding-left
properties.",
"Give the green box a padding
of 40px
on its top and left side, but only 20px
on its bottom and right side."
],
"tests": [
@@ -2908,7 +2912,7 @@
"description": [
"Give the green box a margin
of 40px
on its top and left side, but only 20px
on its bottom and right side.",
"Sometimes you will want to customize an element so that it has a different margin
on each of its sides.",
- "CSS allows you to control the margin
of an element on all four sides with margin-top
, margin-right
, margin-bottom
, and margin-left
attributes."
+ "CSS allows you to control the margin
of an element on all four sides with margin-top
, margin-right
, margin-bottom
, and margin-left
properties."
],
"tests": [
"assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'Your green-box
class should give the top of elements 40px
of margin
.')",
@@ -2977,7 +2981,7 @@
"title": "Use Clockwise Notation to Specify the Padding of an Element",
"difficulty": 1.44,
"description": [
- "Instead of specifying an element's padding-top
, padding-right
, padding-bottom
, and padding-left
attributes, you can specify them all in one line, like this: padding: 10px 20px 10px 20px;
.",
+ "Instead of specifying an element's padding-top
, padding-right
, padding-bottom
, and padding-left
properties, you can specify them all in one line, like this: padding: 10px 20px 10px 20px;
.",
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.",
"Use Clockwise Notation to give the \".green-box\" class a padding
of 40px
on its top and left side, but only 20px
on its bottom and right side."
],
@@ -3047,7 +3051,7 @@
"difficulty": 1.45,
"description": [
"Let's try this again, but with margin
this time.",
- "Instead of specifying an element's margin-top
, margin-right
, margin-bottom
, and margin-left
attributes, you can specify them all in one line, like this: margin: 10px 20px 10px 20px;
.",
+ "Instead of specifying an element's margin-top
, margin-right
, margin-bottom
, and margin-left
properties, you can specify them all in one line, like this: margin: 10px 20px 10px 20px;
.",
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.",
"Use Clockwise Notation
to give an element a margin of 40px
on its top and left side, but only 20px
on its bottom and right side."
],
@@ -3117,7 +3121,7 @@
"difficulty": 1.46,
"description": [
"Now let's start fresh and talk about CSS inheritance.",
- "Every HTML page has body
element.",
+ "Every HTML page has a body
element.",
"We can prove that the body
element exists here by giving it a background-color
of black.",
"We can do this by adding body { background-color: black; }
to our style
element."
],
@@ -3159,8 +3163,8 @@
"assert(($(\"h1\").length > 0), 'Create an h1
element.')",
"assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'Your h1
element should have the text Hello World
.')",
"assert(editor.match(/<\\/h1>/g) && editor.match(//g).length === editor.match(/h1 element has a closing tag.')",
- "assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your body
element the color
attribute of green
.')",
- "assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'Give your body
element the font-family
attribute of Monospace
.')",
+ "assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your body
element the color
property of green
.')",
+ "assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'Give your body
element the font-family
property of Monospace
.')",
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'Your h1
element should inherit the font Monospace
from your body
element.')",
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Your h1
element should inherit the color green from your body
element.')"
],
@@ -3194,7 +3198,7 @@
"description": [
"Sometimes your HTML elements will receive multiple styles that conflict with one another.",
"For example, your h1
element can't be both green and pink at the same time.",
- "Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class override
the body
element's color: green;
CSS attribute?",
+ "Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class override
the body
element's color: green;
CSS property?",
"Create a CSS class called pink-text
that gives an element the color pink.",
"Give your h1
element the class of pink-text
."
],
@@ -3235,7 +3239,8 @@
"Our \"pink-text\" class overrode our body
element's CSS declaration!",
"We just proved that our classes will override the body
element's CSS. So the next logical question is, what can we do to override our pink-text
class?",
"Create an additional CSS class called blue-text
that gives an element the color blue. Make sure it's below your pink-text
class declaration.",
- "Apply the blue-text
class to your h1
element in addition to your pink-text
class, and let's see which one wins."
+ "Apply the blue-text
class to your h1
element in addition to your pink-text
class, and let's see which one wins.",
+ "Applying multiple class attributes to a HTML element is done with a space between them like this: class=\"class1 class2\"
"
],
"tests": [
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your h1
element should have the class pink-text
.')",
@@ -3280,12 +3285,14 @@
"Let's override your pink-text
and blue-text
classes, and make your h1
element orange, by giving the h1
element an id and then styling that id.",
"Give your h1
element the id
attribute of orange-text
. Remember, id styles look like this: <h1 id=\"orange-text\">
",
"Leave the blue-text
and pink-text
classes on your h1
element.",
- "Create a CSS declaration for your orange-text
id in your style
element. Here's and example of what this looks like: #brown-text { color: brown; }
"
+ "Create a CSS declaration for your orange-text
id in your style
element. Here's an example of what this looks like: #brown-text { color: brown; }
"
],
"tests": [
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your h1
element should have the class pink-text
.')",
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your h1
element should have the class blue-text
.')",
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Give your h1
element the id of orange-text
.')",
+ "assert(editor.match(/#orange-text\\s*{/gi), 'Create a CSS declaration for your orange-text
id')",
+ "assert(!editor.match(//gi), 'Do not give your h1
any style
attributes.')",
"assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'Your h1
element should be orange.')"
],
"challengeSeed": [
@@ -3387,7 +3394,7 @@
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your h1
element should have the class blue-text
.')",
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your h1
element should have the id of orange-text
.')",
"assert(editor.match(/ 0, 'Your h1
element should have the inline style of color: white
.')",
- "assert(editor.match(/pink.*\\!important/gi) && editor.match(/pink.*\\!important;/gi).length > 0, 'Your pink-text
class should have the !important
keyword to override all other declarations.')",
+ "assert(editor.match(/pink.*\\!important;/gi), 'Your pink-text
class should have the !important
keyword to override all other declarations.')",
"assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your h1
element should be pink.')"
],
"challengeSeed": [
@@ -3431,7 +3438,7 @@
"description": [
"Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or hex code
for short.",
"Decimal
means the numbers zero through nine - the numbers that people use in everyday life. Hexadecimal
includes these 10 numbers, plus the letters A, B, C, D, E and F. This means that Hexidecimal has a total of 16 possible values, instead of the 10 possible values that our normal base-10 number system gives us.",
- "With CSS, we use 6 hexidecimal number to represent colors. For example, #000000
is the lowest possible value, and it represents the color black.",
+ "With CSS, we use 6 hexadecimal numbers to represent colors. For example, #000000
is the lowest possible value, and it represents the color black.",
"Replace the word black
in our body
element's background-color with its hex code
representation, #000000
. "
],
"tests": [
@@ -3508,7 +3515,7 @@
],
"tests": [
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'Give your body
element the background-color
of red.')",
- "assert(editor.match(/#FF0000/g) && editor.match(/#FF0000/g).length > 0, 'Use the hex code
for the color red instead of the word red
. For example body { color: #FF0000; }
.')"
+ "assert(editor.match(/#FF0000/ig) && editor.match(/#FF0000/ig).length > 0, 'Use the hex code
for the color red instead of the word red
. For example body { color: #FF0000; }
.')"
],
"challengeSeed": [
"