gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(curriculum): changed challenge test text to use the word should for Responsive Web Design (#36860)

Browse Source 
* fix: changed challenge test text to use should

* fix: changed have to be used in

Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>

* fix: reworded test verbiage

Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>

* fix: improved test verbiage

Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>

* fix: improved test verbiage

Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>

* fix: corrected typo

Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>

* fix: corrected typo

Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>

* fix: changed have the to be used in

Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>

* fix: corrected verbiage

Co-Authored-By: Parth Parth <34807532+thecodingaviator@users.noreply.github.com>
This commit is contained in:
Randell Dawson
2019-11-20 06:45:19 -08:00
committed by Parth Parth
parent b663c39901
commit 9bf3fdbf38
47 changed files with 116 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.english.md
View File

@ -24,10 +24,10 @@ The link text that Camper Cat is using is not very descriptive without the surro
tests: tests:
- text: Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries". - text: Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".
testString: assert($('a').text().match(/^(information about batteries)$/g)); testString: assert($('a').text().match(/^(information about batteries)$/g));
- text: Your <code>a</code> element should have an <code>href</code> attribute with a value of an empty string <code>""</code>. - text: The <code>a</code> element should have an <code>href</code> attribute with a value of an empty string <code>""</code>.
testString: assert($('a').attr('href') === ''); testString: assert($('a').attr('href') === '');
- text: Your <code>a</code> element should have a closing tag. - text: The <code>a</code> element should have a closing tag.
testString: assert($('a').length === code.match(/<\/a>/g).length); testString: assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(''|"")>/g).length);
``` ```

2
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.english.md
View File

@ -35,7 +35,7 @@ Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax),
tests: tests:
- text: Your code should have one <code>audio</code> tag. - text: Your code should have one <code>audio</code> tag.
testString: assert($('audio').length === 1); testString: assert($('audio').length === 1);
- text: Make sure your <code>audio</code> element has a closing tag. - text: Your <code>audio</code> element should have a closing tag.
testString: assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g)); testString: assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g));
- text: The <code>audio</code> tag should have the <code>controls</code> attribute. - text: The <code>audio</code> tag should have the <code>controls</code> attribute.
testString: assert($('audio').attr('controls')); testString: assert($('audio').attr('controls'));

2
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.english.md
View File

@ -44,7 +44,7 @@ tests:
testString: assert($('p').length == 0); testString: assert($('p').length == 0);
- text: The <code>figcaption</code> should be a child of the <code>figure</code> tag. - text: The <code>figcaption</code> should be a child of the <code>figure</code> tag.
testString: assert($('figure').children('figcaption').length == 1); testString: assert($('figure').children('figcaption').length == 1);
- text: Make sure your <code>figure</code> element has a closing tag. - text: Your <code>figure</code> element should have a closing tag.
testString: assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length); testString: assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length);
``` ```

2
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.english.md
View File

@ -29,7 +29,7 @@ tests:
testString: assert($('header').children('h1').length == 1); testString: assert($('header').children('h1').length == 1);
- text: Your code should not have any <code>div</code> tags. - text: Your code should not have any <code>div</code> tags.
testString: assert($('div').length == 0); testString: assert($('div').length == 0);
- text: Make sure your <code>header</code> element has a closing tag. - text: Your <code>header</code> element should have a closing tag.
testString: assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length); testString: assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length);
``` ```

2
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.english.md
View File

@ -28,7 +28,7 @@ tests:
testString: assert($('nav').children('ul').length == 1); testString: assert($('nav').children('ul').length == 1);
- text: Your code should not have any <code>div</code> tags. - text: Your code should not have any <code>div</code> tags.
testString: assert($('div').length == 0); testString: assert($('div').length == 0);
- text: Make sure your <code>nav</code> element has a closing tag. - text: Your <code>nav</code> element should have a closing tag.
testString: assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length); testString: assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length);
``` ```

2
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.english.md
View File

@ -41,7 +41,7 @@ Camper Cat wants information about the ninja level of his users when they sign u
tests: tests:
- text: Your code should have a <code>fieldset</code> tag around the radio button set. - text: Your code should have a <code>fieldset</code> tag around the radio button set.
testString: assert($('fieldset').length == 1); testString: assert($('fieldset').length == 1);
- text: Make sure your <code>fieldset</code> element has a closing tag. - text: The <code>fieldset</code> element should have a closing tag.
testString: assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length); testString: assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length);
- text: Your code should have a <code>legend</code> tag around the text asking what level ninja a user is. - text: Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.
testString: assert($('legend').length == 1); testString: assert($('legend').length == 1);

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.english.md
View File

@ -28,7 +28,7 @@ Increase the size of the element with the id of <code>ball2</code> to 1.5 times
```yml ```yml
tests: tests:
- text: Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size. - text: The <code>transform</code> property for <code>#ball2</code> should be set to scale it to 1.5 times its size.
testString: assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi)); testString: assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi));
``` ```

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.english.md
View File

@ -25,7 +25,7 @@ tests:
testString: assert($('s').length == 1); testString: assert($('s').length == 1);
- text: A <code>s</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet. - text: A <code>s</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.
testString: assert($('h4 > s').text().match(/Google/gi) && !$('h4 > s').text().match(/Alphabet/gi)); testString: assert($('h4 > s').text().match(/Google/gi) && !$('h4 > s').text().match(/Alphabet/gi));
- text: Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting. - text: You should include the word "Alphabet" in the <code>h4</code> tag, without strikethrough formatting.
testString: assert($('h4').html().match(/Alphabet/gi)); testString: assert($('h4').html().match(/Alphabet/gi));
``` ```

4
curriculum/challenges/english/01-responsive-web-design/basic-css/add-borders-around-your-elements.english.md
View File

