diff --git a/packages/learn/seed/challenges/01-responsive-web-design/applied-accessibility.json b/packages/learn/seed/challenges/01-responsive-web-design/applied-accessibility.json
index 0288bcc303..812516e905 100644
--- a/packages/learn/seed/challenges/01-responsive-web-design/applied-accessibility.json
+++ b/packages/learn/seed/challenges/01-responsive-web-design/applied-accessibility.json
@@ -17,8 +17,8 @@
],
"tests": [
{
- "text": "Your img tag should have an alt attribute, and it should not be empty.'",
- "testString": "assert($('img').attr('alt'), 'Your img tag should have an alt attribute, and it should not be empty.')"
+ "text": "Your img tag should have an alt attribute, and it should not be empty.",
+ "testString": "assert($('img').attr('alt'), 'Your img tag should have an alt attribute, and it should not be empty.');"
}
],
"solutions": [],
@@ -55,12 +55,12 @@
],
"tests": [
{
- "text": "Your img tag should have an alt attribute.'",
- "testString": "assert(!($('img').attr('alt') == undefined), 'Your img tag should have an alt attribute.')"
+ "text": "Your img tag should have an alt attribute.",
+ "testString": "assert(!($('img').attr('alt') == undefined), 'Your img tag should have an alt attribute.');"
},
{
- "text": "The alt attribute should be set to an empty string.'",
- "testString": "assert($('img').attr('alt') == '', 'The alt attribute should be set to an empty string.')"
+ "text": "The alt attribute should be set to an empty string.",
+ "testString": "assert($('img').attr('alt') == '', 'The alt attribute should be set to an empty string.');"
}
],
"solutions": [],
@@ -108,12 +108,12 @@
],
"tests": [
{
- "text": "Your code should have six h3 tags.'",
- "testString": "assert($('h3').length === 6, 'Your code should have six h3 tags.')"
+ "text": "Your code should have six h3 tags.",
+ "testString": "assert($('h3').length === 6, 'Your code should have six h3 tags.');"
},
{
- "text": "Your code should not have any h5 tags.'",
- "testString": "assert($('h5').length === 0, 'Your code should not have any h5 tags.')"
+ "text": "Your code should not have any h5 tags.",
+ "testString": "assert($('h5').length === 0, 'Your code should not have any h5 tags.');"
}
],
"solutions": [],
@@ -163,12 +163,12 @@
],
"tests": [
{
- "text": "Your code should have one main tag.'",
- "testString": "assert($('main').length == 1, 'Your code should have one main tag.')"
+ "text": "Your code should have one main tag.",
+ "testString": "assert($('main').length == 1, 'Your code should have one main tag.');"
},
{
- "text": "The main tags should be between the closing header tag and the opening footer tag.'",
- "testString": "assert(code.match(/<\\/header>\\s*?\\s*?<\\/main>/gi), 'The main tags should be between the closing header tag and the opening footer tag.')"
+ "text": "The main tags should be between the closing header tag and the opening footer tag.",
+ "testString": "assert(code.match(/<\\/header>\\s*?\\s*?<\\/main>/gi), 'The main tags should be between the closing header tag and the opening footer tag.');"
}
],
"solutions": [],
@@ -210,12 +210,12 @@
],
"tests": [
{
- "text": "Your code should have three article tags.'",
- "testString": "assert($('article').length == 3, 'Your code should have three article tags.')"
+ "text": "Your code should have three article tags.",
+ "testString": "assert($('article').length == 3, 'Your code should have three article tags.');"
},
{
- "text": "Your code should not have any div tags.'",
- "testString": "assert($('div').length == 0, 'Your code should not have any div tags.')"
+ "text": "Your code should not have any div tags.",
+ "testString": "assert($('div').length == 0, 'Your code should not have any div tags.');"
}
],
"solutions": [],
@@ -269,20 +269,20 @@
],
"tests": [
{
- "text": "Your code should have one header tag.'",
- "testString": "assert($('header').length == 1, 'Your code should have one header tag.')"
+ "text": "Your code should have one header tag.",
+ "testString": "assert($('header').length == 1, 'Your code should have one header tag.');"
},
{
- "text": "Your header tags should wrap around the h1.'",
- "testString": "assert($('header').children('h1').length == 1, 'Your header tags should wrap around the h1.')"
+ "text": "Your header tags should wrap around the h1.",
+ "testString": "assert($('header').children('h1').length == 1, 'Your header tags should wrap around the h1.');"
},
{
- "text": "Your code should not have any div tags.'",
- "testString": "assert($('div').length == 0, 'Your code should not have any div tags.')"
+ "text": "Your code should not have any div tags.",
+ "testString": "assert($('div').length == 0, 'Your code should not have any div tags.');"
},
{
- "text": "Make sure your header element has a closing tag.'",
- "testString": "assert(code.match(/<\\/header>/g) && code.match(/<\\/header>/g).length === code.match(//g).length, 'Make sure your header element has a closing tag.')"
+ "text": "Make sure your header element has a closing tag.",
+ "testString": "assert(code.match(/<\\/header>/g) && code.match(/<\\/header>/g).length === code.match(//g).length, 'Make sure your header element has a closing tag.');"
}
],
"solutions": [],
@@ -339,20 +339,20 @@
],
"tests": [
{
- "text": "Your code should have one nav tag.'",
- "testString": "assert($('nav').length == 1, 'Your code should have one nav tag.')"
+ "text": "Your code should have one nav tag.",
+ "testString": "assert($('nav').length == 1, 'Your code should have one nav tag.');"
},
{
- "text": "Your nav tags should wrap around the ul and its list items.'",
- "testString": "assert($('nav').children('ul').length == 1, 'Your nav tags should wrap around the ul and its list items.')"
+ "text": "Your nav tags should wrap around the ul and its list items.",
+ "testString": "assert($('nav').children('ul').length == 1, 'Your nav tags should wrap around the ul and its list items.');"
},
{
- "text": "Your code should not have any div tags.'",
- "testString": "assert($('div').length == 0, 'Your code should not have any div tags.')"
+ "text": "Your code should not have any div tags.",
+ "testString": "assert($('div').length == 0, 'Your code should not have any div tags.');"
},
{
- "text": "Make sure your nav element has a closing tag.'",
- "testString": "assert(code.match(/<\\/nav>/g) && code.match(/<\\/nav>/g).length === code.match(//g).length, 'Make sure your nav element has a closing tag.')"
+ "text": "Make sure your nav element has a closing tag.",
+ "testString": "assert(code.match(/<\\/nav>/g) && code.match(/<\\/nav>/g).length === code.match(//g).length, 'Make sure your nav element has a closing tag.');"
}
],
"solutions": [],
@@ -414,20 +414,20 @@
],
"tests": [
{
- "text": "Your code should have one footer tag.'",
- "testString": "assert($('footer').length == 1, 'Your code should have one footer tag.')"
+ "text": "Your code should have one footer tag.",
+ "testString": "assert($('footer').length == 1, 'Your code should have one footer tag.');"
},
{
- "text": "Your code should not have any div tags.'",
- "testString": "assert($('div').length == 0, 'Your code should not have any div tags.')"
+ "text": "Your code should not have any div tags.",
+ "testString": "assert($('div').length == 0, 'Your code should not have any div tags.');"
},
{
- "text": "Your code should have an opening and closing footer tag.'",
- "testString": "assert(code.match(/\\s*© 2016 Camper Cat\\s*<\\/footer>/g), 'Your code should have an opening and closing footer tag.')"
+ "text": "Your code should have an opening and closing footer tag.",
+ "testString": "assert(code.match(/\\s*© 2016 Camper Cat\\s*<\\/footer>/g), 'Your code should have an opening and closing footer tag.');"
},
{
- "text": "Your code should not have any div tags.'",
- "testString": "assert($('div').length == 0, 'Your code should not have any div tags.')"
+ "text": "Your code should not have any div tags.",
+ "testString": "assert($('div').length == 0, 'Your code should not have any div tags.');"
}
],
"solutions": [],
@@ -497,32 +497,32 @@
],
"tests": [
{
- "text": "Your code should have one audio tag.'",
- "testString": "assert($('audio').length === 1, 'Your code should have one audio tag.')"
+ "text": "Your code should have one audio tag.",
+ "testString": "assert($('audio').length === 1, 'Your code should have one audio tag.');"
},
{
- "text": "Make sure your audio element has a closing tag.'",
- "testString": "assert(code.match(/<\\/audio>/g) && code.match(//g) && code.match(/<\\/audio>/g).length === code.match(//g).length, 'Make sure your audio element has a closing tag.')"
+ "text": "Make sure your audio element has a closing tag.",
+ "testString": "assert(code.match(/<\\/audio>/g) && code.match(//g) && code.match(/<\\/audio>/g).length === code.match(//g).length, 'Make sure your audio element has a closing tag.');"
},
{
- "text": "The audio tag should have the controls attribute.'",
- "testString": "assert($('audio').attr('controls'), 'The audio tag should have the controls attribute.')"
+ "text": "The audio tag should have the controls attribute.",
+ "testString": "assert($('audio').attr('controls'), 'The audio tag should have the controls attribute.');"
},
{
- "text": "Your code should have one source tag.'",
- "testString": "assert($('source').length === 1, 'Your code should have one source tag.')"
+ "text": "Your code should have one source tag.",
+ "testString": "assert($('source').length === 1, 'Your code should have one source tag.');"
},
{
- "text": "Your source tag should be inside the audio tags.'",
- "testString": "assert($('audio').children('source').length === 1, 'Your source tag should be inside the audio tags.')"
+ "text": "Your source tag should be inside the audio tags.",
+ "testString": "assert($('audio').children('source').length === 1, 'Your source tag should be inside the audio tags.');"
},
{
- "text": "The value for the src attribute on the source tag should match the link in the instructions exactly.'",
- "testString": "assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3', 'The value for the src attribute on the source tag should match the link in the instructions exactly.')"
+ "text": "The value for the src attribute on the source tag should match the link in the instructions exactly.",
+ "testString": "assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3', 'The value for the src attribute on the source tag should match the link in the instructions exactly.');"
},
{
- "text": "Your code should include a type attribute on the source tag with a value of audio/mpeg.'",
- "testString": "assert($('source').attr('type') === 'audio/mpeg', 'Your code should include a type attribute on the source tag with a value of audio/mpeg.')"
+ "text": "Your code should include a type attribute on the source tag with a value of audio/mpeg.",
+ "testString": "assert($('source').attr('type') === 'audio/mpeg', 'Your code should include a type attribute on the source tag with a value of audio/mpeg.');"
}
],
"solutions": [],
@@ -567,28 +567,28 @@
],
"tests": [
{
- "text": "Your code should have one figure tag.'",
- "testString": "assert($('figure').length == 1, 'Your code should have one figure tag.')"
+ "text": "Your code should have one figure tag.",
+ "testString": "assert($('figure').length == 1, 'Your code should have one figure tag.');"
},
{
- "text": "Your code should have one figcaption tag.'",
- "testString": "assert($('figcaption').length == 1, 'Your code should have one figcaption tag.')"
+ "text": "Your code should have one figcaption tag.",
+ "testString": "assert($('figcaption').length == 1, 'Your code should have one figcaption tag.');"
},
{
- "text": "Your code should not have any div tags.'",
- "testString": "assert($('div').length == 0, 'Your code should not have any div tags.')"
+ "text": "Your code should not have any div tags.",
+ "testString": "assert($('div').length == 0, 'Your code should not have any div tags.');"
},
{
- "text": "Your code should not have any p tags.'",
- "testString": "assert($('p').length == 0, 'Your code should not have any p tags.')"
+ "text": "Your code should not have any p tags.",
+ "testString": "assert($('p').length == 0, 'Your code should not have any p tags.');"
},
{
- "text": "The figcaption should be a child of the figure tag.'",
- "testString": "assert($('figure').children('figcaption').length == 1, 'The figcaption should be a child of the figure tag.')"
+ "text": "The figcaption should be a child of the figure tag.",
+ "testString": "assert($('figure').children('figcaption').length == 1, 'The figcaption should be a child of the figure tag.');"
},
{
- "text": "Make sure your figure element has a closing tag.'",
- "testString": "assert(code.match(/<\\/figure>/g) && code.match(/<\\/figure>/g).length === code.match(//g).length, 'Make sure your figure element has a closing tag.')"
+ "text": "Make sure your figure element has a closing tag.",
+ "testString": "assert(code.match(/<\\/figure>/g) && code.match(/<\\/figure>/g).length === code.match(//g).length, 'Make sure your figure element has a closing tag.');"
}
],
"solutions": [],
@@ -664,12 +664,12 @@
],
"tests": [
{
- "text": "Your code should have a for attribute on the label tag that is not empty.'",
- "testString": "assert($('label').attr('for'), 'Your code should have a for attribute on the label tag that is not empty.')"
+ "text": "Your code should have a for attribute on the label tag that is not empty.",
+ "testString": "assert($('label').attr('for'), 'Your code should have a for attribute on the label tag that is not empty.');"
},
{
- "text": "Your for attribute value should match the id value on the email input.'",
- "testString": "assert($('label').attr('for') == 'email', 'Your for attribute value should match the id value on the email input.')"
+ "text": "Your for attribute value should match the id value on the email input.",
+ "testString": "assert($('label').attr('for') == 'email', 'Your for attribute value should match the id value on the email input.');"
}
],
"solutions": [],
@@ -736,24 +736,24 @@
],
"tests": [
{
- "text": "Your code should have a fieldset tag around the radio button set.'",
- "testString": "assert($('fieldset').length == 1, 'Your code should have a fieldset tag around the radio button set.')"
+ "text": "Your code should have a fieldset tag around the radio button set.",
+ "testString": "assert($('fieldset').length == 1, 'Your code should have a fieldset tag around the radio button set.');"
},
{
- "text": "Make sure your fieldset element has a closing tag.'",
- "testString": "assert(code.match(/<\\/fieldset>/g) && code.match(/<\\/fieldset>/g).length === code.match(//g).length, 'Make sure your fieldset element has a closing tag.')"
+ "text": "Make sure your fieldset element has a closing tag.",
+ "testString": "assert(code.match(/<\\/fieldset>/g) && code.match(/<\\/fieldset>/g).length === code.match(//g).length, 'Make sure your fieldset element has a closing tag.');"
},
{
- "text": "Your code should have a legend tag around the text asking what level ninja a user is.'",
- "testString": "assert($('legend').length == 1, 'Your code should have a legend tag around the text asking what level ninja a user is.')"
+ "text": "Your code should have a legend tag around the text asking what level ninja a user is.",
+ "testString": "assert($('legend').length == 1, 'Your code should have a legend tag around the text asking what level ninja a user is.');"
},
{
- "text": "Your code should not have any div tags.'",
- "testString": "assert($('div').length == 0, 'Your code should not have any div tags.')"
+ "text": "Your code should not have any div tags.",
+ "testString": "assert($('div').length == 0, 'Your code should not have any div tags.');"
},
{
- "text": "Your code should no longer have a p tag around the text asking what level ninja a user is.'",
- "testString": "assert($('p').length == 4, 'Your code should no longer have a p tag around the text asking what level ninja a user is.')"
+ "text": "Your code should no longer have a p tag around the text asking what level ninja a user is.",
+ "testString": "assert($('p').length == 4, 'Your code should no longer have a p tag around the text asking what level ninja a user is.');"
}
],
"solutions": [],
@@ -831,20 +831,20 @@
],
"tests": [
{
- "text": "Your code should add one input tag for the date selector field.'",
- "testString": "assert($('input').length == 2, 'Your code should add one input tag for the date selector field.')"
+ "text": "Your code should add one input tag for the date selector field.",
+ "testString": "assert($('input').length == 2, 'Your code should add one input tag for the date selector field.');"
},
{
- "text": "Your input tag should have a type attribute with a value of date.'",
- "testString": "assert($('input').attr('type') == 'date', 'Your input tag should have a type attribute with a value of date.')"
+ "text": "Your input tag should have a type attribute with a value of date.",
+ "testString": "assert($('input').attr('type') == 'date', 'Your input tag should have a type attribute with a value of date.');"
},
{
- "text": "Your input tag should have an id attribute with a value of pickdate.'",
- "testString": "assert($('input').attr('id') == 'pickdate', 'Your input tag should have an id attribute with a value of pickdate.')"
+ "text": "Your input tag should have an id attribute with a value of pickdate.",
+ "testString": "assert($('input').attr('id') == 'pickdate', 'Your input tag should have an id attribute with a value of pickdate.');"
},
{
- "text": "Your input tag should have a name attribute with a value of date.'",
- "testString": "assert($('input').attr('name') == 'date', 'Your input tag should have a name attribute with a value of date.')"
+ "text": "Your input tag should have a name attribute with a value of date.",
+ "testString": "assert($('input').attr('name') == 'date', 'Your input tag should have a name attribute with a value of date.');"
}
],
"solutions": [],
@@ -900,20 +900,20 @@
],
"tests": [
{
- "text": "Your time tags should wrap around the text \"Thursday, September 15<sup>th</sup>\".'",
- "testString": "assert($('time').text().match(/Thursday, 'Your time tags should wrap around the text \"Thursday, September 15<sup>th</sup>\".')"
+ "text": "Your time tags should wrap around the text \"Thursday, September 15<sup>th</sup>\".",
+ "testString": "assert($('time').text().match(/Thursday, September 15th/g), 'Your time tags should wrap around the text \"Thursday, September 15<sup>th</sup>\".');"
},
{
- "text": "Your time tag should have a datetime attribute that is not empty.'",
- "testString": "assert($('time').attr('datetime'), 'Your time tag should have a datetime attribute that is not empty.')"
+ "text": "Your time tag should have a datetime attribute that is not empty.",
+ "testString": "assert($('time').attr('datetime'), 'Your time tag should have a datetime attribute that is not empty.');"
},
{
- "text": "Your datetime attribute should be set to a value of 2016-09-15.'",
- "testString": "assert($('time').attr('datetime') === \"2016-09-15\", 'Your datetime attribute should be set to a value of 2016-09-15.')"
+ "text": "Your datetime attribute should be set to a value of 2016-09-15.",
+ "testString": "assert($('time').attr('datetime') === \"2016-09-15\", 'Your datetime attribute should be set to a value of 2016-09-15.');"
},
{
- "text": "Make sure your time element has a closing tag.'",
- "testString": "assert(code.match(/<\\/time>/g) && code.match(/<\\/time>/g).length === 4, 'Make sure your time element has a closing tag.')"
+ "text": "Make sure your time element has a closing tag.",
+ "testString": "assert(code.match(/<\\/time>/g) && code.match(/<\\/time>/g).length === 4, 'Make sure your time element has a closing tag.');"
}
],
"solutions": [],
@@ -983,20 +983,20 @@
],
"tests": [
{
- "text": "Your code should set the position property of the sr-only class to a value of absolute.'",
- "testString": "assert($('.sr-only').css('position') == 'absolute', 'Your code should set the position property of the sr-only class to a value of absolute.')"
+ "text": "Your code should set the position property of the sr-only class to a value of absolute.",
+ "testString": "assert($('.sr-only').css('position') == 'absolute', 'Your code should set the position property of the sr-only class to a value of absolute.');"
},
{
- "text": "Your code should set the left property of the sr-only class to a value of -10000px.'",
- "testString": "assert($('.sr-only').css('left') == '-10000px', 'Your code should set the left property of the sr-only class to a value of -10000px.')"
+ "text": "Your code should set the left property of the sr-only class to a value of -10000px.",
+ "testString": "assert($('.sr-only').css('left') == '-10000px', 'Your code should set the left property of the sr-only class to a value of -10000px.');"
},
{
- "text": "Your code should set the width property of the sr-only class to a value of 1 pixel.'",
- "testString": "assert(code.match(/width:\\s*?1px/gi), 'Your code should set the width property of the sr-only class to a value of 1 pixel.')"
+ "text": "Your code should set the width property of the sr-only class to a value of 1 pixel.",
+ "testString": "assert(code.match(/width:\\s*?1px/gi), 'Your code should set the width property of the sr-only class to a value of 1 pixel.');"
},
{
- "text": "Your code should set the height property of the sr-only class to a value of 1 pixel.'",
- "testString": "assert(code.match(/height:\\s*?1px/gi), 'Your code should set the height property of the sr-only class to a value of 1 pixel.')"
+ "text": "Your code should set the height property of the sr-only class to a value of 1 pixel.",
+ "testString": "assert(code.match(/height:\\s*?1px/gi), 'Your code should set the height property of the sr-only class to a value of 1 pixel.');"
}
],
"solutions": [],
@@ -1112,12 +1112,12 @@
],
"tests": [
{
- "text": "Your code should change the text color for the body to the darker gray.'",
- "testString": "assert($('body').css('color') == 'rgb(99, 'Your code should change the text color for the body to the darker gray.')"
+ "text": "Your code should change the text color for the body to the darker gray.",
+ "testString": "assert($('body').css('color') == 'rgb(99, 99, 99)', 'Your code should change the text color for the body to the darker gray.');"
},
{
- "text": "Your code should not change the background-color for the body.'",
- "testString": "assert($('body').css('background-color') == 'rgb(255, 'Your code should not change the background-color for the body.')"
+ "text": "Your code should not change the background-color for the body.",
+ "testString": "assert($('body').css('background-color') == 'rgb(255, 255, 255)', 'Your code should not change the background-color for the body.');"
}
],
"solutions": [],
@@ -1169,12 +1169,12 @@
],
"tests": [
{
- "text": "Your code should only change the lightness value for the text color property to a value of 15%.'",
- "testString": "assert(code.match(/color:\\s*?hsl\\(0, 'Your code should only change the lightness value for the text color property to a value of 15%.')"
+ "text": "Your code should only change the lightness value for the text color property to a value of 15%.",
+ "testString": "assert(code.match(/color:\\s*?hsl\\(0,\\s*?55%,\\s*?15%\\)/gi), 'Your code should only change the lightness value for the text color property to a value of 15%.');"
},
{
- "text": "Your code should only change the lightness value for the background-color property to a value of 55%.'",
- "testString": "assert(code.match(/background-color:\\s*?hsl\\(120, 'Your code should only change the lightness value for the background-color property to a value of 55%.')"
+ "text": "Your code should only change the lightness value for the background-color property to a value of 55%.",
+ "testString": "assert(code.match(/background-color:\\s*?hsl\\(120,\\s*?25%,\\s*?55%\\)/gi), 'Your code should only change the lightness value for the background-color property to a value of 55%.');"
}
],
"solutions": [],
@@ -1225,8 +1225,8 @@
],
"tests": [
{
- "text": "Your code should change the text color for the button to the dark blue.'",
- "testString": "assert($('button').css('color') == 'rgb(0, 'Your code should change the text color for the button to the dark blue.')"
+ "text": "Your code should change the text color for the button to the dark blue.",
+ "testString": "assert($('button').css('color') == 'rgb(0, 51, 102)', 'Your code should change the text color for the button to the dark blue.');"
}
],
"solutions": [],
@@ -1274,12 +1274,12 @@
],
"tests": [
{
- "text": "Your code should move the anchor a tags from around the words \"Click here\" to wrap around the words \"information about batteries\".'",
- "testString": "assert($('a').text().match(/information about batteries/g), 'Your code should move the anchor a tags from around the words \"Click here\" to wrap around the words \"information about batteries\".')"
+ "text": "Your code should move the anchor a tags from around the words \"Click here\" to wrap around the words \"information about batteries\".",
+ "testString": "assert($('a').text().match(/information about batteries/g), 'Your code should move the anchor a tags from around the words \"Click here\" to wrap around the words \"information about batteries\".');"
},
{
- "text": "Make sure your a element has a closing tag.'",
- "testString": "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(//g).length, 'Make sure your a element has a closing tag.')"
+ "text": "Make sure your a element has a closing tag.",
+ "testString": "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/ /g).length, 'Make sure your a element has a closing tag.');"
}
],
"solutions": [],
@@ -1322,20 +1322,20 @@
],
"tests": [
{
- "text": "Your code should add an accesskey attribute to the a tag with the id of \"first\".'",
- "testString": "assert($('#first').attr('accesskey'), 'Your code should add an accesskey attribute to the a tag with the id of \"first\".')"
+ "text": "Your code should add an accesskey attribute to the a tag with the id of \"first\".",
+ "testString": "assert($('#first').attr('accesskey'), 'Your code should add an accesskey attribute to the a tag with the id of \"first\".');"
},
{
- "text": "Your code should add an accesskey attribute to the a tag with the id of \"second\".'",
- "testString": "assert($('#second').attr('accesskey'), 'Your code should add an accesskey attribute to the a tag with the id of \"second\".')"
+ "text": "Your code should add an accesskey attribute to the a tag with the id of \"second\".",
+ "testString": "assert($('#second').attr('accesskey'), 'Your code should add an accesskey attribute to the a tag with the id of \"second\".');"
},
{
- "text": "Your code should set the accesskey attribute on the a tag with the id of \"first\" to \"g\". Note that case matters.'",
- "testString": "assert($('#first').attr('accesskey') == 'g', 'Your code should set the accesskey attribute on the a tag with the id of \"first\" to \"g\". Note that case matters.')"
+ "text": "Your code should set the accesskey attribute on the a tag with the id of \"first\" to \"g\". Note that case matters.",
+ "testString": "assert($('#first').attr('accesskey') == 'g', 'Your code should set the accesskey attribute on the a tag with the id of \"first\" to \"g\". Note that case matters.');"
},
{
- "text": "Your code should set the accesskey attribute on the a tag with the id of \"second\" to \"c\". Note that case matters.'",
- "testString": "assert($('#second').attr('accesskey') == 'c', 'Your code should set the accesskey attribute on the a tag with the id of \"second\" to \"c\". Note that case matters.')"
+ "text": "Your code should set the accesskey attribute on the a tag with the id of \"second\" to \"c\". Note that case matters.",
+ "testString": "assert($('#second').attr('accesskey') == 'c', 'Your code should set the accesskey attribute on the a tag with the id of \"second\" to \"c\". Note that case matters.');"
}
],
"solutions": [],
@@ -1391,12 +1391,12 @@
],
"tests": [
{
- "text": "Your code should add a tabindex attribute to the p tag that holds the form instructions.'",
- "testString": "assert($('p').attr('tabindex'), 'Your code should add a tabindex attribute to the p tag that holds the form instructions.')"
+ "text": "Your code should add a tabindex attribute to the p tag that holds the form instructions.",
+ "testString": "assert($('p').attr('tabindex'), 'Your code should add a tabindex attribute to the p tag that holds the form instructions.');"
},
{
- "text": "Your code should set the tabindex attribute on the p tag to a value of 0.'",
- "testString": "assert($('p').attr('tabindex') == '0', 'Your code should set the tabindex attribute on the p tag to a value of 0.')"
+ "text": "Your code should set the tabindex attribute on the p tag to a value of 0.",
+ "testString": "assert($('p').attr('tabindex') == '0', 'Your code should set the tabindex attribute on the p tag to a value of 0.');"
}
],
"solutions": [],
@@ -1479,20 +1479,20 @@
],
"tests": [
{
- "text": "Your code should add a tabindex attribute to the search input tag.'",
- "testString": "assert($('#search').attr('tabindex'), 'Your code should add a tabindex attribute to the search input tag.')"
+ "text": "Your code should add a tabindex attribute to the search input tag.",
+ "testString": "assert($('#search').attr('tabindex'), 'Your code should add a tabindex attribute to the search input tag.');"
},
{
- "text": "Your code should add a tabindex attribute to the submit input tag.'",
- "testString": "assert($('#submit').attr('tabindex'), 'Your code should add a tabindex attribute to the submit input tag.')"
+ "text": "Your code should add a tabindex attribute to the submit input tag.",
+ "testString": "assert($('#submit').attr('tabindex'), 'Your code should add a tabindex attribute to the submit input tag.');"
},
{
- "text": "Your code should set the tabindex attribute on the search input tag to a value of 1.'",
- "testString": "assert($('#search').attr('tabindex') == '1', 'Your code should set the tabindex attribute on the search input tag to a value of 1.')"
+ "text": "Your code should set the tabindex attribute on the search input tag to a value of 1.",
+ "testString": "assert($('#search').attr('tabindex') == '1', 'Your code should set the tabindex attribute on the search input tag to a value of 1.');"
},
{
- "text": "Your code should set the tabindex attribute on the submit input tag to a value of 2.'",
- "testString": "assert($('#submit').attr('tabindex') == '2', 'Your code should set the tabindex attribute on the submit input tag to a value of 2.')"
+ "text": "Your code should set the tabindex attribute on the submit input tag to a value of 2.",
+ "testString": "assert($('#submit').attr('tabindex') == '2', 'Your code should set the tabindex attribute on the submit input tag to a value of 2.');"
}
],
"solutions": [],
diff --git a/packages/learn/seed/challenges/01-responsive-web-design/applied-visual-design.json b/packages/learn/seed/challenges/01-responsive-web-design/applied-visual-design.json
index a19e6ad8bb..e587c57755 100644
--- a/packages/learn/seed/challenges/01-responsive-web-design/applied-visual-design.json
+++ b/packages/learn/seed/challenges/01-responsive-web-design/applied-visual-design.json
@@ -19,12 +19,12 @@
],
"tests": [
{
- "text": "Your code should use the text-align property on the h4 tag to set it to center.'",
- "testString": "assert($('h4').css('text-align') == 'center', 'Your code should use the text-align property on the h4 tag to set it to center.')"
+ "text": "Your code should use the text-align property on the h4 tag to set it to center.",
+ "testString": "assert($('h4').css('text-align') == 'center', 'Your code should use the text-align property on the h4 tag to set it to center.');"
},
{
- "text": "Your code should use the text-align property on the p tag to set it to justify.'",
- "testString": "assert($('p').css('text-align') == 'justify', 'Your code should use the text-align property on the p tag to set it to justify.')"
+ "text": "Your code should use the text-align property on the p tag to set it to justify.",
+ "testString": "assert($('p').css('text-align') == 'justify', 'Your code should use the text-align property on the p tag to set it to justify.');"
}
],
"solutions": [],
@@ -89,8 +89,8 @@
],
"tests": [
{
- "text": "Your code should change the width property of the card to 245 pixels by using the fullCard class selector.'",
- "testString": "assert(code.match(/.fullCard\\s*{[\\s\\S][^}]*\\n*^\\s*width\\s*:\\s*245px\\s*;/gm), 'Your code should change the width property of the card to 245 pixels by using the fullCard class selector.')"
+ "text": "Your code should change the width property of the card to 245 pixels by using the fullCard class selector.",
+ "testString": "assert(code.match(/.fullCard\\s*{[\\s\\S][^}]*\\n*^\\s*width\\s*:\\s*245px\\s*;/gm), 'Your code should change the width property of the card to 245 pixels by using the fullCard class selector.');"
}
],
"solutions": [],
@@ -156,8 +156,8 @@
],
"tests": [
{
- "text": "Your code should change the h4 height property to a value of 25 pixels.'",
- "testString": "assert($('h4').css('height') == '25px', 'Your code should change the h4 height property to a value of 25 pixels.')"
+ "text": "Your code should change the h4 height property to a value of 25 pixels.",
+ "testString": "assert($('h4').css('height') == '25px', 'Your code should change the h4 height property to a value of 25 pixels.');"
}
],
"solutions": [],
@@ -223,16 +223,16 @@
],
"tests": [
{
- "text": "Your code should add one strong tag to the markup.'",
- "testString": "assert($('strong').length == 1, 'Your code should add one strong tag to the markup.')"
+ "text": "Your code should add one strong tag to the markup.",
+ "testString": "assert($('strong').length == 1, 'Your code should add one strong tag to the markup.');"
},
{
- "text": "The strong tag should be inside the p tag.'",
- "testString": "assert($('p').children('strong').length == 1, 'The strong tag should be inside the p tag.')"
+ "text": "The strong tag should be inside the p tag.",
+ "testString": "assert($('p').children('strong').length == 1, 'The strong tag should be inside the p tag.');"
},
{
- "text": "The strong tag should wrap around the words \"Stanford University\".'",
- "testString": "assert($('strong').text().match(/Stanford University/gi), 'The strong tag should wrap around the words \"Stanford University\".')"
+ "text": "The strong tag should wrap around the words \"Stanford University\".",
+ "testString": "assert($('strong').text().match(/Stanford University/gi), 'The strong tag should wrap around the words \"Stanford University\".');"
}
],
"solutions": [],
@@ -302,16 +302,16 @@
],
"tests": [
{
- "text": "Your code should add a u tag to the markup.'",
- "testString": "assert($('u').length === 1, 'Your code should add a u tag to the markup.')"
+ "text": "Your code should add a u tag to the markup.",
+ "testString": "assert($('u').length === 1, 'Your code should add a u tag to the markup.');"
},
{
- "text": "The u tag should wrap around the text \"Ph.D. students\".'",
- "testString": "assert($('u').text() === 'Ph.D. students', 'The u tag should wrap around the text \"Ph.D. students\".')"
+ "text": "The u tag should wrap around the text \"Ph.D. students\".",
+ "testString": "assert($('u').text() === 'Ph.D. students', 'The u tag should wrap around the text \"Ph.D. students\".');"
},
{
- "text": "The u tag should not wrap around the parent div tag.'",
- "testString": "assert($('u').children('div').length === 0, 'The u tag should not wrap around the parent div tag.')"
+ "text": "The u tag should not wrap around the parent div tag.",
+ "testString": "assert($('u').children('div').length === 0, 'The u tag should not wrap around the parent div tag.');"
}
],
"solutions": [],
@@ -380,12 +380,12 @@
],
"tests": [
{
- "text": "Your code should add an em tag to the markup.'",
- "testString": "assert($('em').length == 1, 'Your code should add an em tag to the markup.')"
+ "text": "Your code should add an em tag to the markup.",
+ "testString": "assert($('em').length == 1, 'Your code should add an em tag to the markup.');"
},
{
- "text": "The em tag should wrap around the p tag and its contents.'",
- "testString": "assert($('em').children('p').length == 1, 'The em tag should wrap around the p tag and its contents.')"
+ "text": "The em tag should wrap around the p tag and its contents.",
+ "testString": "assert($('em').children('p').length == 1, 'The em tag should wrap around the p tag and its contents.');"
}
],
"solutions": [],
@@ -454,16 +454,16 @@
],
"tests": [
{
- "text": "Your code should add one del tag to the markup.'",
- "testString": "assert($('del').length == 1, 'Your code should add one del tag to the markup.')"
+ "text": "Your code should add one del tag to the markup.",
+ "testString": "assert($('del').length == 1, 'Your code should add one del tag to the markup.');"
},
{
- "text": "A del tag should wrap around the Google text in the h4 tag. It should not contain the word Alphabet.'",
- "testString": "assert($('del').text().match(/Google/gi) && !$('del').text().match(/Alphabet/gi), 'A del tag should wrap around the Google text in the h4 tag. It should not contain the word Alphabet.')"
+ "text": "A del tag should wrap around the Google text in the h4 tag. It should not contain the word Alphabet.",
+ "testString": "assert($('del').text().match(/Google/gi) && !$('del').text().match(/Alphabet/gi), 'A del tag should wrap around the Google text in the h4 tag. It should not contain the word Alphabet.');"
},
{
- "text": "Include the word Alphabet in the h4 tag, without strikethrough formatting.'",
- "testString": "assert($('h4').html().match(/Alphabet/gi), 'Include the word Alphabet in the h4 tag, without strikethrough formatting.')"
+ "text": "Include the word Alphabet in the h4 tag, without strikethrough formatting.",
+ "testString": "assert($('h4').html().match(/Alphabet/gi), 'Include the word Alphabet in the h4 tag, without strikethrough formatting.');"
}
],
"solutions": [],
@@ -533,12 +533,12 @@
],
"tests": [
{
- "text": "Your code should add an hr tag to the markup.'",
- "testString": "assert($('hr').length == 1, 'Your code should add an hr tag to the markup.')"
+ "text": "Your code should add an hr tag to the markup.",
+ "testString": "assert($('hr').length == 1, 'Your code should add an hr tag to the markup.');"
},
{
- "text": "The hr tag should come between the title and the paragraph.'",
- "testString": "assert(code.match(/<\\/h4>\\s*?|\\s*?\\/>)\\s*?/gi), 'The hr tag should come between the title and the paragraph.')"
+ "text": "The hr tag should come between the title and the paragraph.",
+ "testString": "assert(code.match(/<\\/h4>\\s*?|\\s*?\\/>)\\s*?/gi), 'The hr tag should come between the title and the paragraph.');"
}
],
"solutions": [],
@@ -612,16 +612,16 @@
],
"tests": [
{
- "text": "Your code should add a background-color property to the h4 element set to rgba(45, 45, 45, 0.1).'",
- "testString": "assert(code.match(/background-color:\\s*?rgba\\(\\s*?45\\s*?, 'Your code should add a background-color property to the h4 element set to rgba(45, 45, 45, 0.1).')"
+ "text": "Your code should add a background-color property to the h4 element set to rgba(45, 45, 45, 0.1).",
+ "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 background-color property to the h4 element set to rgba(45, 45, 45, 0.1).');"
},
{
- "text": "Your code should add a padding property to the h4 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 padding property to the h4 element and set it to 10 pixels.')"
+ "text": "Your code should add a padding property to the h4 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 padding property to the h4 element and set it to 10 pixels.');"
},
{
- "text": "The height property on the h4 element should be removed.'",
- "testString": "assert(!($('h4').css('height') == '25px'), 'The height property on the h4 element should be removed.')"
+ "text": "The height property on the h4 element should be removed.",
+ "testString": "assert(!($('h4').css('height') == '25px'), 'The height property on the h4 element should be removed.');"
}
],
"solutions": [],
@@ -693,8 +693,8 @@
],
"tests": [
{
- "text": "Your code should add a font-size property to the h4 element set to 27 pixels.'",
- "testString": "assert($('h4').css('font-size') == '27px', 'Your code should add a font-size property to the h4 element set to 27 pixels.')"
+ "text": "Your code should add a font-size property to the h4 element set to 27 pixels.",
+ "testString": "assert($('h4').css('font-size') == '27px', 'Your code should add a font-size property to the h4 element set to 27 pixels.');"
}
],
"solutions": [],
@@ -769,12 +769,12 @@
],
"tests": [
{
- "text": "Your code should add a box-shadow property for the thumbnail id.'",
- "testString": "assert(code.match(/#thumbnail\\s*?{\\s*?box-shadow/g), 'Your code should add a box-shadow property for the thumbnail id.')"
+ "text": "Your code should add a box-shadow property for the thumbnail id.",
+ "testString": "assert(code.match(/#thumbnail\\s*?{\\s*?box-shadow/g), 'Your code should add a box-shadow property for the thumbnail id.');"
},
{
- "text": "You should use the given CSS for the box-shadow value.'",
- "testString": "assert(code.match(/box-shadow:\\s*?0\\s+?10px\\s+?20px\\s+?rgba\\(\\s*?0\\s*?, 'You should use the given CSS for the box-shadow value.')"
+ "text": "You should use the given CSS for the box-shadow 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 box-shadow value.');"
}
],
"solutions": [],
@@ -851,8 +851,8 @@
],
"tests": [
{
- "text": "Your code should set the opacity property to 0.7 on the anchor tags by selecting the class of links.'",
- "testString": "assert.approximately(parseFloat($('.links').css('opacity')), 'Your code should set the opacity property to 0.7 on the anchor tags by selecting the class of links.')"
+ "text": "Your code should set the opacity property to 0.7 on the anchor tags by selecting the class of links.",
+ "testString": "assert.approximately(parseFloat($('.links').css('opacity')), 0.7, 0.1, 'Your code should set the opacity property to 0.7 on the anchor tags by selecting the class of links.');"
}
],
"solutions": [],
@@ -930,12 +930,12 @@
],
"tests": [
{
- "text": "The h4 text should be uppercase.'",
- "testString": "assert($('h4').css('text-transform') === 'uppercase', 'The h4 text should be uppercase.')"
+ "text": "The h4 text should be uppercase.",
+ "testString": "assert($('h4').css('text-transform') === 'uppercase', 'The h4 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.')"
+ "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.');"
}
],
"solutions": [],
@@ -1012,28 +1012,28 @@
],
"tests": [
{
- "text": "Your code should set the font-size property for the h1 tag to 68 pixels.'",
- "testString": "assert($('h1').css('font-size') == '68px', 'Your code should set the font-size property for the h1 tag to 68 pixels.')"
+ "text": "Your code should set the font-size property for the h1 tag to 68 pixels.",
+ "testString": "assert($('h1').css('font-size') == '68px', 'Your code should set the font-size property for the h1 tag to 68 pixels.');"
},
{
- "text": "Your code should set the font-size property for the h2 tag to 52 pixels.'",
- "testString": "assert($('h2').css('font-size') == '52px', 'Your code should set the font-size property for the h2 tag to 52 pixels.')"
+ "text": "Your code should set the font-size property for the h2 tag to 52 pixels.",
+ "testString": "assert($('h2').css('font-size') == '52px', 'Your code should set the font-size property for the h2 tag to 52 pixels.');"
},
{
- "text": "Your code should set the font-size property for the h3 tag to 40 pixels.'",
- "testString": "assert($('h3').css('font-size') == '40px', 'Your code should set the font-size property for the h3 tag to 40 pixels.')"
+ "text": "Your code should set the font-size property for the h3 tag to 40 pixels.",
+ "testString": "assert($('h3').css('font-size') == '40px', 'Your code should set the font-size property for the h3 tag to 40 pixels.');"
},
{
- "text": "Your code should set the font-size property for the h4 tag to 32 pixels.'",
- "testString": "assert($('h4').css('font-size') == '32px', 'Your code should set the font-size property for the h4 tag to 32 pixels.')"
+ "text": "Your code should set the font-size property for the h4 tag to 32 pixels.",
+ "testString": "assert($('h4').css('font-size') == '32px', 'Your code should set the font-size property for the h4 tag to 32 pixels.');"
},
{
- "text": "Your code should set the font-size property for the h5 tag to 21 pixels.'",
- "testString": "assert($('h5').css('font-size') == '21px', 'Your code should set the font-size property for the h5 tag to 21 pixels.')"
+ "text": "Your code should set the font-size property for the h5 tag to 21 pixels.",
+ "testString": "assert($('h5').css('font-size') == '21px', 'Your code should set the font-size property for the h5 tag to 21 pixels.');"
},
{
- "text": "Your code should set the font-size property for the h6 tag to 14 pixels.'",
- "testString": "assert($('h6').css('font-size') == '14px', 'Your code should set the font-size property for the h6 tag to 14 pixels.')"
+ "text": "Your code should set the font-size property for the h6 tag to 14 pixels.",
+ "testString": "assert($('h6').css('font-size') == '14px', 'Your code should set the font-size property for the h6 tag to 14 pixels.');"
}
],
"solutions": [],
@@ -1079,28 +1079,28 @@
],
"tests": [
{
- "text": "Your code should set the font-weight property for the h1 tag to 800.'",
- "testString": "assert($('h1').css('font-weight') == '800', 'Your code should set the font-weight property for the h1 tag to 800.')"
+ "text": "Your code should set the font-weight property for the h1 tag to 800.",
+ "testString": "assert($('h1').css('font-weight') == '800', 'Your code should set the font-weight property for the h1 tag to 800.');"
},
{
- "text": "Your code should set the font-weight property for the h2 tag to 600.'",
- "testString": "assert($('h2').css('font-weight') == '600', 'Your code should set the font-weight property for the h2 tag to 600.')"
+ "text": "Your code should set the font-weight property for the h2 tag to 600.",
+ "testString": "assert($('h2').css('font-weight') == '600', 'Your code should set the font-weight property for the h2 tag to 600.');"
},
{
- "text": "Your code should set the font-weight property for the h3 tag to 500.'",
- "testString": "assert($('h3').css('font-weight') == '500', 'Your code should set the font-weight property for the h3 tag to 500.')"
+ "text": "Your code should set the font-weight property for the h3 tag to 500.",
+ "testString": "assert($('h3').css('font-weight') == '500', 'Your code should set the font-weight property for the h3 tag to 500.');"
},
{
- "text": "Your code should set the font-weight property for the h4 tag to 400.'",
- "testString": "assert($('h4').css('font-weight') == '400', 'Your code should set the font-weight property for the h4 tag to 400.')"
+ "text": "Your code should set the font-weight property for the h4 tag to 400.",
+ "testString": "assert($('h4').css('font-weight') == '400', 'Your code should set the font-weight property for the h4 tag to 400.');"
},
{
- "text": "Your code should set the font-weight property for the h5 tag to 300.'",
- "testString": "assert($('h5').css('font-weight') == '300', 'Your code should set the font-weight property for the h5 tag to 300.')"
+ "text": "Your code should set the font-weight property for the h5 tag to 300.",
+ "testString": "assert($('h5').css('font-weight') == '300', 'Your code should set the font-weight property for the h5 tag to 300.');"
},
{
- "text": "Your code should set the font-weight property for the h6 tag to 200.'",
- "testString": "assert($('h6').css('font-weight') == '200', 'Your code should set the font-weight property for the h6 tag to 200.')"
+ "text": "Your code should set the font-weight property for the h6 tag to 200.",
+ "testString": "assert($('h6').css('font-weight') == '200', 'Your code should set the font-weight property for the h6 tag to 200.');"
}
],
"solutions": [],
@@ -1163,8 +1163,8 @@
],
"tests": [
{
- "text": "Your p tag should have a font-size of 16 pixels.'",
- "testString": "assert($('p').css('font-size') == '16px', 'Your p tag should have a font-size of 16 pixels.')"
+ "text": "Your p tag should have a font-size of 16 pixels.",
+ "testString": "assert($('p').css('font-size') == '16px', 'Your p tag should have a font-size of 16 pixels.');"
}
],
"solutions": [],
@@ -1203,8 +1203,8 @@
],
"tests": [
{
- "text": "Your code should set the line-height of the p tag to 25 pixels.'",
- "testString": "assert($('p').css('line-height') == '25px', 'Your code should set the line-height of the p tag to 25 pixels.')"
+ "text": "Your code should set the line-height of the p tag to 25 pixels.",
+ "testString": "assert($('p').css('line-height') == '25px', 'Your code should set the line-height of the p tag to 25 pixels.');"
}
],
"solutions": [],
@@ -1246,12 +1246,12 @@
],
"tests": [
{
- "text": "The anchor tag color should remain black, only add CSS rules for the :hover state.'",
- "testString": "assert($('a').css('color') == 'rgb(0, 'The anchor tag color should remain black, only add CSS rules for the :hover state.')"
+ "text": "The anchor tag color should remain black, only add CSS rules for the :hover state.",
+ "testString": "assert($('a').css('color') == 'rgb(0, 0, 0)', 'The anchor tag color should remain black, only add CSS rules for the :hover state.');"
},
{
- "text": "The anchor tag should have a color of blue on hover.'",
- "testString": "assert(code.match(/a:hover\\s*?{\\s*?color:\\s*?blue;\\s*?}/gi), 'The anchor tag should have a color of blue on hover.')"
+ "text": "The anchor tag should have a color of blue on hover.",
+ "testString": "assert(code.match(/a:hover\\s*?{\\s*?color:\\s*?blue;\\s*?}/gi), 'The anchor tag should have a color of blue on hover.');"
}
],
"solutions": [],
@@ -1295,12 +1295,12 @@
],
"tests": [
{
- "text": "The h2 element should have a position property set to relative.'",
- "testString": "assert($('h2').css('position') == 'relative', 'The h2 element should have a position property set to relative.')"
+ "text": "The h2 element should have a position property set to relative.",
+ "testString": "assert($('h2').css('position') == 'relative', 'The h2 element should have a position property set to relative.');"
},
{
- "text": "Your code should use a CSS offset to relatively position the h2 15px away from the top of where it normally sits.'",
- "testString": "assert($('h2').css('top') == '15px', 'Your code should use a CSS offset to relatively position the h2 15px away from the top of where it normally sits.')"
+ "text": "Your code should use a CSS offset to relatively position the h2 15px away from the top of where it normally sits.",
+ "testString": "assert($('h2').css('top') == '15px', 'Your code should use a CSS offset to relatively position the h2 15px away from the top of where it normally sits.');"
}
],
"solutions": [],
@@ -1343,12 +1343,12 @@
],
"tests": [
{
- "text": "Your code should use a CSS offset to relatively position the h2 10px upwards. In other words, move it 10px away from the bottom of where it normally sits.'",
- "testString": "assert($('h2').css('bottom') == '10px', 'Your code should use a CSS offset to relatively position the h2 10px upwards. In other words, move it 10px away from the bottom of where it normally sits.')"
+ "text": "Your code should use a CSS offset to relatively position the h2 10px upwards. In other words, move it 10px away from the bottom of where it normally sits.",
+ "testString": "assert($('h2').css('bottom') == '10px', 'Your code should use a CSS offset to relatively position the h2 10px upwards. In other words, move it 10px away from the bottom of where it normally sits.');"
},
{
- "text": "Your code should use a CSS offset to relatively position the h2 15px towards the right. In other words, move it 15px away from the left of where it normally sits.'",
- "testString": "assert($('h2').css('left') == '15px', 'Your code should use a CSS offset to relatively position the h2 15px towards the right. In other words, move it 15px away from the left of where it normally sits.')"
+ "text": "Your code should use a CSS offset to relatively position the h2 15px towards the right. In other words, move it 15px away from the left of where it normally sits.",
+ "testString": "assert($('h2').css('left') == '15px', 'Your code should use a CSS offset to relatively position the h2 15px towards the right. In other words, move it 15px away from the left of where it normally sits.');"
}
],
"solutions": [],
@@ -1394,16 +1394,16 @@
],
"tests": [
{
- "text": "The #searchbar element should have a position set to absolute.'",
- "testString": "assert($('#searchbar').css('position') == 'absolute', 'The #searchbar element should have a position set to absolute.')"
+ "text": "The #searchbar element should have a position set to absolute.",
+ "testString": "assert($('#searchbar').css('position') == 'absolute', 'The #searchbar element should have a position set to absolute.');"
},
{
- "text": "Your code should use the top CSS offset of 0.5 pixels on the #searchbar element.'",
- "testString": "assert($('#searchbar').css('top') == '0.5px', 'Your code should use the top CSS offset of 0.5 pixels on the #searchbar element.')"
+ "text": "Your code should use the top CSS offset of 0.5 pixels on the #searchbar element.",
+ "testString": "assert($('#searchbar').css('top') == '0.5px', 'Your code should use the top CSS offset of 0.5 pixels on the #searchbar element.');"
},
{
- "text": "Your code should use the right CSS offset of 0.5 pixels on the #searchbar element.'",
- "testString": "assert($('#searchbar').css('right') == '0.5px', 'Your code should use the right CSS offset of 0.5 pixels on the #searchbar element.')"
+ "text": "Your code should use the right CSS offset of 0.5 pixels on the #searchbar element.",
+ "testString": "assert($('#searchbar').css('right') == '0.5px', 'Your code should use the right CSS offset of 0.5 pixels on the #searchbar element.');"
}
],
"solutions": [],
@@ -1455,16 +1455,16 @@
],
"tests": [
{
- "text": "The #navbar element should have a position set to fixed.'",
- "testString": "assert($('#navbar').css('position') == 'fixed', 'The #navbar element should have a position set to fixed.')"
+ "text": "The #navbar element should have a position set to fixed.",
+ "testString": "assert($('#navbar').css('position') == 'fixed', 'The #navbar element should have a position set to fixed.');"
},
{
- "text": "Your code should use the top CSS offset of 0 pixels on the #navbar element.'",
- "testString": "assert($('#navbar').css('top') == '0px', 'Your code should use the top CSS offset of 0 pixels on the #navbar element.')"
+ "text": "Your code should use the top CSS offset of 0 pixels on the #navbar element.",
+ "testString": "assert($('#navbar').css('top') == '0px', 'Your code should use the top CSS offset of 0 pixels on the #navbar element.');"
},
{
- "text": "Your code should use the left CSS offset of 0 pixels on the #navbar element.'",
- "testString": "assert($('#navbar').css('left') == '0px', 'Your code should use the left CSS offset of 0 pixels on the #navbar element.')"
+ "text": "Your code should use the left CSS offset of 0 pixels on the #navbar element.",
+ "testString": "assert($('#navbar').css('left') == '0px', 'Your code should use the left CSS offset of 0 pixels on the #navbar element.');"
}
],
"solutions": [],
@@ -1527,12 +1527,12 @@
],
"tests": [
{
- "text": "The element with id left should have a float value of left.'",
- "testString": "assert($('#left').css('float') == 'left', 'The element with id left should have a float value of left.')"
+ "text": "The element with id left should have a float value of left.",
+ "testString": "assert($('#left').css('float') == 'left', 'The element with id left should have a float value of left.');"
},
{
- "text": "The element with id right should have a float value of right.'",
- "testString": "assert($('#right').css('float') == 'right', 'The element with id right should have a float value of right.')"
+ "text": "The element with id right should have a float value of right.",
+ "testString": "assert($('#right').css('float') == 'right', 'The element with id right should have a float value of right.');"
}
],
"solutions": [],
@@ -1592,8 +1592,8 @@
],
"tests": [
{
- "text": "The element with class first should have a z-index value of 2.'",
- "testString": "assert($('.first').css('z-index') == '2', 'The element with class first should have a z-index value of 2.')"
+ "text": "The element with class first should have a z-index value of 2.",
+ "testString": "assert($('.first').css('z-index') == '2', 'The element with class first should have a z-index value of 2.');"
}
],
"solutions": [],
@@ -1648,8 +1648,8 @@
],
"tests": [
{
- "text": "The div should have a margin set to auto.'",
- "testString": "assert(code.match(/margin:\\s*?auto;/g), 'The div should have a margin set to auto.')"
+ "text": "The div should have a margin set to auto.",
+ "testString": "assert(code.match(/margin:\\s*?auto;/g), 'The div should have a margin set to auto.');"
}
],
"solutions": [],
@@ -1694,12 +1694,12 @@
],
"tests": [
{
- "text": "The div element with class blue should have a background-color of blue.'",
- "testString": "assert($('.blue').css('background-color') == 'rgb(0, 'The div element with class blue should have a background-color of blue.')"
+ "text": "The div element with class blue should have a background-color of blue.",
+ "testString": "assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'The div element with class blue should have a background-color of blue.');"
},
{
- "text": "The div element with class yellow should have a background-color of yellow.'",
- "testString": "assert($('.yellow').css('background-color') == 'rgb(255, 'The div element with class yellow should have a background-color of yellow.')"
+ "text": "The div element with class yellow should have a background-color of yellow.",
+ "testString": "assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)', 'The div element with class yellow should have a background-color of yellow.');"
}
],
"solutions": [],
@@ -1752,16 +1752,16 @@
],
"tests": [
{
- "text": "The div element with class orange should have a background-color of orange.'",
- "testString": "assert($('.orange').css('background-color') == 'rgb(255, 'The div element with class orange should have a background-color of orange.')"
+ "text": "The div element with class orange should have a background-color of orange.",
+ "testString": "assert($('.orange').css('background-color') == 'rgb(255, 125, 0)', 'The div element with class orange should have a background-color of orange.');"
},
{
- "text": "The div element with class cyan should have a background-color of cyan.'",
- "testString": "assert($('.cyan').css('background-color') == 'rgb(0, 'The div element with class cyan should have a background-color of cyan.')"
+ "text": "The div element with class cyan should have a background-color of cyan.",
+ "testString": "assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'The div element with class cyan should have a background-color of cyan.');"
},
{
- "text": "The div element with class raspberry should have a background-color of raspberry.'",
- "testString": "assert($('.raspberry').css('background-color') == 'rgb(255, 'The div element with class raspberry should have a background-color of raspberry.')"
+ "text": "The div element with class raspberry should have a background-color of raspberry.",
+ "testString": "assert($('.raspberry').css('background-color') == 'rgb(255, 0, 125)', 'The div element with class raspberry should have a background-color of raspberry.');"
}
],
"solutions": [],
@@ -1819,20 +1819,20 @@
],
"tests": [
{
- "text": "The header element should have a background-color of #09A7A1.'",
- "testString": "assert($('header').css('background-color') == 'rgb(9, 'The header element should have a background-color of #09A7A1.')"
+ "text": "The header element should have a background-color of #09A7A1.",
+ "testString": "assert($('header').css('background-color') == 'rgb(9, 167, 161)', 'The header element should have a background-color of #09A7A1.');"
},
{
- "text": "The footer element should have a background-color of #09A7A1.'",
- "testString": "assert($('footer').css('background-color') == 'rgb(9, 'The footer element should have a background-color of #09A7A1.')"
+ "text": "The footer element should have a background-color of #09A7A1.",
+ "testString": "assert($('footer').css('background-color') == 'rgb(9, 167, 161)', 'The footer element should have a background-color of #09A7A1.');"
},
{
- "text": "The h2 element should have a color of #09A7A1.'",
- "testString": "assert($('h2').css('color') == 'rgb(9, 'The h2 element should have a color of #09A7A1.')"
+ "text": "The h2 element should have a color of #09A7A1.",
+ "testString": "assert($('h2').css('color') == 'rgb(9, 167, 161)', 'The h2 element should have a color of #09A7A1.');"
},
{
- "text": "The button element should have a background-color of #FF790E.'",
- "testString": "assert($('button').css('background-color') == 'rgb(255, 'The button element should have a background-color of #FF790E.')"
+ "text": "The button element should have a background-color of #FF790E.",
+ "testString": "assert($('button').css('background-color') == 'rgb(255, 121, 14)', 'The button element should have a background-color of #FF790E.');"
}
],
"solutions": [],
@@ -1906,28 +1906,28 @@
],
"tests": [
{
- "text": "Your code should use the hsl() property to declare the color green.'",
- "testString": "assert(code.match(/\\.green\\s*?{\\s*?background-color:\\s*?hsl/gi), 'Your code should use the hsl() property to declare the color green.')"
+ "text": "Your code should use the hsl() property to declare the color green.",
+ "testString": "assert(code.match(/\\.green\\s*?{\\s*?background-color:\\s*?hsl/gi), 'Your code should use the hsl() property to declare the color green.');"
},
{
- "text": "Your code should use the hsl() property to declare the color cyan.'",
- "testString": "assert(code.match(/\\.cyan\\s*?{\\s*?background-color:\\s*?hsl/gi), 'Your code should use the hsl() property to declare the color cyan.')"
+ "text": "Your code should use the hsl() property to declare the color cyan.",
+ "testString": "assert(code.match(/\\.cyan\\s*?{\\s*?background-color:\\s*?hsl/gi), 'Your code should use the hsl() property to declare the color cyan.');"
},
{
- "text": "Your code should use the hsl() property to declare the color blue.'",
- "testString": "assert(code.match(/\\.blue\\s*?{\\s*?background-color:\\s*?hsl/gi), 'Your code should use the hsl() property to declare the color blue.')"
+ "text": "Your code should use the hsl() property to declare the color blue.",
+ "testString": "assert(code.match(/\\.blue\\s*?{\\s*?background-color:\\s*?hsl/gi), 'Your code should use the hsl() property to declare the color blue.');"
},
{
- "text": "The div element with class green should have a background-color of green.'",
- "testString": "assert($('.green').css('background-color') == 'rgb(0, 'The div element with class green should have a background-color of green.')"
+ "text": "The div element with class green should have a background-color of green.",
+ "testString": "assert($('.green').css('background-color') == 'rgb(0, 255, 0)', 'The div element with class green should have a background-color of green.');"
},
{
- "text": "The div element with class cyan should have a background-color of cyan.'",
- "testString": "assert($('.cyan').css('background-color') == 'rgb(0, 'The div element with class cyan should have a background-color of cyan.')"
+ "text": "The div element with class cyan should have a background-color of cyan.",
+ "testString": "assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'The div element with class cyan should have a background-color of cyan.');"
},
{
- "text": "The div element with class blue should have a background-color of blue.'",
- "testString": "assert($('.blue').css('background-color') == 'rgb(0, 'The div element with class blue should have a background-color of blue.')"
+ "text": "The div element with class blue should have a background-color of blue.",
+ "testString": "assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'The div element with class blue should have a background-color of blue.');"
}
],
"solutions": [],
@@ -1985,8 +1985,8 @@
],
"tests": [
{
- "text": "The nav element should have a background-color of the adjusted cyan tone using the hsl() property.'",
- "testString": "assert(code.match(/nav\\s*?{\\s*?background-color:\\s*?hsl\\(180, 'The nav element should have a background-color of the adjusted cyan tone using the hsl() property.')"
+ "text": "The nav element should have a background-color of the adjusted cyan tone using the hsl() property.",
+ "testString": "assert(code.match(/nav\\s*?{\\s*?background-color:\\s*?hsl\\(180,\\s*?80%,\\s*?25%\\)/gi), 'The nav element should have a background-color of the adjusted cyan tone using the hsl() property.');"
}
],
"solutions": [],
@@ -2063,8 +2063,8 @@
],
"tests": [
{
- "text": "The div element should have a linear-gradient background with the specified direction and colors.'",
- "testString": "assert(code.match(/background:\\s*?linear-gradient\\(35deg, 'The div element should have a linear-gradient background with the specified direction and colors.')"
+ "text": "The div element should have a linear-gradient background with the specified direction and colors.",
+ "testString": "assert(code.match(/background:\\s*?linear-gradient\\(35deg,\\s*?(#CCFFFF|#CFF),\\s*?(#FFCCCC|#FCC)\\);/gi), 'The div element should have a linear-gradient background with the specified direction and colors.');"
}
],
"solutions": [],
@@ -2113,28 +2113,28 @@
],
"tests": [
{
- "text": "The angle of the repeating-linear-gradient() should be 45deg.'",
- "testString": "assert(code.match(/background:\\s*?repeating-linear-gradient\\(\\s*?45deg/gi), 'The angle of the repeating-linear-gradient() should be 45deg.')"
+ "text": "The angle of the repeating-linear-gradient() should be 45deg.",
+ "testString": "assert(code.match(/background:\\s*?repeating-linear-gradient\\(\\s*?45deg/gi), 'The angle of the repeating-linear-gradient() should be 45deg.');"
},
{
- "text": "The angle of the repeating-linear-gradient() should no longer be 90deg'",
- "testString": "assert(!code.match(/90deg/gi), 'The angle of the repeating-linear-gradient() should no longer be 90deg')"
+ "text": "The angle of the repeating-linear-gradient() should no longer be 90deg",
+ "testString": "assert(!code.match(/90deg/gi), 'The angle of the repeating-linear-gradient() should no longer be 90deg');"
},
{
- "text": "The color stop at 0 pixels should be yellow.'",
- "testString": "assert(code.match(/yellow\\s+?0px/gi), 'The color stop at 0 pixels should be yellow.')"
+ "text": "The color stop at 0 pixels should be yellow.",
+ "testString": "assert(code.match(/yellow\\s+?0px/gi), 'The color stop at 0 pixels should be yellow.');"
},
{
- "text": "One color stop at 40 pixels should be yellow.'",
- "testString": "assert(code.match(/yellow\\s+?40px/gi), 'One color stop at 40 pixels should be yellow.')"
+ "text": "One color stop at 40 pixels should be yellow.",
+ "testString": "assert(code.match(/yellow\\s+?40px/gi), 'One color stop at 40 pixels should be yellow.');"
},
{
- "text": "The second color stop at 40 pixels should be black.'",
- "testString": "assert(code.match(/yellow\\s+?40px, 'The second color stop at 40 pixels should be black.')"
+ "text": "The second color stop at 40 pixels should be black.",
+ "testString": "assert(code.match(/yellow\\s+?40px,\\s*?black\\s+?40px/gi), 'The second color stop at 40 pixels should be black.');"
},
{
- "text": "The last color stop at 80 pixels should be black.'",
- "testString": "assert(code.match(/black\\s+?80px/gi), 'The last color stop at 80 pixels should be black.')"
+ "text": "The last color stop at 80 pixels should be black.",
+ "testString": "assert(code.match(/black\\s+?80px/gi), 'The last color stop at 80 pixels should be black.');"
}
],
"solutions": [],
@@ -2184,8 +2184,8 @@
],
"tests": [
{
- "text": "Your body element should have a background property set to a url() with the given link.'",
- "testString": "assert(code.match(/background:\\s*?url\\((\"|')https:\\/\\/i\\.imgur\\.com\\/MJAkxbh\\.png(\"|')\\)/gi), 'Your body element should have a background property set to a url() with the given link.')"
+ "text": "Your body element should have a background property set to a url() with the given link.",
+ "testString": "assert(code.match(/background:\\s*?url\\((\"|')https:\\/\\/i\\.imgur\\.com\\/MJAkxbh\\.png(\"|')\\)/gi), 'Your body element should have a background property set to a url() with the given link.');"
}
],
"solutions": [],
@@ -2224,8 +2224,8 @@
],
"tests": [
{
- "text": "Set the transform property for #ball2 to scale it 1.5 times its size.'",
- "testString": "assert(code.match(/#ball2\\s*?{\\s*?left:\\s*?65%;\\s*?transform:\\s*?scale\\(1\\.5\\);/gi), 'Set the transform property for #ball2 to scale it 1.5 times its size.')"
+ "text": "Set the transform property for #ball2 to scale it 1.5 times its size.",
+ "testString": "assert(code.match(/#ball2\\s*?{\\s*?left:\\s*?65%;\\s*?transform:\\s*?scale\\(1\\.5\\);/gi), 'Set the transform property for #ball2 to scale it 1.5 times its size.');"
}
],
"solutions": [],
@@ -2284,8 +2284,8 @@
],
"tests": [
{
- "text": "The size of the div 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 div element should scale 1.1 times when the user hovers over it.')"
+ "text": "The size of the div 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 div element should scale 1.1 times when the user hovers over it.');"
}
],
"solutions": [],
@@ -2337,8 +2337,8 @@
],
"tests": [
{
- "text": "The element with id bottom 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 bottom should be skewed by 24 degrees along its X-axis.')"
+ "text": "The element with id bottom 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 bottom should be skewed by 24 degrees along its X-axis.');"
}
],
"solutions": [],
@@ -2388,8 +2388,8 @@
],
"tests": [
{
- "text": "The element with id top 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 top should be skewed by -10 degrees along its Y-axis.')"
+ "text": "The element with id top 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 top should be skewed by -10 degrees along its Y-axis.');"
}
],
"solutions": [],
@@ -2441,16 +2441,16 @@
],
"tests": [
{
- "text": "The value of the background-color property should be set to transparent.'",
- "testString": "assert(code.match(/background-color:\\s*?transparent;/gi), 'The value of the background-color property should be set to transparent.')"
+ "text": "The value of the background-color property should be set to transparent.",
+ "testString": "assert(code.match(/background-color:\\s*?transparent;/gi), 'The value of the background-color property should be set to transparent.');"
},
{
- "text": "The value of the border-radius property should be set to 50%.'",
- "testString": "assert(code.match(/border-radius:\\s*?50%;/gi), 'The value of the border-radius property should be set to 50%.')"
+ "text": "The value of the border-radius property should be set to 50%.",
+ "testString": "assert(code.match(/border-radius:\\s*?50%;/gi), 'The value of the border-radius property should be set to 50%.');"
},
{
- "text": "The value of the box-shadow property should be set to 25px for offset-x, 10px for offset-y, 0 for blur-radius, 0 for spread-radius, 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 box-shadow property should be set to 25px for offset-x, 10px for offset-y, 0 for blur-radius, 0 for spread-radius, and finally blue for the color.')"
+ "text": "The value of the box-shadow property should be set to 25px for offset-x, 10px for offset-y, 0 for blur-radius, 0 for spread-radius, 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 box-shadow property should be set to 25px for offset-x, 10px for offset-y, 0 for blur-radius, 0 for spread-radius, and finally blue for the color.');"
}
],
"solutions": [],
@@ -2505,20 +2505,20 @@
],
"tests": [
{
- "text": "The background-color property of the heart:after selector should be pink.'",
- "testString": "assert(code.match(/\\.heart:after\\s*?{\\s*?background-color:\\s*?pink;/gi), 'The background-color property of the heart:after selector should be pink.')"
+ "text": "The background-color property of the heart:after selector should be pink.",
+ "testString": "assert(code.match(/\\.heart:after\\s*?{\\s*?background-color:\\s*?pink;/gi), 'The background-color property of the heart:after selector should be pink.');"
},
{
- "text": "The border-radius of the heart:after selector should be 50%.'",
- "testString": "assert(code.match(/border-radius:\\s*?50%/gi).length == 2, 'The border-radius of the heart:after selector should be 50%.')"
+ "text": "The border-radius of the heart:after selector should be 50%.",
+ "testString": "assert(code.match(/border-radius:\\s*?50%/gi).length == 2, 'The border-radius of the heart:after selector should be 50%.');"
},
{
- "text": "The transform property for the heart class should use a rotate() function set to -45 degrees.'",
- "testString": "assert(code.match(/transform:\\s*?rotate\\(-45deg\\)/gi), 'The transform property for the heart class should use a rotate() function set to -45 degrees.')"
+ "text": "The transform property for the heart class should use a rotate() function set to -45 degrees.",
+ "testString": "assert(code.match(/transform:\\s*?rotate\\(-45deg\\)/gi), 'The transform property for the heart class should use a rotate() function set to -45 degrees.');"
},
{
- "text": "The content of the heart:before selector should be an empty string.'",
- "testString": "assert(code.match(/\\.heart:before\\s*?{\\s*?content:\\s*?(\"|')\\1;/gi), 'The content of the heart:before selector should be an empty string.')"
+ "text": "The content of the heart:before selector should be an empty string.",
+ "testString": "assert(code.match(/\\.heart:before\\s*?{\\s*?content:\\s*?(\"|')\\1;/gi), 'The content of the heart:before selector should be an empty string.');"
}
],
"solutions": [],
@@ -2589,28 +2589,28 @@
],
"tests": [
{
- "text": "The element with id of rect should have an animation-name property with a value of rainbow.'",
- "testString": "assert($('#rect').css('animation-name') == 'rainbow', 'The element with id of rect should have an animation-name property with a value of rainbow.')"
+ "text": "The element with id of rect should have an animation-name property with a value of rainbow.",
+ "testString": "assert($('#rect').css('animation-name') == 'rainbow', 'The element with id of rect should have an animation-name property with a value of rainbow.');"
},
{
- "text": "The element with id of rect should have an animation-duration property with a value of 4s.'",
- "testString": "assert($('#rect').css('animation-duration') == '4s', 'The element with id of rect should have an animation-duration property with a value of 4s.')"
+ "text": "The element with id of rect should have an animation-duration property with a value of 4s.",
+ "testString": "assert($('#rect').css('animation-duration') == '4s', 'The element with id of rect should have an animation-duration property with a value of 4s.');"
},
{
- "text": "The @keyframes rule should use the animation-name of rainbow.'",
- "testString": "assert(code.match(/@keyframes\\s+?rainbow\\s*?{/g), 'The @keyframes rule should use the animation-name of rainbow.')"
+ "text": "The @keyframes rule should use the animation-name of rainbow.",
+ "testString": "assert(code.match(/@keyframes\\s+?rainbow\\s*?{/g), 'The @keyframes rule should use the animation-name of rainbow.');"
},
{
- "text": "The @keyframes rule for rainbow should use a background-color of blue at 0%.'",
- "testString": "assert(code.match(/0%\\s*?{\\s*?background-color:\\s*?blue;\\s*?}/gi), 'The @keyframes rule for rainbow should use a background-color of blue at 0%.')"
+ "text": "The @keyframes rule for rainbow should use a background-color of blue at 0%.",
+ "testString": "assert(code.match(/0%\\s*?{\\s*?background-color:\\s*?blue;\\s*?}/gi), 'The @keyframes rule for rainbow should use a background-color of blue at 0%.');"
},
{
- "text": "The @keyframes rule for rainbow should use a background-color of green at 50%.'",
- "testString": "assert(code.match(/50%\\s*?{\\s*?background-color:\\s*?green;\\s*?}/gi), 'The @keyframes rule for rainbow should use a background-color of green at 50%.')"
+ "text": "The @keyframes rule for rainbow should use a background-color of green at 50%.",
+ "testString": "assert(code.match(/50%\\s*?{\\s*?background-color:\\s*?green;\\s*?}/gi), 'The @keyframes rule for rainbow should use a background-color of green at 50%.');"
},
{
- "text": "The @keyframes rule for rainbow should use a background-color of yellow at 100%.'",
- "testString": "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?}/gi), 'The @keyframes rule for rainbow should use a background-color of yellow at 100%.')"
+ "text": "The @keyframes rule for rainbow should use a background-color of yellow at 100%.",
+ "testString": "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?}/gi), 'The @keyframes rule for rainbow should use a background-color of yellow at 100%.');"
}
],
"solutions": [],
@@ -2665,12 +2665,12 @@
],
"tests": [
{
- "text": "The @keyframes rule should use the animation-name background-color.'",
- "testString": "assert(code.match(/@keyframes\\s+?background-color\\s*?{/g), 'The @keyframes rule should use the animation-name background-color.')"
+ "text": "The @keyframes rule should use the animation-name background-color.",
+ "testString": "assert(code.match(/@keyframes\\s+?background-color\\s*?{/g), 'The @keyframes rule should use the animation-name background-color.');"
},
{
- "text": "There should be one rule under @keyframes that changes the background-color to #4791d0 at 100%.'",
- "testString": "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?#4791d0;\\s*?}/gi), 'There should be one rule under @keyframes that changes the background-color to #4791d0 at 100%.')"
+ "text": "There should be one rule under @keyframes that changes the background-color to #4791d0 at 100%.",
+ "testString": "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?#4791d0;\\s*?}/gi), 'There should be one rule under @keyframes that changes the background-color to #4791d0 at 100%.');"
}
],
"solutions": [],
@@ -2720,8 +2720,8 @@
],
"tests": [
{
- "text": "button:hover should have a animation-fill-mode property with a value of forwards.'",
- "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), 'button:hover should have a animation-fill-mode property with a value of forwards.')"
+ "text": "button:hover should have a animation-fill-mode property with a value of forwards.",
+ "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), 'button:hover should have a animation-fill-mode property with a value of forwards.');"
}
],
"solutions": [],
@@ -2774,16 +2774,16 @@
],
"tests": [
{
- "text": "The @keyframes rule for 0% should use the left offset of 0px.'",
- "testString": "assert(code.match(/0%\\s*?{\\s*?background-color:\\s*?blue;\\s*?top:\\s*?0px;\\s*?left:\\s*?0px;\\s*?}/gi), 'The @keyframes rule for 0% should use the left offset of 0px.')"
+ "text": "The @keyframes rule for 0% should use the left offset of 0px.",
+ "testString": "assert(code.match(/0%\\s*?{\\s*?background-color:\\s*?blue;\\s*?top:\\s*?0px;\\s*?left:\\s*?0px;\\s*?}/gi), 'The @keyframes rule for 0% should use the left offset of 0px.');"
},
{
- "text": "The @keyframes rule for 50% should use the left 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 @keyframes rule for 50% should use the left offset of 25px.')"
+ "text": "The @keyframes rule for 50% should use the left 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 @keyframes rule for 50% should use the left offset of 25px.');"
},
{
- "text": "The @keyframes rule for 100% should use the left offset of -25px.'",
- "testString": "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?top:\\s*?0px;\\s*?left:\\s*?-25px;\\s*?}/gi), 'The @keyframes rule for 100% should use the left offset of -25px.')"
+ "text": "The @keyframes rule for 100% should use the left offset of -25px.",
+ "testString": "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?top:\\s*?0px;\\s*?left:\\s*?-25px;\\s*?}/gi), 'The @keyframes rule for 100% should use the left offset of -25px.');"
}
],
"solutions": [],
@@ -2850,8 +2850,8 @@
],
"tests": [
{
- "text": "The keyframes rule for fade should set the opacity 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 keyframes rule for fade should set the opacity property to 0.1 at 50%.')"
+ "text": "The keyframes rule for fade should set the opacity 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 keyframes rule for fade should set the opacity property to 0.1 at 50%.');"
}
],
"solutions": [],
@@ -2912,8 +2912,8 @@
],
"tests": [
{
- "text": "The animation-iteration-count property should have a value of infinite.'",
- "testString": "assert($('#ball').css('animation-iteration-count') == 'infinite', 'The animation-iteration-count property should have a value of infinite.')"
+ "text": "The animation-iteration-count property should have a value of infinite.",
+ "testString": "assert($('#ball').css('animation-iteration-count') == 'infinite', 'The animation-iteration-count property should have a value of infinite.');"
}
],
"solutions": [],
@@ -2978,12 +2978,12 @@
],
"tests": [
{
- "text": "The animation-iteration-count property for the heart class should have a value of infinite.'",
- "testString": "assert($('.heart').css('animation-iteration-count') == 'infinite', 'The animation-iteration-count property for the heart class should have a value of infinite.')"
+ "text": "The animation-iteration-count property for the heart class should have a value of infinite.",
+ "testString": "assert($('.heart').css('animation-iteration-count') == 'infinite', 'The animation-iteration-count property for the heart class should have a value of infinite.');"
},
{
- "text": "The animation-iteration-count property for the back class should have a value of infinite.'",
- "testString": "assert($('.back').css('animation-iteration-count') == 'infinite', 'The animation-iteration-count property for the back class should have a value of infinite.')"
+ "text": "The animation-iteration-count property for the back class should have a value of infinite.",
+ "testString": "assert($('.back').css('animation-iteration-count') == 'infinite', 'The animation-iteration-count property for the back class should have a value of infinite.');"
}
],
"solutions": [],
@@ -3084,8 +3084,8 @@
],
"tests": [
{
- "text": "The @keyframes rule for the star-1 class should be 50%.'",
- "testString": "assert(code.match(/twinkle-1\\s*?{\\s*?50%/g), 'The @keyframes rule for the star-1 class should be 50%.')"
+ "text": "The @keyframes rule for the star-1 class should be 50%.",
+ "testString": "assert(code.match(/twinkle-1\\s*?{\\s*?50%/g), 'The @keyframes rule for the star-1 class should be 50%.');"
}
],
"solutions": [],
@@ -3171,16 +3171,16 @@
],
"tests": [
{
- "text": "The animation-duration property for the star with class star-1 should remain at 1s.'",
- "testString": "assert($('.star-1').css('animation-duration') == '1s', 'The animation-duration property for the star with class star-1 should remain at 1s.')"
+ "text": "The animation-duration property for the star with class star-1 should remain at 1s.",
+ "testString": "assert($('.star-1').css('animation-duration') == '1s', 'The animation-duration property for the star with class star-1 should remain at 1s.');"
},
{
- "text": "The animation-duration property for the star with class star-2 should be 0.9s.'",
- "testString": "assert($('.star-2').css('animation-duration') == '0.9s', 'The animation-duration property for the star with class star-2 should be 0.9s.')"
+ "text": "The animation-duration property for the star with class star-2 should be 0.9s.",
+ "testString": "assert($('.star-2').css('animation-duration') == '0.9s', 'The animation-duration property for the star with class star-2 should be 0.9s.');"
},
{
- "text": "The animation-duration property for the star with class star-3 should be 1.1s.'",
- "testString": "assert($('.star-3').css('animation-duration') == '1.1s', 'The animation-duration property for the star with class star-3 should be 1.1s.')"
+ "text": "The animation-duration property for the star with class star-3 should be 1.1s.",
+ "testString": "assert($('.star-3').css('animation-duration') == '1.1s', 'The animation-duration property for the star with class star-3 should be 1.1s.');"
}
],
"solutions": [],
@@ -3265,12 +3265,12 @@
],
"tests": [
{
- "text": "The value of the animation-timing-function property for the element with the id ball1 should be linear.'",
- "testString": "assert($('#ball1').css('animation-timing-function') == 'linear', 'The value of the animation-timing-function property for the element with the id ball1 should be linear.')"
+ "text": "The value of the animation-timing-function property for the element with the id ball1 should be linear.",
+ "testString": "assert($('#ball1').css('animation-timing-function') == 'linear', 'The value of the animation-timing-function property for the element with the id ball1 should be linear.');"
},
{
- "text": "The value of the animation-timing-function property for the element with the id ball2 should be ease-out.'",
- "testString": "assert($('#ball2').css('animation-timing-function') == 'ease-out', 'The value of the animation-timing-function property for the element with the id ball2 should be ease-out.')"
+ "text": "The value of the animation-timing-function property for the element with the id ball2 should be ease-out.",
+ "testString": "assert($('#ball2').css('animation-timing-function') == 'ease-out', 'The value of the animation-timing-function property for the element with the id ball2 should be ease-out.');"
}
],
"solutions": [],
@@ -3344,12 +3344,12 @@
],
"tests": [
{
- "text": "The value of the animation-timing-function property for the element with the id ball1 should be the linear-equivalent cubic-bezier function.'",
- "testString": "assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 'The value of the animation-timing-function property for the element with the id ball1 should be the linear-equivalent cubic-bezier function.')"
+ "text": "The value of the animation-timing-function property for the element with the id ball1 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 animation-timing-function property for the element with the id ball1 should be the linear-equivalent cubic-bezier function.');"
},
{
- "text": "The value of the animation-timing-function property for the element with the id ball2 should not change.'",
- "testString": "assert($('#ball2').css('animation-timing-function') == 'ease-out', 'The value of the animation-timing-function property for the element with the id ball2 should not change.')"
+ "text": "The value of the animation-timing-function property for the element with the id ball2 should not change.",
+ "testString": "assert($('#ball2').css('animation-timing-function') == 'ease-out', 'The value of the animation-timing-function property for the element with the id ball2 should not change.');"
}
],
"solutions": [],
@@ -3422,16 +3422,16 @@
],
"tests": [
{
- "text": "The value of the animation-timing-function property of the element with the id red should be a cubic-bezier 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, 'The value of the animation-timing-function property of the element with the id red should be a cubic-bezier function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .')"
+ "text": "The value of the animation-timing-function property of the element with the id red should be a cubic-bezier 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 animation-timing-function property of the element with the id red should be a cubic-bezier function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .');"
},
{
- "text": "The element with the id red should no longer have the animation-timing-function property of linear.'",
- "testString": "assert($('#red').css('animation-timing-function') !== 'linear', 'The element with the id red should no longer have the animation-timing-function property of linear.')"
+ "text": "The element with the id red should no longer have the animation-timing-function property of linear.",
+ "testString": "assert($('#red').css('animation-timing-function') !== 'linear', 'The element with the id red should no longer have the animation-timing-function property of linear.');"
},
{
- "text": "The value of the animation-timing-function property for the element with the id blue should not change.'",
- "testString": "assert($('#blue').css('animation-timing-function') == 'ease-out', 'The value of the animation-timing-function property for the element with the id blue should not change.')"
+ "text": "The value of the animation-timing-function property for the element with the id blue should not change.",
+ "testString": "assert($('#blue').css('animation-timing-function') == 'ease-out', 'The value of the animation-timing-function property for the element with the id blue should not change.');"
}
],
"solutions": [],
@@ -3498,8 +3498,8 @@
],
"tests": [
{
- "text": "The value of the animation-timing-function property for the element with the id green should be a cubic-bezier function with x1, y1, x2, y2 values as specified.'",
- "testString": "assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, 'The value of the animation-timing-function property for the element with the id green should be a cubic-bezier function with x1, y1, x2, y2 values as specified.')"
+ "text": "The value of the animation-timing-function property for the element with the id green should be a cubic-bezier 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 animation-timing-function property for the element with the id green should be a cubic-bezier function with x1, y1, x2, y2 values as specified.');"
}
],
"solutions": [],
diff --git a/packages/learn/seed/challenges/01-responsive-web-design/basic-css.json b/packages/learn/seed/challenges/01-responsive-web-design/basic-css.json
index b829fd41e5..a94b97b298 100644
--- a/packages/learn/seed/challenges/01-responsive-web-design/basic-css.json
+++ b/packages/learn/seed/challenges/01-responsive-web-design/basic-css.json
@@ -19,12 +19,12 @@
],
"tests": [
{
- "text": "Your h2 element should be red.'",
- "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 'Your h2 element should be red.')"
+ "text": "Your h2 element should be red.",
+ "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your h2 element should be red.');"
},
{
- "text": "Your style declaration should end with a ; .'",
- "testString": "assert(code.match(/style declaration should end with a ; .')"
+ "text": "Your style declaration should end with a ;.",
+ "testString": "assert(code.match(/\\s*CatPhotoApp\\s*<\\/h2>/), 'Your style declaration should end with a ;.');"
}
],
"type": "waypoint",
@@ -138,24 +138,24 @@
],
"tests": [
{
- "text": "Remove the style attribute from your h2 element.'",
- "testString": "assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your h2 element.')"
+ "text": "Remove the style attribute from your h2 element.",
+ "testString": "assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your h2 element.');"
},
{
- "text": "Create a style element.'",
- "testString": "assert($(\"style\") && $(\"style\").length > 1, 'Create a style element.')"
+ "text": "Create a style element.",
+ "testString": "assert($(\"style\") && $(\"style\").length > 1, 'Create a style element.');"
},
{
- "text": "Your h2 element should be blue.'",
- "testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 'Your h2 element should be blue.')"
+ "text": "Your h2 element should be blue.",
+ "testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your h2 element should be blue.');"
},
{
- "text": "Ensure that your stylesheet h2 declaration is valid with a semicolon and closing brace.'",
- "testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'Ensure that your stylesheet h2 declaration is valid with a semicolon and closing brace.')"
+ "text": "Ensure that your stylesheet h2 declaration is valid with a semicolon and closing brace.",
+ "testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'Ensure that your stylesheet h2 declaration is valid with a semicolon and closing brace.');"
},
{
- "text": "Make sure all your style elements are valid and have a closing tag.'",
- "testString": "assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(//g) || []).length, 'Make sure all your style elements are valid and have a closing tag.')"
+ "text": "Make sure all your style elements are valid and have a closing tag.",
+ "testString": "assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(//g) || []).length, 'Make sure all your style elements are valid and have a closing tag.');"
}
],
"type": "waypoint",
@@ -282,20 +282,20 @@
],
"tests": [
{
- "text": "Your h2 element should be red.'",
- "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 'Your h2 element should be red.')"
+ "text": "Your h2 element should be red.",
+ "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your h2 element should be red.');"
},
{
- "text": "Your h2 element should have the class red-text.'",
- "testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your h2 element should have the class red-text.')"
+ "text": "Your h2 element should have the class red-text.",
+ "testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your h2 element should have the class red-text.');"
},
{
- "text": "Your stylesheet should declare a red-text class and have its color set to red.'",
- "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), 'Your stylesheet should declare a red-text class and have its color set to red.')"
+ "text": "Your stylesheet should declare a red-text class and have its color set to red.",
+ "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), 'Your stylesheet should declare a red-text class and have its color set to red.');"
},
{
- "text": "Do not use inline style declarations like style=\"color: red\" in your h2 element.'",
- "testString": "assert($(\"h2\").attr(\"style\") === undefined, 'Do not use inline style declarations like style=\"color: red\" in your h2 element.')"
+ "text": "Do not use inline style declarations like style=\"color: red\" in your h2 element.",
+ "testString": "assert($(\"h2\").attr(\"style\") === undefined, 'Do not use inline style declarations like style=\"color: red\" in your h2 element.');"
}
],
"type": "waypoint",
@@ -422,24 +422,24 @@
],
"tests": [
{
- "text": "Your h2 element should be red.'",
- "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 'Your h2 element should be red.')"
+ "text": "Your h2 element should be red.",
+ "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your h2 element should be red.');"
},
{
- "text": "Your h2 element should have the class red-text.'",
- "testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your h2 element should have the class red-text.')"
+ "text": "Your h2 element should have the class red-text.",
+ "testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your h2 element should have the class red-text.');"
},
{
- "text": "Your first p element should be red.'",
- "testString": "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 'Your first p element should be red.')"
+ "text": "Your first p element should be red.",
+ "testString": "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your first p element should be red.');"
},
{
- "text": "Your second and third p elements should not be red.'",
- "testString": "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 'Your second and third p elements should not be red.')"
+ "text": "Your second and third p elements should not be red.",
+ "testString": "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), 'Your second and third p elements should not be red.');"
},
{
- "text": "Your first p element should have the class red-text.'",
- "testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), 'Your first p element should have the class red-text.')"
+ "text": "Your first p element should have the class red-text.",
+ "testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), 'Your first p element should have the class red-text.');"
}
],
"type": "waypoint",
@@ -555,8 +555,8 @@
],
"tests": [
{
- "text": "Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.'",
- "testString": "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), 'Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.')"
+ "text": "Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.",
+ "testString": "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), 'Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.');"
}
],
"type": "waypoint",
@@ -661,8 +661,8 @@
],
"tests": [
{
- "text": "Your p elements should use the font monospace.'",
- "testString": "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), 'Your p elements should use the font monospace.')"
+ "text": "Your p elements should use the font monospace.",
+ "testString": "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), 'Your p elements should use the font monospace.');"
}
],
"type": "waypoint",
@@ -780,20 +780,20 @@
],
"tests": [
{
- "text": "Import the Lobster font.'",
- "testString": "assert(new RegExp(\"googleapis\", 'Import the Lobster font.')"
+ "text": "Import the Lobster font.",
+ "testString": "assert(new RegExp(\"googleapis\", \"gi\").test(code), 'Import the Lobster font.');"
},
{
- "text": "Your h2 element should use the font Lobster.'",
- "testString": "assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'Your h2 element should use the font Lobster.')"
+ "text": "Your h2 element should use the font Lobster.",
+ "testString": "assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'Your h2 element should use the font Lobster.');"
},
{
- "text": "Use an h2 CSS selector to change the font.'",
- "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?\\s*;\\s*\\}/gi.test(code), 'Use an h2 CSS selector to change the font.')"
+ "text": "Use an h2 CSS selector to change the font.",
+ "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?\\s*;\\s*\\}/gi.test(code), 'Use an h2 CSS selector to change the font.');"
},
{
- "text": "Your p element should still use the font monospace.'",
- "testString": "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your p element should still use the font monospace.')"
+ "text": "Your p element should still use the font monospace.",
+ "testString": "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your p element should still use the font monospace.');"
}
],
"type": "waypoint",
@@ -915,20 +915,20 @@
],
"tests": [
{
- "text": "Your h2 element should use the font Lobster.'",
- "testString": "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'Your h2 element should use the font Lobster.')"
+ "text": "Your h2 element should use the font Lobster.",
+ "testString": "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'Your h2 element should use the font Lobster.');"
},
{
- "text": "Your h2 element should degrade to the font monospace when Lobster is not available.'",
- "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?, 'Your h2 element should degrade to the font monospace when Lobster is not available.')"
+ "text": "Your h2 element should degrade to the font monospace when Lobster is not available.",
+ "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?,\\s*monospace\\s*;\\s*\\}/gi.test(code), 'Your h2 element should degrade to the font monospace when Lobster is not available.');"
},
{
- "text": "Comment out your call to Google for the Lobster font by putting <!-- in front of it.'",
- "testString": "assert(new RegExp(\"\", 'Be sure to close your comment by adding -->.')"
+ "text": "Be sure to close your comment by adding -->.",
+ "testString": "assert(new RegExp(\"[^fc]-->\", \"gi\").test(code), 'Be sure to close your comment by adding -->.');"
}
],
"type": "waypoint",
@@ -1052,12 +1052,12 @@
],
"tests": [
{
- "text": "Your img element should have the class smaller-image.'",
- "testString": "assert($(\"img[src='https://bit.ly/fcc-relaxing-cat']\").attr('class') === \"smaller-image\", 'Your img element should have the class smaller-image.')"
+ "text": "Your img element should have the class smaller-image.",
+ "testString": "assert($(\"img[src='https://bit.ly/fcc-relaxing-cat']\").attr('class') === \"smaller-image\", 'Your img element should have the class smaller-image.');"
},
{
- "text": "Your image should be 100 pixels wide. Browser zoom should be at 100%.'",
- "testString": "assert($(\"img\").width() === 100, 'Your image should be 100 pixels wide. Browser zoom should be at 100%.')"
+ "text": "Your image should be 100 pixels wide. Browser zoom should be at 100%.",
+ "testString": "assert($(\"img\").width() === 100, 'Your image should be 100 pixels wide. Browser zoom should be at 100%.');"
}
],
"type": "waypoint",
@@ -1183,24 +1183,24 @@
],
"tests": [
{
- "text": "Your img element should have the class smaller-image.'",
- "testString": "assert($(\"img\").hasClass(\"smaller-image\"), 'Your img element should have the class smaller-image.')"
+ "text": "Your img element should have the class smaller-image.",
+ "testString": "assert($(\"img\").hasClass(\"smaller-image\"), 'Your img element should have the class smaller-image.');"
},
{
- "text": "Your img element should have the class thick-green-border.'",
- "testString": "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your img element should have the class thick-green-border.')"
+ "text": "Your img element should have the class thick-green-border.",
+ "testString": "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your img element should have the class thick-green-border.');"
},
{
- "text": "Give your image a border width of 10px.'",
- "testString": "assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 'Give your image a border width of 10px.')"
+ "text": "Give your image a border width of 10px.",
+ "testString": "assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) >= 8 && parseInt($(\"img\").css(\"border-top-width\"), 10) <= 12, 'Give your image a border width of 10px.');"
},
{
- "text": "Give your image a border style of solid.'",
- "testString": "assert($(\"img\").css(\"border-right-style\") === \"solid\", 'Give your image a border style of solid.')"
+ "text": "Give your image a border style of solid.",
+ "testString": "assert($(\"img\").css(\"border-right-style\") === \"solid\", 'Give your image a border style of solid.');"
},
{
- "text": "The border around your img element should be green.'",
- "testString": "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 'The border around your img element should be green.')"
+ "text": "The border around your img element should be green.",
+ "testString": "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'The border around your img element should be green.');"
}
],
"type": "waypoint",
@@ -1335,12 +1335,12 @@
],
"tests": [
{
- "text": "Your image element should have the class \"thick-green-border\".'",
- "testString": "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your image element should have the class \"thick-green-border\".')"
+ "text": "Your image element should have the class \"thick-green-border\".",
+ "testString": "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your image element should have the class \"thick-green-border\".');"
},
{
- "text": "Your image should have a border radius of 10px'",
- "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'Your image should have a border radius of 10px')"
+ "text": "Your image should have a border radius of 10px",
+ "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'Your image should have a border radius of 10px');"
}
],
"type": "waypoint",
@@ -1463,12 +1463,12 @@
],
"tests": [
{
- "text": "Your image should have a border radius of 50%, making it perfectly circular.'",
- "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'Your image should have a border radius of 50%, making it perfectly circular.')"
+ "text": "Your image should have a border radius of 50%, making it perfectly circular.",
+ "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'Your image should have a border radius of 50%, making it perfectly circular.');"
},
{
- "text": "Be sure to use a percentage value of 50%.'",
- "testString": "assert(code.match(/50%/g), 'Be sure to use a percentage value of 50%.')"
+ "text": "Be sure to use a percentage value of 50%.",
+ "testString": "assert(code.match(/50%/g), 'Be sure to use a percentage value of 50%.');"
}
],
"type": "waypoint",
@@ -1589,12 +1589,12 @@
],
"tests": [
{
- "text": "Give your div element the class silver-background.'",
- "testString": "assert($(\"div\").hasClass(\"silver-background\"), 'Give your div element the class silver-background.')"
+ "text": "Give your div element the class silver-background.",
+ "testString": "assert($(\"div\").hasClass(\"silver-background\"), 'Give your div element the class silver-background.');"
},
{
- "text": "Your div element should have a silver background.'",
- "testString": "assert($(\"div\").css(\"background-color\") === \"rgb(192, 'Your div element should have a silver background.')"
+ "text": "Your div element should have a silver background.",
+ "testString": "assert($(\"div\").css(\"background-color\") === \"rgb(192, 192, 192)\", 'Your div element should have a silver background.');"
}
],
"type": "waypoint",
@@ -1727,8 +1727,8 @@
],
"tests": [
{
- "text": "Give your form element the id of cat-photo-form.'",
- "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your form element the id of cat-photo-form.')"
+ "text": "Give your form element the id of cat-photo-form.",
+ "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your form element the id of cat-photo-form.');"
}
],
"type": "waypoint",
@@ -1871,20 +1871,20 @@
],
"tests": [
{
- "text": "Give your form element the id of cat-photo-form.'",
- "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your form element the id of cat-photo-form.')"
+ "text": "Give your form element the id of cat-photo-form.",
+ "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your form element the id of cat-photo-form.');"
},
{
- "text": "Your form element should have the background-color of green.'",
- "testString": "assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 'Your form element should have the background-color of green.')"
+ "text": "Your form element should have the background-color of green.",
+ "testString": "assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'Your form element should have the background-color of green.');"
},
{
- "text": "Make sure your form element has an id attribute.'",
- "testString": "assert(code.match(//gi) && code.match(//gi).length > 0, 'Make sure your form element has an id attribute.')"
+ "text": "Make sure your form element has an id attribute.",
+ "testString": "assert(code.match(//gi) && code.match(//gi).length > 0, 'Make sure your form element has an id attribute.');"
},
{
- "text": "Do not give your form any class or style attributes.'",
- "testString": "assert(!code.match(//gi) && !code.match(//gi), 'Do not give your form any class or style attributes.')"
+ "text": "Do not give your form any class or style attributes.",
+ "testString": "assert(!code.match(//gi) && !code.match(//gi), 'Do not give your form any class or style attributes.');"
}
],
"type": "waypoint",
@@ -2026,8 +2026,8 @@
],
"tests": [
{
- "text": "Your blue-box class should give elements 20px of padding.'",
- "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"20px\", 'Your blue-box class should give elements 20px of padding.')"
+ "text": "Your blue-box class should give elements 20px of padding.",
+ "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"20px\", 'Your blue-box class should give elements 20px of padding.');"
}
],
"type": "waypoint",
@@ -2146,8 +2146,8 @@
],
"tests": [
{
- "text": "Your blue-box class should give elements 20px of margin.'",
- "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"20px\", 'Your blue-box class should give elements 20px of margin.')"
+ "text": "Your blue-box class should give elements 20px of margin.",
+ "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"20px\", 'Your blue-box class should give elements 20px of margin.');"
}
],
"type": "waypoint",
@@ -2257,8 +2257,8 @@
],
"tests": [
{
- "text": "Your blue-box class should give elements -15px of margin.'",
- "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"-15px\", 'Your blue-box class should give elements -15px of margin.')"
+ "text": "Your blue-box class should give elements -15px of margin.",
+ "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"-15px\", 'Your blue-box class should give elements -15px of margin.');"
}
],
"type": "waypoint",
@@ -2366,20 +2366,20 @@
],
"tests": [
{
- "text": "Your blue-box class should give the top of the elements 40px of padding.'",
- "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your blue-box class should give the top of the elements 40px of padding.')"
+ "text": "Your blue-box class should give the top of the elements 40px of padding.",
+ "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your blue-box class should give the top of the elements 40px of padding.');"
},
{
- "text": "Your blue-box class should give the right of the elements 20px of padding.'",
- "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your blue-box class should give the right of the elements 20px of padding.')"
+ "text": "Your blue-box class should give the right of the elements 20px of padding.",
+ "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your blue-box class should give the right of the elements 20px of padding.');"
},
{
- "text": "Your blue-box class should give the bottom of the elements 20px of padding.'",
- "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your blue-box class should give the bottom of the elements 20px of padding.')"
+ "text": "Your blue-box class should give the bottom of the elements 20px of padding.",
+ "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your blue-box class should give the bottom of the elements 20px of padding.');"
},
{
- "text": "Your blue-box class should give the left of the elements 40px of padding.'",
- "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your blue-box class should give the left of the elements 40px of padding.')"
+ "text": "Your blue-box class should give the left of the elements 40px of padding.",
+ "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your blue-box class should give the left of the elements 40px of padding.');"
}
],
"type": "waypoint",
@@ -2484,20 +2484,20 @@
],
"tests": [
{
- "text": "Your blue-box class should give the top of elements 40px of margin.'",
- "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your blue-box class should give the top of elements 40px of margin.')"
+ "text": "Your blue-box class should give the top of elements 40px of margin.",
+ "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your blue-box class should give the top of elements 40px of margin.');"
},
{
- "text": "Your blue-box class should give the right of elements 20px of margin.'",
- "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your blue-box class should give the right of elements 20px of margin.')"
+ "text": "Your blue-box class should give the right of elements 20px of margin.",
+ "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your blue-box class should give the right of elements 20px of margin.');"
},
{
- "text": "Your blue-box class should give the bottom of elements 20px of margin.'",
- "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your blue-box class should give the bottom of elements 20px of margin.')"
+ "text": "Your blue-box class should give the bottom of elements 20px of margin.",
+ "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your blue-box class should give the bottom of elements 20px of margin.');"
},
{
- "text": "Your blue-box class should give the left of elements 40px of margin.'",
- "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your blue-box class should give the left of elements 40px of margin.')"
+ "text": "Your blue-box class should give the left of elements 40px of margin.",
+ "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your blue-box class should give the left of elements 40px of margin.');"
}
],
"type": "waypoint",
@@ -2602,24 +2602,24 @@
],
"tests": [
{
- "text": "Your blue-box class should give the top of elements 40px of padding.'",
- "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your blue-box class should give the top of elements 40px of padding.')"
+ "text": "Your blue-box class should give the top of elements 40px of padding.",
+ "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your blue-box class should give the top of elements 40px of padding.');"
},
{
- "text": "Your blue-box class should give the right of elements 20px of padding.'",
- "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your blue-box class should give the right of elements 20px of padding.')"
+ "text": "Your blue-box class should give the right of elements 20px of padding.",
+ "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your blue-box class should give the right of elements 20px of padding.');"
},
{
- "text": "Your blue-box class should give the bottom of elements 20px of padding.'",
- "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your blue-box class should give the bottom of elements 20px of padding.')"
+ "text": "Your blue-box class should give the bottom of elements 20px of padding.",
+ "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your blue-box class should give the bottom of elements 20px of padding.');"
},
{
- "text": "Your blue-box class should give the left of elements 40px of padding.'",
- "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your blue-box class should give the left of elements 40px of padding.')"
+ "text": "Your blue-box class should give the left of elements 40px of padding.",
+ "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your blue-box class should give the left of elements 40px of padding.');"
},
{
- "text": "You should use the clockwise notation to set the padding of blue-box class.'",
- "testString": "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'You should use the clockwise notation to set the padding of blue-box class.')"
+ "text": "You should use the clockwise notation to set the padding of blue-box class.",
+ "testString": "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'You should use the clockwise notation to set the padding of blue-box class.');"
}
],
"type": "waypoint",
@@ -2726,20 +2726,20 @@
],
"tests": [
{
- "text": "Your blue-box class should give the top of elements 40px of margin.'",
- "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your blue-box class should give the top of elements 40px of margin.')"
+ "text": "Your blue-box class should give the top of elements 40px of margin.",
+ "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your blue-box class should give the top of elements 40px of margin.');"
},
{
- "text": "Your blue-box class should give the right of elements 20px of margin.'",
- "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your blue-box class should give the right of elements 20px of margin.')"
+ "text": "Your blue-box class should give the right of elements 20px of margin.",
+ "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your blue-box class should give the right of elements 20px of margin.');"
},
{
- "text": "Your blue-box class should give the bottom of elements 20px of margin.'",
- "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your blue-box class should give the bottom of elements 20px of margin.')"
+ "text": "Your blue-box class should give the bottom of elements 20px of margin.",
+ "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your blue-box class should give the bottom of elements 20px of margin.');"
},
{
- "text": "Your blue-box class should give the left of elements 40px of margin.'",
- "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your blue-box class should give the left of elements 40px of margin.')"
+ "text": "Your blue-box class should give the left of elements 40px of margin.",
+ "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your blue-box class should give the left of elements 40px of margin.');"
}
],
"type": "waypoint",
@@ -2850,16 +2850,16 @@
],
"tests": [
{
- "text": "The type attribute selector should be used to select the checkboxes.'",
- "testString": "assert(code.match(/