diff --git a/challenges/bootstrap.json b/challenges/bootstrap.json index 8e3d76f196..aae8943134 100644 --- a/challenges/bootstrap.json +++ b/challenges/bootstrap.json @@ -6,7 +6,7 @@ "id": "bad87fee1348bd9acde08712", "name": "Waypoint: Use Responsive Design with Bootstrap Fluid Containers", "dashedName": "waypoint-use-responsive-design-with-bootstrap-fluid-containers", - "difficulty": 1, + "difficulty": 2.01, "description": [ "Now let's go back to our Cat Photo App. This time, we'll style it using the popular Bootstrap responsive CSS framework.", "Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design.", @@ -90,7 +90,7 @@ "id": "bad87fee1348bd9acde08812", "name": "Waypoint: Make Images Mobile Responsive", "dashedName": "waypoint-make-images-mobile-responsive", - "difficulty": 1, + "difficulty": 2.02, "description": [ "First, Add a new image with the src attribute of \"http://bit.ly/fcc-kittens2\".", "It would be great if this image could be exactly the width of our phone's screen.", @@ -175,9 +175,8 @@ "id": "bad87fee1348bd8acde08812", "name": "Waypoint: Center Text with Bootstrap", "dashedName": "waypoint-center-text-with-bootstrap", - "difficulty": 2, + "difficulty": 2.03, "description": [ - "Add Bootstrap's \"text-center\" class to your h2 element.", "Now that we're using Bootstrap, we can center our heading elements to make them look better. All we need to do is add the class text-center to our h1 and h2 elements.", "Remember that you can add several classes to the same element by separating each of them with a space, like this: <h2 class=\"text-red text-center\">your text</h2>." ], @@ -259,10 +258,10 @@ "id": "bad87fee1348cd8acdf08812", "name": "Waypoint: Create a Bootstrap Button", "dashedName": "waypoint-create-a-bootstrap-button", - "difficulty": 3, + "difficulty": 2.04, "description": [ - "Create a new button element below your large kitten photo. Give it the class \"btn\" and the text of \"like this photo\".", - "Bootstrap has its own styles for button elements, which look much better than the plain HTML ones." + "Bootstrap has its own styles for button elements, which look much better than the plain HTML ones.", + "Create a new button element below your large kitten photo. Give it the class \"btn\" and the text of \"like this photo\"." ], "tests": [ "assert($('button').hasClass('btn'), 'Your new button should have the class \"btn\".')", @@ -344,13 +343,13 @@ "id": "bad87fee1348cd8acef08812", "name": "Waypoint: Create a Block Element Bootstrap Button", "dashedName": "waypoint-create-a-block-element-bootstrap-button", - "difficulty": 4, + "difficulty": 2.05, "description": [ - "Add Bootstrap's \"btn-block\" class to your Bootstrap button.", "Normally, your button elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.", "This image illustrates the difference between \"inline\" elements and \"block-level\" elements:", "An \"inline\" button is as small as the text it contains. In this image, it", - "Note that these buttons still need the \"btn\" class." + "Note that these buttons still need the \"btn\" class.", + "Add Bootstrap's \"btn-block\" class to your Bootstrap button." ], "tests": [ "assert($('button').hasClass('btn'), 'Your button should still have the class \"btn\".')", @@ -433,10 +432,10 @@ "id": "bad87fee1348cd8acef08811", "name": "Waypoint: Taste the Bootstrap Button Color Rainbow", "dashedName": "waypoint-taste-the-bootstrap-button-color-rainbow", - "difficulty": 5, + "difficulty": 2.06, "description": [ - "Add Bootstrap's \"btn-primary\" class to your button.", "The \"btn-primary\" class is the main color you'll use in your app. It is useful for highlighting actions you want your user to take.", + "Add Bootstrap's \"btn-primary\" class to your button.", "Note that this button will still need the \"btn\" and \"btn-block\" classes." ], "tests": [ @@ -520,10 +519,10 @@ "id": "bad87fee1348cd8acef08813", "name": "Waypoint: Call out Optional Actions with Button Info", "dashedName": "waypoint-call-out-optional-actions-with-button-info", - "difficulty": 6, + "difficulty": 2.07, "description": [ - "Create a new block-level Bootstrap button below your \"Like\" button with the text \"Info\", and add Bootstrap's \"btn-info\" and \"btn-block\" classes to it.", "Bootstrap comes with several pre-defined colors for buttons. The \"btn-info\" class is used to call attention to optional actions that the user can take.", + "Create a new block-level Bootstrap button below your \"Like\" button with the text \"Info\", and add Bootstrap's \"btn-info\" and \"btn-block\" classes to it.", "Note that these buttons still need the \"btn\" and \"btn-block\" classes." ], "tests": [ @@ -608,10 +607,10 @@ "id": "bad87fee1348ce8acef08814", "name": "Waypoint: Warn your Users of a Dangerous Action", "dashedName": "waypoint-warn-your-users-of-a-dangerous-action", - "difficulty": 7, + "difficulty": 2.08, "description": [ - "Create a button with the text \"Delete\" and give it the class \"btn-danger\".", "Bootstrap comes with several pre-defined colors for buttons. The \"btn-danger\" class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo.", + "Create a button with the text \"Delete\" and give it the class \"btn-danger\".", "Note that these buttons still need the \"btn\" and \"btn-block\" classes." ], "tests": [ @@ -697,14 +696,14 @@ "id": "bad88fee1348ce8acef08815", "name": "Waypoint: Use the Bootstrap Grid to Put Elements Side By Side", "dashedName": "waypoint-use-the-bootstrap-grid-to-put-elements-side-by-side", - "difficulty": 8, + "difficulty": 2.09, "description": [ - "Put the \"Like\", \"Info\" and \"Delete\" buttons side-by-side by wrapping all three of them within one <div class=\"row\"> element, then each of them within a <div class=\"col-xs-4\"> element.", "Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a div element.", "Here's a diagram of how Bootstrap's 12-column grid layout works:", "", "Note that in this illustration, the col-md-* class is being used. Here, \"md\" means \"medium\", and \"*\" is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.", "In the Cat Photo App that we're building, we'll use col-xs-*, where \"*\" is the number of columns wide the element should be, and \"xs\" means \"extra small\", like an extra-small mobile phone screen.", + "Put the \"Like\", \"Info\" and \"Delete\" buttons side-by-side by wrapping all three of them within one <div class=\"row\"> element, then each of them within a <div class=\"col-xs-4\"> element.", "The \"row\" class is applied to a div, and the buttons themselves can be wrapped within it." ], "tests": [ @@ -791,11 +790,11 @@ "id": "bad87fee1348bd9aedf08845", "name": "Waypoint: Ditch Custom CSS for Bootstrap", "dashedName": "waypoint-ditch-custom-css-for-bootstrap", - "difficulty": 9, + "difficulty": 2.10, "description": [ - "Delete the \".red-text\", \"p\", and \".smaller-image\" CSS declarations from your style element so that the only declarations left in your style element are \"h2\" and \"thick-green-border\". Then Delete the p element that contains a dead link. Then remove the \"red-text\" class from your h2 element and replace it with the \"text-primary\" Bootstrap class. Finally, remove the \"smaller-image\" class from your first img element and replace it with the img-responsive class.", "We can clean up our code and make our Cat Photo App look more conventional by using Bootstrap's built-in styles instead of the custom styles we created earlier.", - "Don't worry - there will be plenty of time to customize our CSS later." + "Don't worry - there will be plenty of time to customize our CSS later.", + "Delete the \".red-text\", \"p\", and \".smaller-image\" CSS declarations from your style element so that the only declarations left in your style element are \"h2\" and \"thick-green-border\". Then Delete the p element that contains a dead link. Then remove the \"red-text\" class from your h2 element and replace it with the \"text-primary\" Bootstrap class. Finally, remove the \"smaller-image\" class from your first img element and replace it with the img-responsive class." ], "tests": [ "assert(!$('h2').hasClass('red-text'), 'You h2 element should no longer have the class \"red-text\".')", @@ -890,15 +889,15 @@ "id": "bad87fee1348bd9aede08845", "name": "Waypoint: Create a Custom Heading", "dashedName": "waypoint-create-a-custom-heading", - "difficulty": 11, + "difficulty": 2.11, "description": [ - "Wrap your first image and your h2 element within a single <div class='row'> element. Wrap your h2 text within a <div class='col-xs-8'> and your image in a <div class='col-xs-4'> so that they are on the same line.", "We will make a simple heading for our Cat Photo App by putting them in the same row.", "Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a div element.", "Here's a diagram of how Bootstrap's 12-column grid layout works:", "", "Note that in this illustration, we use the \"col-md-*\" class. Here, \"md\" means \"medium\", and \"*\" is a number specifying how many columns wide the element should be. In this case, we're specifying how many columns wide an element should be on a medium-sized screen, such as a laptop.", "In the Cat Photo App that we're building, we'll use \"col-xs-*\", where \"*\" is the number of columns wide the element should be, and \"xs\" means \"extra small\", like an extra-small mobile phone screen.", + "Wrap your first image and your h2 element within a single <div class='row'> element. Wrap your h2 text within a <div class='col-xs-8'> and your image in a <div class='col-xs-4'> so that they are on the same line.", "Notice how the image is now just the right size to fit along the text?" ], "tests": [ @@ -979,11 +978,10 @@ "id": "bad87fee1348bd9aedd08845", "name": "Waypoint: Add Font Awesome Icons to our Buttons", "dashedName": "waypoint-add-font-awesome-icons-to-our-buttons", - "difficulty": 12, + "difficulty": 2.12, "description": [ - "Use Font Awesome to add a \"thumbs-up\" icon to your like button by giving it a i element with the classes \"fa\" and \"fa-thumbs-up\".", "Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the \".svg\" file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.", - "Go ahead and add a <i class=\"fa fa-thumbs-up\"></i> within your like button's element." + "Use Font Awesome to add a \"thumbs-up\" icon to your like button by giving it a i element with the classes \"fa\" and \"fa-thumbs-up\"." ], "tests": [ "assert($('i').hasClass('fa fa-thumbs-up'), 'Add an i element with the classes \"fa\" and \"fa-thumbs-up\".')", @@ -1065,11 +1063,10 @@ "id": "bad87fee1348bd9aedc08845", "name": "Waypoint: Add Font Awesome Icons to all of our Buttons", "dashedName": "waypoint-add-font-awesome-icons-to-all-of-our-Buttons", - "difficulty": 13, + "difficulty": 2.13, "description": [ - "Use Font Awesome to add a \"info-circle\" icon to your info button and a \"trash\" icon to your delete button.", "Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the \".svg\" file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.", - "Add <i class=\"fa fa-info-circle\"></i> within your info button's element, and a <i class=\"fa fa-trash\"></i> within your delete button." + "Use Font Awesome to add a \"info-circle\" icon to your info button and a \"trash\" icon to your delete button." ], "tests": [ "assert($('i').hasClass('fa fa-trash'), 'You should add a <i class=\"fa fa-trash\"></i> within your delete button element.')", @@ -1151,10 +1148,10 @@ "id": "bad87fee1348bd9aedb08845", "name": "Waypoint: Responsively Style Radio Buttons", "dashedName": "waypoint-responsively-style-radio-buttons", - "difficulty": 14, + "difficulty": 2.14, "description": [ - "Wrap all of your radio buttons within a <div class='row'> element. Then wrap each of them within a <div class='col-xs-6'> element.", - "You can use Bootstrap's \"col-xs-*\" classes on form elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is." + "You can use Bootstrap's \"col-xs-*\" classes on form elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is.", + "Wrap all of your radio buttons within a <div class='row'> element. Then wrap each of them within a <div class='col-xs-6'> element." ], "tests": [ "assert($('div.row:has(input[type=\\'radio\\'])').length > 0, 'Wrap all of your radio buttons inside one div with the class \"row\".')", @@ -1236,10 +1233,10 @@ "id": "bad87fee1348bd9aeda08845", "name": "Waypoint: Responsively Style Checkboxes", "dashedName": "waypoint-responsively-style-checkboxes", - "difficulty": 15, + "difficulty": 2.15, "description": [ - "Wrap all your checkboxes in a <div class='row'> element. Then wrap each of them in a <div class='col-xs-4'> element.", - "You can use Bootstrap's \"col-xs-*\" classes on form elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is." + "You can use Bootstrap's \"col-xs-*\" classes on form elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is.", + "Wrap all your checkboxes in a <div class='row'> element. Then wrap each of them in a <div class='col-xs-4'> element." ], "tests": [ "assert($('div.row:has(input[type=\\'checkbox\\'])').length > 0, 'Wrap all of your checkboxes inside one div with the class \"row\".')", @@ -1328,10 +1325,10 @@ "id": "bad87fee1348bd9aed908845", "name": "Waypoint: Style Text Inputs as Form Controls", "dashedName": "waypoint-style-text-inputs-as-form-controls", - "difficulty": 16, + "difficulty": 2.16, "description": [ - "Give your form's text input field a class of \"form-control\". Give your form's submit button the classes \"btn btn-primary\". Also give this button the Font Awesome icon of \"fa-paper-plane\".", - "You can add the \"fa-paper-plane\" Font Awesome icon by adding <i class=\"fa fa-paper-plane\"></i> within your submit button element." + "You can add the \"fa-paper-plane\" Font Awesome icon by adding <i class=\"fa fa-paper-plane\"></i> within your submit button element.", + "Give your form's text input field a class of \"form-control\". Give your form's submit button the classes \"btn btn-primary\". Also give this button the Font Awesome icon of \"fa-paper-plane\"." ], "tests": [ "assert($('button[type=\\'submit\\']').hasClass('btn btn-primary'), 'Give the submit button in your form the classes \"btn btn-primary\".')", @@ -1429,7 +1426,7 @@ "id": "bad87fee1348bd9aec908845", "name": "Waypoint: Line up Form Elements Responsively with Bootstrap", "dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap", - "difficulty": 17, + "difficulty": 2.17, "description": [ "Now let's get your form input and your submission button on the same line. We'll do this the same way we have previously: by using a div element with the class \"row\", and other div elements within it using the \"col-xs-*\" class.", "Wrap both your form's text input and submit button within a div with the class \"row\". Wrap your form's text input within a div with the class of \"col-xs-7\". Wrap your form's submit button in a div with the class \"col-xs-5\".", @@ -1531,9 +1528,12 @@ "id": "bad87fee1348bd9aec908846", "name": "Waypoint: Create a Bootstrap Headline", "dashedName": "waypoint-create-a-bootstrap-headline", - "difficulty": 18, + "difficulty": 2.18, "description": [ - + "Now let's build something from scratch to practice our HTML, CSS and Bootstrap skills.", + "We'll build a jQuery playground, which we'll soon put to use in our jQuery challenges.", + "To start with, create an h3 element, with the text \"jQuery Playground\".", + "Color your h3 element with the \"text-primary\" Bootstrap class, and center it with the \"text-center\" bootstrap class." ], "tests": [ "assert($('h3') && $('h3').length > 0, 'Add a h3 element to your page.')", @@ -1563,9 +1563,10 @@ "id": "bad87fee1348bd9aec908746", "name": "Waypoint: House our page within a Bootstrap Container Fluid Div", "dashedName": "waypoint-house-our-page-within-a-bootstrap-container-fluid-div", - "difficulty": 18, + "difficulty": 2.18, "description": [ - + "Now let's make sure all the content on your page is mobile-responsive.", + "Let's wrap your h3 element within a div element with the class \"containter-fluid\"." ], "tests": [ "assert($('div').hasClass('container-fluid'), 'Your div element should have the class \"row\"')", @@ -1592,11 +1593,13 @@ "id": "bad87fee1348bd9bec908846", "name": "Waypoint: Create a Bootstrap Row", "dashedName": "waypoint-create-a-bootstrap-row", - "difficulty": 18.5, + "difficulty": 2.19, "description": [ + "Now we'll create a Bootstrap row for our inline elements.", + "Create a div element with the class \"row\"." ], "tests": [ - "assert($('div').length > 0, 'Add a div element to your page.')", + "assert($('div').length > 1, 'Add a div element to your page.')", "assert($('div').hasClass('row'), 'Your div element should have the class \"row\"')", "assert(editor.match(/<\\/div>/g) && editor.match(/
/g).length === editor.match(/
div element has a closing tag.')" ], @@ -1623,8 +1626,10 @@ "id": "bad87fee1348bd9aec908847", "name": "Waypoint: Split your Bootstrap Row", "dashedName": "waypoint-split-your-bootstrap-row", - "difficulty": 19, + "difficulty": 2.20, "description": [ + "Now that we have a Bootstrap Row, let's split it into two columns to house our elements.", + "Create two div elements within your row, both with the class \"col-xs-6\"." ], "tests": [ "assert($('div.row').children('div.col-xs-6').length > 1, 'Wrap two div class=\"col-xs-6\" elements within your div class=\"row\" element.')", @@ -1653,8 +1658,10 @@ "id": "bad87fee1348bd9aec908848", "name": "Waypoint: Create Bootstrap Wells", "dashedName": "waypoint-create-bootstrap-wells", - "difficulty": 20, + "difficulty": 2.21, "description": [ + "Bootstrap has a class called \"well\" that can create a visual sense of depth for your columns.", + "Wrap one div element with the class \"well\" within each of your \"col-xs-6\" div elements." ], "tests": [ "assert($('div').length > 4, 'Add two div elements inside your div class=\"row\"> element both with the class \"col-xs-6\"')", @@ -1687,13 +1694,16 @@ }, { "id": "bad87fee1348bd9aec908849", - "name": "Waypoint: Build a jQuery Playground in Bootstrap", - "dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap", - "difficulty": 21, + "name": "Waypoint: Add Elements within your Bootstrap Wells", + "dashedName": "waypoint-add-elements-within-your-bootstrap-wells", + "difficulty": 2.22, "description": [ + "Now we're several div elements deep on each column of our row. This is as deep as we'll need to go. Now we can add our button elements.", + "Wrap three button elements within each of your \"well\" div elements." ], "tests": [ - + "assert($('div.well').children('button').length > 5, 'Wrap three button elements within each of your div elements with class \"well\".')", + "assert($('button') && $('button').length > 5, 'You should have a total of 6 button elements.')" ], "challengeSeed": [ "
", @@ -1724,13 +1734,16 @@ }, { "id": "bad87fee1348bd9aec908850", - "name": "Waypoint: Build a jQuery Playground in Bootstrap", - "dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap", - "difficulty": 22, + "name": "Waypoint: Apply the Default Bootstrap Button Style", + "dashedName": "waypoint-apply-the-default-bootstrap-button-style", + "difficulty": 2.23, "description": [ + "Bootstrap has another button class called \"btn-default\"", + "Apply both the \"btn\" and \"btn-default\" classes to each of your button elements." ], "tests": [ - + "assert($('.btn').length > 5, 'Apply the \"btn\" class to each of your button elements.')", + "assert($('.btn').length > 5, 'Apply the \"btn-default\" class to each of your button elements.')" ], "challengeSeed": [ "
", @@ -1767,13 +1780,15 @@ }, { "id": "bad87fee1348bd9aec908852", - "name": "Waypoint: Build a jQuery Playground in Bootstrap", - "dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap", - "difficulty": 23, + "name": "Waypoint: Create a Class to Target with jQuery Selectors", + "dashedName": "waypoint-create-a-class-to-target-with-jquery-selectors", + "difficulty": 2.24, "description": [ + "Not every class needs to have corresponding CSS. Sometimes we create classes just for the purpose of selecting these elements more easily using jQuery.", + "Give each of your button elements the class \"target\"." ], "tests": [ - + "assert($('.target').length > 5, 'Apply the \"target\" class to each of your button elements.')" ], "challengeSeed": [ "
", @@ -1810,13 +1825,19 @@ }, { "id": "bad87fee1348bd9aec908853", - "name": "Waypoint: Build a jQuery Playground in Bootstrap", - "dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap", - "difficulty": 24, + "name": "Waypoint: Add ID Attributes to Bootstrap Elements", + "dashedName": "waypoint-add-id-attributes-to-bootstrap-elements", + "difficulty": 2.25, "description": [ + "Recall that in addition to class attributes, you can give each of your elements an id attribute.", + "Each id should be unique to a specific element.", + "Let's give a unique id to each of our div elements of class \"well\".", + "Remember that you can give an element an id like this: <div class=\"well\" id=\"center-well\">", + "Give the well on the left the id of \"left-well\". Give the well on the right the id of \"right-well\"." ], "tests": [ - + "assert($('#left-well') && $('#left-well').length > 0, 'Give your left \"well\" the id of \"left-well\".')", + "assert($('#left-well') && $('#left-well').length > 0, 'Give your right \"well\" the id of \"right-well\".')" ], "challengeSeed": [ "
", @@ -1853,13 +1874,18 @@ }, { "id": "bad87fee1348bd9aec908854", - "name": "Waypoint: Build a jQuery Playground in Bootstrap", - "dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap", - "difficulty": 25, + "name": "Waypoint: Label Boostrap Wells", + "dashedName": "waypoint-label-bootstrap-wells", + "difficulty": 2.26, "description": [ + "For the sake of clarity, let's label both of our wells with their ids.", + "Above your left-well, inside its \"col-xs-6\" div element, add a h4 element with the text \"#left-well\".", + "Above your right-well, inside its \"col-xs-6\" div element, add a h4 element with the text \"#right-well\"." ], "tests": [ - + "assert($('.col-xs-12').children('h4') && $('.col-xs-12').children('h4').length > 1, 'Add an h4 element to each of your <div class='col-xs-6'> elements.')", + "assert(new RegExp('#left-well','gi').test($('h4').text()), 'One h4 element should have the text \"#left-well\".')", + "assert(new RegExp('#right-well','gi').test($('h4').text()), 'One h4 element should have the text \"#right-well\".')" ], "challengeSeed": [ "
", @@ -1896,13 +1922,20 @@ }, { "id": "bad87fee1348bd9aec908855", - "name": "Waypoint: Build a jQuery Playground in Bootstrap", - "dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap", - "difficulty": 26, + "name": "Waypoint: Give Each Element a Unique ID", + "dashedName": "waypoint-give-each-element-a-unique-id", + "difficulty": 2.27, "description": [ + "We will also want to be able to use jQuery to target each button by its unique id.", + "Give each of your buttons a unique id like, starting with \"target1\" and ending with \"target6\"." ], "tests": [ - + "assert($('#target1') && $('#target1').length > 0, 'One button element should have the id \"#target1\".')", + "assert($('#target2') && $('#target2').length > 0, 'One button element should have the id \"#target2\".')", + "assert($('#target3') && $('#target3').length > 0, 'One button element should have the id \"#target3\".')", + "assert($('#target4') && $('#target4').length > 0, 'One button element should have the id \"#target4\".')", + "assert($('#target5') && $('#target5').length > 0, 'One button element should have the id \"#target5\".')", + "assert($('#target6') && $('#target6').length > 0, 'One button element should have the id \"#target6\".')" ], "challengeSeed": [ "
", @@ -1941,13 +1974,20 @@ }, { "id": "bad87fee1348bd9aec908856", - "name": "Waypoint: Build a jQuery Playground in Bootstrap", - "dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap", - "difficulty": 27, + "name": "Waypoint: Label Bootstrap Buttons", + "dashedName": "waypoint-label-bootstrap-buttons", + "difficulty": 2.28, "description": [ + "Just like we labled our wells, we want to label our buttons.", + "Give each of your buttons text that corresponds to their id." ], "tests": [ - + "assert(new RegExp('#target1','gi').test($('#target1').text()), 'Give your button element with the id \"target1\" the text \"#target1\".')", + "assert(new RegExp('#target2','gi').test($('#target2').text()), 'Give your button element with the id \"target2\" the text \"#target2\".')", + "assert(new RegExp('#target3','gi').test($('#target3').text()), 'Give your button element with the id \"target3\" the text \"#target3\".')", + "assert(new RegExp('#target4','gi').test($('#target4').text()), 'Give your button element with the id \"target4\" the text \"#target4\".')", + "assert(new RegExp('#target5','gi').test($('#target5').text()), 'Give your button element with the id \"target5\" the text \"#target5\".')", + "assert(new RegExp('#target6','gi').test($('#target6').text()), 'Give your button element with the id \"target6\" the text \"#target6\".')" ], "challengeSeed": [ "
", @@ -1988,12 +2028,17 @@ "id": "bad87fee1348bd9aec908857", "name": "Waypoint: Use Comments to Clarify Code", "dashedName": "waypoint-use-comments-to-clarify-code", - "difficulty": 28, + "difficulty": 2.29, "description": [ - "add " + "When we start using jQuery, we will modify HTML elements without needing to actually change them in HTML.", + "Let's make sure that everyone knows they shouldn't actually modify any of this code directly.", + "Remember that you can start a comment with <!-- and end a comment with -->", + "Add a comment at the top of your HTML that says You shouldn't need to modify code below this line." ], "tests": [ - + "assert(editor.match(//g).length > 1, 'Be sure to close your comment with -->.')" ], "challengeSeed": [ "
", diff --git a/challenges/get-set-for-free-code-camp.json b/challenges/get-set-for-free-code-camp.json index d82112f10d..b1360711ed 100644 --- a/challenges/get-set-for-free-code-camp.json +++ b/challenges/get-set-for-free-code-camp.json @@ -6,7 +6,7 @@ "id": "bd7124d8c441eddfaeb5bdef", "name": "Waypoint: Learn how Free Code Camp Works", "dashedName": "waypoint-learn-how-free-code-camp-works", - "difficulty": 0.001, + "difficulty": 0.01, "challengeSeed": ["125407438"], "description": [ "Watch this 1-minute video, or simply read this summary:", @@ -55,7 +55,7 @@ "id": "bd7125d8c441eddfaeb5bd0f", "name": "Waypoint: Join Our Chat Room", "dashedName": "waypoint-join-our-chat-room", - "difficulty": 0.002, + "difficulty": 0.02, "challengeSeed": ["131574135"], "description": [ "Now we're going to join the Free Code Camp chat room. You can come here any time of day to hang out, ask questions, or find another camper to pair program with.", @@ -115,7 +115,7 @@ "id": "bd7125d8c441eddfaeb5bdff", "name": "Waypoint: Preview our Challenge Map", "dashedName": "waypoint-preview-our-challenge-map", - "difficulty": 0.003, + "difficulty": 0.03, "challengeSeed": ["125407437"], "description": [ "Before you start learning how to code, we'd like to introduce you to a few things.", @@ -158,7 +158,7 @@ "id": "bd7125d8c441eddfaeb5bd1f", "name": "Waypoint: Browse our Wiki", "dashedName": "waypoint-browse-our-wiki", - "difficulty": 0.004, + "difficulty": 0.04, "challengeSeed": ["125407435"], "description": [ "Free Code Camp has an up-to-date wiki that will answer your many questions.", @@ -201,7 +201,7 @@ "id": "bd7125d8c441eddfaeb5bd2f", "name": "Waypoint: Customize your Portfolio Page", "dashedName": "waypoint-customize-your-portfolio-page", - "difficulty": 0.005, + "difficulty": 0.05, "challengeSeed": ["125407433"], "description": [ "You and all your fellow campers have portfolio pages.", @@ -247,7 +247,7 @@ "id": "bd7126d8c441eddfaeb5bd3f", "name": "Waypoint: Try Camper News", "dashedName": "waypoint-try-camper-news", - "difficulty": 0.006, + "difficulty": 0.06, "challengeSeed": ["124553410"], "description": [ "Camper News is the best place for our campers to share and discuss helpful links.", @@ -299,7 +299,7 @@ "id": "bd7126d8c441eddfaeb5bd3e", "name": "Waypoint: Meet Other Campers in your City", "dashedName": "waypoint-meet-other-campers-in-your-city", - "difficulty": 0.007, + "difficulty": 0.07, "challengeSeed": ["127358841"], "description": [ "One of the best ways to stay motivated when learning to code is to hang out with other campers.", @@ -348,7 +348,7 @@ "id": "bd7126d8c431eddfaeb5bd3e", "name": "Waypoint: Add Free Code Camp to your LinkedIn Profile", "dashedName": "waypoint-add-free-code-camp-to-your-linkedin-profile", - "difficulty": 0.008, + "difficulty": 0.08, "challengeSeed": ["131574134"], "description": [ "LinkedIn is a critical tool for your job search later on.", @@ -379,7 +379,7 @@ "id": "bd7137d8c441eddfaeb5bdef", "name": "Waypoint: Get Help the Hacker Way with RSAP", "dashedName": "waypoint-get-help-the-hacker-way-with-rsap", - "difficulty": 0.009, + "difficulty": 0.09, "challengeSeed": ["125407432"], "description": [ "Let's cover one last thing before you start working through our lessons: how to get help.", diff --git a/challenges/html5-and-css.json b/challenges/html5-and-css.json index 56032e6049..86a0cd2e2c 100644 --- a/challenges/html5-and-css.json +++ b/challenges/html5-and-css.json @@ -6,7 +6,7 @@ "id": "bd7123c8c441eddfaeb5bdef", "name": "Waypoint: Say Hello to HTML Elements", "dashedName": "waypoint-say-hello-to-html-elements", - "difficulty": 0.001, + "difficulty": 1.01, "description": [ "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.", @@ -55,7 +55,7 @@ "id": "bad87fee1348bd9aedf0887a", "name": "Waypoint: Headline with the h2 Element", "dashedName": "waypoint-headline-with-the-h2-element", - "difficulty": 0.002, + "difficulty": 1.02, "description": [ "Add an h2 tag that says \"CatPhotoApp\" to create a second HTML element below your \"Hello World\" h1 element.", "The h2 element you enter will create an h2 element on the website.", @@ -99,7 +99,7 @@ "id": "bad87fee1348bd9aedf08801", "name": "Waypoint: Inform with the Paragraph Element", "dashedName": "waypoint-inform-with-the-paragraph-element", - "difficulty": 0.003, + "difficulty": 1.03, "description": [ "Create a p element below your h2 element, and give it the text \"Hello Paragraph\".", "p elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".", @@ -140,7 +140,7 @@ "id": "bad87fee1348bd9aedf08802", "name": "Waypoint: Uncomment HTML", "dashedName": "waypoint-uncomment-html", - "difficulty": 0.005, + "difficulty": 1.04, "description": [ "Uncomment your h1, h2 and p elements.", "Commenting is a way that you can leave comments within your code without affecting the code itself.", @@ -190,7 +190,7 @@ "id": "bad87fee1348bd9aedf08804", "name": "Waypoint: Comment out HTML", "dashedName": "waypoint-comment-out-html", - "difficulty": 0.006, + "difficulty": 1.05, "description": [ "Comment out your h1 element and your p element, but leave your h2 element uncommented.", "Remember that in order to start a comment, you need to use <!-- and to end a comment, you need to use -->.", @@ -237,7 +237,7 @@ "id": "bad87fee1348bd9aedf08833", "name": "Waypoint: Fill in the Blank with Placeholder Text", "dashedName": "waypoint-fill-in-the-blank-with-placeholder-text", - "difficulty": 0.007, + "difficulty": 1.06, "description": [ "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.", @@ -284,7 +284,7 @@ "id": "bad87fed1348bd9aedf08833", "name": "Waypoint: Delete HTML Elements", "dashedName": "waypoint-delete-html-elements", - "difficulty": 0.008, + "difficulty": 1.07, "description": [ "Delete your h1 element so we can simplify our view.", "Our phone doesn't have much vertical space.", @@ -328,7 +328,7 @@ "id": "bad87fee1348bd9aedf08803", "name": "Waypoint: Change the Color of Text", "dashedName": "waypoint-change-the-color-of-text", - "difficulty": 0.009, + "difficulty": 1.08, "description": [ "Change your h2 element's style so that its text color is red.", "We can do this by changing the \"style\" of your h2 element.", @@ -370,7 +370,7 @@ "id": "bad87fee1348bd9aedf08805", "name": "Waypoint: Use CSS Selectors to Style Elements", "dashedName": "waypoint-use-css-selectors-to-style-elements", - "difficulty": 0.010, + "difficulty": 1.09, "description": [ "Delete your h2 element's style attribute and instead create a CSS style element. Add the necessary CSS to turn all h2 elements blue.", "With CSS, there are hundreds of CSS \"attributes\" that you can use to change the way an element looks on your page.", @@ -425,7 +425,7 @@ "id": "bad87fee1348bd9aecf08806", "name": "Waypoint: Use a CSS Class to Style an Element", "dashedName": "waypoint-use-a-css-class-to-style-an-element", - "difficulty": 0.011, + "difficulty": 1.11, "description": [ "Create a CSS class called \"red-text\" and apply it to your h2 element.", "Classes are reusable styles that can be added to HTML elements.", @@ -479,7 +479,7 @@ "id": "bad87fee1348bd9aefe08806", "name": "Waypoint: Style Multiple Elements with a CSS Class", "dashedName": "waypoint－style－multiple-elements-with-a-css-class", - "difficulty": 0.012, + "difficulty": 1.12, "description": [ "Apply the \"red-text\" class to your h2 and p elements.", "Remember that you can attach classes to HTML elements by using class=\"your-class-here\" within the relevant element's opening tag.", @@ -524,7 +524,7 @@ "id": "bad87fee1348bd9aedf08806", "name": "Waypoint: Change the Font Size of an Element", "dashedName": "waypoint-change-the-font-size-of-an-element", - "difficulty": 0.013, + "difficulty": 1.13, "description": [ "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.", @@ -571,7 +571,7 @@ "id": "bad87fee1348bd9aede08807", "name": "Waypoint: Set the Font Family of an Element", "dashedName": "waypoint-set-the-font-family-of-an-element", - "difficulty": 0.014, + "difficulty": 1.14, "description": [ "Make all of your p elements use the \"Monospace\" font.", "You can set an element's font by using the \"font-family\" attribute.", @@ -618,7 +618,7 @@ "id": "bad87fee1348bd9aedf08807", "name": "Waypoint: Import a Google Font", "dashedName": "waypoint-import-a-google-font", - "difficulty": 0.015, + "difficulty": 1.15, "description": [ "Apply the font-family of \"Lobster\" to your h2 element.", "First, you'll need to make a \"call\" to Google to grab the \"Lobster\" font and load it into your HTML.", @@ -672,7 +672,7 @@ "id": "bad87fee1348bd9aedf08808", "name": "Waypoint: Specify How Fonts Should Degrade", "dashedName": "waypoint-specify-how-fonts-should-degrade", - "difficulty": 0.016, + "difficulty": 1.16, "description": [ "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; }.", @@ -730,7 +730,7 @@ "id": "bad87fee1348bd9aedf08812", "name": "Waypoint: Add Images to your Website", "dashedName": "waypoint-add-images-to-your-website", - "difficulty": 0.017, + "difficulty": 1.17, "description": [ "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.", @@ -785,7 +785,7 @@ "id": "bad87fee1348bd9acdf08812", "name": "Waypoint: Size your Images", "dashedName": "waypoint-size-your-images", - "difficulty": 0.018, + "difficulty": 1.18, "description": [ "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>.", @@ -841,7 +841,7 @@ "id": "bad87fee1348bd9bedf08813", "name": "Waypoint: Add Borders Around your Elements", "dashedName": "waypoint-add-borders-around-your-elements", - "difficulty": 0.019, + "difficulty": 1.19, "description": [ "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>.", @@ -904,7 +904,7 @@ "id": "bad87fee1348bd9aedf08814", "name": "Waypoint: Add Rounded Corners with a Border Radius", "dashedName": "waypoint-add-rounded-corners-with-a-border-radius", - "difficulty": 0.020, + "difficulty": 1.20, "description": [ "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.", @@ -970,7 +970,7 @@ "id": "bad87fee1348bd9aedf08815", "name": "Waypoint: Make Circular Images with a Border Radius", "dashedName": "waypoint-make-circular-images-with-a-border-radius", - "difficulty": 0.021, + "difficulty": 1.21, "description": [ "In addition to pixels, you can also specify a border-radius using a percentage.", "Give your cat photo a border-radius of 50%." @@ -1035,7 +1035,7 @@ "id": "bad87fee1348bd9aedf08816", "name": "Waypoint: Link to External Pages with Anchor Elements", "dashedName": "waypoint-link-to-external-pages-with-anchor-elements", - "difficulty": 0.022, + "difficulty": 1.22, "description": [ "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.", @@ -1106,7 +1106,7 @@ "id": "bad87fee1348bd9aede08817", "name": "Waypoint: Wrap an Anchor Element within a Paragraph", "dashedName": "waypoint-wrap-an-anchor-element-within-a-paragraph", - "difficulty": 0.023, + "difficulty": 1.23, "description": [ "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", @@ -1181,7 +1181,7 @@ "id": "bad87fee1348bd9aedf08817", "name": "Waypoint: Make Dead Links using the Hash Symbol", "dashedName": "waypoint-make-dead-links-using-the-hash-symbol", - "difficulty": 0.024, + "difficulty": 1.24, "description": [ "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.", @@ -1250,7 +1250,7 @@ "id": "bad87fee1348bd9aedf08820", "name": "Waypoint: Turn an Image into a Link", "dashedName": "waypoint-turn-an-image-into-a-link", - "difficulty": 0.025, + "difficulty": 1.25, "description": [ "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>.", @@ -1323,7 +1323,7 @@ "id": "bad87fee1348bd9aedf08818", "name": "Waypoint: Add Alt Text to an Image for Accessibility", "dashedName": "waypoint-add-alt-text-to-an-image-for-accessibility", - "difficulty": 0.026, + "difficulty": 1.26, "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. And search engines also look at alt attributes.", "In short, every image should have an alt attribute!", @@ -1394,7 +1394,7 @@ "id": "bad87fee1348bd9aedf08827", "name": "Waypoint: Create a Bulleted Unordered List", "dashedName": "waypoint-create-a-bulleted-unordered-list", - "difficulty": 0.027, + "difficulty": 1.27, "description": [ "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.", @@ -1467,7 +1467,7 @@ "id": "bad87fee1348bd9aedf08828", "name": "Waypoint: Create an Ordered List", "dashedName": "waypoint-create-an-ordered-list", - "difficulty": 0.028, + "difficulty": 1.28, "description": [ "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.", @@ -1547,7 +1547,7 @@ "id": "bad87fee1348bd9aedf08829", "name": "Waypoint: Create a Text Field", "dashedName": "waypoint-create-a-text-field", - "difficulty": 0.029, + "difficulty": 1.29, "description": [ "Now let's create a web form.", "Text inputs are a convenient way to get input from your user.", @@ -1626,7 +1626,7 @@ "id": "bad87fee1348bd9aedf08830", "name": "Waypoint: Add Placeholder Text to a Text Field", "dashedName": "waypoint-add-placeholder-text-to-a-text-field", - "difficulty": 0.030, + "difficulty": 1.30, "description": [ "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'>.", @@ -1706,7 +1706,7 @@ "id": "bad87fee1348bd9aede08830", "name": "Waypoint: Create a Form Element", "dashedName": "waypoint-create-a-form-element", - "difficulty": 0.031, + "difficulty": 1.31, "description": [ "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>.", @@ -1788,7 +1788,7 @@ "id": "bad87fee1348bd9aedd08830", "name": "Waypoint: Add a Submit Button to a Form", "dashedName": "waypoint-add-a-submit-button-to-a-form", - "difficulty": 0.032, + "difficulty": 1.32, "description": [ "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>.", @@ -1872,7 +1872,7 @@ "id": "bad87fee1348bd9aedc08830", "name": "Waypoint: Use HTML5 to Require a Field", "dashedName": "waypoint-use-html5-to-require-a-field", - "difficulty": 0.033, + "difficulty": 1.33, "description": [ "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>.", @@ -1954,7 +1954,7 @@ "id": "bad87fee1348bd9aedf08834", "name": "Waypoint: Create a Set of Radio Buttons", "dashedName": "waypoint-create-a-set-of-radio-buttons", - "difficulty": 0.034, + "difficulty": 1.34, "description": [ "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.", @@ -2047,7 +2047,7 @@ "id": "bad87fee1348bd9aedf08835", "name": "Waypoint: Create a Set of Checkboxes", "dashedName": "waypoint-create-a-set-of-checkboxes", - "difficulty": 0.035, + "difficulty": 1.35, "description": [ "Forms commonly use \"checkboxes\" for questions that may have more than one answer.", "Checkboxes are a type of input.", @@ -2137,7 +2137,7 @@ "id": "bad87fee1348bd9aedd08835", "name": "Waypoint: Check Radio Buttons and Checkboxes by Default", "dashedName": "waypoint-check-radio-buttons-and-checkboxes-by-default", - "difficulty": 0.037, + "difficulty": 1.37, "description": [ "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>.", @@ -2225,7 +2225,7 @@ "id": "bad87fee1348bd9aede08835", "name": "Waypoint: Wrap Many Elements within a Single Div Element", "dashedName": "waypoint-wrap-many-elements-within-a-single-div-element", - "difficulty": 0.038, + "difficulty": 1.38, "description": [ "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.", @@ -2320,7 +2320,7 @@ "id": "bad87fed1348bd9aede07836", "name": "Waypoint: Give a Background Color to a Div Element", "dashedName": "waypoint-give-a-background-color-to-a-div-element", - "difficulty": 0.039, + "difficulty": 1.39, "description": [ "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.", @@ -2411,7 +2411,7 @@ "id": "bad87fee1348bd9aede07836", "name": "Waypoint: Give a Background Color to a Div Element", "dashedName": "waypoint-give-a-background-color-to-a-div-element", - "difficulty": 0.039, + "difficulty": 1.39, "description": [ "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.", @@ -2502,7 +2502,7 @@ "id": "bad87eee1348bd9aede07836", "name": "Waypoint: Set the ID of an Element", "dashedName": "waypoint-set-the-id-of-an-element", - "difficulty": 0.0391, + "difficulty": 1.391, "description": [ "In addition to classes, each HTML element can also have an id attribute.", "There are several benefits to using id attributes, and you'll learn more about them once you start using jQuery.", @@ -2590,7 +2590,7 @@ "id": "bad87dee1348bd9aede07836", "name": "Waypoint: Use an ID Attribute to Style an Element", "dashedName": "waypoint-use-an-id-attribute-to-style-an-element", - "difficulty": 0.0392, + "difficulty": 1.392, "description": [ "One cool thing about id attributes is that, like classes, you can style them using CSS.", "Here's an example of how you can take your element with the id attribute of \"cat-photo-element\" and give it the background color of green. In your style element: #cat-photo-element { background-color: green; }>", @@ -2680,7 +2680,7 @@ "id": "bad88fee1348bd9aedf08825", "name": "Waypoint: Adjusting the Padding of an Element", "dashedName": "waypoint-adjusting-the-padding-of-an-element", - "difficulty": 0.040, + "difficulty": 1.40, "description": [ "You may have already noticed this, but all HTML elements are essentially little rectangles.", "Three important attributes control the space that surrounds each HTML element: padding, margin, and border.", @@ -2751,7 +2751,7 @@ "id": "bad87fee1348bd9aedf08822", "name": "Waypoint: Adjust the Margin of an Element", "dashedName": "waypoint-adjust-the-margin-of-an-element", - "difficulty": 0.041, + "difficulty": 1.41, "description": [ "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.", @@ -2822,7 +2822,7 @@ "id": "bad87fee1348bd9aedf08823", "name": "Waypoint: Add a Negative Margin to an Element", "dashedName": "waypoint-add-a-negative-margin-to-an-element", - "difficulty": 0.042, + "difficulty": 1.42, "description": [ "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.", @@ -2892,7 +2892,7 @@ "id": "bad87fee1348bd9aedf08824", "name": "Waypoint: Add Different Padding to Each Side of an Element", "dashedName": "waypoint-add-different-padding-to-each-side-of-an-element", - "difficulty": 0.043, + "difficulty": 1.43, "description": [ "Sometimes you will want to customize an element so that it has different padding on each of its sides.", "CSS allows you to control the padding of an element on all four sides with padding-top, padding-right, padding-bottom, and padding-left attributes.", @@ -2964,7 +2964,7 @@ "id": "bad87fee1248bd9aedf08824", "name": "Waypoint: Add Different Margins to Each Side of an Element", "dashedName": "waypoint-add-different-margins-to-each-side-of-an-element", - "difficulty": 0.044, + "difficulty": 1.44, "description": [ "Give the green box a margin 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 a different margin on each of its sides.", @@ -3035,7 +3035,7 @@ "id": "bad87fee1348bd9aedf08826", "name": "Waypoint: Use Clockwise Notation to Specify the Padding of an Element", "dashedName": "waypoint-use-clockwise-notation-to-specify-the-padding-of-an-element", - "difficulty": 0.044, + "difficulty": 1.44, "description": [ "Instead of specifying an element's padding-top, padding-right, padding-bottom, and padding-left attributes, you can specify them all in one line, like this: padding: 10px 20px 10px 20px;.", "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.", @@ -3104,7 +3104,7 @@ "id": "bad87fee1348bd9afdf08726", "name": "Waypoint: Use Clockwise Notation to Specify the Margin of an Element", "dashedName": "waypoint-use-clockwise-notation-to-specify-the-margin-of-an-element", - "difficulty": 0.045, + "difficulty": 1.45, "description": [ "Let's try this again, but with margin this time.", "Instead of specifying an element's margin-top, margin-right, margin-bottom, and margin-left attributes, you can specify them all in one line, like this: margin: 10px 20px 10px 20px;.", @@ -3175,7 +3175,7 @@ "id": "bad87fee1348bd9aedf08736", "name": "Waypoint: Style the HTML Body Element", "dashedName": "waypoint-style-the-html-body-element", - "difficulty": 0.046, + "difficulty": 1.46, "description": [ "Now let's start fresh and talk about CSS inheritance.", "Every HTML page has body element.", @@ -3208,7 +3208,7 @@ "id": "bad87fee1348bd9aedf08746", "name": "Waypoint: Inherit Styles from the Body Element", "dashedName": "waypoint-inherit-styles-from-the-body-element", - "difficulty": 0.047, + "difficulty": 1.47, "description": [ "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.", @@ -3251,7 +3251,7 @@ "id": "bad87fee1348bd9aedf08756", "name": "Waypoint: Prioritize One Style Over Another", "dashedName": "waypoint-prioritize-one-style-over-another", - "difficulty": 0.048, + "difficulty": 1.48, "description": [ "Sometimes your HTML elements will receive multiple styles that conflict with one another.", "For example, your h1 element can't be both green and pink at the same time.", @@ -3291,7 +3291,7 @@ "id": "bad87fee1348bd9aedf04756", "name": "Waypoint: Override Styles in Subsequent CSS", "dashedName": "waypoint-override-styles-in-subsequent-css", - "difficulty": 0.049, + "difficulty": 1.49, "description": [ "Our \"pink-text\" class overrode our body element's CSS declaration!", "We just proved that our classes will override the body element's CSS. So the next logical question is, what can we do to override our \"pink-text\" class?", @@ -3334,7 +3334,7 @@ "id": "bad87fee1348bd8aedf06756", "name": "Waypoint: Override Class Declarations by Styling ID Attributes", "dashedName": "waypoint-override-class-declarations-by-styling-id-attributes", - "difficulty": 0.052, + "difficulty": 1.52, "description": [ "We just proved that browsers read CSS from top to bottom. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last.", "But we're not done yet. There are other ways that you can override CSS. Do you remember id attributes?", @@ -3383,7 +3383,7 @@ "id": "bad87fee1348bd9aedf06756", "name": "Waypoint: Override Class Declarations with Inline Styles", "dashedName": "waypoint-override-class-declarations-with-inline-styles", - "difficulty": 0.052, + "difficulty": 1.52, "description": [ "So we've proven that id declarations override class declarations, regardless of where they are declared in your style element CSS.", "There are other ways that you can override CSS. Do you remember inline styles?", @@ -3434,7 +3434,7 @@ "id": "bad87fee1348bd9aedf07756", "name": "Waypoint: Override All Other Styles by using Important", "dashedName": "waypoint-override-all-other-styles-by-using-important", - "difficulty": 0.053, + "difficulty": 1.53, "description": [ "Yay! we just proved that in-line styles will override all the CSS declarations in your style element.", "But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.", @@ -3488,7 +3488,7 @@ "id": "bad87fee1348bd9aedf08726", "name": "Waypoint: Use Hex Code for Specific Colors", "dashedName": "waypoint-use-hex-code-for-specific-colors", - "difficulty": 0.054, + "difficulty": 1.54, "description": [ "Did you know there other ways to represent colors in CSS? One of these ways is called hexadecimal code, or \"hex code\" for short.", "\"Decimal\" means the numbers zero through nine - the numbers that people use in everyday life. \"Hexadecimal\" includes these 10 numbers, plus the letters A, B, C, D, E and F. This means that Hexidecimal has a total of 16 possible values, instead of the 10 possible values that our normal base-10 number system gives us.", @@ -3524,7 +3524,7 @@ "id": "bad87fee1348bd9aedf08725", "name": "Waypoint: Use Hex Code to Color Elements White", "dashedName": "waypoint-use-hex-code-to-color-elements-white", - "difficulty": 0.055, + "difficulty": 1.55, "description": [ "0 is the lowest number in hex code, and represents a complete absence of color.", "F is the highest number in hex code, and it represents the maximum possible brightness.", @@ -3559,7 +3559,7 @@ "id": "bad87fee1348bd9aedf08724", "name": "Waypoint: Use Hex Code to Color Elements Red", "dashedName": "waypoint-use-hex-code-to-color-elements-red", - "difficulty": 0.056, + "difficulty": 1.56, "description": [ "You may be wondering why we use 6 digits to represent a color instead of just one or two. The answer is that using 6 digits gives us a huge variety.", "How many colors are possible? 16 colors and 6 positions means we have 16 to the 6th power, or more than 16 million possible colors!", @@ -3596,7 +3596,7 @@ "id": "bad87fee1348bd9aedf08723", "name": "Waypoint: Use Hex Code to Color Elements Green", "dashedName": "waypoint-use-hex-code-to-color-elements-green", - "difficulty": 0.057, + "difficulty": 1.57, "description": [ "Remember that hex code follows the red-green-blue, or \"RGB\" format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.", "So to get the absolute brightest green, you would just use F for the third and fourth digits (the highest possible value) and 0 for all the other digits (the lowest possible value).", @@ -3631,7 +3631,7 @@ "id": "bad87fee1348bd9aedf08722", "name": "Waypoint: Use Hex Code to Color Elements Blue", "dashedName": "waypoint-use-hex-code-to-color-elements-blue", - "difficulty": 0.058, + "difficulty": 1.58, "description": [ "Hex code follows the red-green-blue, or \"RGB\" format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.", "So to get the absolute brightest blue, we use F for the fifth and sixth digits (the highest possible value) and 0 for all the other digits (the lowest possible value).", @@ -3666,7 +3666,7 @@ "id": "bad87fee1348bd9aedf08721", "name": "Waypoint: Use Hex Code to Mix Colors", "dashedName": "waypoint-use-hex-code-to-mix-colors", - "difficulty": 0.059, + "difficulty": 1.59, "description": [ "From these three pure colors (red, green and blue), we can create 16 million other colors.", "For example, orange is pure red, mixed with some green, and no blue.", @@ -3701,7 +3701,7 @@ "id": "bad87fee1348bd9aede08720", "name": "Waypoint: Use Hex Code to Color Elements Gray", "dashedName": "waypoint-use-hex-code-to-color-elements-gray", - "difficulty": 0.060, + "difficulty": 1.60, "description": [ "From these three pure colors (red, green and blue), we can create 16 million other colors.", "We can also create different shades of gray by evenly mixing all three colors.", @@ -3736,7 +3736,7 @@ "id": "bad87fee1348bd9aedf08720", "name": "Waypoint: Use Hex Code for Specific Shades of Gray", "dashedName": "waypoint-use-hex-code-for-specific-shades-of-gray", - "difficulty": 0.061, + "difficulty": 1.61, "description": [ "We can also create other shades of gray by evenly mixing all three colors. We can go very close to true black.", "Make the body element's background color a dark gray by giving it the hex code value of #111111." @@ -3770,7 +3770,7 @@ "id": "bad87fee1348bd9aedf08719", "name": "Waypoint: Use Abbreviated Hex Code", "dashedName": "waypoint-use-abbreviated-hex-code", - "difficulty": 0.062, + "difficulty": 1.62, "description": [ "Many people feel overwhelmed by the possibilities of more than 16 million colors. And it's difficult to remember hex code. Fortunately, you can shorten it.", "For example, red, which is #FF0000 in hex code, can be shortened to #F00. That is, one digit for red, one digit for green, one digit for blue.", @@ -3806,7 +3806,7 @@ "id": "bad87fee1348bd9aede08718", "name": "Waypoint: Use RGB values to Color Elements", "dashedName": "waypoint-use-rgb-values-to-color-elements", - "difficulty": 0.063, + "difficulty": 1.63, "description": [ "Another way you can represent colors in CSS is by using RGB values.", "RGB values look like this: rgb(0, 0, 0) for black and rgb(255, 255, 255) for white.", @@ -3843,7 +3843,7 @@ "id": "bad88fee1348bd9aedf08726", "name": "Waypoint: Use RGB to Color Elements White", "dashedName": "waypoint-use-rgb-to-color-elements-white", - "difficulty": 0.064, + "difficulty": 1.64, "description": [ "RGB values look like this: rgb(0, 0, 0) for black and rgb(255, 255, 255) for white.", "Instead of using six hexadecimal digits like you do with hex code, with RGB you specify the brightness of each color with a number between 0 and 255.", @@ -3878,7 +3878,7 @@ "id": "bad89fee1348bd9aedf08724", "name": "Waypoint: Use RGB to Color Elements Red", "dashedName": "waypoint-use-rgb-to-color-elements-red", - "difficulty": 0.065, + "difficulty": 1.65, "description": [ "Just like with hex code, you can represent different colors in RGB by using combinations of different values.", "These values follow the pattern of RGB: the first number represents red, the second number represents green, and the third number represents blue.", @@ -3913,7 +3913,7 @@ "id": "bad80fee1348bd9aedf08723", "name": "Waypoint: Use RGB to Color Elements Green", "dashedName": "waypoint-use-rgb-to-color-elements-green", - "difficulty": 0.066, + "difficulty": 1.66, "description": [ "Now change the body element's background color to the RGB value green: rgb(0, 255, 0)" ], @@ -3946,7 +3946,7 @@ "id": "bad81fee1348bd9aedf08722", "name": "Waypoint: Use RGB to Color Elements Blue", "dashedName": "waypoint-use-rgb-to-color-elements-blue", - "difficulty": 0.067, + "difficulty": 1.67, "description": [ "Change the body element's background color to the RGB value blue: rgb(0, 0, 255)" ], @@ -3979,7 +3979,7 @@ "id": "bad82fee1348bd9aedf08721", "name": "Waypoint: Use RGB to Mix Colors", "dashedName": "waypoint-use-rgb-to-mix-colors", - "difficulty": 0.068, + "difficulty": 1.68, "description": [ "Just like with hex code, you can mix colors in RGB by using combinations of different values.", "Change the body element's background color to the RGB value orange: rgb(255, 165, 0)" @@ -4013,7 +4013,7 @@ "id": "bad83fee1348bd9aede08720", "name": "Waypoint: Use RGB to Color Elements Gray", "dashedName": "waypoint-use-rgb-to-color-elements-gray", - "difficulty": 0.069, + "difficulty": 1.69, "description": [ "With RGB values, we can make an element gray by using combinations of the same value for all three colors.", "Change the body element's background color to the RGB value for gray: rgb(128, 128, 128)" diff --git a/challenges/jquery-ajax-and-json.json b/challenges/jquery-ajax-and-json.json index 3faaa74d22..78b7db9449 100644 --- a/challenges/jquery-ajax-and-json.json +++ b/challenges/jquery-ajax-and-json.json @@ -7,10 +7,13 @@ "id": "bad87fee1348bd9acdd08826", "name": "Waypoint: Learn how Script Tags and Document Ready Work", "dashedName": "waypoint-learn-how-script-tags-and-document-ready-work", - "difficulty": 0.072, + "difficulty": 3.01, "description": [ - "We've simplified our Cat Photo App and removed our style element. Add a script element to your page and create a $(document).ready function within it.", - "Add $(document).ready(function() { to your script element, and then close it on the following line with });." + "Now we're ready to learn jQuery, the most popular JavaScript tool of all time. Don't worry about JavaScript itself - we will cover it soon.", + "Before we can start using jQuery, we need to add some things to our HTML.", + "First, add a script element at the top of your page. Be sure to close it on the following line.", + "Your browser will run any JavaScript inside a script element, including jQuery.", + "Inside your script element, add this code: $(document).ready(function() { to your script. Then close it on the following line (still inside your script element) with: });" ], "tests": [ "assert(editor.match(/