diff --git a/seed/challenges/01-front-end-development-certification/bootstrap.json b/seed/challenges/01-front-end-development-certification/bootstrap.json index 182bba334cd..66d5dc9bf3e 100644 --- a/seed/challenges/01-front-end-development-certification/bootstrap.json +++ b/seed/challenges/01-front-end-development-certification/bootstrap.json @@ -1227,8 +1227,9 @@ "You can add Font Awesome to any app just by including it by adding the following code to the top of your HTML:", "<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\"/>", "In this case, we've already added it for you to this page behind the scenes.", - "The i element was originally used to make other elements italic, but is now commonly used for icons. You add the Font Awesome classes to the i element to turn it into an icon, for example:", + "The i element was originally used to make other elements italic, but is now commonly used for icons. You can add the Font Awesome classes to the i element to turn it into an icon, for example:", "<i class=\"fa fa-info-circle\"></i>", + "Note that the span element is also acceptable for use with icons.", "Use Font Awesome to add a thumbs-up icon to your like button by giving it an i element with the classes fa and fa-thumbs-up." ], "challengeSeed": [ @@ -1291,10 +1292,10 @@ "" ], "tests": [ - "assert($(\"i\").is(\".fa.fa-thumbs-up\"), 'message: Add an i element with the classes fa and fa-thumbs-up.');", - "assert($(\"i.fa-thumbs-up\").parent().text().match(/Like/gi) && $(\".btn-primary > i\").is(\".fa.fa-thumbs-up\"), 'message: Your fa-thumbs-up icon should be located within the Like button.');", - "assert($(\"button\").children(\"i\").length > 0, 'message: Nest your i element within your button element.');", - "assert(code.match(/<\\/i>/g), 'message: Make sure your i element has a closing tag.');" + "assert($(\"i\").is(\".fa.fa-thumbs-up\") || $(\"span\").is(\".fa.fa-thumbs-up\"), 'message: Add an i element with the classes fa and fa-thumbs-up.');", + "assert(($(\"i.fa-thumbs-up\").parent().text().match(/Like/gi) && $(\".btn-primary > i\").is(\".fa.fa-thumbs-up\")) || ($(\"span.fa-thumbs-up\").parent().text().match(/Like/gi) && $(\".btn-primary > span\").is(\".fa.fa-thumbs-up\")), 'message: Your fa-thumbs-up icon should be located within the Like button.');", + "assert($(\"button\").children(\"i\").length > 0 || $(\"button\").children(\"span\").length > 0, 'message: Nest your i element within your button element.');", + "assert(code.match(/<\\/i>|<\\/span>/g), 'message: Make sure your icon element has a closing tag.');" ], "type": "waypoint", "challengeType": 0, @@ -1330,7 +1331,8 @@ "title": "Add Font Awesome Icons to all of our Buttons", "description": [ "Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the .svg file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.", - "Use Font Awesome to add an info-circle icon to your info button and a trash icon to your delete button." + "Use Font Awesome to add an info-circle icon to your info button and a trash icon to your delete button.", + "Note: The span element is an acceptable alternative to the i element for the directions below." ], "challengeSeed": [ "", @@ -1392,9 +1394,9 @@ "" ], "tests": [ - "assert($(\".btn-danger > i\").is(\".fa.fa-trash\"), 'message: You should add a <i class=\"fa fa-trash\"></i> within your delete button element.');", - "assert($(\".btn-info > i\").is(\".fa.fa-info-circle\"), 'message: You should add a <i class=\"fa fa-info-circle\"></i> within your info button element.');", - "assert(code.match(/<\\/i>/g) && code.match(/<\\/i>/g).length > 2 && $(\".btn-primary > i\").is(\".fa.fa-thumbs-up\"), 'message: Make sure each of your i elements has a closing tag and <i class=\"fa fa-thumbs-up\"></i> is in your like button element.');" + "assert($(\".btn-info > i\").is(\".fa.fa-info-circle\") || $(\".btn-info > span\").is(\".fa.fa-info-circle\"), 'message: You should add a <i class=\"fa fa-info-circle\"></i> within your info button element.');", + "assert($(\".btn-danger > i\").is(\".fa.fa-trash\") || $(\".btn-danger > span\").is(\".fa.fa-trash\"), 'message: You should add a <i class=\"fa fa-trash\"></i> within your delete button element.');", + "assert(code.match(/<\\/i>|<\\/span/g) && code.match(/<\\/i|<\\/span>/g).length > 2 && ($(\".btn-primary > i\").is(\".fa.fa-thumbs-up\") || $(\".btn-primary > span\").is(\".fa.fa-thumbs-up\")), 'message: Make sure each of your i elements has a closing tag and <i class=\"fa fa-thumbs-up\"></i> is in your like button element.');" ], "type": "waypoint", "challengeType": 0, diff --git a/seed/challenges/01-front-end-development-certification/jquery.json b/seed/challenges/01-front-end-development-certification/jquery.json index 251bc2e8921..5fb4fce17fc 100644 --- a/seed/challenges/01-front-end-development-certification/jquery.json +++ b/seed/challenges/01-front-end-development-certification/jquery.json @@ -782,7 +782,8 @@ "Here's how you would rewrite and emphasize the text of our heading:", "$(\"h3\").html(\"<em>jQuery Playground</em>\");", "jQuery also has a similar function called .text() that only alters text without adding tags. In other words, this function will not evaluate any HTML tags passed to it, but will instead treat it as the text you want to replace the existing content with.", - "Change the button with id target4 by emphasizing its text." + "Change the button with id target4 by emphasizing its text.", + "Note that while the <i> tag has traditionally been used to emphasize text, it has since been coopted for use as a tag for icons. The <em> tag is now widely accepted as the tag for emphasis. Either will work for this challenge." ], "releasedOn": "November 18, 2015", "challengeSeed": [ @@ -818,9 +819,9 @@ "" ], "tests": [ - "assert.isTrue((/#target4<\\/em>/gi).test($(\"#target4\").html()), 'message: Emphasize the text in your target4 button by adding HTML tags.');", + "assert.isTrue((/|#target4<\\/em>|<\\/i>/gi).test($(\"#target4\").html()), 'message: Emphasize the text in your target4 button by adding HTML tags.');", "assert($(\"#target4\") && $(\"#target4\").text() === '#target4', 'message: Make sure the text is otherwise unchanged.');", - "assert.isFalse((//gi).test($(\"h3\").html()), 'message: Do not alter any other text.');", + "assert.isFalse((/|/gi).test($(\"h3\").html()), 'message: Do not alter any other text.');", "assert(code.match(/\\.html\\(/g), 'message: Make sure you are using .html() and not .text().');", "assert(code.match(/\\$\\(\\s*?(\\\"|\\')#target4(\\\"|\\')\\s*?\\)\\.html\\(/), 'message: Make sure to select button id=\"target4\" with jQuery.');" ],