@ -39,9 +39,9 @@ tests:
testString: assert($("img").hasClass("smaller-image")); testString: assert($("img").hasClass("smaller-image"));
- text: Your <code>img</code> element should have the class <code>thick-green-border</code>. - text: Your <code>img</code> element should have the class <code>thick-green-border</code>.
testString: assert($("img").hasClass("thick-green-border")); testString: assert($("img").hasClass("thick-green-border"));
- text: Give your image a border width of <code>10px</code>. - text: Your image should have a border width of <code>10px</code>.
testString: assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) >= 8 && parseInt($("img").css("border-top-width"), 10) <= 12); testString: assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) >= 8 && parseInt($("img").css("border-top-width"), 10) <= 12);
- text: Give your image a border style of <code>solid</code>. - text: Your image should have a border style of <code>solid</code>.
testString: assert($("img").css("border-right-style") === "solid"); testString: assert($("img").css("border-right-style") === "solid");
- text: The border around your <code>img</code> element should be green. - text: The border around your <code>img</code> element should be green.
testString: assert($("img").css("border-left-color") === "rgb(0, 128, 0)"); testString: assert($("img").css("border-left-color") === "rgb(0, 128, 0)");

4
curriculum/challenges/english/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.english.md
View File

@ -30,9 +30,9 @@ It looks like there is a problem with the variables supplied to the <code>.pengu
```yml ```yml
tests: tests:
- text: Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class. - text: The fallback value of <code>black</code> should be used in the <code>background</code> property of the <code>penguin-top</code> class.
testString: assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi)); testString: assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));
- text: Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class. - text: The fallback value of <code>black</code> should be used in <code>background</code> property of the <code>penguin-bottom</code> class.
testString: assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi)); testString: assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi));
``` ```

4
curriculum/challenges/english/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.english.md
View File

@ -29,11 +29,11 @@ Create a class called <code>silver-background</code> with the <code>background-c
```yml ```yml
tests: tests:
- text: Give your <code>div</code> element the class <code>silver-background</code>. - text: Your<code>div</code> element should have the class <code>silver-background</code>.
testString: assert($("div").hasClass("silver-background")); testString: assert($("div").hasClass("silver-background"));
- text: Your <code>div</code> element should have a silver background. - text: Your <code>div</code> element should have a silver background.
testString: assert($("div").css("background-color") === "rgb(192, 192, 192)"); testString: assert($("div").css("background-color") === "rgb(192, 192, 192)");
- text: Define a class named <code>silver-background</code> within the <code>style</code> element and assign the value of <code>silver</code> to the <code>background-color</code> property. - text: A class named <code>silver-background</code> should be defined within the <code>style</code> element and the value of <code>silver</code> should be assigned to the <code>background-color</code> property.
testString: assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/)); testString: assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/));
``` ```

4
curriculum/challenges/english/01-responsive-web-design/basic-css/import-a-google-font.english.md
View File

@ -28,11 +28,11 @@ Create a <code>font-family</code> CSS rule that uses the <code>Lobster</code> fo
```yml ```yml
tests: tests:
- text: Import the <code>Lobster</code> font. - text: You should import the <code>Lobster</code> font.
testString: assert(new RegExp("googleapis", "gi").test(code)); testString: assert(new RegExp("googleapis", "gi").test(code));
- text: Your <code>h2</code> element should use the font <code>Lobster</code>. - text: Your <code>h2</code> element should use the font <code>Lobster</code>.
testString: assert($("h2").css("font-family").match(/lobster/i)); testString: assert($("h2").css("font-family").match(/lobster/i));
- text: Use an <code>h2</code> CSS selector to change the font. - text: You should use an <code>h2</code> CSS selector to change the font.
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?(.{0,})\s*;\s*\}/gi.test(code));' testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?(.{0,})\s*;\s*\}/gi.test(code));'
- text: Your <code>p</code> element should still use the font <code>monospace</code>. - text: Your <code>p</code> element should still use the font <code>monospace</code>.
testString: assert($("p").css("font-family").match(/monospace/i)); testString: assert($("p").css("font-family").match(/monospace/i));

2
curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-css-variables.english.md
View File

@ -23,7 +23,7 @@ Define a variable named <code>--penguin-belly</code> in the <code>:root</code> s
```yml ```yml
tests: tests:
- text: Declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>. - text: The <code>--penguin-belly</code> variable should be declared in the <code>:root</code> and assigned the value <code>pink</code>.
testString: assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi)); testString: assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi));
``` ```

8
curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.english.md
View File

@ -24,15 +24,15 @@ Finally, give your <code>body</code> element the font-family of <code>monospace<
```yml ```yml
tests: tests:
- text: Create an <code>h1</code> element. - text: You should create an <code>h1</code> element.
testString: assert(($("h1").length > 0)); testString: assert(($("h1").length > 0));
- text: Your <code>h1</code> element should have the text <code>Hello World</code>. - text: Your <code>h1</code> element should have the text <code>Hello World</code>.
testString: assert(($("h1").length > 0 && $("h1").text().match(/hello world/i))); testString: assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)));
- text: Make sure your <code>h1</code> element has a closing tag. - text: Your <code>h1</code> element should have a closing tag.
testString: assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length); testString: assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length);
- text: Give your <code>body</code> element the <code>color</code> property of <code>green</code>. - text: Your <code>body</code> element should have the <code>color</code> property of <code>green</code>.
testString: assert(($("body").css("color") === "rgb(0, 128, 0)")); testString: assert(($("body").css("color") === "rgb(0, 128, 0)"));
- text: Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>. - text: Your <code>body</code> element should have the <code>font-family</code> property of <code>monospace</code>.
testString: assert(($("body").css("font-family").match(/monospace/i))); testString: assert(($("body").css("font-family").match(/monospace/i)));
- text: Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element. - text: Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.
testString: assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i))); testString: assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)));

2
curriculum/challenges/english/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.english.md
View File

@ -23,7 +23,7 @@ Give your cat photo a <code>border-radius</code> of <code>50%</code>.
tests: tests:
- text: Your image should have a border radius of <code>50%</code>, making it perfectly circular. - text: Your image should have a border radius of <code>50%</code>, making it perfectly circular.
testString: assert(parseInt($("img").css("border-top-left-radius")) > 48); testString: assert(parseInt($("img").css("border-top-left-radius")) > 48);
- text: Be sure to use a percentage value of <code>50%</code>. - text: The <code>border-radius</code> value should use a percentage value of <code>50%</code>.
testString: assert(code.match(/50%/g)); testString: assert(code.match(/50%/g));
``` ```

6
curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.english.md
View File

@ -38,13 +38,13 @@ tests:
testString: assert($("h1").hasClass("pink-text")); testString: assert($("h1").hasClass("pink-text"));
- text: Your <code>h1</code> element should have the class <code>blue-text</code>. - text: Your <code>h1</code> element should have the class <code>blue-text</code>.
testString: assert($("h1").hasClass("blue-text")); testString: assert($("h1").hasClass("blue-text"));
- text: Give your <code>h1</code> element the id of <code>orange-text</code>. - text: Your <code>h1</code> element should have the id of <code>orange-text</code>.
testString: assert($("h1").attr("id") === "orange-text"); testString: assert($("h1").attr("id") === "orange-text");
- text: There should be only one <code>h1</code> element. - text: There should be only one <code>h1</code> element.
testString: assert(($("h1").length === 1)); testString: assert(($("h1").length === 1));
- text: Create a CSS declaration for your <code>orange-text</code> id - text: Your <code>orange-text</code> id should have a CSS declaration.
testString: assert(code.match(/#orange-text\s*{/gi)); testString: assert(code.match(/#orange-text\s*{/gi));
- text: Do not give your <code>h1</code> any <code>style</code> attributes. - text: Your <code>h1</code> should not have any <code>style</code> attributes.
testString: assert(!code.match(/<h1.*style.*>/gi)); testString: assert(!code.match(/<h1.*style.*>/gi));
- text: Your <code>h1</code> element should be orange. - text: Your <code>h1</code> element should be orange.
testString: assert($("h1").css("color") === "rgb(255, 165, 0)"); testString: assert($("h1").css("color") === "rgb(255, 165, 0)");

2
curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.english.md
View File

@ -30,7 +30,7 @@ tests:
testString: assert($("h1").hasClass("blue-text")); testString: assert($("h1").hasClass("blue-text"));
- text: Your <code>h1</code> element should have the id of <code>orange-text</code>. - text: Your <code>h1</code> element should have the id of <code>orange-text</code>.
testString: assert($("h1").attr("id") === "orange-text"); testString: assert($("h1").attr("id") === "orange-text");
- text: Give your <code>h1</code> element an inline style. - text: Your <code>h1</code> element should have an inline style.
testString: assert(document.querySelector('h1[style]')); testString: assert(document.querySelector('h1[style]'));
- text: Your <code>h1</code> element should be white. - text: Your <code>h1</code> element should be white.
testString: assert($("h1").css("color") === "rgb(255, 255, 255)"); testString: assert($("h1").css("color") === "rgb(255, 255, 255)");

2
curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-id-of-an-element.english.md
View File

@ -25,7 +25,7 @@ Give your <code>form</code> element the id <code>cat-photo-form</code>.
```yml ```yml
tests: tests:
- text: Give your <code>form</code> element the id of <code>cat-photo-form</code>. - text: Your <code>form</code> element should have the id of <code>cat-photo-form</code>.
testString: assert($("form").attr("id") === "cat-photo-form"); testString: assert($("form").attr("id") === "cat-photo-form");
``` ```

6
curriculum/challenges/english/01-responsive-web-design/basic-css/style-the-html-body-element.english.md
View File

@ -30,11 +30,11 @@ body {
```yml ```yml
tests: tests:
- text: Give your <code>body</code> element the <code>background-color</code> of black. - text: Your <code>body</code> element should have the <code>background-color</code> of black.
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)"); testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
- text: Make sure your CSS rule is properly formatted with both opening and closing curly brackets. - text: Your CSS rule should be properly formatted with both opening and closing curly brackets.
testString: assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)); testString: assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));
- text: Make sure your CSS rule ends with a semi-colon. - text: Your CSS rule should end with a semi-colon.
testString: assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)); testString: assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));
``` ```

2
curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.english.md
View File

@ -42,7 +42,7 @@ tests:
testString: assert($("h2").hasClass("red-text")); testString: assert($("h2").hasClass("red-text"));
- text: Your stylesheet should declare a <code>red-text</code> class and have its color set to red. - text: Your stylesheet should declare a <code>red-text</code> class and have its color set to red.
testString: assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g)); testString: assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
- text: Do not use inline style declarations like <code>style="color&#58; red"</code> in your <code>h2</code> element. - text: You should not use inline style declarations like <code>style="color&#58; red"</code> in your <code>h2</code> element.
testString: assert($("h2").attr("style") === undefined); testString: assert($("h2").attr("style") === undefined);
``` ```

8
curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-custom-css-variable.english.md
View File

@ -28,13 +28,13 @@ Apply the <code>--penguin-skin</code> variable to the <code>background</code> pr
```yml ```yml
tests: tests:
- text: Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-top</code> class. - text: The <code>--penguin-skin</code> variable should be applied to the <code>background</code> property of the <code>penguin-top</code> class.
testString: assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi)); testString: assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));
- text: Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-bottom</code> class. - text: The <code>--penguin-skin</code> variable should be applied to the <code>background</code> property of the <code>penguin-bottom</code> class.
testString: assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi)); testString: assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi));
- text: Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class. - text: The <code>--penguin-skin</code> variable should be applied to the <code>background</code> property of the <code>right-hand</code> class.
testString: assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi)); testString: assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi));
- text: Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class. - text: The <code>--penguin-skin</code> variable should be applied to the <code>background</code> property of the <code>left-hand</code> class.
testString: assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi)); testString: assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi));
``` ```

16
curriculum/challenges/english/01-responsive-web-design/basic-css/use-abbreviated-hex-code.english.md
View File

@ -24,21 +24,21 @@ Go ahead, try using the abbreviated hex codes to color the correct elements.
```yml ```yml
tests: tests:
- text: Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red. - text: Your <code>h1</code> element with the text <code>I am red!</code> should be given the <code>color</code> red.
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)'); testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
- text: Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>. - text: The abbreviated <code>hex code</code> for the color red should be used instead of the hex code <code>#FF0000</code>.
testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi)); testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
- text: Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green. - text: Your <code>h1</code> element with the text <code>I am green!</code> should be given the <code>color</code> green.
testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)'); testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
- text: Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>. - text: The abbreviated <code>hex code</code> for the color green should be used instead of the hex code <code>#00FF00</code>.
testString: assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi)); testString: assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
- text: Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan. - text: Your <code>h1</code> element with the text <code>I am cyan!</code> should be given the <code>color</code> cyan.
testString: assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)'); testString: assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
- text: Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>. - text: The abbreviated <code>hex code</code> for the color cyan should be used instead of the hex code <code>#00FFFF</code>.
testString: assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi)); testString: assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
- text: Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia. - text: Your <code>h1</code> element with the text <code>I am fuchsia!</code> should be given the <code>color</code> fuchsia.
testString: assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)'); testString: assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
- text: Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>. - text: The abbreviated <code>hex code</code> for the color fuchsia should be used instead of the hex code <code>#FF00FF</code>.
testString: assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi)); testString: assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
``` ```

6
curriculum/challenges/english/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.english.md
View File

@ -31,13 +31,13 @@ Try giving your form, which now has the <code>id</code> attribute of <code>cat-p
```yml ```yml
tests: tests:
- text: Give your <code>form</code> element the id of <code>cat-photo-form</code>. - text: Your <code>form</code> element should have the id of <code>cat-photo-form</code>.
testString: assert($("form").attr("id") === "cat-photo-form"); testString: assert($("form").attr("id") === "cat-photo-form");
- text: Your <code>form</code> element should have the <code>background-color</code> of green. - text: Your <code>form</code> element should have the <code>background-color</code> of green.
testString: assert($("#cat-photo-form").css("background-color") === "rgb(0, 128, 0)"); testString: assert($("#cat-photo-form").css("background-color") === "rgb(0, 128, 0)");
- text: Make sure your <code>form</code> element has an <code>id</code> attribute. - text: Your <code>form</code> element should have an <code>id</code> attribute.
testString: assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0); testString: assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0);
- text: Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes. - text: You should not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.
testString: assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi)); testString: assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
``` ```

8
curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.english.md
View File

@ -41,15 +41,15 @@ Delete your <code>h2</code> element's style attribute, and instead create a CSS
```yml ```yml
tests: tests:
- text: Remove the style attribute from your <code>h2</code> element. - text: The style attribute should be removed from your <code>h2</code> element.
testString: assert(!$("h2").attr("style")); testString: assert(!$("h2").attr("style"));
- text: Create a <code>style</code> element. - text: You should create a <code>style</code> element.
testString: assert($("style") && $("style").length >= 1); testString: assert($("style") && $("style").length >= 1);
- text: Your <code>h2</code> element should be blue. - text: Your <code>h2</code> element should be blue.
testString: assert($("h2").css("color") === "rgb(0, 0, 255)"); testString: assert($("h2").css("color") === "rgb(0, 0, 255)");
- text: Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace. - text: Your stylesheet <code>h2</code> declaration should be valid with a semicolon and closing brace.
testString: assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g)); testString: assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
- text: Make sure all your <code>style</code> elements are valid and have a closing tag. - text: All your <code>style</code> elements should be valid and have closing tags.
testString: assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g) || []).length); testString: assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g) || []).length);
``` ```

4
curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.english.md
View File

@ -30,9 +30,9 @@ Replace the word <code>black</code> in our <code>body</code> element's backgroun
```yml ```yml
tests: tests:
- text: Give your <code>body</code> element the background-color of black. - text: Your <code>body</code> element should have the background-color of black.
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)"); testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
- text: Use the <code>hex code</code> for the color black instead of the word <code>black</code>. - text: The <code>hex code</code> for the color black should be used instead of the word <code>black</code>.
testString: assert(code.match(/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi)); testString: assert(code.match(/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi));
``` ```

16
curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.english.md
View File

@ -26,21 +26,21 @@ Replace the color words in our <code>style</code> element with their correct hex
```yml ```yml
tests: tests:
- text: Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red. - text: Your <code>h1</code> element with the text <code>I am red!</code> should be given the <code>color</code> red.
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)'); testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
- text: Use the <code>hex code</code> for the color red instead of the word <code>red</code>. - text: The <code>hex code</code> for the color red should be used instead of the word <code>red</code>.
testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi)); testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi));
- text: Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green. - text: Your <code>h1</code> element with the text <code>I am green!</code> should be given the <code>color</code> green.
testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)'); testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
- text: Use the <code>hex code</code> for the color green instead of the word <code>green</code>. - text: The <code>hex code</code> for the color green should be used instead of the word <code>green</code>.
testString: assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi)); testString: assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi));
- text: Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue. - text: Your <code>h1</code> element with the text <code>I am dodger blue!</code> should be given the <code>color</code> dodger blue.
testString: assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)'); testString: assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
- text: Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>. - text: The <code>hex code</code> for the color dodger blue should be used instead of the word <code>dodgerblue</code>.
testString: assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi)); testString: assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));
- text: Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange. - text: Your <code>h1</code> element with the text <code>I am orange!</code> should be given the <code>color</code> orange.
testString: assert($('.orange-text').css('color') === 'rgb(255, 165, 0)'); testString: assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
- text: Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>. - text: The <code>hex code</code> for the color orange should be used instead of the word <code>orange</code>.
testString: assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi)); testString: assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));
``` ```

16
curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.english.md
View File

@ -22,21 +22,21 @@ Replace the hex codes in our <code>style</code> element with their correct RGB v
```yml ```yml
tests: tests:
- text: Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red. - text: Your <code>h1</code> element with the text <code>I am red!</code> should have the <code>color</code> red.
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)'); testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
- text: Use <code>rgb</code> for the color red. - text: You should use <code>rgb</code> for the color red.
testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi)); testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi));
- text: Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid. - text: Your <code>h1</code> element with the text <code>I am orchid!</code> should have the <code>color</code> orchid.
testString: assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)'); testString: assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
- text: Use <code>rgb</code> for the color orchid. - text: You should use <code>rgb</code> for the color orchid.
testString: assert(code.match(/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi)); testString: assert(code.match(/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi));
- text: Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue. - text: Your <code>h1</code> element with the text <code>I am blue!</code> should have the <code>color</code> blue.
testString: assert($('.blue-text').css('color') === 'rgb(0, 0, 255)'); testString: assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
- text: Use <code>rgb</code> for the color blue. - text: You should use <code>rgb</code> for the color blue.
testString: assert(code.match(/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi)); testString: assert(code.match(/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi));
- text: Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna. - text: Your <code>h1</code> element with the text <code>I am sienna!</code> should have the <code>color</code> sienna.
testString: assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)'); testString: assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
- text: Use <code>rgb</code> for the color sienna. - text: You should use <code>rgb</code> for the color sienna.
testString: assert(code.match(/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi)); testString: assert(code.match(/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi));
``` ```

2
curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.english.md
View File

@ -37,7 +37,7 @@ Let's replace the hex code in our <code>body</code> element's background color w
tests: tests:
- text: Your <code>body</code> element should have a black background. - text: Your <code>body</code> element should have a black background.
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)"); testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
- text: Use <code>rgb</code> to give your <code>body</code> element a color of black. - text: You should use <code>rgb</code> to give your <code>body</code> element a color of black.
testString: assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig)); testString: assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig));
``` ```

2
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.english.md
View File

@ -29,7 +29,7 @@ tests:
testString: assert($("button").attr("type") === "submit"); testString: assert($("button").attr("type") === "submit");
- text: Your submit button should only have the text "Submit". - text: Your submit button should only have the text "Submit".
testString: assert($("button").text().match(/^\s*submit\s*$/gi)); testString: assert($("button").text().match(/^\s*submit\s*$/gi));
- text: Make sure your <code>button</code> element has a closing tag. - text: Your <code>button</code> element should have a closing tag.
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length); testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
``` ```

2
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.english.md
View File

@ -37,7 +37,7 @@ tests:
testString: assert($("img").length); testString: assert($("img").length);
- text: Your image should have a <code>src</code> attribute that points to the kitten image. - text: Your image should have a <code>src</code> attribute that points to the kitten image.
testString: assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($("img").attr("src"))); testString: assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($("img").attr("src")));
- text: Your image element's <code>alt</code> attribute <strong>must</strong> not be empty. - text: Your image element's <code>alt</code> attribute should not be empty.
testString: assert($("img").attr("alt") && $("img").attr("alt").length && /<img\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(code.replace(/\s/g,''))); testString: assert($("img").attr("alt") && $("img").attr("alt").length && /<img\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(code.replace(/\s/g,'')));
``` ```

4
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.english.md
View File

@ -24,9 +24,9 @@ Set the <code>placeholder</code> value of your text <code>input</code> to "cat p
```yml ```yml
tests: tests:
- text: Add a <code>placeholder</code> attribute to the existing text <code>input</code> element. - text: You should add a <code>placeholder</code> attribute to the existing text <code>input</code> element.
testString: assert($("input[placeholder]").length > 0); testString: assert($("input[placeholder]").length > 0);
- text: Set the value of your placeholder attribute to "cat photo URL". - text: You should set the value of your placeholder attribute to "cat photo URL".
testString: assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/cat\s+photo\s+URL/gi)); testString: assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/cat\s+photo\s+URL/gi));
- text: The finished <code>input</code> element should not have a closing tag. - text: The finished <code>input</code> element should not have a closing tag.
testString: assert(!code.match(/<input.*\/?>.*<\/input>/gi)); testString: assert(!code.match(/<input.*\/?>.*<\/input>/gi));

10
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/comment-out-html.english.md
View File

@ -22,15 +22,15 @@ Comment out your <code>h1</code> element and your <code>p</code> element, but no
```yml ```yml
tests: tests:
- text: Comment out your <code>h1</code> element so that it is not visible on your page. - text: Your <code>h1</code> element should be commented out so that it is not visible on the page.
testString: assert(($("h1").length === 0)); testString: assert(($("h1").length === 0));
- text: Leave your <code>h2</code> element uncommented so that it is visible on your page. - text: Your <code>h2</code> element should not be commented out so that it is visible on the page.
testString: assert(($("h2").length > 0)); testString: assert(($("h2").length > 0));
- text: Comment out your <code>p</code> element so that it is not visible on your page. - text: Your <code>p</code> element should be commented out so that it is not visible on the page.
testString: assert(($("p").length === 0)); testString: assert(($("p").length === 0));
- text: Be sure to close each of your comments with <code>--&#62;</code>. - text: Each of your comments should be closed with <code>--&#62;</code>.
testString: assert(code.match(/[^fc]-->/g).length > 1); testString: assert(code.match(/[^fc]-->/g).length > 1);
- text: Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code. - text: You should not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.
testString: assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="<h1>" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="<h2>" && code.match(/<([a-z0-9]){1,2}>/g)[2]==="<p>") ); testString: assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="<h1>" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="<h2>" && code.match(/<([a-z0-9]){1,2}>/g)[2]==="<p>") );
``` ```

6
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.english.md
View File

@ -36,11 +36,11 @@ tests:
testString: assert($("ul").length > 0); testString: assert($("ul").length > 0);
- text: You should have three <code>li</code> elements within your <code>ul</code> element. - text: You should have three <code>li</code> elements within your <code>ul</code> element.
testString: assert($("ul li").length > 2); testString: assert($("ul li").length > 2);
- text: Make sure your <code>ul</code> element has a closing tag. - text: Your <code>ul</code> element should have a closing tag.
testString: assert(code.match(/<\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length); testString: assert(code.match(/<\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length);
- text: Make sure your <code>li</code> elements have closing tags. - text: Your <code>li</code> elements should have closing tags.
testString: assert(code.match(/<\/li>/gi) && code.match(/<li[\s>]/gi) && code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length); testString: assert(code.match(/<\/li>/gi) && code.match(/<li[\s>]/gi) && code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length);
- text: Make sure your <code>li</code> elements don’t contain an empty string or only white-space. - text: Your <code>li</code> elements should not contain an empty string or only white-space.
testString: assert($("ul li").filter((_, item) => !$(item).text().trim()).length === 0); testString: assert($("ul li").filter((_, item) => !$(item).text().trim()).length === 0);
``` ```

6
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-form-element.english.md
View File

@ -23,11 +23,11 @@ Nest your text field inside a <code>form</code> element, and add the <code>actio
```yml ```yml
tests: tests:
- text: Nest your text input element within a <code>form</code> element. - text: Your text input element should be nested within a <code>form</code> element.
testString: assert($("form") && $("form").children("input") && $("form").children("input").length > 0); testString: assert($("form") && $("form").children("input") && $("form").children("input").length > 0);
- text: Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code> - text: Your <code>form</code> should have an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>
testString: assert($("form").attr("action") === "/submit-cat-photo"); testString: assert($("form").attr("action") === "/submit-cat-photo");
- text: Make sure your <code>form</code> element has well-formed open and close tags. - text: Your <code>form</code> element should have well-formed open and close tags.
testString: assert(code.match(/<\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length); testString: assert(code.match(/<\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length);
``` ```

2
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.english.md
View File

@ -33,7 +33,7 @@ tests:
testString: assert($('label > input[type="checkbox"]:only-child').length > 2); testString: assert($('label > input[type="checkbox"]:only-child').length > 2);
- text: Make sure each of your <code>label</code> elements has a closing tag. - text: Make sure each of your <code>label</code> elements has a closing tag.
testString: assert(code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length); testString: assert(code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length);
- text: Give your checkboxes the <code>name</code> attribute of <code>personality</code>. - text: Your checkboxes should be given the <code>name</code> attribute of <code>personality</code>.
testString: assert($('label > input[type="checkbox"]').filter('[name="personality"]').length > 2); testString: assert($('label > input[type="checkbox"]').filter('[name="personality"]').length > 2);
- text: Each of your checkboxes should be added within the <code>form</code> tag. - text: Each of your checkboxes should be added within the <code>form</code> tag.
testString: assert($('label').parent().get(0).tagName.match('FORM')); testString: assert($('label').parent().get(0).tagName.match('FORM'));

4
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.english.md
View File

@ -42,11 +42,11 @@ Add a pair of radio buttons to your form, each nested in its own <code>label</co
tests: tests:
- text: Your page should have two radio button elements. - text: Your page should have two radio button elements.
testString: assert($('input[type="radio"]').length > 1); testString: assert($('input[type="radio"]').length > 1);
- text: Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>. - text: Your radio buttons should be given the <code>name</code> attribute of <code>indoor-outdoor</code>.
testString: assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1); testString: assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
- text: Each of your two radio button elements should be nested in its own <code>label</code> element. - text: Each of your two radio button elements should be nested in its own <code>label</code> element.
testString: assert($('label > input[type="radio"]:only-child').length > 1); testString: assert($('label > input[type="radio"]:only-child').length > 1);
- text: Make sure each of your <code>label</code> elements has a closing tag. - text: Each of your <code>label</code> elements should have a closing tag.
testString: assert((code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length)); testString: assert((code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length));
- text: One of your radio buttons should have the label <code>indoor</code>. - text: One of your radio buttons should have the label <code>indoor</code>.
testString: assert($("label").text().match(/indoor/gi)); testString: assert($("label").text().match(/indoor/gi));

6
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.english.md
View File

@ -45,11 +45,11 @@ tests:
testString: assert.equal($("ul li").length, 3); testString: assert.equal($("ul li").length, 3);
- text: You should have three <code>li</code> elements within your <code>ol</code> element. - text: You should have three <code>li</code> elements within your <code>ol</code> element.
testString: assert.equal($("ol li").length, 3); testString: assert.equal($("ol li").length, 3);
- text: Make sure your <code>ul</code> element has a closing tag. - text: Your <code>ul</code> element should have a closing tag.
testString: assert(code.match(/<\/ul>/g) && code.match(/<\/ul>/g).length === code.match(/<ul>/g).length); testString: assert(code.match(/<\/ul>/g) && code.match(/<\/ul>/g).length === code.match(/<ul>/g).length);
- text: Make sure your <code>ol</code> element has a closing tag. - text: Your <code>ol</code> element should have a closing tag.
testString: assert(code.match(/<\/ol>/g) && code.match(/<\/ol>/g).length === code.match(/<ol>/g).length); testString: assert(code.match(/<\/ol>/g) && code.match(/<\/ol>/g).length === code.match(/<ol>/g).length);
- text: Make sure your <code>li</code> element has a closing tag. - text: Your <code>li</code> element should have a closing tag.
testString: assert(code.match(/<\/li>/g) && code.match(/<li>/g) && code.match(/<\/li>/g).length === code.match(/<li>/g).length); testString: assert(code.match(/<\/li>/g) && code.match(/<li>/g) && code.match(/<\/li>/g).length === code.match(/<li>/g).length);
- text: The <code>li</code> elements in your unordered list should not be empty. - text: The <code>li</code> elements in your unordered list should not be empty.
testString: $('ul li').each((i, val) => assert(val.textContent.replace(/\s/g, ''))); testString: $('ul li').each((i, val) => assert(val.textContent.replace(/\s/g, '')));

6
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/delete-html-elements.english.md
View File

@ -22,11 +22,11 @@ Delete your <code>h1</code> element so we can simplify our view.
```yml ```yml
tests: tests:
- text: Delete your <code>h1</code> element. - text: Your <code>h1</code> element should be deleted.
testString: assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi)); testString: assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi));
- text: Leave your <code>h2</code> element on the page. - text: Your <code>h2</code> element should be on the page.
testString: assert(code.match(/<h2>[\w\W]*<\/h2>/gi)); testString: assert(code.match(/<h2>[\w\W]*<\/h2>/gi));
- text: Leave your <code>p</code> element on the page. - text: Your <code>p</code> element should be on the page.
testString: assert(code.match(/<p>[\w\W]*<\/p>/gi)); testString: assert(code.match(/<p>[\w\W]*<\/p>/gi));
``` ```

4
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-element.english.md
View File

@ -23,9 +23,9 @@ Add an <code>h2</code> tag that says "CatPhotoApp" to create a second HTML eleme
```yml ```yml
tests: tests:
- text: Create an <code>h2</code> element. - text: You should create an <code>h2</code> element.
testString: assert(($("h2").length > 0)); testString: assert(($("h2").length > 0));
- text: Make sure your <code>h2</code> element has a closing tag. - text: Your <code>h2</code> element should have a closing tag.
testString: assert(code.match(/<\/h2>/g) && code.match(/<\/h2>/g).length === code.match(/<h2>/g).length); testString: assert(code.match(/<\/h2>/g) && code.match(/<\/h2>/g).length === code.match(/<h2>/g).length);
- text: Your <code>h2</code> element should have the text "CatPhotoApp". - text: Your <code>h2</code> element should have the text "CatPhotoApp".
testString: assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text())); testString: assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text()));

2
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.english.md
View File

@ -28,7 +28,7 @@ tests:
testString: assert(($("p").length > 0)); testString: assert(($("p").length > 0));
- text: Your <code>p</code> element should have the text "Hello Paragraph". - text: Your <code>p</code> element should have the text "Hello Paragraph".
testString: assert.isTrue((/hello(\s)+paragraph/gi).test($("p").text())); testString: assert.isTrue((/hello(\s)+paragraph/gi).test($("p").text()));
- text: Make sure your <code>p</code> element has a closing tag. - text: Your <code>p</code> element should have a closing tag.
testString: assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length); testString: assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length);
``` ```

4
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.english.md
View File

@ -33,9 +33,9 @@ Then, create a <code>main</code> element and nest the two <code>p</code> element
```yml ```yml
tests: tests:
- text: You need 2 <code>p</code> elements with Kitty Ipsum text. - text: You should have 2 <code>p</code> elements with Kitty Ipsum text.
testString: assert($("p").length > 1); testString: assert($("p").length > 1);
- text: Make sure each of your <code>p</code> elements has a closing tag. - text: Each of your <code>p</code> elements should have a closing tag.
testString: assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length); testString: assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length);
- text: Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>. - text: Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.
testString: assert.isTrue((/Purr\s+jump\s+eat/gi).test($("p").text())); testString: assert.isTrue((/Purr\s+jump\s+eat/gi).test($("p").text()));

2
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.english.md
View File

@ -28,7 +28,7 @@ tests:
testString: assert((/cat photos/gi).test($("a").text())); testString: assert((/cat photos/gi).test($("a").text()));
- text: You need an <code>a</code> element that links to <code>http&#58;//freecatphotoapp<wbr>.com</code> - text: You need an <code>a</code> element that links to <code>http&#58;//freecatphotoapp<wbr>.com</code>
testString: assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href"))); testString: assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")));
- text: Make sure your <code>a</code> element has a closing tag. - text: Your <code>a</code> element should have a closing tag.
testString: assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length); testString: assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length);
``` ```

8
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.english.md
View File

@ -37,11 +37,11 @@ Now nest the existing <code>a</code> element within a new <code>p</code> element
```yml ```yml
tests: tests:
- text: You need an <code>a</code> element that links to "http://freecatphotoapp.com". - text: You should have an <code>a</code> element that links to "http://freecatphotoapp.com".
testString: assert(($("a[href=\"http://freecatphotoapp.com\"]").length > 0 || $("a[href=\"http://www.freecatphotoapp.com\"]").length > 0)); testString: assert(($("a[href=\"http://freecatphotoapp.com\"]").length > 0 || $("a[href=\"http://www.freecatphotoapp.com\"]").length > 0));
- text: Your <code>a</code> element should have the anchor text of "cat photos" - text: Your <code>a</code> element should have the anchor text of "cat photos"
testString: assert($("a").text().match(/cat\sphotos/gi)); testString: assert($("a").text().match(/cat\sphotos/gi));
- text: Create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code. - text: You should create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.
testString: assert($("p") && $("p").length > 2); testString: assert($("p") && $("p").length > 2);
- text: Your <code>a</code> element should be nested within your new <code>p</code> element. - text: Your <code>a</code> element should be nested within your new <code>p</code> element.
testString: assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().is("p") || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().is("p"))); testString: assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().is("p") || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().is("p")));
@ -49,9 +49,9 @@ tests:
testString: assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi) || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi))); testString: assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi) || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi)));
- text: Your <code>a</code> element should <em>not</em> have the text "View more". - text: Your <code>a</code> element should <em>not</em> have the text "View more".
testString: assert(!$("a").text().match(/View\smore/gi)); testString: assert(!$("a").text().match(/View\smore/gi));
- text: Make sure each of your <code>p</code> elements has a closing tag. - text: Each of your <code>p</code> elements should have a closing tag.
testString: assert(code.match(/<\/p>/g) && code.match(/<p/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length); testString: assert(code.match(/<\/p>/g) && code.match(/<p/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length);
- text: Make sure each of your <code>a</code> elements has a closing tag. - text: Each of your <code>a</code> elements should have a closing tag.
testString: assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length); testString: assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length);
``` ```

8
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element.english.md
View File

@ -24,13 +24,13 @@ Hint: Try putting your opening <code>div</code> tag above your "Things cats love
```yml ```yml
tests: tests:
- text: Nest your <code>p</code> elements inside your <code>div</code> element. - text: Your <code>p</code> elements should be nested inside your <code>div</code> element.
testString: assert($("div").children("p").length > 1); testString: assert($("div").children("p").length > 1);
- text: Nest your <code>ul</code> element inside your <code>div</code> element. - text: Your <code>ul</code> element should be nested inside your <code>div</code> element.
testString: assert($("div").children("ul").length > 0); testString: assert($("div").children("ul").length > 0);
- text: Nest your <code>ol</code> element inside your <code>div</code> element. - text: Your <code>ol</code> element should be nested inside your <code>div</code> element.
testString: assert($("div").children("ol").length > 0); testString: assert($("div").children("ol").length > 0);
- text: Make sure your <code>div</code> element has a closing tag. - text: Your <code>div</code> element should have a closing tag.
testString: assert(code.match(/<\/div>/g) && code.match(/<\/div>/g).length === code.match(/<div>/g).length); testString: assert(code.match(/<\/div>/g) && code.match(/<\/div>/g).length === code.match(/<div>/g).length);
``` ```

4
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.english.md
View File

@ -25,11 +25,11 @@ Once you've done this, hover over your image with your cursor. Your cursor's nor
```yml ```yml
tests: tests:
- text: Nest the existing <code>img</code> element within an <code>a</code> element. - text: The existing <code>img</code> element should be nested within an <code>a</code> element.
testString: assert($("a").children("img").length > 0); testString: assert($("a").children("img").length > 0);
- text: Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>. - text: Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.
testString: assert(new RegExp("#").test($("a").children("img").parent().attr("href"))); testString: assert(new RegExp("#").test($("a").children("img").parent().attr("href")));
- text: Make sure each of your <code>a</code> elements has a closing tag. - text: Each of your <code>a</code> elements should have a closing tag.
testString: assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length); testString: assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length);
``` ```

8
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/uncomment-html.english.md
View File

@ -23,13 +23,13 @@ Uncomment your <code>h1</code>, <code>h2</code> and <code>p</code> elements.
```yml ```yml
tests: tests:
- text: Make your <code>h1</code> element visible on your page by uncommenting it. - text: Your <code>h1</code> element should be visible on your page by uncommenting it.
testString: assert($("h1").length > 0); testString: assert($("h1").length > 0);
- text: Make your <code>h2</code> element visible on your page by uncommenting it. - text: Your <code>h2</code> element should be visible on your page by uncommenting it.
testString: assert($("h2").length > 0); testString: assert($("h2").length > 0);
- text: Make your <code>p</code> element visible on your page by uncommenting it. - text: Your <code>p</code> element should be visible on your page by uncommenting it.
testString: assert($("p").length > 0); testString: assert($("p").length > 0);
- text: Be sure to delete all trailing comment tags&#44; i.e. <code>--&#62;</code>. - text: All trailing comment tags should be deleted&#44; i.e. <code>--&#62;</code>.
testString: assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\n/g,''))); testString: assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\n/g,'')));
``` ```

2
curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.english.md
View File

@ -27,7 +27,7 @@ Add a media query, so that the <code>p</code> tag has a <code>font-size</code> o
```yml ```yml
tests: tests:
- text: Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px. - text: You should declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.
testString: assert($("style").text().replace(/\s/g ,'').match(/@media\(max-height:800px\)/g)); testString: assert($("style").text().replace(/\s/g ,'').match(/@media\(max-height:800px\)/g));
- text: Your <code>p</code> element should have a <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px. - text: Your <code>p</code> element should have a <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.
testString: assert($("style").text().replace(/\s/g ,'').match(/@media\(max-height:800px\){p{font-size:10px;?}}/g)); testString: assert($("style").text().replace(/\s/g ,'').match(/@media\(max-height:800px\){p{font-size:10px;?}}/g));