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

fix(challenge-md): Fix quotes that failed in the transform

Browse Source
This commit is contained in:
Bouncey
2018-10-08 01:01:53 +01:00
committed by mrugesh mohapatra
parent 392b28fa55
commit a859035023
1333 changed files with 5710 additions and 5710 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.english.md
View File

@ -25,7 +25,7 @@ Camper Cat happens to be both a coding ninja and an actual ninja, and is buildin
```yml
tests:
- text: 'Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.'
testString: 'assert($(''img'').attr(''alt''), ''Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.'');'
testString: 'assert($("img").attr("alt"), "Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.");'
```

8
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.english.md
View File

@ -25,13 +25,13 @@ Camper Cat is setting up a Mortal Kombat tournament and wants to ask his competi
```yml
tests:
- text: Your code should add one <code>input</code> tag for the date selector field.
testString: 'assert($(''input'').length == 2, ''Your code should add one <code>input</code> tag for the date selector field.'');'
testString: 'assert($("input").length == 2, "Your code should add one <code>input</code> tag for the date selector field.");'
- text: Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.
testString: 'assert($(''input'').attr(''type'') == ''date'', ''Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.'');'
testString: 'assert($("input").attr("type") == "date", "Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.");'
- text: Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.
testString: 'assert($(''input'').attr(''id'') == ''pickdate'', ''Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.'');'
testString: 'assert($("input").attr("id") == "pickdate", "Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.");'
- text: Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.
testString: 'assert($(''input'').attr(''name'') == ''date'', ''Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.'');'
testString: 'assert($("input").attr("name") == "date", "Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.");'
```

2
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.english.md
View File

