diff --git a/seed/challenges/jquery-ajax-and-json.json b/seed/challenges/jquery-ajax-and-json.json
index 5092435946..57a23f0286 100644
--- a/seed/challenges/jquery-ajax-and-json.json
+++ b/seed/challenges/jquery-ajax-and-json.json
@@ -104,7 +104,8 @@
"difficulty": 0.074,
"description": [
"You see how we made all of your button
elements bounce? We selected them with $('button')
, then we added some CSS classes to them with .addClass('animated bounce');
.",
- "First target your div
elements with the class \"well\" by using the $('.well')
selector.",
+ "You just used jQuery's .addClass()
function, which allows you to add classes to elements.",
+ "First, let's target your div
elements with the class \"well\" by using the $('.well')
selector.",
"Note that, just like with CSS declarations, you type a .
before the class's name.",
"Then use jQuery's .addClass()
function to add the classes \"animated\" and \"shake\".",
"Here's the full code that you'll want to type into your \"document ready function\": $('.well').addClass('animated shake');
"
@@ -301,19 +302,72 @@
],
"challengeType": 0
},
-
+ {
+ "id": "bad87fee1348bd9aed918626",
+ "name": "Waypoint: Remove Classes from an element with jQuery",
+ "dashedName": "waypoint-remove-classes-from-an-element-with-jquery",
+ "difficulty": 0.076,
+ "description": [
+ "In the same way you can add classes to an element with jQuery's addClass()
function, you can remove them with jQuery's removeClass()
function.",
+ "Let's remove the \"btn-default\" class from all of our button
elements.",
+ "Here's how you would do this for a specific button, add $('#target2').removeClass('btn-default');
"
+ ],
+ "tests": [
+ "assert($('.btn-default').length === 0, 'Remove the \"btn-default\" class from all of your button
elements.')",
+ "assert(editor.match(/btn btn-default/g), 'Only use jQuery to add these classes to the element.')"
+ ],
+ "challengeSeed": [
+ "fccss",
+ " $(document).ready(function() {",
+ " $('button').addClass('animated bounce');",
+ " $('.well').addClass('animated shake');",
+ " $('#target3').addClass('animated fadeOut');",
+ "",
+ " });",
+ "fcces",
+ "",
+ "",
+ "",
+ "
.css()
that allows you to change the CSS of an element.",
+ "Here's how we would change its color to blue: $('#target1').css('color', 'blue');
",
+ "This is slightly different from a normal CSS declaration, because the CSS attribute and its value are in quotes, and separated with a comma instead of a colon."
],
"tests": [
- "assert(!editor.match(/nce\\'\\)\\;/g) && !editor.match(/ke\\'\\)\\;/g), 'Delete your img
element selector statement and your \".btn\" selector statement.')",
- "assert(editor.match(/css.*,.*background-color.*gray.\\);/g), 'Select the element with the id
of \"cat-photo-form\" give it the background color of gray.')"
+ "assert($('#target1').css('color') === 'rgb(255, 0, 0)', 'Your \"target1\" element should have red text.')",
+ "assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
@@ -358,15 +412,21 @@
"dashedName": "waypoint-disable-an-element-using-jquery",
"difficulty": 0.077,
"description": [
-
+ "You can also change the non-CSS properties of HTML elements with jQuery. For example, you can disable buttons.",
+ "When you disable a button, it will become grayed-out and can no longer be clicked.",
+ "jQuery has a function called .prop()
that allows you to adjust the properties of elements.",
+ "Here's how you would disable all buttons: $('#button').prop('disabled', true);
",
+ "Disable only the \"target1\" button."
],
"tests": [
- "assert($('form button').attr('id') === 'submit-button', 'Add the ID of \"submit-button\" to your the button
on your form
element.')",
- "assert($('#submit-button') && $('#submit-button').prop('disabled'), 'Disable your element with the id of \"submit-button\".')"
+ "assert($('#target1') && $('#target1').prop('disabled'), 'Disable your \"target1\" button.')",
+ "assert($('#target2') && !$('#target2').prop('disabled'), 'Do not disable any other buttons.')",
+ "assert(!editor.match(/disabled>/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
+ " $('#target1').css('color', 'red');",
"",
" });",
"fcces",
@@ -404,6 +464,8 @@
"dashedName": "waypoint-remove-an-element-using-jquery",
"difficulty": 0.078,
"description": [
+ "Now let's remove an HTML element entirely using jQuery.",
+ "jQuery has a "
],
"tests": [
@@ -413,6 +475,8 @@
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
+ " $('#target1').css('color', 'red');",
+ " $('#target1').prop('disabled', true);",
"",
" });",
"fcces",