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

fix(curriculum): quotes in tests (#18828)

Browse Source 
* fix(curriculum): tests quotes

* fix(curriculum): fill seed-teardown

* fix(curriculum): fix tests and remove unneeded seed-teardown
This commit is contained in:
Valeriy
2018-10-20 21:02:47 +03:00
committed by mrugesh mohapatra
parent 96eb124163
commit 79d9012432
1339 changed files with 6499 additions and 5185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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.');
```

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

@ -24,12 +24,12 @@ 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>.");'
- 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>.');
- 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.');
```

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

@ -22,10 +22,10 @@ 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.");'
- 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.');
- 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 @@ All elements have a default <code>background-color</code> of <code>transparent</
```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.');
```

8
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>.");'
- 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(/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.');
```

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.');
```

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

@ -25,14 +25,14 @@ 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.");'
- 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%.");'
- 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.');
- 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%.');
- 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.");'
- 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(/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.');
```

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%.');
```

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

@ -21,12 +21,12 @@ 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>.");'
- 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.");'
- 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.");'
- 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>.');
- 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.');
- 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.');
```

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

@ -21,12 +21,12 @@ 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>.");'
- 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.");'
- 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.");'
- 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>.');
- 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.');
- 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.');
```

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.');
```

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

@ -24,8 +24,8 @@ 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.'
- 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.');
```

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

@ -22,8 +22,8 @@ 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>.");'
- 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>.');
```

10
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
@ -21,10 +21,10 @@ 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.");'
- 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.");'
- 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.');
- 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.');
```

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.');
```

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

@ -23,12 +23,12 @@ 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 .");'
- 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 .');
- 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>.');
```

6
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.");'
- 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(/@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%.');
```

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.');
```

4
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

@ -21,8 +21,8 @@ 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.");'
- 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.');
```

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

@ -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.");'
- 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($('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.');
```

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".');
```