@ -23,7 +23,7 @@ Camper Cat is testing different styles for an important button, but the yellow (
```yml
tests:
- text: Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.
testString: 'assert($(''button'').css(''color'') == ''rgb(0, 51, 102)'', ''Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.'');'
testString: 'assert($("button").css("color") == "rgb(0, 51, 102)", "Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.english.md
View File

@ -24,9 +24,9 @@ Camper Cat is experimenting with using color for his blog text and background, b
```yml
tests:
- text: Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.
testString: 'assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi), ''Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.'');'
testString: 'assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi), "Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.");'
- text: Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.
testString: 'assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi), ''Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.'');'
testString: 'assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi), "Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.");'
```

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

@ -22,9 +22,9 @@ The link text that Camper Cat is using is not very descriptive without the surro
```yml
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".
testString: 'assert($(''a'').text().match(/^(information about batteries)$/g), ''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), "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: Make sure your <code>a</code> element has a closing tag.
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(''''|"")>/g).length, ''Make sure your <code>a</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(""|"")>/g).length, "Make sure your <code>a</code> element has a closing tag.");'
```

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

@ -26,19 +26,19 @@ Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax),
```yml
tests:
- text: Your code should have one <code>audio</code> tag.
testString: 'assert($(''audio'').length === 1, ''Your code should have one <code>audio</code> tag.'');'
testString: 'assert($("audio").length === 1, "Your code should have one <code>audio</code> tag.");'
- text: Make sure your <code>audio</code> element has a closing tag.
testString: 'assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g), ''Make sure your <code>audio</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g), "Make sure your <code>audio</code> element has a closing tag.");'
- text: The <code>audio</code> tag should have the <code>controls</code> attribute.
testString: 'assert($(''audio'').attr(''controls''), ''The <code>audio</code> tag should have the <code>controls</code> attribute.'');'
testString: 'assert($("audio").attr("controls"), "The <code>audio</code> tag should have the <code>controls</code> attribute.");'
- text: Your code should have one <code>source</code> tag.
testString: 'assert($(''source'').length === 1, ''Your code should have one <code>source</code> tag.'');'
testString: 'assert($("source").length === 1, "Your code should have one <code>source</code> tag.");'
- text: Your <code>source</code> tag should be inside the <code>audio</code> tags.
testString: 'assert($(''audio'').children(''source'').length === 1, ''Your <code>source</code> tag should be inside the <code>audio</code> tags.'');'
testString: 'assert($("audio").children("source").length === 1, "Your <code>source</code> tag should be inside the <code>audio</code> tags.");'
- text: The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.
testString: 'assert($(''source'').attr(''src'') === ''https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'', ''The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.'');'
testString: 'assert($("source").attr("src") === "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3", "The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.");'
- text: Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.
testString: 'assert($(''source'').attr(''type'') === ''audio/mpeg'', ''Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.'');'
testString: 'assert($("source").attr("type") === "audio/mpeg", "Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.");'
```

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

@ -24,17 +24,17 @@ Camper Cat is hard at work creating a stacked bar chart showing the amount of ti
```yml
tests:
- text: Your code should have one <code>figure</code> tag.
testString: 'assert($(''figure'').length == 1, ''Your code should have one <code>figure</code> tag.'');'
testString: 'assert($("figure").length == 1, "Your code should have one <code>figure</code> tag.");'
- text: Your code should have one <code>figcaption</code> tag.
testString: 'assert($(''figcaption'').length == 1, ''Your code should have one <code>figcaption</code> tag.'');'
testString: 'assert($("figcaption").length == 1, "Your code should have one <code>figcaption</code> tag.");'
- text: Your code should not have any <code>div</code> tags.
testString: 'assert($(''div'').length == 0, ''Your code should not have any <code>div</code> tags.'');'
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
- text: Your code should not have any <code>p</code> tags.
testString: 'assert($(''p'').length == 0, ''Your code should not have any <code>p</code> tags.'');'
testString: 'assert($("p").length == 0, "Your code should not have any <code>p</code> tags.");'
- text: The <code>figcaption</code> should be a child of the <code>figure</code> tag.
testString: 'assert($(''figure'').children(''figcaption'').length == 1, ''The <code>figcaption</code> should be a child of the <code>figure</code> tag.'');'
testString: 'assert($("figure").children("figcaption").length == 1, "The <code>figcaption</code> should be a child of the <code>figure</code> tag.");'
- text: Make sure your <code>figure</code> element has a closing tag.
testString: 'assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length, ''Make sure your <code>figure</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length, "Make sure your <code>figure</code> element has a closing tag.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.english.md
View File

@ -25,9 +25,9 @@ Camper Cat expects a lot of interest in his thoughtful blog posts, and wants to
```yml
tests:
- text: Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.
testString: 'assert($(''label'').attr(''for''), ''Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.'');'
testString: 'assert($("label").attr("for"), "Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.");'
- text: Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.
testString: 'assert($(''label'').attr(''for'') == ''email'', ''Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.'');'
testString: 'assert($("label").attr("for") == "email", "Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.english.md
View File

@ -22,9 +22,9 @@ Camper Cat's choice of light gray text on a white background for his recent blog
```yml
tests:
- text: Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.
testString: 'assert($(''body'').css(''color'') == ''rgb(99, 99, 99)'', ''Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.'');'
testString: 'assert($("body").css("color") == "rgb(99, 99, 99)", "Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.");'
- text: Your code should not change the <code>background-color</code> for the <code>body</code>.
testString: 'assert($(''body'').css(''background-color'') == ''rgb(255, 255, 255)'', ''Your code should not change the <code>background-color</code> for the <code>body</code>.'');'
testString: 'assert($("body").css("background-color") == "rgb(255, 255, 255)", "Your code should not change the <code>background-color</code> for the <code>body</code>.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.english.md
View File

@ -24,9 +24,9 @@ Camper Cat has some big ideas for his ninja weapons page. Help him set up his ma
```yml
tests:
- text: Your code should have one <code>main</code> tag.
testString: 'assert($(''main'').length == 1, ''Your code should have one <code>main</code> tag.'');'
testString: 'assert($("main").length == 1, "Your code should have one <code>main</code> tag.");'
- text: The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.
testString: 'assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi), ''The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.'');'
testString: 'assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi), "The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.english.md
View File

@ -25,9 +25,9 @@ Camper Cat has coded a skeleton page for the blog part of his website. He's plan
```yml
tests:
- text: Your <code>img</code> tag should have an <code>alt</code> attribute.
testString: 'assert(!($(''img'').attr(''alt'') == undefined), ''Your <code>img</code> tag should have an <code>alt</code> attribute.'');'
testString: 'assert(!($("img").attr("alt") == undefined), "Your <code>img</code> tag should have an <code>alt</code> attribute.");'
- text: The <code>alt</code> attribute should be set to an empty string.
testString: 'assert($(''img'').attr(''alt'') == '''', ''The <code>alt</code> attribute should be set to an empty string.'');'
testString: 'assert($("img").attr("alt") == "", "The <code>alt</code> attribute should be set to an empty string.");'
```

8
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.english.md
View File

@ -29,13 +29,13 @@ Camper Cat created a really cool stacked bar chart for his training page, and pu
```yml
tests:
- text: Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.
testString: 'assert($(''.sr-only'').css(''position'') == ''absolute'', ''Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.'');'
testString: 'assert($(".sr-only").css("position") == "absolute", "Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.");'
- text: Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.
testString: 'assert($(''.sr-only'').css(''left'') == ''-10000px'', ''Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.'');'
testString: 'assert($(".sr-only").css("left") == "-10000px", "Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.");'
- text: Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.
testString: 'assert(code.match(/width:\s*?1px/gi), ''Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.'');'
testString: 'assert(code.match(/width:\s*?1px/gi), "Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.");'
- text: Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.
testString: 'assert(code.match(/height:\s*?1px/gi), ''Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.'');'
testString: 'assert(code.match(/height:\s*?1px/gi), "Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.");'
```

8
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-links-navigatable-with-html-access-keys.english.md
View File

@ -24,13 +24,13 @@ Camper Cat wants the links around the two blog article titles to have keyboard s
```yml
tests:
- text: Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "first".
testString: 'assert($(''#first'').attr(''accesskey''), ''Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "first".'');'
testString: 'assert($("#first").attr("accesskey"), "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "first".");'
- text: Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "second".
testString: 'assert($(''#second'').attr(''accesskey''), ''Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "second".'');'
testString: 'assert($("#second").attr("accesskey"), "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "second".");'
- text: Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "first" to "g". Note that case matters.
testString: 'assert($(''#first'').attr(''accesskey'') == ''g'', ''Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "first" to "g". Note that case matters.'');'
testString: 'assert($("#first").attr("accesskey") == "g", "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "first" to "g". Note that case matters.");'
- text: Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "second" to "c". Note that case matters.
testString: 'assert($(''#second'').attr(''accesskey'') == ''c'', ''Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "second" to "c". Note that case matters.'');'
testString: 'assert($("#second").attr("accesskey") == "c", "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "second" to "c". Note that case matters.");'
```

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

@ -21,11 +21,11 @@ Camper Cat's training page is making good progress. Change the <code>div</code>
```yml
tests:
- text: Your code should have one <code>footer</code> tag.
testString: 'assert($(''footer'').length == 1, ''Your code should have one <code>footer</code> tag.'');'
testString: 'assert($("footer").length == 1, "Your code should have one <code>footer</code> tag.");'
- text: Your code should not have any <code>div</code> tags.
testString: 'assert($(''div'').length == 0, ''Your code should not have any <code>div</code> tags.'');'
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
- text: Your code should have an opening and closing <code>footer</code> tag.
testString: 'assert(code.match(/<footer>\s*&copy; 2018 Camper Cat\s*<\/footer>/g), ''Your code should have an opening and closing <code>footer</code> tag.'');'
testString: 'assert(code.match(/<footer>\s*&copy; 2018 Camper Cat\s*<\/footer>/g), "Your code should have an opening and closing <code>footer</code> tag.");'
```

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

@ -23,13 +23,13 @@ Camper Cat is writing some great articles about ninja training, and wants to add
```yml
tests:
- text: Your code should have one <code>header</code> tag.
testString: 'assert($(''header'').length == 1, ''Your code should have one <code>header</code> tag.'');'
testString: 'assert($("header").length == 1, "Your code should have one <code>header</code> tag.");'
- text: Your <code>header</code> tags should wrap around the <code>h1</code>.
testString: 'assert($(''header'').children(''h1'').length == 1, ''Your <code>header</code> tags should wrap around the <code>h1</code>.'');'
testString: 'assert($("header").children("h1").length == 1, "Your <code>header</code> tags should wrap around the <code>h1</code>.");'
- text: Your code should not have any <code>div</code> tags.
testString: 'assert($(''div'').length == 0, ''Your code should not have any <code>div</code> tags.'');'
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
- text: Make sure your <code>header</code> element has a closing tag.
testString: 'assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length, ''Make sure your <code>header</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length, "Make sure your <code>header</code> element has a closing tag.");'
```

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

@ -22,13 +22,13 @@ Camper Cat included navigation links at the top of his training page, but wrappe
```yml
tests:
- text: Your code should have one <code>nav</code> tag.
testString: 'assert($(''nav'').length == 1, ''Your code should have one <code>nav</code> tag.'');'
testString: 'assert($("nav").length == 1, "Your code should have one <code>nav</code> tag.");'
- text: Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.
testString: 'assert($(''nav'').children(''ul'').length == 1, ''Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.'');'
testString: 'assert($("nav").children("ul").length == 1, "Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.");'
- text: Your code should not have any <code>div</code> tags.
testString: 'assert($(''div'').length == 0, ''Your code should not have any <code>div</code> tags.'');'
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
- text: Make sure your <code>nav</code> element has a closing tag.
testString: 'assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length, ''Make sure your <code>nav</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length, "Make sure your <code>nav</code> element has a closing tag.");'
```

8
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.english.md
View File

@ -23,13 +23,13 @@ Camper Cat's Mortal Kombat survey results are in! Wrap a <code>time</code> tag a
```yml
tests:
- text: 'Your <code>time</code> tags should wrap around the text "Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;".'
testString: 'assert($(''time'').text().match(/Thursday, September 15th/g), ''Your <code>time</code> tags should wrap around the text "Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;".'');'
testString: 'assert($("time").text().match(/Thursday, September 15th/g), "Your <code>time</code> tags should wrap around the text "Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;".");'
- text: Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.
testString: 'assert($(''time'').attr(''datetime''), ''Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.'');'
testString: 'assert($("time").attr("datetime"), "Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.");'
- text: Your <code>datetime</code> attribute should be set to a value of 2016-09-15.
testString: 'assert($(''time'').attr(''datetime'') === "2016-09-15", ''Your <code>datetime</code> attribute should be set to a value of 2016-09-15.'');'
testString: 'assert($("time").attr("datetime") === "2016-09-15", "Your <code>datetime</code> attribute should be set to a value of 2016-09-15.");'
- text: Make sure your <code>time</code> element has a closing tag.
testString: 'assert(code.match(/<\/time>/g) && code.match(/<\/time>/g).length === 4, ''Make sure your <code>time</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/time>/g) && code.match(/<\/time>/g).length === 4, "Make sure your <code>time</code> element has a closing tag.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.english.md
View File

@ -26,9 +26,9 @@ Camper Cat wants a page on his site dedicated to becoming a ninja. Help him fix
```yml
tests:
- text: Your code should have six <code>h3</code> tags.
testString: 'assert($(''h3'').length === 6, ''Your code should have six <code>h3</code> tags.'');'
testString: 'assert($("h3").length === 6, "Your code should have six <code>h3</code> tags.");'
- text: Your code should not have any <code>h5</code> tags.
testString: 'assert($(''h5'').length === 0, ''Your code should not have any <code>h5</code> tags.'');'
testString: 'assert($("h5").length === 0, "Your code should not have any <code>h5</code> tags.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.english.md
View File

@ -24,9 +24,9 @@ Camper Cat created a new survey to collect information about his users. He knows
```yml
tests:
- text: Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.
testString: 'assert($(''p'').attr(''tabindex''), ''Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.'');'
testString: 'assert($("p").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.");'
- text: Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.
testString: 'assert($(''p'').attr(''tabindex'') == ''0'', ''Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.'');'
testString: 'assert($("p").attr("tabindex") == "0", "Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.");'
```

8
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.english.md
View File

@ -26,13 +26,13 @@ Camper Cat has a search field on his Inspirational Quotes page that he plans to
```yml
tests:
- text: Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.
testString: 'assert($(''#search'').attr(''tabindex''), ''Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.'');'
testString: 'assert($("#search").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.");'
- text: Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.
testString: 'assert($(''#submit'').attr(''tabindex''), ''Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.'');'
testString: 'assert($("#submit").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.");'
- text: Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.
testString: 'assert($(''#search'').attr(''tabindex'') == ''1'', ''Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.'');'
testString: 'assert($("#search").attr("tabindex") == "1", "Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.");'
- text: Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.
testString: 'assert($(''#submit'').attr(''tabindex'') == ''2'', ''Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.'');'
testString: 'assert($("#submit").attr("tabindex") == "2", "Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.english.md
View File

@ -25,9 +25,9 @@ Camper Cat used <code>article</code> tags to wrap the posts on his blog page, bu
```yml
tests:
- text: Your code should have three <code>article</code> tags.
testString: 'assert($(''article'').length == 3, ''Your code should have three <code>article</code> tags.'');'
testString: 'assert($("article").length == 3, "Your code should have three <code>article</code> tags.");'
- text: Your code should not have any <code>div</code> tags.
testString: 'assert($(''div'').length == 0, ''Your code should not have any <code>div</code> tags.'');'
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
```

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

@ -25,15 +25,15 @@ Camper Cat wants information about the ninja level of his users when they sign u
```yml
tests:
- text: Your code should have a <code>fieldset</code> tag around the radio button set.
testString: 'assert($(''fieldset'').length == 1, ''Your code should have a <code>fieldset</code> tag around the radio button set.'');'
testString: 'assert($("fieldset").length == 1, "Your code should have a <code>fieldset</code> tag around the radio button set.");'
- text: Make sure your <code>fieldset</code> element has a closing tag.
testString: 'assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length, ''Make sure your <code>fieldset</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length, "Make sure your <code>fieldset</code> element has a closing tag.");'
- 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, ''Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.'');'
testString: 'assert($("legend").length == 1, "Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.");'
- text: Your code should not have any <code>div</code> tags.
testString: 'assert($(''div'').length == 0, ''Your code should not have any <code>div</code> tags.'');'
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
- text: Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.
testString: 'assert($(''p'').length == 4, ''Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.'');'
testString: 'assert($("p").length == 4, "Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.english.md
View File

@ -24,9 +24,9 @@ The element now has an id of <code>thumbnail</code>. With this selector, use the
```yml
tests:
- text: Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.
testString: 'assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g), ''Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.'');'
testString: 'assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g), "Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.");'
- text: You should use the given CSS for the <code>box-shadow</code> value.
testString: 'assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\),\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi), ''You should use the given CSS for the <code>box-shadow</code> value.'');'
testString: 'assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\),\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi), "You should use the given CSS for the <code>box-shadow</code> value.");'
```

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.english.md
View File

@ -25,11 +25,11 @@ Also for the <code>h4</code>, remove the <code>height</code> property and add <c
```yml
tests:
- text: 'Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.'
testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), ''Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.'');'
testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), "Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.");'
- text: Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.
testString: 'assert($(''h4'').css(''padding-top'') == ''10px'' && $(''h4'').css(''padding-right'') == ''10px'' && $(''h4'').css(''padding-bottom'') == ''10px'' && $(''h4'').css(''padding-left'') == ''10px'', ''Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.'');'
testString: 'assert($("h4").css("padding-top") == "10px" && $("h4").css("padding-right") == "10px" && $("h4").css("padding-bottom") == "10px" && $("h4").css("padding-left") == "10px", "Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.");'
- text: The <code>height</code> property on the <code>h4</code> element should be removed.
testString: 'assert(!($(''h4'').css(''height'') == ''25px''), ''The <code>height</code> property on the <code>h4</code> element should be removed.'');'
testString: 'assert(!($("h4").css("height") == "25px"), "The <code>height</code> property on the <code>h4</code> element should be removed.");'
```

8
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.english.md
View File

@ -21,13 +21,13 @@ This page will use a shade of teal (<code>#09A7A1</code>) as the dominant color,
```yml
tests:
- text: 'The <code>header</code> element should have a <code>background-color</code> of #09A7A1.'
testString: 'assert($(''header'').css(''background-color'') == ''rgb(9, 167, 161)'', ''The <code>header</code> element should have a <code>background-color</code> of #09A7A1.'');'
testString: 'assert($("header").css("background-color") == "rgb(9, 167, 161)", "The <code>header</code> element should have a <code>background-color</code> of #09A7A1.");'
- text: 'The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.'
testString: 'assert($(''footer'').css(''background-color'') == ''rgb(9, 167, 161)'', ''The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.'');'
testString: 'assert($("footer").css("background-color") == "rgb(9, 167, 161)", "The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.");'
- text: 'The <code>h2</code> element should have a <code>color</code> of #09A7A1.'
testString: 'assert($(''h2'').css(''color'') == ''rgb(9, 167, 161)'', ''The <code>h2</code> element should have a <code>color</code> of #09A7A1.'');'
testString: 'assert($("h2").css("color") == "rgb(9, 167, 161)", "The <code>h2</code> element should have a <code>color</code> of #09A7A1.");'
- text: 'The <code>button</code> element should have a <code>background-color</code> of #FF790E.'
testString: 'assert($(''button'').css(''background-color'') == ''rgb(255, 121, 14)'', ''The <code>button</code> element should have a <code>background-color</code> of #FF790E.'');'
testString: 'assert($("button").css("background-color") == "rgb(255, 121, 14)", "The <code>button</code> element should have a <code>background-color</code> of #FF790E.");'
```

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.english.md
View File

@ -22,7 +22,7 @@ Add a <code>height</code> property to the <code>h4</code> tag and set it to 25px
```yml
tests:
- text: Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.
testString: 'assert($(''h4'').css(''height'') == ''25px'', ''Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.'');'
testString: 'assert($("h4").css("height") == "25px", "Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.english.md
View File

