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:
committed by
Parth Parth
parent
b663c39901
commit
9bf3fdbf38
@ -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);
|
||||
|
||||
```
|
||||
|
@ -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,'')));
|
||||
|
||||
```
|
||||
|
@ -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));
|
||||
|
@ -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>--></code>.
|
||||
- text: Each of your comments should be closed with <code>--></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>") );
|
||||
|
||||
```
|
||||
|
@ -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 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);
|
||||
```
|
||||
|
||||
|
@ -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);
|
||||
|
||||
```
|
||||
|
@ -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'));
|
||||
|
@ -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));
|
||||
|
@ -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, '')));
|
||||
|
@ -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));
|
||||
|
||||
```
|
||||
|
@ -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()));
|
||||
|
@ -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);
|
||||
|
||||
```
|
||||
|
@ -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()));
|
||||
|
@ -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://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);
|
||||
|
||||
```
|
||||
|
@ -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);
|
||||
|
||||
```
|
||||
|
@ -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);
|
||||
|
||||
```
|
||||
|
@ -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);
|
||||
|
||||
```
|
||||
|
@ -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, i.e. <code>--></code>.
|
||||
- text: All trailing comment tags should be deleted, i.e. <code>--></code>.
|
||||
testString: assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\n/g,'')));
|
||||
|
||||
```
|
||||
|
Reference in New Issue
Block a user