diff --git a/seed/challenges/basic-javascript.json b/seed/challenges/basic-javascript.json
index e5c072ee2a..6f741bad33 100644
--- a/seed/challenges/basic-javascript.json
+++ b/seed/challenges/basic-javascript.json
@@ -265,7 +265,7 @@
"challengeType": 1
},
{
- "id": "bh1111c1c11feddfaeb3bdef",
+ "id": "bd1111c1c11feddfaeb3bdef",
"name": "Magical Maths Addition",
"dashedName": "waypoint-magical-maths-addition",
"difficulty": "9.98141",
@@ -289,7 +289,7 @@
"challengeType": 1
},
{
- "id": "bh1111c1c11feddfaeb4bdef",
+ "id": "bd1111c1c11feddfaeb4bdef",
"name": "Magical Maths Subtraction",
"dashedName": "waypoint-magical-maths-subtraction",
"difficulty": "9.98142",
@@ -313,7 +313,7 @@
"challengeType": 1
},
{
- "id": "bh1111c1c11feddfaeb5bdef",
+ "id": "bd1111c1c11feddfaeb5bdef",
"name": "Magical Maths Multiplication",
"dashedName": "waypoint-magical-maths-multiplication",
"difficulty": "9.98143",
@@ -337,7 +337,7 @@
"challengeType": 1
},
{
- "id": "bh1111c1c11feddfaeb6bdef",
+ "id": "bd1111c1c11feddfaeb6bdef",
"name": "Magical Maths Division",
"dashedName": "waypoint-magical-maths-division",
"difficulty": "9.9814",
@@ -361,7 +361,7 @@
"challengeType": 1
},
{
- "id": "bh1111c1c11feddfaeb4bdef",
+ "id": "bd1111c1c11feddfaeb4bdee",
"name": "Creating Decimals",
"dashedName": "waypoint-creating-decimals",
"difficulty": "9.9815",
@@ -439,7 +439,7 @@
"challengeType": 1
},
{
- "id": "bh1111c1c11feddfaeb7bdef",
+ "id": "bd1111c1c11feddfaeb7bdef",
"name": "Nesting Arrays",
"dashedName": "waypoint-nesting-arrays",
"difficulty": "9.98161",
@@ -667,7 +667,7 @@
"challengeType": 1
},
{
- "id": "bg9997c9c99feddfaeb9bdef",
+ "id": "bg9997c9c99feddfaeb9bdee",
"name": "Keeping In The Scope Of Things",
"dashedName": "waypoint-keeping-in-the-scope-of-things",
"difficulty": "9.9821",
@@ -816,7 +816,7 @@
"challengeType": 1
},
{
- "id": "bh1111c1c11feddfaeb5bdef",
+ "id": "bd1111c1c11feddfaeb5bdee",
"name": "Looping with for",
"dashedName": "waypoint-looping-with-for",
"difficulty": "9.9824",
@@ -846,7 +846,7 @@
"challengeType": 1
},
{
- "id": "bh1111c1c11feddfaeb1bdef",
+ "id": "bd1111c1c11feddfaeb1bdef",
"name": "Looping with while",
"dashedName": "waypoint-looping-with-while",
"difficulty": "9.9825",
@@ -877,7 +877,7 @@
"challengeType": 1
},
{
- "id": "bh1111c1c11feddfaeb2bdef",
+ "id": "bd1111c1c11feddfaeb2bdef",
"name": "Looping with do while",
"dashedName": "waypoint-looping-with-do-while",
"difficulty": "9.9826",
diff --git a/seed/challenges/get-set-for-free-code-camp.json b/seed/challenges/get-set-for-free-code-camp.json
index 356f62ed73..d82112f10d 100644
--- a/seed/challenges/get-set-for-free-code-camp.json
+++ b/seed/challenges/get-set-for-free-code-camp.json
@@ -156,16 +156,19 @@
},
{
"id": "bd7125d8c441eddfaeb5bd1f",
- "name": "Waypoint: Browse our Field Guide",
- "dashedName": "waypoint-browse-our-field-guide",
+ "name": "Waypoint: Browse our Wiki",
+ "dashedName": "waypoint-browse-our-wiki",
"difficulty": 0.004,
"challengeSeed": ["125407435"],
"description": [
- "Free Code Camp has an up-to-date field guide that will answer your many questions.",
- "Click the \"Guide\" button in the upper right hand corner.",
- "You can browse the field guide at your convenience. Most of its articles take less than 1 minute to read.",
- "When you click the \"Guide\" button, it will always take you back to whichever article you were last reading.",
- "Read a few field guide articles, then move on to your next challenge."
+ "Free Code Camp has an up-to-date wiki that will answer your many questions.",
+ "Click the \"Wiki\" button in the upper right hand corner.",
+ "You can browse our wiki at your convenience. Most of its articles take less than 1 minute to read.",
+ "All of our Wiki articles are contributed by our community. You can update our wiki articles, and even create wiki articles of your own.",
+ "Read Install NPM",
+ "Read Install NPM",
+ "Read Install NPM",
+ "Now you can move on to your next challenge."
],
"challengeType": 2,
"tests": [],
@@ -385,7 +388,7 @@
"Next, S - Search Google. Good Google queries take a lot of practice. When you search Google, you usually want to include the language or framework you're using. You also want to limit the results to a recent period.",
"Then, if you still haven't found an answer to your question, A - Ask your friends. If you have trouble, you can ask your fellow campers. We have a special chat room specifically for getting help with tools you learn through these Free Code Camp Challenges. Go to https://gitter.im/FreeCodeCamp/Help. Keep this chat open while you work on the remaining challenges.",
"Finally, P - Post on Stack Overflow. Before you attempt to do this, read Stack Overflow's guide to asking good questions: http://stackoverflow.com/help/how-to-ask.",
- "Here's our detailed field guide on getting help: http://freecodecamp.com/field-guide/how-do-i-get-help-when-i-get-stuck.",
+ "Here's our detailed wiki article on getting help: http://freecodecamp.com/field-guide/how-do-i-get-help-when-i-get-stuck.",
"Now you have a clear algorithm to follow when you need help! Let's start coding! Move on to your next challenge."
],
"challengeType": 2,
diff --git a/seed/challenges/html5-and-css.json b/seed/challenges/html5-and-css.json
index dbb0f037fe..84fb1533ac 100644
--- a/seed/challenges/html5-and-css.json
+++ b/seed/challenges/html5-and-css.json
@@ -1325,9 +1325,8 @@
"dashedName": "waypoint-add-alt-text-to-an-image-for-accessibility",
"difficulty": 0.026,
"description": [
- "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.",
+ "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. And 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\"/>
.",
"Add an alt
attribute with the text \"A cute orange cat lying on its back\" to our cat photo."
],
@@ -1957,9 +1956,9 @@
"dashedName": "waypoint-create-a-set-of-radio-buttons",
"difficulty": 0.034,
"description": [
- "You can use radio buttons for questions where you want the user to only give you one answer.",
+ "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.",
+ "Each of your radio buttons should be wrapped within its own label
element.",
"All related radio buttons should have the same name
attribute.",
"Here's an example of a radio button: <label><input type='radio' name='indoor-outdoor'> Indoor</label>
.",
"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\"."
@@ -2050,9 +2049,12 @@
"dashedName": "waypoint-create-a-set-of-checkboxes",
"difficulty": 0.035,
"description": [
- "Forms commonly use checkbox inputs for questions that may have more than one answer.",
- "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\"."
+ "Forms commonly use \"checkboxes\" for questions that may have more than one answer.",
+ "Checkboxes are a type of input
.",
+ "Each of your checkboxes should be wrapped within its own label
element.",
+ "All related checkbox inputs should have the same name
attribute.",
+ "Here's an example of a checkbox: <label><input type='checkbox' name='personality'> Loving</label>
.",
+ "Add to your form a set of three checkboxes. 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.')",
@@ -2320,9 +2322,9 @@
"dashedName": "waypoint-give-a-background-color-to-a-div-element",
"difficulty": 0.039,
"description": [
- "Create a class called \"gray-background\" with the background color of gray. Assign this class to your div
element.",
"You can set an element's background color with the \"background-color\" attribute.",
- "For example, if you wanted an element's background color to be \"green\", you'd use .green-background { background-color: green; }
within your style
element."
+ "For example, if you wanted an element's background color to be \"green\", you'd use .green-background { background-color: green; }
within your style
element.",
+ "Create a class called \"gray-background\" with the background color of gray. Assign this class to your div
element."
],
"tests": [
"assert($('div').hasClass('gray-background'), 'Give your div
element the class \"gray-background\".')",
@@ -2411,10 +2413,12 @@
"dashedName": "waypoint-adjusting-the-padding-of-an-element",
"difficulty": 0.040,
"description": [
- "These next few Waypoints will give you a brief tour of three important aspects of the space surrounding HTML elements: padding
, margin
, and border
. Change the padding
of your green box to match that of your red box.",
+ "You may have already noticed this, but all HTML elements are essentially little rectangles.",
+ "Three important attributes control the space that surrounds each HTML element: padding
, margin
, and border
.",
"An element's padding
controls the amount of space between the element and its border
.",
"Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more padding
than the green box.",
- "When you increase the green box's padding
, it will increase the distance between the text \"padding\" and the border around it."
+ "When you increase the green box's padding
, it will increase the distance between the text \"padding\" and the border around it.",
+ "Change the padding
of your green box to match that of your red box."
],
"tests": [
"assert($('.green-box').css('padding-top') === '20px', 'Your green-box
class should give elements 20px of padding.')"
@@ -2480,10 +2484,10 @@
"dashedName": "waypoint-adjust-the-margin-of-an-element",
"difficulty": 0.041,
"description": [
- "Change the margin
of the green box to match that of the red box.",
"An element's margin
controls the amount of space between an element's border
and surrounding elements.",
"Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more margin
than the green box, making it appear smaller.",
- "When you increase the green box's margin
, it will increase the distance between its border and surrounding elements."
+ "When you increase the green box's margin
, it will increase the distance between its border and surrounding elements.",
+ "Change the margin
of the green box to match that of the red box."
],
"tests": [
"assert($('.green-box').css('margin-top') === '20px', 'Your green-box
class should give elements 20px of margin.')"
@@ -2551,10 +2555,10 @@
"dashedName": "waypoint-add-a-negative-margin-to-an-element",
"difficulty": 0.042,
"description": [
- "Change the margin
of the green box to a negative value, so it fills the entire horizontal width of the yellow box around it.",
"An element's margin
controls the amount of space between an element's border
and surrounding elements.",
"If you set an element's margin
to a negative value, the element will grow larger.",
- "Try to set the margin
to a negative value like the one for the red box."
+ "Try to set the margin
to a negative value like the one for the red box.",
+ "Change the margin
of the green box to a negative value, so it fills the entire horizontal width of the yellow box around it."
],
"tests": [
"assert($('.green-box').css('margin-top') === '-15px', 'Your green-box
class should give elements -15px of margin.')"
@@ -2621,9 +2625,9 @@
"dashedName": "waypoint-add-different-padding-to-each-side-of-an-element",
"difficulty": 0.043,
"description": [
- "Give the green box a padding
of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
"Sometimes you will want to customize an element so that it has different padding
on each of its sides.",
- "CSS allows you to control the padding
of an element on all four sides with padding-top
, padding-right
, padding-bottom
, and padding-left
attributes."
+ "CSS allows you to control the padding
of an element on all four sides with padding-top
, padding-right
, padding-bottom
, and padding-left
attributes.",
+ "Give the green box a padding
of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side."
],
"tests": [
"assert($('.green-box').css('padding-top') === '40px', 'Your green-box
class should give the top of elements 40px of padding.')",
@@ -2764,9 +2768,9 @@
"dashedName": "waypoint-use-clockwise-notation-to-specify-the-padding-of-an-element",
"difficulty": 0.044,
"description": [
- "Use Clockwise Notation to give the \".green-box\" class a padding
of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
"Instead of specifying an element's padding-top
, padding-right
, padding-bottom
, and padding-left
attributes, you can specify them all in one line, like this: padding: 10px 20px 10px 20px;
.",
- "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions."
+ "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.",
+ "Use Clockwise Notation to give the \".green-box\" class a padding
of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side."
],
"tests": [
"assert($('.green-box').css('padding-top') === '40px', 'Your green-box
class should give the top of elements 40px of padding
.')",
@@ -2833,9 +2837,10 @@
"dashedName": "waypoint-use-clockwise-notation-to-specify-the-margin-of-an-element",
"difficulty": 0.045,
"description": [
- "Let's try this again, but with margin
this time. Use Clockwise Notation
to give an element a margin of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
+ "Let's try this again, but with margin
this time.",
"Instead of specifying an element's margin-top
, margin-right
, margin-bottom
, and margin-left
attributes, you can specify them all in one line, like this: margin: 10px 20px 10px 20px;
.",
- "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions."
+ "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.",
+ "Use Clockwise Notation
to give an element a margin of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side."
],
"tests": [
"assert($('.green-box').css('margin-top') === '40px', 'Your green-box
class should give the top of elements 40px of margin
.')",
@@ -2897,9 +2902,6 @@
"Diese vier Werte funktionieren wieder wie eine Uhr: oben, rechts, unten und links. Sie meinen exakt das gleiche wie die seitenspezifischen Anweisungen."
]
},
-
-
-
{
"id": "bad87fee1348bd9aedf08736",
"name": "Waypoint: Style the HTML Body Element",
@@ -2908,8 +2910,8 @@
"description": [
"Now let's start fresh and talk about CSS inheritance.",
"Every HTML page has body
element.",
- "We can prove that the body
element exists here by giving it a \"background-color\" of blue.",
- "We can do this by adding body { background-color: blue; }
to our style
element."
+ "We can prove that the body
element exists here by giving it a \"background-color\" of black.",
+ "We can do this by adding body { background-color: black; }
to our style
element."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(0, 0, 0)', 'Give your body
element the background-color of black.')"
@@ -2939,20 +2941,20 @@
"dashedName": "waypoint-inherit-styles-from-the-body-element",
"difficulty": 0.047,
"description": [
- "Every HTML page has body
element.",
- "You can style your body
element just like any other HTML element, and all your other elements will inherit your body
element's styles.",
- "Let's prove this by creating a h2
element with the text \"somebody\".",
- "Then, let's add the font family of \"Monospace\" to the our body
element's style declaration.",
- "See how this gives our h2
element the font-family of "
+ "Now we've proven that every HTML page has a body
element, and that its body
element can also be styled with CSS.",
+ "Remember, you can style your body
element just like any other HTML element, and all your other elements will inherit your body
element's styles.",
+ "First, create a h1
element with the text \"Hello World\".",
+ "Then, let's give all elements on your page the color of \"green\" by adding color: green;
to your body
element's style declaration.",
+ "Finally, give your body
element the font-family of \"Monospace\" by adding font-family: Monospace;
to your body
element's style declaration."
],
"tests": [
- "assert(($('body').css('color') === 'rgb(0, 128, 0)'), 'Give your body
element the \"color\" attribute of green.')",
- "assert(($('body').css('font-family').match(/Monospace/i)), 'Give your body
element the \"font-family\" attribute of \"Monospace\".')",
"assert(($('h1').length > 0), 'Create an h1
element.')",
"assert(($('h1').length > 0 && $('h1').text().match(/hello world/i)), 'Your h1
element should have the text \"Hello World\".')",
+ "assert(editor.match(/<\\/h1>/g) && editor.match(/
body
element the \"color\" attribute of green.')",
+ "assert(($('body').css('font-family').match(/Monospace/i)), 'Give your body
element the \"font-family\" attribute of \"Monospace\".')",
"assert(($('h1').length > 0 && $('h1').css('font-family').match(/monospace/i)), 'Your h1
element should inherit the font \"Monospace\" from your body
element.')",
- "assert(($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)'), 'Your h1
element should inherit the color green.')",
- "assert(editor.match(/<\\/h1>/g) && editor.match(/h1
element should inherit the color green from your body
element.')"
],
"challengeSeed": [
"