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

fix(curriculum): Remove unnecessary assert message argument from English Data Visualization challenges (#36424)

Browse Source 
* fix: removed assert msg argument

* fix: corrected test text
This commit is contained in:
Randell Dawson
2019-07-11 01:53:41 -07:00
committed by Oliver Eyton-Williams
parent e2e69c2a1f
commit db8098601e
38 changed files with 201 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.english.md
View File

@ -21,7 +21,7 @@ Use the <code>attr()</code> method to add a class of <code>bar</code> to all the
```yml
tests:
- text: Your <code>rect</code> elements should have a class of <code>bar</code>.
testString: assert($('rect').attr('class') == "bar", 'Your <code>rect</code> elements should have a class of <code>bar</code>.');
testString: assert($('rect').attr('class') == "bar");
```

20
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.english.md
View File

@ -21,25 +21,25 @@ Append a <code>title</code> element under each <code>rect</code> node. Then call
```yml
tests:
- text: Your code should have 9 <code>title</code> elements.
testString: assert($('title').length == 9, 'Your code should have 9 <code>title</code> elements.');
testString: assert($('title').length == 9);
- text: The first <code>title</code> element should have tooltip text of 12.
testString: assert($('title').eq(0).text() == '12', 'The first <code>title</code> element should have tooltip text of 12.');
testString: assert($('title').eq(0).text() == '12');
- text: The second <code>title</code> element should have tooltip text of 31.
testString: assert($('title').eq(1).text() == '31', 'The second <code>title</code> element should have tooltip text of 31.');
testString: assert($('title').eq(1).text() == '31');
- text: The third <code>title</code> element should have tooltip text of 22.
testString: assert($('title').eq(2).text() == '22', 'The third <code>title</code> element should have tooltip text of 22.');
testString: assert($('title').eq(2).text() == '22');
- text: The fourth <code>title</code> element should have tooltip text of 17.
testString: assert($('title').eq(3).text() == '17', 'The fourth <code>title</code> element should have tooltip text of 17.');
testString: assert($('title').eq(3).text() == '17');
- text: The fifth <code>title</code> element should have tooltip text of 25.
testString: assert($('title').eq(4).text() == '25', 'The fifth <code>title</code> element should have tooltip text of 25.');
testString: assert($('title').eq(4).text() == '25');
- text: The sixth <code>title</code> element should have tooltip text of 18.
testString: assert($('title').eq(5).text() == '18', 'The sixth <code>title</code> element should have tooltip text of 18.');
testString: assert($('title').eq(5).text() == '18');
- text: The seventh <code>title</code> element should have tooltip text of 29.
testString: assert($('title').eq(6).text() == '29', 'The seventh <code>title</code> element should have tooltip text of 29.');
testString: assert($('title').eq(6).text() == '29');
- text: The eighth <code>title</code> element should have tooltip text of 14.
testString: assert($('title').eq(7).text() == '14', 'The eighth <code>title</code> element should have tooltip text of 14.');
testString: assert($('title').eq(7).text() == '14');
- text: The ninth <code>title</code> element should have tooltip text of 9.
testString: assert($('title').eq(8).text() == '9', 'The ninth <code>title</code> element should have tooltip text of 9.');
testString: assert($('title').eq(8).text() == '9');
```

22
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.english.md
View File

@ -23,27 +23,27 @@ Add <code>cx</code>, <code>cy</code>, and <code>r</code> attributes to the <code
```yml
tests:
- text: Your code should have 10 <code>circle</code> elements.
testString: assert($('circle').length == 10, 'Your code should have 10 <code>circle</code> elements.');
testString: assert($('circle').length == 10);
- text: The first <code>circle</code> element should have a <code>cx</code> value of 34, a <code>cy</code> value of 422, and an <code>r</code> value of 5.
testString: assert($('circle').eq(0).attr('cx') == '34' && $('circle').eq(0).attr('cy') == '422' && $('circle').eq(0).attr('r') == '5', 'The first <code>circle</code> element should have a <code>cx</code> value of 34, a <code>cy</code> value of 422, and an <code>r</code> value of 5.');
testString: assert($('circle').eq(0).attr('cx') == '34' && $('circle').eq(0).attr('cy') == '422' && $('circle').eq(0).attr('r') == '5');
- text: The second <code>circle</code> element should have a <code>cx</code> value of 109, a <code>cy</code> value of 220, and an <code>r</code> value of 5.
testString: assert($('circle').eq(1).attr('cx') == '109' && $('circle').eq(1).attr('cy') == '220' && $('circle').eq(1).attr('r') == '5', 'The second <code>circle</code> element should have a <code>cx</code> value of 109, a <code>cy</code> value of 220, and an <code>r</code> value of 5.');
testString: assert($('circle').eq(1).attr('cx') == '109' && $('circle').eq(1).attr('cy') == '220' && $('circle').eq(1).attr('r') == '5');
- text: The third <code>circle</code> element should have a <code>cx</code> value of 310, a <code>cy</code> value of 380, and an <code>r</code> value of 5.
testString: assert($('circle').eq(2).attr('cx') == '310' && $('circle').eq(2).attr('cy') == '380' && $('circle').eq(2).attr('r') == '5', 'The third <code>circle</code> element should have a <code>cx</code> value of 310, a <code>cy</code> value of 380, and an <code>r</code> value of 5.');
testString: assert($('circle').eq(2).attr('cx') == '310' && $('circle').eq(2).attr('cy') == '380' && $('circle').eq(2).attr('r') == '5');
- text: The fourth <code>circle</code> element should have a <code>cx</code> value of 79, a <code>cy</code> value of 89, and an <code>r</code> value of 5.
testString: assert($('circle').eq(3).attr('cx') == '79' && $('circle').eq(3).attr('cy') == '89' && $('circle').eq(3).attr('r') == '5', 'The fourth <code>circle</code> element should have a <code>cx</code> value of 79, a <code>cy</code> value of 89, and an <code>r</code> value of 5.');
testString: assert($('circle').eq(3).attr('cx') == '79' && $('circle').eq(3).attr('cy') == '89' && $('circle').eq(3).attr('r') == '5');
- text: The fifth <code>circle</code> element should have a <code>cx</code> value of 420, a <code>cy</code> value of 280, and an <code>r</code> value of 5.
testString: assert($('circle').eq(4).attr('cx') == '420' && $('circle').eq(4).attr('cy') == '280' && $('circle').eq(4).attr('r') == '5', 'The fifth <code>circle</code> element should have a <code>cx</code> value of 420, a <code>cy</code> value of 280, and an <code>r</code> value of 5.');
testString: assert($('circle').eq(4).attr('cx') == '420' && $('circle').eq(4).attr('cy') == '280' && $('circle').eq(4).attr('r') == '5');
- text: The sixth <code>circle</code> element should have a <code>cx</code> value of 233, a <code>cy</code> value of 355, and an <code>r</code> value of 5.
testString: assert($('circle').eq(5).attr('cx') == '233' && $('circle').eq(5).attr('cy') == '355' && $('circle').eq(5).attr('r') == '5', 'The sixth <code>circle</code> element should have a <code>cx</code> value of 233, a <code>cy</code> value of 355, and an <code>r</code> value of 5.');
testString: assert($('circle').eq(5).attr('cx') == '233' && $('circle').eq(5).attr('cy') == '355' && $('circle').eq(5).attr('r') == '5');
- text: The seventh <code>circle</code> element should have a <code>cx</code> value of 333, a <code>cy</code> value of 404, and an <code>r</code> value of 5.
testString: assert($('circle').eq(6).attr('cx') == '333' && $('circle').eq(6).attr('cy') == '404' && $('circle').eq(6).attr('r') == '5', 'The seventh <code>circle</code> element should have a <code>cx</code> value of 333, a <code>cy</code> value of 404, and an <code>r</code> value of 5.');
testString: assert($('circle').eq(6).attr('cx') == '333' && $('circle').eq(6).attr('cy') == '404' && $('circle').eq(6).attr('r') == '5');
- text: The eighth <code>circle</code> element should have a <code>cx</code> value of 222, a <code>cy</code> value of 167, and an <code>r</code> value of 5.
testString: assert($('circle').eq(7).attr('cx') == '222' && $('circle').eq(7).attr('cy') == '167' && $('circle').eq(7).attr('r') == '5', 'The eighth <code>circle</code> element should have a <code>cx</code> value of 222, a <code>cy</code> value of 167, and an <code>r</code> value of 5.');
testString: assert($('circle').eq(7).attr('cx') == '222' && $('circle').eq(7).attr('cy') == '167' && $('circle').eq(7).attr('r') == '5');
- text: The ninth <code>circle</code> element should have a <code>cx</code> value of 78, a <code>cy</code> value of 180, and an <code>r</code> value of 5.
testString: assert($('circle').eq(8).attr('cx') == '78' && $('circle').eq(8).attr('cy') == '180' && $('circle').eq(8).attr('r') == '5', 'The ninth <code>circle</code> element should have a <code>cx</code> value of 78, a <code>cy</code> value of 180, and an <code>r</code> value of 5.');
testString: assert($('circle').eq(8).attr('cx') == '78' && $('circle').eq(8).attr('cy') == '180' && $('circle').eq(8).attr('r') == '5');
- text: The tenth <code>circle</code> element should have a <code>cx</code> value of 21, a <code>cy</code> value of 377, and an <code>r</code> value of 5.
testString: assert($('circle').eq(9).attr('cx') == '21' && $('circle').eq(9).attr('cy') == '377' && $('circle').eq(9).attr('r') == '5', 'The tenth <code>circle</code> element should have a <code>cx</code> value of 21, a <code>cy</code> value of 377, and an <code>r</code> value of 5.');
testString: assert($('circle').eq(9).attr('cx') == '21' && $('circle').eq(9).attr('cy') == '377' && $('circle').eq(9).attr('r') == '5');
```

6
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.english.md
View File

@ -37,11 +37,11 @@ The scatter plot now has an x-axis. Create a y-axis in a variable named <code>yA
```yml
tests:
- text: Your code should use the <code>axisLeft()</code> method with <code>yScale</code> passed as the argument.
testString: assert(code.match(/\.axisLeft\(yScale\)/g), 'Your code should use the <code>axisLeft()</code> method with <code>yScale</code> passed as the argument.');
testString: assert(code.match(/\.axisLeft\(yScale\)/g));
- text: The y-axis <code>g</code> element should have a <code>transform</code> attribute to translate the axis by (60, 0).
testString: assert($('g').eq(10).attr('transform').match(/translate\(60\s*?,\s*?0\)/g), 'The y-axis <code>g</code> element should have a <code>transform</code> attribute to translate the axis by (60, 0).');
testString: assert($('g').eq(10).attr('transform').match(/translate\(60\s*?,\s*?0\)/g));
- text: Your code should call the <code>yAxis</code>.
testString: assert(code.match(/\.call\(\s*yAxis\s*\)/g), 'Your code should call the <code>yAxis</code>.');
testString: assert(code.match(/\.call\(\s*yAxis\s*\)/g));
```

4
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.english.md
View File

@ -24,9 +24,9 @@ Add the <code>attr()</code> method to the code in the editor and put a class of
```yml
tests:
- text: Your <code>div</code> elements should have a class of <code>bar</code>.
testString: assert($('div').attr('class') == "bar", 'Your <code>div</code> elements should have a class of <code>bar</code>.');
testString: assert($('div').attr('class') == "bar");
- text: Your code should use the <code>attr()</code> method.
testString: assert(code.match(/\.attr/g), 'Your code should use the <code>attr()</code> method.');
testString: assert(code.match(/\.attr/g));
```

12
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.english.md
View File

@ -35,17 +35,17 @@ Use the <code>select</code> method to select the <code>body</code> tag in the do
```yml
tests:
- text: The <code>body</code> should have one <code>h1</code> element.
testString: assert($('body').children('h1').length == 1, 'The <code>body</code> should have one <code>h1</code> element.');
testString: assert($('body').children('h1').length == 1);
- text: The <code>h1</code> element should have the text "Learning D3" in it.
testString: assert($('h1').text() == "Learning D3", 'The <code>h1</code> element should have the text "Learning D3" in it.');
testString: assert($('h1').text() == "Learning D3");
- text: Your code should access the <code>d3</code> object.
testString: assert(code.match(/d3/g), 'Your code should access the <code>d3</code> object.');
testString: assert(code.match(/d3/g));
- text: Your code should use the <code>select</code> method.
testString: assert(code.match(/\.select/g), 'Your code should use the <code>select</code> method.');
testString: assert(code.match(/\.select/g));
- text: Your code should use the <code>append</code> method.
testString: assert(code.match(/\.append/g), 'Your code should use the <code>append</code> method.');
testString: assert(code.match(/\.append/g));
- text: Your code should use the <code>text</code> method.
testString: assert(code.match(/\.text/g), 'Your code should use the <code>text</code> method.');
testString: assert(code.match(/\.text/g));
```

4
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.english.md
View File

@ -22,9 +22,9 @@ Add the <code>style()</code> method to the code in the editor to make all the di
```yml
tests:
- text: Your <code>h2</code> elements should have a <code>font-family</code> of verdana.
testString: assert($('h2').css('font-family') == 'verdana', 'Your <code>h2</code> elements should have a <code>font-family</code> of verdana.');
testString: assert($('h2').css('font-family') == 'verdana');
- text: Your code should use the <code>style()</code> method.
testString: assert(code.match(/\.style/g), 'Your code should use the <code>style()</code> method.');
testString: assert(code.match(/\.style/g));
```

18
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.english.md
View File

@ -23,23 +23,23 @@ The code in the editor already binds the data to each new <code>text</code> elem
```yml
tests:
- text: The first <code>text</code> element should have a label of 12 and a <code>y</code> value of 61.
testString: assert($('text').eq(0).text() == '12' && $('text').eq(0).attr('y') == '61', 'The first <code>text</code> element should have a label of 12 and a <code>y</code> value of 61.');
testString: assert($('text').eq(0).text() == '12' && $('text').eq(0).attr('y') == '61');
- text: The second <code>text</code> element should have a label of 31 and a <code>y</code> value of 4.
testString: assert($('text').eq(1).text() == '31' && $('text').eq(1).attr('y') == '4', 'The second <code>text</code> element should have a label of 31 and a <code>y</code> value of 4.');
testString: assert($('text').eq(1).text() == '31' && $('text').eq(1).attr('y') == '4');
- text: The third <code>text</code> element should have a label of 22 and a <code>y</code> value of 31.
testString: assert($('text').eq(2).text() == '22' && $('text').eq(2).attr('y') == '31', 'The third <code>text</code> element should have a label of 22 and a <code>y</code> value of 31.');
testString: assert($('text').eq(2).text() == '22' && $('text').eq(2).attr('y') == '31');
- text: The fourth <code>text</code> element should have a label of 17 and a <code>y</code> value of 46.
testString: assert($('text').eq(3).text() == '17' && $('text').eq(3).attr('y') == '46', 'The fourth <code>text</code> element should have a label of 17 and a <code>y</code> value of 46.');
testString: assert($('text').eq(3).text() == '17' && $('text').eq(3).attr('y') == '46');
- text: The fifth <code>text</code> element should have a label of 25 and a <code>y</code> value of 22.
testString: assert($('text').eq(4).text() == '25' && $('text').eq(4).attr('y') == '22', 'The fifth <code>text</code> element should have a label of 25 and a <code>y</code> value of 22.');
testString: assert($('text').eq(4).text() == '25' && $('text').eq(4).attr('y') == '22');
- text: The sixth <code>text</code> element should have a label of 18 and a <code>y</code> value of 43.
testString: assert($('text').eq(5).text() == '18' && $('text').eq(5).attr('y') == '43', 'The sixth <code>text</code> element should have a label of 18 and a <code>y</code> value of 43.');
testString: assert($('text').eq(5).text() == '18' && $('text').eq(5).attr('y') == '43');
- text: The seventh <code>text</code> element should have a label of 29 and a <code>y</code> value of 10.
testString: assert($('text').eq(6).text() == '29' && $('text').eq(6).attr('y') == '10', 'The seventh <code>text</code> element should have a label of 29 and a <code>y</code> value of 10.');
testString: assert($('text').eq(6).text() == '29' && $('text').eq(6).attr('y') == '10');
- text: The eighth <code>text</code> element should have a label of 14 and a <code>y</code> value of 55.
testString: assert($('text').eq(7).text() == '14' && $('text').eq(7).attr('y') == '55', 'The eighth <code>text</code> element should have a label of 14 and a <code>y</code> value of 55.');
testString: assert($('text').eq(7).text() == '14' && $('text').eq(7).attr('y') == '55');
- text: The ninth <code>text</code> element should have a label of 9 and a <code>y</code> value of 70.
testString: assert($('text').eq(8).text() == '9' && $('text').eq(8).attr('y') == '70', 'The ninth <code>text</code> element should have a label of 9 and a <code>y</code> value of 70.');
testString: assert($('text').eq(8).text() == '9' && $('text').eq(8).attr('y') == '70');
```

22
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.english.md
View File

@ -22,27 +22,27 @@ Label each point on the scatter plot using the <code>text</code> elements. The t
```yml
tests:
- text: Your code should have 10 <code>text</code> elements.
testString: assert($('text').length == 10, 'Your code should have 10 <code>text</code> elements.');
testString: assert($('text').length == 10);
- text: The first label should have text of "34, 78", an <code>x</code> value of 39, and a <code>y</code> value of 422.
testString: assert($('text').eq(0).text() == '34, 78' && $('text').eq(0).attr('x') == '39' && $('text').eq(0).attr('y') == '422', 'The first label should have text of "34, 78", an <code>x</code> value of 39, and a <code>y</code> value of 422.');
testString: assert($('text').eq(0).text() == '34, 78' && $('text').eq(0).attr('x') == '39' && $('text').eq(0).attr('y') == '422');
- text: The second label should have text of "109, 280", an <code>x</code> value of 114, and a <code>y</code> value of 220.
testString: assert($('text').eq(1).text() == '109, 280' && $('text').eq(1).attr('x') == '114' && $('text').eq(1).attr('y') == '220', 'The second label should have text of "109, 280", an <code>x</code> value of 114, and a <code>y</code> value of 220.');
testString: assert($('text').eq(1).text() == '109, 280' && $('text').eq(1).attr('x') == '114' && $('text').eq(1).attr('y') == '220');
- text: The third label should have text of "310, 120", an <code>x</code> value of 315, and a <code>y</code> value of 380.
testString: assert($('text').eq(2).text() == '310, 120' && $('text').eq(2).attr('x') == '315' && $('text').eq(2).attr('y') == '380', 'The third label should have text of "310, 120", an <code>x</code> value of 315, and a <code>y</code> value of 380.');
testString: assert($('text').eq(2).text() == '310, 120' && $('text').eq(2).attr('x') == '315' && $('text').eq(2).attr('y') == '380');
- text: The fourth label should have text of "79, 411", an <code>x</code> value of 84, and a <code>y</code> value of 89.
testString: assert($('text').eq(3).text() == '79, 411' && $('text').eq(3).attr('x') == '84' && $('text').eq(3).attr('y') == '89', 'The fourth label should have text of "79, 411", an <code>x</code> value of 84, and a <code>y</code> value of 89.');
testString: assert($('text').eq(3).text() == '79, 411' && $('text').eq(3).attr('x') == '84' && $('text').eq(3).attr('y') == '89');
- text: The fifth label should have text of "420, 220", an <code>x</code> value of 425, and a <code>y</code> value of 280.
testString: assert($('text').eq(4).text() == '420, 220' && $('text').eq(4).attr('x') == '425' && $('text').eq(4).attr('y') == '280', 'The fifth label should have text of "420, 220", an <code>x</code> value of 425, and a <code>y</code> value of 280.');
testString: assert($('text').eq(4).text() == '420, 220' && $('text').eq(4).attr('x') == '425' && $('text').eq(4).attr('y') == '280');
- text: The sixth label should have text of "233, 145", an <code>x</code> value of 238, and a <code>y</code> value of 355.
testString: assert($('text').eq(5).text() == '233, 145' && $('text').eq(5).attr('x') == '238' && $('text').eq(5).attr('y') == '355', 'The sixth label should have text of "233, 145", an <code>x</code> value of 238, and a <code>y</code> value of 355.');
testString: assert($('text').eq(5).text() == '233, 145' && $('text').eq(5).attr('x') == '238' && $('text').eq(5).attr('y') == '355');
- text: The seventh label should have text of "333, 96", an <code>x</code> value of 338, and a <code>y</code> value of 404.
testString: assert($('text').eq(6).text() == '333, 96' && $('text').eq(6).attr('x') == '338' && $('text').eq(6).attr('y') == '404', 'The seventh label should have text of "333, 96", an <code>x</code> value of 338, and a <code>y</code> value of 404.');
testString: assert($('text').eq(6).text() == '333, 96' && $('text').eq(6).attr('x') == '338' && $('text').eq(6).attr('y') == '404');
- text: The eighth label should have text of "222, 333", an <code>x</code> value of 227, and a <code>y</code> value of 167.
testString: assert($('text').eq(7).text() == '222, 333' && $('text').eq(7).attr('x') == '227' && $('text').eq(7).attr('y') == '167', 'The eighth label should have text of "222, 333", an <code>x</code> value of 227, and a <code>y</code> value of 167.');
testString: assert($('text').eq(7).text() == '222, 333' && $('text').eq(7).attr('x') == '227' && $('text').eq(7).attr('y') == '167');
- text: The ninth label should have text of "78, 320", an <code>x</code> value of 83, and a <code>y</code> value of 180.
testString: assert($('text').eq(8).text() == '78, 320' && $('text').eq(8).attr('x') == '83' && $('text').eq(8).attr('y') == '180', 'The ninth label should have text of "78, 320", an <code>x</code> value of 83, and a <code>y</code> value of 180.');
testString: assert($('text').eq(8).text() == '78, 320' && $('text').eq(8).attr('x') == '83' && $('text').eq(8).attr('y') == '180');
- text: The tenth label should have text of "21, 123", an <code>x</code> value of 26, and a <code>y</code> value of 377.
testString: assert($('text').eq(9).text() == '21, 123' && $('text').eq(9).attr('x') == '26' && $('text').eq(9).attr('y') == '377', 'The tenth label should have text of "21, 123", an <code>x</code> value of 26, and a <code>y</code> value of 377.');
testString: assert($('text').eq(9).text() == '21, 123' && $('text').eq(9).attr('x') == '26' && $('text').eq(9).attr('y') == '377');
```

18
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.english.md
View File

@ -30,23 +30,23 @@ Add the <code>style()</code> method to the code in the editor to set the <code>c
```yml
tests:
- text: The first <code>h2</code> should have a <code>color</code> of red.
testString: assert($('h2').eq(0).css('color') == "rgb(255, 0, 0)", 'The first <code>h2</code> should have a <code>color</code> of red.');
testString: assert($('h2').eq(0).css('color') == "rgb(255, 0, 0)");
- text: The second <code>h2</code> should have a <code>color</code> of green.
testString: assert($('h2').eq(1).css('color') == "rgb(0, 128, 0)", 'The second <code>h2</code> should have a <code>color</code> of green.');
testString: assert($('h2').eq(1).css('color') == "rgb(0, 128, 0)");
- text: The third <code>h2</code> should have a <code>color</code> of green.
testString: assert($('h2').eq(2).css('color') == "rgb(0, 128, 0)", 'The third <code>h2</code> should have a <code>color</code> of green.');
testString: assert($('h2').eq(2).css('color') == "rgb(0, 128, 0)");
- text: The fourth <code>h2</code> should have a <code>color</code> of red.
testString: assert($('h2').eq(3).css('color') == "rgb(255, 0, 0)", 'The fourth <code>h2</code> should have a <code>color</code> of red.');
testString: assert($('h2').eq(3).css('color') == "rgb(255, 0, 0)");
- text: The fifth <code>h2</code> should have a <code>color</code> of green.
testString: assert($('h2').eq(4).css('color') == "rgb(0, 128, 0)", 'The fifth <code>h2</code> should have a <code>color</code> of green.');
testString: assert($('h2').eq(4).css('color') == "rgb(0, 128, 0)");
- text: The sixth <code>h2</code> should have a <code>color</code> of red.
testString: assert($('h2').eq(5).css('color') == "rgb(255, 0, 0)", 'The sixth <code>h2</code> should have a <code>color</code> of red.');
testString: assert($('h2').eq(5).css('color') == "rgb(255, 0, 0)");
- text: The seventh <code>h2</code> should have a <code>color</code> of green.
testString: assert($('h2').eq(6).css('color') == "rgb(0, 128, 0)", 'The seventh <code>h2</code> should have a <code>color</code> of green.');
testString: assert($('h2').eq(6).css('color') == "rgb(0, 128, 0)");
- text: The eighth <code>h2</code> should have a <code>color</code> of red.
testString: assert($('h2').eq(7).css('color') == "rgb(255, 0, 0)", 'The eighth <code>h2</code> should have a <code>color</code> of red.');
testString: assert($('h2').eq(7).css('color') == "rgb(255, 0, 0)");
- text: The ninth <code>h2</code> should have a <code>color</code> of red.
testString: assert($('h2').eq(8).css('color') == "rgb(255, 0, 0)", 'The ninth <code>h2</code> should have a <code>color</code> of red.');
testString: assert($('h2').eq(8).css('color') == "rgb(255, 0, 0)");
```

2
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.english.md
View File

@ -21,7 +21,7 @@ Add an <code>attr()</code> method to set the "fill" of all the bars to the color
```yml
tests:
- text: The bars should all have a <code>fill</code> color of navy.
testString: assert($('rect').css('fill') == "rgb(0, 0, 128)", 'The bars should all have a <code>fill</code> color of navy.');
testString: assert($('rect').css('fill') == "rgb(0, 0, 128)");
```

18
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.english.md
View File

@ -23,23 +23,23 @@ First, add a <code>margin</code> of 2px to the <code>bar</code> class in the <co
```yml
tests:
- text: The first <code>div</code> should have a <code>height</code> of 120 pixels and a <code>margin</code> of 2 pixels.
testString: assert($('div').eq(0).css('height') == '120px' && $('div').eq(0).css('margin-right') == '2px', 'The first <code>div</code> should have a <code>height</code> of 120 pixels and a <code>margin</code> of 2 pixels.');
testString: assert($('div').eq(0).css('height') == '120px' && $('div').eq(0).css('margin-right') == '2px');
- text: The second <code>div</code> should have a <code>height</code> of 310 pixels and a <code>margin</code> of 2 pixels.
testString: assert($('div').eq(1).css('height') == '310px' && $('div').eq(1).css('margin-right') == '2px', 'The second <code>div</code> should have a <code>height</code> of 310 pixels and a <code>margin</code> of 2 pixels.');
testString: assert($('div').eq(1).css('height') == '310px' && $('div').eq(1).css('margin-right') == '2px');
- text: The third <code>div</code> should have a <code>height</code> of 220 pixels and a <code>margin</code> of 2 pixels.
testString: assert($('div').eq(2).css('height') == '220px' && $('div').eq(2).css('margin-right') == '2px', 'The third <code>div</code> should have a <code>height</code> of 220 pixels and a <code>margin</code> of 2 pixels.');
testString: assert($('div').eq(2).css('height') == '220px' && $('div').eq(2).css('margin-right') == '2px');
- text: The fourth <code>div</code> should have a <code>height</code> of 170 pixels and a <code>margin</code> of 2 pixels.
testString: assert($('div').eq(3).css('height') == '170px' && $('div').eq(3).css('margin-right') == '2px', 'The fourth <code>div</code> should have a <code>height</code> of 170 pixels and a <code>margin</code> of 2 pixels.');
testString: assert($('div').eq(3).css('height') == '170px' && $('div').eq(3).css('margin-right') == '2px');
- text: The fifth <code>div</code> should have a <code>height</code> of 250 pixels and a <code>margin</code> of 2 pixels.
testString: assert($('div').eq(4).css('height') == '250px' && $('div').eq(4).css('margin-right') == '2px', 'The fifth <code>div</code> should have a <code>height</code> of 250 pixels and a <code>margin</code> of 2 pixels.');
testString: assert($('div').eq(4).css('height') == '250px' && $('div').eq(4).css('margin-right') == '2px');
- text: The sixth <code>div</code> should have a <code>height</code> of 180 pixels and a <code>margin</code> of 2 pixels.
testString: assert($('div').eq(5).css('height') == '180px' && $('div').eq(5).css('margin-right') == '2px', 'The sixth <code>div</code> should have a <code>height</code> of 180 pixels and a <code>margin</code> of 2 pixels.');
testString: assert($('div').eq(5).css('height') == '180px' && $('div').eq(5).css('margin-right') == '2px');
- text: The seventh <code>div</code> should have a <code>height</code> of 290 pixels and a <code>margin</code> of 2 pixels.
testString: assert($('div').eq(6).css('height') == '290px' && $('div').eq(6).css('margin-right') == '2px', 'The seventh <code>div</code> should have a <code>height</code> of 290 pixels and a <code>margin</code> of 2 pixels.');
testString: assert($('div').eq(6).css('height') == '290px' && $('div').eq(6).css('margin-right') == '2px');
- text: The eighth <code>div</code> should have a <code>height</code> of 140 pixels and a <code>margin</code> of 2 pixels.
testString: assert($('div').eq(7).css('height') == '140px' && $('div').eq(7).css('margin-right') == '2px', 'The eighth <code>div</code> should have a <code>height</code> of 140 pixels and a <code>margin</code> of 2 pixels.');
testString: assert($('div').eq(7).css('height') == '140px' && $('div').eq(7).css('margin-right') == '2px');
- text: The ninth <code>div</code> should have a <code>height</code> of 90 pixels and a <code>margin</code> of 2 pixels.
testString: assert($('div').eq(8).css('height') == '90px' && $('div').eq(8).css('margin-right') == '2px', 'The ninth <code>div</code> should have a <code>height</code> of 90 pixels and a <code>margin</code> of 2 pixels.');
testString: assert($('div').eq(8).css('height') == '90px' && $('div').eq(8).css('margin-right') == '2px');
```

8
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.english.md
View File

@ -30,13 +30,13 @@ Use the <code>data()</code>, <code>enter()</code>, and <code>append()</code> met
```yml
tests:
- text: Your document should have 9 <code>rect</code> elements.
testString: assert($('rect').length == 9, 'Your document should have 9 <code>rect</code> elements.');
testString: assert($('rect').length == 9);
- text: Your code should use the <code>data()</code> method.
testString: assert(code.match(/\.data/g), 'Your code should use the <code>data()</code> method.');
testString: assert(code.match(/\.data/g));
- text: Your code should use the <code>enter()</code> method.
testString: assert(code.match(/\.enter/g), 'Your code should use the <code>enter()</code> method.');
testString: assert(code.match(/\.enter/g));
- text: Your code should use the <code>append()</code> method.
testString: assert(code.match(/\.append/g), 'Your code should use the <code>append()</code> method.');
testString: assert(code.match(/\.append/g));
```

6
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.english.md
View File

@ -26,11 +26,11 @@ Change the <code>scale</code> variable to create a linear scale. Then set the <c
```yml
tests:
- text: The text in the <code>h2</code> should be 50.
testString: assert($('h2').text() == '50', 'The text in the <code>h2</code> should be 50.');
testString: assert($('h2').text() == '50');
- text: Your code should use the <code>scaleLinear()</code> method.
testString: assert(code.match(/\.scaleLinear/g), 'Your code should use the <code>scaleLinear()</code> method.');
testString: assert(code.match(/\.scaleLinear/g));
- text: The <code>output</code> variable should call <code>scale</code> with an argument of 50.
testString: assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g), 'The <code>output</code> variable should call <code>scale</code> with an argument of 50.');
testString: assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g));
```

2
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.english.md
View File

@ -22,7 +22,7 @@ Use the <code>data()</code>, <code>enter()</code>, and <code>append()</code> met
```yml
tests:
- text: Your code should have 10 <code>circle</code> elements.
testString: assert($('circle').length == 10, 'Your code should have 10 <code>circle</code> elements.');
testString: assert($('circle').length == 10);
```

10
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.english.md
View File

@ -24,15 +24,15 @@ Add a <code>rect</code> shape to the <code>svg</code> using <code>append()</code
```yml
tests:
- text: Your document should have 1 <code>rect</code> element.
testString: assert($('rect').length == 1, 'Your document should have 1 <code>rect</code> element.');
testString: assert($('rect').length == 1);
- text: The <code>rect</code> element should have a <code>width</code> attribute set to 25.
testString: assert($('rect').attr('width') == '25', 'The <code>rect</code> element should have a <code>width</code> attribute set to 25.');
testString: assert($('rect').attr('width') == '25');
- text: The <code>rect</code> element should have a <code>height</code> attribute set to 100.
testString: assert($('rect').attr('height') == '100', 'The <code>rect</code> element should have a <code>height</code> attribute set to 100.');
testString: assert($('rect').attr('height') == '100');
- text: The <code>rect</code> element should have an <code>x</code> attribute set to 0.
testString: assert($('rect').attr('x') == '0', 'The <code>rect</code> element should have an <code>x</code> attribute set to 0.');
testString: assert($('rect').attr('x') == '0');
- text: The <code>rect</code> element should have a <code>y</code> attribute set to 0.
testString: assert($('rect').attr('y') == '0', 'The <code>rect</code> element should have a <code>y</code> attribute set to 0.');
testString: assert($('rect').attr('y') == '0');
```

18
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.english.md
View File

@ -31,23 +31,23 @@ Change the callback function for the <code>height</code> attribute to return the
```yml
tests:
- text: The first <code>rect</code> should have a <code>height</code> of 36.
testString: assert($('rect').eq(0).attr('height') == '36', 'The first <code>rect</code> should have a <code>height</code> of 36.');
testString: assert($('rect').eq(0).attr('height') == '36');
- text: The second <code>rect</code> should have a <code>height</code> of 93.
testString: assert($('rect').eq(1).attr('height') == '93', 'The second <code>rect</code> should have a <code>height</code> of 93.');
testString: assert($('rect').eq(1).attr('height') == '93');
- text: The third <code>rect</code> should have a <code>height</code> of 66.
testString: assert($('rect').eq(2).attr('height') == '66', 'The third <code>rect</code> should have a <code>height</code> of 66.');
testString: assert($('rect').eq(2).attr('height') == '66');
- text: The fourth <code>rect</code> should have a <code>height</code> of 51.
testString: assert($('rect').eq(3).attr('height') == '51', 'The fourth <code>rect</code> should have a <code>height</code> of 51.');
testString: assert($('rect').eq(3).attr('height') == '51');
- text: The fifth <code>rect</code> should have a <code>height</code> of 75.
testString: assert($('rect').eq(4).attr('height') == '75', 'The fifth <code>rect</code> should have a <code>height</code> of 75.');
testString: assert($('rect').eq(4).attr('height') == '75');
- text: The sixth <code>rect</code> should have a <code>height</code> of 54.
testString: assert($('rect').eq(5).attr('height') == '54', 'The sixth <code>rect</code> should have a <code>height</code> of 54.');
testString: assert($('rect').eq(5).attr('height') == '54');
- text: The seventh <code>rect</code> should have a <code>height</code> of 87.
testString: assert($('rect').eq(6).attr('height') == '87', 'The seventh <code>rect</code> should have a <code>height</code> of 87.');
testString: assert($('rect').eq(6).attr('height') == '87');
- text: The eighth <code>rect</code> should have a <code>height</code> of 42.
testString: assert($('rect').eq(7).attr('height') == '42', 'The eighth <code>rect</code> should have a <code>height</code> of 42.');
testString: assert($('rect').eq(7).attr('height') == '42');
- text: The ninth <code>rect</code> should have a <code>height</code> of 27.
testString: assert($('rect').eq(8).attr('height') == '27', 'The ninth <code>rect</code> should have a <code>height</code> of 27.');
testString: assert($('rect').eq(8).attr('height') == '27');
```

18
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.english.md
View File

@ -35,23 +35,23 @@ Change the <code>x</code> attribute callback function so it returns the index ti
```yml
tests:
- text: The first <code>rect</code> should have an <code>x</code> value of 0.
testString: assert($('rect').eq(0).attr('x') == '0', 'The first <code>rect</code> should have an <code>x</code> value of 0.');
testString: assert($('rect').eq(0).attr('x') == '0');
- text: The second <code>rect</code> should have an <code>x</code> value of 30.
testString: assert($('rect').eq(1).attr('x') == '30', 'The second <code>rect</code> should have an <code>x</code> value of 30.');
testString: assert($('rect').eq(1).attr('x') == '30');
- text: The third <code>rect</code> should have an <code>x</code> value of 60.
testString: assert($('rect').eq(2).attr('x') == '60', 'The third <code>rect</code> should have an <code>x</code> value of 60.');
testString: assert($('rect').eq(2).attr('x') == '60');
- text: The fourth <code>rect</code> should have an <code>x</code> value of 90.
testString: assert($('rect').eq(3).attr('x') == '90', 'The fourth <code>rect</code> should have an <code>x</code> value of 90.');
testString: assert($('rect').eq(3).attr('x') == '90');
- text: The fifth <code>rect</code> should have an <code>x</code> value of 120.
testString: assert($('rect').eq(4).attr('x') == '120', 'The fifth <code>rect</code> should have an <code>x</code> value of 120.');
testString: assert($('rect').eq(4).attr('x') == '120');
- text: The sixth <code>rect</code> should have an <code>x</code> value of 150.
testString: assert($('rect').eq(5).attr('x') == '150', 'The sixth <code>rect</code> should have an <code>x</code> value of 150.');
testString: assert($('rect').eq(5).attr('x') == '150');
- text: The seventh <code>rect</code> should have an <code>x</code> value of 180.
testString: assert($('rect').eq(6).attr('x') == '180', 'The seventh <code>rect</code> should have an <code>x</code> value of 180.');
testString: assert($('rect').eq(6).attr('x') == '180');
- text: The eighth <code>rect</code> should have an <code>x</code> value of 210.
testString: assert($('rect').eq(7).attr('x') == '210', 'The eighth <code>rect</code> should have an <code>x</code> value of 210.');
testString: assert($('rect').eq(7).attr('x') == '210');
- text: The ninth <code>rect</code> should have an <code>x</code> value of 240.
testString: assert($('rect').eq(8).attr('x') == '240', 'The ninth <code>rect</code> should have an <code>x</code> value of 240.');
testString: assert($('rect').eq(8).attr('x') == '240');
```

18
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/invert-svg-elements.english.md
View File

@ -25,23 +25,23 @@ Change the callback function for the <code>y</code> attribute to set the bars ri
```yml
tests:
- text: The first <code>rect</code> should have a <code>y</code> value of 64.
testString: assert($('rect').eq(0).attr('y') == h - (dataset[0] * 3), 'The first <code>rect</code> should have a <code>y</code> value of 64.');
testString: assert($('rect').eq(0).attr('y') == h - (dataset[0] * 3));
- text: The second <code>rect</code> should have a <code>y</code> value of 7.
testString: assert($('rect').eq(1).attr('y') == h - (dataset[1] * 3), 'The second <code>rect</code> should have a <code>y</code> value of 7.');
testString: assert($('rect').eq(1).attr('y') == h - (dataset[1] * 3));
- text: The third <code>rect</code> should have a <code>y</code> value of 34.
testString: assert($('rect').eq(2).attr('y') == h - (dataset[2] * 3), 'The third <code>rect</code> should have a <code>y</code> value of 34.');
testString: assert($('rect').eq(2).attr('y') == h - (dataset[2] * 3));
- text: The fourth <code>rect</code> should have a <code>y</code> value of 49.
testString: assert($('rect').eq(3).attr('y') == h - (dataset[3] * 3), 'The fourth <code>rect</code> should have a <code>y</code> value of 49.');
testString: assert($('rect').eq(3).attr('y') == h - (dataset[3] * 3));
- text: The fifth <code>rect</code> should have a <code>y</code> value of 25.
testString: assert($('rect').eq(4).attr('y') == h - (dataset[4] * 3), 'The fifth <code>rect</code> should have a <code>y</code> value of 25.');
testString: assert($('rect').eq(4).attr('y') == h - (dataset[4] * 3));
- text: The sixth <code>rect</code> should have a <code>y</code> value of 46.
testString: assert($('rect').eq(5).attr('y') == h - (dataset[5] * 3), 'The sixth <code>rect</code> should have a <code>y</code> value of 46.');
testString: assert($('rect').eq(5).attr('y') == h - (dataset[5] * 3));
- text: The seventh <code>rect</code> should have a <code>y</code> value of 13.
testString: assert($('rect').eq(6).attr('y') == h - (dataset[6] * 3), 'The seventh <code>rect</code> should have a <code>y</code> value of 13.');
testString: assert($('rect').eq(6).attr('y') == h - (dataset[6] * 3));
- text: The eighth <code>rect</code> should have a <code>y</code> value of 58.
testString: assert($('rect').eq(7).attr('y') == h - (dataset[7] * 3), 'The eighth <code>rect</code> should have a <code>y</code> value of 58.');
testString: assert($('rect').eq(7).attr('y') == h - (dataset[7] * 3));
- text: The ninth <code>rect</code> should have a <code>y</code> value of 73.
testString: assert($('rect').eq(8).attr('y') == h - (dataset[8] * 3), 'The ninth <code>rect</code> should have a <code>y</code> value of 73.');
testString: assert($('rect').eq(8).attr('y') == h - (dataset[8] * 3));
```

6
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.english.md
View File

@ -24,11 +24,11 @@ Add an <code>svg</code> node to the <code>body</code> using <code>append()</code
```yml
tests:
- text: Your document should have 1 <code>svg</code> element.
testString: assert($('svg').length == 1, 'Your document should have 1 <code>svg</code> element.');
testString: assert($('svg').length == 1);
- text: The <code>svg</code> element should have a <code>width</code> attribute set to 500 or styled to have a width of 500px.
testString: assert($('svg').attr('width') == '500'||$('svg').css('width') == '500px', 'The <code>svg</code> element should have a <code>width</code> attribute set to 500 or styled to have a width of 500px.');
testString: assert($('svg').attr('width') == '500'||$('svg').css('width') == '500px');
- text: The <code>svg</code> element should have a <code>height</code> attribute set to 100 or styled to have a height of 100px.
testString: assert($('svg').attr('height') == '100'||$('svg').css('height') == '100px', 'The <code>svg</code> element should have a <code>height</code> attribute set to 100 or styled to have a height of 100px.');
testString: assert($('svg').attr('height') == '100'||$('svg').css('height') == '100px');
```

6
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.english.md
View File

@ -22,11 +22,11 @@ Select all of the <code>li</code> tags in the document, and change their text to
```yml
tests:
- text: There should be 3 <code>li</code> elements on the page, and the text in each one should say "list item". Capitalization and spacing should match exactly.
testString: assert($('li').text().match(/list item/g).length == 3, 'There should be 3 <code>li</code> elements on the page, and the text in each one should say "list item". Capitalization and spacing should match exactly.');
testString: assert($('li').text().match(/list item/g).length == 3);
- text: Your code should access the <code>d3</code> object.
testString: assert(code.match(/d3/g), 'Your code should access the <code>d3</code> object.');
testString: assert(code.match(/d3/g));
- text: Your code should use the <code>selectAll</code> method.
testString: assert(code.match(/\.selectAll/g), 'Your code should use the <code>selectAll</code> method.');
testString: assert(code.match(/\.selectAll/g));
```

10
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.english.md
View File

@ -40,15 +40,15 @@ Create a scale and set its domain to <code>[250, 500]</code> and range to <code>
```yml
tests:
- text: Your code should use the <code>domain()</code> method.
testString: assert(code.match(/\.domain/g), 'Your code should use the <code>domain()</code> method.');
testString: assert(code.match(/\.domain/g));
- text: The <code>domain()</code> of the scale should be set to <code>[250, 500]</code>.
testString: assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]), 'The <code>domain()</code> of the scale should be set to <code>[250, 500]</code>.');
testString: assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]));
- text: Your code should use the <code>range()</code> method.
testString: assert(code.match(/\.range/g), 'Your code should use the <code>range()</code> method.');
testString: assert(code.match(/\.range/g));
- text: The <code>range()</code> of the scale should be set to <code>[10, 150]</code>.
testString: assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]), 'The <code>range()</code> of the scale should be set to <code>[10, 150]</code>.');
testString: assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]));
- text: The text in the <code>h2</code> should be -102.
testString: assert($('h2').text() == '-102', 'The text in the <code>h2</code> should be -102.');
testString: assert($('h2').text() == '-102');
```

4
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/style-d3-labels.english.md
View File

@ -20,9 +20,9 @@ Set the <code>font-size</code> of the <code>text</code> elements to 25px, and th
```yml
tests:
- text: The labels should all have a <code>fill</code> color of red.
testString: assert($('text').css('fill') == 'rgb(255, 0, 0)', 'The labels should all have a <code>fill</code> color of red.');
testString: assert($('text').css('fill') == 'rgb(255, 0, 0)');
- text: The labels should all have a <code>font-size</code> of 25 pixels.
testString: assert($('text').css('font-size') == '25px', 'The labels should all have a <code>font-size</code> of 25 pixels.');
testString: assert($('text').css('font-size') == '25px');
```

18
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.english.md
View File

@ -24,23 +24,23 @@ Add the <code>style()</code> method to the code in the editor to set the <code>h
```yml
tests:
- text: The first <code>div</code> should have a <code>height</code> of 12 pixels.
testString: assert($('div').eq(0).css('height') == '12px', 'The first <code>div</code> should have a <code>height</code> of 12 pixels.');
testString: assert($('div').eq(0).css('height') == '12px');
- text: The second <code>div</code> should have a <code>height</code> of 31 pixels.
testString: assert($('div').eq(1).css('height') == '31px', 'The second <code>div</code> should have a <code>height</code> of 31 pixels.');
testString: assert($('div').eq(1).css('height') == '31px');
- text: The third <code>div</code> should have a <code>height</code> of 22 pixels.
testString: assert($('div').eq(2).css('height') == '22px', 'The third <code>div</code> should have a <code>height</code> of 22 pixels.');
testString: assert($('div').eq(2).css('height') == '22px');
- text: The fourth <code>div</code> should have a <code>height</code> of 17 pixels.
testString: assert($('div').eq(3).css('height') == '17px', 'The fourth <code>div</code> should have a <code>height</code> of 17 pixels.');
testString: assert($('div').eq(3).css('height') == '17px');
- text: The fifth <code>div</code> should have a <code>height</code> of 25 pixels.
testString: assert($('div').eq(4).css('height') == '25px', 'The fifth <code>div</code> should have a <code>height</code> of 25 pixels.');
testString: assert($('div').eq(4).css('height') == '25px');
- text: The sixth <code>div</code> should have a <code>height</code> of 18 pixels.
testString: assert($('div').eq(5).css('height') == '18px', 'The sixth <code>div</code> should have a <code>height</code> of 18 pixels.');
testString: assert($('div').eq(5).css('height') == '18px');
- text: The seventh <code>div</code> should have a <code>height</code> of 29 pixels.
testString: assert($('div').eq(6).css('height') == '29px', 'The seventh <code>div</code> should have a <code>height</code> of 29 pixels.');
testString: assert($('div').eq(6).css('height') == '29px');
- text: The eighth <code>div</code> should have a <code>height</code> of 14 pixels.
testString: assert($('div').eq(7).css('height') == '14px', 'The eighth <code>div</code> should have a <code>height</code> of 14 pixels.');
testString: assert($('div').eq(7).css('height') == '14px');
- text: The ninth <code>div</code> should have a <code>height</code> of 9 pixels.
testString: assert($('div').eq(8).css('height') == '9px', 'The ninth <code>div</code> should have a <code>height</code> of 9 pixels.');
testString: assert($('div').eq(8).css('height') == '9px');
```

44
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.english.md
View File

@ -29,49 +29,49 @@ For the <code>text</code> elements, apply the scales to set the <code>x</code> a
```yml
tests:
- text: Your code should have 10 <code>circle</code> elements.
testString: assert($('circle').length == 10, 'Your code should have 10 <code>circle</code> elements.');
testString: assert($('circle').length == 10);
- text: The first <code>circle</code> element should have a <code>cx</code> value of approximately 91 and a <code>cy</code> value of approximately 368 after applying the scales. It should also have an <code>r</code> value of 5.
testString: assert(Math.round($('circle').eq(0).attr('cx')) == '91' && Math.round($('circle').eq(0).attr('cy')) == '368' && $('circle').eq(0).attr('r') == '5', 'The first <code>circle</code> element should have a <code>cx</code> value of approximately 91 and a <code>cy</code> value of approximately 368 after applying the scales. It should also have an <code>r</code> value of 5.');
testString: assert(Math.round($('circle').eq(0).attr('cx')) == '91' && Math.round($('circle').eq(0).attr('cy')) == '368' && $('circle').eq(0).attr('r') == '5');
- text: The second <code>circle</code> element should have a <code>cx</code> value of approximately 159 and a <code>cy</code> value of approximately 181 after applying the scales. It should also have an <code>r</code> value of 5.
testString: assert(Math.round($('circle').eq(1).attr('cx')) == '159' && Math.round($('circle').eq(1).attr('cy')) == '181' && $('circle').eq(1).attr('r') == '5', 'The second <code>circle</code> element should have a <code>cx</code> value of approximately 159 and a <code>cy</code> value of approximately 181 after applying the scales. It should also have an <code>r</code> value of 5.');
testString: assert(Math.round($('circle').eq(1).attr('cx')) == '159' && Math.round($('circle').eq(1).attr('cy')) == '181' && $('circle').eq(1).attr('r') == '5');
- text: The third <code>circle</code> element should have a <code>cx</code> value of approximately 340 and a <code>cy</code> value of approximately 329 after applying the scales. It should also have an <code>r</code> value of 5.
testString: assert(Math.round($('circle').eq(2).attr('cx')) == '340' && Math.round($('circle').eq(2).attr('cy')) == '329' && $('circle').eq(2).attr('r') == '5', 'The third <code>circle</code> element should have a <code>cx</code> value of approximately 340 and a <code>cy</code> value of approximately 329 after applying the scales. It should also have an <code>r</code> value of 5.');
testString: assert(Math.round($('circle').eq(2).attr('cx')) == '340' && Math.round($('circle').eq(2).attr('cy')) == '329' && $('circle').eq(2).attr('r') == '5');
- text: The fourth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 60 after applying the scales. It should also have an <code>r</code> value of 5.
testString: assert(Math.round($('circle').eq(3).attr('cx')) == '131' && Math.round($('circle').eq(3).attr('cy')) == '60' && $('circle').eq(3).attr('r') == '5', 'The fourth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 60 after applying the scales. It should also have an <code>r</code> value of 5.');
testString: assert(Math.round($('circle').eq(3).attr('cx')) == '131' && Math.round($('circle').eq(3).attr('cy')) == '60' && $('circle').eq(3).attr('r') == '5');
- text: The fifth <code>circle</code> element should have a <code>cx</code> value of approximately 440 and a <code>cy</code> value of approximately 237 after applying the scales. It should also have an <code>r</code> value of 5.
testString: assert(Math.round($('circle').eq(4).attr('cx')) == '440' && Math.round($('circle').eq(4).attr('cy')) == '237' && $('circle').eq(4).attr('r') == '5', 'The fifth <code>circle</code> element should have a <code>cx</code> value of approximately 440 and a <code>cy</code> value of approximately 237 after applying the scales. It should also have an <code>r</code> value of 5.');
testString: assert(Math.round($('circle').eq(4).attr('cx')) == '440' && Math.round($('circle').eq(4).attr('cy')) == '237' && $('circle').eq(4).attr('r') == '5');
- text: The sixth <code>circle</code> element should have a <code>cx</code> value of approximately 271 and a <code>cy</code> value of approximately 306 after applying the scales. It should also have an <code>r</code> value of 5.
testString: assert(Math.round($('circle').eq(5).attr('cx')) == '271' && Math.round($('circle').eq(5).attr('cy')) == '306' && $('circle').eq(5).attr('r') == '5', 'The sixth <code>circle</code> element should have a <code>cx</code> value of approximately 271 and a <code>cy</code> value of approximately 306 after applying the scales. It should also have an <code>r</code> value of 5.');
testString: assert(Math.round($('circle').eq(5).attr('cx')) == '271' && Math.round($('circle').eq(5).attr('cy')) == '306' && $('circle').eq(5).attr('r') == '5');
- text: The seventh <code>circle</code> element should have a <code>cx</code> value of approximately 361 and a <code>cy</code> value of approximately 351 after applying the scales. It should also have an <code>r</code> value of 5.
testString: assert(Math.round($('circle').eq(6).attr('cx')) == '361' && Math.round($('circle').eq(6).attr('cy')) == '351' && $('circle').eq(6).attr('r') == '5', 'The seventh <code>circle</code> element should have a <code>cx</code> value of approximately 361 and a <code>cy</code> value of approximately 351 after applying the scales. It should also have an <code>r</code> value of 5.');
testString: assert(Math.round($('circle').eq(6).attr('cx')) == '361' && Math.round($('circle').eq(6).attr('cy')) == '351' && $('circle').eq(6).attr('r') == '5');
- text: The eighth <code>circle</code> element should have a <code>cx</code> value of approximately 261 and a <code>cy</code> value of approximately 132 after applying the scales. It should also have an <code>r</code> value of 5.
testString: assert(Math.round($('circle').eq(7).attr('cx')) == '261' && Math.round($('circle').eq(7).attr('cy')) == '132' && $('circle').eq(7).attr('r') == '5', 'The eighth <code>circle</code> element should have a <code>cx</code> value of approximately 261 and a <code>cy</code> value of approximately 132 after applying the scales. It should also have an <code>r</code> value of 5.');
testString: assert(Math.round($('circle').eq(7).attr('cx')) == '261' && Math.round($('circle').eq(7).attr('cy')) == '132' && $('circle').eq(7).attr('r') == '5');
- text: The ninth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 144 after applying the scales. It should also have an <code>r</code> value of 5.
testString: assert(Math.round($('circle').eq(8).attr('cx')) == '131' && Math.round($('circle').eq(8).attr('cy')) == '144' && $('circle').eq(8).attr('r') == '5', 'The ninth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 144 after applying the scales. It should also have an <code>r</code> value of 5.');
testString: assert(Math.round($('circle').eq(8).attr('cx')) == '131' && Math.round($('circle').eq(8).attr('cy')) == '144' && $('circle').eq(8).attr('r') == '5');
- text: The tenth <code>circle</code> element should have a <code>cx</code> value of approximately 79 and a <code>cy</code> value of approximately 326 after applying the scales. It should also have an <code>r</code> value of 5.
testString: assert(Math.round($('circle').eq(9).attr('cx')) == '79' && Math.round($('circle').eq(9).attr('cy')) == '326' && $('circle').eq(9).attr('r') == '5', 'The tenth <code>circle</code> element should have a <code>cx</code> value of approximately 79 and a <code>cy</code> value of approximately 326 after applying the scales. It should also have an <code>r</code> value of 5.');
testString: assert(Math.round($('circle').eq(9).attr('cx')) == '79' && Math.round($('circle').eq(9).attr('cy')) == '326' && $('circle').eq(9).attr('r') == '5');
- text: Your code should have 10 <code>text</code> elements.
testString: assert($('text').length == 10, 'Your code should have 10 <code>text</code> elements.');
testString: assert($('text').length == 10);
- text: The first label should have an <code>x</code> value of approximately 100 and a <code>y</code> value of approximately 368 after applying the scales.
testString: assert(Math.round($('text').eq(0).attr('x')) == '100' && Math.round($('text').eq(0).attr('y')) == '368', 'The first label should have an <code>x</code> value of approximately 100 and a <code>y</code> value of approximately 368 after applying the scales.');
testString: assert(Math.round($('text').eq(0).attr('x')) == '100' && Math.round($('text').eq(0).attr('y')) == '368');
- text: The second label should have an <code>x</code> value of approximately 168 and a <code>y</code> value of approximately 181 after applying the scales.
testString: assert(Math.round($('text').eq(1).attr('x')) == '168' && Math.round($('text').eq(1).attr('y')) == '181', 'The second label should have an <code>x</code> value of approximately 168 and a <code>y</code> value of approximately 181 after applying the scales.');
testString: assert(Math.round($('text').eq(1).attr('x')) == '168' && Math.round($('text').eq(1).attr('y')) == '181');
- text: The third label should have an <code>x</code> value of approximately 350 and a <code>y</code> value of approximately 329 after applying the scales.
testString: assert(Math.round($('text').eq(2).attr('x')) == '350' && Math.round($('text').eq(2).attr('y')) == '329', 'The third label should have an <code>x</code> value of approximately 350 and a <code>y</code> value of approximately 329 after applying the scales.');
testString: assert(Math.round($('text').eq(2).attr('x')) == '350' && Math.round($('text').eq(2).attr('y')) == '329');
- text: The fourth label should have an <code>x</code> value of approximately 141 and a <code>y</code> value of approximately 60 after applying the scales.
testString: assert(Math.round($('text').eq(3).attr('x')) == '141' && Math.round($('text').eq(3).attr('y')) == '60', 'The fourth label should have an <code>x</code> value of approximately 141 and a <code>y</code> value of approximately 60 after applying the scales.');
testString: assert(Math.round($('text').eq(3).attr('x')) == '141' && Math.round($('text').eq(3).attr('y')) == '60');
- text: The fifth label should have an <code>x</code> value of approximately 449 and a <code>y</code> value of approximately 237 after applying the scales.
testString: assert(Math.round($('text').eq(4).attr('x')) == '449' && Math.round($('text').eq(4).attr('y')) == '237', 'The fifth label should have an <code>x</code> value of approximately 449 and a <code>y</code> value of approximately 237 after applying the scales.');
testString: assert(Math.round($('text').eq(4).attr('x')) == '449' && Math.round($('text').eq(4).attr('y')) == '237');
- text: The sixth label should have an <code>x</code> value of approximately 280 and a <code>y</code> value of approximately 306 after applying the scales.
testString: assert(Math.round($('text').eq(5).attr('x')) == '280' && Math.round($('text').eq(5).attr('y')) == '306', 'The sixth label should have an <code>x</code> value of approximately 280 and a <code>y</code> value of approximately 306 after applying the scales.');
testString: assert(Math.round($('text').eq(5).attr('x')) == '280' && Math.round($('text').eq(5).attr('y')) == '306');
- text: The seventh label should have an <code>x</code> value of approximately 370 and a <code>y</code> value of approximately 351 after applying the scales.
testString: assert(Math.round($('text').eq(6).attr('x')) == '370' && Math.round($('text').eq(6).attr('y')) == '351', 'The seventh label should have an <code>x</code> value of approximately 370 and a <code>y</code> value of approximately 351 after applying the scales.');
testString: assert(Math.round($('text').eq(6).attr('x')) == '370' && Math.round($('text').eq(6).attr('y')) == '351');
- text: The eighth label should have an <code>x</code> value of approximately 270 and a <code>y</code> value of approximately 132 after applying the scales.
testString: assert(Math.round($('text').eq(7).attr('x')) == '270' && Math.round($('text').eq(7).attr('y')) == '132', 'The eighth label should have an <code>x</code> value of approximately 270 and a <code>y</code> value of approximately 132 after applying the scales.');
testString: assert(Math.round($('text').eq(7).attr('x')) == '270' && Math.round($('text').eq(7).attr('y')) == '132');
- text: The ninth label should have an <code>x</code> value of approximately 140 and a <code>y</code> value of approximately 144 after applying the scales.
testString: assert(Math.round($('text').eq(8).attr('x')) == '140' && Math.round($('text').eq(8).attr('y')) == '144', 'The ninth label should have an <code>x</code> value of approximately 140 and a <code>y</code> value of approximately 144 after applying the scales.');
testString: assert(Math.round($('text').eq(8).attr('x')) == '140' && Math.round($('text').eq(8).attr('y')) == '144');
- text: The tenth label should have an <code>x</code> value of approximately 88 and a <code>y</code> value of approximately 326 after applying the scales.
testString: assert(Math.round($('text').eq(9).attr('x')) == '88' && Math.round($('text').eq(9).attr('y')) == '326', 'The tenth label should have an <code>x</code> value of approximately 88 and a <code>y</code> value of approximately 326 after applying the scales.');
testString: assert(Math.round($('text').eq(9).attr('x')) == '88' && Math.round($('text').eq(9).attr('y')) == '326');
```

6
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.english.md
View File

@ -49,11 +49,11 @@ Use the <code>yScale</code> variable to create a linear y-axis scale. The domain
```yml
tests:
- text: The text in the <code>h2</code> should be 30.
testString: assert(output == 30 && $('h2').text() == '30', 'The text in the <code>h2</code> should be 30.');
testString: assert(output == 30 && $('h2').text() == '30');
- text: The <code>domain()</code> of yScale should be equivalent to <code>[0, 411]</code>.
testString: assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]), 'The <code>domain()</code> of yScale should be equivalent to <code>[0, 411]</code>.');
testString: assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]));
- text: The <code>range()</code> of yScale should be equivalent to <code>[470, 30]</code>.
testString: assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]), 'The <code>range()</code> of yScale should be equivalent to <code>[470, 30]</code>.');
testString: assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]));
```

2
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.english.md
View File

@ -41,7 +41,7 @@ The <code>positionData</code> variable holds a 3-dimensional (3D) array. Use a D
```yml
tests:
- text: The text in the <code>h2</code> should be 8.
testString: assert(output == 8 && $('h2').text() == '8', 'The text in the <code>h2</code> should be 8.');
testString: assert(output == 8 && $('h2').text() == '8');
- text: Your code should use the <code>max()</code> method.
testString: assert(code.match(/\.max/g), 'Your code should use the <code>max()</code> method.')

8
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.english.md
View File

@ -40,13 +40,13 @@ Select the <code>body</code> node, then select all <code>h2</code> elements. Hav
```yml
tests:
- text: Your document should have 9 <code>h2</code> elements.
testString: assert($('h2').length == 9, 'Your document should have 9 <code>h2</code> elements.');
testString: assert($('h2').length == 9);
- text: The text in the <code>h2</code> elements should say "New Title". The capitalization and spacing should match exactly.
testString: assert($('h2').text().match(/New Title/g).length == 9, 'The text in the <code>h2</code> elements should say "New Title". The capitalization and spacing should match exactly.');
testString: assert($('h2').text().match(/New Title/g).length == 9);
- text: Your code should use the <code>data()</code> method.
testString: assert(code.match(/\.data/g), 'Your code should use the <code>data()</code> method.');
testString: assert(code.match(/\.data/g));
- text: Your code should use the <code>enter()</code> method.
testString: assert(code.match(/\.enter/g), 'Your code should use the <code>enter()</code> method.');
testString: assert(code.match(/\.enter/g));
```

18
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.english.md
View File

@ -25,23 +25,23 @@ Change the <code>text()</code> method so that each <code>h2</code> element displ
```yml
tests:
- text: The first <code>h2</code> should have the text "12 USD".
testString: assert($('h2').eq(0).text() == "12 USD", 'The first <code>h2</code> should have the text "12 USD".');
testString: assert($('h2').eq(0).text() == "12 USD");
- text: The second <code>h2</code> should have the text "31 USD".
testString: assert($('h2').eq(1).text() == "31 USD", 'The second <code>h2</code> should have the text "31 USD".');
testString: assert($('h2').eq(1).text() == "31 USD");
- text: The third <code>h2</code> should have the text "22 USD".
testString: assert($('h2').eq(2).text() == "22 USD", 'The third <code>h2</code> should have the text "22 USD".');
testString: assert($('h2').eq(2).text() == "22 USD");
- text: The fourth <code>h2</code> should have the text "17 USD".
testString: assert($('h2').eq(3).text() == "17 USD", 'The fourth <code>h2</code> should have the text "17 USD".');
testString: assert($('h2').eq(3).text() == "17 USD");
- text: The fifth <code>h2</code> should have the text "25 USD".
testString: assert($('h2').eq(4).text() == "25 USD", 'The fifth <code>h2</code> should have the text "25 USD".');
testString: assert($('h2').eq(4).text() == "25 USD");
- text: The sixth <code>h2</code> should have the text "18 USD".
testString: assert($('h2').eq(5).text() == "18 USD", 'The sixth <code>h2</code> should have the text "18 USD".');
testString: assert($('h2').eq(5).text() == "18 USD");
- text: The seventh <code>h2</code> should have the text "29 USD".
testString: assert($('h2').eq(6).text() == "29 USD", 'The seventh <code>h2</code> should have the text "29 USD".');
testString: assert($('h2').eq(6).text() == "29 USD");
- text: The eighth <code>h2</code> should have the text "14 USD".
testString: assert($('h2').eq(7).text() == "14 USD", 'The eighth <code>h2</code> should have the text "14 USD".');
testString: assert($('h2').eq(7).text() == "14 USD");
- text: The ninth <code>h2</code> should have the text "9 USD".
testString: assert($('h2').eq(8).text() == "9 USD", 'The ninth <code>h2</code> should have the text "9 USD".');
testString: assert($('h2').eq(8).text() == "9 USD");
```

2
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.english.md
View File

@ -34,7 +34,7 @@ For the cat with the "id" of 2, print to the console the second value in the <co
```yml
tests:
- text: Your code should use bracket and dot notation to access the proper code name, and print "Loki" to the console.
testString: assert(code.match(/(?:json\[2\]\.codeNames\[1\]|json\[2\]\[('|")codeNames\1\]\[1\])/g), 'Your code should use bracket and dot notation to access the proper code name, and print "Loki" to the console.');
testString: assert(code.match(/(?:json\[2\]\.codeNames\[1\]|json\[2\]\[('|")codeNames\1\]\[1\])/g));
```

2
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.english.md
View File

@ -23,7 +23,7 @@ Add code inside the <code>onclick</code> event handler to change the text inside
```yml
tests:
- text: Your code should use the <code>document.getElementsByClassName</code> method to select the element with class <code>message</code> and set its <code>textContent</code> to the given string.
testString: assert(code.match(/document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.textContent\s*?=\s*?('|")Here is the message\2/g), 'Your code should use the <code>document.getElementsByClassName</code> method to select the element with class <code>message</code> and set its <code>textContent</code> to the given string.');
testString: assert(code.match(/document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.textContent\s*?=\s*?('|")Here is the message\2/g));
```

6
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.english.md
View File

@ -50,11 +50,11 @@ Here is some example JSON
```yml
tests:
- text: Your code should store the data in the <code>html</code> variable
testString: assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g), 'Your code should store the data in the <code>html</code> variable');
testString: assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g));
- text: Your code should use a <code>forEach</code> method to loop over the JSON data from the API.
testString: assert(code.match(/json\.forEach/g), 'Your code should use a <code>forEach</code> method to loop over the JSON data from the API.');
testString: assert(code.match(/json\.forEach/g));
- text: Your code should wrap the key names in <code>strong</code> tags.
testString: assert(code.match(/<strong>.+<\/strong>/g), 'Your code should wrap the key names in <code>strong</code> tags.');
testString: assert(code.match(/<strong>.+<\/strong>/g));
```

8
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.english.md
View File

@ -34,13 +34,13 @@ Add the example code inside the <code>script</code> tags to check a user's curre
```yml
tests:
- text: Your code should use <code>navigator.geolocation</code> to access the user&#39;s current location.
testString: assert(code.match(/navigator\.geolocation\.getCurrentPosition/g), 'Your code should use <code>navigator.geolocation</code> to access the user&#39;s current location.');
testString: assert(code.match(/navigator\.geolocation\.getCurrentPosition/g));
- text: Your code should use <code>position.coords.latitude</code> to display the user&#39;s latitudinal location.
testString: assert(code.match(/position\.coords\.latitude/g), 'Your code should use <code>position.coords.latitude</code> to display the user&#39;s latitudinal location.');
testString: assert(code.match(/position\.coords\.latitude/g));
- text: Your code should use <code>position.coords.longitude</code> to display the user&#39;s longitudinal location.
testString: assert(code.match(/position\.coords\.longitude/g), 'Your code should use <code>position.coords.longitude</code> to display the user&#39;s longitudinal location.');
testString: assert(code.match(/position\.coords\.longitude/g));
- text: You should display the user&#39;s position within the <code>data</code> div element.
testString: assert(code.match(/document\.getElementById\(\s*?('|")data\1\s*?\)\.innerHTML/g), 'You should display the user&#39;s position within the <code>data</code> div element.');
testString: assert(code.match(/document\.getElementById\(\s*?('|")data\1\s*?\)\.innerHTML/g));
```

12
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.english.md
View File

@ -40,17 +40,17 @@ Update the code to create and send a "GET" request to the freeCodeCamp Cat Photo
```yml
tests:
- text: Your code should create a new <code>XMLHttpRequest</code>.
testString: assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g), 'Your code should create a new <code>XMLHttpRequest</code>.');
testString: assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
- text: Your code should use the <code>open</code> method to initialize a "GET" request to the freeCodeCamp Cat Photo API.
testString: assert(code.match(/\.open\(\s*?('|")GET\1\s*?,\s*?('|")\/json\/cats\.json\2\s*?,\s*?true\s*?\)/g), 'Your code should use the <code>open</code> method to initialize a "GET" request to the freeCodeCamp Cat Photo API.');
testString: assert(code.match(/\.open\(\s*?('|")GET\1\s*?,\s*?('|")\/json\/cats\.json\2\s*?,\s*?true\s*?\)/g));
- text: Your code should use the <code>send</code> method to send the request.
testString: assert(code.match(/\.send\(\s*\)/g), 'Your code should use the <code>send</code> method to send the request.');
testString: assert(code.match(/\.send\(\s*\)/g));
- text: Your code should have an <code>onload</code> event handler set to a function.
testString: assert(code.match(/\.onload\s*=\s*(function|\(\s*?\))\s*?(\(\s*?\)|\=\>)\s*?{/g), 'Your code should have an <code>onload</code> event handler set to a function.');
testString: assert(code.match(/\.onload\s*=\s*(function|\(\s*?\))\s*?(\(\s*?\)|\=\>)\s*?{/g));
- text: Your code should use the <code>JSON.parse</code> method to parse the <code>responseText</code>.
testString: assert(code.match(/JSON\s*\.parse\(.*\.responseText\)/g), 'Your code should use the <code>JSON.parse</code> method to parse the <code>responseText</code>.');
testString: assert(code.match(/JSON\s*\.parse\(.*\.responseText\)/g));
- text: Your code should get the element with class <code>message</code> and change its inner HTML to the string of JSON data.
testString: assert(code.match(/document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.innerHTML\s*?=\s*?JSON\.stringify\(.+?\)/g), 'Your code should get the element with class <code>message</code> and change its inner HTML to the string of JSON data.');
testString: assert(code.match(/document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.innerHTML\s*?=\s*?JSON\.stringify\(.+?\)/g));
```

4
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.english.md
View File

@ -33,9 +33,9 @@ Add a click event handler inside of the <code>DOMContentLoaded</code> function f
```yml
tests:
- text: Your code should use the <code>document.getElementById</code> method to select the <code>getMessage</code> element.
testString: assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g), 'Your code should use the <code>document.getElementById</code> method to select the <code>getMessage</code> element.');
testString: assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g));
- text: Your code should add an <code>onclick</code> event handler.
testString: assert(typeof document.getElementById('getMessage').onclick === 'function', 'Your code should add an <code>onclick</code> event handler.');
testString: assert(typeof document.getElementById('getMessage').onclick === 'function');
```

14
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.english.md
View File

@ -40,17 +40,17 @@ Update the code to create and send a "POST" request. Then enter your name in inp
```yml
tests:
- text: Your code should create a new <code>XMLHttpRequest</code>.
testString: assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g), 'Your code should create a new <code>XMLHttpRequest</code>.');
testString: assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
- text: Your code should use the <code>open</code> method to initialize a "POST" request to the server.
testString: assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g), 'Your code should use the <code>open</code> method to initialize a "POST" request to the server.');
testString: assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g));
- text: Your code should use the <code>setRequestHeader</code> method.
testString: assert(code.match(/\.setRequestHeader\(\s*?('|")Content-Type\1\s*?,\s*?('|")application\/json;\s*charset=UTF-8\2\s*?\)/g), 'Your code should use the <code>setRequestHeader</code> method.');
testString: assert(code.match(/\.setRequestHeader\(\s*?('|")Content-Type\1\s*?,\s*?('|")application\/json;\s*charset=UTF-8\2\s*?\)/g));
- text: Your code should have an <code>onreadystatechange</code> event handler set to a function.
testString: assert(code.match(/\.onreadystatechange\s*?=/g), 'Your code should have an <code>onreadystatechange</code> event handler set to a function.');
- text: Your code should get the element with class <code>message</code> and change its text content to the <code>responseText</code>.
testString: assert(code.match(/document\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\.textContent\s*?=\s*?.+?\.userName\s*?\+\s*?.+?\.suffix/g), 'Your code should get the element with class <code>message</code> and change its text content to the <code>serverResponse</code>.');
testString: assert(code.match(/\.onreadystatechange\s*?=/g));
- text: Your code should get the element with class <code>message</code> and change its <code>textContent</code> to "<code>userName</code> loves cats"
testString: assert(code.match(/document\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\.textContent\s*?=\s*?.+?\.userName\s*?\+\s*?.+?\.suffix/g));
- text: Your code should use the <code>send</code> method.
testString: assert(code.match(/\.send\(\s*?body\s*?\)/g), 'Your code should use the <code>send</code> method.');
testString: assert(code.match(/\.send\(\s*?body\s*?\)/g));
```

2
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.english.md
View File

@ -29,7 +29,7 @@ Add code to <code>filter</code> the json data to remove the cat with the "id" va
```yml
tests:
- text: Your code should use the <code>filter</code> method.
testString: assert(code.match(/json\.filter/g), 'Your code should use the <code>filter</code> method.');
testString: assert(code.match(/json\.filter/g));
```

2
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.english.md
View File

@ -23,7 +23,7 @@ Add code to use the <code>imageLink</code> and <code>altText</code> properties i
```yml
tests:
- text: You should use the <code>imageLink</code> property to display the images.
testString: assert(code.match(/val\.imageLink/g), 'You should use the <code>imageLink</code> property to display the images.');
testString: assert(code.match(/val\.imageLink/g));
```