radio buttons with the options of \"indoor\" and \"outdoor\".",
- "You can use radio buttons for questions that can only have only one answer.",
- ""
+ "You can use radio buttons for questions that can only have only one answer."
],
"tests": [
- "assert($('input[type=\"radio\"').length > 1, 'Your webpage should have two radio button elements.')"
+ "assert($('input[type=\"radio\"').length > 1, 'Your webpage should have two radio button elements.')",
+ "assert($('label').length > 1, 'Each of your two radio button elements should be wrapped in a label element.')"
],
"challengeSeed": [
"",
@@ -1577,83 +1577,156 @@
"completionMessage": ""
},
- {
- "_id" : "bad87fee1348bd9aede08835",
- "name": "Check a Radio Button by Default",
- "difficulty" : 0.044,
- "description": [
- "Clean up your form by adding linebreaks between form elements, then set one of your radio buttons to checked by default.",
- ""
- ],
- "tests": [
- "assert($('input[type=\"radio\"').prop('checked'), 'One of the radio buttons on your form should be checked by default.')"
- ],
- "challengeSeed": [
- "",
- "",
- "",
- "Click here for cat photos.
", - "", - "Things cats love:
", - "Top 3 things cats hate:
", - "Click here for cat photos.
", + "", + "Things cats love:
", + "Top 3 things cats hate:
", + "Click here for cat photos.
", + "", + "Things cats love:
", + "Top 3 things cats hate:
", + "img-responsive Bootstrap class to the image.",
+ "Add a new image with the src attribute of \"http://bit.ly/fcc-kittens2\", and add the img-responsive Bootstrap class to the image.",
"Specifying a width of 200 pixels on our img element made it fit our phone's screen, but it's not a perfect fit. It would be great if the image could be exactly the width of our phone's screen.",
"Fortunately, there's a Responsive CSS Framework called written by Twitter called Bootstrap. You can add Bootstrap to any app just by including it with <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/> at the top of your HTML, but we've gone ahead and included it for you here.",
"Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design.",
"Now all you need to do is add the img-responsive class to your image."
],
"tests": [
- "expect($('img')).to.have.class('img-responsive');"
+ "assert($('img').hasClass('img-responsive'), 'Your new image should have the class \"img-responsive\"')",
+ "assert($('img').length > 1, 'You should add an image with the src of \"http://bit.ly/fcc-kittens2\"')"
],
"challengeSeed": [
+ "",
"",
- "Click here for cat photos.
", + "", + "Things cats love:
", + "Top 3 things cats hate:
", + "text-center class to your h2 element.",
"Now that we're using Bootstrap, we can center our heading elements (h2) to make them look better. All we need to do is add the class text-center to the h1 and h2 elements.",
- "Note that you can add several classes to the same element by seperating each of them with a space, like this: <h2 class=\"text-red text-center\">your text</h2>."
+ "Note 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>."
],
"tests": [
- "expect($('h2')).to.have.class('text-center');"
+ "assert($('h2').hasClass('text-center'), 'Your h2 element should be centered by applying the class \"text-center\"')"
],
"challengeSeed": [
+ "",
"",
- "button element.",
- "HTML has special elements that function like links, but look like buttons. Let's creating a default HTML button."
- ],
- "tests": [
- "expect((/delete/gi).test($('button').text())).to.be.true;"
- ],
- "challengeSeed": [
- "",
- "Click here for cat photos.
", + "", + "Things cats love:
", + "Top 3 things cats hate:
", + "btn class to both of your buttons.",
+ "Create a new button below your large kitten photo with the class \"btn\" and the text of \"like this photo\".",
"Bootstrap has its own button styles, which look much better than the plain HTML ones."
],
"tests": [
- "expect($('.btn').length).to.eql(2);"
+ "assert($('.btn').length > 0, 'your new button should have the class \"btn\".')"
],
"challengeSeed": [
+ "",
"",
- "Click here for cat photos.
", + "", + "Things cats love:
", + "Top 3 things cats hate:
", + "btn-block class to both of your buttons.",
+ "Add Bootstrap's btn-block class to your Bootstrap button.",
"Normally, your buttons are only as wide as the text they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.",
"Note that these buttons still need the btn class."
],
"tests": [
- "expect($('.btn-block').length).to.eql(2);"
+ "assert($('.btn-block').length > 0, 'your new button should have the class \"btn-block\".')"
],
"challengeSeed": [
+ "",
"",
- "Click here for cat photos.
", + "", + "Things cats love:
", + "Top 3 things cats hate:
", + "btn-block class to both of your buttons.",
"Normally, your buttons are only as wide as the text they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.",
"Note that these buttons still need the btn class."
],
"tests": [
- "expect($('.btn-block').length).to.eql(2);"
+ "assert($('.btn-primary').length > 0, 'your new button should have the class \"btn-primary\".')"
],
"challengeSeed": [
+ "",
"",
- "Click here for cat photos.
", + "", + "Things cats love:
", + "Top 3 things cats hate:
", + "btn-primary class to both of your buttons.",
+ "Create a new block-level Bootstrap button below your \"like this photo\" button with the text \"more info about this photo\", and add Bootstrap's btn-info class to it.",
"Bootstrap comes with several pre-defined colors for buttons. The btn-primary class is the main button color you'll use throughout your app.",
"Note that these buttons still need the btn and btn-block classes."
],
"tests": [
- "expect($('.btn-primary').length).to.eql(2);"
+ "assert($('.btn-info').length > 0, 'your new button should have the class \"btn-info\".')",
+ "assert($('.btn-block').length > 1, 'Both of your Bootstrap buttons should have the class \"btn-block\".')"
],
"challengeSeed": [
+ "",
"",
- "Click here for cat photos.
", + "", + "Things cats love:
", + "Top 3 things cats hate:
", + "btn-primary to 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.",
"Note that this button still needs the btn and btn-block classes."
],
"tests": [
- "expect($('.btn-danger').length).to.eql(1);"
+ "assert($('.btn-danger').length > 0, 'your new button should have the class \"btn-danger\".')",
+ "assert($('.btn-block').length > 1, 'Both of your Bootstrap buttons should have the class \"btn-block\".')"
],
"challengeSeed": [
+ "",
"",
- "Click here for cat photos.
", + "", + "Things cats love:
", + "Top 3 things cats hate:
", + "<div class=\"row\"> element and each of them in a <div class=\"row\"> 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.",
@@ -2074,7 +2360,7 @@
{
"_id": "bad89fee1348ce8acef08816",
"name": "Wrap Side By Side Elements in a Bootstrap Row",
- "difficulty": 0.999,
+ "difficulty": 0.055,
"description": [
"Put the \"Like\" and \"Delete\" buttons side-by-side by wrapping them in both in a <div class=\"row\"> element and each of them in a <div class=\"row\"> 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.",
@@ -2113,7 +2399,7 @@
{
"_id" : "bad87fee1348bd9aedf08845",
"name": "Make a Navbar",
- "difficulty" : 0.999,
+ "difficulty" : 0.056,
"description": [
"",
""
@@ -2132,7 +2418,7 @@
{
"_id" : "bad87fee1348bd9aedf08847",
"name": "Add a Logo to a Navbar",
- "difficulty" : 0.999,
+ "difficulty" : 0.057,
"description": [
"",
""
@@ -2151,7 +2437,7 @@
{
"_id" : "bad87fee1348bd9aedf08848",
"name": "Make a Footer",
- "difficulty" : 0.999,
+ "difficulty" : 0.058,
"description": [
"",
""
@@ -2170,26 +2456,7 @@
{
"_id" : "bad87fee1348bd9aedf08849",
"name": "Use Icons as Links",
- "difficulty" : 0.999,
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "