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

10
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.");'
```
@ -52,9 +52,9 @@ tests:
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;

10
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.");'
```
@ -45,8 +45,8 @@ tests:
h4 {
text-align: center;
height: 25px;
}
p {
text-align: justify;

10
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.");'
```
@ -50,7 +50,7 @@ tests:
}
h2 {
color: black;
}
}
button {
background-color: white;
}

4
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.");'
```
@ -37,7 +37,7 @@ tests:
<style>
h4 {
text-align: center;
}
p {
text-align: justify;

10
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.");'
```
@ -41,9 +41,9 @@ tests:
a {
color: #000;
}
</style>
<a href="http://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
```

22
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.");'
```
@ -52,26 +52,26 @@ tests:
body {
background-color: #FFFFFF;
}
.green {
background-color: #000000;
}
.cyan {
background-color: #000000;
}
.blue {
background-color: #000000;
}
div {
display: inline-block;
height: 100px;
width: 100px;
}
</style>
<div class="green"></div>
<div class="cyan"></div>
<div class="blue"></div>

4
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.");'
```
@ -38,7 +38,7 @@ tests:
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
}
p {
text-align: justify;

16
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.");'
```
@ -38,32 +38,32 @@ tests:
background-color: hsl(180, 90%, 35%);
color: #FFFFFF;
}
nav {
}
h1 {
text-indent: 10px;
padding-top: 10px;
}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}
nav li {
display: inline;
margin-right: 20px;
}
a {
text-decoration: none;
color: inherit;
}
</style>
<header>
<h1>Cooking with FCC!</h1>
<nav>

4
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.");'
```
@ -46,7 +46,7 @@ tests:
text-align: left;
}
.fullCard {
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;

4
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%.");'
```
@ -44,7 +44,7 @@ tests:
}
.star-1 {
margin-top: 15%;
margin-top: 15%;
margin-left: 60%;
animation-name: twinkle-1;
animation-duration: 1s;

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

8
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.");'
```
@ -48,7 +48,7 @@ tests:
}
.star-1 {
margin-top: 15%;
margin-top: 15%;
margin-left: 60%;
animation-duration: 1s;
animation-name: twinkle;

4
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.");'
```
@ -39,7 +39,7 @@ tests:
background-color: blue;
height: 100px;
width: 100px;
}
</style>
<div></div>

8
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.");'
```
@ -41,8 +41,8 @@ tests:
```html
<style>
h2 {
}
</style>
<body>

18
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.");'
```
@ -45,7 +45,7 @@ tests:
#ccffff,
#ffcccc
);
position: fixed;
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
@ -53,23 +53,23 @@ tests:
animation-duration: 2s;
animation-iteration-count: infinite;
}
#ball1 {
#ball1 {
left:27%;
}
#ball2 {
#ball2 {
left:56%;
}
@keyframes bounce {
0% {
top: 0px;
}
}
100% {
top: 249px;
}
}
}
</style>

6
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.");'
```
@ -39,11 +39,11 @@ tests:
height: 200px;
margin-top: 20px;
}
.first {
background-color: red;
position: absolute;
}
.second {
background-color: blue;

6
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.");'
```
@ -40,12 +40,12 @@ tests:
```html
<style>
div{
div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
}
</style>

10
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.");'
```
@ -51,10 +51,10 @@ tests:
left: 0;
width: 100px;
height: 100px;
background-color: blue;
border-radius: 0px;
box-shadow: 25px 10px 10px 10px green;
box-shadow: 25px 10px 10px 10px green;
}
</style>

6
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.");'
```
@ -66,7 +66,7 @@ tests:
<div class="cardContent">
<div class="cardText">
<h4><s>Google</s>Alphabet</h4>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">

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

12
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.");'
```
@ -58,17 +58,17 @@ tests:
0% {
background-color: blue;
top: 0px;
}
50% {
background-color: green;
top: 50px;
}
100% {
background-color: yellow;
top: 0px;
}
}
</style>

4
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.");'
```
@ -35,7 +35,7 @@ tests:
```html
<style>
body {
}
</style>
```

10
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.");'
```
@ -42,14 +42,14 @@ tests:
```html
<style>
h4 {
}
p {
}
.links {
margin-right: 20px;
}
.fullCard {
border: 1px solid #ccc;

4
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%.");'
```
@ -55,7 +55,7 @@ tests:
@keyframes fade {
50% {
left: 60%;
}
}

4
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>.");'
```
@ -48,7 +48,7 @@ tests:
.links {
text-align: left;
color: black;
}
#thumbnail {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

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

16
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.");'
```
@ -45,26 +45,26 @@ tests:
body {
background-color: #FFFFFF;
}
.orange {
background-color: #000000;
}
.cyan {
background-color: #000000;
}
.raspberry {
background-color: #000000;
}
div {
height: 100px;
width: 100px;
margin-bottom: 5px;
}
</style>
<div class="orange"></div>
<div class="cyan"></div>
<div class="raspberry"></div>

14
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.");'
```
@ -48,7 +48,7 @@ tests:
#ccffff,
#ffcccc
);
position: fixed;
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
@ -56,11 +56,11 @@ tests:
animation-duration: 2s;
animation-iteration-count: infinite;
}
#ball1 {
#ball1 {
left: 27%;
animation-timing-function: linear;
}
#ball2 {
#ball2 {
left: 56%;
animation-timing-function: ease-out;
}
@ -68,11 +68,11 @@ tests:
@keyframes bounce {
0% {
top: 0px;
}
}
100% {
top: 249px;
}
}
}
</style>

24
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%.");'
```
@ -58,13 +58,13 @@ tests:
}
#rect {
}
</style>
<div id="rect"></div>
```

12
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.");'
```
@ -40,9 +40,9 @@ tests:
```html
<style>
#searchbar {
}
section {
position: relative;

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

@ -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.");'
```
@ -40,9 +40,9 @@ tests:
```html
<style>
#navbar {
width: 100%;
background-color: #767676;
}

10
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.");'
```
@ -47,8 +47,8 @@ tests:
height: 100%;
background: white;
animation-name: backdiv;
animation-duration: 1s;
animation-duration: 1s;
}
.heart {
@ -64,7 +64,7 @@ tests:
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
}
.heart:after {
background-color: pink;

4
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}}'
```
@ -40,7 +40,7 @@ tests:
<style>
.balls {
border-radius: 50%;
position: fixed;
position: fixed;
width: 50px;
height: 50px;
top: 60%;

4
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>.");'
```
@ -46,7 +46,7 @@ tests:
animation-name: background-color;
animation-duration: 500ms;
/* add your code below this line */
/* add your code above this line */
}
@keyframes background-color {

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
@ -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.");'
```
@ -40,8 +40,8 @@ tests:
<style>
h2 {
position: relative;
}
</style>
</head>

8
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>.");'
```
@ -38,11 +38,11 @@ tests:
<head>
<style>
#left {
width: 50%;
}
#right {
width: 40%;
}
aside, section {

24
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.");'
```
@ -44,12 +44,12 @@ tests:
```html
<style>
</style>
<h1>This is h1 text</h1>
<h2>This is h2 text</h2>

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

24
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.");'
```
@ -47,27 +47,27 @@ tests:
<style>
h1 {
font-size: 68px;
}
h2 {
font-size: 52px;
}
h3 {
font-size: 40px;
}
h4 {
font-size: 32px;
}
h5 {
font-size: 21px;
}
h6 {
font-size: 14px;
}
</style>
<h1>This is h1 text</h1>

4
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.");'
```
@ -36,7 +36,7 @@ tests:
<style>
p {
font-size: 16px;
}
</style>
<p>

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

14
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>.");'
```
@ -50,7 +50,7 @@ tests:
```html
<style>
div{
div{
border-radius: 20px;
width: 70%;
height: 400px;

12
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%.");'
```
@ -45,15 +45,15 @@ tests:
background-color: #0F5897;
padding: 5px 10px 8px 10px;
}
button:hover {
animation-name: background-color;
animation-duration: 500ms;
}
</style>
<button>Register</button>
```

6
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.");'
```
@ -36,7 +36,7 @@ tests:
```html
<style>
div {
div {
width: 70%;
height: 100px;
margin: 50px auto;
@ -46,7 +46,7 @@ tests:
}
#bottom {
background-color: blue;
}
</style>

6
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.");'
```
@ -34,14 +34,14 @@ tests:
```html
<style>
div {
div {
width: 70%;
height: 100px;
margin: 50px auto;
}
#top {
background-color: red;
}
#bottom {
background-color: blue;

6
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.");'
```
@ -35,7 +35,7 @@ tests:
```html
<style>
.ball {
.ball {
width: 40px;
height: 40px;
margin: 50 auto;
@ -52,7 +52,7 @@ tests:
}
#ball2 {
left: 65%;
}

10
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.");'
```
@ -36,7 +36,7 @@ tests:
```html
<style>
div {
div {
width: 70%;
height: 100px;
margin: 50px auto;
@ -46,9 +46,9 @@ tests:
#ffcccf
);
}
</style>
<div></div>

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

6
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.");'
```
@ -43,7 +43,7 @@ tests:
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
}
p {
text-align: justify;

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