From 6f3de04bed20f851a5eb32ed2d83259736b97f25 Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Fri, 4 Sep 2015 15:00:58 -0700 Subject: [PATCH] improve jquery challenge wording --- challenges/jquery.json | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) 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.')",