@ -23,9 +23,9 @@ The code editor has a CSS rule to style all <code>a</code> tags black. Add a rul
```yml
tests:
- text: 'The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.'
testString: 'assert($(''a'').css(''color'') == ''rgb(0, 0, 0)'', ''The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.'');'
testString: 'assert($("a").css("color") == "rgb(0, 0, 0)", "The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.");'
- text: The anchor tag should have a <code>color</code> of blue on hover.
testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), ''The anchor tag should have a <code>color</code> of blue on hover.'');'
testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), "The anchor tag should have a <code>color</code> of blue on hover.");'
```

12
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.english.md
View File

@ -26,17 +26,17 @@ Change the <code>background-color</code> of each <code>div</code> element based
```yml
tests:
- text: Your code should use the <code>hsl()</code> property to declare the color green.
testString: 'assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), ''Your code should use the <code>hsl()</code> property to declare the color green.'');'
testString: 'assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color green.");'
- text: Your code should use the <code>hsl()</code> property to declare the color cyan.
testString: 'assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), ''Your code should use the <code>hsl()</code> property to declare the color cyan.'');'
testString: 'assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color cyan.");'
- text: Your code should use the <code>hsl()</code> property to declare the color blue.
testString: 'assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), ''Your code should use the <code>hsl()</code> property to declare the color blue.'');'
testString: 'assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color blue.");'
- text: The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.
testString: 'assert($(''.green'').css(''background-color'') == ''rgb(0, 255, 0)'', ''The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.'');'
testString: 'assert($(".green").css("background-color") == "rgb(0, 255, 0)", "The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.");'
- text: The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.
testString: 'assert($(''.cyan'').css(''background-color'') == ''rgb(0, 255, 255)'', ''The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.'');'
testString: 'assert($(".cyan").css("background-color") == "rgb(0, 255, 255)", "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.");'
- text: The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.
testString: 'assert($(''.blue'').css(''background-color'') == ''rgb(0, 0, 255)'', ''The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.'');'
testString: 'assert($(".blue").css("background-color") == "rgb(0, 0, 255)", "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.");'
```

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.english.md
View File

@ -21,7 +21,7 @@ To make the heading significantly larger than the paragraph, change the <code>fo
```yml
tests:
- text: Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.
testString: 'assert($(''h4'').css(''font-size'') == ''27px'', ''Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.'');'
testString: 'assert($("h4").css("font-size") == "27px", "Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.");'
```

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.english.md
View File

@ -21,7 +21,7 @@ The navigation bar on this site currently inherits its <code>background-color</c
```yml
tests:
- text: The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.
testString: 'assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi), ''The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.'');'
testString: 'assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi), "The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.");'
```

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.english.md
View File

@ -22,7 +22,7 @@ Add a <code>width</code> property to the entire card and set it to an absolute v
```yml
tests:
- text: Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.
testString: 'assert(code.match(/.fullCard\s*{[\s\S][^}]*\n*^\s*width\s*:\s*245px\s*;/gm), ''Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.'');'
testString: 'assert(code.match(/.fullCard\s*{[\s\S][^}]*\n*^\s*width\s*:\s*245px\s*;/gm), "Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.");'
```

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.english.md
View File

@ -22,7 +22,7 @@ Alter the animation rate for the element with the class name of <code>star-1</co
```yml
tests:
- text: The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.
testString: 'assert(code.match(/twinkle-1\s*?{\s*?50%/g), ''The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.'');'
testString: 'assert(code.match(/twinkle-1\s*?{\s*?50%/g), "The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.");'
```

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.english.md
View File

@ -23,7 +23,7 @@ To keep the ball bouncing on the right on a continuous loop, change the <code>an
```yml
tests:
- text: The <code>animation-iteration-count</code> property should have a value of infinite.
testString: 'assert($(''#ball'').css(''animation-iteration-count'') == ''infinite'', ''The <code>animation-iteration-count</code> property should have a value of infinite.'');'
testString: 'assert($("#ball").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property should have a value of infinite.");'
```

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.english.md
View File

