finish JavaScript and OOP sections for QA

This commit is contained in:
Quincy Larson 2015-10-28 01:15:54 -07:00
parent 419f6507d0
commit eef1c5136a
2 changed files with 94 additions and 62 deletions

View File

@ -955,7 +955,6 @@
" // 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();})();"
],
"type": "waypoint",
@ -965,8 +964,8 @@
"id": "cf1111c1c12feddfaeb1bdef",
"title": "Generate Random Whole Numbers with JavaScript",
"description": [
"It's great that we can create random decimal numbers, but it's even more useful if we use it to generate random whole numbers.",
"First, let's use <code>Math.random()</code> to create a random decimal.",
"It's great that we can generate random decimal numbers, but it's even more useful if we use it to generate random whole numbers.",
"First, let's use <code>Math.random()</code> to generate a random decimal.",
"Then let's multiply this random decimal by 20.",
"Finally, let's use another function, <code>Math.floor()</code> to round the number down to its nearest whole number.",
"This technique will gives us a whole number between 0 and 19.",
@ -974,11 +973,11 @@
"Putting everything together, this is what our code looks like:",
"<code>Math.floor(Math.random() * 20);</code>",
"See how <code>Math.floor</code> takes <code>(Math.random() * 20)</code> as its argument? That's right - you can pass a function to another function as an argument."
"Let's use this technique to create and return a random whole number between 0 and 9."
"Let's use this technique to generate and return a random whole number between 0 and 9."
],
"tests": [
"assert(typeof(myFunction()) === \"number\", 'message: The result of <code>myFunction</code> should be a number.');",
"assert(editor.getValue().match(/Math.random/g), 'message: You should be using Math.random to create a random number.');",
"assert(editor.getValue().match(/Math.random/g), 'message: You should be using Math.random to generate a random number.');",
"assert(editor.getValue().match(/\\(\\s*?Math.random\\s*?\\(\\s*?\\)\\s*?\\*\\s*?10\\s*?\\)/g) || editor.getValue().match(/\\(\\s*?10\\s*?\\*\\s*?Math.random\\s*?\\(\\s*?\\)\\s*?\\)/g), 'message: You should have multiplied the result of <code>Math.random</code> by 10 to make it a number that is between zero and nine.');",
"assert(editor.getValue().match(/Math.floor/g), 'message: You should use <code>Math.floor</code> to remove the decimal part of the number.');"
],
@ -994,7 +993,6 @@
" // 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();})();"
],
"type": "waypoint",
@ -1004,28 +1002,42 @@
"id": "cf1111c1c12feddfaeb2bdef",
"title": "Generate Random Whole Numbers within a Range",
"description": [
"We can use a certain mathematical expression to get a random number between two numbers.",
"Instead of generating a random number between zero and a given number like we did before, we can generate a random number that falls within a range of two specific numbers.",
"To do this, we'll define a minimum number <code>min</code> and a maximum number <code>max</code>."
"Here's the formula we'll use. Take a moment to read and try to understand what this code is doing.",
"<code>Math.floor(Math.random() * (max - min + 1)) + min</code>",
"By using this, we can control the output of a random number."
"Define two variables: <code>myMin</code> and </code>myMax</code>, and set them both equal to numbers.",
"Then create a function called <code>myFunction</code> that returns a random number that's greater than or equal to <code>myMin</code>, and is less than <code>myMax</code>."
],
"tests": [
"assert(myFunction() >= min, 'message: The random number generated by <code>myFunction</code> should be greater than or equal to the minimum number.');",
"assert(myFunction() <= max, 'message: The random number generated by <code>myFunction</code> should be less than or equal to the maximum number.');",
"assert(myFunction() >= myMin, 'message: The random number generated by <code>myFunction</code> should be greater than or equal to your minimum number, <code>myMin</code>.');",
"assert(myFunction() <= myMax, 'message: The random number generated by <code>myFunction</code> should be less than or equal to your maximum number, <code>myMax</code>.');",
"assert(myFunction() % 1 === 0 , 'message: The random number generated by <code>myFunction</code> should be an integer, not a decimal.');",
"assert((function(){if(editor.getValue().match(/max/g).length >= 3 && editor.getValue().match(/min/g).length >= 4 && editor.getValue().match(/Math.floor/g) && editor.getValue().match(/Math.random/g)){return true;}else{return false;}})(), 'message: 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(/myMax/g).length >= 3 && editor.getValue().match(/myMin/g).length >= 4 && editor.getValue().match(/Math.floor/g) && editor.getValue().match(/Math.random/g)){return true;}else{return false;}})(), 'message: You should be using a function called <code>myFunction()</code> to calculate your random number in your range.');"
],
"challengeSeed": [
"var min = 1;",
"var max = 9;",
"function myFunction() {",
"var ourMin = 1;",
"",
"var ourMax = 9;",
"",
"function ourFunction() {",
"",
" return Math.floor(Math.random() * (ourMax - ourMin + 1)) + ourMin;",
"",
"}",
"",
" // Only change code below this line.",
"",
" return Math.random();",
"",
"",
"",
"",
"",
"",
"",
"",
"// Only change code above this line.",
"",
"}",
"",
"(function(){return myFunction();})();"
],
@ -1039,7 +1051,7 @@
"We can use <code>if</code> statements in JavaScript to only execute code if a certain condition is met.",
"<code>if</code> statements require some sort of boolean condition to evaluate.",
"For example:",
"<code> if (1 === 2) {</code>",
"<code>if (1 === 2) {</code>",
"<code>&thinsp;&thinsp;return true;</code>",
"<code>} else {</code>",
"<code>&thinsp;&thinsp;return false;</code>",
@ -1056,16 +1068,15 @@
"challengeSeed": [
"var flip = Math.floor(Math.random() * (1 - 0 + 1)) + 0;",
"function myFunction(){",
" // Create an if-else statement here to return \"heads\" if flip is 0. Otherwise return \"tails\".",
"",
" // Only change code below this line.",
"",
"",
"",
" // Only change code above this line.",
"",
"}",
"",
"// We use this function to show you the value of your variable in your output box.",
"var result = myFunction();if(typeof(flip) !== \"undefined\" && typeof(flip) === \"number\" && typeof(result) !== \"undefined\" && typeof(result) === \"string\"){(function(y,z){return 'flip = ' + y.toString() + ', text = ' + z;})(flip, result);}"
],
"type": "waypoint",
@ -1082,22 +1093,24 @@
"<code>g</code> means that we want to search the entire string for this pattern instead of just the first match.",
"<code>i</code> means that we want to ignore the case (uppercase or lowercase) when searching for the pattern.",
"<code>Regular expressions</code> are written by surrounding the pattern with <code>/</code> symbols.",
"Let's try selecting all the occurrences of the word <code>and</code> in the string <code>Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it</code>. We can do this by replacing the <code>.</code> part of our regular expression with the current <code>regular expression</code> with the word <code>and</code>."
"Let's try selecting all the occurrences of the word <code>and</code> in the string <code>Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it</code>.",
"We can do this by replacing the <code>.</code> part of our regular expression with the current <code>regular expression</code> with the word <code>and</code>."
],
"tests": [
"assert(test==2, 'message: Your <code>regular expression</code> should find two occurrences of the word <code>and</code>.');",
"assert(editor.getValue().match(/\\/and\\/gi/), 'message: You should have used <code>regular expressions</code> to find the word <code>and</code>.');"
"assert(editor.getValue().match(/\\/and\\/gi/), 'message: Use <code>regular expressions</code> to find the word <code>and</code> in <code>testString</code>.');"
],
"challengeSeed": [
"var test = (function() {",
" var testString = \"Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.\";",
" var expressionToGetSoftware = /software/gi;",
"",
" // Only change code below this line.",
"",
" var expression = /./gi;",
"",
" // 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;})();"
],
@ -1115,11 +1128,12 @@
"Use the <code>\\d</code> selector to select the number of numbers in the string, allowing for the possibility of multi-digit numbers."
],
"tests": [
"assert(test === 2, 'message: Your RegEx should have found two numbers in the <code>testString</code>.');",
"assert(editor.getValue().match(/\\/\\\\d\\+\\//g), 'message: You should be using the following expression <code>/\\d+/g</code> to find the numbers in the <code>testString</code>.');"
"assert(editor.getValue().match(/\\/\\\\d\\+\\//g), 'message: Use the <code>/\\d+/g</code> regular expression to find the numbers in <code>testString</code>.');",
"assert(test === 2, 'message: Your regular expression should find two numbers in <code>testString</code>.');"
],
"challengeSeed": [
"var test = (function() {",
"",
" var testString = \"There are 3 cats but 4 dogs.\";",
"",
" // Only change code below this line.",
@ -1127,8 +1141,9 @@
" var expression = /.+/g;",
"",
" // 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;})();"
],
"type": "waypoint",
@ -1138,15 +1153,15 @@
"id": "cf1111c1c12feddfaeb8bdef",
"title": "Find Whitespace with Regular Expressions",
"description": [
"We can also use selectors like <code>\\s</code> to find whitespace in a string.",
"The whitespace characters are <code>\" \"</code> (space), <code>\\r</code> (carriage return), <code>\\n</code> (newline), <code>\\t</code> (tab), and <code>\\f</code> (form feed).",
"It is used like this:",
"We can also use regular expression selectors like <code>\\s</code> to find whitespace in a string.",
"The whitespace characters are <code>\" \"</code> (space), <code>\\r</code> (the carriage return), <code>\\n</code> (newline), <code>\\t</code> (tab), and <code>\\f</code> (the form feed).",
"The whitespace regular expression looks like this:",
"<code>/\\s+/g</code>",
"Select all the whitespace characters in the sentence string."
"Use it to select all the whitespace characters in the sentence string."
],
"tests": [
"assert(test === 7, 'message: Your RegEx should have found seven spaces in the <code>testString</code>.');",
"assert(editor.getValue().match(/\\/\\\\s\\+\\//g), 'message: You should be using the following expression <code>/\\s+/g</code> to find the spaces in the <code>testString</code>.');"
"assert(editor.getValue().match(/\\/\\\\s\\+\\//g), 'message: Use the <code>/\\s+/g</code> regular expression to find the spaces in <code>testString</code>.');",
"assert(test === 7, 'message: Your regular expression should find seven spaces in <code>testString</code>.');"
],
"challengeSeed": [
"var test = (function(){",
@ -1157,8 +1172,9 @@
" var expression = /.+/g;",
"",
" // 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;})();"
],
"type": "waypoint",
@ -1168,12 +1184,13 @@
"id": "cf1111c1c13feddfaeb3bdef",
"title": "Invert Regular Expression Matches with JavaScript",
"description": [
"Use <code>/\\S/g</code> to match everything that isn't a space in the string.",
"You can invert any match by using the uppercase version of the selector <code>\\s</code> versus <code>\\S</code> for example."
"You can invert any match by using the uppercase version of the regular expression selector.",
"For example, <code>\\s</code> will match any whitespace, and <code>\\S</code> will match anything that isn't whitespace.",
"Use <code>/\\S/g</code> to count the number of non-whitespace characters in <code>testString</code>.",
],
"tests": [
"assert(test === 49, 'message: Your RegEx should have found forty nine non-space characters in the <code>testString</code>.');",
"assert(editor.getValue().match(/\\/\\\\S\\/g/g), 'message: You should be using the following expression <code>/\\S/g</code> to find non-space characters in the <code>testString</code>.');"
"assert(editor.getValue().match(/\\/\\\\S\\/g/g), 'message: Use the <code>/\\S/g</code> regular expression to find non-space characters in <code>testString</code>.');",
"assert(test === 49, 'message: Your regular expression should find forty nine non-space characters in the <code>testString</code>.');"
],
"challengeSeed": [
"var test = (function(){",
@ -1184,7 +1201,7 @@
" var expression = /./g;",
"",
" // 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;})();"
],

View File

@ -15,7 +15,6 @@
{
"id":"cf1111c1c15feddfaeb1bdef",
"title": "Declare JavaScript Objects as Variables",
"difficulty":0,
"description":[
"Before we dive into Object Oriented Programming, let's revisit JavaScript objects.",
"Give your <code>motorBike</code> object a <code>wheels</code>, <code>engines</code> and <code>seats</code> attribute and set them to numbers."
@ -26,21 +25,20 @@
"assert(typeof(motorBike.seats) === 'number', 'message: <code>motorBike</code> should have a <code>seats</code> attribute set to a number.');"
],
"challengeSeed":[
"//Here is a sample Object",
"var car = {",
" \"wheels\":4,",
" \"engines\":1,",
" \"seats\":5",
"};",
"",
"//Now Let's make a similar Object called motorBike",
"//Give it two wheels, one engine and one seat",
"var motorBike = {",
"",
" // Only change code below this line.",
"",
"",
"",
" // Only change code above this line.",
"",
"};",
"",
"(function() {return JSON.stringify(motorBike);})();"
@ -52,9 +50,14 @@
{
"id":"cf1111c1c15feddfaeb2bdef",
"title": "Construct JavaScript Objects with Functions",
"difficulty":0,
"description":[
"We are also able to create objects using <code>constructor</code> functions.",
"Here's an example of a constructor function:",
"<code>var Car = function() {</code>",
"<code>&thinsp;&thinsp;this.wheels = 4;</code>",
"<code>&thinsp;&thinsp;this.engines = 1;</code>",
"<code>&thinsp;&thinsp;this.seats = 1;</code>",
"<code>};</code>",
"Give your <code>myMotorBike</code> object a <code>wheels</code>, <code>engines</code> and <code>seats</code> attribute and set them to numbers."
],
"tests":[
@ -63,7 +66,6 @@
"assert(typeof((new MotorBike()).seats) === 'number', 'message: <code>myMotorBike</code> should have a <code>seats</code> attribute set to a number.');"
],
"challengeSeed":[
"// Let's add the properties engines and seats to the car in the same way that the property wheels has been added below. They should both be numbers.",
"var Car = function() {",
" this.wheels = 4;",
" this.engines = 1;",
@ -73,6 +75,7 @@
"var myCar = new Car();",
"",
"// Only change code below this line.",
"",
"var MotorBike = function() {",
"",
"",
@ -80,6 +83,7 @@
"};",
"",
"var myMotorBike = new MotorBike();",
"",
"// Only change code above this line.",
"",
"(function() {return JSON.stringify(myMotorBike);})();"
@ -90,12 +94,12 @@
{
"id":"cf1111c1c15feddfaeb3bdef",
"title":"Make Object Properties Private",
"difficulty":0,
"description":[
"Objects have their own attributes, called <code>properties</code>, and their own functions, called <code>methods</code>.",
"In the previous challenge, we used the <code>this</code> keyword to reference <code>public properties</code> and <code>public methods</code> of the current object.",
"We can also create <code>private properties</code> and <code>private methods</code>, which aren't accessible from outside the object.",
"To do this, we omit the word <code>this</code> from the <code>property</code> or <code>method</code> declaration.",
"Let's create an object with two functions. One attached as a property and one not.",
"See if you can keep <code>myBike.speed</code> and <code>myBike.addUnit</code> private, while making <code>myBike.getSpeed</code> publicly accessible."
],
"tests":[
@ -104,7 +108,6 @@
"assert(typeof(myBike.addUnit) === 'undefined', 'message: <code>myBike.addUnit</code> should remain undefined.');"
],
"challengeSeed":[
"//Let's create an object with two functions. One attached as a property and one not.",
"var Car = function() {",
" this.gear = 1;",
" function addStyle(styleMe){",
@ -116,7 +119,9 @@
"};",
"",
"var Bike = function() {",
"",
" // Only change code below this line.",
"",
" this.speed = 100;",
" function addUnit(value) {",
" return value + \"KM/H\";",
@ -125,11 +130,13 @@
" getSpeed = function () {",
" return addUnit(speed);",
" };",
" ",
"",
"};",
"",
"// Only change code above this line.",
"",
"var myCar = new Car();",
"",
"var myBike = new Bike();",
"",
"if(myBike.hasOwnProperty('getSpeed')){(function() {return JSON.stringify(myBike.getSpeed());})();};"
@ -140,7 +147,6 @@
{
"id":"cf1111c1c15feddfaeb4bdef",
"title":"Make Instances of Objects with a Constructor Function",
"difficulty":0,
"description":[
"Sometimes you'll want to be able to easily create similar objects.",
"Objects have their own attributes, called <code>properties</code>, and their own functions, called <code>methods</code>.",
@ -164,7 +170,6 @@
"// Only change code below this line.",
"var myCar = new Car();",
"",
"//Add the property \"engines\" to myCar, and make it a number.",
"",
"",
"// Only change code above this line.",
@ -176,7 +181,6 @@
{
"id":"cf1111c1c15feddfaeb7bdef",
"title":"Iterate over Arrays with .map",
"difficulty":0,
"description":[
"The map method is one of the easiest ways to iterate through an array or object there is. Let's use it now.",
"<code>array = array.map(function(val){</code>",
@ -191,13 +195,14 @@
"assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\]/gi), 'message: You should only modify the array with <code>.map</code>.');"
],
"challengeSeed":[
"//Use map to add three to each value in the array",
"var array = [1,2,3,4,5];",
"",
"// Only change code below this line.",
"",
"",
"",
"// Only change code above this line.",
"",
"(function() {return array;})();"
],
"MDNlinks":[
@ -209,7 +214,6 @@
{
"id":"cf1111c1c15feddfaeb8bdef",
"title":"Condense arrays with .reduce",
"difficulty":0,
"description":[
"Reduce can be useful for condensing an array of numbers into one value.",
"<code>var singleVal = array.reduce(function(previousVal, currentVal){</code>",
@ -223,12 +227,15 @@
],
"challengeSeed":[
"var array = [4,5,6,7,8];",
"",
"var singleVal = 0;",
"",
"// Only change code below this line.",
"",
"",
"",
"// Only change code above this line.",
"",
"(function() {return singleVal;})();"
],
"MDNlinks":[
@ -240,7 +247,6 @@
{
"id":"cf1111c1c15feddfaeb9bdef",
"title":"Filter Arrays with .filter",
"difficulty":0,
"description":[
"Filter is a useful method that can filter out values that don't match a certain criteria",
"Let's remove all the values greater than five",
@ -255,11 +261,13 @@
],
"challengeSeed":[
"var array = [1,2,3,4,5,6,7,8,9,10];",
" // Only change code below this line.",
"",
"// Only change code below this line.",
"",
"",
"",
" // Only change code above this line.",
"// Only change code above this line.",
"",
"(function() {return array;})();"
],
"MDNlinks":[
@ -271,7 +279,6 @@
{
"id":"cf1111c1c16feddfaeb1bdef",
"title": "Sort Arrays with .sort",
"difficulty":0,
"description":[
"You can use the method <code>sort</code> to easily sort the values in the array alphabetically or numerically.",
"<code>var array = [1, 3, 2];</code>",
@ -286,11 +293,13 @@
],
"challengeSeed":[
"var array = ['beta', 'alpha', 'charlie'];",
"",
"// Only change code below this line.",
"",
"",
"",
" // Only change code above this line.",
"// Only change code above this line.",
"",
"(function() {return array;})();"
],
"MDNlinks":[
@ -313,11 +322,13 @@
],
"challengeSeed": [
"var array = [1,2,3,4,5,6,7];",
" // Only change code below this line.",
"",
"// Only change code below this line.",
"",
"",
"",
" // Only change code above this line.",
"// Only change code above this line.",
"",
"(function() {return array;})();"
],
"MDNlinks":[
@ -343,11 +354,13 @@
"var array = [1,2,3];",
"",
"var concatMe = [4,5,6];",
"",
"// Only change code below this line.",
"",
"",
"",
"// Only change code above this line.",
"",
"(function() {return array;})();"
],
"MDNlinks":[
@ -359,7 +372,6 @@
{
"id":"cf1111c1c16feddfaeb4bdef",
"title":"Split Strings with .split",
"difficulty":0,
"description":[
"You can use the <code>.split()</code> method to split a string into an array.",
"<code>.split()</code> uses the argument you pass in as a delimiter to determine which points the string should be split at.",
@ -367,16 +379,18 @@
"Use <code>.split()</code> to create an array of words from <code>string</code> and assign it to <code>array</code>."
],
"tests":[
"assert(typeof(array) === 'object' && array.length === 5, 'message: You should split the string by its spaces.');",
"assert(/\\.split\\(/gi, 'message: You should use the split method on the string.');"
"assert(/\\.split\\(/gi, 'message: You should use the split method on the string.');",
"assert(typeof(array) === 'object' && array.length === 5, 'message: You should split the string by its spaces.');"
],
"challengeSeed":[
"var string = \"Split me into an array\";",
"",
"// Only change code below this line.",
"",
"var array = string;",
"",
"// Only change code above this line.",
"",
"(function() {return array;})();"
],
"MDNlinks":[
@ -388,7 +402,6 @@
{
"id":"cf1111c1c16feddfaeb5bdef",
"title":"Join Strings with .join",
"difficulty":0,
"description":[
"We can use the <code>.join()</code> method to join each element in an array into a string separated by whatever delimiter you provide as an argument to the join operation.",
"<code>var joinMe = joinMe.join(\" \");</code>",
@ -400,11 +413,13 @@
],
"challengeSeed":[
"var joinMe = [\"Split\",\"me\",\"into\",\"an\",\"array\"];",
"",
"// Only change code below this line.",
"",
"joinMe = joinMe;",
"",
"// Only change code above this line.",
"",
"(function() {return joinMe;})();"
],
"MDNlinks":[