diff --git a/seed/challenges/basic-javascript.json b/seed/challenges/basic-javascript.json index e5c072ee2a..b47d31002e 100644 --- a/seed/challenges/basic-javascript.json +++ b/seed/challenges/basic-javascript.json @@ -1,13 +1,13 @@ { "name": "Basic JavaScript", - "order": 0.005, + "order": 0.006, "challenges": [ { - "id": "bd7123c9c441eddfaeb4bdef", - "name": "Welcome To Comments", - "dashedName": "waypoint-welcome-to-comments", - "difficulty": "9.98", - "description": [ + "id":"bd7123c9c441eddfaeb4bdef", + "name":"Welcome To Comments", + "dashedName":"waypoint-welcome-to-comments", + "difficulty":"9.98", + "description":[ "", "A comment is a very useful line of code that is not actually ran by the machine executing it. With this property comments are the perfect way of creating notes to yourself or anyone else who reads your code describing what the code does", "It's an extremely important part in writing good, efficient and maintainable code and a requirement by most employers", @@ -18,12 +18,12 @@ "These comment out everything in between /* and */ ", "Try creating one of each now." ], - "tests": [ + "tests":[ "assert(editor.getValue().match(/(\\/\\*)...../g), 'Make sure you have at least one \/\\* \\*\/ style comment that has at least five letters in it');", "assert(editor.getValue().match(/(\\*\\/)/g), 'Make sure that you close the coment with a \\*\/');", "assert(editor.getValue().match(/(\\/\\/)...../g), 'Make sure that there is at least one \\/\\/ style comment with at least five letters in it');" ], - "challengeSeed": [ + "challengeSeed":[ ], "challengeType": 1 @@ -265,7 +265,7 @@ "challengeType": 1 }, { - "id": "bh1111c1c11feddfaeb3bdef", + "id": "cf1111c1c11feddfaeb3bdef", "name": "Magical Maths Addition", "dashedName": "waypoint-magical-maths-addition", "difficulty": "9.98141", @@ -289,7 +289,7 @@ "challengeType": 1 }, { - "id": "bh1111c1c11feddfaeb4bdef", + "id": "cf1111c1c11feddfaeb4bdef", "name": "Magical Maths Subtraction", "dashedName": "waypoint-magical-maths-subtraction", "difficulty": "9.98142", @@ -313,7 +313,7 @@ "challengeType": 1 }, { - "id": "bh1111c1c11feddfaeb5bdef", + "id": "cf1111c1c11feddfaeb5bdef", "name": "Magical Maths Multiplication", "dashedName": "waypoint-magical-maths-multiplication", "difficulty": "9.98143", @@ -337,7 +337,7 @@ "challengeType": 1 }, { - "id": "bh1111c1c11feddfaeb6bdef", + "id": "cf1111c1c11feddfaeb6bdef", "name": "Magical Maths Division", "dashedName": "waypoint-magical-maths-division", "difficulty": "9.9814", @@ -361,7 +361,7 @@ "challengeType": 1 }, { - "id": "bh1111c1c11feddfaeb4bdef", + "id": "cf1111c1c11feddfaeb4bdef", "name": "Creating Decimals", "dashedName": "waypoint-creating-decimals", "difficulty": "9.9815", @@ -439,19 +439,19 @@ "challengeType": 1 }, { - "id": "bh1111c1c11feddfaeb7bdef", - "name": "Nesting Arrays", - "dashedName": "waypoint-nesting-arrays", - "difficulty": "9.98161", - "description": [ + "id":"cf1111c1c11feddfaeb7bdef", + "name":"Nesting Arrays", + "dashedName":"waypoint-nesting-arrays", + "difficulty":"9.98161", + "description":[ "", "We are also able to create arrays within arrays. This technique is called nesting.", "Let's now go create a nested array called myArray" ], - "tests": [ + "tests":[ "assert((function(){if(typeof(myArray) !== 'undefined' && typeof(myArray) === 'object' && typeof(myArray[0]) !== 'undefined' && typeof(myArray) === 'object'){return(true);}else{return(false);}})(), 'myArray should contain at least one array');" ], - "challengeSeed": [ + "challengeSeed":[ "var myArray = [];", "", "", @@ -460,25 +460,26 @@ "challengeType": 1 }, { - "id": "bg9997c9c79feddfaeb9bdef", - "name": "Accessing data with Indexes", - "dashedName": "waypoint-accessing-data-with-indexes", - "difficulty": "9.9817", - "description": [ + "id":"bg9997c9c79feddfaeb9bdef", + "name":"Accessing data with Indexes", + "dashedName":"waypoint-accessing-data-with-indexes", + "difficulty":"9.9817", + "description":[ "", "Once an array has been created we can access the data we have stored in them using indexes", "Indexes are written in the same way as bracket notation that we covered earlier", "Example:", "", - "var array = [1,2,3]", - "array[0]//equals 1", + "var array = [1,2,3];", + "array[0];//equals 1", + "var data = array[1];", "", "Create a var called data and set it to equal the first value of myArray" ], - "tests": [ + "tests":[ "assert((function(){if(typeof(myArray) != 'undefined' && typeof(data) != 'undefined' && myArray[0] == data){return(true);}else{return(false);}})(), 'the variable data should equal the first value of myArray');" ], - "challengeSeed": [ + "challengeSeed":[ "//var ourArray = [1,2,3]", "//var ourData = ourArray[0]//equals 1", "", @@ -490,6 +491,39 @@ ], "challengeType": 1 }, + { + "id":"cf1111c1c11feddfaeb8bdef", + "name":"Modifying Data With Indexes", + "dashedName":"waypoint-modifying-data-with-indexes", + "difficulty":"9.98171", + "description":[ + "", + "We are able to modify the data store in an array be using indexes", + "Example:", + "", + "var ourArray = [1,2,3];", + "ourArray[0] = 3;//ourArray equals [3,2,3]", + "", + "Now Let's modify myArray using an index", + "" + ], + "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 >= 2 && editor.getValue().match(/=/g).length >= 2){return(true);}else{return(false);}})(), 'You should be using indexes to modify the values in myArray');" + ], + "challengeSeed":[ + "//var ourArray = [1,2,3];", + "//ourArray[0] = 3;", + "", + "var myArray = [1,2,3];", + "", + "", + "", + "", + "if(typeof(myArray) != 'undefined'){(function(){return(myArray);})();}" + ], + "challengeType": 1 + }, { "id": "bg9994c9c69feddfaeb9bdef", "name": "Manipulating Arrays With pop()", @@ -593,141 +627,49 @@ "challengeType": 1 }, { - "id": "bg9997c9c89feddfaeb9bdef", - "name": "Make it functional", - "dashedName": "waypoint-make-it-functional", - "difficulty": "9.9819", - "description": [ + "id":"bg9997c9c89feddfaeb9bdef", + "name":"Make it functional", + "dashedName":"waypoint-make-it-functional", + "difficulty":"9.9819", + "description":[ "", "In JavaScript we can divide up our code into separate and reusable parts called functions", "here's and example of a function", "", - "function funcitonName (one, two ,three){", - " /*Some Code*/", + "function functionName (a, b){", + " return(a + b);", "}", "", "our function can be called like this", "functionName();", - "Let's try creating and calling a function now." + "Let's try creating and calling a function now called myFunction" ], - "tests": [ - "assert(f==data);" + "tests":[ + "assert((function(){if(typeof(f) !== 'undefined' && typeof(f) === 'number' && f === 9){return(true);}else{return(false);}})(), 'Your function should return the value of a + b');" ], - "challengeSeed": [ - "//var ourData = 'function called!';", - "//function ourFunction(ourData) {/*ourData is being passed to this function as an argument*/", - "//return(data);", - "//}", - "", - "var data = 'Function Called!';", - "", - "//Create a function called myFunction that takes data as an argument and returns it like the example above", - "", + "challengeSeed":[ + "var a = 4;", + "var b = 5;", + "//Don not modify the above!", + "//Create a function called myFunction that adds a and b", "", "", "", "", "//Don't modify this!", - "var f=myFunction(data);", - "(function(){var f=myFunction(data);return(f);})('');" + "if(typeof(myFunction) != 'undefined'){", + "var f=myFunction(a,b);", + "(function(){return(f);})();", + "}" ], "challengeType": 1 }, { - "id": "bg9997c9c99feddfaeb9bdef", - "name": "Doing things inside functions", - "dashedName": "waypoint-doing-things-inside-functions", - "difficulty": "9.982", - "description": [ - "", - "A function that takes the value you give it and returns it isn't very useful! So now let's get our functions to do something!", - "Starting from where we were last time let's make our function revers whatever we give it by chaining .split('') , .reverse() and .join('') " - ], - "tests": [ - "assert(f==data.split('').reverse().join(''), 'myFunction should now return the reversed version of data (!dellaC noitcnuF)');" - ], - "challengeSeed": [ - "//You can reverse strings like this", - "//var notReversed = 'String';", - "//var reversed = notReversed.split('').reverse().join('');", - "", - "var data = 'Function Called!';", - "", - "function myFunction(data){", - " ", - " return(data);", - "}", - "", - "", - "", - "//Don't modify this!", - "var f=myFunction(data);", - "(function(f){return(f);})(f);" - ], - "challengeType": 1 - }, - { - "id": "bg9997c9c99feddfaeb9bdef", - "name": "Keeping In The Scope Of Things", - "dashedName": "waypoint-keeping-in-the-scope-of-things", - "difficulty": "9.9821", - "description": [ - "", - "All variables are contained in something called a scope .", - "A Scope defines where are variable can be accessed.", - "All variables created outside any functions exist in what is called the global scope ", - "All variables are container or are scope to inside that function.", - "", - "var variable = 'Global Scope'", - "function test(){", - " return(variable);", - "}", - "test();//Returns Global Scope", - "", - "function change(){", - " variable = 'test';", - " return(variable);", - "}", - "", - "change();//Returns test", - "variable //equals Global Scope", - "", - "", - "Let's give this a go!" - ], - "tests": [ - "assert(Global == access(Global), 'access should return your Global var');", - "assert(Global != localChange(Global), 'localChange should return your Global var');" - ], - "challengeSeed": [ - "//Create Your global variable with any value here", - "var Global = _;", - "", - "//Make access() return you global variable", - "function access(){", - " ", - "}", - "", - "access();", - "", - "//Pass you global variable into localChange and modify it within the function", - "function localChange(){", - " ", - "}", - "", - "//Don't forget to call localChange here and pass your global variable", - "", - "", - "(function(x,y,z){return('access returns: ' + y(x) + ' & localChange returns: ' + z(x));})(Global, access, localChange);" - ], - "challengeType": 1 - }, - { - "id": "bg9998c9c99feddfaeb9bdef", - "name": "I Object!", - "dashedName": "waypoint-i-object", - "difficulty": "9.9822", - "description": [ + "id":"bg9998c9c99feddfaeb9bdef", + "name":"I Object!", + "dashedName":"waypoint-i-object", + "difficulty":"9.9822", + "description":[ "", "A very important data type in javascript is the Object ", " Objects a similar to arrays except that instead of using indexes to access and modify their data, Objects have what are called properties ", @@ -744,13 +686,13 @@ "Let's try to make a Object that represents a dog called myDog!" ], - "tests": [ + "tests":[ "assert((function(z){if(z.hasOwnProperty('name') && z.name != undefined && typeof(z.name) == 'string'){return(true);}else{return(false);}})(myDog), 'myDog should contain the property name and it should be a string');", "assert((function(z){if(z.hasOwnProperty('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": [ + "challengeSeed":[ "//var ourDog = {", "// \"name\": \"Camper\"", "// \"legs\": 4", @@ -770,11 +712,11 @@ "challengeType": 1 }, { - "id": "bg9999c9c99feddfaeb9bdef", - "name": "Manipulating Objects", - "dashedName": "waypoint-manipulating-objects", - "difficulty": "9.9823", - "description": [ + "id":"bg9999c9c99feddfaeb9bdef", + "name":"Manipulating Objects", + "dashedName":"waypoint-manipulating-objects", + "difficulty":"9.9823", + "description":[ "", "Now that we have an objects we need to know how to add and remove properties from it", "We add properties to objects like this", @@ -784,11 +726,11 @@ "Let's add the property bark", "" ], - "tests": [ + "tests":[ "assert(myDog.bark != undefined, 'The property tails should have been deleted');", "assert(myDog.tails == undefined, 'The property tails should have been deleted');" ], - "challengeSeed": [ + "challengeSeed":[ "//var ourDog = {", "//\"name\": \"Camper\"", "//\"legs\": 4", @@ -816,11 +758,11 @@ "challengeType": 1 }, { - "id": "bh1111c1c11feddfaeb5bdef", - "name": "Looping with for", - "dashedName": "waypoint-looping-with-for", - "difficulty": "9.9824", - "description": [ + "id":"cf1111c1c11feddfaeb5bdef", + "name":"Looping with for", + "dashedName":"waypoint-looping-with-for", + "difficulty":"9.9824", + "description":[ "", "Loops are a critical part of any program! The next few challenges", "first we will be taking a look at the for loop", @@ -833,11 +775,11 @@ "ourArray now contains [0,1,2,3,4] ", "Let's try getting a for loop to work by pushing values to an array" ], - "tests": [ + "tests":[ "assert(editor.getValue().match(/for\\(/g), 'You should be using a for loop for this!');", "assert.deepEqual(myArray, [0,1,2,3,4], 'myArray should equal [0,1,2,3,4]');" ], - "challengeSeed": [ + "challengeSeed":[ "var myArray = [];", "//Push the numbers 0-4 to myArray", "", @@ -846,11 +788,11 @@ "challengeType": 1 }, { - "id": "bh1111c1c11feddfaeb1bdef", - "name": "Looping with while", - "dashedName": "waypoint-looping-with-while", - "difficulty": "9.9825", - "description": [ + "id":"cf1111c1c11feddfaeb1bdef", + "name":"Looping with while", + "dashedName":"waypoint-looping-with-while", + "difficulty":"9.9825", + "description":[ "", "Loops are a critical part of any program! The next few challenges", "first we will be taking a look at the for loop", @@ -864,11 +806,11 @@ "", "Let's try getting a for loop to work by pushing values to an array" ], - "tests": [ + "tests":[ "assert(editor.getValue().match(/while\\(/g), 'You should be using a while loop for this!');", "assert.deepEqual(myArray, [0,1,2,3,4], 'myArray should equal [0,1,2,3,4]');" ], - "challengeSeed": [ + "challengeSeed":[ "var myArray = [];", "//Push the numbers 0-4 to myArray", "", @@ -877,11 +819,11 @@ "challengeType": 1 }, { - "id": "bh1111c1c11feddfaeb2bdef", - "name": "Looping with do while", - "dashedName": "waypoint-looping-with-do-while", - "difficulty": "9.9826", - "description": [ + "id":"cf1111c1c11feddfaeb2bdef", + "name":"Looping with do while", + "dashedName":"waypoint-looping-with-do-while", + "difficulty":"9.9826", + "description":[ "", "Let's now take a look at the do - while loop", "", @@ -895,17 +837,238 @@ "A do - while has a very special difference when compared to the for and while loops. The do while loop is guaranteed to execute preform it's action once regardless of whether or not the condition inside the while is met!", "Let's try getting a do - while loop to work by pushing values to an array" ], - "tests": [ + "tests":[ "assert.deepEqual(myArray, [0,1,2,3,4], 'myArray should equal [0,1,2,3,4]');", "assert((function(){if(editor.getValue().match(/do/g) && editor.getValue(/while/g).match()){return(true);}else{return(false);}})(), 'You should be using a do while loop for this!');" ], - "challengeSeed": [ + "challengeSeed":[ "var myArray = [];", "//Push the numbers 0-4 to myArray", "", "" ], "challengeType": 1 + }, + { + "id":"cf1111c1c11feddfaeb9bdef", + "name":"Random Numbers", + "dashedName":"waypoint-random-numbers", + "difficulty":"9.9827", + "description":[ + "", + "Random numbers are a very useful for creating random behaviours and games", + "Javascript has a Math.random() method that can generate a random decimal number", + "Let's have a go of Math.random() now be getting myFunction to return a random number" + ], + "tests":[ + "assert(typeof(myFunction()) === 'number', 'myFunction should return a random number');", + "assert((myFunction()+''). match(/\\./g), 'The number returned by myFunction should be a decimal');", + "assert(editor.getValue().match(/Math\\.random/g).length >= 2, 'You should be using Math.random to generate the random decimal number');" + ], + "challengeSeed":[ + "", + "function myFunction(){", + " //Change the 0 to Math.random()", + " return(0);", + "}", + "", + "(function(){return(myFunction());})();" + ], + "challengeType": 1 + }, + { + "id":"cf1111c1c12feddfaeb1bdef", + "name":"Random Whole Numbers", + "dashedName":"waypoint-random-whole-numbers", + "difficulty":"9.9828", + "description":[ + "", + "While it's great that we can create random decimal numbers it's a 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", + "Example:", + "Math.floor(Math.random()*10);", + "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(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 float", + " return(Math.random());", + "}", + "", + "(function(){return(myFunction());})();" + ], + "challengeType": 1 + }, + { + "id":"cf1111c1c12feddfaeb2bdef", + "name":"Random Whole Numbers In a Range", + "dashedName":"waypoint-random-whole-numbers-in-a-range", + "difficulty":"9.9829", + "description":[ + "", + "We can use a certain mathematical expression to get a random number between between twp numbers.", + "Math.floor(Math.random() * (max - min + 1)) + min", + "By using this we can control the output of the 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 >= 3 && 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;", + "function myFunction(){", + " //Make myFunction return a random number between zero and nine instead of a float", + " return(Math.random());", + "}", + "", + "(function(){return(myFunction());})();" + ], + "challengeType": 1 + }, + { + "id":"cf1111c1c12feddfaeb3bdef", + "name":"If Else Statements", + "dashedName":"waypoint-if-else-statements", + "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", + "Example:", + "if(1==2){", + " return(true);", + "}", + "else{", + " return(false);", + "}", + "Let's have a go of using if statements now by making 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" + ], + "tests":[ + "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 false", + " ", + "}", + "", + "(function(){return(myFunction());})();" + ], + "challengeType": 1 + }, + { + "id":"cf1111c1c12feddfaeb6bdef", + "name":"An Intro To RegEx", + "dashedName":"waypoint-an-intro-to-regex", + "difficulty":"9.984", + "description":[ + "", + "RegEx is a powerful tool we can use to find certain words or patterns in strings", + "RegEx can look difficult at first but there's not much to getting it working", + "If we wanted to find the number of times the word \"the\" occured in the string \"The dog chased the cat\" We could use the following RegEx:", + "\/the+\/gi", + "Let's break this down a bit", + "\"The\" is the pattern we want to match", + "\"+\" means we are looking for one or more occurrences of this pattern", + "\"g\" means that it searhces the whole string", + "\"i\" means that we are ignoring the case(upper or lower) of what we are looking for", + "Let's try finding the word and in the string \"John and Alan went to the shop and got some milk\" by replacing the .+ in the currnet RegEx with something that will find the word \"and\" and count how many times it occurs" + ], + "tests":[ + "assert(test==2, 'You\\'re RegEx should have found two occurances of the word \"and\"');", + "assert(editor.getValue().match(/\\/and\\+\\/gi/), 'You should have used this RegEx to find the word \"and\"');" + ], + "challengeSeed":[ + "var test = (function(){", + " var testString = \"John and Alan went to the shop and got some milk\";", + "", + "//Do Not Modify Above", + "", + " var expression = /.+/gi;", + "", + "//Do Not Modify Below", + "", + " return(testString.match(expression).length);", + "})();(function(){return(test);})();" + ], + "challengeType": 1 + }, + { + "id":"cf1111c1c12feddfaeb7bdef", + "name":"Finding Numbers", + "dashedName":"waypoint-finding-numbers", + "difficulty":"9.985", + "description":[ + "", + "We can use special selectors in RegEx to select a particular type of value", + "One such selector is the digit selector \\d which is used to grab the numbers in a string", + "It is used like this:", + "/\\d+/g", + "" + ], + "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');" + ], + "challengeSeed":[ + "var test = (function(){", + " var testString = \"There's 3 cats but 4 dogs.\"", + "", + "//Do Not Modify Above", + "", + " var expression = /.+/gi;", + "", + "//Do Not Modify Below", + "", + " return(testString.match(expression).length);", + "})();(function(){return(test);})();" + ], + "challengeType": 1 + }, + { + "id":"cf1111c1c12feddfaeb8bdef", + "name":"Finding WhiteSpace", + "dashedName":"waypoint-finding-whitespace", + "difficulty":"9.987", + "description":[ + "", + "We can also use selectors like \\s to find spaces in a string", + "It is used like this:", + "/\\s+/g", + "" + ], + "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');" + ], + "challengeSeed":[ + "var test = (function(){", + " var testString = \"How many spaces are there in this sentance.\";", + "", + "//Do Not Modify Above", + "", + " var expression = /.+/gi;", + "", + "//Do Not Modify Below", + "", + " return(testString.match(expression).length);", + "})();(function(){return(test);})();" + ], + "challengeType": 1 } ] } diff --git a/seed/challenges/html5-and-css.json b/seed/challenges/html5-and-css.json index b58e74ff8d..dbb0f037fe 100644 --- a/seed/challenges/html5-and-css.json +++ b/seed/challenges/html5-and-css.json @@ -8,11 +8,10 @@ "dashedName": "waypoint-say-hello-to-html-elements", "difficulty": 0.001, "description": [ - "Welcome to Free Code Camp's first coding challenge! Click on the button below for further instructions.", - "Awesome. Now you can read the rest of this challenge's instructions.", + "Welcome to Free Code Camp's first coding challenge!", "You can edit code in your text editor, which we've embedded into this web page.", "Do you see the code in your text editor that says <h1>Hello</h1>? That's an HTML element.", - "Most HTML elements have an opening tag and a closing tag. Opening tags look like this: <h1>. Closing tags look like this: </h1>. Note that the only difference between opening and closing tags is that closing tags have a slash after their opening angle bracket.", + "Most HTML elements have an opening tag and a closing tag. Opening tags look like this: <h1>. Closing tags look like this: </h1>. Note that the only difference between opening tags and closing tags is that closing tags have a slash after their opening angle bracket.", "Once you've completed each challenge, and all its tests are passing, the \"Go to my next challenge\" button will become enabled. Click it - or press control and enter at the same time - to advance to the next challenge.", "To enable the \"Go to my next challenge\" button on this exercise, change your h1 tag's text to say \"Hello World\" instead of \"Hello\"." ], @@ -240,11 +239,10 @@ "dashedName": "waypoint-fill-in-the-blank-with-placeholder-text", "difficulty": 0.007, "description": [ - "Replace the text inside your p element with the first few words of the provided \"Kitty Ipsum\" text.", "Web developers traditionally use \"Lorem Ipsum\" text as placeholder text. It's called \"Lorem Ipsum\" text because those are the first two words of a famous passage by Cicero of Ancient Rome.", "\"Lorem Ipsum\" text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.", "Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called \"Kitty Ipsum\"!", - "Here are the first few words of \"Kitty Ipsum\" text, which you can copy and paste into the right position: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." + "Replace the text inside your p element with the first few words of this \"Kitty Ipsum\" text: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ], "tests": [ "assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($('p').text()), 'Your p element should contain the first few words of the provided \"Kitty Ipsum\" text.')" @@ -528,9 +526,9 @@ "dashedName": "waypoint-change-the-font-size-of-an-element", "difficulty": 0.013, "description": [ - "Create a second p element. Then, inside your <style> element, set the \"font-size\" of all p elements to 16 pixels.", + "Create a second p element with the following Kitty Ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", + "Then, inside your <style> element, set the \"font-size\" of all p elements to 16 pixels.", "Font size is controlled by the \"font-size\" CSS attribute, like this: h1 { font-size: 30px; }.", - "First, create a second p element with the following Kitty Ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", "See if you can figure out how to give both of your p elements the font-size of 16 pixels (16px). You can do this inside the same <style> tag that we created for your \"red-text\" class." ], "tests": [ @@ -676,15 +674,15 @@ "dashedName": "waypoint-specify-how-fonts-should-degrade", "difficulty": 0.016, "description": [ - "Make all your h2 elements use \"Lobster\" as their font family, but degrade to the \"Monospace\" font when the \"Lobster\" font isn't available.", - "You can leave \"Lobster\" your h2 element's font-family, and have it \"degrade\" to a different font when \"Lobster\" isn't available.", + "There are several default fonts that are available in all browsers. These include \"Monospace\", \"Serif\" and \"Sans-Serif\". Leave \"Lobster\" as the font-family for your h2 elements. Make them \"degrade\" to \"Monospace\" when \"Lobster\" isn't available.", "For example, if you wanted an element to use the \"Helvetica\" font, but also degrade to the \"Sans-Serif\" font when \"Helvetica\" wasn't available, you could use this CSS style: p { font-family: Helvetica, Sans-Serif; }.", - "There are several default fonts that are available in all browsers. These include \"Monospace\", \"Serif\" and \"Sans-Serif\". See if you can set your h2 elements to use \"Lobster\" and degrade to \"Monospace\".", - "Now try commenting out your call to Google Fonts, so that the \"Lobster\" font isn't available. Notice how it degrades to the \"Monospace\" font." + "Now comment out your call to Google Fonts, so that the \"Lobster\" font isn't available. Notice how it degrades to the \"Monospace\" font." ], "tests": [ "assert($('h2').css('font-family').match(/^\"?lobster/i), 'Your h2 element should use the font \"Lobster\".')", - "assert($('h2').css('font-family').match(/lobster\"?,monospace/i), 'Your h2 element should degrade to the font \"Monospace\" when \"Lobster\" is not available.')" + "assert($('h2').css('font-family').match(/lobster.*,.*monospace/i), 'Your h2 element should degrade to the font \"Monospace\" when \"Lobster\" is not available.')", + "assert(new RegExp('', 'gi').test(editor), 'Be sure to close your comment by deleting all trailing comment tags, i.e. -->.')" ], "challengeSeed": [ "", @@ -734,7 +732,6 @@ "dashedName": "waypoint-add-images-to-your-website", "difficulty": 0.017, "description": [ - "Use an img element to add the image http://bit.ly/fcc-kittens to your website.", "You can add images to your website by using the img element, and point to an specific image's URL using the src attribute.", "An example of this would be <img src=\"www.your-image-source.com/your-image.jpg\"/>. Note that in most cases, img elements are self-closing.", "Try it with this image: http://bit.ly/fcc-kittens." @@ -790,9 +787,9 @@ "dashedName": "waypoint-size-your-images", "difficulty": 0.018, "description": [ - "Create a class called smaller-image and use it to resize the image so that it's only 100 pixels wide.", "CSS has an attribute called width that controls an element's width. Just like with fonts, we'll use pixels(px) to specify the image's width.", - "For example, if we wanted to create a CSS class called \"larger-image\" that gave HTML elements a width of 500 pixels, we'd use: <style> .larger-image { width: 500px; } </style>." + "For example, if we wanted to create a CSS class called \"larger-image\" that gave HTML elements a width of 500 pixels, we'd use: <style> .larger-image { width: 500px; } </style>.", + "Create a class called smaller-image and use it to resize the image so that it's only 100 pixels wide." ], "tests": [ "assert($('img').hasClass('smaller-image'), 'Your img element should have the class \"smaller-image\".')", @@ -846,9 +843,9 @@ "dashedName": "waypoint-add-borders-around-your-elements", "difficulty": 0.019, "description": [ - "Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border with a style of \"solid\" around an HTML element, and apply that class to your cat photo.", "CSS borders have attributes like style, color and width.", - "For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style>." + "For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style>.", + "Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border with a style of \"solid\" around an HTML element, and apply that class to your cat photo." ], "tests": [ "assert($('img').hasClass('smaller-image'), 'Your img element should have the class \"smaller-image\".')", @@ -909,9 +906,9 @@ "dashedName": "waypoint-add-rounded-corners-with-a-border-radius", "difficulty": 0.020, "description": [ - "Give your cat photo a border-radius of 10 pixels.", "Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called border-radius.", - "You can specify a border-radius with pixels. This will affect how rounded the corners are. Add this attribute to your thick-green-border class and set it to 10 pixels." + "You can specify a border-radius with pixels. This will affect how rounded the corners are. Add this attribute to your thick-green-border class and set it to 10 pixels.", + "Give your cat photo a border-radius of 10 pixels." ], "tests": [ "assert($('img').hasClass('thick-green-border'), 'Your image element should have the class \"thick-green-border\".')", @@ -975,8 +972,8 @@ "dashedName": "waypoint-make-circular-images-with-a-border-radius", "difficulty": 0.021, "description": [ - "Give your cat photo a border-radius of 50%.", - "In addition to pixels, you can also specify a border-radius using a percentage." + "In addition to pixels, you can also specify a border-radius using a percentage.", + "Give your cat photo a border-radius of 50%." ], "tests": [ "assert(parseInt($('img').css('border-top-left-radius')) > 48, 'Your image should have a border radius of 50 percent, making it perfectly circular.')", @@ -1040,10 +1037,11 @@ "dashedName": "waypoint-link-to-external-pages-with-anchor-elements", "difficulty": 0.022, "description": [ - "Create an a element, or \"anchor element\", that links to http://catphotoapp.com and has \"cat photos\" as its link text, or \"anchor text\".", - "Here's a diagram of an a element. In this case, it's used in the middle of a paragraph element, which means your link will appear in the middle of your sentence.", + "a elements or \"anchor\" elements, are used to link to content outside of the current page.", + "Here's a diagram of an a element. In this case, the a element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.", "a diagram of how anchor tags are composed with the same text as on the following line", - "Here's an example: <p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p>." + "Here's an example: <p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p>.", + "Create an a element that links to http://catphotoapp.com and has \"cat photos\" as its \"anchor text\"." ], "tests": [ "assert((/cat photos/gi).test($('a').text()), 'Your a element should have the anchor text of \"cat photos\"')", @@ -1110,10 +1108,10 @@ "dashedName": "waypoint-wrap-an-anchor-element-within-a-paragraph", "difficulty": 0.023, "description": [ - "Now wrap your a element within a new p element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link - the rest is plain text.", "Again, here's a diagram of an a element for your reference:", "a diagram of how anchor tags are composed with the same text as on the following line", - "Here's an example: <p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p>." + "Here's an example: <p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p>.", + "Now wrap your a element within a new p element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link - the rest is plain text." ], "tests": [ "assert($('a').attr('href').match(/catphotoapp.com/gi).length > 0, 'You need an a element that links to \"catphotoapp.com\".')", @@ -1185,10 +1183,9 @@ "dashedName": "waypoint-make-dead-links-using-the-hash-symbol", "difficulty": 0.024, "description": [ - "Use the hash symbol (#) to turn your a element's link into a dead link.", "Sometimes you want to add a elements to your website before you know where they will link.", "This is also handy when you're changing the behavior of a link using jQuery, which we'll learn about later.", - "Replace your a element's href attribute with a hash symbol to turn it into a dead link." + "Replace your a element's href attribute with a hash symbol (#) to turn it into a dead link." ], "tests": [ "assert($('a').attr('href') === '#', 'Your anchor element should be a dead link with a href attribute set to \"#\".')" @@ -1255,7 +1252,6 @@ "dashedName": "waypoint-turn-an-image-into-a-link", "difficulty": 0.025, "description": [ - "Wrap your img element inside an a element with a dead link.", "You can make elements into links by wrapping them within an a element.", "Wrap your image within an a element. Here's an example: <a href='#'><img src='http://bit.ly/fcc-kittens2'/></a>.", "Remember to use the hash symbol (#) as your a element's href property in order to turn it into a dead link.", @@ -1329,11 +1325,11 @@ "dashedName": "waypoint-add-alt-text-to-an-image-for-accessibility", "difficulty": 0.026, "description": [ - "Add an alt attribute with the text \"A cute orange cat lying on its back\" to our cat photo.", "alt attributes, also known as \"alt text\", are what browsers will display if they fail to load the image. alt attributes are also important for blind or visually impaired users to understand what an image portrays. Search engines also look at alt attributes.", "In short, every image should have an alt attribute!", "alt attributes are a useful way to tell people (and web crawlers like Google) what is pictured in a photo. It's extremely important for helping blind or visually impaired people understand the content of your website.", - "You can add an alt attribute right in the img element like this: <img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/>." + "You can add an alt attribute right in the img element like this: <img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/>.", + "Add an alt attribute with the text \"A cute orange cat lying on its back\" to our cat photo." ], "tests": [ "assert($('img').filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'Your image element should have an alt attribute set to \"A cute orange cat lying on its back\".')" @@ -1401,10 +1397,10 @@ "dashedName": "waypoint-create-a-bulleted-unordered-list", "difficulty": 0.027, "description": [ - "Replace your p elements with an unordered list of three things that cats love.", "HTML has a special element for creating unordered lists, or bullet point-style lists.", "Unordered lists start with a <ul> element. Then they contain some number of <li> elements.", - "For example: <ul><li>milk</li><li>cheese</li></ul> would create a bulleted list of \"milk\" and \"cheese\"." + "For example: <ul><li>milk</li><li>cheese</li></ul> would create a bulleted list of \"milk\" and \"cheese\".", + "Replace your p elements with an unordered list of three things that cats love." ], "tests": [ "assert($('ul').length > 0, 'Create a ul element.')", @@ -1474,10 +1470,10 @@ "dashedName": "waypoint-create-an-ordered-list", "difficulty": 0.028, "description": [ - "Create an ordered list of the top 3 things cats hate the most.", "HTML has a special element for creating ordered lists, or numbered-style lists.", "Ordered lists start with a <ol> element. Then they contain some number of <li> elements.", - "For example: <ol><li>hydrogen</li><li>helium</li></ol> would create a numbered list of \"hydrogen\" and \"helium\"." + "For example: <ol><li>hydrogen</li><li>helium</li></ol> would create a numbered list of \"hydrogen\" and \"helium\".", + "Create an ordered list of the top 3 things cats hate the most." ], "tests": [ "assert($('ul').length > 0, 'You should have an ul element on your page.')", @@ -1554,9 +1550,10 @@ "dashedName": "waypoint-create-a-text-field", "difficulty": 0.029, "description": [ - "Now we'll create a web form. Create a text input under your lists.", + "Now let's create a web form.", "Text inputs are a convenient way to get input from your user.", - "You can create one like this: <input type='text'>. Note that input elements are self-closing." + "You can create one like this: <input type=\"text\">. Note that input elements are self-closing.", + "Create an input element of type \"text\" below your lists." ], "tests": [ "assert($('input').length > 0, 'Your app should have a text field input element.')" @@ -1632,9 +1629,9 @@ "dashedName": "waypoint-add-placeholder-text-to-a-text-field", "difficulty": 0.030, "description": [ - "Set the placeholder value of your text input to \"cat photo URL\".", "Your placeholder text is what appears in your text input before your user has inputed anything.", - "You can create placeholder text like so: <input type='text' placeholder='this is placeholder text'>." + "You can create placeholder text like so: <input type='text' placeholder='this is placeholder text'>.", + "Set the placeholder value of your text input to \"cat photo URL\"." ], "tests": [ "assert($('input[placeholder]').length > 0, 'Add a placeholder attribute text input element.')", @@ -1712,9 +1709,9 @@ "dashedName": "waypoint-create-a-form-element", "difficulty": 0.031, "description": [ - "Wrap your text field in a form element. Add the action=\"/submit-cat-photo\" attribute to this form element.", "You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your form element.", - "For example: <form action=\"/url-where-you-want-to-submit-form-data\"></form>." + "For example: <form action=\"/url-where-you-want-to-submit-form-data\"></form>.", + "Wrap your text field in a form element. Add the action=\"/submit-cat-photo\" attribute to this form element." ], "tests": [ "assert($('form') && $('form').children('input') && $('form').children('input').length > 0, 'Wrap your text input element within a form element.')", @@ -1794,9 +1791,9 @@ "dashedName": "waypoint-add-a-submit-button-to-a-form", "difficulty": 0.032, "description": [ - "Add a submit button to your form element with type \"submit\" and \"Submit\" as its text.", "Let's add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form's action attribute.", - "Here's an example submit button: <button type='submit'>this button submits the form</button>." + "Here's an example submit button: <button type='submit'>this button submits the form</button>.", + "Add a submit button to your form element with type \"submit\" and \"Submit\" as its text." ], "tests": [ "assert($('form').children('button').length > 0, 'Your form should have a button inside it.')", @@ -1878,9 +1875,9 @@ "dashedName": "waypoint-use-html5-to-require-a-field", "difficulty": 0.033, "description": [ - "Make your text input a \"required\" field, so that your user can't submit the form without completing this field.", "You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.", - "For example, if you wanted to make a text input field required, you can just add the word \"required\" within your input element, you would use: <input type='text' required>." + "For example, if you wanted to make a text input field required, you can just add the word \"required\" within your input element, you would use: <input type='text' required>.", + "Make your text input a \"required\" field, so that your user can't submit the form without completing this field." ], "tests": [ "assert($('input').prop('required'), 'Your text input element should have the \"required\" attribute.')" @@ -1960,12 +1957,12 @@ "dashedName": "waypoint-create-a-set-of-radio-buttons", "difficulty": 0.034, "description": [ - "Add to your form a pair of radio buttons. Each radio button should be wrapped within its own label element. They should share a common name attribute. One should have the option of \"indoor\" and the other should have the option of \"outdoor\".", "You can use radio buttons for questions where you want the user to only give you one answer.", "Radio buttons are a type of input.", "Each of your radio buttons should be wrapped within its own label elements.", "All related radio buttons should have the same name attribute.", - "Here's an example of a radio button: <label><input type='radio' name='indoor-outdoor'> Indoor</label>." + "Here's an example of a radio button: <label><input type='radio' name='indoor-outdoor'> Indoor</label>.", + "Add to your form a pair of radio buttons. Each radio button should be wrapped within its own label element. They should share a common name attribute. One should have the option of \"indoor\" and the other should have the option of \"outdoor\"." ], "tests": [ "assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')", @@ -2053,9 +2050,9 @@ "dashedName": "waypoint-create-a-set-of-checkboxes", "difficulty": 0.035, "description": [ - "Add to your form a set of three checkbox elements. Each checkbox should be wrapped within its own label element. All three should share the name attribute of \"personality\".", "Forms commonly use checkbox inputs for questions that may have more than one answer.", - "For example: <label><input type='checkbox' name='personality'> Loving</label>." + "For example: <label><input type='checkbox' name='personality'> Loving</label>.", + "Add to your form a set of three checkbox elements. Each checkbox should be wrapped within its own label element. All three should share the name attribute of \"personality\"." ], "tests": [ "assert($('input[type=\"checkbox\"]').length > 2, 'Your page should have three checkbox elements.')", @@ -2140,9 +2137,9 @@ "dashedName": "waypoint-check-radio-buttons-and-checkboxes-by-default", "difficulty": 0.037, "description": [ - "Set the first of your radio buttons and the first of your checkboxes to both be checked by default.", - "You set a checkbox or radio button to be checked by default using the checked attribute.", - "To do this, just add the word \"checked\" to the inside of an input element. For example, <input type='radio' name='test-name' checked>." + "You can set a checkbox or radio button to be checked by default using the checked attribute.", + "To do this, just add the word \"checked\" to the inside of an input element. For example, <input type='radio' name='test-name' checked>.", + "Set the first of your radio buttons and the first of your checkboxes to both be checked by default." ], "tests": [ "assert($('input[type=\"radio\"]').prop('checked'), 'Your first radio button on your form should be checked by default.');", @@ -2228,11 +2225,11 @@ "dashedName": "waypoint-wrap-many-elements-within-a-single-div-element", "difficulty": 0.038, "description": [ - "Wrap your \"Things cats love\" and \"Things cats hate\" lists all within a single div element.", "The div element, or \"Division\" element, is a general purpose container for other elements.", "The div element is probably the most commonly used HTML element of all. It's useful for passing the CSS of its own class declarations down to all the elements that it contains.", "Just like any other non-self-closing element, you can open a div element with <div> and close it on another line with </div>.", - "Try putting your opening div tag above your \"Things cats love\" p element and your closing div tag after your closing ol tag so that both of your lists are within one div." + "Try putting your opening div tag above your \"Things cats love\" p element and your closing div tag after your closing ol tag so that both of your lists are within one div.", + "Wrap your \"Things cats love\" and \"Things cats hate\" lists all within a single div element." ], "tests": [ "assert($('div').children('ol').length > 0, 'Wrap your ol element inside your div element.')", diff --git a/server/views/coursewares/showJS.jade b/server/views/coursewares/showJS.jade index 9583a8672b..5c7d86f10d 100644 --- a/server/views/coursewares/showJS.jade +++ b/server/views/coursewares/showJS.jade @@ -1,88 +1,105 @@ extends ../layout-wide block content - script(src='/js/lib/codemirror/lib/codemirror.js') - script(src='/js/lib/codemirror/addon/edit/closebrackets.js') - script(src='/js/lib/codemirror/addon/edit/matchbrackets.js') - script(src='/js/lib/codemirror/addon/lint/lint.js') - script(src='/js/lib/codemirror/addon/lint/javascript-lint.js') - script(src='/bower_components/jshint/dist/jshint.js') - script(src='/js/lib/chai/chai.js') + script(type='text/javascript', src='/js/lib/codemirror/lib/codemirror.js') + script(type='text/javascript', src='/js/lib/codemirror/addon/edit/closebrackets.js') + script(type='text/javascript', src='/js/lib/codemirror/addon/edit/matchbrackets.js') + script(type='text/javascript', src='/js/lib/codemirror/addon/lint/lint.js') + script(type='text/javascript', src='/js/lib/codemirror/addon/lint/javascript-lint.js') + script(type='text/javascript', src='/bower_components/jshint/dist/jshint.js') + script(type='text/javascript', src='/js/lib/chai/chai.js') link(rel='stylesheet', href='/js/lib/codemirror/lib/codemirror.css') link(rel='stylesheet', href='/js/lib/codemirror/addon/lint/lint.css') link(rel='stylesheet', href='/js/lib/codemirror/theme/monokai.css') link(rel="stylesheet", href="//fonts.googleapis.com/css?family=Ubuntu+Mono") - script(src='/js/lib/codemirror/mode/javascript/javascript.js') - script(src='/js/lib/jailed/jailed.js') - script(src='/js/lib/coursewares/sandbox.js') - .row - .col-xs-12.col-sm-12.col-md-4.bonfire-top + script(type='text/javascript', src='/js/lib/codemirror/mode/javascript/javascript.js') + script(type='text/javascript', src='/js/lib/jailed/jailed.js') + script(type='text/javascript', src='/js/lib/coursewares/sandbox.js') + .row(ng-controller="pairedWithController") + .col-xs-12.col-sm-12.col-md-4.col-lg-3 .scroll-locker - #testCreatePanel - h1.text-center= name - .well - .row + #testCreatePanel.well + h3.text-center.negative-10= name + .row + .col-xs-12 + .bonfire-instructions + for sentence in details + p.wrappable.negative-10!= sentence + .negative-bottom-margin-30 + #MDN-links + p.negative-10 Here are some helpful links: + for link, index in MDNlinks + .negative-10 + ul: li: a(href="" + link, target="_blank") !{MDNkeys[index]} + if (user) + form.form-horizontal(novalidate='novalidate', name='completedWithForm') + .form-group.text-center.negative-10 .col-xs-12 - .bonfire-instructions - p.wrappable= brief - #brief-instructions - #more-info.btn.btn-primary.btn-block.btn-primary-ghost - span.ion-arrow-down-b - | More information - #long-instructions.row.hide - .col-xs-12 - for sentence in details - p.wrappable!= sentence - #less-info.btn.btn-primary.btn-block.btn-primary-ghost - span.ion-arrow-up-b - | Less information - #submitButton.btn.btn-primary.btn-big.btn-block Run code (ctrl + enter) - .button-spacer - .btn-group.input-group.btn-group-justified - label.btn.btn-success#trigger-help-modal - i.fa.fa-medkit - |   Help - label.btn.btn-success#trigger-pair-modal - i.fa.fa-user-plus - |   Pair - label.btn.btn-success#trigger-issue-modal - i.fa.fa-bug - |   Bug - .spacer - form.code - .form-group.codeMirrorView - textarea#codeOutput(style='display: none;') - br - #testSuite - br - script(type="text/javascript"). - var tests = !{JSON.stringify(tests)}; - var challengeSeed = !{JSON.stringify(challengeSeed)}; - var challenge_Id = !{JSON.stringify(challengeId)}; - var challenge_Name = !{JSON.stringify(name)}; - var challengeType = !{JSON.stringify(challengeType)}; - var started = Math.floor(Date.now()); - + // extra field to distract password tools like lastpass from injecting css into our username field + label.negative-10.btn.btn-primary.btn-block#submitButton + i.fa.fa-play + |   Run code (ctrl + enter) + .button-spacer + .btn-group.input-group.btn-group-justified + label.btn.btn-success#trigger-reset-modal + i.fa.fa-refresh + |   Reset + label.btn.btn-success#trigger-help-modal + i.fa.fa-medkit + |   Help + label.btn.btn-success#trigger-issue-modal + i.fa.fa-bug + |   Bug + .button-spacer + form.code + .form-group.codeMirrorView + textarea#codeOutput(style='display: none;') + br + #testSuite.negative-10 + br + script(type="text/javascript"). + var tests = !{JSON.stringify(tests)}; + var challengeSeed = !{JSON.stringify(challengeSeed)}; + var challenge_Id = !{JSON.stringify(challengeId)}; + var challenge_Name = !{JSON.stringify(name)}; + var started = Math.floor(Date.now()); + var challengeType = !{JSON.stringify(challengeType)}; + var _ = R; + var dashed = !{JSON.stringify(dashedName)}; .col-xs-12.col-sm-12.col-md-8 #mainEditorPanel form.code .form-group.codeMirrorView textarea#codeEditor(autofocus=true, style='display: none;') - script(src='/js/lib/coursewares/coursewaresJSFramework_0.0.5.js') + script(src='/js/lib/coursewares/coursewaresJSFramework_0.0.6.js') #complete-courseware-dialog.modal(tabindex='-1') .modal-dialog.animated.zoomIn.fast-animation .modal-content .modal-header.challenge-list-header= compliment a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') × - .modal-body(ng-controller="pairedWithController") + .modal-body .text-center .animated.zoomInDown.delay-half span.completion-icon.ion-checkmark-circled.text-primary if (user) - a.animated.fadeIn.btn.btn-lg.btn-primary.btn-block#next-courseware-button(name='_csrf', value=_csrf, ng-disabled='completedWithForm.$invalid && existingUser.length > 0') Go to my next challenge (ctrl + enter) - if (points && points > 2) - a.animated.fadeIn.btn.btn-lg.btn-block.btn-twitter(href="https://twitter.com/intent/tweet?text=I%20just%20#{verb}%20%40FreeCodeCamp%20#{name}&url=http%3A%2F%2Ffreecodecamp.com/challenges/#{dashedName}&hashtags=LearnToCode, JavaScript" target="_blank") + a.animated.fadeIn.btn.btn-lg.btn-primary.btn-block#next-courseware-button(name='_csrf', value=_csrf) Go to my next challenge (ctrl + enter) + if (user.progressTimestamps.length > 2) + a.animated.fadeIn.btn.btn-lg.btn-block.btn-twitter(target="_blank", href="https://twitter.com/intent/tweet?text=I%20just%20#{verb}%20%40FreeCodeCamp%20#{name}&url=http%3A%2F%2Ffreecodecamp.com/challenges/#{dashedName}&hashtags=LearnToCode, JavaScript") i.fa.fa-twitter   = phrase else a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress + #reset-modal.modal(tabindex='-1') + .modal-dialog.animated.fadeInUp.fast-animation + .modal-content + .modal-header.challenge-list-header Clear your code? + a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') × + .modal-body + h3 This will restore your code editor to its original state. + a.btn.btn-lg.btn-info.btn-block#reset-button(href='#', data-dismiss='modal', aria-hidden='true') Clear my code + a.btn.btn-lg.btn-primary.btn-block(href='#', data-dismiss='modal', aria-hidden='true') Cancel include ../partials/challenge-modals + script. + var MDNlinks = !{JSON.stringify(MDNlinks)}; + if (!MDNlinks.length) { + $('#MDN-links').addClass('collapse'); + }