diff --git a/client/less/challenge.less b/client/less/challenge.less index 2a863e5a8b..28a2ee4c15 100644 --- a/client/less/challenge.less +++ b/client/less/challenge.less @@ -6,7 +6,7 @@ font-size: 90%; font-family: @font-family-monospace; color: @code-color; - background-color: @code-bg; + background-color: #fffbe5; border-radius: @border-radius-base; border: 1px solid @pre-border-color; white-space: pre; diff --git a/seed/challenges/01-front-end-development-certification/basic-javascript.json b/seed/challenges/01-front-end-development-certification/basic-javascript.json index 55d06bfed2..1b6455bac4 100644 --- a/seed/challenges/01-front-end-development-certification/basic-javascript.json +++ b/seed/challenges/01-front-end-development-certification/basic-javascript.json @@ -7,12 +7,13 @@ "id": "bd7123c9c441eddfaeb4bdef", "title": "Comment your JavaScript Code", "description": [ - "Comments are lines of code that your computer will intentionally ignore. Comments are a great way to leave notes to yourself and to other people who will later need to figure out what that code does.", - "Let's take a look at the two ways you can write comments in JavaScript.", - "The double-slash comment will comment out the remainder of the text on the current line:", - "// This is a comment.", - "The slash-star-star-slash comment will comment out everything between the /* and the */ characters:", - "/* This is also a comment */", + "Comments are lines of code that JavaScript will intentionally ignore. Comments are a great way to leave notes to yourself and to other people who will later need to figure out what that code does.", + "There are two ways to write comments in JavaScript:", + "Using // will tell JavaScript to ignore the remainder of the text on the current line:", + "
// This is an in-line comment.
", + "You can make a multi-line comment beginning with /* and ending with */:", + "
/* This is a
multi-line comment */
", + "Best Practice
As you write code, you should regularly add comments to clarify the function of parts of your code. Good commenting can help communicate the intent of your code—both for others and for your future self.", "

Instructions

", "Try creating one of each type of comment." ], @@ -30,67 +31,37 @@ "type": "waypoint", "challengeType": 1 }, - { - "id": "bd7123c9c441eddfaeb5bdef", - "title": "Understand Boolean Values", - "description": [ - "Computers are not inherently smart. Hence, javascript developers made it easy for us to represent data to computer. Data is anything that is meaningful to the computer.", - "In computer science, Data types are things that represent various types of data. JavaScript has seven data types which are Undefined, Null, Boolean, String, Symbol, Number, and Object. For example, the Number data type represents numbers.", - "Now let's learn about the most basic one: the Boolean data type. Booleans represent a true or false value. They are basically little on-off switches.", - "

Instructions

", - "Modify the welcomeToBooleans function so that it returns true instead of false when the run button is clicked." - ], - "challengeSeed": [ - "function welcomeToBooleans() {", - "", - "// Only change code below this line.", - "", - "return false; // Change this line", - "", - "// Only change code above this line.", - "}" - ], - "tail": [ - "welcomeToBooleans();" - ], - "solutions": [ - "function welcomeToBooleans() {\n return true; // Change this line\n}" - ], - "tests": [ - "assert(typeof(welcomeToBooleans()) === 'boolean', 'message: The welcomeToBooleans() function should return a boolean (true/false) value.');", - "assert(welcomeToBooleans() === true, 'message: welcomeToBooleans() should return true.');" - ], - "type": "waypoint", - "challengeType": 1 - }, { "id": "bd7123c9c443eddfaeb5bdef", "title": "Declare JavaScript Variables", "description": [ - "It's nice to have seven different ways of representing data. But to use them in other parts of code, we must store the data somewhere. In computer science, the placeholder where data is stored for further use is known as a variable.", - "These variables are no different from the x and y variables you use in Maths. Which means they're just a simple name to represent the data we want to refer to.", - "Now let's create our first variable and call it \"myName\".", - "You'll notice that in myName, we didn't use a space, and that the \"N\" is capitalized. In JavaScript, we write variable names in \"camelCase\".", + "In computer science, data is anything that is meaningful to the computer. JavaScript provides seven different data types which are undefined, null, Boolean, string, symbol, number, and object.", + "For example, computers distinguish between numbers, such as the number 12, and strings, such as \"12\", \"dog\", or \"123 cats\", which are collections of characters. Computers can perform mathematical operations on a number, but not on a string.", + "Variables allow computers to store data in a dynamic fashion, rather than updating a formula every time the data changes. Any of the seven different data types may be stored in a variable.", + "Variables are similar to the x and y variables you use in mathematics, which means they're a simple name to represent the data we want to refer to. Computer variables differ from mathematical variables in that they can store different values at different times.", + "We tell JavaScript to create or declare a variable by putting the keyword var in front of it, like so:", + "
var ourName;
", + "creates a variable called ourName. In JavaScript we end statements with semicolons.", + "Variable names can be made up of numbers, letters, and $ or _, but may not contain spaces or start with a number.", "

Instructions

", "Use the var keyword to create a variable called myName. Set its value to your name, wrapped in double quotes.", - "Hint", - "Look at the ourName example if you get stuck." + "Hint
Look at the ourName example if you get stuck." ], "challengeSeed": [ "// Example", - "var ourName = \"Free Code Camp\";", + "var ourName;", "", - "// Only change code below this line", + "// Define myName below this line", "" ], "tail": [ "if(typeof(myName) !== \"undefined\"){(function(v){return v;})(myName);}" ], "solutions": [ - "var myName = \"Test Testerson\";" + "var myName;" ], "tests": [ - "assert((function(){if(typeof(myName) !== \"undefined\" && typeof(myName) === \"string\" && myName.length > 0){return true;}else{return false;}})(), 'message: myName should be a string that contains at least one character in it.');" + "assert(/var\\s+myName\\s*;/.test(code), 'message: You should declare myName with the var keyword, ending with a semicolon');" ], "type": "waypoint", "challengeType": 1 @@ -246,7 +217,7 @@ "id": "cf1111c1c11feddfaeb3bdef", "title": "Add Two Numbers with JavaScript", "description": [ - "Number is another data type in JavaScript which represents numeric data.", + "Number is a data type in JavaScript which represents numeric data.", "Now let's try to add two numbers using JavaScript.", "JavaScript uses the + symbol as addition operation when placed between two numbers.", "", @@ -2093,29 +2064,63 @@ "type": "checkpoint", "challengeType": 1 }, + { + "id": "bd7123c9c441eddfaeb5bdef", + "title": "Understanding Boolean Values", + "description": [ + "Another data type is the Boolean. Booleans may only be one of two values: true or false. They are basically little on-off switches, where true is \"on\" and false is \"off.\" These two states are mutually exclusive.", + "Note
Boolean values are never written with quotes. The strings \"true\" and \"false\" are not Boolean and have no special meaning in JavaScript.", + "

Instructions

", + "Modify the welcomeToBooleans function so that it returns true instead of false when the run button is clicked." + ], + "challengeSeed": [ + "function welcomeToBooleans() {", + "", + "// Only change code below this line.", + "", + "return false; // Change this line", + "", + "// Only change code above this line.", + "}" + ], + "tail": [ + "welcomeToBooleans();" + ], + "solutions": [ + "function welcomeToBooleans() {\n return true; // Change this line\n}" + ], + "tests": [ + "assert(typeof(welcomeToBooleans()) === 'boolean', 'message: The welcomeToBooleans() function should return a boolean (true/false) value.');", + "assert(welcomeToBooleans() === true, 'message: welcomeToBooleans() should return true.');" + ], + "type": "waypoint", + "challengeType": 1 + }, { "id": "cf1111c1c12feddfaeb3bdef", "title": "Use Conditional Logic with If Statements", "description": [ - "We can use if statements in JavaScript to execute code only if the specified condition is met.", - "Each if statement requires a boolean condition to evaluate. If the boolean evaluates to true, the statements inside the curly braces will execute. Otherwise, if it evaluates to false, the code will not execute.", + "If statements are used to make decisions in code. The keyword if tells JavaScript to execute the code in the curly braces under certain conditions, defined in the parentheses. These conditions are known as Boolean conditions because they may only be true or false.", + "When the condition evaluates to true, the program executes the statement inside the curly braces. When the Boolean condition evaluates to false, the statement inside the curly braces will not execute.", + "Pseudocode", + "
if(condition is true) {
statement is executed
}
", "Example", - "
function test(myVal) {
if (myVal > 10) {
return \"Greater Than\";
}
return \"Not Greater Than\";
}
", - "If myVal is greater than 10, the function will return \"Greater Than\". If it is not, the function will return \"Not Greater Than\".", + "
function test (myCondition) {
if (myCondition) {
return \"It was true\";
}
return \"It was false\";
}
test(true); // returns \"It was true\"
test(false); // returns \"It was false\"
", + "When test is called with a value of true, the if statement evaluates myCondition to see if it is true or not. Since it is true, the function returns \"It was true\". When we call test with a value of false, myCondition is not true and the statement in the curly braces is not executed and the function returns \"It was false\".", "

Instructions

", - "Create an if statement inside the function to return \"Yes\" if testMe is greater than 5 and return \"No\" otherwise." + "Create an if statement inside the function to return \"That was true\" if the parameter wasThatTrue is true and return \"That was false\" otherwise." ], "challengeSeed": [ "// Example", - "function ourFunction(testMe) {", - " if (testMe > 10) { ", - " return \"Yes\";", + "function ourFunction(isItTrue) {", + " if (isItTrue) { ", + " return \"Yes, it's true\";", " }", - " return \"No\";", + " return \"No, it's false\";", "}", "", "// Setup", - "function myFunction(testMe) {", + "function myFunction(wasThatTrue) {", "", " // Only change code below this line.", " ", @@ -2126,18 +2131,17 @@ "}", "", "// Change this value to test", - "myFunction(10);" + "myFunction(true);" ], "solutions": [ - "function myFunction(testMe) {\n if (testMe > 5) {\n return 'Yes';\n }\n return 'No';\n}" + "function myFunction(wasThatTrue) {\n if (wasThatTrue) {\n return \"That was true\";\n }\n return \"That was false\";\n}" ], "tests": [ "assert(typeof myFunction === \"function\", 'message: myFunction should be a function');", - "assert(typeof myFunction(4) === \"string\", 'message: myFunction(4) should return a string');", - "assert(typeof myFunction(6) === \"string\", 'message: myFunction(6) should return a string');", - "assert(myFunction(4) === \"No\", 'message: myFunction(4) should \"No\"');", - "assert(myFunction(5) === \"No\", 'message: myFunction(5) should \"No\"');", - "assert(myFunction(6) === \"Yes\", 'message: myFunction(6) should \"Yes\"');" + "assert(typeof myFunction(true) === \"string\", 'message: myFunction(true) should return a string');", + "assert(typeof myFunction(false) === \"string\", 'message: myFunction(false) should return a string');", + "assert(myFunction(true) === \"That was true\", 'message: myFunction(true) should return \"That was true\"');", + "assert(myFunction(false) === \"That was false\", 'message: myFunction(false) should return \"That was false\"');" ], "type": "waypoint", "challengeType": 1 @@ -2149,9 +2153,9 @@ "There are many Comparison Operators in JavaScript. All of these operators return a boolean true or false value.", "The most basic operator is the equality operator ==. The equality operator compares two values and returns true if they're equivalent or false if they are not. Note that equality is different from assignment (=), which assigns the value at the right of the operator to a variable in the left.", "
function equalityTest(myVal) {
if (myVal == 10) {
return \"Equal\";
}
return \"Not Equal\";
}
", - "If myVal is equal to 10, the function will return \"Equal\". If it is not, the function will return \"Not Equal\".", - "The equality operator will do its best to convert values for comparison, for example:", - "
1 == 1 // true
\"1\" == 1 // true
1 == '1' // true
0 == false // true
0 == null // false
0 == undefined // false
null == undefined // true
", + "If myVal is equal to 10, the equality operator returns true, so the code in the curly braces will execute, and the function will return \"Equal\". Otherwise, the function will return \"Not Equal\".", + "In order for the JavaScript to compare two different data types (for example, numbers and strings), it must convert one type to another. Once it does, however, it can compare terms as follows:", + "
1 == 1 // true
1 == 2 // false
1 == '1' // true
\"3\" == 3 // true
", "

Instructions

", "Add the equality operator to the indicated line so that the function will return \"Equal\" when val is equivalent to 12" ], @@ -2184,10 +2188,10 @@ "id": "56533eb9ac21ba0edf2244d1", "title": "Comparison with the Strict Equality Operator", "description": [ - "Strict equality (===) is the counterpart to the equality operator (==). Unlike the equality operator, strict equality tests both the type and value of the compared elements.", + "Strict equality (===) is the counterpart to the equality operator (==). Unlike the equality operator, strict equality tests both the data type and value of the compared elements.", "Examples", "
3 === 3 // true
3 === '3' // false
", - "In the second example, 3 is a Number type and '3' is a String type.", + "In the second example, 3 is a Number type and '3' is a String type.", "

Instructions

", "Use strict equality operator in if statement so the function will return \"Equal\" when val is strictly equal to 7" ], @@ -3978,12 +3982,7 @@ "assert(lookUp(\"Akira\", \"address\") === \"No such property\", 'message: \"Akira\", \"address\" should return \"No such property\"');" ], "type": "checkpoint", - "challengeType": 1, - "nameCn": "", - "nameFr": "", - "nameRu": "", - "nameEs": "", - "namePt": "" + "challengeType": 1 }, { "id": "cf1111c1c11feddfaeb9bdef",