diff --git a/seed_data/challenges/bootstrap.json b/seed_data/challenges/bootstrap.json index fd4f7a88035..0981868baa5 100644 --- a/seed_data/challenges/bootstrap.json +++ b/seed_data/challenges/bootstrap.json @@ -7,12 +7,12 @@ "name": "Waypoint: Mobile Responsive Images", "difficulty": 0.047, "description": [ - "Now let's go back to our Cat Photo App. This time, we'll style it using the popular Twitter Bootstrap responsive CSS framework. First, add a new image with the src attribute of \"http://bit.ly/fcc-kittens2\", and add the img-responsive Bootstrap class to that image.", + "Now let's go back to our Cat Photo App. This time, we'll style it using the popular Twitter Bootstrap responsive CSS framework. First, add a new image with the src attribute of \"http://bit.ly/fcc-kittens2\", and add the \"img-responsive\" Bootstrap class to that image.", "It would be great if the image could be exactly the width of our phone's screen.", - "Fortunately, we have access to a Responsive CSS Framework 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 automatically added it to your Cat Photo App for you.", + "Fortunately, we have access to a Responsive CSS Framework 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 automatically added it to your Cat Photo App for you.", "Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design.", "With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.", - "Now all you need to do is add the img-responsive class to your image." + "Now all you need to do is add the \"img-responsive\" class to your image." ], "tests": [ "assert($('img').hasClass('img-responsive'), 'Your new image should have the class \"img-responsive\".')", @@ -93,12 +93,12 @@ "name": "Waypoint: Center Text with Bootstrap", "difficulty": 0.048, "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.", + "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>." ], "tests": [ - "assert($('h2').hasClass('text-center'), 'Your h2 element should be centered by applying the class \"text-center\"')" + "assert($('h2').hasClass('text-center'), 'Your h2 element should be centered by applying the class \"text-center\"')" ], "challengeSeed": [ "", @@ -176,12 +176,13 @@ "name": "Waypoint: Create a Bootstrap Button", "difficulty": 0.049, "description": [ - "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." + "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." ], "tests": [ "assert($('button').hasClass('btn'), 'Your new button should have the class \"btn\".')", - "assert(new RegExp('like this photo','gi').test($('button.btn').text()), 'Your button should have the text \"like this photo\".')" + "assert(new RegExp('like this photo','gi').test($('button.btn').text()), 'Your button should have the text \"like this photo\".')", + "assert(editor.match(/<\\/button>/g) && editor.match(/<\\/button>/g).length === editor.match(/