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

* 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

View File

@ -29,7 +29,7 @@ tests:
testString: assert($("button").attr("type") === "submit");
- text: Your submit button should only have the text "Submit".
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);
```

View File

@ -37,7 +37,7 @@ tests:
testString: assert($("img").length);
- 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")));
- 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,'')));
```

View File

@ -24,9 +24,9 @@ Set the <code>placeholder</code> value of your text <code>input</code> to "cat p
```yml
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);
- 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));
- text: The finished <code>input</code> element should not have a closing tag.
testString: assert(!code.match(/<input.*\/?>.*<\/input>/gi));

View File

@ -22,15 +22,15 @@ Comment out your <code>h1</code> element and your <code>p</code> element, but no
```yml
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));
- 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));
- 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));
- 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);
- 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>") );
```

View File

@ -36,11 +36,11 @@ tests:
testString: assert($("ul").length > 0);
- text: You should have three <code>li</code> elements within your <code>ul</code> element.
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);
- 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);
- text: Make sure your <code>li</code> elements dont 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);
```

View File

@ -23,11 +23,11 @@ Nest your text field inside a <code>form</code> element, and add the <code>actio
```yml
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);
- 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");
- 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);
```

View File

@ -33,7 +33,7 @@ tests:
testString: assert($('label > input[type="checkbox"]:only-child').length > 2);
- 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);
- 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);
- text: Each of your checkboxes should be added within the <code>form</code> tag.
testString: assert($('label').parent().get(0).tagName.match('FORM'));

View File

@ -42,11 +42,11 @@ Add a pair of radio buttons to your form, each nested in its own <code>label</co
tests:
- text: Your page should have two radio button elements.
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);
- 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);
- 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));
- text: One of your radio buttons should have the label <code>indoor</code>.
testString: assert($("label").text().match(/indoor/gi));

View File

@ -45,11 +45,11 @@ tests:
testString: assert.equal($("ul li").length, 3);
- text: You should have three <code>li</code> elements within your <code>ol</code> element.
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);
- 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);
- 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);
- 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, '')));

View File

@ -22,11 +22,11 @@ Delete your <code>h1</code> element so we can simplify our view.
```yml
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));
- 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));
- 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));
```

View File

@ -23,9 +23,9 @@ Add an <code>h2</code> tag that says "CatPhotoApp" to create a second HTML eleme
```yml
tests:
- text: Create an <code>h2</code> element.
- text: You should create an <code>h2</code> element.
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);
- text: Your <code>h2</code> element should have the text "CatPhotoApp".
testString: assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text()));

View File

@ -28,7 +28,7 @@ tests:
testString: assert(($("p").length > 0));
- text: Your <code>p</code> element should have the text "Hello Paragraph".
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);
```

View File

@ -33,9 +33,9 @@ Then, create a <code>main</code> element and nest the two <code>p</code> element
```yml
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);
- 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);
- 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()));

View File

@ -28,7 +28,7 @@ tests:
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>
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);
```

View File

@ -37,11 +37,11 @@ Now nest the existing <code>a</code> element within a new <code>p</code> element
```yml
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));
- text: Your <code>a</code> element should have the anchor text of "cat photos"
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);
- 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")));
@ -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)));
- text: Your <code>a</code> element should <em>not</em> have the text "View more".
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);
- 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);
```

View File

@ -24,13 +24,13 @@ Hint: Try putting your opening <code>div</code> tag above your "Things cats love
```yml
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);
- 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);
- 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);
- 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);
```

View File

@ -25,11 +25,11 @@ Once you've done this, hover over your image with your cursor. Your cursor's nor
```yml
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);
- 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")));
- 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);
```

View File

@ -23,13 +23,13 @@ Uncomment your <code>h1</code>, <code>h2</code> and <code>p</code> elements.
```yml
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);
- 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);
- 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);
- 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,'')));
```