diff --git a/challenges/jquery.json b/challenges/jquery.json
index 4df308b372..0ad2a48005 100644
--- a/challenges/jquery.json
+++ b/challenges/jquery.json
@@ -310,8 +310,8 @@
"difficulty": 3.07,
"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\");
"
+ "Here's how you would do this for a specific button, add $(\"#target2\").removeClass(\"btn-default\");
",
+ "Let's remove the btn-default
class from all of our button
elements."
],
"tests": [
"assert($(\".btn-default\").length === 0, 'Remove the btn-default
class from all of your button
elements.')",
@@ -360,11 +360,11 @@
"difficulty": 3.08,
"description": [
"We can also change the CSS of an HTML element directly with jQuery.",
- "Delete your jQuery selectors, leaving an empty document ready function
.",
- "Select target1
and change its color to red.",
"jQuery has a function called .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 property and its value are in quotes, and separated with a comma instead of a colon."
+ "This is slightly different from a normal CSS declaration, because the CSS property and its value are in quotes, and separated with a comma instead of a colon.",
+ "Delete your jQuery selectors, leaving an empty document ready function
.",
+ "Select target1
and change its color to red."
],
"tests": [
"assert($(\"#target1\").css(\"color\") === 'rgb(255, 0, 0)', 'Your target1
element should have red text.')",
@@ -622,9 +622,8 @@
"Every HTML element has a parent
element from which it inherits
properties.",
"For example, your jQuery Playground
h3
element has the parent element of <div class=\"container-fluid\">
, which itself has the parent body
.",
"jQuery has a function called parent()
that allows you to access the parent of whichever element you've selected.",
- "Give the parent of the #target1
element background-color of red.",
- "Here's an example of how you would use the parent()
function: $(\"#left-well\").parent().css(\"background-color\", \"blue\")
",
- "Note: Please do not use this example in the challenge; it will target the incorrect element."
+ "Here's an example of how you would use the parent()
function if you wanted to give the parent element of the left-well
element a background color of blue: $(\"#left-well\").parent().css(\"background-color\", \"blue\")
",
+ "Give the parent of the #target1
element a background-color of red."
],
"tests": [
"assert($(\"#left-well\").css(\"background-color\") === 'red' || $(\"#left-well\").css(\"background-color\") === 'rgb(255, 0, 0)' || $(\"#left-well\").css(\"background-color\").toLowerCase() === '#ff0000' || $(\"#left-well\").css(\"background-color\").toLowerCase() === '#f00', 'Your left-well
element should have a red background.')",
@@ -678,8 +677,8 @@
"Many HTML elements have children
elements from which they inherit
their properties.",
"For example, every HTML element is a child of your body
element, and your \"jQuery Playground\" h3
element is a child of your <div class=\"container-fluid\">
element.",
"jQuery has a function called children()
that allows you to access the children of whichever element you've selected.",
- "Give all the children of your #right-well
element a color of green.",
- "Here's an example of how you would use the children()
function: $(\"#left-well\").children().css(\"color\", \"blue\")
"
+ "Here's an example of how you would use the children()
function to give the children of your left-well
element the background color of blue: $(\"#left-well\").children().css(\"color\", \"blue\")
",
+ "Give all the children of your #right-well
element a color of green."
],
"tests": [
"assert($(\"#target6\").css(\"color\") === 'rgb(0, 128, 0)', 'Your target6
element should have green text.')",
@@ -734,8 +733,8 @@
"You've seen why id attributes are so convenient for targeting with jQuery selectors. But you won't always have such neat ids to work with.",
"Fortunately, jQuery has some other tricks for targeting the right elements.",
"jQuery uses CSS Selectors to target elements. target:nth-child(n)
css selector allows you to select all the nth element with the target class or element type.",
- "Make the second child in each of your well elements bounce.",
- "Here's how you would give the third element in each well bounce: $(\".target:nth-child(3)\").addClass(\"animated bounce\");
"
+ "Here's how you would give the third element in each well bounce: $(\".target:nth-child(3)\").addClass(\"animated bounce\");
",
+ "Make the second child in each of your well elements bounce."
],
"tests": [
"assert($(\".target:nth-child(2)\").hasClass(\"animated\") && $(\".target:nth-child(2)\").hasClass(\"bounce\"), 'The second element in each of your well
elements should bounce.')",