@ -22,11 +22,11 @@ Set the <code>animation-duration</code> of the elements with the classes <code>s
```yml
tests:
- text: The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.
testString: 'assert($(''.star-1'').css(''animation-duration'') == ''1s'', ''The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.'');'
testString: 'assert($(".star-1").css("animation-duration") == "1s", "The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.");'
- text: The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.
testString: 'assert($(''.star-2'').css(''animation-duration'') == ''0.9s'', ''The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.'');'
testString: 'assert($(".star-2").css("animation-duration") == "0.9s", "The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.");'
- text: The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.
testString: 'assert($(''.star-3'').css(''animation-duration'') == ''1.1s'', ''The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.'');'
testString: 'assert($(".star-3").css("animation-duration") == "1.1s", "The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.");'
```

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.english.md
View File

@ -22,7 +22,7 @@ Center the <code>div</code> on the page by adding a <code>margin</code> property
```yml
tests:
- text: The <code>div</code> should have a <code>margin</code> set to auto.
testString: 'assert(code.match(/margin:\s*?auto;/g), ''The <code>div</code> should have a <code>margin</code> set to auto.'');'
testString: 'assert(code.match(/margin:\s*?auto;/g), "The <code>div</code> should have a <code>margin</code> set to auto.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.english.md
View File

@ -25,9 +25,9 @@ Change the <code>position</code> of the <code>h2</code> to <code>relative</code>
```yml
tests:
- text: The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.
testString: 'assert($(''h2'').css(''position'') == ''relative'', ''The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.'');'
testString: 'assert($("h2").css("position") == "relative", "The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.");'
- text: Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.
testString: 'assert($(''h2'').css(''top'') == ''15px'', ''Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.'');'
testString: 'assert($("h2").css("top") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.english.md
View File

@ -22,9 +22,9 @@ For the elements with id of <code>ball1</code> and <code>ball2</code>, add an <c
```yml
tests:
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.
testString: 'assert($(''#ball1'').css(''animation-timing-function'') == ''linear'', ''The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.'');'
testString: 'assert($("#ball1").css("animation-timing-function") == "linear", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.");'
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.
testString: 'assert($(''#ball2'').css(''animation-timing-function'') == ''ease-out'', ''The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.'');'
testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.");'
```

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.english.md
View File

@ -21,7 +21,7 @@ Add a <code>z-index</code> property to the element with the class name of <code>
```yml
tests:
- text: The element with class <code>first</code> should have a <code>z-index</code> value of 2.
testString: 'assert($(''.first'').css(''z-index'') == ''2'', ''The element with class <code>first</code> should have a <code>z-index</code> value of 2.'');'
testString: 'assert($(".first").css("z-index") == "2", "The element with class <code>first</code> should have a <code>z-index</code> value of 2.");'
```

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.english.md
View File

@ -26,7 +26,7 @@ Use a <code>linear-gradient()</code> for the <code>div</code> element's <code>ba
```yml
tests:
- text: The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.
testString: 'assert(code.match(/background:\s*?linear-gradient\(35deg,\s*?(#CCFFFF|#CFF),\s*?(#FFCCCC|#FCC)\);/gi), ''The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.'');'
testString: 'assert(code.match(/background:\s*?linear-gradient\(35deg,\s*?(#CCFFFF|#CFF),\s*?(#FFCCCC|#FCC)\);/gi), "The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.");'
```

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.english.md
View File

@ -24,11 +24,11 @@ Manipulate the square element in the editor to create the moon shape. First, cha
```yml
tests:
- text: The value of the <code>background-color</code> property should be set to <code>transparent</code>.
testString: 'assert(code.match(/background-color:\s*?transparent;/gi), ''The value of the <code>background-color</code> property should be set to <code>transparent</code>.'');'
testString: 'assert(code.match(/background-color:\s*?transparent;/gi), "The value of the <code>background-color</code> property should be set to <code>transparent</code>.");'
- text: The value of the <code>border-radius</code> property should be set to <code>50%</code>.
testString: 'assert(code.match(/border-radius:\s*?50%;/gi), ''The value of the <code>border-radius</code> property should be set to <code>50%</code>.'');'
testString: 'assert(code.match(/border-radius:\s*?50%;/gi), "The value of the <code>border-radius</code> property should be set to <code>50%</code>.");'
- text: 'The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.'
testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), ''The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.'');'
testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), "The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.english.md
View File

@ -22,9 +22,9 @@ Add an <code>hr</code> tag underneath the <code>h4</code> which contains the car
```yml
tests:
- text: Your code should add an <code>hr</code> tag to the markup.
testString: 'assert($(''hr'').length == 1, ''Your code should add an <code>hr</code> tag to the markup.'');'
testString: 'assert($("hr").length == 1, "Your code should add an <code>hr</code> tag to the markup.");'
- text: The <code>hr</code> tag should come between the title and the paragraph.
testString: 'assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi), ''The <code>hr</code> tag should come between the title and the paragraph.'');'
testString: 'assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi), "The <code>hr</code> tag should come between the title and the paragraph.");'
```

8
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.english.md
View File

@ -26,13 +26,13 @@ Finally, in the <code>heart::before</code> selector, set its <code>content</code
```yml
tests:
- text: 'The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.'
testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), ''The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.'');'
testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), "The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.");'
- text: 'The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.'
testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, ''The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.'');'
testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, "The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.");'
- text: The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.
testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), ''The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.'');'
testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), "The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.");'
- text: 'The <code>content</code> of the <code>heart::before</code> selector should be an empty string.'
testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|'')\1\s*?;/gi), ''The <code>content</code> of the <code>heart::before</code> selector should be an empty string.'');'
testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|")\1\s*?;/gi), "The <code>content</code> of the <code>heart::before</code> selector should be an empty string.");'
```

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.english.md
View File

@ -23,11 +23,11 @@ Add a horizontal motion to the <code>div</code> animation. Using the <code>left<
```yml
tests:
- text: The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi), ''The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.'');'
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi), "The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.");'
- text: The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), ''The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.'');'
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), "The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.");'
- text: The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi), ''The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.'');'
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi), "The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.");'
```

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.english.md
View File

@ -21,7 +21,7 @@ Using the url of <code>https://i.imgur.com/MJAkxbh.png</code>, set the <code>bac
```yml
tests:
- text: Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.
testString: 'assert(code.match(/background:\s*?url\(\s*("|''|)https:\/\/i\.imgur\.com\/MJAkxbh\.png\1\s*\)/gi), ''Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.'');'
testString: 'assert(code.match(/background:\s*?url\(\s*("|"|)https:\/\/i\.imgur\.com\/MJAkxbh\.png\1\s*\)/gi), "Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.english.md
View File

@ -26,9 +26,9 @@ Align the <code>h4</code> tag's text, which says "Google", to the center. Then j
```yml
tests:
- text: Your code should use the text-align property on the <code>h4</code> tag to set it to center.
testString: 'assert($(''h4'').css(''text-align'') == ''center'', ''Your code should use the text-align property on the <code>h4</code> tag to set it to center.'');'
testString: 'assert($("h4").css("text-align") == "center", "Your code should use the text-align property on the <code>h4</code> tag to set it to center.");'
- text: Your code should use the text-align property on the <code>p</code> tag to set it to justify.
testString: 'assert($(''p'').css(''text-align'') == ''justify'', ''Your code should use the text-align property on the <code>p</code> tag to set it to justify.'');'
testString: 'assert($("p").css("text-align") == "justify", "Your code should use the text-align property on the <code>p</code> tag to set it to justify.");'
```

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.english.md
View File

@ -22,7 +22,7 @@ Target the element with the id of <code>ball</code> and add the <code>opacity</c
```yml
tests:
- text: The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.
testString: 'assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi), ''The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.'');'
testString: 'assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi), "The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.");'
```

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.english.md
View File

@ -23,7 +23,7 @@ Set the <code>opacity</code> of the anchor tags to 0.7 using <code>links</code>
```yml
tests:
- text: Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.
testString: 'assert.approximately(parseFloat($(''.links'').css(''opacity'')), 0.7, 0.1, ''Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.'');'
testString: 'assert.approximately(parseFloat($(".links").css("opacity")), 0.7, 0.1, "Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.english.md
View File

@ -27,9 +27,9 @@ Change the <code>background-color</code> property of the <code>blue</code> and <
```yml
tests:
- text: The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.
testString: 'assert($(''.blue'').css(''background-color'') == ''rgb(0, 0, 255)'', ''The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.'');'
testString: 'assert($(".blue").css("background-color") == "rgb(0, 0, 255)", "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.");'
- text: The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.
testString: 'assert($(''.yellow'').css(''background-color'') == ''rgb(255, 255, 0)'', ''The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.'');'
testString: 'assert($(".yellow").css("background-color") == "rgb(255, 255, 0)", "The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.");'
```

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.english.md
View File

@ -25,11 +25,11 @@ Change the <code>background-color</code> property of the <code>orange</code>, <c
```yml
tests:
- text: The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.
testString: 'assert($(''.orange'').css(''background-color'') == ''rgb(255, 125, 0)'', ''The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.'');'
testString: 'assert($(".orange").css("background-color") == "rgb(255, 125, 0)", "The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.");'
- text: The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.
testString: 'assert($(''.cyan'').css(''background-color'') == ''rgb(0, 255, 255)'', ''The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.'');'
testString: 'assert($(".cyan").css("background-color") == "rgb(0, 255, 255)", "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.");'
- text: The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.
testString: 'assert($(''.raspberry'').css(''background-color'') == ''rgb(255, 0, 125)'', ''The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.'');'
testString: 'assert($(".raspberry").css("background-color") == "rgb(255, 0, 125)", "The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.english.md
View File

@ -25,9 +25,9 @@ For the element with the id of <code>ball1</code>, change the value of the <code
```yml
tests:
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.
testString: 'assert($(''#ball1'').css(''animation-timing-function'') == ''cubic-bezier(0.25, 0.25, 0.75, 0.75)'', ''The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.'');'
testString: 'assert($("#ball1").css("animation-timing-function") == "cubic-bezier(0.25, 0.25, 0.75, 0.75)", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.");'
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.
testString: 'assert($(''#ball2'').css(''animation-timing-function'') == ''ease-out'', ''The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.'');'
testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.");'
```

12
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.english.md
View File

@ -26,17 +26,17 @@ Create an animation for the element with the id <code>rect</code>, by setting th
```yml
tests:
- text: The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.
testString: 'assert($(''#rect'').css(''animation-name'') == ''rainbow'', ''The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.'');'
testString: 'assert($("#rect").css("animation-name") == "rainbow", "The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.");'
- text: The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.
testString: 'assert($(''#rect'').css(''animation-duration'') == ''4s'', ''The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.'');'
testString: 'assert($("#rect").css("animation-duration") == "4s", "The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.");'
- text: The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.
testString: 'assert(code.match(/@keyframes\s+?rainbow\s*?{/g), ''The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.'');'
testString: 'assert(code.match(/@keyframes\s+?rainbow\s*?{/g), "The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.");'
- text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), ''The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.'');'
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.");'
- text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), ''The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.'');'
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.");'
- text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), ''The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.'');'
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.");'
```

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.english.md
View File

@ -22,11 +22,11 @@ Lock the <code>#searchbar</code> element to the top-right of its <code>section</
```yml
tests:
- text: 'The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.'
testString: 'assert($(''#searchbar'').css(''position'') == ''absolute'', ''The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.'');'
testString: 'assert($("#searchbar").css("position") == "absolute", "The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.");'
- text: 'Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.'
testString: 'assert($(''#searchbar'').css(''top'') == ''50px'', ''Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.'');'
testString: 'assert($("#searchbar").css("top") == "50px", "Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
- text: 'Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.'
testString: 'assert($(''#searchbar'').css(''right'') == ''50px'', ''Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.'');'
testString: 'assert($("#searchbar").css("right") == "50px", "Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
```

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.english.md
View File

@ -22,11 +22,11 @@ The navigation bar in the code is labeled with an id of <code>navbar</code>. Cha
```yml
tests:
- text: 'The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.'
testString: 'assert($(''#navbar'').css(''position'') == ''fixed'', ''The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.'');'
testString: 'assert($("#navbar").css("position") == "fixed", "The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.");'
- text: 'Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.'
testString: 'assert($(''#navbar'').css(''top'') == ''0px'', ''Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.'');'
testString: 'assert($("#navbar").css("top") == "0px", "Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");'
- text: 'Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.'
testString: 'assert($(''#navbar'').css(''left'') == ''0px'', ''Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.'');'
testString: 'assert($("#navbar").css("left") == "0px", "Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.english.md
View File

@ -22,9 +22,9 @@ Keep the heart beating by adding the <code>animation-iteration-count</code> prop
```yml
tests:
- text: The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.
testString: 'assert($(''.heart'').css(''animation-iteration-count'') == ''infinite'', ''The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.'');'
testString: 'assert($(".heart").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.");'
- text: The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.
testString: 'assert($(''.back'').css(''animation-iteration-count'') == ''infinite'', ''The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.'');'
testString: 'assert($(".back").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.");'
```

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.english.md
View File

@ -25,7 +25,7 @@ Change value of the <code>animation-timing-function</code> of the element with t
```yml
tests:
- text: 'The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.'
testString: 'assert($(''#green'').css(''animation-timing-function'') == ''cubic-bezier(0.311, 0.441, 0.444, 1.649)'', ''The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.'');'
testString: 'assert($("#green").css("animation-timing-function") == "cubic-bezier(0.311, 0.441, 0.444, 1.649)", "The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, #{{TEXT}}'
```

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.english.md
View File

@ -23,7 +23,7 @@ Set the <code>animation-fill-mode</code> property of <code>button:hover</code> t
```yml
tests:
- text: '<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.'
testString: 'assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi), ''<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.'');'
testString: 'assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi), "<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.");'
```

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.english.md
View File

@ -8,7 +8,7 @@ videoUrl: 'https://scrimba.com/c/c9bQEA4'
## Description
<section id='description'>
The CSS offsets of <code>top</code> or <code>bottom</code>, and <code>left</code> or <code>right</code> tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction). As you saw in the last challenge, using the top offset moved the <code>h2</code> downwards. Likewise, using a left offset moves an item to the right.
<img src='https://i.imgur.com/eWWi3gZ.gif' alt='' />
<img src='https://i.imgur.com/eWWi3gZ.gif' alt=" />
</section>
## Instructions
@ -22,9 +22,9 @@ Use CSS offsets to move the <code>h2</code> 15 pixels to the right and 10 pixels
```yml
tests:
- text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.'
testString: 'assert($(''h2'').css(''bottom'') == ''10px'', ''Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.'');'
testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");'
- text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.'
testString: 'assert($(''h2'').css(''left'') == ''15px'', ''Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.'');'
testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.english.md
View File

@ -21,9 +21,9 @@ The given markup would work well as a two-column layout, with the <code>section<
```yml
tests:
- text: The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.
testString: 'assert($(''#left'').css(''float'') == ''left'', ''The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.'');'
testString: 'assert($("#left").css("float") == "left", "The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.");'
- text: The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.
testString: 'assert($(''#right'').css(''float'') == ''right'', ''The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.'');'
testString: 'assert($("#right").css("float") == "right", "The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.");'
```

12
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.english.md
View File

@ -21,17 +21,17 @@ The <code>font-size</code> property is used to specify how large the text is in
```yml
tests:
- text: Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.
testString: 'assert($(''h1'').css(''font-size'') == ''68px'', ''Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.'');'
testString: 'assert($("h1").css("font-size") == "68px", "Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.");'
- text: Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.
testString: 'assert($(''h2'').css(''font-size'') == ''52px'', ''Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.'');'
testString: 'assert($("h2").css("font-size") == "52px", "Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.");'
- text: Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.
testString: 'assert($(''h3'').css(''font-size'') == ''40px'', ''Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.'');'
testString: 'assert($("h3").css("font-size") == "40px", "Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.");'
- text: Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.
testString: 'assert($(''h4'').css(''font-size'') == ''32px'', ''Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.'');'
testString: 'assert($("h4").css("font-size") == "32px", "Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.");'
- text: Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.
testString: 'assert($(''h5'').css(''font-size'') == ''21px'', ''Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.'');'
testString: 'assert($("h5").css("font-size") == "21px", "Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.");'
- text: Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.
testString: 'assert($(''h6'').css(''font-size'') == ''14px'', ''Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.'');'
testString: 'assert($("h6").css("font-size") == "14px", "Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.");'
```

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.english.md
View File

@ -21,7 +21,7 @@ Change the value of the <code>font-size</code> property for the paragraph to 16p
```yml
tests:
- text: Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.
testString: 'assert($(''p'').css(''font-size'') == ''16px'', ''Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.'');'
testString: 'assert($("p").css("font-size") == "16px", "Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.");'
```

12
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.english.md
View File

@ -22,17 +22,17 @@ The <code>font-weight</code> property sets how thick or thin characters are in a
```yml
tests:
- text: Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.
testString: 'assert($(''h1'').css(''font-weight'') == ''800'', ''Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.'');'
testString: 'assert($("h1").css("font-weight") == "800", "Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.");'
- text: Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.
testString: 'assert($(''h2'').css(''font-weight'') == ''600'', ''Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.'');'
testString: 'assert($("h2").css("font-weight") == "600", "Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.");'
- text: Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.
testString: 'assert($(''h3'').css(''font-weight'') == ''500'', ''Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.'');'
testString: 'assert($("h3").css("font-weight") == "500", "Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.");'
- text: Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.
testString: 'assert($(''h4'').css(''font-weight'') == ''400'', ''Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.'');'
testString: 'assert($("h4").css("font-weight") == "400", "Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.");'
- text: Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.
testString: 'assert($(''h5'').css(''font-weight'') == ''300'', ''Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.'');'
testString: 'assert($("h5").css("font-weight") == "300", "Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.");'
- text: Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.
testString: 'assert($(''h6'').css(''font-weight'') == ''200'', ''Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.'');'
testString: 'assert($("h6").css("font-weight") == "200", "Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.");'
```

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.english.md
View File

@ -21,7 +21,7 @@ Add a <code>line-height</code> property to the <code>p</code> tag and set it to
```yml
tests:
- text: Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.
testString: 'assert($(''p'').css(''line-height'') == ''25px'', ''Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.'');'
testString: 'assert($("p").css("line-height") == "25px", "Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.");'
```

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.english.md
View File

@ -24,11 +24,11 @@ To see the effect of this Bezier curve in action, change the <code>animation-tim
```yml
tests:
- text: 'The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .'
testString: 'assert($(''#red'').css(''animation-timing-function'') == ''cubic-bezier(0, 0, 0.58, 1)'', ''The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .'');'
testString: 'assert($("#red").css("animation-timing-function") == "cubic-bezier(0, 0, 0.58, 1)", "The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .");'
- text: The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.
testString: 'assert($(''#red'').css(''animation-timing-function'') !== ''linear'', ''The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.'');'
testString: 'assert($("#red").css("animation-timing-function") !== "linear", "The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.");'
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.
testString: 'assert($(''#blue'').css(''animation-timing-function'') == ''ease-out'', ''The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.'');'
testString: 'assert($("#blue").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.");'
```

12
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.english.md
View File

@ -26,17 +26,17 @@ Make stripes by changing the <code>repeating-linear-gradient()</code> to use a g
```yml
tests:
- text: The angle of the <code>repeating-linear-gradient()</code> should be 45deg.
testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), ''The angle of the <code>repeating-linear-gradient()</code> should be 45deg.'');'
testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), "The angle of the <code>repeating-linear-gradient()</code> should be 45deg.");'
- text: The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg
testString: 'assert(!code.match(/90deg/gi), ''The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg'');'
testString: 'assert(!code.match(/90deg/gi), "The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg");'
- text: The color stop at 0 pixels should be <code>yellow</code>.
testString: 'assert(code.match(/yellow\s+?0(px)?/gi), ''The color stop at 0 pixels should be <code>yellow</code>.'');'
testString: 'assert(code.match(/yellow\s+?0(px)?/gi), "The color stop at 0 pixels should be <code>yellow</code>.");'
- text: One color stop at 40 pixels should be <code>yellow</code>.
testString: 'assert(code.match(/yellow\s+?40px/gi), ''One color stop at 40 pixels should be <code>yellow</code>.'');'
testString: 'assert(code.match(/yellow\s+?40px/gi), "One color stop at 40 pixels should be <code>yellow</code>.");'
- text: The second color stop at 40 pixels should be <code>black</code>.
testString: 'assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), ''The second color stop at 40 pixels should be <code>black</code>.'');'
testString: 'assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), "The second color stop at 40 pixels should be <code>black</code>.");'
- text: The last color stop at 80 pixels should be <code>black</code>.
testString: 'assert(code.match(/black\s+?80px/gi), ''The last color stop at 80 pixels should be <code>black</code>.'');'
testString: 'assert(code.match(/black\s+?80px/gi), "The last color stop at 80 pixels should be <code>black</code>.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.english.md
View File

@ -24,9 +24,9 @@ Use CSS <code>@keyframes</code> to change the <code>background-color</code> of t
```yml
tests:
- text: The @keyframes rule should use the <code>animation-name</code> background-color.
testString: 'assert(code.match(/@keyframes\s+?background-color\s*?{/g), ''The @keyframes rule should use the <code>animation-name</code> background-color.'');'
testString: 'assert(code.match(/@keyframes\s+?background-color\s*?{/g), "The @keyframes rule should use the <code>animation-name</code> background-color.");'
- text: 'There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.'
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), ''There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.'');'
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), "There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.");'
```

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.english.md
View File

@ -23,7 +23,7 @@ Skew the element with the id of <code>bottom</code> by 24 degrees along the X-ax
```yml
tests:
- text: The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.
testString: 'assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), ''The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.'');'
testString: 'assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), "The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.");'
```

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.english.md
View File

@ -21,7 +21,7 @@ Skew the element with the id of <code>top</code> -10 degrees along the Y-axis by
```yml
tests:
- text: The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.
testString: 'assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g), ''The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.'');'
testString: 'assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g), "The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.");'
```

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

@ -22,7 +22,7 @@ Increase the size of the element with the id of <code>ball2</code> to 1.5 times
```yml
tests:
- text: 'Set the <code>transform</code> property for <code>#ball2</code> to scale it 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), ''Set the <code>transform</code> property for <code>#ball2</code> to scale it 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), "Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.");'
```

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

@ -23,7 +23,7 @@ Add a CSS rule for the <code>hover</code> state of the <code>div</code> and use
```yml
tests:
- text: The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.
testString: 'assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), ''The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.'');'
testString: 'assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), "The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.english.md
View File

@ -21,9 +21,9 @@ Wrap an <code>em</code> tag around the contents of the paragraph tag to give it
```yml
tests:
- text: Your code should add an <code>em</code> tag to the markup.
testString: 'assert($(''em'').length == 1, ''Your code should add an <code>em</code> tag to the markup.'');'
testString: 'assert($("em").length == 1, "Your code should add an <code>em</code> tag to the markup.");'
- text: The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.
testString: 'assert($(''p'').children().length == 1 && $(''em'').children().length == 2, ''The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.'');'
testString: 'assert($("p").children().length == 1 && $("em").children().length == 2, "The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.");'
```

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

@ -2,7 +2,7 @@
id: 587d781b367417b2b2512aba
title: Use the s Tag to Strikethrough Text
challengeType: 0
videoUrl: ''
videoUrl: "
---
## Description
@ -21,11 +21,11 @@ Wrap the <code>s</code> tag around "Google" inside the <code>h4</code> tag and t
```yml
tests:
- text: Your code should add one <code>s</code> tag to the markup.
testString: 'assert($(''s'').length == 1, ''Your code should add one <code>s</code> tag to the markup.'');'
testString: 'assert($("s").length == 1, "Your code should add one <code>s</code> tag to the markup.");'
- 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($(''s'').text().match(/Google/gi) && !$(''s'').text().match(/Alphabet/gi), ''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($("s").text().match(/Google/gi) && !$("s").text().match(/Alphabet/gi), "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: 'Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.'
testString: 'assert($(''h4'').html().match(/Alphabet/gi), ''Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.'');'
testString: 'assert($("h4").html().match(/Alphabet/gi), "Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.");'
```

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.english.md
View File

@ -21,11 +21,11 @@ Wrap a <code>strong</code> tag around "Stanford University" inside the <code>p</
```yml
tests:
- text: Your code should add one <code>strong</code> tag to the markup.
testString: 'assert($(''strong'').length == 1, ''Your code should add one <code>strong</code> tag to the markup.'');'
testString: 'assert($("strong").length == 1, "Your code should add one <code>strong</code> tag to the markup.");'
- text: The <code>strong</code> tag should be inside the <code>p</code> tag.
testString: 'assert($(''p'').children(''strong'').length == 1, ''The <code>strong</code> tag should be inside the <code>p</code> tag.'');'
testString: 'assert($("p").children("strong").length == 1, "The <code>strong</code> tag should be inside the <code>p</code> tag.");'
- text: The <code>strong</code> tag should wrap around the words "Stanford University".
testString: 'assert($(''strong'').text().match(/^Stanford University$/gi), ''The <code>strong</code> tag should wrap around the words "Stanford University".'');'
testString: 'assert($("strong").text().match(/^Stanford University$/gi), "The <code>strong</code> tag should wrap around the words "Stanford University".");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.english.md
View File

@ -23,9 +23,9 @@ Transform the text of the <code>h4</code> to be uppercase using the <code>text-t
```yml
tests:
- text: The <code>h4</code> text should be uppercase.
testString: 'assert($(''h4'').css(''text-transform'') === ''uppercase'', ''The <code>h4</code> text should be uppercase.'');'
testString: 'assert($("h4").css("text-transform") === "uppercase", "The <code>h4</code> text should be uppercase.");'
- text: The original text of the h4 should not be changed.
testString: 'assert(($(''h4'').text() !== $(''h4'').text().toUpperCase()), ''The original text of the h4 should not be changed.'');'
testString: 'assert(($("h4").text() !== $("h4").text().toUpperCase()), "The original text of the h4 should not be changed.");'
```

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.english.md
View File

@ -22,9 +22,9 @@ Wrap the <code>u</code> tag only around the text "Ph.D. students".
```yml
tests:
- text: Your code should add a <code>u</code> tag to the markup.
testString: 'assert($(''u'').length === 1, ''Your code should add a <code>u</code> tag to the markup.'');'
testString: 'assert($("u").length === 1, "Your code should add a <code>u</code> tag to the markup.");'
- text: The <code>u</code> tag should wrap around the text "Ph.D. students".
testString: 'assert($(''u'').text() === ''Ph.D. students'', ''The <code>u</code> tag should wrap around the text "Ph.D. students".'');'
testString: 'assert($("u").text() === "Ph.D. students", "The <code>u</code> tag should wrap around the text "Ph.D. students".");'
```

2
curriculum/challenges/english/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.english.md
View File

@ -24,7 +24,7 @@ Change the <code>margin</code> of the blue box to <code>-15px</code>, so it fill
```yml
tests:
- text: Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-top") === "-15px", ''Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-top") === "-15px", "Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.");'
```

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

@ -26,15 +26,15 @@ Remember that you can apply multiple classes to an element using its <code>class
```yml
tests:
- text: Your <code>img</code> element should have the class <code>smaller-image</code>.
testString: 'assert($("img").hasClass("smaller-image"), ''Your <code>img</code> element should have the class <code>smaller-image</code>.'');'
testString: 'assert($("img").hasClass("smaller-image"), "Your <code>img</code> element should have the class <code>smaller-image</code>.");'
- text: Your <code>img</code> element should have the class <code>thick-green-border</code>.
testString: 'assert($("img").hasClass("thick-green-border"), ''Your <code>img</code> element should have the class <code>thick-green-border</code>.'');'
testString: 'assert($("img").hasClass("thick-green-border"), "Your <code>img</code> element should have the class <code>thick-green-border</code>.");'
- text: Give your image 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, ''Give your image 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, "Give your image a border width of <code>10px</code>.");'
- text: Give your image a border style of <code>solid</code>.
testString: 'assert($("img").css("border-right-style") === "solid", ''Give your image a border style of <code>solid</code>.'');'
testString: 'assert($("img").css("border-right-style") === "solid", "Give your image a border style of <code>solid</code>.");'
- text: The border around your <code>img</code> element should be green.
testString: 'assert($("img").css("border-left-color") === "rgb(0, 128, 0)", ''The border around your <code>img</code> element should be green.'');'
testString: 'assert($("img").css("border-left-color") === "rgb(0, 128, 0)", "The border around your <code>img</code> element should be green.");'
```

8
curriculum/challenges/english/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.english.md
View File

@ -22,13 +22,13 @@ Give the blue box a <code>margin</code> of <code>40px</code> on its top and left
```yml
tests:
- text: Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-top") === "40px", ''Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-top") === "40px", "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.");'
- text: Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-right") === "20px", ''Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-right") === "20px", "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.");'
- text: Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-bottom") === "20px", ''Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.");'
- text: Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-left") === "40px", ''Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-left") === "40px", "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.");'
```

8
curriculum/challenges/english/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.english.md
View File

@ -23,13 +23,13 @@ Give the blue box a <code>padding</code> of <code>40px</code> on its top and lef
```yml
tests:
- text: Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-top") === "40px", ''Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.'');'
testString: 'assert($(".blue-box").css("padding-top") === "40px", "Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.");'
- text: Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-right") === "20px", ''Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.'');'
testString: 'assert($(".blue-box").css("padding-right") === "20px", "Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.");'
- text: Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-bottom") === "20px", ''Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.'');'
testString: 'assert($(".blue-box").css("padding-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.");'
- text: Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-left") === "40px", ''Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.'');'
testString: 'assert($(".blue-box").css("padding-left") === "40px", "Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.");'
```

4
curriculum/challenges/english/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.english.md
View File

@ -23,9 +23,9 @@ Note: this challenge allows for multiple possible solutions. For example, you ma
```yml
tests:
- text: Your image element should have the class "thick-green-border".
testString: 'assert($("img").hasClass("thick-green-border"), ''Your image element should have the class "thick-green-border".'');'
testString: 'assert($("img").hasClass("thick-green-border"), "Your image element should have the class "thick-green-border".");'
- text: Your image should have a border radius of <code>10px</code>
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, ''Your image should have a border radius of <code>10px</code>'');'
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, "Your image should have a border radius of <code>10px</code>");'
```

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

@ -24,7 +24,7 @@ Change the <code>margin</code> of the blue box to match that of the red box.
```yml
tests:
- text: Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-top") === "20px", ''Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-top") === "20px", "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.");'
```

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

@ -27,7 +27,7 @@ Change the <code>padding</code> of your blue box to match that of your red box.
```yml
tests:
- text: Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-top") === "20px", ''Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.'');'
testString: 'assert($(".blue-box").css("padding-top") === "20px", "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.");'
```

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

@ -26,9 +26,9 @@ It looks there is a problem with the variables supplied to the <code>.penguin-to
```yml
tests:
- text: Apply the fallback value of <code>black</code> 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*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), ''Apply the fallback value of <code>black</code> 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*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.");'
- text: Apply the fallback value of <code>black</code> 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*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi), ''Apply the fallback value of <code>black</code> 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*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi), "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.");'
```

2
curriculum/challenges/english/01-responsive-web-design/basic-css/cascading-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
tests:
- text: 'declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.'
testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), ''declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.'');'
testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), "declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.");'
```

2
curriculum/challenges/english/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.english.md
View File

@ -22,7 +22,7 @@ Change the value of <code>--penguin-belly</code> to <code>white</code> in the <c
```yml
tests:
- text: The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), ''The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.'');'
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), "The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.");'
```

4
curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-color-of-text.english.md
View File

@ -26,9 +26,9 @@ Change your <code>h2</code> element's style so that its text color is red.
```yml
tests:
- text: Your <code>h2</code> element should be red.
testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", ''Your <code>h2</code> element should be red.'');'
testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", "Your <code>h2</code> element should be red.");'
- text: Your <code>style</code> declaration should end with a <code>;</code> .
testString: 'assert(code.match(/<h2\s+style\s*=\s*(\''|")\s*color\s*:\s*(?:rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|red|#ff0000|#f00|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*\;(\''|")>\s*CatPhotoApp\s*<\/h2>/),'' Your <code>style</code> declaration should end with a <code>;</code> .'');'
testString: 'assert(code.match(/<h2\s+style\s*=\s*(\"|")\s*color\s*:\s*(?:rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|red|#ff0000|#f00|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*\;(\"|")>\s*CatPhotoApp\s*<\/h2>/)," Your <code>style</code> declaration should end with a <code>;</code> .");'
```

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

@ -22,7 +22,7 @@ Inside the same <code>&#60;style&#62;</code> tag that contains your <code>red-te
```yml
tests:
- text: 'Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.'
testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i), ''Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.'');'
testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i), "Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.");'
```

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

@ -24,7 +24,7 @@ In the <code>penguin</code> class, create a variable name <code>--penguin-skin</
```yml
tests:
- text: <code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), ''<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.'');'
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), "<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.");'
```

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

@ -23,9 +23,9 @@ Create a class called <code>silver-background</code> with the <code>background-c
```yml
tests:
- text: Give your <code>div</code> element the class <code>silver-background</code>.
testString: 'assert($("div").hasClass("silver-background"), ''Give your <code>div</code> element the class <code>silver-background</code>.'');'
testString: 'assert($("div").hasClass("silver-background"), "Give your <code>div</code> element the class <code>silver-background</code>.");'
- text: Your <code>div</code> element should have a silver background.
testString: 'assert($("div").css("background-color") === "rgb(192, 192, 192)", ''Your <code>div</code> element should have a silver background.'');'
testString: 'assert($("div").css("background-color") === "rgb(192, 192, 192)", "Your <code>div</code> element should have a silver background.");'
- 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.
testString: 'assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/), "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.");'

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

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

4
curriculum/challenges/english/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.english.md
View File

@ -2,7 +2,7 @@
id: 5b7d72c338cd7e35b63f3e14
title: Improve Compatibility with Browser Fallbacks
challengeType: 0
videoUrl: ''
videoUrl: "
---
## Description
@ -23,7 +23,7 @@ It looks like a variable is being used to set the background color of the <code>
```yml
tests:
- text: Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.
testString: 'assert(code.match(/.red-box\s*{[^}]*background:\s*(red|#ff0000|#f00|rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*;\s*background:\s*var\(\s*--red-color\s*\);/gi), ''Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.'');'
testString: 'assert(code.match(/.red-box\s*{[^}]*background:\s*(red|#ff0000|#f00|rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*;\s*background:\s*var\(\s*--red-color\s*\);/gi), "Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.");'
```

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

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

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

@ -21,9 +21,9 @@ Give your cat photo a <code>border-radius</code> of <code>50%</code>.
```yml
tests:
- 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, ''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, "Your image should have a border radius of <code>50%</code>, making it perfectly circular.");'
- text: Be sure to use a percentage value of <code>50%</code>.
testString: 'assert(code.match(/50%/g), ''Be sure to use a percentage value of <code>50%</code>.'');'
testString: 'assert(code.match(/50%/g), "Be sure to use a percentage value of <code>50%</code>.");'
```

12
curriculum/challenges/english/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.english.md
View File

@ -26,17 +26,17 @@ An example of how to do this is:
```yml
tests:
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), ''Your <code>h1</code> element should have the class <code>pink-text</code>.'');'
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
testString: 'assert($("h1").hasClass("blue-text"), ''Your <code>h1</code> element should have the class <code>blue-text</code>.'');'
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
- text: Your <code>h1</code> element should have the id of <code>orange-text</code>.
testString: 'assert($("h1").attr("id") === "orange-text", ''Your <code>h1</code> element should have the id of <code>orange-text</code>.'');'
testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
- text: 'Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.'
testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi), ''Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.'');'
testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi), "Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.");'
- text: Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), ''Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.'');'
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), "Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.");'
- text: Your <code>h1</code> element should be pink.
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", ''Your <code>h1</code> element should be pink.'');'
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");'
```

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

@ -28,19 +28,19 @@ Note: It doesn't matter whether you declare this CSS above or below pink-text cl
```yml
tests:
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), ''Your <code>h1</code> element should have the class <code>pink-text</code>.'');'
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
testString: 'assert($("h1").hasClass("blue-text"), ''Your <code>h1</code> element should have the class <code>blue-text</code>.'');'
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
- text: Give your <code>h1</code> element the id of <code>orange-text</code>.
testString: 'assert($("h1").attr("id") === "orange-text", ''Give your <code>h1</code> element the id of <code>orange-text</code>.'');'
testString: 'assert($("h1").attr("id") === "orange-text", "Give your <code>h1</code> element the id of <code>orange-text</code>.");'
- text: There should be only one <code>h1</code> element.
testString: 'assert(($("h1").length === 1), ''There should be only one <code>h1</code> element.'');'
testString: 'assert(($("h1").length === 1), "There should be only one <code>h1</code> element.");'
- text: Create a CSS declaration for your <code>orange-text</code> id
testString: 'assert(code.match(/#orange-text\s*{/gi), ''Create a CSS declaration for your <code>orange-text</code> id'');'
testString: 'assert(code.match(/#orange-text\s*{/gi), "Create a CSS declaration for your <code>orange-text</code> id");'
- text: Do not give your <code>h1</code> any <code>style</code> attributes.
testString: 'assert(!code.match(/<h1.*style.*>/gi), ''Do not give your <code>h1</code> any <code>style</code> attributes.'');'
testString: 'assert(!code.match(/<h1.*style.*>/gi), "Do not give your <code>h1</code> any <code>style</code> attributes.");'
- text: Your <code>h1</code> element should be orange.
testString: 'assert($("h1").css("color") === "rgb(255, 165, 0)", ''Your <code>h1</code> element should be orange.'');'
testString: 'assert($("h1").css("color") === "rgb(255, 165, 0)", "Your <code>h1</code> element should be orange.");'
```

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

@ -24,15 +24,15 @@ Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <cod
```yml
tests:
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), ''Your <code>h1</code> element should have the class <code>pink-text</code>.'');'
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
testString: 'assert($("h1").hasClass("blue-text"), ''Your <code>h1</code> element should have the class <code>blue-text</code>.'');'
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
- text: Your <code>h1</code> element should have the id of <code>orange-text</code>.
testString: 'assert($("h1").attr("id") === "orange-text", ''Your <code>h1</code> element should have the id of <code>orange-text</code>.'');'
testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
- text: Give your <code>h1</code> element an inline style.
testString: 'assert(document.querySelector(''h1[style]''), ''Give your <code>h1</code> element an inline style.'');'
testString: 'assert(document.querySelector("h1[style]"), "Give your <code>h1</code> element an inline style.");'
- text: Your <code>h1</code> element should be white.
testString: 'assert($("h1").css("color") === "rgb(255, 255, 255)", ''Your <code>h1</code> element should be white.'');'
testString: 'assert($("h1").css("color") === "rgb(255, 255, 255)", "Your <code>h1</code> element should be white.");'
```

8
curriculum/challenges/english/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.english.md
View File

@ -27,13 +27,13 @@ However, the order of the <code>class</code> declarations in the <code>&#60;styl
```yml
tests:
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), ''Your <code>h1</code> element should have the class <code>pink-text</code>.'');'
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
testString: 'assert($("h1").hasClass("blue-text"), ''Your <code>h1</code> element should have the class <code>blue-text</code>.'');'
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
- text: Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.
testString: 'assert($(".pink-text").hasClass("blue-text"), ''Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.'');'
testString: 'assert($(".pink-text").hasClass("blue-text"), "Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.");'
- text: Your <code>h1</code> element should be blue.
testString: 'assert($("h1").css("color") === "rgb(0, 0, 255)", ''Your <code>h1</code> element should be blue.'');'
testString: 'assert($("h1").css("color") === "rgb(0, 0, 255)", "Your <code>h1</code> element should be blue.");'
```

6
curriculum/challenges/english/01-responsive-web-design/basic-css/prioritize-one-style-over-another.english.md
View File

@ -24,11 +24,11 @@ Give your <code>h1</code> element the class of <code>pink-text</code>.
```yml
tests:
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), ''Your <code>h1</code> element should have the class <code>pink-text</code>.'');'
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
- text: 'Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.'
testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), ''Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.'');'
testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), "Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.");'
- text: Your <code>h1</code> element should be pink.
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", ''Your <code>h1</code> element should be pink.'');'
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");'
```

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

@ -23,7 +23,7 @@ Make all of your <code>p</code> elements use the <code>monospace</code> font.
```yml
tests:
- text: Your <code>p</code> elements should use the font <code>monospace</code>.
testString: 'assert($("p").not(".red-text").css("font-family").match(/monospace/i), ''Your <code>p</code> elements should use the font <code>monospace</code>.'');'
testString: 'assert($("p").not(".red-text").css("font-family").match(/monospace/i), "Your <code>p</code> elements should use the font <code>monospace</code>.");'
```

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
tests:
- text: Give your <code>form</code> element the id of <code>cat-photo-form</code>.
testString: 'assert($("form").attr("id") === "cat-photo-form", ''Give your <code>form</code> element the id of <code>cat-photo-form</code>.'');'
testString: 'assert($("form").attr("id") === "cat-photo-form", "Give your <code>form</code> element the id of <code>cat-photo-form</code>.");'
```

4
curriculum/challenges/english/01-responsive-web-design/basic-css/size-your-images.english.md
View File

@ -24,9 +24,9 @@ Create a class called <code>smaller-image</code> and use it to resize the image
```yml
tests:
- text: Your <code>img</code> element should have the class <code>smaller-image</code>.
testString: 'assert($("img[src=''https://bit.ly/fcc-relaxing-cat'']").attr(''class'') === "smaller-image", ''Your <code>img</code> element should have the class <code>smaller-image</code>.'');'
testString: 'assert($("img[src="https://bit.ly/fcc-relaxing-cat"]").attr("class") === "smaller-image", "Your <code>img</code> element should have the class <code>smaller-image</code>.");'
- text: Your image should be 100 pixels wide. Browser zoom should be at 100%.
testString: 'assert($("img").width() === 100, ''Your image should be 100 pixels wide. Browser zoom should be at 100%.'');'
testString: 'assert($("img").width() === 100, "Your image should be 100 pixels wide. Browser zoom should be at 100%.");'
```

Some files were not shown because too many files have changed in this diff Show More